Create a site layout in Photoshop

The final result:

?

Sources for the lesson:

  1. 960 Grid System
  2. Set of icons
  3. Icon 1
  4. Icon 2
  5. Icon 3

Step 1. Work with the site structure

First, download the 960 Grid System template. Open 960_download \ templates \ photoshop \ 960_grid_12_col.psd Click Ctrl + Shift + C to change the size of the canvas.

Using the tool Fill (Paint Bucket Tool) fill the background with the color # 151515. Now you need to create a folder for each part of the layout.

Step 2. Creating a site header

Create a new guide (View> New Guide (View> New Guide)), Position (Position) set to 150px, Orientation (Horizontal). Repeat this step and create two more guides with a position of 5 and 100 pixels.

Inside the Header folder, create a new layer and name it “header_top”.
Using tool Rectangular area (Rectangular Marquee Tool) create a selection of 5px in height, fill with black color and add 1 pixel light shadow to the layer.

Create a new layer and name it “header_bg”. Take the tool Rectangular area (Rectangular Marquee Tool) and create a selection, as shown in the screenshot below.

Take the tool Gradient (Gradient Tool), gradient color # 242424 – # 151515, and fill the selection with a gradient.

Open the window Layer styles (Layer Style) and activate Inner shadow (Inner Shadow) with the following parameters:

Step 3. Creating a logo

Inside the Header folder, create a new “Logo” folder. Take the tool Text (Text Tool) and add the site name and slogan using the parameters from the screenshot below.

Open up Layer styles (Layer Style) and activate Shadow (Drop Shadow).

Take the tool Arbitrary shape (Custom Shape Tool) and follow the prompts in the screenshot below.

Add the following styles to the shape:

Shadow (Drop Shadow)

Gradient (Gradient Overlay)

Step 4. Create a navigation

Inside the Header folder, create a new folder and name it “navigation”. Using tool Text (Text Tool) add categories using the parameters shown in the screenshot below.

Duplicate the text layer. Change the color of the original text layer to black and move it 1px up.

Now we need to create an effect for the active category. Under the layer with categories create a new layer, select the tool Rounded Rectangle (Rounded Rectangle Tool), radius 10px, and create a rectangle. In the layers panel, reduce Fill (Fill) to 0%.
Apply the following layer styles:

Shadow (Drop Shadow)

Inner shadow (Inner Shadow)

Gradient overlay (Gradient Overlay)

Step 5. Creating the search field and bread crumbs

Inside the Header folder, above the header_bg layer, create a new layer and name it bg. Choose a tool Rectangular area (Rectangle Marquee Tool), create a selection as shown in the screenshot below and fill it with some color.

Then add layer styles using the options below:

Shadow (Drop Shadow)

Internal glow (Inner Glow)

Gradient overlay (Gradient Overlay)

Stroke (Stroke)

Inside the Header folder, create a Search folder. Take the tool Rounded Rectangle (Rounded Rectangle Tool), radius 10px, and create a rectangle as in the screenshot below.

Add layer styles:

Shadow (Drop Shadow)

Inner shadow (Inner Shadow)

Choose a tool Text (Text Tool) and add some text to the search field.

Now open a set of social. icons and place them near the search.

Inside the Header folder, create a Breadcrumbs folder. Open the house icon and place it as in the screenshot below. I added Color overlay (Color Overlay) # 696969 to icon and to text layer.

Step 6. Create a slideshow

Inside the Slideshow folder, create a new layer and name it slide_bg. Create a new guide, to do this, go to Browse> New Guide (View> New guide), Position (Position) set to 430px, Orientation (Horizontal). Create a selection like in the screenshot below and fill it with some color.

Add the following layer styles:

Shadow (Drop Shadow)

Pattern overlay (Pattern Overlay)

Stroke (Stroke)

Above the slide_bg layer, create a new layer and name it highlights. Choose a tool Pen(Pen Tool), draw a shape like in the screenshot below and create a selection.

Fill the selection with white, change the blending mode to Soft light (Soft Light) and reduce Opacity (Opacity) up to 50%

Now we need to add some text inside our slide show. Choose a tool Text (Text Tool) and, following the prompts in the screenshot below, add your text.

Step 7. Adding the Read More Button

Inside the slideshow folder, create a read_more folder. Take the tool Rounded Rectangle (Rounded Rectangle Tool), radius 10px, create a rectangle and place it as in the screenshot below.

Fill (Fill) layer reduced to 0%. Add the following layer styles:

Shadow (Drop Shadow)

Inner shadow (Inner Shadow)

Gradient overlay (Gradient Overlay)

Load the selection for the layer we just created. Go to Select> Modify> Compress (Select> Modify> Contract), enter 5px and fill the selection with any color.

Add the following layer styles:

Shadow (Drop Shadow)

Internal glow (Inner Glow)

Overlaygradient (Gradient Overlay)

Stroke (Stroke)

Using tool Text (Text Tool) add “Read more” to the button and fill it with dark color. Duplicate the text layer, change the text color to white and move it 1px down.

Step 8. Adding an image to the slideshow

Choose a tool Rectangle (Rectangle Tool), create a rectangle and place as in the screenshot below.

Decrease Fill (Fill) to 0% and add the following layer styles:

Shadow (Drop Shadow)

Stroke (Stroke)

I placed the image above the rectangle layer. So you should have something like this:

Step 9. Adding Slide Toggles

Create a new folder inside the Slideshow folder and name it prev_next. Choose a tool Rounded Rectangle(Rounded Rectangle Tool) with a radius of 10px. Create a shape as shown in the screenshot below and rename the layer to “prev”.

Decrease Fill (Fill) to 0% and add the following styles:

Shadow (Drop Shadow)

Internalshadow (Inner Shadow)

Overlaygradient (Gradient Overlay)

Duplicate the prev layer and rename it to next. Flip it horizontally and place it on the opposite side.

Create another folder and name it Identifier. Inside this folder, create a layer and rename it to inactive. Choose a tool Ellipse (Ellipse Tool), create a few round shapes, fill them with black color and place as in the screenshot below.

Add them the same styles as the prev_next buttons.
Download the selection for the first shape, go to Select> Modify> Compress (Select> Modify> Contract) and enter 5px. Create a new layer, name it active, and fill the selection with some color.

Add the following styles:

Shadow (Drop Shadow)

Internalglow (Inner Glow)

Overlaygradient (Gradient Overlay)

Step 9. Add content

Inside the services folder, create a new layer. Take the tool Text (Text Tool) and add a title using the parameters in the screenshot below.

Now let’s add a separator. Choose a tool Line (Line Tool), width 1px. Create two lines and place them as in the screenshot below.

Create a new folder and name it service1. Choose a tool Text (Text Tool) and add a header using the parameters shown in the screenshot below. Open the icon set you downloaded at the beginning of the lesson and add an icon near the title.

Duplicate the group several times. Place them just like in the screenshot below. In each group, change the icon.

Step 10. Adding the block “About us”

Inside the about us folder create a new layer. Using tool Text (Text Tool) add title. Duplicate the delimited layer we created in the previous step and drag it under the heading.

Also add any information about yourself using the parameters shown in the screenshot below.

Go to the Layer Styles window and add the following styles:

Shadow (Drop Shadow)

Stroke (Stroke)

Step 11. Add the latest posts from Twitter

Inside the latest tweets folder, create a new layer and use the tool Text (Text Tool) add some text. Using tool Rounded Rectangle (Rounded Rectangle Tool) create a rectangle and place it under some record.

For a rectangle layer, add the following layer styles:

Shadow (Drop Shadow)

Step 12. Creating a footer

In the footer folder, create a new layer and name it footer_bg. Create a selection like in the screenshot below and fill it with some color.

Add layer styles:

Internalglow (Inner Glow)

Overlaygradient (Gradient Overlay)

Stroke (Stroke)

Take the tool Text (Text Tool) and add your copyright in the center of the footer.

Final image:

Author: Michael John Burns

Like this post? Please share to your friends: