Freelancers and agencies both require a smooth design workflow. This typically starts out with drafting wireframes that eventually turn into full mockups. These mockups are coded into HTML/CSS layouts that are finalized and handed off to the client.
It may seem daunting but if you want to understand the full creation process then it’s worth learning both the design & development side of building websites.
In this two-part series I’ll explain how to design some buttons from scratch and code them into CSS. This first part will focus solely on Photoshop, explaining how to create vector buttons and layer effects from scratch. Once the PSD is complete we can move onto part 2 and code these buttons into CSS.
Creating the Document
Since this project isn’t going to be a full website, the document dimensions are of lesser importance. I’m going to create a document 900px wide by 500px high at 72ppi.
For the background let’s create a radial gradient extending from the center. Then we can add noise as a smart filter for a bit of texture. Select the gradient tool(shortcut G) and then change your foreground color to #b8e0ee and your background to #8cbdce.
Click & drag from anywhere in the center of the document to create the radial effect. Then right-click on this layer and select “create smart object”. Now if we go to Filter > Noise > Add Noise…
These settings will be saved as smart filters on the background. This means that you can always go back and tweak the noise settings, or completely remove the filter to get back to the clean gradient.
Next I’ll make a text layer at the top for some heading text. I’ve chosen a lighter background gradient with a slight drop shadow effect, but you can try out some different techniques since this text won’t affect the buttons.
Button Set #1
The first button style is somewhat basic yet fits perfectly into any design. These buttons are loosely based on Google’s newer button style that uses soft blue gradients and soft borders without many shadows or interactive effects.
Grab the rounded rectangle tool and set a 200px width, 40px height, and 5px border radius. Click to create this button anywhere on the document.
We only need 2 different layer styles for this design: a gradient coupled with an outer stroke for the border. You can use the following settings.
For the button text I’ll be using Open Sans which you can download & install on your computer. Realistically any sans-serif font should work fine.
Add some label text and give it drop shadow with the color #3d628f. This helps the text stand out against the button and remain crisp.
With this first button created we can duplicate the layer and make changes to accommodate for the hover & active states. It would also be a good idea to create individual groups for these button states.
For the hover state I’ve only slightly changed the gradient color. Double-click the gradient layer effect and change the colors to match these:
The active click-event button style will update the gradient along with a new inner shadow + inner glow. The text color also changes to #94adc9 so it darkens with the button.
Duplicate the layer again to create a new active button. When editing the active button remove the stroke and make the following changes to your layer styles. Be sure to add the inner glow/shadow effects as well.
And with these changes we’ve wrapped up the first button set. Huzzah!
Now we can move onto the 2nd button set which uses a typical Vista-style gradient.
Button Set #2
On a new layer grab your rounded rectangle tool and use 200px width, 50px height with a 3px radius. This will look similar to the other button with tighter edges and a bit more height.
Let’s start off with the layer styles. For this button we want to create multiple gradient stops for the top glossy shine effect. Add a gradient overlay to your button and use these settings:
Lastly we need to add a drop shadow, outer stroke, and a slight inner shadow as well. The inner shadow is used to create a small 1px gloss at the very top of the button. Follow along and duplicate these settings:
Finally try duplicating the original text from the first button set and drag this on top of your new button. We can keep the same text but just change the shadow a bit. The drop shadow color on the text should now be #2b4e60 which is a darker shade of blue.
Here’s what we’ve got so far:
The next step is to group this button & text together into a new layer group. You can select both layers and either click the small folder icon at the bottom of the palette, or use the keyboard shortcut CTRL/CMD+G.
Now duplicate this layer group twice to get templates for the hover and active classes. Feel free to rename these groups accordingly.
For the hover effect I’m going to go a little darker on this style. In our previous button the hover effect was lighter but it can actually look great both ways. So for the hover button change the gradient style to match these settings:
All the other settings are fine so we can leave them alone. But moving onto the active button state there are many differences.
The active button gradient removes the inner stops and uses a simple 2-point gradient. We also remove the dark drop shadow for an inset shadow to make the button appear recessed into the page. I’m also removing the button stroke to help this recessed light stand out against the background.
And now everything is done! Both of our buttons are completed and they look fantastic.
Here’s what my final button sets look like together.
Onward to Part 2!
With both of these buttons finished you may want to go back and update group/layer names. Since the PSD is finished we’re ready to move onto part 2 and start coding in CSS.
For those who would rather download the completed PSD you can grab my project file here and use this as a base for the CSS code. See you in the next tutorial!
