Photoshop Tutorial Full Website layout

Hello my friends. In this tutorial you will learn how to create nice simple website layout.

This is what we are struggling forJ

NOTE: Always keep an eye on the final result, to know how and where to draw what I am suggesting.

Let’s start with the easiest parts.

Step No. 1:Setting up the canvas.

Create a new 1280x1024px Photoshop document. Select the gradient tool (G), and fill the layer with it. The colors I’ve used are shown in the picture.

TIP: If you want to create a perfect vertical gradient like mine, hold down the Shift key while dragging with the Gradient Tool over you canvas.

Step No. 2:Creating the logo/title/slogan.

This is a catchy logo/title/slogan, and it can be created using only one tool: the Text ToolJ.

So pick the text tool (T). Write down “:: OurBusiness.com” (this is what I wrote of course you can use the name of your company ).

The styles I’ve used :

  * “::” – Shruti – Regular – 48pt – Strong - # ff9701;

  * ”Our”&”.com” – Segoe Print – Bold – 30pt – Strong - #ffffff;

  * ”Business” – Segoe Print – Bold – 30pt – Strong - #d37e04;

  * “Lorem ipsum dolor sit amet, consectetu...” – Segoe Print – Bold – 14pt – Strong - #a8a8a8;

Step No.3: Creating the bottom part:

Create a new layer. Pick the Marquee Tool (M), make a selection as the rectangle above, and fill your selection with #870000.

Apply a 1px ouside Stroke, using #101010 and a “Drop Shadow” style, using the default settings.

Add the text.

I am using Shruti -> Regular -> 18pt -> Strong -> #FFFFFF.

Step No.4: Creating the main menu:

Pick the Rounded Rectangle Tool (U), select the radius to 10px, and set the foreground color to # 607785.

Draw a shape as shown:

Rasterize the layer. Make a small vertical selection as shown:

Hit delete. Now using the arrows on your keyboard, move the selection and hit delete where you need the second button to finish..and so on until you have all the buttons you need separated.

Now Ctrl + Click on the layer’s thumbnail shown in the Layer’s Palette Panel to select the layer’s area.

You canvas should look like this:

Set your foreground color to # ff9701. Grab the paint Bucket Tool (G), and click in the first area of your selection:

Now add the text. I am using Segoe Print :: Regular :: 24pt :: Strong.

The canvas should look like this:

Step No.4: Creating the orange submenu:

Using the Rounded Rectangle Tool and the foreground color set to # ff9701 and move it a bit over the main menu. Just as shown .

Apply a Drop Shadow Style, using the default settings.

Create a new layer. Grab the Rectangular Marquee Tool (M) and make a square selection as shown:

Fill it with #d78106.

Now, create an other layer, pick the Eliptical Marquee Tool , and draw an ellipse as shown, and fill it with # d78106:

Now duplicate your layer, hit V on the keyboard (Move Tool), and using the left arrow on your keyboard, move the new created ellipse on the other side of our rectangle. As shown.

You should have something like this:

To create the two separators

Pick the Line Tool and set the weight to 1px. Make sure you have the “Shape Layer” Option on.

Drag two lines as shown in the picture. Hold down the Shift key to make them straight.

Rasterize both layers, and apply them a “Drop Shadow” style, with the default settings.

Add the writing. I have used Segoe UI and Segoe Print.

TIP:If you need the color, and it is not specified, open the picture in Photoshop, and pick up the color using The Pick Color Tool.

Now using this custom shape (U), and with the foreground color set to # 0a7d81, draw a shape as shown.

Duplicate the layer and move it on the left side. To perfectly change arrow’s pointing, press M (Marquee Tool), right click on your layer, in the canvas, and select Free Transform.

  Now hit “-” in the width field.

You can get the wheels on the internet. Place them as shown and change the layer’s mode to “Darker Color”.

Step No.4: Creating the presentation - the black rectangle:

Grab the Rounded Rectangle Tool, set the foreground color to #000000, the radius to 10px.

Draw the black rectangle:

The same image with wheels used at the previous step, must be copied and placed as shown:

Add the writing.

Styles used:

TITLE: Segoe Print -> Regular -> 18pt -> Strong -> # d78106;

CONTENT: Segoe Print -> Regular -> 24pt -> Strong -> # d78106;

FOOTER: Segoe UI -> Regular -> 18pt -> Strong -> # 9b9a99;

Copy a picture from the Internet and copy it as shown in the picture:

With the Line Tool, add a shape as shown, to underline the title:

Step No.4: Creating the right blue menu:

With the Rectangle Tool and the foreground color set to # 0072a6, create a shape as shown:

Rasterize the layer, and apply a Drop Shadow style, using the default settings.

Repeat the previous step to create a # 045e87 rectangle. Place it as shown.

Rasterize the layer and apply a 1px outside Stroke using # 01405c.

Now we need to create that nice upper little nice glossy rectangle.

So grab the Rounded Rectangle.

Draw the rectangle as in the picture above. Rasterize the shape. Right click and open the Blending Options… Panel. Apply these settings:

And a 1px outside Stroke using # 000000.

Now let’s create the “More” buttons.

Add the square using the Rectangle Tool and a random color, as we are going to apply a gradient style.

So you have drawn the square. Right click and hit Rasterize Layer.

Open the blending mode panel and apply the following styles:

*Drop Shadow using the default settings.

*Gradient using the following settings:

Now add the text and we are done : ).

Text Styles:

* “Quote of the day “: Segoe UI -> Bold -> 18pt -> Strong -> # 3d515d

* “Lorem ipsum….” : Segoe Print -> Bold -> 12pt -> Strong -> # ffffff;

*”Latest Reviews” : Shruti -> Regular -> 24pt -> Strong -> # 8a0707;

*”Donec…”: Shruti -> Regular -> 14pt -> Strong -> #bfb9b9;

*”:”: Shruti -> Regular -> 24pt -> Strong -> # 00415e;

*”More”: Shruti -> Regular -> 18pt -> Strong -> # 7e0606;

Ta-daaaa..You’re done : ). Please don’t forget to share it.

The result:

Thanks for visiting my blog..

Cheers.