Create a website template in Photoshop

Materials for the lesson:

Grunge brush


Create a new document. I used a small size for this tutorial. 760 x 760 pixels, you can make it bigger. Now let’s fill the background with a dark color. I used taupe. (# 47433a).

Add texture for the background.
You can add texture to the background in several ways. You can use filters or overlay photos and change the layer’s overlay mode. I added a filter noise (noise) Filter> Noise>Add Noise (Filter> Noise> Add Noise) with these settings:

Now we need some parts of the background to add details. First, let’s add grunge style brushes. You can find them in the archive or on the Photoshop-master website. Now after you have set the brush, on the new layer, click on it several times. Change the blending mode for the brush layer to Soft light (Soft light) or Overlay (Overlap) and you can reduce the transparency (20 – 50%). We start with translucent, hardly noticeable brushes:

Let’s do a little more (remember, use different brushes):

We paint in different places of the background:

Remember, use brushes with a little opacity or change the cut layer overlay to Overlay (Overlap) or Soft Light, to get a good mixing effect.

At this stage, the background looks like this:

Let’s finish the background – Add a few details.
Now I added a stamp brush to the background (you can make it yourself or download it):

Layer with a stamp set opacity thirty% or blend mode Soft light (Soft light)

Merge all layers into one Layer> Flatten Image (Layer> Flatten). After apply the filter Effect lighting Filter> Render> Lighting Effects (Filter> Rendering> Lighting effect).

And now we have to get a background like this:

Section for content.
Each site needs a section for content, let’s do ours. Make a rectangular selection in the center of the document. Fill it with color a little lighter than the background. The color that I used # 716a5d. I lowered the fill for the layer with the content section to 40% and added these layer styles:

Outer Glow (Outer Glow)

Inner Glow (Inner Glow)

We will have something like this:

Add a layer mask for our layer with a section for content: Layer> Layer Mask> Reveal All (Layer>Layer Mask> Show All) and use black grunge brushes. This will remove parts of our layer, but do not use an eraser, since you cannot edit or change what was done.

Making a text logo
Let’s add life to our site, add text to it. Let’s start by adding the main logo, text: “Group Name” at the top left. I used the font 4990810, and letter size 48pt. This is a free font, you can take it in the archive. Apply color to text # c9c4b8. And add two effects to the layer:

Drop Shadow (Shadow)

Gradient Overlay (Gradient Overlay)

And now we have this:

Looks good, right?
Now you can add an unnecessary but credible copyright text under the content area. I used the Tahoma font, 11pt, # 5c584e. More fit here Arial.

What else do you need for the site? Navigate of course!
Time to add navigation text or buttons.
The font I used is called Cornet, but I don’t remember exactly if it is free, you can find any calligraphic font on Photoshop-master. We write our navigation text (News, Tours, Discography, Biography, Gallery,), apply the following layer styles to the layers of the text:

Drop Shadow (Shadow)

Gradient Overlay (Gradient Overlay)

For each text layer, you can change a little fill

Finally, I added lines for each navigation row, using line tool (Tool line).
Translator’s note: this tool is in the same window as the Shapes tool.
Add lines the same style as the text.

Add content
We did a good job, and we did it somewhere.

So let’s add some content. We find a couple of photos and add them to “us”, change their size and place them on the place intended for the content.

I reduced my pictures to 140 x 100 pixels, and added two frames, 4 pixels inside (bright) and 2 pixels on the outside (dark). And finally, I added some text to the right of the pictures. I used the font Tahoma, 11pt / 12pt, and light / dark brown.

I also added some grunge buttons under the text. All you need to do is to draw a white rectangle, reduce its transparency and work with an eraser.

The finish! My congratulations.
So we are done. Well, at the end you can add some photos at the top left, change their blending mode and reduce transparency, work with an eraser.

Thank you so much for reading the lesson guys (and girls of course), I hope you enjoyed this lesson. You can see the result of the lesson in real size here.

Author: photoshopstar

Like this post? Please share to your friends: