Design a photorealistic app icon in Photoshop

In this tutorial, I’ll explain how to use light and shadow to make realistic artwork – in this case, a record player app icon. Using Photoshop’s powerful layer styles, I’ll show you how to produce impressive results in a short amount of time.

We’re also going to use a technique for quickly changing the colour of textures, and I’ll share some expert tips that I use in my work for adding realism.
 

01 First sketch out your icon idea. I drew the vinyl initially, before adding the rest of the elements, such as the stylus and switch button. I like to make my sketches look 3D but without using perspective, so I added rounded rectangles to make it look like an open box.
 

02 Scan your sketch and import it into Photoshop. Select the Gradient tool and then fill the background from dark to light. Next, draw a 512x512px square using the Rounded Rectangle tool, setting the radius of the corners to 90px. Now hold down Opt/Alt and select the shape, create a new folder called ‘Icon’ and make a mask for the folder.
 

03 The colour choice for your icon is very important. Avoid absolute colours to make the icon more realistic. For the vinyl I used dark brown instead of black, and for the switch button I used light brown instead of grey.

Advertisement

04 Using the Layer Style options we can add some interesting effects. For the vinyl record, I added a Radial Gradient Overlay with the blend mode set to Color Dodge, and to make the lines I added a noise gradient. Duplicate the layer and change the gradient type to Solid to create the impression of light reflecting from the record.
 

05 Now create some areas of shadow using the Color or Linear Burn blend modes, followed by some areas of light with Color or Linear Dodge. This will make the light and shadow effects more convincing. For the stylus and the switch button, I added a drop shadow and used it as reflection of the light.