Create a Stylish Retro Camera iOS Icon in Photoshop


iOS icon

In this tutorial we’re going to create a nice camera/filters iOS app icon using pre-built Photoshop shapes, layer styles and some techniques that we’ve already shown in some of our previous tutorials.

 

Step 1

First of all, we need to clarify some things regarding the iOS icons. When designing an iOS icon make sure you don’t apply any rounded corners on your (what we always call in our tutorials) “base shape”. This is very important. Apple will do the cropping automatically as well as adding the shine/gloss effect (this is optional, and you can choose whether it will be applied or not). The next thing is that you have to be precise with your dimensions and always keep in mind that a 1024×1024 version may look good but the 72×72 is a completely different story. Thus, experiment with the size throughout the design process to make sure everything looks good. The last thing is creating a Retina-compatible version of your icon. The “Retina display” is basically a cool name for Apple’s LCD screens that do however have a significantly higher pixel density, which allow your eye to see things smoother without noticing any pixelation at all. So, if you want your icon to be compatible with the Retina displays, simply add the “@2x” to your icon’s name and double its size. Let’s say you create a 72×72 version of this icon and save it as “camera.png”. All you have to do is create another version with the dimensions set to 144×144 and save it as “ This email address is being protected from spambots. You need JavaScript enabled to view it. ”. Here are the icons’ dimensions and their rounded corner radius.

camicon-01

 

Step 2

Create a new file in Photoshop. We’re going to create the big 1024×1024 version so make the canvas’es size at least 1300×1300 and set the resolution to 300 dpi. Now grab the Rectangle Tool (U) and draw a 1024×1024 square. Fill it with 0f0f0f and name this layer “Base shape”.

 

Step 3

Create a new layer, clip it to the base shape layer and select the base shape’s pixels. Fill the selection with a random color, set the Fill to 0% and apply this gradient.

camicon-03

 

Step 4

Create a new layer and once again clip it to the base shape. Pick the Rounded Rectangle Tool (U) and set the radius to 180px. Draw a big rounded square and fill it with #252525. Move it downwards to give your icon a 3D effect. Apply the following styles (we’re not giving the exact stops for the gradient since we want a random shine effect).

camicon-04

camicon-041

camicon-042

camicon-043

 

Step 5

Duplicate this rounded square and turn the Fill of the copy to 0% (make sure it’s clipped to the base shape). Replace the existing styles with these ones.

camicon-05

camicon-051

 

Step 6

Create a new layer and add some highlights using the Pen Tool’s Stroke Path technique (hard round brush, 3px, pressure simulation: on).

camicon-06

 

Step 7

The next thing is to create a couple of buttons to decorate the upper part. So pick the Rounded Rectangle Tool (U), keep the radius at 180px and draw a big square. Place this layer before the one created in Step 3 (yes, clip it to the base shape). Fill it with #e8dece and add a layer mask. Paint with black to “erase” any unwanted parts. Keep doing this until you have something that looks like this. Then simply apply the following styles.

camicon-07

camicon-071

camicon-072

camicon-073

camicon-074

 

Step 8

Add some highlights using a soft round brush (color: white, blend mode: overlay, opacity: 60%).

camicon-08

 

Step 9

Duplicate this button (and the highlights layer) and flip the copies horizontally (Edit>Transform Path>Flip Horizontal) and move it to the other edge of the icon.

camicon-09

 

Step 10

Create a new layer, place it before right after the gradient layer created in Step 3 and draw three lines (use the first image as a guide). Merge them and turn the Fill to 0%. Then add the following styles.

camicon-10

camicon-101

camicon-102

camicon-103

 

Step 11

Create a new layer and add some highlights to make a depth-effect.

camicon-11

 

Step 12

From now on, no new layer should be clipped to the base shape. So, create a new layer and place it on top of the layers stack. Pick the Rounded Rectangle Tool (U), and start drawing some rounded rectangles (color: #252525). The radiuses that we used are: 20, 10, 5. Use the first image as a guide to create this shape. Once you’re done, merge all the rectangles and apply the following styles to this new layer.

camicon-12

camicon-121

camicon-122

camicon-123

camicon-124

camicon-125

 

Step 13

Create a new layer and using the same technique from the previous step (combining shapes) draw the shape of the first image (radiuses: 20, 5). Once again, when you’re done merge them and apply the following styles.

camicon-13

camicon-131

camicon-132

camicon-133

camicon-134

 

Step 14

Create a new layer and select the pixels of the shape created in the previous step. Paint the selection white, go Filter>Pixelate>Mezzotint, then Filter>Blur>Motion Blur (angle: 0, distance: 20-25). Change the Blend Mode to Color Burn and lower the Opacity to 40%.

camicon-14

 

Step 15

Now, create a new layer, pick the Ellipse Tool (U) and draw a perfect circle (hold Shift). Fill it with #cccccc and add a layer mask. Paint black the selection shown on the second image (red color) and then apply the following styles.

camicon-15

camicon-151

camicon-152

camicon-153

camicon-154

camicon-155

 

Step 16

Create a new layer and draw a smaller circle. Fill it with #dcf9f9 and apply these styles.

camicon-16

camicon-161

camicon-162

camicon-163

camicon-164

camicon-165

camicon-164

camicon-165

 

Step 17

Add some highlights to give a glass look.
camicon-17

 

Step 18

Group the layers created in Steps 15-18 and name the group “Mirror” (or whatever you want). Now, we’re going to create some screws. To do this we need to combine some shapes again. Draw a small ellipse (Ellipse Tool-U), duplicate it, move the copy upwards and draw a rectangle between these two ellipses. Change the colors of all the components to #c2c2c2. Merge the rectangle with the lower ellipse and apply the following styles. Change the colors of all the components to #c2c2c2.

camicon-18

camicon-181

camicon-182

 

Step 19

Select the upper ellipse and apply these styles.

camicon-19

camicon-191

camicon-192

 

Step 20

Pick the Rectangle Tool (U) and draw two small rectangles. Fill them with #898989 and form a cross. Rotate it by 45 degrees, distort it a little bit to give it some depth and apply these styles.

camicon-20

camicon-201

camicon-202

 

Step 21

Group the layers created in Steps 18-20 and name the group “Screw”. Duplicate this group three times and place the copies accordingly to the image below (the lower screws are flipped vertically and scaled up).

camicon-21

 

Step 22

Add some highlights.

camicon-22

 

Step 23

Create a new layer and pick the Rounded Rectangle Tool (U). Set the radius to 5px and draw a shape like the one on the first image. Fill it with #abcedb and apply the following styles.

camicon-23

camicon-231

camicon-232

camicon-233

camicon-234

camicon-235

camicon-234

 

Step 24

Duplicate this shape, clip the copy to the original rounded rectangle and move it a bit upwards. Replace the existing styles with these.

camicon-24

camicon-241

 

Step 25

There’s no point in describing the next element, since it’s basically a rounded rectangle with some random decorative elements inside. All the techniques used to create it have already been described in the tutorial.

camicon-25

 

Step 26

Your icon should look by now something like this.

camicon-26

 

Step 27

As you can see there’s one last element we need to create, the camera lens. This can be a bit tricky but it’s much easier than it looks. So, grab the Ellipse Tool (U) and draw a circle. Fill it with #252525 and apply the following styles.

camicon-27

camicon-271

camicon-272

camicon-273

camicon-274

 

Step 28

Add some highlights and clip this layer to the one created in the previous step.

camicon-28

 

Step 29

Duplicate the circle from Step 27, clear its styles, move it a little bit downwards and scale it down by 5px. Add the following styles.

camicon-29

camicon-291

camicon-292

camicon-293

 

Step 30

Again add some highlights and clip this layer to the circle from Step 29.

camicon-30

 

Step 31

Repeat Step 29. Apply these styles to this new circle.

camicon-31

camicon-311

camicon-312

 

Step 32

Create a new layer and draw a smaller circle. This time fill it with #2c292d and add the following inner shadow style.

camicon-32

camicon-321

 

Step 33

Duplicate this circle seven times. Scale each copy down by 10px.

camicon-33

 

Step 34

Create a new layer and select the pixels of the circle created in Step 32. Paint it with a random color, turn the Fill to 0% and apply these styles.

camicon-34

camicon-341

camicon-342

 

Step 35

Create a new layer, pick the Ellipse Tool (U) and draw a circle as big as the one you created in Step 29. Fill it with #d5d3d0 and add a layer mask. Paint black the selection shown on the second image and apply the following styles.

camicon-35

camicon-351

camicon-352

camicon-353

 

Step 36

Create a new layer and pick the Ellipse Tool (U). Draw a circle and place it accordingly to the image below. Then simply add the following styles.

camicon-36

camicon-361

camicon-362

camicon-363

camicon-364

camicon-365

 

Step 37

Duplicate this circle, turn the Fill to 0%, scale it down by 5px and replace the existing styles with these ones.

camicon-37

camicon-371

camicon-372

 

Step 38

Draw a much smaller circle, fill it with a random color, turn the Fill to 0% and add these styles.

camicon-38

camicon-381

camicon-382

 

Step 39

Draw another smaller circle and add the following styles (change the Fill to 0%).

camicon-39

camicon-391

camicon-392

camicon-393

 

Step 40

Draw an even smaller circle, turn the Fill to 0% and add the following inner glow style.

camicon-40

camicon-401

 

Step 41

Now, all you have to do is add some random highlights. Use a soft round brush and experiment with the Blend Modes (Overlay, Color Dodge).

camicon-41

 

Step 42

Keep adding highlights until you’re satisfied with the result.

camicon-42

 

Step 43

Create a new layer and pick the Rectangle Tool (U). Draw a rectangle like the one on the first image, fill it with #252525 and add this style.

camicon-43

camicon-431

camicon-432

 

Step 44

Create a new layer and merge it with the one created in the previous step. Now select the pixels of this new layer and go Select>Modify>Contract and select 3 px. Press Shift+Ctrl+I and hit Delete. Now add this gradient.

camicon-44

camicon-441

 

Step 45

Combine three rounded rectangles to create the shape shown on the first image (radiuses 5, 20). Fill these shapes with #252525 and merge them. Apply the following styles to this new shape.

camicon-45

camicon-451

camicon-452

camicon-453

camicon-454

camicon-455

camicon-456

 

Step 46

Finally, create a new layer and add some highlights.

camicon-46

 

Conclusion

That’s it. Your camera icon is now ready. We hope you enjoyed the tutorial and learnt something new.

iOS icon

 

Thanks to Alan Klim

Facebook Like

We are in social

Zizaza Twitter social profile

Blogspot zizaza free design ocean blog

Pinterest zizaza free design ocean profile

Facebook Zizaza - design ocean page

Deviantart Zizaza design ocean biggest free icon storage group

Zizaza design ocean home page