ArtBox7.com

Create a grungy web layout (psd template) with a 3d look

In this tutorial I will create a grungy web layout/ photoshop template with a 3d look .
Final result:

Before to start I would like to remind you that here at ArtBox7 we have a shop with great products (vectors, photoshop brushes and psd templates). This are very helpful for our design needs and we think that might be useful for you also. Our Supreme Vector Set is the best choice

Please note that some steps dose require to  have Supreme Set in order to achieve the same result.

Let’s start it.

Step 1

Open photoshop and create a new document (Ctrl+N) with this dimensions:  990 pixels  by 1425 pixels with a transparent background

Step 2

Select Paint Bucket Tool (G) , choose as a background this color #97928b and fill your newly created document with it.

Step 3

Next I will add a texture found here and I will place it on my document. Set the blending mode to overlay, opacity needs to be 8% and fill 31%, like in the picture shown below.

Step 4

Select type tool (T) and add a text on the left side (at the top). This text it will serve as a logo for this web layout. I have used the following font: Marcelle Script.

Step 5

On the top right side (near logo) I will create a slideshow where I can future all of my products. I will select rectangle tool and I will  draw a shape having this dimensions 516 pixels by 206 pixels, as a color I use #9d9891

Step 6

I will fill this shape with few of my vector packs and I will add a big pack with this text:  Supreme Vector Set.

For Supreme Vector Set text  I have used “Neo trash ” font with  the following layer styles:

Step 7

Select Ellipse Tool  and create a circle:

Step 8

Then apply the following layer styles:

You should have something like this now

Step 9

Create a new layer, with the  Pen Tool ,draw a small triangle in the middle of our circle. Once you have created the triangle, right click on the triangle range drawing and select “Make Selection”. This will turn the pen path to a selection

Step 10

Fill the triangle selection with white and apply the following layer styles:

Here’s my result:

Step 11

Duplicate this button and place it on the right side of the slideshow, in opposite direction.

Step 12

Select rectangle tool and draw a rectangle at the bottom of your slideshow. Make sure you have selected black as a background and set the opacity to 46%. Add a slogan using “Marcelle Script” font. The slideshow is finished now. Here’s my result:

Creating the navigation bar

Step 13

Select Rectangle Tool (U) and create a shape underneath  logo and sideshow, something similar with this one. As a color choose: #dfa83e

Step 14

Select this shape and apply a distort transformation – Edit>  Transform> Distort

Step 15

Hold down Ctrl+Alt (opt+cmd on Mac) and gently start dragging the top left corner

Step 16

Next I will add a shadow to the navigation bar.

Select rectangle tool (U) and draw a shape similar to this one:

Step 17

Set the opacity to 12 %and move it upwards. Here’s my result

Step 18

Select Rectangle Tool and create a shape for the content area. I have used this color: #a99d8b

Step 19

Next I will try to create the 3d look for the navigation.

Select rectangle tool and create a similar shape using this color: #967840

Step 20

Now I will move that shape upwards, I will rotate it a little bit and I will place it under Navigation layer and main content layer .

Proceed in the same way for the right side.  Here’s my result:

Step 21

The navigation is almost ready. Using “Mia’s Scribbling” font I will add some text for the menu bar. For the selected page I will add 2 rectangles created with Pen Tool.

Here’s my result:

Creating “The main content area”

Step 22

Select Rectangle Tool and create a similar shape (this will serve as a content area -  where the text and images will be added)

Step 23

Having this shape selected apply the following layer styles:

Here’s my result so far:

Now it’s come the cool part.

As you already know,  we have  a set, called Supreme Vector  Set (this one includes all of our  vectors, photoshop brushes and web layouts – psd templates). It does includes commercial and personal license. (you can use them for your clients, customers or just to create your own personal stuff with them)

Step 24

From Supreme Vector Set, I will  select a brush stroke pack (you have many to choose from) and I will load  them in  photoshop.

Step 25

For this web layout tutorial I have used only 2 brush strokes. For the first one I have chosen this color : #c2bbb1.

Step 26

On the top of that I will add another brush stroke, for this, as a color, I have chosen  #e0a93e

Step 27

Now using the move tool (V) I will push them underneath content area

Step 28

To achieve the same effect on the right side you will need to follow the same steps.

Step 29

Using some ornamental vectors from Supreme Vector Set I will add some vector flowers  on the top left side:

Step 30

Using again Supreme Vector Set I will add some colorful  curve vectors and I will place them on the top right side and at the bottom.

The web layout is almost finished. I will need to create a search bar, a sidebar and to add some text and some ornaments (using the artbox7 vector packs)

The search bar

Step 31

Select Rectangle Tool (U) a create a shape similar with this one:

Step 32

Apply the following layer styles

Here’s my result:

Step 33

Select rounded rectangle tool, and create a small shape (height: 30px ) using this color: #dfa83e .This shape needs to be placed underneath our shape created on steep 29

Here’s my result:

Step 34

Next I will add some text (using the type tool – T) and I will place some vector elements (from Supreme Vector Set) to separate the content.

My result:

Final result:

Well this tutorial (web layout) is finished. I hope you have learned some new techniques and I invite you to bookmark this website, because some new and cool stuff will be posted regularly on this blog (especially tutorials).

Also if you didn’t have yet our Supreme Vector Set, I invite you to buy it , because in this way you will support us to create some cool and unique designs/tutorials, but in the same time you will get high quality vectors and photoshop brushes (currently we have more than 120 packs ~ approx 4000 vectors and photoshop brushes, all created by us)

Download here Download all templates