Now, I know what you're thinking: "But Marty, we don't need more tutorials, LordMaul's doing an excellent job". Well, first let me say you're wrong. First, we DO need more tutorials and second, LordMaul IS doing a great job.....unless you can appreciate real artistic talent that is. 😉
With that said, lets learn how to make those cool UIs on you see around the web. Unlike LM's tutorials, I will summarize my points, so you can apply your knowledge to other projects. You're here to LEARN, not REPLICATE 😀.
Now, this is what the final product will be, and here are the steps:
1. Create a new document with 600 height and 200 width.
2. Take your ellipse tool and make an ellipse at the very top. Select the ellipse with the path selection tool
and copy then paste the shape. Now there are two ellipses, one top of the other.
3.With the move tool, take one of the ellipses and move it to the bottom. Select both ellipses with the path
selection tool and allign both ellipses so that they are in the centre (horizontal wise).
4. Make a new layer. Make another ellipse that is not too fat and goes from the centre of the top ellipse to the
centre of the bottom one. Copy/paste the shape, and move the second one so that it covers approx 2/3 of the
first one. Now, with the path selection tool (PST from now on) select the second ellipse, look at the top bar
and you will see frou buttons near the left. If you read the tool tips, you will see that the second one says
"Subtract from shape area". Click on that and you will see only 1/3rd of the original ellipse left. It should
look like this .Now select both shapes with the PST, combine them.
Copy/paste the shape and flip it horizontally. Put the first ellipse near the left, the second one (the flipped one) near the right. It should
look somethign like this.
5. Now select both of them with the PST, cut them and paste them in the same layer as the original 2 ellipses. Select all 4 shapes and combine them.
6. Now its time to make what will be our buttons. Use the shape tools and what you have learned in the previous
steps. I shall simply make 5 ellipses. Remember, the allign and distribute buttons (at the top when you are
working with the PST) are your friends 🙂 It should look somethign like this.
7. Now, rasterize the layer (layer > rasterize > layer) and apply Gaussian Blur to it (about 5.5pix should do
it). Should look like this.
8. Now flatten the image (Layer > Flatten Image, so that there is only the background left and everything is there. Go to Image >
Adjust > Levels, and type in 120, 2 , 140 in the top three boxes. Click OK.
9. Now take the fill tool, in the option bar from the frist drop down box choose "pattern" instead of
"foreground". In the Patter drop down box, choose the first one (blueish, bubly one), then click on the white
aread and viola! ( ss)
10. In the layer pallete, right click on the background layer and duplicate it (name it Main or something) and
then delete the background.
11. Select all the black area with the magid wand and delete it, so that there is ONLY the shape we made left on
that layer.
12. Make a new layer, fill is with solid black (using the fill bucket) and put it UNDER the layer containing the
shape. Like this.
13. Now right click on the main layer (still in the layer pallete) and choose Blending options. Put on an Outer
Glow and Bevel and Embross (play around with the settings, and see what you like. Preview is in real-time, so
you can see what will look good and what won't)
14. Add some text to your Buttons.
15. Site back, relax and marvel at the fruits of thy labour!
*****some good idea not covered in this tutorial.*****
To use it on a web page, it will be wise to make the back ground transperant, make the image a gif and then
create an Image map. You can also try slicing the image and then making rollover buttons. Have fun.
/////////////////////////////////////////SUMMARY////////////////////////////////////
Here is the general steps you should follow when making somethign like this
1. Create the shape using the shape tools.
2. Rasterize, add gaussian blur, flatten image, adjust levels.
3. Put shape only on separate layer, add blending options (shadow, bevel, embross etc)
Have fun, and post some of your work 😀
With that said, lets learn how to make those cool UIs on you see around the web. Unlike LM's tutorials, I will summarize my points, so you can apply your knowledge to other projects. You're here to LEARN, not REPLICATE 😀.
Now, this is what the final product will be, and here are the steps:
1. Create a new document with 600 height and 200 width.
2. Take your ellipse tool and make an ellipse at the very top. Select the ellipse with the path selection tool
and copy then paste the shape. Now there are two ellipses, one top of the other.
3.With the move tool, take one of the ellipses and move it to the bottom. Select both ellipses with the path
selection tool and allign both ellipses so that they are in the centre (horizontal wise).
4. Make a new layer. Make another ellipse that is not too fat and goes from the centre of the top ellipse to the
centre of the bottom one. Copy/paste the shape, and move the second one so that it covers approx 2/3 of the
first one. Now, with the path selection tool (PST from now on) select the second ellipse, look at the top bar
and you will see frou buttons near the left. If you read the tool tips, you will see that the second one says
"Subtract from shape area". Click on that and you will see only 1/3rd of the original ellipse left. It should
look like this .Now select both shapes with the PST, combine them.
Copy/paste the shape and flip it horizontally. Put the first ellipse near the left, the second one (the flipped one) near the right. It should
look somethign like this.
5. Now select both of them with the PST, cut them and paste them in the same layer as the original 2 ellipses. Select all 4 shapes and combine them.
6. Now its time to make what will be our buttons. Use the shape tools and what you have learned in the previous
steps. I shall simply make 5 ellipses. Remember, the allign and distribute buttons (at the top when you are
working with the PST) are your friends 🙂 It should look somethign like this.
7. Now, rasterize the layer (layer > rasterize > layer) and apply Gaussian Blur to it (about 5.5pix should do
it). Should look like this.
8. Now flatten the image (Layer > Flatten Image, so that there is only the background left and everything is there. Go to Image >
Adjust > Levels, and type in 120, 2 , 140 in the top three boxes. Click OK.
9. Now take the fill tool, in the option bar from the frist drop down box choose "pattern" instead of
"foreground". In the Patter drop down box, choose the first one (blueish, bubly one), then click on the white
aread and viola! ( ss)
10. In the layer pallete, right click on the background layer and duplicate it (name it Main or something) and
then delete the background.
11. Select all the black area with the magid wand and delete it, so that there is ONLY the shape we made left on
that layer.
12. Make a new layer, fill is with solid black (using the fill bucket) and put it UNDER the layer containing the
shape. Like this.
13. Now right click on the main layer (still in the layer pallete) and choose Blending options. Put on an Outer
Glow and Bevel and Embross (play around with the settings, and see what you like. Preview is in real-time, so
you can see what will look good and what won't)
14. Add some text to your Buttons.
15. Site back, relax and marvel at the fruits of thy labour!
*****some good idea not covered in this tutorial.*****
To use it on a web page, it will be wise to make the back ground transperant, make the image a gif and then
create an Image map. You can also try slicing the image and then making rollover buttons. Have fun.
/////////////////////////////////////////SUMMARY////////////////////////////////////
Here is the general steps you should follow when making somethign like this
1. Create the shape using the shape tools.
2. Rasterize, add gaussian blur, flatten image, adjust levels.
3. Put shape only on separate layer, add blending options (shadow, bevel, embross etc)
Have fun, and post some of your work 😀
