teddY-risatioN™

Cheer up! It’s another Photoshop tutorial to keep you entertained and your mind sharp with creativity. When I release my new personalised Wordpress theme, teddY-risatioN™ Delta, it came with a header image that contains a 3D looking icon / logo. The one on the left is slightly different as compared to the original one (the background is not centere in the original favicon for design purposes).

The original concept of this favicon (that uses a gradient as the background instead of a dull, boring, solid color) comes from Id’s favicon for her blog Notbrainwashersafe.com. Thank you Id for the inspiration!

Hendra asked me a few weeks ago (sorry, it took me so long to write this!) as of how to create a 3D looking icon, so here it is - a step-by-step, idiot-proof Photoshop tutorial to teach you how to create a Web2.0 3D icon from scratch. I wrote another one, Glossy Logo Tutorial a few months ago, and if you’re interested, you can check it out as well.

A sample .TIFF file is included at the end of the tutorial (it’s highly recommended that you read through the steps first because it’s the process and methodology that is important, NOT the final product! So what are you waiting for? Grab some coffee (it’s long, with 20 screenshots in total!) and let’s get it started!

Step 1 - Open Canvas

Since I want to make sure that the icon I’m creating is as detailed as possible, I’ll be using a huge canvas size (250*250 for this tutorial) and then shrink the icon to 36*36 pixels when I want to convert it to a favicon. Alternatively, you can use the icon for your blog header (like what I’ve done!) or other purposes. 250*250 pixels is a pretty safe size, since most blog icons won’t exceed the width or height of 150px.

It doesn’t matter if you have a transparent background or a solid white background (as shown in the screenshot). Anyway, if you’re interested, the background can be configured when you create a new canvas - you’ll have three choices, under Background Content, of White, Background Colour or Transparent.

Step 2 - The All-mighty Gradient Tool

Head over to the toolbar (by default, it’s to your left), and select the Gradient Tool. In case you couldn’t find it, look for the Paintbucket tool, since both tools share the same position in the toolbar and you can change it by clicking the black triangle at the bottom-right corner of the tool’s icon.

Now select the type of gradient - I’ve used Angel Gradient to design my icon, but you can always experiment with other types! Click on a mockup display of the gradient at the top to edit it. A dialog box will appear as shown below:

I’ve used a particular configuration for my icon:

• *Note: Opacity at 100% for all colours
• Color: #282e65, Location: 0%
• Color: #2c6893, Location: 25%
• Color: #7da6c3, Location: 50%
• Color: #405671, LocatioN: 75%
• Color: #282e65, Location: 100%

Step 3 - Draw Gradient

Create a new layer and rename it as ‘Background Gradient’. You can now draw the gradient on the new layer. If you want to center it perfectly in the middle of the canvas, simply turn on the grids by pressing [Ctrl] + [']. If the default grid settings does not subdivide your canvas properly, you can access its settings via Edit > Preferences > Guides, Grids & Slices. Adjust the pixel spacing and number of subdivisions to your liking. Since I’m using a 250*250 canvas, I will divide the canvas every 50 pixels with 2 subdivisions. If you follow my settings, this is what you’ll get:

And now position your cursor at the center of the image, click and start dragging the gradient towards the side of the canvas. Since you have turned on the grids, the cursor will automatically snap to the nearest dividing line. Neat, isn’t it? Saves you from all the trouble from trying in vain to achieve pixel precision.

Step 4 - Typography

Now start entering anything you like into the canvas. I have used a slightly blue colour for my text (#a6c7f3) to give it a blue tinge. You can use any colour you wish, it’s all about trial and error! Since I wanted something striking and unique, I’ve settled for ‘tr™’ which stands for teddY-risatioN™.

After you’ve entered your text, it’s time to give your text a more three-dimensional effect. Double click on the layer to bring up the Layer Style dialog box. I’ve applied the following settings:

For Blending Options (check screenshot?):

• Blend Mode: Overlay

For Drop Shadow (check screenshot?):

• Blend Mode: Multiply
• Opactiy: 25%
• Angle: 120° WITH global lighting (check the global lighting option)
• Distance: 3px
• Spread: 10%
• Size: 3px

For Inner Glow (check screenshot?):

• Blend Mode: Screen
• Opacity: 25%

*Note: if you have mutiple layers of text, remember to copy the layer style of one layer and paste it to the others. There’s no need to repeat all the tedious steps above for the remaining layers. Hurray!

Here is a simple visual comparison of the before and after the tweaking of Layer Style.

Step 5 - Create a curvy shape

In order to have a convincing glossy effect, you don’t just create a simple shape and reduce it’s opacity to a low percentage. You’ll actually have to create a custom shape by hand. But no worries, it’s actually quite simple with the Pen tool!

Click on the Pen tool icon in the toolbar, and then proceed to the top to configure that nifty little sweetie. Remember that you wanted to create SHAPES and not PATHS, so remember to click on Shape Layers, and then click on Pen Tool - you wouldn’t want a freeform pen tool, unless you have a sturdy hand and a Wacom (or whatever) tablet in hand. Remember to turn on the grids again, by presisng [Ctrl] + ['].

In order to create a curvy shape, you’ll need to know a little bit how the Pen tool works. It actually draws you a Bézeir Curve when you play with the handles. Now to continue, click on the center left side of the canvas. Since the grid is on, it will automatically snap to the grid, so no worries (and that’s what grids are for!). Now click at the dead center of the canvas, and drag the horizontal, tangential handle until it looks something like in the screenshot below:

It’s all up to your experimentation - you can create very curvy or straighter shapes, mine is just for your referrence. Feel free to experiment with it! Photosohp is all about APPLICATION and not DEAD, ROUTE-LEARNING keep that in mind!

Now click on the center left corner of the canvas. You don’t need to tweak the handles this time, and an almost perfectly symmetrical curve will appear, as seen below:

After you’re done with the curvy part, breeze through the rest - by just clickin on the top right and then the top left corners of the canvas, and CLOSE THE PATH (important!) by clicking on the starting point again. Now you’ve got a nice, neat shape!

*Note: Don’t be bothered by the black background, we’ll deal with it later, very soon!

Step 6 - Glossy effect using layer stlyes

Since the black background is really irritating (and we don’t need it as well), head over to the Layers container and set the Fill to 0%. The black filling disappears!

Now double click on the curvy shape layer to bring up the Layer Styles dialog box, and follow the instructions below:

For Drop Shadow (check screenshot?):

• Blend Mode: Multiply
• Opactiy: 5%
• Angle: 90° WITHOUT global lighting (uncheck the global lighting options)
• Distance: 5px
• Spread: 10%
• Size: 5px

For Gradient Overlay (check screenshot?):

• Blend Mode: Overlay
• Opacity: 10%
• Gradient (white fades from left to right):
  • Color: #ffffff, Location: 0%, Opacity: 100%
  • Color: #ffffff, Location: 100%, Opacity: 0%
• Style: Linear
• Angle: 90°

After applying these styles to the layer, remember to drag the layer to the top so that it is above all layers:

Step 7 - Create rounded corners

This is when we’ll make use of Photoshop’s Quickmask function. Select the Background Gradient layer. In order to mask it, press [Q] or click on the Quickmask icon. Then select the Rectangle tool and at the top toolbar, configure it to the Rounded Rectangle Tool with 50px radius. For the radius, it’s all up to you - 50px is just my personal preferrence.

Open the grid again by pressing [Ctrl] + [']. Now draw a rounded rectangle from the top left corner towards the bottom right corner. It will automatically snap to the gridlines, so don’t worry too much. When you’ve done, a red and slightly transparent rounded rectangle will appear over the area you’ve masked. This means that the part of the image on the Background Gradient layer will not be edited in any way when you exit Quickmask:

To exit Quickmask, click on the other icon below the foreground/background palette or press [Q]. Now you’ll have ‘marching ants’ around the four corners of the layer. With Background Gradient layer still selected, press [Delete] to remove the corners of the layer. Now you have rounded corners!

But you’re not quite done yet - the Shape Layer is still rectangular at the top. Do not deselect your selectiong (in order words, make sure that the ‘marching ants’ are still there). Select the Shape 1 layer (this is the layer’s name by default), and then press [Delete] again.

Step 8 - You’re basically done!

You’re basically done with the icon. To drag the icon to another image (like your blog header), just select all layers (besides the locked Background layer, if there is any) and drag them to another image. To create a transparent background, delete the locked Background layer, if there is any.

Here is the final product!

Download Sample!

You can also download the sample for the icon here. Please note that the file is for personal usage only and do not distribute it commercially. If you would want to share this file on your blog or website, feel free to do so but please provide a link back to this tutorial.

Icon Tutorial Sample | 121 hits | 496.71 KB

*Note: The .TIFF file will appear just like a .JPEG image when you open it with the default Windows Picture and Fax viewer, but if you open it up in Photoshop, you’ll see different editable layers. Oh, and the .TIFF format I’ve used is a lossless compression format, so everything you see is exactly what I’ve done, down to every single pixel

Request a Tutorial

Yes, I do accept requests - and probably the best thing to it is that I write Photoshop tutorials for free! I would consider myself semi-amateur (more towards the expert side, heh) along the novice-expert scale, so I’m terribly sorry if I couldn’t write one that I think it’s beyond my capabilities. However, I’m willing to read up of new techniques, so most probably I won’t reject 90% of the requests. You can post a request as a comment, or you can directly contact me.