Learn How To Create An IOS Fabric Style Icon

Still on the hot topic of mobile design, In todays tutorial I’ll be showing you how to create your very own 3D style fabric IOS icon.

What We’ll Be Creating

Resources Used In This Tutorial

Download The IOS Template

Lets get started. Download the IOS icon template from the resource list then open it up in photoshop.

• 
  

Once open in photoshop locate a layer called “EDIT THIIS SMART OBJECT”. Once the layer has been located simply double click it to start editing it.

Creating The Icon

Once you’ve opened the smart object you will be presented with a blue background. From within the layers palette hide the layer group “Blue” then create a new group and call it “Fabric”. At the very top of the layers palette there is a layer called “HIDE ME WHEN DONE” Hold down the “Ctrl” key on the keyboard and left click the thumbnail, doing this will load a selection. Once the selection has been loaded go to “Select > Inverse”, create a new layer inside of the “Fabric” folder then fill (G) the selection with any color.

Now download the fabric texture set and install them inside of photoshop.

• 
  

Once the patterns are installed add the following layer styles to your shape.


You should have something like this.

Turning The Icon 3D

Load a selection around the top layer again, inverse the selection like we did before then fill (G) the selection on a new layer inside of the fabric folder. Select the “Move Tool” (V) then move the shape up by 80 pixels.

Tip

Hold down the shift key whilst the “Move Tool” (V) is selected then push the up arrow key. The shape will move up by 10 pixels with every press.

We now need to make the top half of our icon rounded like it was before. To do this simply load a selection around the top layer then simply press delete.

To your top shape layer add the following layer styles, take note on which pattern I’ve used.


You should have something like this.

Create a new blank layer in between your two layers you currently have, then once again load a selection around the top layer, inverse the selection then fill (G) the selection with the color white #ffffff. Add a layer mask to the black shape then drag a reflected gradient from the middle of the canvas dragging outwards. Once you’ve added the gradient set the opacity to 9%, doing this will just add a bit of lightness to the edge of the icon.

Creating The Fabric Creases

Create a new document 1024 x 1024 with a transparent background. Reset your background and foreground colors to black and white then select the “Gradient Tool” (G) with the following settings.

Once you’ve applied the settings randomly drag numerous gradients over the canvas. You will have a completely different set of wrinkles every time you do this so don’t worry if your image looks nothing like mine.

Now go to “Filter > Stylize > Emboss”.


Select the whole canvas (Ctrl + A) then copy the contents to the clipboard (Ctrl + C). Head back to your original document then paste (Ctrl + V) contents onto your icon. Load a selection around the top layer then hit the delete key to remove the edges from the pasted content.

Set the new layers blend mode to “Linear Light” to blend in creases.

Adding The Logo

Using your desired logo add it to your icon.

Now add the following layer styles to your icon.


You should have something like this.

Select your creases layer then load a selection around your logo shape. Now press “Ctrl + C” then “Shift + Ctrl + V) move the pasted layer to the top of the stack above your logo then set the layer blend mode to “Linear Light”. Basically what we’ve done is added the creases to the logo, now add the following layer style to your logo creases layer.

You should have something like this.

Creating The Stitches

Open the brush window (F5) then select the brush tool (B). Now apply the following settings.


Load a selection around your logo then go to “Window > Paths”. Inside the paths window press the following button.

Now the path has been loaded head back to the layers palette and create a new layer then select the “Pen Tool” (P) with the color black #000000 as your foreground. Right click on your canvas and select “Stroke Path”.


Finally add the following layer styles to the stitches layer to complete the tutorial.



Once your done press “Ctrl + S” to save then close the smart object. You should be left with your icon.

Conclusion

Thanks for taking part in this tutorial, if you managed to finish this tutorial I’d love to see some of your results.

Download Source

License and Attribution:

This file is licensed under the Creative Commons license. Attribution is required and always appreciated. Thanks.