All Blog
Advanced Website Navigation Buttons

In this tutorial you will learn how to make a set of website buttons
like the one shown below.


Advanced Website <br>Navigation Buttons


So let’s get started. Start by
selecting a rectangle as long and wide as you want your navigation bar
to be. Fill it with White (#FFFFFF).




Now go to your blending options and insert these
settings.


Now that you have the blending options in it should look something
like this:



Create a New Layer. Ctrl – Click
the last layer beneath the one you just created. While making sure you
have the new layer selected in the layers palette fill the selection
black. Then resize the width so it is only a pixel or
two smaller than the layer beneath it. You should now have something
like this:



Go into your blending options and apply these
settings to your layer.



Now you should have something like this:



Now that we have those two layers done, create a new layer. CTRL
– Click
the layer beneath your newly created layer. Now make
sure you have your new layer selected in the layers palette. Fill the
selection White. Now resize the width of the layer so
it is slightly smaller than the layer beneath it. You should now have
something like this:



Now go to your blending options and insert these
settings:



Now that we have that done you should have something like this:



Now create a New Layer. Grab a circle brush.
Set it to:


Size : 1 px

Hardness: 100%


With your 1 px hard brush set you foreground to the
color: #3a3a3a


Now on the new layer click once at the top of your button. Go down to
the bottom while holding CTRL click again. (This
should create a line from where your first click was, however it might
take some practice on getting it to be straight.)


Now again start at the top of your button 1 pixel away from the
previous line. Using the color: #ACACAC


Click once at the top next to your previous pixel. (It has to be
DIRECTLY next to your other line for this to work)


Now go to the bottom and CTRL- click right next to your
previous line
. Creating two lines, 1 dark and one light.


Now set the layers blending mode to Hard Light.


You should have something like this:



Now add your text to it and you have a nice set of buttons!


Advanced Website <br>Navigation Buttons


Congratulations! You successfully learned how to create a nice pair
of buttons for your website. I encourage you to use the techniques you
use in this tut to try and modify these buttons making them your own.




















































Create Date : 11 พฤษภาคม 2553
Last Update : 11 พฤษภาคม 2553 16:09:13 น.
Counter : 338 Pageviews.

0 comment
Website Buttons

In this Photoshop Tutorial you will be learning how to create some
nice rounded website buttons, as shown below:


Website Button


First Step:

Create a new file (File > New) with 200 x
200



Second Step:



Third Step:

Create a rounded rectangle using the rounded rectangle tool



Fourth Step:

Go to the layers box , right click on the layer select blending
options



Fifth Step:

Choose inner shadow, set the settings like this:



Result after doing inner shadow



Sixth Step:

Set foreground color to #9a4300


Seventh Step:

Open the blending options dialog again, choose gradient
overlay,
set the settings like this:



Eight Step:

Choose stroke, set these settings:



Ninth Step:

Choose inner glow, set these settings:



Tenth Step:

Choose drop shadow, set these settings:



Eleventh Step:

Result



Now add your text using the horizontal type tool
























































Create Date : 11 พฤษภาคม 2553
Last Update : 11 พฤษภาคม 2553 15:57:53 น.
Counter : 411 Pageviews.

0 comment
Create Proffesional Web2.0 Buttons
Let’s create some professional web2.0 buttons like this …..

probutton11.gif

Step One


Draw a square like this


Create Proffesional Web2.0 Buttons Photoshop Tutorial.


Then


Layer => Layer Style => Blending Options …


Inner Shadow


Create Proffesional Web2.0 Buttons Photoshop Tutorial.


Gradient Overlay


Create Proffesional Web2.0 Buttons Photoshop Tutorial.


The Gradient


Create Proffesional Web2.0 Buttons Photoshop Tutorial.


Stroke


Create Proffesional Web2.0 Buttons Photoshop Tutorial.


Result


Create Proffesional Web2.0 Buttons Photoshop Tutorial.


Step Two


Draw 1px line [black].


Then


Layer => Layer Style => Blending Options …


Bevel and Emboss


Create Proffesional Web2.0 Buttons Photoshop Tutorial.


Result
Create Proffesional Web2.0 Buttons Photoshop Tutorial.


Add arrow from shapes or add your logo and write on your button .

Cradit: oweb2.com





Create Date : 11 พฤษภาคม 2553
Last Update : 11 พฤษภาคม 2553 15:48:10 น.
Counter : 354 Pageviews.

0 comment
Vista Styled Button

Step 1


Like usual we are going to start off with filling the background with
a radial gradient from a light grey to a darker grey. Light grey:
#3e3d3d. Dark grey: #151515.



Step 2


Create a new layer (Layer > New > Layer) and using the rounded
rectangle tool make a fixed shape of 300 by 50 pixels in the middle of
the document.



Right click the shape and click make selection.



Select the gradient tool and set the style to reflected gradient. Set
the foreground colour to #1c3f47 and the background colour to #2a6976.
Left click in the middle of the selection and drag to the bottom of the
selection and release. This will provide us with the base of the button.



Step 3


Now we are going to be adding some layer styles to our button to make
it vista styled.


Layer > Layer Styles > Outer Glow







Layer > Layer Styles > Inner Glow





Layer > Layer Styles > Gradient Overlay



Now your button should be looking like this.



Step 4


Now we are going to be adding a reflection to our button. On a new
layer select the area of your base layer (ctrl + click layer) and fill
the selection with white (#ffffff).



With the rectangular marquee tool selected move it down below the
button.



Go Edit > Transform > Perspective and drag the bottom right box
towards the right while holding down the shift key (this pulls the
other side out too so it keeps it even).



Add a layer mask and add a gradient from white to black within the
reflection – this will fade it out.



Set the blend mode of the layer to Soft Light and lower the opacity
to 15%.



Step 5


Last of all we are going to be adding some text. Choose a nice crisp
and clean font for this.





Cradit: tutorialkit.com



Create Date : 28 เมษายน 2553
Last Update : 28 เมษายน 2553 17:24:21 น.
Counter : 512 Pageviews.

0 comment
Outline Text
1. We're gonna start off by creating a new document (CTRL + N). I made this one 500x100px. Add a new text layer. Now if you're smart you'll choose a bold font, because thin small will be hard to read once you "outlined" them. I used Arial Black, 36pt.



2. Now go to Blending Options (Right-click on text layer) Turn the "fill opacity" down to 0%. The text should have disappeared.

3. Select Stroke form the list (still in the blending options menu).
Size: 2 pixels, Fill Type: Color. Then pick a color you think would be
good for the outline and Voila!





Create Date : 28 เมษายน 2553
Last Update : 28 เมษายน 2553 17:04:38 น.
Counter : 368 Pageviews.

0 comment
1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  

ชีวานรินทร์
Location :
  

[ดู Profile ทั้งหมด]
ให้ทิปเจ้าของ Blog [?]
 ฝากข้อความหลังไมค์
 Rss Feed
 Smember
 ผู้ติดตามบล็อก : 3 คน [?]