HV-Designs.co.uk

April 16th, 2009 in Photoshop Tutorials by Richard Carpenter

BLOOpress Wordpress Mockup

• Share

Good evening everybody, its that time again…… time to enduldge into some wordpress. In this tutorial we’ll be creating a wordpress theme called “BLOOpress”.

The tutorial will again be split in to parts like the last one was, only this series will be slightly longer and in-depth. Too keep track of thr whole series i strongly suggest taking 2 seconds and subscribe to our RSS feed or follow us on twitter as these two services will be notifyied within 2minutes of the parts being released. The first part of course will be mocking up our wordpress theme in photoshop. So go ahead and load up photoshop, create a new document 900 x 1115 pixels. Fill your background layer with the color #202020, for this next part your going need a diagonal lines pattern. Create a new document 25px x 25px with a transparent background, select the pencil tool with a 1pixel brush and duplicate the image below.

Once your done duplicating the pattern goto “edit > define pattern” then label the pattern appropriatly. Close the pattern document and head back over to your orginal document, select the rectanglular marquee tool and create a small rectangle spanning the width of your document, fill with any color then add these layer styles.

You should have something like this.

Using the rectangular marquee tool once again draw another rectangle over the top spanning the width of the canvas and only half the height of the 1st rectangle, fill with the color white.

Set the layer opacity of the white rectangle to 3%. Label your blue rectangle nav and the white rectangle nav shine. Click your blue rectangle layer (nav) whilst holding down the CTRL key, this should load a selection, create a new layer directly above it labelled nav pattern. Select the paint bucket tool then at the top change forground to pattern and select the pattern from the drop down box.

Once you’ve selected your pattern fill the empty layer with your pattern. Double click your pattern layer and add a white “color overlay” then set opacity to 2%.

Underneath your nav layer create a new layer labelled header, select the colors #323232 and #212121. Select the rectangular marquee tool and create a selection underneath your navigation.

Select the gradient tool with a reflected gradient, drag the gradient from the middel outwards towards either the left or right. Double click your header layer and add a 1 pixel stroke using the color #292929. You should have something like this.

On your blue rectangle at the top add a small navigation mainly for important links you dont want in the main navigation. Ontop of the header add the wordpress title and slogan, on the word BLOO in the wordpress title apply the same layer styles as the top nav, including the lines pattern and the shine. You should have something like this.

On the right side of the wordpress title and slogan add an example search field with a go button. Add the same layer styles as the top navigation to the go button including the lines pattern and the shine. Fill your search field with the color #262626 and add a 1 pixel stroke using the color #323232. You should have something like this.

Using the rectangular marquee tool again draw another rectangle underneath your header, this will be our 2nd navigation in which will hold the buttons for a wordpress pages.

Fill the selection with any color then add these layer styles.

Place the navigation right underneath the headers stroke so you get this bevelled look.

Add the white half rectangle over your 2nd navigation just like we did with the top navigation, then add some dummy navigation text. You should have something like this.

Using the rectangular marquee tool create a rectangle 600 px wide and about 230 px high, fill the rectangle with any color then place it underneath your 2nd navigation. Add these layer styles to your rectangle.

You should have something like this.

At the bottom of the rectangle,add another rectangle the same width, apply the same layer styles as your very 1st blue navigation that we create at the start of the tutorial. Also add the lines pattern and the half white rectangle shine.

The image above will be the basis of our wordpress posts that will be displayed on the mainpage of our theme. All’s we need to do now is add some dummy post text. We’l start with a blue title with white text at the bottom underneath it. We’ll also add some post meta data in the blue rectangle at the botom. Leave a space in the main area for your thumbnail.

Too spice up our thumbnails abit we’ll be adding a nice border to them, to do this 1st create a square using the rectangular marquee tool. Fill with any color then add these layer styles.

Open up your desired example thumbnail, copy and paste it to your wordpress mockup, Make sure your thumbnail is about 6 pixels smaller all the way around than your thumbnail background image, you dont really need to get it that spot on at this stage as it will be done in CSS once we code it. You should have something like this

Duplicate your post and post content and place them underneath one another to simulate a wordpress theme. Underneath the last post add two buttons, for next post and previous post. Use the rounded rectangle tool with a radius of 10px for the buttons, then copy and paste the layer styles from your top navigation.

While were at the bottom of our canvas lets quickly add our footer. Duplicate your top navigation (the blue one), duplicate the pattern and the shine then drag them to the bottom of your canvas. Add your desired footer dummy text.

Now for the sidebar, on my last hv-designs wordpress theme i had a pink box in the sidebar with all my RSS feeds and follow me on twitter stuff. Were also going to be incorporating that into this wordpress theme. Select the rectanglular marquee tool or the rectangle tool and simply create a box in the sidebar area. Again copy and paste the layer styles from the blue navigation at the top.

Were now going to lighten up the box abit, select the elliptical marquee tool, draw out a fairly big ellipse. Fill the ellipse with the color white, then goto “filter > blur > gussian blur”. Blur by around 48pixels. Place the cirlce over the top half of the blue rectangle. Click your blue rectangle layer whilst holding down the CTRL key, this should load a selection. Click your white circle layer and goto “select > inverse” then hit the delete key.

Simply set your white circle layers blending mode to overlay. Now add your box title and an icon for each item, RSS, twitter and e-mail. Im using the the icons from the free icon pack from wefunction.

I then finished off my sidebar by adding a few of hv-designs sponsors. I didnt add to much into the sidebar as we’ll be doing that when we code it into wordpress. Your finish mockup should look like this.

Thats it all done, you’ve completed part one of this series. Like i say after all my tutorials, dont forget to subscribe via RSS and twitter.