In this tutorial I'm going to show you how to create a classic button that is used on a wide variety of websites, and application skins today. It is a very simple process that results in a high quality graphic button.
Page 1 of 1
Step 1.)
Open an existing layout/document where you'd like to use these buttons, or just start a new one. I'm using a document that is 780x150 with a background color of: #FAFAFA. And create a new layer.
Step 2.)
Using the rectangular marquee tool, make a selection similar to this:
Step 3.)
go to "select->modify->smooth" and set the smooth setting to 2
and fill this selection with white (#FFFFFF).
Step 4.)
Next double click on this layer, and apply the following blending options:
Outter glow:
Gradient Overlay:
Colors used (from left to right) are:
#FFFFFF | #DADADA | #FFFFFF
Step 5.)
Next make a new layer, and set your foreground color to: #CD5A09
Get out your Pencil tool, with a brush size of 1 pixel. Zoom in close (you can zoom in/out by holding down the CTRL and pressing the (plus) + and (minus) - keys), and draw the following pair of arrows onto your button.
Step 6.)
Now all we need to do is apply some text to our button. These types of buttons usually have a nice pixel font attached to them. I've used a font size of 8pt, and a color
of: #767676
The font l've used here is called BM Mini which is, in my opinion the best pixel font available for free. You can download it for free here.
And that's it, these buttons are great for a nice clean professional look to your layout, or application skins. Have fun and enjoy!
Related Tutorials: Render Layout Tutorial vol. 4: Button Creation In this tutorial you will learn how to create an entire layout by using an exsis ... CMS Buttons Learn how to create simple CMS or (Content Management System) buttons, quickly a ... Classic Buttons Learn how to create a classic button that is used on a wide variety of websites, ...
Render Layout Tutorial vol. 4: Button Creation
