< Browse > Home / All, BUTTON, Tutorial, Website / Blog article: RIATMP1067 – Menu Bar / Button – Photoshop Tutorial

| Mobile | RSS

RIATMP1067 – Menu Bar / Button – Photoshop Tutorial

June 19th, 2009
Simple but attractive Menu Bar / Button – Photoshop Tutorial
RIATMP1067 - Menu Bar / Button – Photoshop Tutorial

Simple but attractive Menu Bar / Button – Photoshop Tutorial

Click here to download

This is simple but very attractive buttons you can create in 5 minutes and with this step by step tutorial almost everyone with little or no knowledge in Photoshop can do it. Please click on the image to see large.

Step 1: Create a new file of about 770px /300 px, with White Background (File -> New)

Step 2: Make sure layer window is open and add a new layer by clicking Create a New Layer Icon at bottom right of your layer window. Give this new layer a name ‘button′.

Step 3: Now select the Rounded Rectangle Tool, enter 5 px as radius for the rounded corner and draw your rectangle button shape (PIC1). Right Click on that shape and choose “Make Selection” (PIC2).

 

pic11 RIATMP1067   Menu Bar / Button – Photoshop Tutorial
pic11

pic1

pic2 RIATMP1067   Menu Bar / Button – Photoshop Tutorial
pic2

pic2

Step 4: In layer palate; right click on the “Button” layer and choose Blending Options. First add Gradient Overlay. Follow image (PIC3) for all the values. Next add STROKE. Follow image (PIC4) for values. With these layer effects you will get Button like image (PIC5).

pic3 RIATMP1067   Menu Bar / Button – Photoshop Tutorial
pic3

pic3

 

pic4 RIATMP1067   Menu Bar / Button – Photoshop Tutorial
pic4

pic4

 

pic5 RIATMP1067   Menu Bar / Button – Photoshop Tutorial
pic5

pic5

 

Step 5: Copy this “Button” layer and give it a name “Button2”. Now select a small portion of this button and then choose “select inverse” and then delete the selected portion. Please follow these 2 images (PIC6, PIC7) for your reference.  Make 2 more copies and merge all of them in one layer.

pic6 RIATMP1067   Menu Bar / Button – Photoshop Tutorial
pic6

pic6

 

pic7 RIATMP1067   Menu Bar / Button – Photoshop Tutorial
pic7

pic7

 

Step 6: Create another layer and give it a name “Button3”. Now select a small portion of the main button using rectangle selection tool. Then choose Blending Options. First add Gradient Overlay. Follow image (PIC8) for all the values. Now add text what ever you want. You can also add some effects in your text. Here I’ve added “drop shadow” effect. And now you are done with your Menu Bar. Thank you for your visit.

pic8 RIATMP1067   Menu Bar / Button – Photoshop Tutorial
pic8

pic8

Share and Enjoy
  •  RIATMP1067   Menu Bar / Button – Photoshop Tutorialfavicons?domain=digg RIATMP1067   Menu Bar / Button – Photoshop Tutorialfavicons?domain=www.dzone RIATMP1067   Menu Bar / Button – Photoshop Tutorialfavicons?domain=www.facebook RIATMP1067   Menu Bar / Button – Photoshop Tutorialfavicons?domain=www.google RIATMP1067   Menu Bar / Button – Photoshop Tutorialfavicons?domain=www.linkedin RIATMP1067   Menu Bar / Button – Photoshop Tutorialfavicons?domain=favorites.live RIATMP1067   Menu Bar / Button – Photoshop Tutorialfavicons?domain=www.mixx RIATMP1067   Menu Bar / Button – Photoshop Tutorialfavicons?domain=www.myspace RIATMP1067   Menu Bar / Button – Photoshop Tutorial RIATMP1067   Menu Bar / Button – Photoshop Tutorialfavicons?domain=reddit RIATMP1067   Menu Bar / Button – Photoshop Tutorialfavicons?domain=www.stumbleupon RIATMP1067   Menu Bar / Button – Photoshop Tutorialfavicons?domain=technorati RIATMP1067   Menu Bar / Button – Photoshop Tutorialfavicons?domain=twitter RIATMP1067   Menu Bar / Button – Photoshop Tutorialfavicons?domain=buzz.yahoo RIATMP1067   Menu Bar / Button – Photoshop Tutorial
Leave a Reply 3124 views, 3 so far today |

Leave a Reply