Design A Clean And Fresh Company Website In Photoshop

Sunday, 13 September 2009 18:06

I often think at the actual economic crisis, I am a man in a constant precariousness and I look for some good solutions to improve my daily connection with the world. Well, I have a only solution: create things, make unique stuff. I apologize. I don’t know the secrets to save the world (I’m not Batman!), but I can make good stuff in Web Design, so with the today post I will explain how to create a clean and almost serious (hard thing for me) web design for a company.

Starting the Work

First of all it could be useful to take a look at the final result (click here to see the full-scale preview). If you think this is a passable work, continue the reading for learning how to realize the layout using Photoshop.

Final Result – makingSeo

Step 1 – Set up the document

Cup of coffee ready. Open a new document in Photoshop 1200×1520 px, resolution of 72 pixels/inchs, and a RGB Color Mode of 8 bit.

Activate the rules (Ctrl+R). Setup two guides as shown in the following image to limit the the wide of layout to 960 pixels. To create the guides go to View->New Guide. Set (1) Vertical and 120 px, (2) Vertical and 1080 px.

The space between the guides should be 960 px, we will create all elements of the layout whitin the Photoshop guides. You could also use the 960 Grid Template for Photoshop.

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. Check it out because it can help your design process.

The Background

Our goal is to create a clean and fresh layout for a new SEO company that is not scared by the economic crisis (maybe they are Superheroes).

Step 2 – The Header Background

Choosing an height of 1520 pixels we’ve decided to develope the complete layout following a precise wireframe which is in our mind or on a page in our block-note. In this case I made a pen sketch evaluating the height (header 150 px + down-header 300 px + main container 750 px + footer 320 px).

Once made this preamble we can start to design the complete background for the website.
Use Horizontal guides to separate the sections (you can also drag the guides directly from the rules).

Create a new layer (Ctrl+Shift+N), use Rectangular Marquee Tool (M) to draw a selection in top and add #0e4968 color at the selection (right click->Fill). Go to Filter->Noise and Add Noise (Amount 1%, monocromatic).

Set the following style for the layer: Drop Shadow (Multiuply, Opacity 60%, Angle 103°, distance 1px, Size 7px), Gradient Overlay (from white to transparent white, Blend Mode Soft Light, Opacity 79%, Linear, Angle 90°, Scale 69%).

Add a second layer with a green color (#c3dd6c) using the same technique. You can use a clipping mask (right-click on the layer in the Layers Panel, Create Clipping Mask), name the layer “green bck”.

Add a new layer and fill it with #d4e9ff color, add noise and apply the following style: Gradient Overlay (from transparent to white, linear) and Stroke (6px, #bddafd color).

A new simple gray level for the main container.

Duplicate the header layers for the footer. Below you can see the final background.

Header and Down Header

We want to create a nice header with the logo of the company and a nice menu. We use the down-header section to describe, through a promotional message, the mission of makingSEO.

Step 3 – The Logo

Use the Gradient Tool (G) to draw a light as shown. Apply a Soft Light Blend Mode and set at 70% the Opacity. This layer must be added at the same level of “green bck”.

Below you can see the result.

Now use Horizontal Type Tool (T) and the font Mentone to add a string as shown in the picture (#fffff for “making” and #c4de6d for “SEO”).

Apply the style at the layer. Use Drop Shadow (Multiply, Opacity 20%, #000000, 120°, Distance 1px and Size 3px), Inner Glow (Screen, Opacity 39%, #ffffff, Choke 0% and Soze 1px), Bevel and Emboss (Inner Bevel, Smooth, Depth 154%, Size 0%, Soften 2px and a custom opacity for Highlight Mode and Shadow Mode), Gradient Overlay (from #000000 to #ffffff using Soft Light, Opacity 90%, 90° and Scale 94%).

Use Rounded Rectangle Tool (U) to add a shape, set the fill at 0% and add the style. Inner Glow (Screen, #ffffff, Opacity 39%, Noise 0%, Choke 0%, Size 1px), Bevel and Emboss (Inner Bevel, Smooth, Depth 154%, Size 0px, Soften 2pz, angle 90°, Altitude 26°, Highlight Screen with an Opacity of 100% and Shadow Mode Multiply with an Opacity of 34%), Gradient Overlay (from white to black, Soft Light, Opacity 90%, Linear, Angle 90° and Scale 94%).
Add a simple slogan.

Step 4 – The Menu

Create a new text string using Verdana (12px) for the menu.
Draw a dashed grid. Use Horizontal Type Tool (T) and create a string of “- – - -”, then rasterize it (right-click on the layer name in Layers Panel and select Resterize Type). This is the baseline for the grid that you can duplicate and positionate each single line to build a nice grid. Apply the style at the grid using a Fill of 0% and Gradient Overlay. It’s clear that horizontal and vertical lines have different Angle and Style in Overlay Gradient.

Down Header

In this section we would comunicate to the visitors what makingSEO do. The company works!

Step 5 – Big Typography in Down Header

Add a text in the right side of this section. Use Mentone and create three layers as shown in the following image. Draw two shape using Rounded Rectangle Tool (Radius 10px) to highlights the #ffffff type.

Apply Drop Shadow setting Opacity 100%, Angle 120%, Distance 3px, Size 0px and color #bddafd for the blue text, #a76a1b (orange) and #8db311 (green) for the white.

Step 6 – Call to Action Button

Add a new rectangular shape using Rectangle Tool (U) and set the fill of the layer at 0% (name the layer “button”). Add the following style: Gradient Overlay (Normal, Opacity 47%, Linear, Scale 84%).

Create a new layer, set your foreground color to #000000, choose the Paint Brush Tool (B), select a Hard Brush with the Diameter of 10px, create a circle at the bottom of your rectangle.

Edit->Free Transform (Ctrl+T) and stretch the circle as shown in the figure.

Go to Filter->Blur->Gaussian Blur and use a radius of 3-5 pixels and drink your coffee.

Right-click on the Vector Mask Thumbnail of the rectangular shape “button”, this is a way to create a selection. Now Shift+Ctrl+I for inverting the selection and Add a Vector mask at th shadow layer as in the image. Set Multiply Blend mode with an Opacity of 10%.

Create a second shadow using the same technique.

Add a new text string and apply the style. Inner Shadow (Multiply, Opacity 20%, Distance 1px, Size 1px), Outer Glow (Screen, Opacity 75%, Nois 0%, #ffffff, Softer, Spread 0%, Size 16 pixels).

Step 7 – Screenshot

Add a website scrrenshot on the left side an apply Drop Shadow (Multiply, Opacity 83%, Ange 90°, Distance 2px, Size 21px) and Stroke (8px, Outside, Normal, 100%, #ffffff).

Step 8 – Badge

Use Rounded Rectangle Tool (Radius 10px) to insert a first shape (name this shape layer “badge-1″). Drag some guides to delimit the figure.

Add a second shape (name this layer “badge-2″).

Click on the vector mask of the rounded rectangle you’ve just created (”badge-2″) to make it active, then select the Rounded Rectangle Tool (U), choose on the the option bar Substract from the Shape Area (-), and create a rounded rectangle as shown in the following image.

Add the last rounded rectangle and drag the layer just below the screenshot layer as shown. Add a Gradient Overlay (from white to black with Color Midpoint at 75%, Multiply, Opacity 76%, Linear, Angle 180°, Scale 12%).

Select “badge-1″ and using Direct Selection Tool (A) create a cut at the tail of the badge as shown.

Now select “badge-1″ and “badge-2″ (Ctrl+click on the name) from Layers Panel. Right-click and Duplicate Layers. Right-click and Duplicate Layers. Right click and Merge Layers.
Apply the style at this new layer. Drop Shadow (Multiply, Opacity 30%, Angle 120°, Distance 2px, Size 4 px), Inner Glow (Screen, Opacity 46%, Noise 0%, #ffffbe, Choke 0%, Size 5px), Bevel and Emboss (Inner Bevel, Smooth, Depth 100%, Size 5px, Soften 0px, Angle 166°, Altitude 48°, Screen and Opacity at 39% for Highlight Mode, Opacity of 0% for Shadow Mode), Gradient Overlay (from Normal, Opacity 39%, Linear, Angle 90°, Scale 61%).

Add a text and apply a hard drop shadow.

Main Content and Sidebar

It’s time to add contents and more informations.

Step 9 – Contents

Choose the Horizontal Type Tool (T) and add some text (using Verdana). You can also use some icons. Consider the icon set designed by “Navdeep Raj” for Smashing Magazine. Use the same technique (drashed lines) used in header menu to split the headings and the paragraphs.

Below a complete view.

Step 10 – Buttons

Use the Pen Tool (P) with the help of some guides to draw a button for the bottom of some paragraphs. Apply style at the layer using Drop Shadow (Multiply, opacity 30%, Angle 120°, Distance 2px, Size 4px), Inner Glow (Screen, Opacity 46%, #ffffbe, Sifter, Choke 0%, Size 5px), Bevel and Emboss (Inner Bevel, Smooth, Depth 100%, Size 5px, Soften 0px, Angle 166°, Altitude 48°, Highlight Mode Screen with an Opacity of 39%, Opacity 0% for Shadow Mode).
At the end add a text using a hard drop shadow for the style of layer.

You can add a second button with an orange color.

Step 11 – Sidebar

Design another rounded rectangle (#fbfbfb, stroke 1px dcdcdc) and add some text as shown in the following image.

Footer

Here we’ll insert some other useful informations for visitors.

Step 12 – Designing Footer

Add three columns using the previous techniques. Use an icon in Twitter section.

At the end add the credits.

Conclusion and Download

Congrats, we’ve designed a decent frash layout for a great Seo Company. I really love this clean style. Click on the following link to download the complete layered PSD Template.
Dont’ Forget. The template is released under Creative Common License als for commercial use.

Bye Batman!