Backgrounds in web design: Creating a theme

By Ryan Boudreaux

Takeaway: Ryan Boudreaux shows you how to create a unified website theme by fitting backgrounds, illustrations, images, graphics, and textual content together in a design. In this post, he puts together an example for a restaurant website using Photoshop tools.

Fitting backgrounds, illustrations, images, graphics, and textual content are important for total web design look-and-feel, and visual appeal. Using backgrounds for body and content then blending them in with the real meaning and message of the website, and utilizing graphics design to its potential can take your site from ho-hum to amazing.

Note: The PSD file is available for download. You can also view the companion gallery, "Creating a theme for your website with Photoshop."

Take a peek back at the evolution of websites and their design, and you'll see that early examples included only static content with basic color backgrounds, if any background color other than plain white. Compared to the dynamic content of websites today, which use mostly stylized backgrounds with graphics, textures, gradients, illustrations, charts, and tables, and you'll see a stark difference.

So many design choices

There are a host of example sites and best practices out there to give you plenty of options with body and content backgrounds. You can choose to merge both body and content backgrounds; add headers and footers or flowing illustration wrappers; combine texture with illustration, fixed images, repeated tiles; or what about fades and borders? There are many options and plenty of choices to make when applying backgrounds to web design.

Create a sample background theme

In the example, I will create an elegant yet straightforward layout using Photoshop.

Vendor HotSpot

The Future of Mobile Printing

Print from a Smartphone, from a Tablet, from anywhere!

Learn More »

I will be using the image shown in Figure A of old paper; it is available in png file format from Playingwithbrushes at Flickr. The old paper image will end up being our main content division, and I will use this as the source for snippets to create menu buttons. But before that, I am going to make a few modifications to the image file in Photoshop.

Figure A

I 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 then click OK, and the Hue/Saturation dialog box opens and the settings are modified as displayed in Figure B:

Figure B

Be 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.

Next, 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: 120°, Distance: 5px, Spread: 2%, and Size: 5px, as shown in Figure C.

Figure C

Nothing too ornamental, just fine details that produce better results. The resulting image is shown in Figure D.

Figure D

Next, 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 in Figure E.

Figure E

Then we will make a new Layer via Copy (Ctrl+J), creating a new layer of the selected piece. I will rename the new layer "Button", as shown in Figure F.

Figure F

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

Figure G

Now, move the button layer below the background layer so that it is positioned behind as displayed in Figure H.

Figure H

Continue 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 did with the background layer previously. I have added five all together, and they are displayed in Figure I.

Figure I

Now 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. The settings for each of the button layers are listed in Table 1 below.

These are the adjusted buttons displayed in Figure J. The button layers are now appearing more like a layered slate texture behind the main background.

Figure J

Next, I am going to change the colors of each button individually to further distinguish them behind the background. But, before I do that 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 in Figure K so that color replacements for the buttons will be visible.

Figure K

With 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 as shown in Figure L, highlighting the settings for Button 2.

Figure L

I continue with all the other buttons and the results are displayed in Figure M.

Figure M

Now that the button colors are individually replaced, we can add text layers for each. (They will be displayed in the PSD file as an 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 "Home" on the first button as illustrated in Figure N.

Figure N

This is an easy task and should not take much effort to complete. I 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, as seen in Figure O.

Figure O

But wait, we are not finished; I 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 in Figure P. Any texture with dissimilarity that helps to draw a distinction to the main content will do, you can pick online from many available textures.

Figure P

I'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 in Figure Q. Stepping through from the menu path: Image | Adjustments | Shadow/Highlight… you can adjust the dialog box settings.

Figure Q

I made just a few more minor adjustments with the food images at the top left to spread them out a little more and overlapping them into the body background; the final layout is seen in Figure R.

Figure R

Upcoming

This is part one of a four-part series that will also include, going from the PSD file to HTML, adding navigation using CSS, and finishing up with formatting the text using CSS and html. In part two of the Backgrounds in web design series, I'll step into the phase of transitioning this PSD file into coding with CSS and HTML.

Seven steps to building a fulfilling executive career

By William Ellermeyer

Takeaway: A noted executive career consultant offers advice for executives who are in the market for a new job.

Today, we have a quest post from William Ellermeyer, one of the most recognized Executive Career Transition Consultants in Southern California, having pioneered the corporate-sponsored career transition business in the early 1980s.

Here are Bill's seven secrets to embracing change and building a fulfilling career:

1. Relationships rule.

Today's most powerful people are typically the best connected. Relationship building is essential. Focus on quality, not quantity. Meeting 100 people is less useful than truly connecting with 10. The key to successful networking is to bring something to the table. Networking is more of a "give" than a "get," and you must be willing to help people with no thought of getting something in return. Think of something you can give to each person you meet, whether it's an idea, an event, a book title, an article, a contact or simply a friendly smile. Remember to expect nothing in return. If you do this with everyone you meet, you'll greatly increase your likeability and visibility in the marketplace. Those people will be more inclined to hire you, refer you and help you in any way they can-and they'll be happy to do it.

2. Know your brand.

Create a core message that is short, focused and honest. It should include your skill sets without sounding like a sales pitch. It must make your objectives clear in an interesting, conversational style-so memorize the content, but not the precise wording. Let the message become your "unique selling proposition," which you will use in networking as well as in actual interviews. Your brand is a reflection of what people know and expect from a relationship with you. The crucial element is that your core message be brief and compelling enough to grab attention in a networking situation.

3. Give your resume a millennial makeover.

Your clean, clear, focused resume must showcase your experience and accomplishments in no more than two pages. There are times you'll still rely on the classic paper resume, but more often than not you'll need to adapt yours to be compatible with electronic communication tools, including social media and websites. A blog with a couple quotes about you from influential people in your industry can pack a stronger punch than even a well-crafted resume. Companies and executive search firms are increasingly turning to profiles placed on LinkedIn and other business-based social media sites. LinkedIn wears the crown in the business world right now when it comes to social media.

4. Be a business.

Position yourself as a resource, and approach the market as a business consultant, not as a "needy" job seeker. Job seekers tend to put companies on the defensive unless it's a situation where they have found you to fill a need. It is much easier to stride through the corporate door as a resource than as an out-of-work executive. Remember that in this world of short-term work, you will move back and forth from employee to consultant to employee, perhaps peppered with stints as an entrepreneur or a future in "portfolio work," using your core strengths and experiences over multiple income streams. If you're in a traditional job, always be prepared with a back-up, like teaching, that you are equipped to jump into, should your current position no longer be available. Approaching your work as a business can put you in the driver's seat.

5. Assemble a Board of Advisors.

In his best-selling book, Keith Ferrazzi advises that you put together your own permanent "job search board." Start with an individual who wants to join you for weekly or bimonthly breakfast meetings. Once you're comfortable and have established the routine, you should each invite another person to join. Down the line, the four of you can invite more people until the group maxes out at 8 to 10 members, for the best results. The more diverse the group is, the more benefits it can provide. Continue to attend the meetings when you have a traditional job; networking is a lifelong activity that will only be there when you need it if you cultivate the relationships over time.

6. Get organized.

Keep records of all your contacts, including how and when you met them and a word or two about their strengths. Store the information by category in a database program like Outlook or a website like LinkedIn. Organize your schedule to include meetings, events, reading and research, exercise, meals, food and fun. Keep manila files for important projects, special people, events, saved content, reading material and marketing. Instead of hoarding e-mail, get in the habit of printing, sorting and deleting them. Put the appropriate items in "action" and "later review" files. Use e-mail to continually connect with your network and save new contacts. When you're in transition, you should be sending out a minimum of 8 to 10 update e-mails each weekday.

7. Shape up, mentally and physically.

It's never been so important to remain at the top of your game, both mentally and physically. Our fast-paced, "always connected" business environment demands it. Exercise at least 4 or 5 times a week. Eat healthy, low-fat and low-carb meals focused on protein. Meditate daily, even just for 15 minutes of "mind rest" every morning before you start the day. Focus exclusively on the positive, and you'll continue to think more positively all day long.

Just remember that opportunity may take a different form than it has in the past. Be prepared to identify and even create the opportunities you desire. Change is the only constant. Even in tough times, people are promoted, moving, retiring… Opportunity abounds, even in the depths of a downturn in the economy. Use these seven secrets to make sure you're ready when it does.