Artists Page – WP Blog Theme

Hello everybody! As my first tutorial posted here, will be making this personal Artists Page in Photoshop. I’ll guide you step-by-step in completing your own design. Although, it’s a wordpress theme, later on I’ll make a full coding tutorial so you can start blogging right away. We begin by finding the necessary resources for our design.

Step 1

There are a lot of  websites out there with very good freebies and graphics that are useful to us.  I’ll point out some examples and I will also be giving you the resource pack I used when creating this theme. So, you need:

• Paper and tape
• Urban vectors
• Brushes: circles, music notes

Blog.SpoonGraphics

HVDesigns

Smashing Magazine

Step 2

Start your photoshop and create a new canvas with these settings.

Step 3

In the layers pallet you have a background layer.

Take the Paint Bucket Tool (G) and fill the layer with color #dcd4b9 .

Step 4

Now, we’ll add some texture to the background. Double click the background layer to make it a new layer and unlock it.

Go to Filter – Convert to Smart Filters.

Rename the layer to Background. Once more, go to Filters – Texture – Texturizer… and apply these settings:

The reason we are doing this is that you can adjust the opacity of the texture by double clicking where it says Smart Filters, below the background layer and in the future, if you changed your mind about the setting you used for the texture, you can come back and double click the Texturizer layer below the Smart Filters layer.

You can play with the setting  until you are satisfied with the resault.

Step 5

Make a new layer and name it Dirt. Go to Filter – Render – Clouds. Desaturate the layer by going to Image – Adjustments – Desaturate. You can render clouds until you like the preview.

In the Layers Pallet, with the Dirt layer selected, change the Blending Mode to Color Burn and the Opacity to about 30%.

Here is my result:

Step 6

From the resource pack, open paper.psd and drag the paper content background layer to the theme’s canvas. Place it in the middle and about 160px from the top. To measure, enable your Rulers from View – Rulers or Ctrl + R from keyboard. Remember that the zoom of your document should be at 66,67%. Drag a guide line from the top
ruler like so:

Let’s put some shadow to the paper. Right click on the paper layer and select Blending Options… Check the Drop Shadow box and type in the following settings:

I think that the paper is too white so I’ll apply a Photo Filter to it. With the Paper Content Background layer active, hold down the Alt key and select from the Create new fill or adjustment layer – Photo Filter.

Check the Use Previous Layer to Create Clipping Mask if unchecked.

Select the Color option, use 716c49 as color, Density to 50% and Preserve Luminosity checked.

Here’s my resault:

Step 7

From the resource pack, I used the Urban Vectors for the top graphics (urban_vector.ai). Open them in photoshop and with the Lasso Tool (L) select the ones that you want to use in your design. Copy and paste them to the theme we’re designing. Make a Group in the Layers Pallet and move them in there so we’ll be organized. I named my Vector Top.

Arrange them on the canvas as you like: Free Transform, Rotate, Resize… etc.

The idea is that you don’t want those with drips to be visible because they are at the top so we’ll hide them under the paper. Here’s mine:

Let’s add color and shadow to some of the vectors. Use the settings when doing so:

Colors that I used are: blue 82cee7 , red bf0d0d and yellow ffcd00 . My result:

Then I used the Brush Tool (B) with spots or circles and some zig-zags for the vectors background on a new layer and turned down the opacity to 80%. My final result:

Step 8

Repeat step 7 only this time put your vectors in a group called Vector Bottom. In the tools bar select Custom Shape Tool (U) and in the Shape options load the shape file (SS-urban-designs-vectors-sh) from the resource pack.

Your Shape Tool should have these settings:

On new layers draw some of them that have splatters and drips with color 575448 and opacity of the layers 65%. We’ll use them as background for the Vector Bottom. My result:

Step 9

Above the Paper layer, with the same circles brush that you drew the background for the Vector Top, make a new one, name it Spots, and draw some of them from the right
bottom corner to the top left corner with color cdd6c0.

Don’t worry if you drew some off the paper. To correct that, hold Ctrl key in the Layers Pallet and click on the Paper Content Background layer’s thumbnail.

You should see the selection around the paper. With the Spots layer still active, hit Shift + Ctrl + I to inverse the selection and press Delete. Turn down the Fill of the Spots layer to 50%. The result:

Give the layer a Photo Filter (Step 6) with color 666666 and these settings:

Step 10

In the bottom right corner of the paper, we’ll make a microphone and some music notes. Make a new group, name it Music Notes. Select the Brush Tool and load the music notes brushes (Music_Brushes) just like we did in the Shape Tool Options, from the resource pack. Draw a note with black color on a different layer each time so you can arrange them later. Use the following setting:

Set all the note layers to Blend Mode Overlay. Then take the mic vector from the pack and place it on a new layer inside the Music Notes group. Color it with 98672e. Here’s my result:

Step 11

Let’s put some content on the paper. Make a new group and name it Post Content. From the pack, load the Watercolor vectors (BB_watercolor_vectors), select whatever you like. This is for the title background. Drag it to our canvas, in the group and put a Color Overlay ccbda4 on it from the Blending Options.

After, load some hand-drawn icons from the pack (sketchIcons) for the Date and Comments. Give them a Color Overlay 98672e .

Make the thumbnail border so that it also looks like it’s handmade. Load the doodles brushes from the pack (t9-creative-doodles), and with the color 98672e select the one that looks like a line and draw a square.

Add some text to it so that you know how it look so far.

Create the Continue Reading… and Navigation with some arrows and circles. Very simple. Add some tape too.

Step 12

For the Footer, create a group and name it Footer. Load from the pack the Paper.psd and drag to canvas the paper footer layer. Stick it with some tape. Put a Photo Filter like we did in Step 6.

Next, put some links to it. Use the same hand-drawn icon like in the previous step. Add the copyright text to it and how designed it.

Step 13

For the final step, make a new layer above the Background layer, set fcfcfc as foreground color. Load Grunge frames brushes (grunge_frames) from the pack in the Brush Tool, draw it on the layer and make it width enough to fit the canvas (1000px width – 1130px height) with Free Transform ( Ctrl + T ). Give it a Inner Shadow from the Blending Options:

My Finished Design

I’ve also made the other pages, About and Contact. The icons I used are also in the resource pack.

You can also download the PSD for this design, complete with the 2 other pages. Hope you liked it. Share it with others. Leave your thoughts about the design.