ALBORZ.VICTOR
Member
1.New set
Create a new set aka "Folder" and call it "Navigation"
2.Rectangle select
Select a the colours light grey and dark grey and then make a rectangle selection that is roughly 150% bigger then the button you intend to make.
3.Inverse the Selection
Now go to select > modify > smooth, enter 3. Then select > inverse, press delete, then select > inverse.
4.Duplicate the layer
Proceed to make a duplicate of your layer, and then choosing the original (which is below your duplicate) press Ctrl+u and decrease the lightness some around -10, then move your layer down 5 pixels or so.
5.Resize the button
Finally click on the duplicate layer, press ctrl+e and then press ctrl+t to resize down to the apporiate size of the button you wish to create:
6.Add layer style
Now to give extra depth, add an outerglow:
and a stroke:
7.Create a dotted line
Now you'll need to create a dotted line, an easy way is creating a new layer, making a 1x1 pixel box fill it and duplicate it. Make a line of grey then another line of white, and place on the button as so:
*Note this is zoomed in on the button itself*
8.Positioning the dots
After positioning the dots, you may want to change the lightness of the button by pressing ctrl+u it should look something like this:
9.Creating small arrow.
Now you need to make a small arrow. Create a new layer, above all of your current button layers, then using polygonal marquee tool:
you will need to hold shift and make a small arrow.
10.Add layer style
Position the arrow to the left of dotted line and add the following outerglow:
The last step is adding some text, with a dropshadow of:
Congratulations you should have something like this!
-----------------------------------------------------------------------------------------------------------------------------
این از آموزش Button حرفه ای و در ادامه آموزش قسمتی که Button ها و Header در اون جا میگیره
البته من Button بالا رو به کار بردم با کمی تغیرات جالب شد.
-----------------------------------------------------------------------------------------------------------------------------
1.ew document
Make a new document. I used 600x120 for this tutorial. Leave the background white for the time being
2.Marque Tool selection
Make a New Layer. Grab the Rectangular Marque Tool and make a thin selection at the top from the left to the right:
Fill it in with a dark medium red/maroon color. I used #C92F2F.
3.apply line
Using the Line Tool apply a black 1px line under the red thin rectangle you just created:
Using the Line Tool again make another line under the black line you just created. Use a nice soft grey. I used #CCCCCC. You wont be able to see it now, but you will in a few more steps.
4.make thin rectangle
Make a New Layer and use the Rectangular Marque Tool to make another thin rectangle:
Fill the selection in with any color you wish. Now right click the layer and go to Blending Options. Click on Gradient Overlay and apply these settings:
you should have something like this:
Ok now that the detailed part of the header is complete we can now apply the simpler detailing.
5.Marque Tool selection
Make a New Layer and select the Rectangular Marque Tool again and make a selection like below:
Fill it in with a light toned grey. I used #D2D2D2
6.Blending Options
Now right click the layer and go to Blending Options. Select Inner Shadow and apply these settings:
Now you got something like this:
7.Marque Tool selection
Make a selection with the Rectangular Marque Tool like below
Now press CNTRL+U. We are now going to change the color so it gives the grey a different toned feel instead of just a solid color.
Now you got something like this:
8.working on the navigation part
Now we can start working on the navigation part. This is pretty simple. We will be using the Marque Tools along with the Line Tool to accomplish the creation of the menu. First make a New Layer. Select the Marque Tool and make a selection like below:
Lets start out with a nice dark color for the menu. I used #121212.
9.makes line
Now its time to get creative and use the Line Tool. Make another New Layer and makes lines like I did below:
Also note for the top horizontal line I used 2px instead of 1px. Ok finish up with your lines and now lets move on to the final steps!
10.dark grey Fill
Make a New Layer. Grab the Rectangular Marque Tool and make a selection like below:
Fill it in with a dark grey. I used #5D5D5D.
11.final touches
Add your final touches, yes this is the part where you.. yourself get creative! Find a nice font to use, make an appealing logo and once your all done show it off to your friends! I hope you enjoyed the tutorial. Here is my final work:
Enjoy.
منبع : مرحوم TheDesignWorldCreate a new set aka "Folder" and call it "Navigation"
2.Rectangle select
Select a the colours light grey and dark grey and then make a rectangle selection that is roughly 150% bigger then the button you intend to make.
3.Inverse the Selection
Now go to select > modify > smooth, enter 3. Then select > inverse, press delete, then select > inverse.
4.Duplicate the layer
Proceed to make a duplicate of your layer, and then choosing the original (which is below your duplicate) press Ctrl+u and decrease the lightness some around -10, then move your layer down 5 pixels or so.
5.Resize the button
Finally click on the duplicate layer, press ctrl+e and then press ctrl+t to resize down to the apporiate size of the button you wish to create:
6.Add layer style
Now to give extra depth, add an outerglow:
and a stroke:
7.Create a dotted line
Now you'll need to create a dotted line, an easy way is creating a new layer, making a 1x1 pixel box fill it and duplicate it. Make a line of grey then another line of white, and place on the button as so:
*Note this is zoomed in on the button itself*
8.Positioning the dots
After positioning the dots, you may want to change the lightness of the button by pressing ctrl+u it should look something like this:
9.Creating small arrow.
Now you need to make a small arrow. Create a new layer, above all of your current button layers, then using polygonal marquee tool:
you will need to hold shift and make a small arrow.
10.Add layer style
Position the arrow to the left of dotted line and add the following outerglow:
The last step is adding some text, with a dropshadow of:
Congratulations you should have something like this!
-----------------------------------------------------------------------------------------------------------------------------
این از آموزش Button حرفه ای و در ادامه آموزش قسمتی که Button ها و Header در اون جا میگیره
البته من Button بالا رو به کار بردم با کمی تغیرات جالب شد.
-----------------------------------------------------------------------------------------------------------------------------
1.ew document
Make a new document. I used 600x120 for this tutorial. Leave the background white for the time being
2.Marque Tool selection
Make a New Layer. Grab the Rectangular Marque Tool and make a thin selection at the top from the left to the right:
Fill it in with a dark medium red/maroon color. I used #C92F2F.
3.apply line
Using the Line Tool apply a black 1px line under the red thin rectangle you just created:
Using the Line Tool again make another line under the black line you just created. Use a nice soft grey. I used #CCCCCC. You wont be able to see it now, but you will in a few more steps.
4.make thin rectangle
Make a New Layer and use the Rectangular Marque Tool to make another thin rectangle:
Fill the selection in with any color you wish. Now right click the layer and go to Blending Options. Click on Gradient Overlay and apply these settings:
you should have something like this:
Ok now that the detailed part of the header is complete we can now apply the simpler detailing.
5.Marque Tool selection
Make a New Layer and select the Rectangular Marque Tool again and make a selection like below:
Fill it in with a light toned grey. I used #D2D2D2
6.Blending Options
Now right click the layer and go to Blending Options. Select Inner Shadow and apply these settings:
Now you got something like this:
7.Marque Tool selection
Make a selection with the Rectangular Marque Tool like below
Now press CNTRL+U. We are now going to change the color so it gives the grey a different toned feel instead of just a solid color.
Now you got something like this:
8.working on the navigation part
Now we can start working on the navigation part. This is pretty simple. We will be using the Marque Tools along with the Line Tool to accomplish the creation of the menu. First make a New Layer. Select the Marque Tool and make a selection like below:
Lets start out with a nice dark color for the menu. I used #121212.
9.makes line
Now its time to get creative and use the Line Tool. Make another New Layer and makes lines like I did below:
Also note for the top horizontal line I used 2px instead of 1px. Ok finish up with your lines and now lets move on to the final steps!
10.dark grey Fill
Make a New Layer. Grab the Rectangular Marque Tool and make a selection like below:
Fill it in with a dark grey. I used #5D5D5D.
11.final touches
Add your final touches, yes this is the part where you.. yourself get creative! Find a nice font to use, make an appealing logo and once your all done show it off to your friends! I hope you enjoyed the tutorial. Here is my final work:
Enjoy.
