How to Draw Apple iCloud Icon – Photoshop Tutorial

iCloud, the newest cloud storage service introduced by the Apple has a pretty simple yet beautiful logo. The icon is made from metallic material and has an extruded cloud icon on top of it. You may not know it, but creating this type of icon is actually very easy, and below is the iCloud icon that we will teach you how to draw in this post, using Photoshop!

Looks a bit complicated, but in fact all we need is some Layer Styles, basic vector shapes, and a bit of manual drawing. Let’s get into it!

Step 1

Start by creating a new file with size 512 x 512 px. Activate Rounded Rectangle Tool. On option bar, set its radius to 75 px. Click and drag to draw a rounded rectangle. Set its color to #5d5d5d.

Double click on the layer to open Layer Style dialog box. Add Gradient Overlay with default gradient, black to white, and reduce its Opacity to 76%.

Step 2

In Layers panel, delete Layer Style by dragging fx icon onto the trash icon, which is at the bottom right of the Layers panel. Next, double click the layers’ thumbnail to bring up Layer Style dialog box. Add Inner Shadow and Gradient Overlay.

In the Gradient Overlay’s setting, set gradient’s Style to Angle. Click the gradient’s preview box to open gradient editor and use color combination of #8e8e8e, #a5a4a4, and #d8d8d8. Feel free to play around with each marker position, just make sure to set same color in the first and the last marker.

This is the result after adding Layer Styles.

Step 3

Create new layer. Fill it with Radial Gradient from white to black.

Hold Alt and drag vector mask from previous layer to current layer. The gradient is now fit inside the icon.

Open the Layer Style and change its blend mode to Screen.

Step 4

Draw a rounded rectangle inside the icon. Set its radius to 75px with color #2a2a2a.

Add 2 more circle shape (Choose Ellipse tool, then hold Shift and drag it). From the option bar, set path mode to Add to shape area.

Step 7

Click Image > Adjustments > Level or press Ctrl + L. In the dialog box, drag black slider in the Output Levels to the center to lighten the circular wave.

Hold Alt and drag vector mask from the icon’s base layer to the current layer. The circular wave is now inside the icon.

Activate Path Selection tool and select cloud path that we created in Step 4. Press Ctrl + C to save it to clipboard. Press Ctrl + V to paste it onto the circular wave’s vector mask. Set its path mode to Subtract.

Finally, copy and paste smaller cloud path that we have created in Step 5. Set its path mode to Add to Shape.

Here’s the result. The circular wave is inside the icon’s surface.

Change the layer’s Blend Mode to Screen.

Step 8: Shadow

Create new layer and place behind all layers. Create an elliptical selection (using ellipse tool) under the icon. Fill selection with black.

Duplicate shadow by pressing Ctrl + J. Add another Gaussian Blur, for this time use bigger Radius to get softer shadow. If the shadow is still too harsh, you can turn down its layer’s Opacity.

Final Result

This is the result of our tutorial. As you can see, the process of creating this icon is very easy. We just need to use some basic vector shapes and Layer Styles. I hope you enjoy this tutorial. If you have any question, feel free to ask!

Download PSD

Can’t achieve certain step? Here is the result’s PSD file for you to test and play with.