The site we'll be creating is for a small company. This is why we have chosen a conservative layout and colors. Please feel free to create a more colorful and fancy looking website yourselves - this is only a rough sketch. Before we get our hands dirty with Photoshop, we need to know what we'll be doing. You can sketch the site on paper just to see the pieces we have and how to arrange them.
Create a Wireframe of the Layout
Very often, it is best if we start with a wireframe. In many cases a wireframe is all we need to show to the customer before we start the actual coding - it'll save you time as you won't have to create a Photoshop mockup.
The wireframe could be grayscale or full color. The more realistic the wireframe is, the better. The picture below shows the wireframe of our site.
Decide Which Colors to Use
After we know the pieces of our website, the next thing we must decide on is the colors we are going to use. Choosing good color combinations is not very difficult but if we want to make things easier, we could use a tool to pick matching colors for us. Let's use this color palette. It will generate ten shades of green (our base color) but we are not going to use all of them. Additionally, in order to make the design a bit brighter, we'll add two more colors - pale yellow and bright red.
|
|
Here are the colors we'll use:
- Site background - dark green - 9DB586
- Internal site background - light green - ECF1E7
- Gradient foreground/background - CED9C2
- Text - dark green - 142210
- Headings - red - e20000
- Testimonials and News & Events background - pale yellow - FFFFD5
Now, we are ready to go to Photoshop and start drawing.
Create a New .PSD File
The first step is to create a new .PSD file. Since widescreen monitors are popular, we should set the size of the site to 1680x1050 pixels (the proportions of a relatively popular widescreen resolution), though we certainly won't use all of the space. In addition to the size, you may want to set the background color to 9DB586 but since we'll apply a gradient later, this is not vital.
Show the Grid
The grid makes it much easier to precisely position the different elements - this is why you need to display it. When you do, you will see something similar to the screenshot below - i.e. an empty background and the gridlines.
Create Background Gradient
Use the Gradient tool to add gradient to the background. In addition to the background color (9DB586), you need another color to complete the gradient. Take a lighter shade of green (CED9C2) and it will look fine. The gradient goes from lighter at the top to darker at the bottom, but if you switch the places of the foreground and background colors, or the direction in which you apply it, the gradient will be different. Here is what you will hopefully see after you have applied the gradient:
Create Site Internal Background
Create a new layer (1000px wide, 850px high) and fill it with light green (ECF1E7). This is the main area where the content will be nested. We need to add gradient here as well, so take a darker shade of green (CED9C2), mix it with the background color and create the gradient. Now your screen should look like this:
Create the Logo
The first site component we need is the logo. If you have a logo that you can use, just paste it in. If you don't have a logo, creating it could take you, unfortunately, a lot of time. However, if you are happy with a quick and not-so-bad looking logo, use a logo creator. For instance, CoolText is a good logo creator and we have used it to create the logo for our example.
|
|
We used the settings shown in the screenshot above and the screenshot below shows what we got from this. The logo looks good and we can use it for this project.
Next, create a new layer and paste your logo in it. Use the gridlines to guide you as where to position the logo.
Create the Header
Create a new layer and paste the header picture. We have chosen to use a very simple image and you can of course use alternative images. For instance, pics of your products, or something related, are good ideas for a business site.
When you go back to the main view, this is what you should see:
Create the Menu
Create one more new layer for the menu and use the Type tool to enter the text for the menu items. If you are not a fan of larger font sizes, you can make the menu items smaller and align them left or right. However, since we don't want our visitors to have problems finding the menu, we will make the menu items large and visible.
If you look carefully, you will see that "Home" is the active link and that it is in a different color. For the other links, or headers, we'll use the same shade of red.
Create the Home Page Text Box
Now we move on to the main part of the page - the area where the home page text is located. Using some placeholder text is fine. Depending on the text you have, there might be graphs or pictures included in the area but for this example we will presume that it is only pure text.
The home page text is on a new level and we use the "Type tool" to create it. The gridlines will guide you as where to place the text box. We didn't use many effects - actually we only made the headings bold and set them in a larger font size.
Create the Testimonials Text Box
The steps to create the "Testimonials Text Box" are similar to the steps required to create the home page text box. First, create a new layer and use the guidelines to find the right place for the text box. However, before we add the text, we need to apply the pale yellow background. To do this, select a rectangular area and, from the menu, select Layer → New Fill Layer.
Now use the "Type tool" to add the placeholder text. For simplicity, we use the same fonts and sizes as in the home page text area but you are free to choose something else. However, don't choose something too fancy. Verdana or Arial are the safest choices for a font because this is text and if you choose something fancier, you never know what disastrous thing that will be displayed in the browser.
Create the News and Events Text Box
Follow the steps described in the previous section to create the News and Events box. The only difference (obviously) is that you need to put this yellow box underneath the other one.
Create the Footer
Finally, the last step is to create the footer. We won't put many things here - only copyright notice, links to the privacy policy and the terms of use.
When you close this layer and go to the main view, you will see the image we started with. This is all it takes to create a simple site layout in Photoshop. Sure, you can add more extras, such as rounded colors for the three text boxes, gradients for them or use subtle textures instead of gradients for the backgrounds but if you want to create a small site fast, the steps we described are enough.
Ok, so now you know how to create a great web design - perhaps you also need a complete hosting package to put your newly found knowledge to the test.
Commented by: Carlos, 27 January, 2010
Is this for real?
Commented by: Tim, 27 January, 2010
Wow. This can't be for real.
Commented by: df-fo, 28 January, 2010
lol
Commented by: SnakeJake, 28 January, 2010
Check the date...
No, it's not April 1st.
Commented by: TSE, 23 February, 2010
You just gave me a great idea. Thanks for the post, it's really helpful.
Commented by: ---, 3 June, 2010
Thanks for the tutorial.
Commented by: bilet, 3 June, 2010
Thank you for the post