Design for a site in Photoshop

In this lesson, step by step, we will make the mock-up of the satellite and snowboarding site. We will be inspired by the culture of snowboarding using grunge textures and brushes. Let’s start with the development of the main layout of our future page and layout of the main design elements, and using Photoshop, let’s recreate in the template what we have already developed in the head and on paper.

Here’s what we get:

Materials for the lesson:



Black Rose Font


Picture for player

The best place to start is a piece of paper. Before you open Photoshop, develop a layout on paper, denoting the main elements. I also invented and drew a logo.

Using a pre-fabricated grid for the layout is one of the basic principles of web design, helping to immediately balance and streamline all the work. Our design will be based on a simple layout of 12 columns each 24 pixels wide – including indents, the total width will be 970 pixels.

A useful tool for creating similar markup – “Grid System Generator”, where you can create a markup consisting of pink columns, and then load the markup into the program. To get a horizontal line, create a document 24×24 pixel and draw a single pixel strip at the very bottom, as shown in the figure. Next, click Edit> Define Pattern (Edit> Define Pattern), and fill the new layer with our main document.

So let’s continue. First, fill the background with light blue. (# b9d2f8), adjust the gradient from light blue to dark blue (# 02357a) – in this way, color # 295ba6 should become an intermediate link. It should look like this:

Visit Bittbox and download one of the textures from there (available in the archive). Paste the texture into our document and adjust it in size. Also change the blending mode to Luminosity (Brightness) and set the opacity to 25%.

Add a mask to the texture layer and, using a large soft brush, wipe the texture so that it remains only on the background of the cap – at the very top of the template, in the center. Black color on the mask indicates the places that will be invisible, white color indicates the visibility. I think you already know how to use masks.

Now we need to add a logo in the header that matches the style of the entire template. Download the font Black rose, and type our logo in lower case. Do not forget that to place any object, including the logo, you need, focusing on our markup – columns and lines.

Now we diversify the logo a bit by coloring the letters with style brushes. Set the opacity to ten% and carefully carry out our plans.

To focus on the logo, add some shadows and a bright gradient to the background. Create a round gradient on a new layer, change the blending mode to Overlay, and adjust the opacity value as you like – I chose 50%.

To the right of the logo, create a block with simple navigation. Use some standard fonts, for example, Arial, so as not to create unnecessary problems to the coder.

On the background of one of the navigation points, add a brush stroke – for preparation under an active state. Adjust the transparency as you see fit.

Now let’s add the main block of our layout width to 970px and fill the block with white.

Change the opacity value to thirty% and add a shadow completely invisible to the eye, setting the size value to tenpx and reset the parameters Distance and Offset Spread.

One of the main features of the layout is a large thematic photo in the center of the layout. This block can be used, for example, for the jquery rotator of any content, but now we just insert a picture here. Insert and adjust it under the template.

Another small feature – add on top of the translucent blurry spots of different colors. Use hot pink, blue and yellow, for example.

Set the blending mode for the layer with our multicolored strokes on Overlay and set the opacity value to 35%. The result will add spice to the picture.

Now create a frame right on top of the image. Use black color, and after the frame is drawn, change the blending mode to Overlay and set the opacity value to taste.

Such image processing will give depth and spice to our template.

Now we will create a text layer to display information about the event. I worked a little bit on this in the program. Illustrator, but this is no reason to leave our beloved Photoshop. Place pieces of text relative to the markup.

Some vector images on snowboarding can be found on the link in the archive.

Now that this text layer is ready, add it to the main template. With positioning layer relative to markup for semantics.

Another feature of the template – additional content that may arise. Use the header to create so-called visual anchors that attract the eye and give a direct assessment of the content. Write the text in thin lowercase letters, and draw a small icon opposite each link.

To designate a video player on the layout, use some image.

On the new layer, create a round selection and fill it with black. Using the tool Polygonal Lasso Tool (Polygonal lasso), draw a triangle in the center, as shown in the figure, and delete the selection. As you understood, we did this to create a play icon.

To the right of the video, add a block of upcoming events. We write the title and select an icon for it.

We place a billet of information about the upcoming event, as shown in the figure. Use different font sizes to create a kind of “hierarchy” of importance.

When filling in the layout with content, do not forget that each element must be positioned relative to the markup that we created at the very beginning. The same applies to the text, so it is advisable to make the distance between the lines in 24px

At the bottom of the layout, we still allow a couple of objects to be placed not along straight markings. These will be pictures in the block “Meet the Team”. Add a small white frame and shadows to each image.

Place the pictures by slightly scrolling around the center to slightly stylize the whole thing.

Naturally, you need to sign each picture.

Now copy the texture that we used in the header at the very beginning, and move it to the bottom of the template. Beauty!

Let’s play with the settings to adjust the texture. You may have to change the layer mask – use soft brushes.

Basically, everything is ready! Go over your eyes again – suddenly we have missed something – and you can proceed to the layout!

A source:

Like this post? Please share to your friends: