Effective web design - what is it?
If you want to achieve serious heights and build a successful career as a web designer, then you definitely need to know the key criteria for evaluating the effectiveness of…

Continue reading →

Visual Regression Testing with PhantomCSS
If you worked on large, serious projects, you probably already felt the importance of automated testing during the development process. Depending on experience, this awareness may come suddenly like a…

Continue reading →

Working with empty space: why emptiness affects design so much
in web design, empty spaces include areas without text and images. It can be said that this is “visual silence”. For our design to function, it is necessary to correctly…

Continue reading →

Blog Design: Layout Workshop

The topic of today’s post is blog design. We will have a practical lesson, so get ready for independent work, there is no planned vacation 🙂 Why is the master class on the example of a blog? Yes, probably because the blog provides an unlimited field for imagination. Thanks to the development of accessible platforms and templates, copyright blogs have expanded into the web like rabbits, increasing their numbers simply exponentially every day. And we will make our own unique design. Go!
1. Preparation and organization of groups.
We will work on a white canvas measuring 950 by 1600 px. After you set the guides, the width can be increased to 1200 px, so it will be more convenient. Very often, after creating a blog design in psd, you get a huge number of layers that are not easy to figure out. If the inexperienced master will make up the layout, then additional work can not be avoided, you will remake and chew him every fig.

We will prepare in advance and divide all our layers into folders / groups. We will name them according to the names of the blocks: header, content, navigation, sidebar and footer. If some group is not needed in the end (although it will be strange), just delete it.

2. Group Header
In my example, the hat is made on a paper texture. How to prepare it:

Find out more
Take the standard “Paper Texture 1”. You can find it in Photoshop textures.

Magic Wand Tool remove the black background.

We take out what happened on a new layer and drag it into the Header group.

The paper should occupy the entire top of the document. We don’t need its original color, so set Lightness to -100.

My logo is the simplest text displayed on the left. Font – VTKS Caveirada. Any non-standard fonts are saved in a folder on the computer’s disk. If Photoshop doesn’t drag them to the working panel, reload the program. Pre-save the finished layout!

Insert links on the right edge. Active links will be highlighted in gray, such a figure can be made in the Lasso Tool.

3. Background texture
Even the most standard wordpress blog design can be made unique by adding the original texture to the background. We will need “Paper Texture 3”, which we will transfer to the layout. The image should completely cover the page, for this we remove it under all other layers.

To achieve the desired gray tint, we will discolor the texture and increase the brightness to the desired angle, as shown in the figure:

4. Drawing the main area – content.
There will be two main informative areas on my layout:

in fact, the content itself – articles, for example – and announcements to them;

and sidebar.

We are now moving on to populating the Content layer group. Please note that you need to work only in it.

Create a selection with a width of 660 px (you can check your eye through the Info window, it’s still convenient to display the ruler in pixels, then you will always be guided in size). Fill the new layer with a white background.

Add a style. Look what settings I chose:

I will only add that it is better to choose gray color not by eye, but by code, then there will be no unnecessary transitions.

Now we’ll apply the texture, the standard “paper 2” will do. Copy it through the selection. In the main layout, transfer a new layer on top of the white area. Through transformation, we achieve the desired size. Discolor. Through the correction curve we darken.

Now make the outline of the text area. 1. Press the combination “Ctrl + left-click on a layer in the palette”. The resulting selection must be modified, 3 px along the perimeter is suitable. Invert the selected fragment, press Del. Done.

I also have a layer mask and a gradient applied to the texture. Settings as in the picture:

5. Navigation menu.
Now let’s get into the Navigation group. Using the Rectangular Marquee Tool create a selection, as shown in the picture.

Find out more
Make a black fill. Similarly, create the required number of buttons or just copy them. Through the Horizontal Type Tool we sign the buttons. The corner of the last button needs to be “bent”. Make a selection and rotate it 450.

We cut out the selection and display it at 1800. Increase the Lightness of the “bend” to 30. In the remaining space in the line, insert the sharing icons (social networks), size 32 * 32 will do.

6. Space for content.
Before adding text, prepare the content area: select the layer for the main content. Through the Transform Selection, reduce the width by 40 px, we get a two-sided indentation of 20 px.

We expose 2 more guides inside the area. Enter our title, I used the Horizontal Type Tool and the Adobe Garamond Pro font. At the same time, we work strictly in the Content group.

Add the info line. Done. We turn to the illustration of the article. Select the area of ​​the given size 620 * 275. Select it in a new layer and fill it with black.

What is a selling design?
Design is the most important component of any website. This is especially true for selling sites, because in this case it is necessary to interest the visitor and encourage him…


How does website design development begin?
Before you begin your journey to the top of your career as a web designer, you need to understand the basic principles of creating such projects. Do not immediately run…


Basic web design elements. How to create an effective website thanks to them?
For the construction of any building requires certain building materials. As a rule, for each type of structure they constantly remain the same, only the shape and general design of…


Composition in web design, or what Photoshop tutorials are silent about
Surely, you often have to visit sites that, at first glance, seem to be like nothing - both the pictures are beautiful and the text is folding, however, they lack…