Today we’ll be going through the process of designing a website for a fictitious marketing company, step-by-step. The design uses a blue color scheme and is intended to put the emphasis on services offered and what the company can do for its clients. Our friends at SnobbySlice are in the process of coding this design into a template that will be distributed for free in the near future.
What We Will Be Designing:
Here is a look at the end result (click the image to see in full size)
To get started, create a new file (File – New) that is 1400 pixels wide and 1900 pixels high.
Step 1: The Header
Set the foreground color to #1f3d70 and add a new layer (Layer – New). Use the rectangular marquee tool to select the top 50 pixels of the canvas all the way across the width of the canvas.
Use the paint bucket tool to fill the selected area with the foreground color.
Now set the background color to #1a3563. Double click on the layer in the layers paletter to bring up the layer styles options and select “gradient overlay”.
Choose the gradient that goes from the foreground color to the background color, and check the “reverse” box so that the lighter shade of blue is at the top. This gives the area a subtle linear gradient that fades from one shade of blue to another.
Next, use the rectangular marquee tool again to select the next 30 pixles below the blue bar that we just created.
Add a new layer and set the foreground color to #132950, a slightly darker blue. Use the paint bucket tool to fill the selection.
Set the background color to #0e2143 and double click on the layer in the layers palette, and then select “gradient overlay”. Again, choose the gradient that fades from the foreground color to the background color and check the “reverse” box.
So now he have two horizontal bars that each have subtle linear gradients.
Next, we’ll add some borders to this area. Add a new layer and set the foreground color to #0d1e3b. Use the pencil tool with a 1-pixel square brush tip to give a one pixel border at the bottom of the first horizontal bar. Then change the foreground color to #355a9c and add another 1-pixel border directly below the other one.
Here is a look blown up to 600%.
Then add a 1-pixel border to the bottom of the second horizontal bar using the same color. Next, change the foreground color to #071328 and add a final 1-pixel border below the previous one.
This is another look at 600%.
And here is how it looks at 100%
Since our layout will be 960 pixels wide and centered, the edges of the layout will be at 220 pixels and 1180 pixels. Set a vertical guide at 220 pixels to help determine where we should place the logo text. The font we’re using for the logo/title is New Cicle, which can be downloaded at Font Squirrel. We’re using 30 pt New Cicle gordita in white, #ffffff, and it should be lined up just to the right of the vertical guide.
Double click the text layer in the layers palette and select “drop shadow”. Apply a drop shadow with a distance of 2 pixels and a size of 1 pixel.
Here is how it will look with the slight drop shadow.
Now we’ll add the navigation menu to the right of the logo. Set a vertical guide (View – New Guide) at 1180 pixels to determine whether the right edge of the menu should be. We’re using 14 pt Arial in #ffffff for the text.
Below the navigation we’ll add a few social networking icons. The icons we’re using are from the set of 81 Pixel Perfect Social Media Icons released at Psdtuts. Download the icon set from Psdtuts and open the Twitter, Facebook, and LinkedIn icons. Re-size the icons to a height of 22 pixels and paste them in below the navigation menu.
To the left of the icons we’ll add the text “Connect with us” in 14 pt Georgia italic in #7898d0.
That completes our header. Here is a look at what we have so far (click to see it in full-size).
Step 2: The Featured Area
Below the header we’ll be designing an area to showcase the services that are provided by our fictitious marketing company. This area will showcase one service, and there will be tabs below that will allow the user to choose to view from four different services that are offered. This is commonly used with jQuery sliders.
We’ll start by adding a new layer and setting the foreground color to #dce3dd and the background color to #999a9c. We’ll be using these two shades of gray to create a gradient background.
Set a horizontal guide (View – New Guide) at 425 pixels to set the bottom of the gradient area. Use the rectangular marquee tool to select the area.
Select the gradient tool and choose the gradient that fades from foreground to background, and make sure the radial gradient is selected.
We want our gradient to have the lighter shade in the top center of the selected area, so with the gradient tool active, click at the middle of the very top of the canvas, drag it straight down (hold shift to keep it straight) and release the mouse button at the bottom of the selected area.
After the gradient is applied we’ll add a slight texture with some noise. Go to Filter – Noise – Add Noise and set it to 2% uniform.
Here is what we have so far (click the image to see it in full size)
Next, we’ll use a shopping cart icon that IconShock designed as part of an E-Commerce icon set released here at DesignM.ag. Download the icons and open the empty shopping cart. Resize it to a height of 256 pixels. Copy the re-sized icon and paste it below the logo.
Next, we’ll add some text to the right of the icon. Create a new text box and use 20 pt Georgia in #850709 for the header, and 14 pt Arial in #000000 for the rest of the text.
Next, we’ll add call to action buttons below the text. Set the foreground color to #1d3868 and the background color to #11264b and select the rounded rectangle tool, with a radius of 10 pixels.
Use the rounded rectangle tool to create a shape for a button.
Double click on the shape layer in the layers palette and select “gradient overlay”. Again, we want to use the gradient that fades from the foreground to the background color so that the lighter shade of blue is at the top. Then select “stroke” and add a 1 pixel stroke inside in #11264b.
After adding some text in 14 pt Arial (white) with a drop shadow of 2 pixles in size and distance, the button should like like this.
Now, select the shape layer from the button and duplicate the layer (Layer – Duplicate Layer) to create a second button. Use the free transform (Edit – Free Transform) to move the button to the right, and then add some text on top of it.
Here is what we have at this point (click the image to see it in full size).
Now we’ll be moving on to the tabs below the slider area that will allow visitors to choose which service they want to see in the featured area.
Set a horizontal guide at 770 pixels to control the bottom of the tabbed area. Add a new layer, set the foreground color to #1d3868 and use the rectangular marquee tool to select the area.
Use the paint bucket tool to fill the selected area.
We want to add borders to the top and bottom of this horizontal band, we also vertically to separate each item. We’re going to have 4 items with 10 pixels of borders (2 pixels on each side, and 2 pixels between each item). That leaves 950 pixels divided by 4, which equals 237.5 pixels. So we’ll make the two outside tabs 238 pixels wide and the two inside tabs 237 pixels wide.
To start with, we’ll use the pencil tool to add two 1-pixel borders to the top of the blue horizontal band. The first border is #071328 and the second border is #5584d7. Here it is blown up to 600%.
We’ll then use the same colors to add two 1-pixel borders to the bottom of the horizontal band.
For the vertical borders between the tabs we’ll use the colors #355a9c and #11264b.
Here is how it looks at 100% (click to view in full size).
In this area we’ll use four more icons from IconShock. The Twitter icon is from the Blitter icon set released by Hongkiat. The shopping basket icon is from the E-Commerce icon set released by WebResourcesDepot. The speech bubble and magnifying glass icons are both from the Web User Interface icon set from Six Revisions.
Once you have downloaded and opened the icons, re-size each of them to 120 pixels by 120 pixels. Then copy and paste them in to the design, leaving 50 pixels of space from the top of the blue horizontal band to the top of the icon.
Here is a look at what we have so far (click the image to see it in full size).
Next, create a text box below each icon to add some text. We’ll be using 14 pt Georgia #fb5eea for the headings and 14 pt Arial in white for the rest of the text.
The last thing we want to do here is to give the active tab a different background color. The featured area is showing the content for the E-Commerce Optimization services, so we want to make that visible below by giving this tab a darker background. Create a new layer behind the icon and the text used on that tab and set the foreground color to #11264b. Use the rectangular marquee tool to select the area and the paint bucket tool to fill it.
That completes this step. Here is a look at the design at its current stage (click the image to see it in full size).
Step 3: The Content Area
We’ll now add some text for customer testimonials. The text “Testimonials” is aligned with the left edge of the featured area and the logo, and it is using 18 pt Georgia in #1d3868. The text for the testimonials is 14 pt Georgia italic in #000000, and the persons name, title, and company are in 14 pt Arial #585757. We’ve left 50 pixels of white space between the top of the testimonials and the bottom of the featured area.
It should look like this (click to see in full size).
Next, we’ll be using the pencil tool to add a 1-pixel border in #e6e3db below the first and second testimonial, and a wider border that goes to the left edge of the layout below the third testimonial. (Click the image to see it in full size)
Next, we’ll add two columns of text (should line up with the first two tabs from the featured area). The headers are using 18 pt Georgia #1d3868, and the other text is 14 pt Arial #000000, except the links which are in the blue color.
Now we want to create a “contact us” button using the same technique that we used to create buttons earlier. Set the foreground color to #1d3868 and the background color to #11264b and select the rounded rectangle tool, with a radius of 10 pixels. Create the shape for the button, add the gradient overlay from the layers palette and give it a 1 pixel inside stroke of #11264b. The add text on top of it in 14 pt Arial #ffffff with a drop shadow of 2 pixels in size and distance.
To the right of the client list we’ll add text to encourage newsletter subscriptions.
Add text for name and email in 14 pt Arial #000000 and use the pencil tool to draw 1-pixel borders for the form fields in #e6e3db.
Create another button using the same technique and lay text over top of it in 14 pt Arial #ffffff.
That completes the content area. Here is a look at our almost-finished design (click to see in full size).
Step 4: The Footer
The last part of our design is the footer. Use the rectangular marquee tool to select the area for the footer (leave 50 pixels of white space below the content area). Add a new layer and set the foreground color to #1f3b6e. Use the paint bucket tool to fill the selection.
Finally, add some simple text links to the footer in 14 pt Arial #ffffff and crop the canvas to get rid of any extra space that remains below the footer.
The Final Result:
Here is a look at what we just designed (click the image to see it in full size)
If you’d like to work with the Photoshop file that was used to create this tutorial, you can download it here.
For more Photoshop layout tutorials please see: