You are invited to Log in or Register a free Frihost Account!

[Beginner] Creating a simple and sleek button

In this tutorial I will show you how to create a simple, yet nicely looking button. I will be using Adobe Photoshop CS5, but it can be done in any version of photoshop.

Here is the final outcome:

Okay, so let's start by making a new document, you can make the button any size you want I chose 165 pixels by 27 pixels.

Next choose the Rounded Rectangle Tool from the left palette.

Apply those settings at the top:

And draw your button, like I have done here:

Then in the Layers Panel right click on your button, which is called Shape1 and choose: Blending Options...

Now you have to apply those settings to the button:

Your result should look similiar to this:

Next we must add some text, to do this click on the Horizontal Type Toolon the left palette.

Apply those settings at the top:

Now, you can choose any font you want, I chose Myriad Pro. Click here, if you want to download this font.
Use the text tool to draw a box like in the image below, so that the text is in the middle of the button. Add some text to the button, in my case I'm creating a Download button.

On the right hand side, right click on your Text Layer and again choose Blending Options...

Apply those settings to the text:

And there you go! You're finished, I hoped you liked my tutorial, and this is what your button should look like:

To download the .PSD file click on the button below.
.PSD Download

Tutorial in .PDF
thanks for the useful tips given to create the button
Related topics
751 Useful Windows XP Files
Dreamweaver Help!
Andermans Tips For Creating A New Website
Create the Flash Logo (Photoshop Tutorial)
The Third Best Page In The Universe.
Game Maker
Any other Flash Programmers out there?
feedback on my site
Ubuntu 6.10 - Sound & Compact Flash [SOLVED]
i want to learn programing
Including file with same definition on Win & Linux
Active Button With Css And Php...
Create a Flash Contact form, sends to your email account
Creating a Lock button for taskbar in Windows 7
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

© 2005-2011 Frihost, forums powered by phpBB.