Home > Designing a Website >Designing a Website in Photoshop

Design Steps

1. Designing a website in Photoshop
2. Slice up a Photoshop visual

Designing a Website in Photoshop

Start with An RGB Photoshop document no wider than 990 pixels

When starting on the graphic design of a website I usually create a new Photoshop document 990 pixels wide. This is because 990 pixels is almost the widest you can go on a webpage without a nasty horizontal scrollbar appearing in a Microsoft Windows browser within the constraints of a 1024 x 768 pixel display (the most popular screen resolution at the time of writing).

Anyone who uses an Apple Mac knows that the width of a browser window is much more fluid, but because Mac users are in the minority, the website designer must work with (primarily) PC users in mind - unless the audience is known to be Mac-based.

So my document generally starts at a size of 990 pixels x 900 pixels (figure 1).

Figure 1 - create a Photoshop file 990 x 900 pixels

One other important thing to keep in mind is that whilst we have a roomy 990 pixels of width to work with, we’re not so lucky with the height.

As you can see from the screenshots (figure 2), even if we expand the screen resolution to 1280 x 800 pixels, even though we get lots more width, the height available remains practically unchanged. And the more toolbars and features that are added at the top of the browser window, the less vertical website real estate we get.

Figure 2a - Windows XP running Internet Explorer 8 on a 1024 x 768 resolution

Figure 2b - Windows XP running Internet Explorer 8 on a 1280 x 800 resolution

Decide what’ll be seen on arrival - and what’ll be hidden below the fold

This means there’s a danger of key messages being inadvertently hidden ‘below the fold’ (which means you have to scroll down to see them). But even so, we don’t want to create a website that’s only 560 pixels high... we have to find a happy medium.

The least you should aim for is to get the key message of the website visible above the fold - this might just mean getting a headline and paragraph saying exactly what the site is going to do for the visitor. Too many sites make the mistake of being ambiguous on the home page, forcing a visitor to guess what the site’s about and how it might be of use. More often than not, the user will leave before bothering to dig deeper.

Include only what’s relevant

When working on a new site design, you can go wild - you’ll be able to integrate pretty much anything into the design (within reason), but just make sure you keep in mind that you’ll be chopping it up and using style sheets to put it all back together again. Don’t make this part of the job too complicated if you’re still learning.

As for this site, I wanted it to be simple, clean and uncomplicated so the user (you) could focus on the content (this).

I didn’t want anything to appear on the page which didn’t have a good reason for being there. Too many tutorial sites these days seem to exist primarily to serve up a cocktail of Google adverts and banner ads - which practically never get looked at, let alone clicked. In my experience, the most effective links are contextually relevant hyperlinks like the one leading to this eyetracker study by Jacob Neilsen which provides evidence of how people read a web page.

So let's get started on the basics

The following steps are really aimed at Adobe Photoshop novices, so all you Photoshop experts out there, please bear with us or skip to the next step.

Rather than write a tutorial explaining how to create every type of design possible, I’m going to focus on one design - the design created for using-dreamweaver.com. Once you’ve got the basics down you can vary, experiment and enhance to your heart’s content.

Create a document with guides

So to begin - create a new Photoshop document using the settings shown in figure 1. Add four guides to the document, 10 pixels in from each edge. The quickest way to do this is to select:

VIEW/NEW GUIDE…

…and then select:

Horizontal, Position 10 pixels

Repeat with Horizontal, Position 890 pixels

Repeat with Vertical, Position 10 pixels

Repeat with Vertical, Position 980 pixels

Give it a Background Color

The background color (or pattern) of a website is the area which will fill every corner of a browser window unused by the site itself - so it’s important not to make it too distracting or garish. I’m going for a dark gray to enhance the site itself. To do this, click on the foreground color picker square at the bottom of the tools palette and either choose your own color from the color picker, or enter the following value in the field at the bottom centre of the dialogue box by the # symbol: 666666. Click OK.

From the top menu, select:

EDIT/FILL…

…and under Contents, select Foreground Color. You should end up with a canvas that looks like figure 3. That’s the background taken care of.

Figure 3

Create the Website Framework

I’m a sucker for rounded corners. I think they give a website a nice organic feel in an environment where everything is hard-edged or horribly bevelled. But that’s just me. This time I went for a nice big 20 pixel rounded corner. To do this, take the following steps:

Select the Rounded Rectangle Tool from the Tools palette. In the Options palette, make sure that the ‘Shape Layers’ button rather than ‘Paths’ or ‘Pixels’ button is selected. This will ensure that a nice, editable filled path will be created rather than an empty path or pixelated shape. Once done, in the Options palette, in the field named ‘Radius’, enter 20 px. If you can’t see the Radius field, it’s probably because the Rounded Rectangle tool isn’t selected in the Tools palette. Before creating the shape, select a new foreground color in the Tools palette. I used #99cc33.

Ensuring that ‘Snap to Guides’ is selected under the VIEW menu click in the top left of the canvas where the guides cross each other and drag down to the bottom right guide-intersection - and then release. This will create a large rectangle with rounded corners (figure 4). This will be the background to the site.

Figure 4

Frame 2:
The next panel will be light green with a drop shadow

Now we’re going to create the next rounded box which will contain the bulk of the site (content and navigation). The header will sit on the background frame above this one. Create four new guides:

VIEW/NEW GUIDE…

…and then select:

Horizontal, Position 100 pixels

Horizontal, Position 850 pixels

Vertical, Position 30 pixels

Vertical, Position 960 pixels

Select the Rounded Rectangle Tool as before, change the foreground color to #ccff99 and drag-create a new rounded rectangle in the same way as before using the newly created guides as the boundary.

Make the Drop Shadow

In the Layers palette (with the light green rounded rectangle layer still selected) click on the ‘Add a Layer Style’ button at the bottom (labelled fx). Select Drop Shadow and enter the following values:

Because the Distance value is zero, it doesn’t matter what angle the light setting is set to - it’s as if the light was coming from directly overhead. This ensures that the shadow is even all the way around instead of being heavier on one side than the other.

Frame 3:
The final panel will be white

One final rounded rectangle to create - a white one - using three new guides as a boundary:

Horizontal, Position 140 pixels

Vertical, Position 40 pixels

Vertical, Position 950 pixels

This will result in a document that looks like figure 5. Now we move onto details like the header content and navigation. Don’t forget to keep your document regularly saved!

Figure 5 - the background panel layering is complete

Create a Header and Footer

For the header of this site I wanted to keep the design simple and informative. Since the main focus of the website is about how to build a website using Dreamweaver (apart from these preliminary tutorials), it seemed logical to make that very clear in the site header.

Too much emphasis can be put on ‘design for design’s sake’. The temptation to fill up empty space with abstract artwork is a strong one - but one that must be resisted in order to purify the message. So this website's header has a title and a ‘breadcrumb trail’ of links, which make it obvious what section the reader is in and enable a rapid backtrack to the main category or home page (figure 6).

Figure 6 - The header, footer and breadcrumbs in place

Adding text in Photoshop

To add text in Photoshop, just select the Text tool (Horizontal Type Tool) from the Tools palette, click somewhere on the canvas and start typing. A new layer will be created automatically for each block of text you create. You can either click once and type to create an unconstrained block of text, or you can click and drag to create a text box which’ll constrain the text within to the area you define.

Breadcrumbs

At the visual stage the ‘breadcrumbs’ (the links top right) are just a guide - when the time comes to chop up the visual into usable images for the website, these will be ignored and recreated in Dreamweaver later on.

Footer

Try to keep the footer clear and uncluttered with as much information as is required, and no more. Depending on the nature of the website, the footer tends to contain some of the following pieces of information.

My footer is extremely minimalist, but that's the way I wanted it for this site. Generally the footer is where the visitor would expect to find essential company details and contact information, terms and conditions, the company address and so on.

Primary Navigation

There are so many different types of navigation menus out there that it can be a little overwhelming when trying to decide what kind of system to use. Actually, it's not hard to make a decision - I just choose a menu system which a user is almost certainly already familiar with.

If there are few enough pages in the site to include them all in links across the top of the page (or top left below the header), then that’s a good thing to do. Web users generally look to the top of the site for the main navigation, and then sometimes to the left for local navigation for the section they’ve just come to. Again, this depends on the size and nature of the website, but it’s not good to make people think too much about how to get around.

For this site I’ve used tab-shaped buttons for the main category links and contextually relevant side sub-category navigation for all pages within a category.

Create Tab Buttons

The tab buttons in figure 7 are simply more rounded rectangles with a 10 pixel rounded corner.

Figure 7 - Round cornered navigation tabs

They’re layered behind the white background panel and therefore take on the appearance of ‘tabs’. Create them in the same way as the other rounded rectangles and snap them to guides starting at:

Horizontal, Position 110 pixels

Vertical, Position 230 pixels

I’m going to keep the tabs in the same dark green of the background panel, except for the active tab. If the user finds themselves on any page in the Designing category, the tab will remain white. Any additional local navigation or explanatory notes will appear in the panel on the left.

At this stage I’m not going to bother creating all the tabs across the top of the visual because I’ll be recreating them in HTML and CSS, and I’ll only need to do this once and then duplicate it. However, if you’re presenting a visual to a client, you’ll probably want it to be as finished as possible in appearance, so go ahead and put in all the tabs you need.

Secondary Navigation

The panel containing the secondary navigation (top left) is yet another rounded rectangle colored white with a 10 pixel corner, positioned at:

Horizontal, Position 160 pixels

Vertical, Position 60 pixels

I added a layer effect to this panel to give it a 1 pixel green stroke. To do this, select the layer containing the panel. Click the ‘Add a Layer Style’ button at the bottom (labelled fx). Select stroke and enter the following values:

Website Type Faces

The font I’ve chosen for the text on the site is Georgia. I chose this for three main reasons:

1. I like it. Whilst I like the clean look of a sans serif font (such as the one used in the header) I feel that the simplicity of the site’s framework will really set off a nice, interesting serif font like Georgia.
   
2. It’s a font designed for the web by Microsoft, so it works well in large and small sizes.
3. Most computers have Georgia installed. This is the crucial deciding factor which drastically limits the number of fonts generally used in website design. There are plenty of workarounds - such as Flash text, images as text and PHP text replacement techniques - but for simplicity, these alternatives tend to be in the minority online. In brief, if a computer doesn’t have the font used by a website installed, the browser will display an alternative - sometimes with undesirable results.

So Georgia it is. I added names for the tabs by selecting the Text tool, clicking on or near one of the tabs and typing in the category name. Then use the Move Tool to position it. Again, my plan is to recreate this text in CSS - good for the search engines and more efficient for the page loading time.

Choose a text style

An often overlooked stage in visual design is the styling of the text. So much can be achieved with typography alone - it’s a beautiful medium - but so many sites put more emphasis on funky (and largely irrelevant)  imagery than on text - the supposed focus of the website.

Although the text styling at this initial design stage is subject to change (as is everything!), it helps to get a general overview of how different fonts, sizes and colors look. To do this, it’s a simple case of drag-creating a text box in the Photoshop document (using the Horizontal Type Tool) and filling it with placeholder text. I generally experiment with styles for two headings (H1 and H2), Paragraph Text (P), Bullet Points and Links (figure 8).

In the design (and this may have changed during the build process) I decided to break the link colour convention in the links down the left hand side. Although once visited they turn a light shade of purple, the actual un-clicked links are gray rather than blue. This is because they’re within a supporting panel and I don’t want them to become a distraction for the reader.

Create artwork for the Info Panels

Also in figure 8 you’ll see some new panels down the right hand side. These are supporting elements which will ultimately contain extra information relevant to the text they sit next to. They’re very easy to create - the process is very similar to the one used in the creation of the mega-menu panel.

Figure 8 - Styling text and panels

For each info panel, create a rounded rectangle and color it appropriately. Also give it an inside stroke*. Duplicate the shape layer in the Layers palette and color it white, keeping the same inside stroke colour.

Now select the front white panel by clicking on its Vector mask thumbnail - if done correctly, you should see its path show itself in black. Select the Direct Selection Tool (white arrow). We’re going to drag around the top of the white panel, but once again we need to start the drag by clicking on the dark gray background, and not on one of the other existing vector shapes.

Click on the gray background and drag a marquee around the top of the panel, ensuring that all anchor points making up the top of the shape layer are selected. Then press SHIFT+<DOWN ARROW>. This’ll nudge the whole of the top of the panel down by 10 pixels. Use the UP and DOWN arrows without the SHIFT key to nudge the anchor points until you’re happy.

Finally, use the Text Tool to click at the top of the info panel to add a title. You may decide either to keep this as an image or style it in CSS later - I used text rather than an image. For these headings I added interest by using a combination of lower case italic and upper case roman and removed spaces between words (see the footNOTE panel on the right) - a really simple way of making a heading look a little funkier.

Good to Go

The methods and styles I’ve used to create this design are by no means set in stone - go ahead and experiment! Once you’ve played around with the design to your satisfaction, you can start thinking about slicing the design up into background images and tiles ready to bring into Dreamweaver - and that’s the subject of the next article.

Designing a Website in Photoshop - End of Article

Go to previous article | Go to Home Page | Go to next article

Feedback required!

Please send any questions or feedback to: feedback@using-dreamweaver.com or leave it on our Facebook page.