Mike Lane Studios - The Blog

Someone on the NAPP member’s forum asked for a tutorial on how to create a glassy looking button or logo similar to the intel Core Duo logo you can find on this page. I was going to do a bit of a write up in the NAPP forum but then I got to looking around at it and realized just how little participation there is in the NAPP forums - which is a shame but that’s another story. Instead I decided to actually make some use of my Dreamhost account and do a blog post about it. So here goes.

The logo I’ll be imitating (sort of reasonably) is this one:

If Apple likes it, you know it’s cool. As soon as I saw this logo I know that Intel either payed out the wazoo for this little logo (or series of logos actually) or they have an intern that knows how to handle photoshop. Either it’s going to be a lot more difficult to imitate than it looks or it’s going to be a snap. The first thing that I like to do is to break down what I’m seeing. A square with rounded corners with two borders - one plain gray, and the other a thick border with a fairly straight forward gradient applied to it. Then there is the 5 rectangular marks on the edges of the inner border, the text, and the gloss highlight. I think this will be fairly simple.

To get started I simply create a new photoshop document that imitates the size of the image. The logo itself is about 150px by 150px and I’d like to have a bit of a buffer, say 10 px on each side so the total is 170px by 170px. Like so:

Hit U and then select the rounded rectangle tool in the top bar and insert 10px as the corner radius and the color is set to black:

Then click on the little blue down arrow (circled in red above) and get the following dialog:

Select fixed size and input 130 px and 130 px for the width and height. We are choosing 130px because we want a total of 150px by 150px and we know that there will be 10px wide border all the way around the black part of the image. So 130px plus 10px plus 10px is the 150px that we want.

Click anywhere inside the blank canvas to create your 130px x 130px rounded rectangle. In the layers palette name the layer with the rounded rectangle shape Black Box. You should have something like this:

Hit v on your keyboard to bring up the move tool then hit cmd/ctrl-a on your keyboard to select the entire canvas. Make sure the rounded rectangle layer is highlighted in the layers palette and then click on the align vertical centers button and the align horizontal centers button in the top bar (circled in red below) to center up the rounded rectangle on the canvas.

Hit cmd/ctrl-d to deselect and now your Black Box shape should be perfectly centered on the canvas. Now double click in a blank space next to the words Black Box in the layers palette or click on the add a layer style button and select stroke. Use the following options:

This is a closeup of the gradient that I created for this:

Then in the layers palette highlight the Black Box layer and hit cmd/ctrl-j to create a copy of that layer and then drag the copy below the Black Box layer and name it Outer Border. Bring up the layer styles for the Outer Border layer and set the following for the stroke:

Highlight the 2 rounded rectangles in the layers palette and drag them down to the create group icon in at the bottom of the layers palette (circled in red below) to put those rectangles into their own group. Rename that group boxes. Your layers palette now looks like this:

We now have something like this hopefully:

Time to add some text. Again pick a gray with a slight bluish tinge (I used hex ADB2B5), hit t on your keyboard to bring up the text tool, and pick a nice sans-serif font (I used ITC Avant Garde - which is a close but not exact match). Click anywhere in the image and type intel (or whatever) and click the checkmark in the text options bar at the top. Using the text tool again click in the black box to add more text and this time choose the same font but a bit lighter weight and type Core Duo (or whatever). Hit ctrl/cmd-t and shift-drag on a corner box to resize the text to your liking. Then center each of the text parts the same way as we did earlier (ctrl/cmd-a to select all, v to bring up the move tool, highlight both text layers in the layers palette, and click on align vertical centers). Now that your vertical centers are lined up use the up and down arrow keys to get your text aligned horizontally where you want it. Once your text is positioned where you think it should be highlight the text layers in the layers palette and drag them down to the folder icon in the layers palette to put the text layers in their own group. Rename that group Text. We should now have this:

Now it’s time to create the hash marks on the borders. Simply grab the rectangle tool (the regular one not the rounded one), make sure the color is set to black, and drag a rectangle that is around 1px wide by 2px or 3px tall. Zoom way in if you need to. It should look something like this:

Then hit cmd/ctrl-j 4 times to create 4 copies of the black hash mark. Then highlight the 4 copies in the layer palette and hit v on your keyboard. Now use your right arrow key to move 4 of the copies to the right a bit. Then highlight the top 3 copies and move them to the right the same amount. Then highlight the top 2 and move them, and finally the top one and move it. You should now have 5 hash marks on the top metallic border like so:

Highlight the 5 hash marks in the layers palette and drag them down to the folder icon to put them in their own group and rename that group Top Hash Marks. Then drag the group Top Hash Marks down to the new layer icon in the layers palette to duplicate that group. Do that until you have a total of 4 groups of hash marks. Rename the Top Hash Marks Copy to Right Hash Marks, rename Top Hash Marks Copy 2 to Bottom Hash Marks, and Top Hash Marks Copy 3 to left Hash Marks.

Then make sure your move tool is selected and highlight the Right Hash Marks Group in your layers palette and hit cmd/ctrl-t to transform the layer. In the angle entry box put 90 and click the checkmark button to commit the change.

Select and rotate the Bottom Hash Marks group 180 degrees, and then select and rotate the Left Hash Marks group -90 degrees. Once all the hash marks are rotated properly hit v to bring up the move tool, cmd/ctrl-a to select all, highlight the Right Hash Marks group, and hit the align horizontal centers button. Do the same thing for the Left Hash Marks group. Then highlight each of the groups individually in the layers palette and use your arrow keys to nudge them to the correct position on the border (Left and Right Hash Mark groups need to move only horizontally, the Bottom Hash Marks group needs to move only vertically). If you hold the shift key while you press the arrow keys, your layers will move 10px at a time. Once you have positioned the hash marks where you want them, highlight all the hash marks groups in the layers palette and drag them down to the folder icon to put them all in their own new group. Rename that group hash marks and make sure it is below the text group in the layers palette. Your icon and layers palette now look like this:

Now it’s time to add the gloss highlight. We need to select the entire rounded rectangle. The easiest way I know how to do that is to open up the boxes group (if it isn’t already) by clicking the arrow next to it and then highlight the lower box. Then hit cmd-shift-alt-e (pc ctrl-alt-shift-e) to merge all the visible layers into one new layer (which keeps all the layers in tact). Now cmd/ctrl-click on the layer icon of that newly created layer to select it. Once you do that click the eyeball icon next to that merged layer to hide it (it may be useful later).

Now select the polygonal lasso tool, make sure that the intersect with selection button is checked:

and then click on the 3 corners of a triangle that you want to intersect with the current selection. Something like this:

Now you have the top right portion of the boxes selected. Now create a new layer below the text and above the hash marks. Put the light blue/gray color in your foreground color box (I used hex C8CCCF) and the darker blue/gray color in your background color box (I used hex 979FA1). Select the gradient tool from the tools palette

In the gradient options bar make sure that foreground to background is selected. Make sure the new layer is highlighted in the layers palette then click and drag inside the selection like so:

This will fill that selection with the gradient and will make it in the new layer that you just created. Rename that layer to Gloss Highlight. Now change the blend mode to hard light and change the opacity to 50%.

The last thing I noticed is that in the original image, the text appears to have a 1px stroke around it. So go into the text layer and double click next to either of the text layers to bring up the layer styles dialog. Select stroke and change it to a 1px black stroke and click OK. Now right click on that layer and select “Copy Layer Style”. The right click on the other text layer and select “Paste Layer Style”. You are now done with the image creation so hit cmd/ctrl-s to save the psd and all the layers. Once you do that hit shift-option-cmd-s (pc: shift-alt-ctrl-s) to open the save for web dialog. Select png-24 from the dropdown menu and make sure transparency is enabled.

Note: IE6 has troubles with transparent pngs. If you’re not planning on doing any hacks you may want to add a layer below everything to make the background match your site’s background and then save as a gif in the save for web dialog.

Here is Intel’s original logo is on the left and my replica is on the right.

Note: Again, I’m disinclined to hack away at IE6 at the moment so you may see a blue border around my image (and it will be slightly discolored in both IE and safari). Please consider getting the Mozilla Firefox browser.

Okay, for the sake of illustration here is my image compared side by side as a png and a gif (with a white background). The gif loses some of the image information and has a white background. If I ever change my blog’s color scheme (bet on it) the white border will show up. I can use a version of pngcrush that I found to fix the darkening that IE6 and safari cause and I can hack IE6 with a proprietary Microsoft filter. So for this instance png would be better (although it would take a smidge more work). For other things gif is better. And in some cases it’s better to feed non-IE browsers with pngs and IE6 with gifs.