How to Design a Website in Photoshop - Part 2
This is the second part of article How to Design a Website in Photoshop. We will complete all details of our design before proceeding with HTML and CSS.
Now let's make a logo and essential main navigation. There are several ways you could do your logo. Sometimes it is going to be an image. In this case you can make it really fancy since you can use special fonts and special effects. But sometimes you will want your logo to appear in h1 title tag, usually for SEO purposes. Then you will need to use fonts that any browser will display correctly, for example Arial is a good choice. In this case you can control only size, color, font-weight and font-style of your logo letters. Alternatively you could also create a nice logo symbol and then write in Arial your website name next to it. In our case, we are not going to create logo image, but we will use nice colors and font size to make it look good.
Take horizontal type tool (T) , set the font size to something like 44pt, make sure that you have Arial chosen, set the font color to #f7b9c5, which is a nice pink color and type in first word of your website's name. Just for the sake of example let it be "Clean", then without space after the word clean set color to #adbaea, which is the same blue like in our featured area and type the second word of your website's name. For the sake of example, let it be "Design".
The title CleanDesign is in its own separate layer that was created automatically when you chose type tool and clicked on the working area. Now let's create a slogan right under it. Create a new layer, call it slogan, choose light grey color BFBFBF, set font size to 14pt, make it italic by pressing CTRL+SHIFT+I and type something fancy. For the sake of example we've typed "Modern and Minimalistic". Take move tool (V). Fortunately it is never hidden behind anything, always first in the tool panel and looks like arrow. It allows you to move the elements around the page. Make sure that Auto-select layer (on the top bar) is enabled, then click on slogan area and locate it under the website's name the way you like it.
Create a new layer again, call it Navigation and click somewhere in the same line as slogan but closer to the right edge. Write in capital letters something like HOME, few spaces, then LINK1, few spaces, then LINK2, few spaces and so on until LINK4 or whatever you prefer. While your title and slogan should be aligned to the left, align your navigation to the right. You must have something like this:
.
Okay, now we add some featured text and image to our blue featured area. Again just for the sake of example we will put an image of an elephant. It can be something else, but because we need to put something for demonstrating what we are doing and because we think that elephants are cool, we've chosen this elephant. You can download this PSD file here. We have included two additional images that you may want to use later. It is a PSD document which is in a zipped folder. So you will have to unzip it before opening. Once you've opened your elephant image press CTRL+A to choose the whole image then CTRL+C to copy it then go back to your website and paste it there by clicking CTRL+V. Paste it in blue featured background, and locate it using the move tool (V) aligned to the right.
As for featured text, we will use dummy text or Lorem Ipsum text which you can copy paste from sites like this one http://www.lipsum.com/feed/html. The headline font size is 30pt, color #666, or grey. Then on separate layer we put more dummy text using font-size 14pt and the same color as headline #666. Don't forget to name these layers accordingly, like featured title, featured text and featured image.
Choose a few words in your featured text and define for it another color, for example #c8fff4. This will represent link color specific to featured area only. This color stands out on blue, but won't look good on beige background, so we will use another link color there.
You might start worrying that your logo, navigation, text and image are too close to the edges of your website. Don't worry, when your website will be live you will have enough space around there, so please keep it aligned right to the edges. You could also replicate the real conditions by defining more pixels than 1000px as we did, but sometimes it could be confusing. So there is really no necessity to do this. At least not with this design.
So you should have something like this:
Now we are going to add some text to our columns. But first let's make sure that our columns are even in width. So we go to View, then click New Guide, then choose vertical guide and set its position 333px. Repeat that once again but this time set the position to 666px. You will have two guides separating your page in three parts.
Add some dummy text to the column area (that's where we have pattern background) using font size 24pt and color ADBAEA for headline and 14pt and B0ADAD for text. Again choose a few words and change its color to E4A2AF for link color. Then write in the same pink color Read more… aligned to the right. Repeat for other two columns.
If the space between the lines is not right you can adjust it by going to Window, then Character, then you will have to choose your custom line height in the window that will appear. In all cases it is not very important right now, because we will have full control over it when we will code this to HTML and CSS.
Finally add two images to the bottom area where we have plain beige background. The prefect size for images is 295x220px but it can be something else as long as it fits the area without spoiling overall look it's fine. Below image layers create a new layer, call it Image BG. Take rectangular marquee tool (M), create a rectangle slightly bigger than both images and fill it with something similar to the colors we used, be that pink or blue. This will serve as a frame for your images.
You have some space left in the right bottom corner, add some text there, like contact details.
In the footer area write something like Privacy Policy and Disclaimer using font size 12pt and color DDC77F. Since this is our design and we are going to offer it as a free template we add also Designed by Free Web Patterns aligned to the right.
It looks like our navigation needs a little more, so what we do is we add a special background for an active link, which is HOME in our case. So with the help of rectangular marquee tool we draw a narrow rectangle behind the word HOME starting from the top of the page and until the blue featured area and fill it with the same color that we've used for footer which is FDEBAE.
So what you finally have is this:
In our next tutorial we will show you how exactly you can transfer this image into live working website
.