Skip to content

TechRepublic

  • Top Products
  • AI
  • Developer
  • Payroll
  • Security
  • Project Management
  • Accounting
  • CRM
  • Academy
Resources
  • TechRepublic Premium
  • TechRepublic Academy
  • Newsletters
  • Resource Library
  • Forums
  • Sponsored
Go Premium
Popular Topics
  • Top Products
  • AI
  • Developer
  • Payroll
  • Security
  • Project Management
  • Accounting
  • CRM
  • Academy
  • Project Management
  • Innovation
  • Cheat Sheets
  • Big Data
  • Tech Jobs
View All Topics
Go Premium
Developer

Creating a theme for your website with Photoshop

By Selena Frye March 3, 2011, 1:34 AM PST

Image
1
of 17

Creating a theme for your website with Photoshop

Hue/Saturation modifications

Hue/Saturation modifications

ntI first want to make the image a bit lighter and the simple way to do this is with the Hue/Saturation options: With the file open in Photoshop, I add a new layer with the menu path Layer | New Adjustment Layer | Hue/Saturation and then click OK. The Hue/Saturation dialog box opens and the settings are modified as shown.

Creating a theme for your website with Photoshop

Adding a drop shadow to the image

Adding a drop shadow to the image

ntBe sure that Colorize is checked, the settings are Hue: 43, Saturation: 28, and Lightness: +16. Of course, you can adjust these settings as you see fit for your application. Now the old paper image looks a bit lighter than the original, and not quite as aged; I also toggle the Hue/saturation layer off and on to compare the difference.

n

ntNext, I am going to add a new layer with some drop shadow to the image, following the menu path Layer | Layer Style | Drop Shadow with the following settings — Blend Mode: Multiply, Opacity: 65%, Angle: 120u00b0, Distance: 5px, Spread: 2%, and Size: 5px, as shown.

Creating a theme for your website with Photoshop

Modified background image

Modified background image

ntNothing too ornamental, just fine details that produce better results. The resulting image is shown.

Creating a theme for your website with Photoshop

Create button backgrounds

Create button backgrounds

ntNext, I am going to create some button backgrounds from the same background texture. With the background layer active and using Polygon Lasso tool, I am going to make a selection from the bottom of the image similar to the one shown.

Creating a theme for your website with Photoshop

Button layer

Button layer

ntThen we will make a new Layer via Copy (Ctrl+J), creating a new layer of the selected piece. I will rename the new layer u201cButtonu201d, as shown.

Creating a theme for your website with Photoshop

Move button layer to background

Move button layer to background

ntSelect this button layer then modify the positions and orientation by adjusting from the menu bar Edit | Transform | Rotate 180u00b0. Then using the Move Tool, position the button layer at the top of the background layer and on the far left side as seen here.

Creating a theme for your website with Photoshop

Positioning button layer

Positioning button layer

ntNow, move the button layer below the background layer so that it is positioned behind as displayed here.

Creating a theme for your website with Photoshop

Button layout

Button layout

ntContinue with these steps to create as many different buttons as you desire for your particular layout. I also used the Edit | Transform | Rotate and Skew options to manipulate several of the button placements; have fun with the settings to create your own button layout.  Once all the buttons are in place I also go to each button layer individually and add a drop shadow as I had done with the background layer previously. I have added five all together as shown here.

Creating a theme for your website with Photoshop

Adjust Hue/Saturation for button layer

Adjust Hue/Saturation for button layer

ntNow I am going to adjust each button’s hue and saturation the same as I did with the main background layer so that they can be distinguished from each other a bit more than the current settings. Select the button layer you need to adjust, then CTRL+U to make the Hue/Saturation adjustments.My results are displayed here.

Creating a theme for your website with Photoshop

Merge layers

Merge layers

ntNow, I’ll merge the Background Layer with the original Hue/Saturation layer by highlighting the two layers and then right-clicking over the selection. Click Merge Layers as shown so that color replacements for the buttons will be visible.

Creating a theme for your website with Photoshop

Replace Color options

Replace Color options

ntWith the first button layer Button 1 selected, I will use the Replace Color options from the menu path Image | Adjustments | Replace Color, resulting in the Replace Color dialogue box highlighting the settings for Button 2.

Creating a theme for your website with Photoshop

Color replacement on buttons

Color replacement on buttons

ntI continue with all the other buttons with these results.

Creating a theme for your website with Photoshop

Adding button text

Adding button text

ntNow that the button colors are individually replaced, we can add text layers for each. (This is a PSD example only; in part two of the series, we’ll get to the coding in HTML and the CSS will handle the button text.) Here, I am using the font Viner Hand ITC, Regular, 48px, and strong black. Make sure the button layer is selected and active, then select the text tool, and enter your desired text. I’ve added u201cHomeu201d on the first button.

Creating a theme for your website with Photoshop

Add text and image elements

Add text and image elements

ntI continue with adding other text elements throughout the remaining buttons and the main content background, creating content based on a restaurant website for example purposes. Then I added in some images onto the layout as well.

Creating a theme for your website with Photoshop

Adding another background layer

Adding another background layer

ntI need to add another background layer behind the content body to fill the rest of the page. I think some wood grain or quarry tile type of texture would be appropriate, any grainy surface to add some contrasting effect to the overall appearance, as shown here. Any texture with dissimilarity that helps to draw a distinction to the main content will do; you can pick online from many available textures.

Creating a theme for your website with Photoshop

Modifying the new layer

Modifying the new layer

ntI’ve added a new layer at the very bottom of the layer pallet order and added the 1600px x 1600px wood texture. Now, what if that particular texture does not have the real divergent quality that I had hoped? Making a few adjustments with the Shadows and Highlights, I can achieve a darker richer contrasting body background; the settings are displayed here. Stepping through from the menu path: Image | Adjustments | Shadow/Highlight… you can adjust the dialog box settings.

Creating a theme for your website with Photoshop

Final layout

Final layout

ntI made just a few more minor adjustments with the food images at the top left to spread them out a little more and overlapped them into the body background; the final layout is seen here.

  • Developer
  • Account Information

    Share with Your Friends

    Creating a theme for your website with Photoshop

    Your email has been sent

Share: Creating a theme for your website with Photoshop
Image of Selena Frye
By Selena Frye
Selena Frye is a former Senior Editor for TechRepublic. Her background is in technical writing, editing, and research. I edit the Data Center, Linux and Open Source, Apple in the Enterprise, and IT Security blogs.
  • Account Information

    Contact Selena Frye

    Your message has been sent

  • |
  • See all of Selena's content

Daily Tech Insider

If you can only read one tech story a day, this is it.

TechRepublic TechRepublic
  • TechRepublic on Facebook
  • TechRepublic on X
  • TechRepublic on LinkedIn
  • TechRepublic on YouTube
  • TechRepublic on Pinterest
  • TechRepublic RSS
Services
  • About Us
  • Newsletters
  • RSS Feeds
  • Site Map
  • Site Help & Feedback
  • FAQ
  • Advertise
  • Do Not Sell My Information
  • Careers
Explore
  • Downloads
  • TechRepublic Forums
  • Meet the Team
  • TechRepublic Academy
  • TechRepublic Premium
  • Resource Library
  • Photos
  • Videos
  • Editorial Policy
  • Legal Terms
  • Privacy Policy
© 2025 TechnologyAdvice. All rights reserved.
CLOSE

Create a TechRepublic Account

Get the web's best business technology news, tutorials, reviews, trends, and analysis—in your inbox. Let's start with the basics.

Already registered? Sign In
Use Facebook
Use Linkedin

* - indicates required fields

CLOSE

Sign in to TechRepublic

Not a member? Create an account
Use Facebook
Use Linkedin

Lost your password? Request a new password

CLOSE

Reset Password

Please enter your email adress. You will receive an email message with instructions on how to reset your password.

Check your email for a password reset link. If you didn't receive an email don't forgot to check your spam folder, otherwise contact support.

Back to login
1 Finish Profile
2 Newsletter Preferences
CLOSE

Welcome. Tell us a little bit about you.

This will help us provide you with customized content.

No thanks, continue without
1 Finish Profile
2 Newsletter Preferences
CLOSE

Want to receive more TechRepublic news?

Newsletter Name
Subscribe
Daily Tech Insider
Daily Tech Insider AU
TechRepublic UK
TechRepublic News and Special Offers
TechRepublic News and Special Offers International
Executive Briefing
Innovation Insider
Project Management Insider
Microsoft Weekly
Cloud Insider
Data Insider
Developer Insider
TechRepublic Premium
Apple Weekly
Cybersecurity Insider
Google Weekly
Toggle All
No thanks, continue without

You're All Set

Thanks for signing up! Keep an eye out for a confirmation email from our team. To ensure any newsletters you subscribed to hit your inbox, make sure to add [email protected] to your contacts list.

Back to Home Page
×