How to create a distinguishable textured web layout in Photoshop

Posted by vkdt at Friday, May 22, 2015

Click on the image for a larger preview

DOWNLOAD SOURCE FILE

Become a Premium Member and get unlimited access to source files and premium resources for only 7$/month. Click here to learn more.

Introduction

To create a web layout is never simple. It’s important to consider several aspects simultaneously. What’s the site object, to whom is it direct, what’s the site aim (to sell, to teach etc etc)? These are some questions you shall ask yourself. In this case I wanted to create WeGraphics portfolio.

After have sketched on paper for a while, I had in mind how to structure the layout. Structure is a fundamental aspect of web design. I don’t want this tutorial to be about how to structure a site, but let me suggest you to spend the right amount of time to study how to organize your site contents.

Another important feature is to have always in mind that a layout design shall be turned into a coded layout. This is why I’ll show you how to create patterns instead of copy an paste full high-resolution textures. To have a sufficient knowledge about html and css is a “must” if you want to design themes.

The final result is not too light, because of the use of textures and the huge amount of details, but fortunately today internet speed connections allow us to give “less” attention to a site page weight.

After established the main structure of the layout, I started surfing css galleries finding for  inspiration. In this case I was striked by the elegance and cleanliness of Jeroen Homan’s portfolio, so I decided to take his site as a reference point.

Another important choice is the color palette. It’s another feature I suggest you to consider before start working in Photoshop. There are lots of useful tools that you can use to create a nice color combination (here is a list of these tools from webdesignledger). In my case I choose this color palette from colourlovers. At this point we are ready to start!

Step 1: creating the background

Our layout has a softly textured background, which is a 500×500 pixels image horizontally and vertically repeated. So let’s start creating a new 500×500 pixels document in Photoshop. Make sure to set 72 pixels/inch as resolution since it’s the ideal resolution for images destined to web.

Fill the background with the lighter brown of our color palette (#d9cfc0)

Paste in a paper texture. I choose one from our high-res paper textures set (paper15). Make the texture smaller and apply the sharpen filter (this will enhance image details). Desaturate the texture (shift+ctrl+U), switch the layer blending mode to multiply and reduce opacity to around 20%. You should obtain something like this:

This image will be the background pattern. So go to Edit>Define pattern and chose a title

At this point we can create our main canvas. For this purpose I downloaded the Photoshop template from the 960 Grid System site.

One of the grid purposes is to help designers to have a visual guide to organize better site contents. Open the Photoshop template with 16 columns and delete layer1 group. The 16 col grid group shall be always at the top. You can hide its visibility for the moment, but you will make it visible every time you need a guide to collocate contents into the layout correctly. Also I increased the height of the canvas to 1470 pixels (to modify canvas size go to Image>Canvas size). The screenshot below shows how the grid affected the structure of this design:

We can now fill the background with the pattern previously created. Select the background layer and go to Edit>Fill and chose the background pattern.

Create a new layer and use a large soft white brush to create a gentle light effect at the top of the layout. Reduce the opacity of this layer to around 30%. The aim of this step is to emphasize the top-left where we will put the logo and immediately below the tag-line. Also create another layer and paint over it using WG Grunge Brushes. This will add more details to the top area. Once the background is ready, group all the layers (select all the layers and press ctrl+G) and title this group “background”.

Step 2: the header

With the background complete, we can now switch to the top area of the layout. At first we will create a nice header background image. As for the main site background, we will create a custom pattern. Create a 20×60 pixels document and fill it with white. Now click and drag from the ruler to create an horizontal guide and place it at 50 pixels height.

Grab the Rectangular marquee tool and make a selection ad shown below:

Press alt and click on the “add layer mask button” at the bottom of the layer window. This will create a mask that will hide the selected area.

Create a circle with a diameter of 20 pixels. To create a shape with fixed dimensions you have to select the ellipse tool, then chose the dimensions in the ellipse options window from the options bar.

Place the ellipse at the bottom of the canvas. Now create a new pattern that we will use to fill the header background.

In the main document, create a new layer and make a selection of 60 pixels height in the top area

Fill this selection with the just created pattern and reduce the opacity of the layer to 50%

Create a 5 pixels height blue (#506271) rectangle and place it at the top of the canvas.

Step 3: adding logo and menu

Once finished the header background, we can add a menu on the top right. I used Arial and font size of 13pt. The color of the text is the same blue used for the top bar.

tip: if you want to align two or more objects, select them and use the align tools in the option bar.

For the logo, I started creating an ellipse with the following blending options:

Now create a new layer and ctrl+click on the ellipse layer to select its pixels. Go to Select>Modify>Contract and enter a value of 4 px. Grab the gradient tool (G) and create a gradient going from white (top) to transparent (bottom). Press Ctrl+D to deselect and reduce the layer opacity to 40%.

We can add now the text and put our logo into the ellipse. For the text I used Anivers, which is a free font created by the talented Jos Buivenga. I added to the text the same gradient of the ellipse. Also to give more depth to the text, I duplicated it, I moved the duplicated below and switched its color to white. Then click one time the right arrow and one time the bottom one to move the white text.

Step 4: adding the tagline

It’s time to add a tag-line to our site. This is probably the first thing that will capture visitor attention, so the best is to provide here the most important informations about the site.

I decided to use a combination of 3 fonts: Chunk for the upper text, Aniverse for the bottom and Gabrielle for 2 details (the ampersand and the comma). So place in your own text. Making the grid visible will help you a lot.

For the ampersand and the comma I used the same blue of the menu text (#506271). About the main text, I played with blending options:

Duplicate the text and move the duplicated layer below the original one. Eliminate all the layer styles and add only a white color overlay. With the move tool selected, press once the right arrow and once the bottom arrow. Now right-click on the layer and select “rasterize type”. Ctrl+click on the original text layer to select its pixels and press delete. Doing so we created the 1px right and bottom stroke.

The header is complete. Group all its layers and title this group “header”.

Step 5: Showcase of the last works

The first thing to do is to create a separation between the tag-line and the showcase of selected works. For this purpose we will add text and 2 lines. The font used for the text is Arial (18pt). To make the end of each line thinner I applied a mask. Select the line, click on the “add layer mask” button, grab the gradient tool, chose a gradient going from white to black and drag along the line.

Once again I duplicated everything and pasted back. After changed the color to white, I moved the duplicated layers bottom-right and reduced the opacity to 70%.

At this point we can create the containers for our portfolio images. So with the rectangle tool create a 220×194 pixels rectangle. Make the grid visible for a reference guide.

Let’s apply some layer styles to the rectangle.

Duplicate the rectangle and move below the duplicated layer. Eliminate all layers styles and add only a black color overlay. We want to create a soft shadow for the container. So rasterize the duplicated layer (right-click on the layer>Rasterize) and go to Edit>Transform>Distort. Move the top-left anchor point a little bit to the bottom-left as shown in the following screenshot:

Apply the gaussian blur (Filter>Blur>Gaussian Blur) with a radius of 4 pixels.

Now grab the erase tool and use a large soft brush to erase unwanted parts of the shadow and reduce a bit the opacity

Create a new layer above the container’s one. Ctrl+click on the container to select its pixels and fill the selection with a dark brown (#64594d). With the selection still active, go to Select>Modify>Contract and enter 1px as value. Hit delete. We created a 1px inner stroke effect.

Now you can create several containers and put inside them your portfolio images. Select all the gallery layers, group them and title this group “gallery”.

Step 6: Create the footer

We are almost close to the end ;-) . All what remains is the footer. In order to create a separation between the gallery of works and the footer, I simply duplicated the header background image and flip it vertically (Edit>Transform>Flip vertical). Then I switched the color to blue (#506271) and set opacity to 100%. Also I created a rectangle of the same color that I placed below.

In order to better integrate the footer with the textured background, I applied grunge brushes with a low opacity.

At this point I decided to divide the footer in 3 sections: Get in touch, connect with me and Twitter updates. The font is Arial (18pt)

In the first section we will put a contact form. So create a rectangle that will be the entry name field.

Let’s play with layer style to create a nice engraved effect:

Lets apply the same technique used for the tag-line text to add 1px of white stroke to the left and at the bottom. We can now create other fields and add a submit button (you can notice that I applied some grunge effect brushes to the button).

In the center section of the footer, I simply added the links to some social profiles. Near the links I placed nice grunge icons download from Tutorial9.

In the right section I created a shape using the custom shape tool and selecting the talk4 shape. Then I applied the same layer styles of the contact form fields. Also I put this Twitter icon created by mfayaz.

Almost everything is complete. The last thing was to add copyright. You can now select all footer layers, group them and title this group “footer”

Conclusions

We are at the end of this super-long tutorial! I hope you have learned something interesting. In case you have doubts or want to suggest something, you can use the comments section.