ArtBox7.com

Create a grunge blog layout in Photoshop

Hello and welcome to another tutorial, here at ArtBox7.com
Today I will demonstrate how to create a nice, grunge blog layout. I will use also our Supreme Vector Set

Full Preview

If you don’t know yet, here on ArtBox7 we have a shop with some cool and nice vectors & photoshop brushes. For a small fee of $99 you can get our Supreme Vector Set, this one is coming with  all of our design resources, including the source of our tutorials created on this blog.

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:  1024 pixels  by 1650 pixels with a black background (#000000)

Creating the top header

Step 2

Select Type Tool (T) and add your desired text for logo. I have typed ArtBox7.com, using the “28 Days Later” font.

Step 3

From Supreme Vector Set, I have chosen vector clouds pack to add some clouds to this layout.

I have used also Doodle Vector Pack 5 (to add an hand drawn feel to this layout).

Step 4

Select Type Tool and add 3 links on the top. For the links I have used the following colors: # cdc95e, # f6a025, #FFFFFF

Step 5

Using the Smudge Vector Pack I will add a background to the links created on step 4

Creating the navigation

Step 6

Choose a Brush Stroke from our Supreme Vector Set and place it in Photoshop.

Step 7

Apply the following layer style to Brush Stroke Vector

My result:

Step 8

Using the Type Tool (T) I will add some links on the navigation bar

Creating the Featured Product Area

Step 9

We will goanna use again a vector pack from our Supreme Vector Set. This time I will use Grunge Vector Frames.

Place it in Photoshop and start playing with it till you obtain something similar with this:

For this frame I have used this color: # 58564a

Step 10

From Supreme Vector Set, select Sunburst/Sunrise Vectors and place it in Photoshop

Please make sure that the sunburst layer is above Frame Vector layer

Step 11

I will apply the following layer styles to Sunburst Vector

My result:

Step 12

Next I will place an image with few vector packs in the middle of the sunburst layer and I will add some text using the Type Tool (T)

Creating the content area

Step 13

Select Rectangle Tool (U) and create a shape. Mine has the following dimensions:  876 pixels by 943 pixels, and as a color I have chosen # d1c49f

Step 14

Select Rectangle Tool and create a small shape between Featured Product Area and Content Area. This shape will serve as a separator between those 2 areas. As a background I have used black (#333333)

Step 15

As you can see, this shape is a little bit to darker that’s why I will set the opacity  to 22%

My result:

Step 16

To create a nice effect for the content area I will need to use  Supreme Vector Set, I will chose  again Grunge Vector Frames

I will select an vector frame from this pack and I will place it on the content area. After few small arranges (modifying the width and height ) I have come to this:

Step 17

The result is good but I don’t like because the color is too prominent, that’s why I will set the opacity for this grunge frame layer to 26%

My result:

Next I will concentrate on content. Because this will be a blog layout I will split the content area in two. The left side it will be reserved for posts and the right side it will be a sidebar.

Step 18

First I will create an separator between posts and sidebar. Because this is a grunge blog template, I will go ahead and I will create a grunge separator.

Again we will use Supreme Vector Set more exactly we will need a brush stroke vector. I will select an element and I will place it in Photoshop.

Step 19

I will rasterize the vector because in the next step will be to cut it.

To rasterize a vector, right click on his layer and here choose “Rasterize Layer”

Note: You can’t cut a vector in Photoshop without rasterizing it . On the other hand if you will rasterize an vector you will not be able to make it bigger than it is (you can’t make the rasterized vector bigger than it is without losing quality – because the element will become blurry and pixelated)

Step 20

I will select Rectangular Marque Tool and I will make a selection like this one:

Step 21

Right click on selection and choose Select Inverse

Step 22

Hit Delete Button on your keyboard. You should obtain something like this:

Step 23

Next I will add content on the left side using the type tool.

I need to mention that here I have used from Supreme Vector Set the Speech Bubbles Vectors . You will see them on the comment link.

Step 24

On the sidebar the only thing witch needs explanation is the search bar. Select Rectangle Tool and create a similar shape:

Step 25

Apply the following layer styles:

Step 26

Select Rounded Rectangle Tool with a radios of 4px. As color choose: # e45a0a

Step 26

Move the shape created on step 26 underneath the shape created in step 24. Then add some text using the Type Tool (T). My Result:

Creating the footer:

The footer is a simple task if you have Supreme Vector Set. It’s simple because for the footer I have used only vectors. The mushrooms are from  the doodle vector pack and for the grasses I have used this vector grass. You will find both of this vector packs on the Supreme Vector Set.

Final Preview

Well Congratulations if you have created a similar psd template. If you would like to see more tutorials on how to use our vector packs, or just to learn some new techniques I invite you to bookmark this website because new tutorials will be posted at least one time per week.

Download here Download all templates