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 (258) - 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 :razz:
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.
wowoaaaaaaaah.. fun tutorial lah
This tutorial is true testament to attention to detail! Great job, Ted! =D
Check out Id’s last blog post: Afterwards, We Had Coffee.
I totally agree with Id! Teddy, you’ve helped me out so much! I am going to use what I learned here in a redesign! I just need to figure out how to incorporate this into what I want to do. But I hope it can look as great as what you have made! Thank You!
Thanks a lot for the tutorial. I want to remake my blog again. Stay tune ok.
Check out hp84’s last blog post: Pharmacist graduate
Thanks for the tutorial! I will definitely try that!
Check out Destiny’s last blog post: Unfruitful Friendships
Really nice blog you have there.
Ive been meaning to learn to make these glossy look. Thank you!
However, how do you remove the nipple like effect in the middle? I doesnt always look as everytime.
Check out NoktahHitam’s last blog post: Buang Bayi, the Sinful Act of Mankind
Great tutorial teddY! I wish I was a bit more comfortable with Photoshop… I think all those years with Paint Shop Pro have dulled my senses. (#);)
Check out Bush Mackel’s last blog post: *unknown*
@Adam: Thanks!
@Id: Thank you Id! I hope you find it useful! And heheh don’t forget you’re the ultimate inspiration for my Wordpress theme and favicon!
@Melle: It’s really my pleasure to help :) Internet isn’t one if it’s without sharing and spreading of information. I’m just glad that I can share what I’ve learnt with everyone, and make sure that people benefit from it! I hope this tutorial is of good use to you, and if you need any help with design stuff, I’ll be more than happy to help!
@hp84: Sure! I couldn’t wait to see what your blog will look like after a redesign.
@Destiny: You’re welcome!
@NoktahHitam: Thanks for the compliment! If you’re looking for glossy logo effect, I’ve written a separate Photoshop tutorial for this a few months back. You can check it out if you’re interested! As for the nipple effect (LOL!), it can be removed if you create a new layer, select the gradient tool, configure it to Radial Gradient, select a similar foreground colour and draw the gradient at the center of the canvas (with the grids turned on). Check out this screenshot for details –
@Bush: Thank you! Paint Shop Pro is another good programme, but I’m really sorry that I’m yet to learn the ropes to it so currently my tutorials are for Photoshop users only. But I think if you’re used to Paint Shop Pro, Photoshop should be familiar to you as well.
Awesome! I should totally learn a lot more.
how did you learn all this photoshop stuffs? man, I really need to polish my photoshop skills. my photoshop skills suck, badly. so as Illustrator.
Check out Aisyah’s last blog post: Ladies are Tough, Too
cun ah. nak tiruu. hehee :mrgreen:
Check out sya’s last blog post: smell like teen spirit
@Aisyah: Half of them are self-taught – I would spend a few hours a week playing around with photoshop and exploring the possible applications of filters and etc, while the rest are knowledge from Photoshop magazines! Most bookshops have these magazines shrink-wrapped, so usually I’ll go magazine-hunting, dropping by every bookshop in a shopping mall to find an unwrapped one :) haha. I wouldn’t allow myself to unwrap one.
@sya: Thank you! Haha go ahead and tiru, lol. It’s okay! These tips are for sharing anyway :cool:
oh? I always help myself and unwrap whatever book I want to read. haha. even at MPH. being responsible person, I would wrap it back. heheh.
Check out Aisyah’s last blog post: Random Talk
@Aisyah:
Lol you’re just being yourself! I’ve got a friend who’s as outspoken as you, and she did exactly the same thing when we visited MPH bookstore. She would carefully tear open the plastic cover (if it’s shrink-wrapped, too bad then, because it couldn’t be rewrapped) and handle it with greatest care before rewrapping it, lol! Although the shopkeeper would definitely frown at her (and your) behavior, he/she’ll have pretty much nothing to say because you didn’t damage the magazine :razz:
Good job!! Very Web 2.0!
Check out Ivy’s last blog post: Goodbye Toronto
@Ivy:
Thank you! Haha yea it’s very Web2.0 – glossy effect + gradient background.
Can u make a tutorial on…..how to remove backgrounds..if the model has too cool hairstyle. Like a mohawk or spiky hair. I always cut the hair wrongly. LOL.
Check out Levine’s last blog post: Sweet Apam
Cun-cun.. Caiyok…
Check out zool’s last blog post: 3 tahun lagi…
Wooohooo… this is the tutorial i have been waiting for :)
Thanks a ton ted!! I planned to “request” to you once again regarding this tutorial.
I did not realize that you at last made this tutorial available since a few weeks ago! :grin:
I am gonna try and put this tutorial on a good use ;p
Thanks!
Regards
Hendra
PS : Have you ever think on making this tutorial into ‘action script’/macro (i don’t really know what people call it on photoshop)?
I saw an action script on how to make ebook just in a few clicks using action script, and it was great! :wink:
just my 2cents
Check out Hendra’s last blog post: 3 Reason Why I Like To WASTE MY MONEY on Internet Marketing
You’re welcome! Anyway this entry was a few weeks late, I’m sorry for the delay. Yea that’s something called Actions in Photoshop where you can create your own and export it as a file :) I might be considering actions for future tutorials, but I’m just worried about backward compatibility problem – I am currently using Adobe Photoshop CS2 while many of my readers might be using earlier versions. And actions leaves little space for personalisation, unless I’ve managed to figure out how to prompt the user when the action is running.
Really Great tutorial… thanks
Check out Pachecus’s last blog post: DoFollow – The Reason To Comment In My Blog
Thanks :) I hope it’s of good use to you!
Hi Ted! I will tell you two things now :smile: Good news I learn photoshop today :wink: And not quite good news that I couldn’t delete the ‘marching ant’ line after using Quickmask tool :???: Do you know why? Thanksss…
Check out anie’s latest blog post » Pictures speak a thousand words
Good :) that’s one small step for you but a big step for your knowledge. Anyway, for the marching ants line, you got it because you’ve made a selection. To remove it, you will have to deselect. This can be done by clicking the Marquee Tool (the tool that looks like marching ants near the top of the toolbar), move the cursor over to your canvas, right click and select ‘Deselect’. By then the marching ants will be gone.
Feel free to ask me if you have any other questions! I’ll be a little busy for the next 3 weeks because of finals but I will attend to you as soon as I have time. Thanks!
Thanks for your respond jaa.. :oops: This thing is new for me. Anyway, finally I can create something good from photoshop :wink: Good luck on your exams..
Check out anie’s latest blog post » Pictures speak a thousand words
You’re welcome! I hope you’re having fun with Photoshop. Once you’ve more or less grasped the basic usage of it, you can start checking out the online tutorials which will definitely enlighten you a lot. Most of my skills are learned online too, all thanks to the very generous photoshop geniuses! *bows*