I wish there was some tutorial out there to teach us how to make a time-machine (not in Photoshop…a real one). But I couldn’t find any on googling it.
Yesterday I was surfing the web, looking for some good stock pics (you could try www.sxc.hu). I came across many websites with nice looking glossy badges. But most of them seemed hopelessly 2D
So, here comes a tutorial to teach you how to make a nice looking 3D badge/button in Photoshop. We will use layer styles to make the basic 3D effect. The glossy look has also been explained in my other tutorials, namely RSS Feed Icon Tutorial and Vista Taskbar Tutorial. Do check ‘em out. Now, let’s begin… First, as always, the final outcome of this tutorial:
Step 1: The basic shape
1. Start with a dark, square canvas. Mine is 300x300px, with Black background.
2. Use the “Elliptical Marquee Tool” to make the circle. Hold down the Shift key to constrain proportions i.e. make a perfect circle. Choose ANY foreground color. Mine is Blue.
1. Open up the layer styles for the layer with the blue circle on it, by going to “Layer>Layer Styles>Blending options”.
2. Use the following settings. Click the images to see a larger view.
3. By now you button should look like this:
Step 3: The Content
Since we want the button to be interchangeable, i.e. different images and designs, we will use a nifty little feature of Photoshop, called “Fill Opacity”. But first, let us pull in a background image for the button. I will use the Indian flag for this tutorial.
“Ctrl/Cmd+Click” on the thumbnail next to the blue circle layer. This will make a selection out of all the non-transparent pixels, i.e. select everything that there is to select on that layer. Copy the image you want to use onto this canvas, and place the newly formed layer below the blue circle layer.
Do “Ctrl/Cmd+Shift+I” to invert the selection. Hit “Delete”.
Now for the “Fill Opacity”. Go to “Layer>Layer Styles>Blending Options”, and set the fill opacity to 0 (zero). The basic purpose of this feature is to set the opacity of the image, without changing the opacity of the layer styles. Sweet huh?
Step 4: The Gloss
Now that we have the basic shape and design done, lets move on to the frivolities.
Pick up the “Elliptical Marquee Tool”, and make an elongated ellipse along the top of the badge (as shown). Using the Radial Gradient tool, make a White-Transparent gradient on a new layer.
Copy this layer onto a new one. Hide the original. Select the new layer.
Hit “Ctrl/Cmd + T” to “Free Transform” the selection. Drag the little crossed circle from the center of the transform rectangle to the center of your badge as shown below. This is the “anchor point”/”axis of rotation” for the transform rectangle when you rotate the layer. Basically, the image will always rotate about this point.
Now click and drag the mouse outside the rectangle. Notice that the white ellipse easily moves along the edges of the circle.
Go to “Select>Modify>Contract”. Enter 2px as the size. Click OK. Hit “Delete” to leave just the outline of the ellipse. Use a soft eraser to remove the lower part of the ellipse. This will leave you with a nice little accent on the edge. See below:
This completes your badge/button tutorial. Try out new things. You might want to check out the site where I got some ideas for this effect. Here are a few more buttons:
Here comes a very good news!!!!
I, in a team of 2 others, had taken part in an inter-college Web Designing competition. The theme was to design a website for a fictional NGO in an hour. The competition took place in NSIT, Dwarka (Netaji Subhash Institute of Technology). Around 40-50 teams of 3 each were participating. And guess what???
WE CAME FIRST!!! Yeah. FIRST POSITION!!
Since we made the website in Flash, I am trying to find a way to put up the page here. Let’s see, maybe I’ll upload the flash file somewhere else, and embed it here… Wait and watch!!
Can’t seem to find a quick and easy way to upload a Flash file that plays without downloading. So here a few screenshots of the website we designed… Please do tell me if you know of a website whre I can upload this .swf file for online viewing.
Note that all content is completely fictional and was made up on the spot. Any similarities to any organisation are not at all ntentional.
Here is a tutorial on how to make the RSS feed icon that has been put up in the sidebar (look to the right of the page please). It seems to be quite long, but it is actually quite easy, and I am sure that you could easily skip a few steps, or add a few more without really affecting the overall appearance. So let’s begin. Please note that the images below may seem unclear/fuzzy/blurred. That is due to size-reduction that Blogger does. Click on them to view them fullsize, they will be absolutely clear in fullsize.
Here’s the final image:
Step 1: The Beginning
Start with a square, transparent document. I am making a 200×200 image.
Create a new layer, and fill it with white. (“Alt+Backspace” if your foreground color is white). Your layers palette will look something like this:
Step 2: The Background
Pick up the “Rounded Rectangle Tool (U)”. Set the radius in the bar at the top to 10px. Select the option “Fill Pixels”. The foreground color doesn’t matter. Keep it anything but white. I am using Red. On a new layer, drag the cursor from one corner to the one opposite (while holding the Shift key) to make a nice rounded square.
Step 3: The 3D Effects
With the top layer selected, go to “Layer>Layer Style>Blending Options”. Apply the following settings. (Click to zoom in)
1. The Inner Glow : To soften the edges, and for the 3D effect. The size depends on the size of your button.
2. The Gradient Overlay : I have used the classic RSS colors. You can choose for yourself. Change the angle to 130 degrees. Anything else looks weird. try it out.
3. Click on the gradient to customize it. Here is a screenshot of my customization. I have used Red-Orange-Red. Unfortunately, I forgot to save the hex codes
4. Next comes the Stroke. It helps to sharpen the boundary. Use a dark maroon color. Keep the size to 1px or 2px. Position is “Inside”.
Step 4: The Glossy Effect
This step is similar to the glossy effect step of my Vista Taskbar Tutorial.
Start with the “Rectangle Tool(U)”. Select “Paths” as the type (in the bar at the top). Make a rectangle as shown:
Once done, right-click on the path with the “Pen Tool” selected and select “Make Selection” from the context menu. Pick up the gradient tool, and select the “White to Transparent” style. Make a smooth linear gradient with the white at the top.
Deselect (Ctrl+D) and set layer opacity to 70%. But it depends on your gradient. This is the background image that you should have by now.
Step 5 : The RSS symbol
We will use the custom-shape tool to make the RSS symbol. There are many other methods, but I found this one to be the easiest.
1. Select the custom-shape tool, and choose the “Bull’s Eye” shape.
2. Make a shape by holding down the Shift key (to maintain proportions) and dragging the mouse from one corner to the opposite. The foreground color doesnt matter.
3. Go to “Layer>Layer Styles>Gradient Overlay”. Make a gray-white gradient from bottom to top.
4. Use the Pen-tool to make a path similar to what is shown in the figure below. The trick is to hold down the Shift key to make the straight horizontal and vertical lines.
5. Complete the path, right-click on the path and select “Make Selection”.
6. Hit Delete to delete the selected part. Use the “Move Tool” to position the layer at the center of the button.
7. To make it glow, apply the following layer styles to the layer.
8. This completes the tutorial, and you should have a good-looking RSS feed icon by now. Try moving the icon layer to a position below the glossy layer to give it a better effect.
You could also try different shapes in step 4 to get different 3D effects, like this image:
Hope that the tutorial for easy to follow, sorry about the color codes again. But believe me, the RSS icon can be of any color, so they weren’t of much use anyway
Please do comment how you liked the tutorial.
Here we go with another change. Since change is the only constant and I was getting bored of the old theme and I thought that a 3-column template would look better, I have changed the look of the blog yet again. We have:
1. A new logo!!
2. 3 Columns!!
3. Different colors!!
4. Faster page loads!!
5. More organised!!
Please do comment how you like the new look… Here is a screenshot of the old blog, while I was changing the things around:
Noticed the new RSS feed icon in my sidebar?? Made it in Photoshop just now.
I am writing the tutorial right now, will post it soon. It seems to pretty long, but it is quite easy.
Here are the high-quality images in varying sizes. I suppose you could use them if you wanted to, but it would be really nice of you if you could link back to me on usage of any of these images.
Happy Feeding!! Click any of the above to subscribe to my feed..
Please leave a comment!!
Now I have really outdone myself… Here is a tutorial for te popular Mac OSX Tiger wallpaper:
Check it out. Though this tutorial will look really short, I actually spent 2-3 hours in making this wallpaper. I will be telling you how to make just one of the many “swipes”.. the rest you will have to make yourself. This is what we will make:
Step 1: The Background
I spent half an hour (no exageration), just trying to get the colours for the background gradient right. The colors I came up with are #1b317a and #35639e. Make a subtle gradient with more weight at the bottom.
Step 2: The Main Design
Pick up the pen tool, and try to ape the mac design. What else can I say? I can only suggest that
1. Only 2 anchor points are enough to draw any of the curves in this wallpaper.
2. Drag the mouse a long way after making an anchor, to make a smooth curve.
3. It is not necessary to make an anchor on the image. It can also lie outside. eg. see the image:
Once you are satisfied with the curve, let it be. Make a new layer. Select the brush tool (dont worry, it wont delete your path). Select a very small (1-3px) and soft (0-50% hardness) brush. Make your forground color white.
Next, right-click on the path, and select “Stroke Path” from the context menu. Make sure that the “Simulate Pressure: is checked.
Close the path outside the image. (just make random anchor points, overlapping the final one with the first one.).
Right click on the path and select “Make Selection”. This will convert your path to a selection area.
Go to the menu “Select>Save Selection”, and give it any name you want. Just make sure you can identify which curve you are talking about just by looking at the name later on. (eg. I named the curves c1, c2, c3 etc. in the order that i made them).
On a new layer, pick up a large brush (400px) and 0% hardness. Choose a light shade of blue as your foreground color. Use the brush to make a little patch of light color.. You will probably have to try it out a few times to get it right.
Here is a detailed close-up shot:
Select the layer which had the pen-stroke on it. Go to “Layer>Layer Styles>Blending Options>Drop Shadow” and apply the following settings:
Step 7 : The Difficult Part
I hope that it was easy to follow the tutorial up to this point. But now it gets more abstract/difficult/self-service .
You will have to make the rest of the wallpaper yourself. I can provide these little points:
1. Make sure that all pen-strokes are on their own layer. All brushing to be done on seperate layers too.
2. The order of the curves matters. So look at the original Mac wallpaper to get the idea. See which curve seems to lie above the other. You can tell by looking at the shadows.
3. Always “Save Selection”, after making a curve. You will have to “Load Selection” after each curve to fill in the color. It is difficult to explain, but look at this image:
Basically, if you have one selection, you can merge/intersect/subtract it from another selection by using the “Load Selection” feature. This is where the name of the saved selection matters. You can form all types of areas with this feature. for eg.
For the selection shown in the above image, pick up a large, soft, black brush and paint along the outer edges to form a shadow that is deeper at the corners. You cant use the drop shadow here if you want it to be detailed.
So that is pretty much it.. Even I made it by hit and trial. So put on some music and give it a try. The final thing:
Check out the original Mac OSX Tiger wallpaper that comes pre-loaded on a Mac:
A problem that I am facing is that Google has suddenly stopped crawling my blog . I have no idea why. So any posts that I have put up after 19th september dont seem to be coming in the google results. If any of you ahve any idea about this, please do help. And comments are very very very welcome.