Trendy Website Design in Photoshop Part 1: Design in Photoshop

Everyone wants their web design to stand out. They want it to be an expression of their creative abilities, a place where they can show off ... even just a little bit. Certain elements continue to crop up in some of the more stunning, trendy website designs and these are the elements you'll want to take a stab at incorporating in your layouts.

Glossy buttons, well-placed gradients, and vivid images that tie into an overall color scheme are what you're looking for. Here's one method to help you create a great design specific to your site's subject using Photoshop.

You'll want to look here for the tutorials on slicing your image in ImageReady and defining the actual site using Dreamweaver. This guide focuses solely on the creation of the art that will define your design.

This is not a beginner's tutorial. I can't go into minute detail, so you'll want to have a working knowledge of Photoshop before you begin.

How to Design a Website in Photoshop

Every website design I tackle starts as one basic idea: it is art. If you approach your design from the start as being something more than a place to shove a bunch of words and images, you'll end up with a website you can truly be proud of.

1. Open a New Canvas: Every artist begins with a canvas. In our case, we're digital artists working with the canvas within Photoshop.

Sizing your canvas can be an issue all on its own. In particular, defining the width of your website works into a nifty little problem with a whole arena of debate surrounding it. You can read more about your options for defining the width of your website here, but in general we'll say that the average website should be no more than 980 pixels wide.

So. In Photoshop, create a new canvas (File, New) that is in RGB mode with a white background, sized 900 pixels wide x 700 pixels high.

2. Find Your Focus: Whether your focus is a photograph, a logo, or an illustration, every website design needs something to hang everything else on. The focus can be large or small, but it's there ... somewhere.

Whatever kind of graphic your focus is, it will contain the colors needed to complete the rest of your design. It should also set the mood or illustrate the subject behind why your website exists in the first place. Trendy-styled websites usually go for setting a mood, but it's great when you can both set a mood and illustrate your subject-matter all in one graphic.

So, for this tutorial, I'm going to focus on a natural beauty. Why? Because it sounds like fun. You'll focus on whatever your website is actually about. All that you are looking to do here is to find or create a graphic that is self-contained (no cut-off hands, faces, etc.) and contains some vivid colors for you to work with. I'll be using the graphic found in Illustration 01.

Note that the original graphic I'll be using is actually black and white. If you're having a similar problem, there's an easy fix: Click "Layer", choose "Layer Style", and pick "Color Overlay". You can mess with the color, the blend mode, and the opacity - and immediately have a brightly colored graphic.

3. Block Your Layout: This is one step where Photoshop's native tools tend to come in very handy. You'll want to make sure that you can view both rulers and guides, and that your selections are set to "snap". Each of these elements can be found by clicking "View" in your toolbar and ticking the option you're looking for.

Basically, what you're doing here is defining where things will be placed within your design. Don't worry about being all pretty yet - we'll get there. Right now, look to make all the sections of your page visual.

To do this, set your foreground color to something complimentary to your focus graphic. Then, start drawing boxes and rectangles to indicate where elements of the page will be placed and drop your focus graphic in approximately where you will want it to be. Try to keep everything in-line so that it's easier to work with as we continue on in the process. See Illustration 02 for the blocked layout I've made.

4. Indicate Text: Now it's time to go through your blocks and indicate what kind of text will be placed where. It doesn't have to be detailed, just some sort of marking for later reference. The only text you'll want to be perfect is your website title text. See Illustration 03.

5. Make it Pretty: If you've followed the steps in order, it shouldn't take the average Photoshop user more than an hour to complete the previous steps. Usually, it will only take a few minutes.

This is the part that takes some time. You're now in charge of making all those little elements "beautiful". So how did I wind up with the elements showing in my final design (Illustration 04)?

First, I reflected the title text. If you don't know how to do this effect, check out this tutorial. Then, I added a 3-pixel white stroke to my graphic so it stands out from the background (just click Layer, choose Layer Style, and pick Stroke).

Next, I added a Gradient Overlay to the title background (set your foreground and background colors, click Layer, choose Layer Style, and pick Gradient Overlay).

Finally, I went for the real "trendy" piece - a gel tab navigation. Essentially, the process I used is similar to this one, if you need some help creating the look. Go with that tutorial, and then adjust the fine details like shadow and highlight to your liking.

When you've got the layout done, you'll need to save it in JPG format. Use the "Save for Web" option so that you get the file size compressed a bit, which will help with download speeds later on.