In this tutorial, we will be creating everything but textures as scalable shape elements in Photoshop, resulting in an icon for the iTunes Store. This method will enable us to quickly optimise the icon for different sizes. Everything will be made by using simple shapes in Photoshop, and we will give everything depth by using layer styles.
As the iPad display is made up by pixels, we'll start out by configuring Photoshop units to use pixels {if you don't want to mess with your settings, just skip ahead and continue with the main tutorial). Select Photoshop>Preferences> Units & Rulers and update both Rulers and Type to 'Pixels! Select'Guides.Grid & Slices; and set the'Gridlineevery'amountto 10 pixels, with a 'Subdivisions'value of 10.
1 - Create a new Photoshop document at 512x512px. Set resolution to 132ppi. Make the background transparent. Create a rounded rectangle with a corner radius of 87px at the size of your document. With the rectangle selected, create a new solid colour with the values R: 236, G: 222, B: 164, The solid colour should be masked with the rounded rectangle.
2 - Now let's add some styles to that background. Select the layer, click Add Layer Style and select 'Inner Glow'with the colour values R: 230, G: 175, 6:106 at 45% opacity, 180px, and with Overlay as the blend mode. Now add a Gradient Overlay layer style with Soft Light as the blend mode, at 72% opacity and at a 105-degree angle.
3 - Create a new rectangle shape, 5px wide and 512 pixels high. Duplicate the shape by holding Alt/Opt and dragging the shape to the right. With the rectangle selected, create a new solid colour from your Layers panel with the values R: 194, G: 103, B: 78. Set Opacity to 60%. Duplicate the layer and rotate the lines 90 degrees. Double-click the solid colour layer and change colour values to R: 89, G: 119, B: 164. Duplicate and drag the line until you have nine blue lines.
4 - Now we are going to add the top part of the notepad. Create another rectangle SI 2px wide and 140px high. With the rectangle selected, create a new solid colour from your Layers panel with the values R: 86, G: 64, B: 39. Select the layer and add a new Drop Shadow layer style with Opacity at 65%, Distance at 5px and Angle at 90 degrees. Add an Inner Shadow with an Overlay blend mode at 20% opacity and an angle of-90 degrees.
5 - Add Inner Glow, colour values R: 209, G: 176 and B: 52. Set Blend Mode as Linear Dodge, Opacity at 5% and Size at 100px. Add a standard Gradient Overlay with Blend Mode as Soft Light, Opacity at 53% and at 105 degrees. Create a new layer group underneath the brown rectangle layer you just made.
6 - Make a new rectangle and create a new solid colour with the values R: 236, G: 222, B: 164. With the Pen tool, add vectors along the lower part of the rectangle to make it look tike torn paper. Add a Drop Shadow layer style (colour values R: 170, G: 93, B: 15; Opacity 45%; Distance 5px; Size Spx; Noise 2%), Add an Inner Glow layer style (Opacity 8%; Linear Dodge; colour values R: 255, G: 255, B: 190; Size 1 px) and a Gradient Overlay layer style (black to white; 90 degrees; Opacity 45%; Soft Light), Add a Stroke layer style (Size 1 px; Colour values R: 247, G: 239, B: 220). Duplicate the layer and flip it horizontally to add another torn page.
7 - Create a new rectangle above the torn paper layers. Create a new solid colour from your Layers panel with the values R: 0, G: 0, B: 0. Add a Drop Shadow layer style (Colour values R: 123, G: 64, B: 5; Blend Mode Multiply; Opacity 70%, Distance 10px; Size 20px; Noise 2%).
8 - Your Layers panel should look something like image 8 above. Now we just need to add the final touches. Create a new layer group and call it Details. Create a new rectangle, 512px wide and 5px high, and fill it with a new solid colour with the values R: 86, G: 64, B: 39.
9 - Select the layer and add a new Drop Shadow layer style, using white as a fili colour, and Normal as the blend mode. Set Opacity to 17% and Distance to 1 px. Add an Inner Shadow with Blend Mode at Multiply and Opacity at 46%. Set Distance to 2px and Size to4px,
10 - Create a new rectangle, 40px wide and Spx high. Fill it with a new solid colour with the values R 181, G: 167, B: 110, Add a new Drop Shadow layer style, with Blend Mode at Multiply, Opacity at 60%, Distance at 1 px, Size at 4px and Noise at 2px. Add Inner Shadow, with Blend Mode at Colour Burn, Opacity at 55%, Distance at 1 px, and Size at 4px. A Gradient Overlay will add a subtle metallic effect. Set Blend Mode to Soft Light, Opacity to 91% and Style to Reflected. Set Angle to 0 degrees, and bump Scale up to 150%. Right-click this layer and convert it to a Smart Object. Duplicate the metal band across the Notepad so you have eight bands in total.
11 - As the icon for the iTunes Store is masked automatically, with black added to all transparent areas, we need to add a background. Duplicate the yellow background. Select the shape and press Delete. When prompted, select 'Delete Vector Mask'. This will keep the fill layer but discard the mask.
12 - Congratulations! You now have a full resolution icon for the iTunes Store, and you're just a few simple steps away from having your iPad icon too. Save the icon as a 24bit PNG file for the store front.
13 - Now that we have our iTunes Store icon, let's take a look at the iPad version. Save your document as a new PSD file. Select lmage>lmage Size and set the document size to 72x72 pixels.
14 - Now we need to align the shapes to the pixel grid and optimise some of the elements that are too detailed. First select the blue horizontal lines with the Path Selection tool. Because some of the shapes are positioned on subpixel positions, they become blurry. Reposition the lines so that they align with the pixel grid, then select the two. torn paper layers. Scale them to 200% of their current size, and move them down 5 pixels. Now change the Drop Shadow opacity for the torn paper layers to 85%,
15 - Double-click one of the Metal Band Smart Objects. Change the Drop Shadow size to 0, then save and close the Smart Object. This will update all your Smart Objects. Finally, save the icon as a PNG file by selecting File>Save As and choosing PNG from the Format drop-down menu.
No comments:
Post a Comment