رحال للتصميم
09-10-2006, 04:25 PM
Images are low quality, please check end result link to see full quality)
http://www.thedesignworld.com/images/theme/tdw/misc/step-1.gif
The base
http://www.thedesignworld.com/images/theme/tdw/misc/tutorial-step-bg_03.gif
First of all, you need to create a new ********,
make it "1024" by "768" pixels.
after you have done that, fill it in will black.
http://www.thedesignworld.com/images/theme/tdw/misc/step-2.gif
The main frame
http://www.thedesignworld.com/images/theme/tdw/misc/tutorial-step-bg_03.gif
Create a new layer (Ctrl + Shift + N)
using the "rounded rectangular tool" (shortcut = u) make a rectangle just below half way using a 25px radius (in the toolbar section).
once you have done that, right click on it "make selection" and then "OK". fill this with white (Ctrl + backspace).
http://www.thedesignworld.com/images/photoshop-tutorial/a1/227/photoshop-tutorial-a1-227-2331.gif
http://www.thedesignworld.com/images/theme/tdw/misc/step-3.gif
The header
http://www.thedesignworld.com/images/theme/tdw/misc/tutorial-step-bg_03.gif
Create a new layer (Ctrl + Shift + N)
now, using the rounded rectangular tool again with the same settings, make a thinner rectangle for the header, this time filling in with blue.
http://www.thedesignworld.com/images/photoshop-tutorial/a1/227/photoshop-tutorial-a1-227-2332.gif
Make sure that you leave a reasonable gap between them.
Then right click on the headers layer, press "blending options" and insert these settings:
http://www.thedesignworld.com/images/photoshop-tutorial/a1/227/photoshop-tutorial-a1-227-2333.gif
http://www.thedesignworld.com/images/theme/tdw/misc/step-4.gif
The link buttons
http://www.thedesignworld.com/images/theme/tdw/misc/tutorial-step-bg_03.gif
Create a new layer (Ctrl + Shift + N)
using the rounded rectangular tool again (this time setting the radius to between 5-10 px) draw a small box in between them, but so that it overlaps step2 and 3. then using the gradient tool (shortcut = G) have your first colour black (#000000) and your second colour purple (something close to #360783) and you should be left with something similar to this:
http://www.thedesignworld.com/images/photoshop-tutorial/a1/227/photoshop-tutorial-a1-227-2335.gif
After that, right click on the layer and select "blending options", tick drop shadow,, leaving it default, and apply the following settings to "bevel and emboss"
Then duplicate the layer (Ctrl + J) four times, each time moving it to the right slightly using thee move tool "shortcut = V" (holding shift to keep it in line) thus resulting in something similar to this:
http://www.thedesignworld.com/images/photoshop-tutorial/a1/227/photoshop-tutorial-a1-227-2336.gif
http://www.thedesignworld.com/images/theme/tdw/misc/step-5.gif
Making the main frame pretty
http://www.thedesignworld.com/images/theme/tdw/misc/tutorial-step-bg_03.gif
select the white layer (step 2) and right click on the layer and press blending option, from their just tick "drop shadow" and "inner shadow" leaving the default settings.
also (optional), select the rectangular marquee tool (shortcut = M)to highlight a thin line of it going down giving it a 1:3 ratio and press backspace to delete it:
http://www.thedesignworld.com/images/photoshop-tutorial/a1/227/photoshop-tutorial-a1-227-2337.gif
http://www.thedesignworld.com/images/theme/tdw/misc/step-6.gif
Link button glass effect
http://www.thedesignworld.com/images/theme/tdw/misc/tutorial-step-bg_03.gif
create a new layer (Ctrl + Shift + N)
using the rounded rectangular tool again, with the same radius that you used for making the link buttons, draw it over half a button (from top downwards) and fill it with white and change the layer opacity to 10%, after that press "edit" --> "transform" --> "warp". and pull the left side down and the right side up, duplicate the layer and drag it over each button to get something similar to this:
http://www.thedesignworld.com/images/photoshop-tutorial/a1/227/photoshop-tutorial-a1-227-2338.gif
http://www.thedesignworld.com/images/theme/tdw/misc/step-7.gif
Name plate
http://www.thedesignworld.com/images/theme/tdw/misc/tutorial-step-bg_03.gif
Now create a layer just above the background and under the "step 2". pull out the rounded rectangular tool again and draw a thin box that just sticks out below the main frame. fill it with a dark grey and (if you have any suitable, a pattern). you should get something similar to this:
http://www.thedesignworld.com/images/photoshop-tutorial/a1/227/photoshop-tutorial-a1-227-2339.gif
http://www.thedesignworld.com/images/theme/tdw/misc/step-8.gif
The logo
http://www.thedesignworld.com/images/theme/tdw/misc/tutorial-step-bg_03.gif
Create a new layer (Ctrl + Shift + N) making shore its on top.
place your logo on the header or make one, the best place is www.good-tutorials.com and as result you should have something like this:
http://www.thedesignworld.com/images/photoshop-tutorial/a1/227/photoshop-tutorial-a1-227-2340.gif
http://www.thedesignworld.com/images/theme/tdw/misc/step-1.gif
The base
http://www.thedesignworld.com/images/theme/tdw/misc/tutorial-step-bg_03.gif
First of all, you need to create a new ********,
make it "1024" by "768" pixels.
after you have done that, fill it in will black.
http://www.thedesignworld.com/images/theme/tdw/misc/step-2.gif
The main frame
http://www.thedesignworld.com/images/theme/tdw/misc/tutorial-step-bg_03.gif
Create a new layer (Ctrl + Shift + N)
using the "rounded rectangular tool" (shortcut = u) make a rectangle just below half way using a 25px radius (in the toolbar section).
once you have done that, right click on it "make selection" and then "OK". fill this with white (Ctrl + backspace).
http://www.thedesignworld.com/images/photoshop-tutorial/a1/227/photoshop-tutorial-a1-227-2331.gif
http://www.thedesignworld.com/images/theme/tdw/misc/step-3.gif
The header
http://www.thedesignworld.com/images/theme/tdw/misc/tutorial-step-bg_03.gif
Create a new layer (Ctrl + Shift + N)
now, using the rounded rectangular tool again with the same settings, make a thinner rectangle for the header, this time filling in with blue.
http://www.thedesignworld.com/images/photoshop-tutorial/a1/227/photoshop-tutorial-a1-227-2332.gif
Make sure that you leave a reasonable gap between them.
Then right click on the headers layer, press "blending options" and insert these settings:
http://www.thedesignworld.com/images/photoshop-tutorial/a1/227/photoshop-tutorial-a1-227-2333.gif
http://www.thedesignworld.com/images/theme/tdw/misc/step-4.gif
The link buttons
http://www.thedesignworld.com/images/theme/tdw/misc/tutorial-step-bg_03.gif
Create a new layer (Ctrl + Shift + N)
using the rounded rectangular tool again (this time setting the radius to between 5-10 px) draw a small box in between them, but so that it overlaps step2 and 3. then using the gradient tool (shortcut = G) have your first colour black (#000000) and your second colour purple (something close to #360783) and you should be left with something similar to this:
http://www.thedesignworld.com/images/photoshop-tutorial/a1/227/photoshop-tutorial-a1-227-2335.gif
After that, right click on the layer and select "blending options", tick drop shadow,, leaving it default, and apply the following settings to "bevel and emboss"
Then duplicate the layer (Ctrl + J) four times, each time moving it to the right slightly using thee move tool "shortcut = V" (holding shift to keep it in line) thus resulting in something similar to this:
http://www.thedesignworld.com/images/photoshop-tutorial/a1/227/photoshop-tutorial-a1-227-2336.gif
http://www.thedesignworld.com/images/theme/tdw/misc/step-5.gif
Making the main frame pretty
http://www.thedesignworld.com/images/theme/tdw/misc/tutorial-step-bg_03.gif
select the white layer (step 2) and right click on the layer and press blending option, from their just tick "drop shadow" and "inner shadow" leaving the default settings.
also (optional), select the rectangular marquee tool (shortcut = M)to highlight a thin line of it going down giving it a 1:3 ratio and press backspace to delete it:
http://www.thedesignworld.com/images/photoshop-tutorial/a1/227/photoshop-tutorial-a1-227-2337.gif
http://www.thedesignworld.com/images/theme/tdw/misc/step-6.gif
Link button glass effect
http://www.thedesignworld.com/images/theme/tdw/misc/tutorial-step-bg_03.gif
create a new layer (Ctrl + Shift + N)
using the rounded rectangular tool again, with the same radius that you used for making the link buttons, draw it over half a button (from top downwards) and fill it with white and change the layer opacity to 10%, after that press "edit" --> "transform" --> "warp". and pull the left side down and the right side up, duplicate the layer and drag it over each button to get something similar to this:
http://www.thedesignworld.com/images/photoshop-tutorial/a1/227/photoshop-tutorial-a1-227-2338.gif
http://www.thedesignworld.com/images/theme/tdw/misc/step-7.gif
Name plate
http://www.thedesignworld.com/images/theme/tdw/misc/tutorial-step-bg_03.gif
Now create a layer just above the background and under the "step 2". pull out the rounded rectangular tool again and draw a thin box that just sticks out below the main frame. fill it with a dark grey and (if you have any suitable, a pattern). you should get something similar to this:
http://www.thedesignworld.com/images/photoshop-tutorial/a1/227/photoshop-tutorial-a1-227-2339.gif
http://www.thedesignworld.com/images/theme/tdw/misc/step-8.gif
The logo
http://www.thedesignworld.com/images/theme/tdw/misc/tutorial-step-bg_03.gif
Create a new layer (Ctrl + Shift + N) making shore its on top.
place your logo on the header or make one, the best place is www.good-tutorials.com and as result you should have something like this:
http://www.thedesignworld.com/images/photoshop-tutorial/a1/227/photoshop-tutorial-a1-227-2340.gif