FM Themes
Welcome to FM Themes
where you can share your ModernBB, punBB, phpBB 2, Invision, & phpBB 3 themes for Forumotion forums.

You are viewing the forum as a guest, so you will not be able to use the full forum. To use all the features of the forum, you need to log in or create a FREE account by registering.
Go down

Modern Button Creation

on Fri Apr 18, 2014 11:00 am
Modern Button Creation (Photoshop)
Without Text Effect Information

Step 1:
Our first step is to start off with a blank canvas and to find our rounded rectangle tool, which I demonstrate the location to for Photoshop CS5. If you have a different version of Photoshop, this will be located differently for some versions, but should still be located similarly.

Step 2:
Then, we will go ahead and use this tool to make our button shape! Please keep in mind that you can control the curvature of the corners--to keep it modern, I recommend keeping it anywhere from 3px to 5px in the corners. The example below uses 3px corners. Feel free to use any color of button that you like, but keep in mind that you need to consider the background color that the button will be placed on. I'm currently using white, which means a neon color would be painful to the eyes, so I'm using a paler color, instead:

Step 3:
Now we are going to add some effects! I have used Photoshop settings to sort of give you an idea of what I'm using. First, there is the gradient, which adds depth to your button so that it's a little more 3D instead of just a flat button with no dimension:

Step 4:
Our next effect will be small, simple stroke on the outside, which you should make just slightly darker than the color of your button. You don't want it to be too much darker than your button, or it'll stick off of the page too much and draws attention from the art of the button, itself:

Step 5:
Just as your gradient adds lighting and depth, so too can additional lighting affects, as I will show below. I'm going to add just a small strip of light on the top of this button to match the gradient and give our button some additional depth. Keeping this light thin keeps the button modern, so make sure not to make this effect to thick at the top:

Step 6:
With closure, all you have to do is add your text (make sure it is centered!!) and then you'll be done! With text, there are very important factors: It's position, how easy it is to read, and of course--it's color! Make sure you pick a color that fits with your button color and make sure your text is easy to read. If it isn't legible, then it's pointless decoration, so keep that in mind.

In the example below, I added a slight drop shadow and a very small gradient, but I will be going over different text affects in a different tutorial so I won't really cover that here. So now, you should have a nice looking button with attractive text. Now you have created a modern styled button!
Written by Leah7
Posts : 3970
Points : 1867
Reputation : 311
View user profile

Re: Modern Button Creation

on Fri Apr 18, 2014 2:36 pm
Tutorial Accepted
Back to top
Permissions in this forum:
You cannot reply to topics in this forum