Veezon's Application Icon / Logo Tutorial | Very detailed | Step by step tutorial - Veezon - Oct 7, 2014
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...
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:
https://i.imgur.com/iC9Qd2Z.png
* - ℋulk - Oct 7, 2014
Wow, that's a very detailed but good guide, might actually try it out sometime since I can definetely learn from this.
* - Veezon - Oct 7, 2014
(Oct 7, 2014 11:18 AM)ℋulk Wrote: 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 - Oct 7, 2014
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 - Oct 7, 2014
(Oct 7, 2014 11:33 AM)Xeero Wrote: 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 - Oct 25, 2014
Awesome tutorial!
Thanks OP👍
* - Veezon_Temp - Jan 27, 2015
This could certainly be of use to some people still, would recommend checking it out.
|
