Create: Apple iCloud Logo Effect

Create the iCloud Logo shown at the Apple WWDC in photoshop. PSD included.

It seems that Apple continues to sit on the front lines of the design industry, and generally tends to set the standard. The case is no different with the unveiling of the iCloud logo, which caught the breath of many designers. Surprisingly, and like many things, it is actually a quite simple process to achieve the same effect. In this tutorial you will learn to recreate the iCloud logo, and take the knowledge to apply to other projects. Also, included is a PSD file made in the process of this tutorial.

This is what we will be creating:

Creating the Base

You can begin with a completely blank canvas, or use a stylish background like was used here. This part is very flexible, because the shape does not have to be a certain one – you can use whatever is desired. We used a rounded rectangle because we wished to mimic the iCloud logo exactly. At this stage color does not matter.

Select Layer Style, and select “Gradient Overlay”. Use the settings shown above, and use the gradient settings below. Continuously switch between a white and a medium gray to create the rippled metal look. Make sure the GRADIENT OVERLAY “STYLE” is set to ANGLE.

The gradient Settings for the Gradient Overlay Style

What the layer now looks like with only the Gradient Overlay Style applied.

The settings for the

For the outer edge of the logo, select the “Stroke” option. Use the settings as specified above. For the gradient, begin with 15% gray, halfway through use 85% gray, and at the end of the gradient use 15% gray again. Note that the Style is still set to angle.

Layer

Apply the “Bevel and Emboss” style and use the settings above. You may not notice much of a difference, but if you look around the previously applied stroke area, you will see that there is a better transition between the two.

Layer Appearance after

We

Creating the Brushed Metal Look

Create a new layer with the same shape, the same size as the previous one. Fill this layer with a 50% gray color.

Select Filter : Texture : Grain, and the following dialogue will pop up.

Use the above settings, creating a monochrome grain which will fill your layer or the selected area.

From the Filter menu, select Blur, and then radial blur. A dialogue will pop-up with settings options. To reach the above state, set the amount to 32. Confirm.

You don’t need to use layer effects to create the brushed metal effect, simple change this grain layer’s fill to around 13%, and the brushed metal effect appears.

Creating the “metal-pressed” logo

Drag in a pre-created logo, or create a new one from scratch. This object can be any color.

Choose “Color Overlay” in the Styles dialogue box and pick a 85% gray color.

Select “Outer Glow” and use the settings specified above. Be sure that you change the color to white.

Logo with

Next, select inner shadow, and use the settings above. The distance and size will change depending on the size and resolution of your document.

An inner shadow has been applied.

The Final Step

For the finishing touches, select “Bevel and Emboss” using the same settings above. *px measurements change according to the size of your canvas.

Simple yet chic….

Final Logo Rendering

Take it to the next level, have a little fun!

Method with part of the RendrArt logo integrated.

Download the PSD created in this tutorial:

iCloud Logo PSD (1257)