Grunge style website layout.

In modern web design, along with “watercolor” brushes, transparent (I call them translucent) layers are becoming widely used. For example, on the new Envato website, this effect is widely recognized, and this lesson will show you how these effects are created. We will also combine it with other techniques that are popular in modern web design.

This is our approximate result:

Materials for the lesson:

Step 1. Procurement

Let’s create a document. I prefer to use the width in 960 pixels For this lesson I will use the height in 800 pixels – this height guarantees us enough space for the work that we have outlined. I advise you to use markup when working on site layouts, this will facilitate your work.

Now about the markup. For now, it is enough to surround the document with stripes from all sides, as in the figure.

Now we need to distribute the area. We press Image > CanvasSize (Image> Canvas Size) and expanding document size up to 1100 per 1000. This should provide us with enough space for work.

Fill the document with white, rename the layer to “background”. It should turn out like this:

Step 2. Create a gradient for the background.

Add Gradient Overlay (Gradient Overlay) in the style of our background layer. I used a tricolor light yellow-blue gradient, you can use something else that is more suitable for you. We specifically fill the layer through the layer styles, not through the fill, this has its plus – we can at any moment adjust the color much easier.

This is how it should turn out:

Next, I’ll add some noise to our background. If you do not like it – go directly to the next step.

Create a new layer, call it “noise”. Fill it with white. We press Filter> Noise> Add Noise (Filter> Noise> Add Noise). We expose the settings as shown. We use color noise, it will give us depth.

Blend Mode – Multiply (Blackout), opacity – five%.

Step 3. Add a texture

First, you have to download the package of brushes we need, if, of course, you don’t already have one. Brushes in the archive.

Create a new layer on top of all the others. Name it “brush1” (we will use several layers). Blend Mode – Multiply (Blackout). Choose some warm color as opposed to the background. I used # 996726. Choose your favorite brush and start “smearing” from the upper left corner, a little going beyond the contour – it will turn out more beautiful.

The opacity value is set to 50%. Repeat the previous steps a couple of times so that we end up with 2-4 layers with strokes on top of each other.

Congratulations, our beautiful, unique background is complete. Background strokes will select you from a pleiad of other similar designs, which usually use a regular gradient, and more often a plain background.

Step 4. Create the main block container

We will use the tool RoundedRectangleTool (Rectangle with rounded corners) with a radius of 20 pixels On top of all layers we create a rectangle, taking into account the markup that we created at the very beginning. The size – 960 by 800. Rename the layer with the rectangle to container and rasterize the layer.

That the container did not merge, we will make the following:

  1. Zero value Fill (Fill) – we will color the container using layer styles.
  2. Add Drop Shadow (Shadow) – settings as shown.
  3. Add BevelandEmboss (Embossed) – settings as shown.
  4. Add ColorOverlay (Overlay color) – settings as shown.
  5. Add Stroke (Stroke) – settings as shown.

In the end it should look like this:

Step 5. Another markup

To ensure that we keep the same distance from the edges of the container when adding content to it (we will not count pixels each time along the ruler), we will add four more lines to the container at a distance 40 pixels from the edges.

Step 6. Navigation

As you saw in the preview of the final result, we will make the navigation like a clipping from the main container. To implement our plans, we will cut a piece of the main container and allow the layer style settings to do its magic.

To do this, create on top of the layer selection of the desired shape. Create a rectangle with rounded edges with a radius of ten pixels.

To position the navigation more correctly, focus on the markup. Now select our rectangle. In the list of layers select the main container and click Delete on keyboard. Is done. Do not forget to delete the layer with a small rectangle – we only needed it to create a selection.

If we did not use styles, the hole would be sloppy and ugly. However, with styles everything looks absolutely flawless, in addition there is another plus – we can edit something in styles at any time.

Add text. I used the standard Windows font Rockwell.

We will make for it the effect of “engraved in stone” text. To do this, add shadows with the following settings.

Step 7

As a rule, in modern designs it is customary to somehow select the navigation page on which the user is located.

Create a selection, as shown in the figure, placing the layer directly below the text layer. Fill the selection with some color, no matter how. Name the layer “active nav”.

Apply the following styles to the layer.

Duplicate the layer and call the duplicate “active nav flattened”. We reduce all the layers on a duplicate – click Flatten All Layer Effects (Execute all effects of a layer).

Using the selection, we remove the internal highlighting and stroke at the top and bottom of our button.

Now we need to add shadows to create the effect that the button is “woven” into the main container. We will do it manually using Ellipse tool (Ellipse).

Create a black ellipse on 20 pixels wider than buttons about five pixels tall. We place it above the button and rasterize it. Name this layer “top active shadow”.

Now we need a little blur our shadow, for this click Filter> Blur> Gaussian Blur (Filter> Blur> Gaussian Blur) and apply a blur with a radius of two pixels. We divide the ellipse horizontally in half and remove the upper part, leaving a semicircle. Set the opacity to 50%.

Set the opacity of the “top active shadow” layer to 75%. That’s it, the upper part is ready. Duplicate the shadow layer, reflect it vertically and adjust it to the bottom. We name the duplicate “active nav flattened layer”. It should look like this:

Step 8. Logo

Before proceeding to work on the logo, let’s do one more thing. Add a few more lines to the markup. We do as shown below. For reference – the height of the selection 40 pixels

Add a dividing line in order to separate the header from the block with the main content. Draw a line with a height of one pixel and a width of the width of the main container. Fill the line with a dark green color (I used the color from the background). Name the layer “separating line”.

To achieve the effect of engraving, duplicate the line, transfer it to a pixel below and fill it with white.

Now let’s take a logo. I am not an expert on this part, so I will just add a beautiful inscription in a beautiful font – Gill Sans. In the same way as we did with the navigation block, select the text and cut the selected part from the main container. It should turn out like this:

The effect is achieved in the same way that we used for navigation.

Step 9. Portfolio block

And again we will apply the same method to “cut out” the space for the portfolio block from the main container.

Create a rectangle with rounded corners with a radius of ten pixels, as shown in the figure. Make sure that the indents from the edges of the main container are 40 pixels

Select the rectangle, go to the layer with the main container and delete the selected part. Now we can delete the layer with the rectangle that we used to create the selection, we will no longer need it.

Now we need to create arrows on the sides of the block. Later we will make the coder implement the slider for the portfolio on the jquery (* there is a malicious manic laugh *). To do this, create circles for 40 pixels radius on the sides. Remember to center them vertically on the block.

Important

Since we do not work with vector masks (and the parameter Fill (Fill) main container at zero), we need to temporarily change this to add new items.

So, set the value Fill (Fill) main container on 100%. Merge layers with circles for arrows with container (Ctrl + E). Again reset the value Fill (Fill). We get the desired result.

As you understood, we have now made these circles a part of the main container.

Now let’s do the arrows. You can make arrows using brackets from some font, and I will make my own.

Create a rounded rectangle. a radius of 3, a width of 20 and a height of 6 pixels. We are located where you want to see the arrow. Now we turn this strip on 45 degrees

Duplicate, reflect vertically. We arrange both strips as you need, relative to the block and each other. Now select both layers in the list and merge them by pressing Ctrl + E. Call the newly made layer “left arrow”.

Zero value Fill (Fill). Apply the following settings for InnerShadow (Inner shadow):

  1. Opacity (Opacity) – 50%
  2. Angle – 120
  3. Distance (Offset) – 2
  4. Choke – 0
  5. Size (Size) – 3
  6. Noise (Noise) – 0

Duplicate the layer, reflect horizontally and place it on the right side of the block.

The last thing we need to do in this step is to add a shadow to create a depth effect. Create a selection, as in the image below, fill it with a gradient from transparent to black.

To cut off the extra part of the gradient, namely the one that enters the block itself, select this block, go to the layer with the shadow and press Delete on the keyboard. Place the layer with the shadow under the layer with the block portfolio.

Step 10. Work on the portfolio block

Take a screenshot of some site from your portfolio, I used the one I made ryanscherf.net. Name the layer “screenshot”.

Add the following settings to the layer with the screenshot:

Duplicate the layer, reduce all styles on the duplicate. Rotate the screenshot 45 degrees, as we did earlier with the arrows.

We place it in the lower left corner of the block, making sure that the upper corner goes beyond the slider – again we will add depth, supposedly the picture “sticks out” from the block hole. Remove the bottom part that goes beyond the slider.

Now, when we have placed the picture as we need, let’s add a description. Nothing superfluous and tricky, but in style.

Add text, choose white color, or you can barely blue. Apply the same shadow settings as we used for the text navigation.

Highlight our text. We draw black rectangles, place them under the text, lower the opacity to thirty%.

To switch slides, use dots like in Apple products. For the active point, we apply the same layer styles to it as for the “active nav” layer.

Note: The reuse of styles for different elements not only saves time, but also helps to keep the design in a single key. For example, choosing repeatedly any shade, you can not pick up the exact same eye. There will be no obvious difference in the end, but people will feel: “Something is wrong!”.

Draw a circle with a radius of 20 pixels. I specifically make them more than usual, to make it more convenient for users to use them (sometimes, you miss the necessary link). Right-click on the layer “active nav” and click Copy Layer Style (Copy Layer Styles), select the layer with a point, right-click and poke Paste Layer Style (Paste layer styles).

We create the rest of the points, using the styles with the “left arrow” for them.

Step 11. Add “label”

We need to let users know that we post here, we need a title. Add a red ribbon using the same method as in the seventh step for active nav.

The only difference is that I slightly increased the opacity value for the shadow to make sure the ribbon looks like everything else.

To move on to the next step, we just need to add another dividing line. To do this, duplicate the “separating line” layer, which we created in the eighth step, and move the duplicate under the slider, a distance of 40 pixels.

Step 12. Main content block

To begin with, let’s do the markup again to make sure that we have three equal columns. Do not worry, but for this we need mathematics:

960px widths – 80px indents = 880px available space. There will be indents between the columns. 40px, means we are still taking away 80px.

Left 800px three columns. 800/3 = approximately 266px. In order to avoid excess space, we will make columns 267px – 266px – 267px. So, we figured out the theory, add lines to the markup, not forgetting the indents.

Step 13. “Last Entries” column

Create a new group in the list of layers, call it “Latest from the Blog”. In this group we will add all the layers for this column.

Add text. I used the font again Rockwell and applied the same styles to the text as for the navigation text.

Add some icon on different sides of the title. I used the standard form Photoshop, you can use anything.

In layer styles, activate Color Overlay (Color Overlay) with color # 0e696a. Apply the following settings for InnerShadow (Inner shadow):

  1. Opacity (Opacity) – 63%
  2. Angle – 120
  3. Distance (Offset) – 1px
  4. Size (Size) – 1px

It should turn out something like this:

Now add the text. Make sure that the color you choose is in the tones of the background. Play with shades as much as you need until the text fits seamlessly into the layout.

Add a shadow, but make some adjustments. Previously, we worked with lighter text, so we added a dark shadow to the upper right of the text, and now we will add a white shadow on the opposite side.

To designate points (for layout designers – li) I used circles, applying to them the styles that we used for the characters in the title of this block.

Step 14. Twitter recent posts

It’s all easy. Duplicate the “Latest from Blog” group, rename it to “Twitter Updates”. Move the content to the central column. Change the text to the appropriate.

Step 15. Subscription

Duplicate the group with twitter and move it to the right column. Let’s call the group “Newsletter”.

The type of text “list” is not appropriate here, only a description is needed here. Remember to remove the circles denoting items.

To create an input box, create a rounded rectangle. a radius of 10 and a height of 40 pixels. The width of the rectangle should be a block wide – in my case it is 267 pixels. Name the layer “input form” and apply the following styles to it:

Now add a button. For him, we will take the styles similar to the “active nav” styles in order to withstand the layout in the same way, as I mentioned above.

Create a rounded rectangle. a radius of 20, a height of 40 and a width of 140 pixels.

Copy the styles from “active nav”.

Duplicate the text from the navigation block, rename the duplicate to “Subscribe”. Center the text relative to the button. It should look like this:

Step 16. Copyright

Customers are always asked to add copyright immediately to the layout, and we must not forget about them. Add copyrights from below using the same processing technique we used earlier.

Conclusion

I hope that this lesson has expanded your abilities a little more. As you understand, all the techniques shown here are fairly simple, but elegant and quite practical, which makes their use convenient in a variety of layouts.

Here is what we got in the end:

Like this post? Please share to your friends: