[Veezon]

Hey guys, this is just my tutorial on how to make a simple but nice looking application icon. This guide is very detailed and is intended for beginners as I go into every tiny detail on each step. Let's get into it.

Also, opening and closing the links is due to me not being able to add more than 15 images to a thread. I wish I could...

Spoiler (Click to View)
1) Open up a Photoshop document with the following settings:
https://i.imgur.com/wsNpAEW.png

2) Select the 'Rounded Rectangle Tool' from the shapes menu.
https://i.imgur.com/zVBprGP.png

3) Draw a rounded rectangle, 1900x1900 pixels.
https://i.imgur.com/e8cYpXy.png

4) Once you have done this, align it to the center of the canvas, as follows:
https://i.imgur.com/vsiNQck.png

5) Now remove the stroke from the shape.
https://i.imgur.com/JwzuvaS.png

6) We are now going to add a gradient overlay / a color overlay (depends what you like best!)
https://i.imgur.com/N2VKHAQ.png

7) Follow the steps in the image or try to get a color you like (I reverted back to color overlay later in the tutorial).
https://i.imgur.com/RoIYyCc.png

8) Now go to the 'Custom Shape Tool' in the shapes menu on the toolbar.
https://i.imgur.com/IdTcPPs.png

9) Now select the chat box shape from the top toolbar, far right.
https://i.imgur.com/3OZbfFW.png

10) Draw the chat box on your canvas.
https://i.imgur.com/aziBPx8.png

11) Copy the chat box by clicking on to the layer and then pressing CTRL+J
https://i.imgur.com/1aEGgyR.png

12) Now you should have 2 copies, adjust the second one to a position you like, preferably to the right of the first one and a little up so you can see the difference.
https://i.imgur.com/fTERSz7.png

13) Add a stroke to the copy layer, like this:
https://i.imgur.com/EesmwvR.png

14) Click on the labels in the screenshot, first click on the color selector and then click the color of the canvas so that the stroke is the same color as the background.
https://i.imgur.com/PVP6jR1.png

15) Change the stroke size to 5 - 10px.
https://i.imgur.com/LaFuOHI.png

16) Press CTRL+T and rotate the layer with the stroke very slightly.
https://i.imgur.com/zG6sNBT.png

17) On one of the chat boxes, turn the width to -100 so that it is different to the other.
https://i.imgur.com/Le6TP92.png

18) Now rasterize the layer with the stroke, follow the steps here:
https://i.imgur.com/PTDATDV.png

19) Merge the layers together, to do this, hold shift and select both layers (make sure they are next to each other as shown in the scrnshot) and then press CTRL+E to merge them.
https://i.imgur.com/jfebRlY.png

20) Whilst on the new merged layer, press CTRL+A to select the entire canvas and then align it to the center, as shown in the screenshot.
https://i.imgur.com/TcjZ4pD.png

21) Now go to the custom shapes menu again, it's time to decorate the chat boxes.
https://i.imgur.com/ZnXzbS1.png

22) Select the music symbol, this will be an icon for a music / chat app.
https://i.imgur.com/p6jkSeR.png

23) Make the symbol's height and width equal, in my case, I made it 520x520.
https://i.imgur.com/VaoP6D3.png

24) Remove the stroke from the new shape.
https://i.imgur.com/ZRhcm36.png

25) On the new shape, create a color overlay.
https://i.imgur.com/IQxP256.png

26) Repeat the steps of adding the stroke to the chat box earlier (click on color selector and then click the blue background of the app tile / background)
https://i.imgur.com/Tn2kDY8.png

27) Time to add a neat looking shadow, go to the shape selector and add a rectangle.
https://i.imgur.com/hTXPA4O.png

28) Add color overlay to the new rectangle.
]https://i.imgur.com/yQThJ06.png

29) Make the color of the rectangle pitch black or dark gray.
https://i.imgur.com/JXCv6Uc.png

30) Adjust the rectangle (CTRL+T) so it looks pretty equal to the chat box with no edges pointing out, and on a 45 degree angle, similar to this:
https://i.imgur.com/7ze5tql.png

31) Now turn the opacity down on the rectangle to 10%
https://i.imgur.com/ip6zA6U.png

32) Rasterize the shadow layer now (AKA rectangle)
https://i.imgur.com/m8a1QBc.png

33) We are now going to remove the remainders of our shadow on the sides, use the selector tool for this, select the sides where the shadow sticks out, making sure you're on the shadow layer (rectangle), press backspace to remove the bits from the side.
https://i.imgur.com/023rqqL.png

34) To add more detail to the icon, we can add another music icon, click on the music icon layer and press CTRL+J to duplicate it.
https://i.imgur.com/LyjHUav.png

35) Select the cursor tool.
https://i.imgur.com/VejxPlD.png

36) We will now move the music icon into the second text box, it doesn't matter if it overlaps.
https://i.imgur.com/CZ6wD55.png

37) Rasterize the duplicated shape.
https://i.imgur.com/6vhKot9.png

38) Select the rubber tool and them select an appropriate size.
https://i.imgur.com/pBL5I7J.png

39) Rub away the remainders of the music note in the other chat box.
https://i.imgur.com/qnbA5q2.png

40) Head to file and save the icon as a PNG. Be sure you removed the background layer which will be the white layer at the bottom.
https://i.imgur.com/ZVCmGcR.png


Finished product:
Spoiler (Click to View)
https://i.imgur.com/iC9Qd2Z.png

[ℋulk]

Wow, that's a very detailed but good guide, might actually try it out sometime since I can definetely learn from this.

[Veezon]

Wow, that's a very detailed but good guide, might actually try it out sometime since I can definetely learn from this.

Glad you found it useful buddy! Hope you can learn from this:)

[Xeero]

Great Tutorial man!

Had a go at it, it's like a dating app variant.
https://i.imgur.com/69aj6j7.png

Simple yet effective! Good stuff, keep it up. 👍

[Veezon]

Great Tutorial man!

Had a go at it, it's like a dating app variant.
https://i.imgur.com/69aj6j7.png

Simple yet effective! Good stuff, keep it up. 👍

Wow, looks fantastic, probably better than my version!

[Phantom.13]

Awesome tutorial!
Thanks OP👍

[Veezon_Temp]

This could certainly be of use to some people still, would recommend checking it out.