SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Recreating Photoshop Effects in CSS – Part 1 – The PSD

May 26, 2015 by Jake Rocheleau

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.

create new document photoshop

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…

noise background smart filter

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.

add noise background filter

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.

text color gradient

text drop shadow effect

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.

create new rounded rectangle ps

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.

stroke color button

gradient overlay button shape

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.

drop shadow text effect style

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.

hover states button photoshop cs6

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:

hover button gradient

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.

inner shadow button design style

inner glow layer style

gradient change active button

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.

preview button 2nd style shape

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:

gradient glossy shine effect

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:

stroke color outline button

inner shadow glossy effect

drop shadow button layer style

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:

blue gradient style completed button

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:

active button gradient effect

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.

inner shadow glossy effect

gradient glossy active button

button drop shadow effect

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.

button design final package preview

Download the PSD

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!

Filed Under: Tutorial Tagged With: freebie, photoshop, psd, tutorial

Recent Posts

  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022
  • How to Get Your First Web Design Client

Archives

  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022