Skip to content

TechRepublic

  • Top Products Lists
  • AI
  • Developer
  • Payroll
  • Security
  • Project Management
  • TechRepublic Academy
  • Innovation
  • Cheat Sheets
  • Big Data
  • Tech Jobs
  • TechRepublic Premium
  • Top Products Lists
  • AI
  • Developer
  • Payroll
  • Security
  • Project Management
  • TechRepublic Academy
  • Innovation
  • Cheat Sheets
  • Big Data
  • Tech Jobs
  • See All Topics
  • Sponsored
  • Newsletters
  • Forums
  • Resource Library
TechRepublic Premium
Join / Sign In
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

TechRepublic Premium

  • TechRepublic Premium

    GDPR Data Breach Notification Letter

    In the current business environment, it is almost inevitable that an organization will experience a security breach that exposes collected personal data to unauthorized access. Under the provisions of the General Data Protection Regulation, regardless of the severity of the security breach, organizations must inform their EU customers and stakeholders of the incident in a ...

    Published:  October 2, 2023, 4:00 PM EDT Modified:  October 3, 2023, 9:00 AM EDT Read More See more TechRepublic Premium articles
  • TechRepublic Premium

    Hiring Kit: Technical Recruiter

    Finding and recruiting competent talent for a business enterprise is an essential part of HR management. Overall success in a competitive business world is often a product of the quality of people hired to fulfill specific job roles. This need for quality people can be particularly intense for HR professionals filling technical positions. This hiring ...

    Published:  October 2, 2023, 4:00 PM EDT Modified:  October 3, 2023, 9:00 AM EDT Read More See more TechRepublic Premium articles
  • TechRepublic Premium

    Security Awareness and Training Policy

    A security policy is only as valuable as the knowledge and efforts of those who adhere to it, whether IT staff or regular users. Understanding the importance of computer and network security, and building accountability for these concepts, is critical to achieving organizational goals. The purpose of this policy from TechRepublic Premium is to describe ...

    Downloads
    Published:  October 2, 2023, 4:00 PM EDT Modified:  October 3, 2023, 10:00 AM EDT Read More See more TechRepublic Premium articles
  • TechRepublic Premium

    Anti-Discrimination Policy

    Despite heightened efforts to address workplace diversity, equity and inclusion, many workers are still experiencing discrimination at work. The purpose of this policy from TechRepublic Premium is to provide guidelines for anti-discrimination within the company. From the policy: RELEVANT TRAINING The company acknowledges that discrimination can occur unconsciously, since everyone has prejudices that can be ...

    Downloads
    Published:  October 2, 2023, 4:00 PM EDT Modified:  October 3, 2023, 8:42 AM EDT Read More See more TechRepublic Premium articles

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
  • TechRepublic
  • TechRepublic on Twitter
  • TechRepublic on Facebook
  • TechRepublic on LinkedIn
  • TechRepublic on Flipboard
© 2023 TechnologyAdvice. All rights reserved.
  • Privacy Policy
  • Terms of Use
  • Property of TechnologyAdvice