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
Creating a Lock button for taskbar in Windows 7
Create the Flash Logo (Photoshop Tutorial)
The Third Best Page In The Universe.
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
Create a Flash Contact form, sends to your email account
Game Maker
Active Button With Css And Php...
751 Useful Windows XP Files
Andermans Tips For Creating A New Website
Dreamweaver Help!
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

© 2005-2011 Frihost, forums powered by phpBB.