Today’s Photoshop cs6 Tutorial in Graphic and Web Design blog is to create a Photoshop icon apps. Recently we created two photo effects tutorial in Photoshop cs6 and this is another tutorial for creating icon. You can download the PSD (Photoshop format) at the end of the post.

The new Photoshop CS6 UI is very interesting with the dark theme, anyhow who doesn’t like dark theme can change the interface. I think this is the first time they added these features.
Before roll into the tutorial you might like this Photoshop CS6 photo effect tutorial:

Create a Photoshop CS6 Apps Icon Tutorial

[xyz-ihs snippet=”728″]
As we mentioned earlier, you can try this effect in your lower version also. But working in new dark interface made me to do this icon rather than my Photoshop cs3 version. And my point is those who did not upgrade their Photoshop from cs3 version – a good time to upgrade directly.
Tutorial Requirements:
User : BASIC
Software: Photoshop CS6 or CS3 (You can use in Mac also)
Duration: 20 minute.

 

Final Output

 

Step: 1

Create a new document 600px X 600px (resolution 72) by selecting File->New or [Ctrl+N] and set your background as #343434.

Step:2

We need to create a base for the icon apps, now create a shape with “Rounded Rectangle Tool (U)” with width and height 256px. However there is no limitation to your ideas or imagination. Name the layer “Base”

Step: 3

Now we are going to Add Layer styles to the Base named layer. We are going to add a simple gradient overlay effect, see the screenshot below. Angle: 0, Style: reflected and align with layer.

Preview of Base Layer

Step: 4

[xyz-ihs snippet=”720″]
Now duplicate the Base layer and move upward by pressing “ALT” key and up arrow in keyboard. There will be new gradient overlay effect to this layer and a 3 or 5 px stroke. Name this layer “primary base”.

The Gradient overlay effect settings are Style: reflected with align with layer and angle should be 90 degree.
Click on the gradient slider to change the effect.

Primary Base layer Preview

Step: 5

We finished creating the button, now we need to add a stage for placing the icon. It’s time to make a duplicate of “primary base “layer and reduce the size of the rounded rectangle.
Use the Transformation too “CTRL+T” and by holding the keyboard key “Ctrl+Alt” now reduce the shape – which will make a perfect rounded rectangle to the primary base one. Name this layer “Stage”

We added the same default colour of the new Photoshop CS6 icon, there may be slight difference. above we added Layer style to the “Stage” layer. In this layer style we added “ Bevel & emboss”, “Inner shadow”, Color overlay.

Preview of Stage layer

Step : 6

Adding Text to the Icons,We used “Helvetica“, but you can use “cool Helvetica” free font – if you need or use your own bold font. Remember to add #9fcefa to the text color.

Step: 7

[xyz-ihs snippet=”backfill”]
This is an optional step, but to make it as unique compare to other apps icon, you can add those gradient settings to the new layer below the “Stage” layer. You can download them in the give PSD.

Hope you enjoyed while creating this icon apps. To encourage us for giving more tutorials like this – kindly say your feedback or any ideas to make it better they way you feel it.
Have a awesome weekend. Kindly download the Photoshop icon apps psd and do not sell it. Use for your personal and commercial purpose – giving back a link to us will encourage us.

[pwal id=”37810733″ description=”Like to Download the Link”]

[/pwal]

Bookmark this Page ! Kindly Share it