Creating Apple’s Chrome Logo

If you’ve been to my site before you’ve probably seen me take this approach to various desktop and iPhone wallpapers. The look was originally inspired by Apple’s “chrome” version of their logo. This technique seems to work best with simple shapes without a lot of parts and/or divisions. I’m not intending for this to be an exact replica, but merely a method I’ve found works well for anything you want to apply it to.

Create/Locate your subject

I’m going to be using Apple’s logo here. You can still follow along with this tutorial even if you are choosing to use a different subject. If I don’t have a particular logo or graphic that I want to use I always start at Best Brands of the World. They’ve been around a while and host thousands of popular logos in vector format. Head over there to get your Apple logo if you don’t have it lying around.

If you’re someone who likes to follow along verbatim, I’m working with a document size of 400×400 px at 72px/inch.

Fill your background with black (#000000) and then either place or copy and paste the newly acquired Apple logo onto a new layer in your document. Rename that layer “Apple.”

Layer Styles

Quite a few embellishments are achieved through layer styles. Select the Apple layer and click the “fx” at the bottom of your layers pallete to open up the layer styles dialogue box. We will first apply a Gradient Overlay. Check the Gradient Overlay box and apply the following settings:

Next, check the Stroke box to apply a stroke. We’re actually going to be using a gradient stroke in order to achieve a slightly bevelled metalic look around the edges. Use the settings below. The gradient I used was “Silver.” You may have to append this to the stock set if you don’t see it available.

At this point you should be looking at something like the image below. I’ve added a slight radial gradient to the background to give some depth as opposed to the static black. You can do this if you choose.

Adding the Gloss

With the base and the edges layed down, it’s time to add the bling. There are a million ways to do this, but this is my method. First, I like to duplicate my layer for safe keeping and hide the original. Do that by clicking Layer > Duplicate Layer… or by dragging the layer down to “New Layer.”

After duplicating your layer you can hide the original. Next, right click on the fx of the duplicated layers and select Create layers. It’s near the bottom. This essentially breaks apart all the layer styles into their own layers. We’re doing this because we want to separate the stroke, which is essentially the edge, from everything else. We won’t apply the gloss to the edge because it would handle the light differently due to its bevel.

Now that you’ve created your layers you’ll want to merge both the Apple copy layer and its respective gradient fill. Do this by shift-selecting the layers and then pressing command+e (Mac) or ctrl+e (PC) on your keyboard. Your layers palette should now look like this:

Now our edge/stroke is separated from the fill and we can apply the gloss. Add a new layer just above the Apple copy’s Gradient FIll layer. Then right click the layer and select Create Clipping Mask. For those of you who don’t use clipping masks…get used to them. It’s a much simpler and quicker way of restricting a layer’s viewable area with respect to its parent layer.

After that, with layer 1 selected, we’ll drag out an elliptical marquee for our division in the gloss. With that selection active, click your gradient fill button in the tool bar. I’ve chosen white as my foreground color with a dark grey blue as my background color. These will the two colors of my gradient.

Once you’ve done that successfully, change the blend mode of that layer to Multiply. You can then adjust the opacity of that layer to your choosing. Don’t make it too dark because we’ve got another highlight coming that will be almost black.

Achieving the black highlight is simple. Duplicate Layer 1, and with the duplicated layer selected hit command+t (Mac) ctrl+t (PC) and you’ll enter the free transform mode. I like to rotate the layer clockwise slightly along with moving it up along the y axis a few pixels. This gives me a funny venn diagram, most of which I will remove.

With Layer 1 copy selected, command+click (Mac) ctrl+click (Pc) Layer 1′s layer icon. This will highlight the bounds of the layer with a marquee. Now, simply hit delete. The result should be a thin sliver getting wider as you go from right to left. You’ll probably want to increase the the opacity so that you can achieve the darker highlight.

Go grab your beverage of choice because you’re done. Many of you might be snickering and saying, “That isn’t what the Apple logo looks like.” I know that. I could take some additonal time to apply extra highlights to fully replicate the Apple logo, but like I said earlier, this is inspired by the original logo. This is also less labor intensive and can be rolled out on various different graphics, if you so choose.