Beautiful site layout in Photoshop

Hello! In this tutorial, I will once again show you how to make a beautiful layout for the site. We will talk a little about the theory of site structure. To organize the structure, we will use the standard markup. I will also show how to achieve the effect of an engraved text. Let’s try!

Creating a really good layout is not easy. It is important to consider some aspects as a whole. It is necessary to clearly represent the main mission of the site, its target audience, its type, and so on. In this case, we will work on the site portfolio.

After I sketched the future site on a piece of paper, I already have an idea in my head about what the site will be in the end. Structure is the basis of web design. I don’t want to turn this lesson into a lesson on the proper structuring of the site, but still I allow myself to give you a couple of practical tips on how to properly organize content.

One of the main things you shouldn’t forget is that your layout will be translated into code once, that is, it is laid out. For this reason, I will show you how to make your own textures instead of copying “heavy” textures from other sources. Having basic knowledge of html and css is essential for a good web designer.

Our final layout will not be so easy (we will use quite a lot of different textures), but the Internet is becoming faster and faster, which allows us to worry less about the “weight” of the site.

After planning the structure of the site, I start flipping through various sites, galleries in search of a landmark that inspires me. In this case, I was struck by the elegance and purity of Jeroen Homan’s site, so I took it as a guide.

Another important decision that you will have to make and which will affect a lot is the palette, or more simply, the colors you will use. On this, too, you need to think in advance. There are a bunch of services with which you can choose beautiful color combinations.

So we can start!

Step 1. Work with the background

The background of the layout will be a texture of 500 by 500 pixels, looped horizontally and vertically. Create a document with the following parameters.

Fill the document with a dark beige color. #d9cfc0

Add paper texture. I chose the texture paper15 from this set. Reduce the texture slightly and increase the sharpness with a filter. Pinch Ctrl+Shift+U, To discolor the texture, change the blending mode of the texture layer to Multiply (Blackout) and set the opacity value to 20%. It turns out something like this:

Now we press EditDefinePattern (Editing – Define a pattern) to make this document a texture.

Now we will immediately deal with the markup. I downloaded a special template for this 960 Grid System site

The main task of the markup is to help the designer visually imagine how to organize the content better along the way so that he does not have to keep it in his head all the time. Open the template with 16 columns and remove the group from the list of layers.layerone”. The group with vertical lines should always be on top. Sometimes you can make it invisible, but you have to turn it on whenever you work on the structure and organization of the content. I also increased the height of the template to 1470 pixels. Here is a screenshot of the final result with markup:

We press EditFill (Editing – Fill) and fill our texture with the background layout.

On a new layer using a large soft white brush paint a highlight as shown below. Set the opacity value to thirty%. This will highlight the area for the cap and logo. Create another layer and paint on it with brushes. WGGrungeBrushes. This will further embellish the top of the layout. Select all the layers related to the background and group them into a separate group. background“.

Step 2. Work on the header

When the work on the background is finished, we can work on the header. We need a beautiful texture, and we will make it ourselves again. Create a document 20 to 60 and fill it with white. Add a horizontal markup line with indentation from the bottom edge in ten pixels

Select the area as shown below:

Hold Alt, press the button to add a mask for the layer.

Create a circle with a diameter of 20 to 20. In order to set the size, you can use the corresponding function, as shown below.

Put the circle at the bottom of the document. Now we press EditDefinePattern (Editing – Define a pattern) to make this document a texture.

At the top of the main document, create a rectangular selection with a height of 60 pixels

Fill the selected area with a new texture, set the opacity to 50%.

Add a rectangle in height five pixels color # 506271 and place it at the very top of the template.

Step 3. Add a logo and menu

Work on the menu. I will use the font Arialat 13 pixels Colour – # 506271.

As a logo, I created an ellipse with the following styles:

Create a new layer; holding Ctrl, click on the ellipse to create a selection around it. We press SelectModifyContrast (Allocation – Modification – Compress) and enter the value four pixel. Fill the selection with a gradient from white to transparent from top to bottom. Opacity – 40%.

Add text and place the logo in an ellipse. I used a wonderful free font. Anivers. I applied the same gradient to the styles as the ellipse styles. In order to add depth, duplicate the text, place a duplicate directly under the original and change the color to white. Move down a pixel and right to the pixel.

Step 4. Add a slogan

Now add a tagline. This is the first thing that a visitor will see on the site, and we need to try so that the design of the slogan has the proper effect.

I used a combination of three fonts: Chunk for upper text Aniverse for the bottom, Gabrielle for comma and ampersand. Do not forget to use markup, it will greatly help you.

For the comma and ampersand, I used the same blue # 506271. For styles, use the settings listed below:

Duplicate all the text layers. We place duplicates for originals, reset all styles for them, change the color to white. We drag on pixel to the right and on pixel down. Rasterize duplicates. Holding Ctrl, click on the original text to create a selection around it, click Delete (the duplicate layer should be selected).

Step 5. Block “Recent work”

The first thing we need to do is to separate the slogan and the block with examples of work. To do this, we add text and two horizontal bars. We use as the font 18ptArial. To make the stripes paler towards the edges, I used a mask. Create a mask for the layer with lines and use the gradient from black to white.

Once again, we use the technique of “engraving”. Duplicate layers with text and stripes, place duplicates behind the originals, change the color to white, the opacity level to 70% and move duplicates one pixel down and one pixel to the right.

Create containers for images. Create a rectangle 220 to 194. Make the markup visible and focus on it when you position the rectangle.

Apply the following styles to the rectangle:

Duplicate the rectangle and place the duplicate under the original. Reset all styles for duplicate and make it completely black. As you understood, we will make a shadow. So, rasterize the duplicate. Next, click EditTransformDistort (Editing – Transforming – Distortion). Move the upper left corner slightly left and down, as shown in the image below.

Apply FilterBlurGaussianBlur (Filters – Blur – Gaussian Blur) with a radius of 4 pixels.

Now take the eraser and erase the unwanted parts of the shadow. It also does not hurt to slightly lower the opacity parameter.

Create a new layer on top of the container layer. Holding Ctrl, Click on the container layer to create a selection of the corresponding shape. Fill the selection with color # 64594d. While the selection is still active, click SelectModifyContract (Allocation – Modification – Compress) and enter the value 1 pixel. We press Delete. We created the effect of a single pixel internal stroke.

Now multiply the required number of containers and fill them with images. Group all layers with containers and images, name the group gallery“.

Step 5. Work on the footer.

Here we come to an end. All that remains is a footer or “basement”. In order to make the background for the footer, we simply copy the background from the header and reflect it vertically, moving it to the bottom of the template. Change the color to blue # 506271 and set the opacity value to 100%. I also created a rectangle of the same color and placed it on top.

To make the footer better fit into the overall concept, we will add a grunge texture. I used a low opacity grunge brush.

I divided the footer into three sections: feedback, my contacts and a block for twitter. Font – 18pt arial.

Let’s start with the feedback form. Create a rectangle for the input field.

Use the following styles for the layer:

Now we use the same technique that we used when creating the text of the motto to create a white stroke on the left and bottom. Multiply the fields and title each field, and do not forget about the button (try using grunge brushes for it, as I did).

In the central column, I simply add links to several social networks. I used these icons here.

In the right part, create a form using standard tools, as shown below. We use the same styles for the layer with the shape that we used for the fields in the feedback block. Also add an icon Twitter‘but – I used the icon from here.

Almost done. Now the most important thing is to add copyrights. And also do not forget to group all the layers related to the basement in the group footer“.


So we finished this long lesson. I hope you learned something interesting for yourself. Wishes and suggestions – in the comments.

All the best!

Author: wegraphics

Like this post? Please share to your friends: