WordPress Layout #3

Create a new document 900 x 1200 pixels, fill your background layer using the bucket tool with the color #363636. Select the rounded rectangle tool, change the radius to 15 pixels. (see image below).

Create a rectangle about 800 or so pixels wide and about 55 pixels in height, fill with the color black. This rectangle is going to be our header and navigation all rolled into one.

Once your rectangle has been created and is postioned near the top of the canvas add these layer styles.

Your header/navigation should now look similar to this.

On your header/navigation add your site title and slogan to the left, then on the right hand side add your navigation.

In between each navigation element add a divider. To do this select the rectangular marquee tool, zoom in pretty close then make a one pixel line from top to bottom, fill it with the color then do the same again with another color. Make sure you place the lines side by side.

Select the rounded rectangle tool on a new layer UNDERNEATH your header/navigation layer create a big rectangle, the top half of the rectangle where the corners are we want them to be hidden underneath our header/navigation (see image below).

Fill the rectangle with the color #d1d1d1, then add this stroke to it.

Now your going to need an image of some sort, ive chosen a wallpaper which i got from HERE. Load the selection of the rectangle by clicking the rectangle layer whilst holding down the CTRL key. Open up your wallpaper, copy it too the clipboard. Head back over to your layout then goto “edit > paste into”.

On the right side of the wallpaper image create a rectangle using the rectangular marquee tool, then add these layer styles.

Duplicate the box to times and place one above and one below. You should have a total of 3 boxes. You will need to cut some of the bottom box to its rounded, just load the selection, inverse the selection and hit delete. The top box should be safely tooked behind the header/nav.

The three boxes will be featured posts on our wordpress layout, and the big wallpaper will be the big image version of it. On the boxes we just made add some example post content.

Underneath all your featured posts elements, select the rounded rectangle tool again and create a smaller version of your header/navigation rectangle. All the layer styles are the same apart from we DONT NEED the drop shadow.

Now create another rectangle like we did in the 1st couple of steps in the tutorial, where we tooked the top corners underneath the header/nav.

Add these layer styles to complete the effect.

Fill your content box with some example wordpress content.

Use the steps provide above to create more content boxes for your layout.

Do the same for the sidebar in the space on the right.

Your end result should look something like this.

The Pen Tool

PSDTuts has just released an excellent tutorial on photoshop’s pen tool. Its a very detailed well written tutorial that i think every photoshop user should read.

Then pen tool is a hard tool to master and i think its the only tool that people get stuck on. Take alook, have a read and give this tutorial some love.

Gaming Layout #4

Create a new document 850 x 850 pixels, fill your background layer with the color #27252a. Select the rectangular marquee tool and create a rectangle the width of your canvas and about 120pixels in height. Fill with any color then add this gradient overlay.

You should have something like this.

Next select the rounded rectangle tool and create a rectangle, dont make it the whole width of the canvas, leave about 30-40 pixels either side. Also chop off tjhe bottom half so the bottom half the rectangle isnt rounded. The rectangle itself need to align perfectly with the bottom of the 1st rectangle we created.

Add these layer styles to your rounded rectangle to match mine above.

Add your website title, logo and slogan to your header part of the website, the logo ive used is a shape from adobe’s custom shape libary. To the far right of the header add a simple search field with a search button.

On the header text add this drop shadow.

Select the rectangular marquee tool again and create a thinner rectangle underneath the 1st rectangle we created, also make sure the layer is underneath all other layers apart from background layer obviously.

Add these layer styles to complete the effect.

You image should now match mine. On a layer above the one you just created create another rectangle using the rectangular marquee tool, make it the same width as the header, and same height as the rectangle we just created.

Add these layer styles to complete the effect.

Add your navigation items to your nav bar, then add a divider between each item. The divider is made with two 1pixel lines next to each other.

Now were to create our content boxes, the first one we’l create will be a featured box where there will be a featured game. Select the rectangular marquee tool, on a new layer create a big rectangle underneath everything eles.

Add these layer styles to your content box.

Add your featured game, im going to be using GTA4. Add these layer styles to your featured image.

Crop your image to fit inside your box, also add your game header and some descriptive text. Ive also added a readmore button and a star rating system.

On the left side of the featured box create 6 smaller rectangles, these will be our side bar menu buttons.

Use these layer styles for your menu buttons.

Once you’ve added your layer styles make them glossy by adding a smaller white rectangle over the top with an opacity of 12%.

Using a little arrow shape from adobe’s custom shapes libary, add the arrow to the menu buttons also add your menu text. The color of the arrows is #cee01f.

You should have something like this.

Using the rectangular marquee tool create three more boxes (shown in green), add the same layer styles as your featured box.

Label them using the type tool. The two boxes underneath your featured box are going to display videos and upcoming releases. Add your content to these two boxes.

The little box that we created on the left under our menu items will be our news and articles. Create a box with the color #19171c underneath the box you previously created. Add this drop shadow.

Then add your news and articles.

Using the same tecniques and layer styles mentioned above, complete the layout with two more boxes, a login box and your footer.

You should have something like this.

Ripped Paper Effect Tutorial

Create a new document what ever size you desire im going to be using a canvas size of 600 x 250 pixels. Double click your background layer to unlock it, unlocking the layer will make it editable. Add a simple gradient overlay to your background layer, im going for a greeny gradient.

Create a new layer above your background layer and label it “grey canvas” fill it with the color #E1E1E1. Now goto “filter > noise > add noise” use the settings below.

Select the lasso tool and randomly create a hole in the grey canvas.

Hit the delete key once the selection has been made then add this layer style to the “grey canvas” layer.

You should have something like this.

Create a new layer above your grey canvas layer called “white canvas layer”. Fill the canvas with the color white, select the lasso tool once again and randomly draw another hole, i might help if you lower the opacity abit as you want it rougly the same shape but alittle bit bigger. Ive set my opacity to 35%.

Hit the delete key once the selection has been made then set opacity back to 100% then add this drop shadow using the settings below.

You should have something like this.

Now go HERE and download the paper texture. Once downloaded add it to a layer above the white canvas layer. With the magic wand tool select the hole you previously cut on the white canvas layer, select the paper texture layer and hit delete. Set paper texture layer opacity to 40%.

Next select the rectangular marquee tool and create a small rectangle roughly the same height as your ripped hole, fill with the color white. With the lasso tool just randomly cut around the edges of the rectangle once a complete selection has been made goto “select > inverse” then hit the delete key, heres mine shown in red.

Now add these layer styles also label your layer “torn paper”.

Slighty angle your torn paper layer using the free transform layer (CTRL – T). You should have something like this.

Underneath your torn paper layer create a circle using the elliptical marquee tool, fill with the color black. Goto “filter > blur > guassian blur” blur by 7 pixels and set layer opacity to 15%.

You should have something like this.

Thats it, now add something between your background layer and grey canvas layer.

Portfolio Layout #9

Create new document 900 x 870 pixels, set forground color to #4d92b9 and background color to #8bbfd9. Select the gradient tool with a linear gradient. Start from the top of the document and drag downwards to apply the gradient. Were looking to archieve something like the image below.

On a new layer create a selection using the elliptical marquee tool.

Fill the selection with the color white. Deselect the selection then goto “filter > blur > guassian blur” enter 80 as the blur amount.

In the top left corner of the canvas create a rounded rectangle using the rounded rectangle tool. Fill the rounded rectangle with the color white then add these layer styles.

Goto “edit > transform > free transform” rotate the rounded rectangle slightly like the image below.

Duplicate the rounded rectangle and rotate again.

Duplicate the rounded rectangle again and rotate once more.

Ontop of the rounded rectangle add your website title, slogan and maybe logo, to the right of the canvas add your RSS icons/feed information. Im using an icon from dryicons (icons not included in the PSD).

Select the rounded rectangle again, on a new layer create a long rectangle. Fill with the color white then with the rectangular marquee tool square off the bottom of the rectangle like the image below.

Now add these layer styles to your rounded rectangle.

Add your navigation text then add this layer style to the text.

Using the rectangular marquee tool create two 1 pixel lines next to each other. Its best if you zoom in quite abit. Duplicate the line across the rest of the navigation.

If you have only a short menu then fill the space with a search field. A simple search field can be created by creating a rectangle then add this layer style.

Next select the rectangular marquee tool and create two content boxes underneath each other. Right-click your navigation layer and goto copy layer style, right-click your content boxes then goto paste layer styles. Underneath your two content boxes add your little footer, just duplicate your navigation bar and flip it vertically by going to “edit > transfrom > flip vertical”. You should have something like this.

Theres nothing really special about the next few steps, only really adding your content to each box. Heres my content.

Thats it all done.

Portfolio Layout 4: The Code

Firstly your going to have to re-create the layout using this tutorial here, or just download the PSD. Once you have it design in photoshop we need to slice it up but 1st lets create our directory structure. Create a new folder on your desktop called “portfolio layout” then inside that folder create two more folders one called “css” and another called “images”.

Now we have our directory structure we can begin to slice it up, we dont need all the elements in the layout, believe it or not we will only be using chunks of the design. To create precise selections select the rectangular marquee tool and change to fixed width.

The first slice we need to make is for our background, if you PSD is the same as mine the lines pattern will be on a seperate layer, we need to merge these togther as one, so merge the lines pattern layer with your background layer. Select the rectangular marquee tool enter the values 8 pixels in width and 800 pixels in height.

Copy and paste the selection to a document of its own. save the file as “bg.png” in the “images folder”. The next slice we need to make is the logo on the side. Enter the values 128 pixels x 800 pixels.

Hide all the layers in the PSD (including background layer) apart from the logo elements, Merge all the logo elements toegther into one layer. Copy and paste to a document of its own with a transparent background save as “logo.png” in the “images folder”. The next slice is going to be the navigation, HIDE all layers apart from the navigation elements, you can hide the text on the navigation also as this wont be needed. Create a selection 666 pixels x 64 pixels on the navigation.

Copy and paste to a document of its own with a transparent background save as “nav.png” in the “images folder”. The next part will be our content box, we only need to make one set of images as the 3 content boxes will re-use the images. For the content boxes we need to make 4 images top, side, bottom and the middle area. Remember to always copy and paste to a new document with a transparent background.

With all your images saved you should have something like this.

Now for the coding, Open a blank text file using notepad then save it as “layout.css” in the “css folder”. Start a new blank HTML file in dreamweaver, also open up your blank CSS file. In your HTML document link your style sheet.

[sourcecode language=’html’] [/sourcecode]

Under the BODY tag lets map out our divs/class which we will refer to the stylesheet later. Please refer to comment code for notes.

[sourcecode language=’html’]

 

 

 



[/sourcecode]

Now that we have our layout mapped out. Lets start with the CSS. Lets set the whole document to have 0 padding and 0 margin this will ensure that the side header/logo will start and finish at the very top of our browser.

[sourcecode language=’css’]
*{
padding:0;
margin:0;
}
[/sourcecode]

Now lets set the styles for the body of the document.

[sourcecode language=’css’]
body{
background:url(../images/bg.png) repeat-x #000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: white;
}
[/sourcecode]

Were going to want to add some styles for our headers.

[sourcecode language=’css’]
h1, h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ABABAB;
text-transform: uppercase;
}
h1 {
font-size: 18px;
letter-spacing: 0px;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 5px;
border-left-width: 4px;
border-left-style: solid;
border-left-color: #98cd01;
}
h2 {
font-size: 14px;
letter-spacing: 2px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 5px;
font-weight: normal;
border-left-width: 4px;
border-left-style: solid;
border-left-color: #98cd01;
}
[/sourcecode]

The styles for our logo background and the main container.

[sourcecode language=’css’]
#content{
width:900px;
padding:0;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

#logo{
width:180px;
background:url(../images/logobg.png) repeat-y;
position:fixed;
top:0;
bottom:0;
float:left;
padding:0;
margin:0;
}
[/sourcecode]

The div for all our content which is on the right (navigation and content boxes.)

[sourcecode language=’css’]
#rightcontent{
padding:0;
margin:0;
width:650px;
float:right;
}
[/sourcecode]

Our navigation styles.

[sourcecode language=’css’]
#nav{
background:url(../images/nav.png) no-repeat;
padding:28px 0 0 0;
margin:0;
width:666px;
height:36px;
clear:both;
text-align:center;
font-size:10px;
text-transform:uppercase;
color:#98cd01;
font-weight:bold;
}
[/sourcecode]

Our content box styles.

[sourcecode language=’css’]
#textheader{
background:url(../images/textheader.png) no-repeat;
padding:0;
margin:0;
width:666px;
height:22px;
clear:both;
}

#texttop{
background:url(../images/textcontenttop.png) repeat-y top;
padding:0;
margin:0;
width:666px;
clear:both;
}

#textcontent{
background:url(../images/textcontent.png) no-repeat bottom;
padding:0 15px 0 15px;
margin:0;
width:636px;
clear:both;
min-height:172px;
}

#textfooter{
background:url(../images/textfooter.png) no-repeat;
padding:0;
margin:0;
width:666px;
height:30px;
clear:both;
}
[/sourcecode]

The styling for text within our content box and also our clears.

[sourcecode language=’css’]
.menu ul{
padding:0;
margin:0;
}

.menu li{
padding:0 5px;
margin:0;
display:inline;
}

.menu li a{
padding:0;
margin:0;
color:white;
text-decoration:none;
}

.menu li a:hover{
padding:0;
margin:0;
color:#FF066D;
text-decoration:none;
}

p{
margin:0;
z-index:200000;
padding-top: 5px;
padding-right: 0;
padding-bottom: 5px;
padding-left: 0;
}

/* Clears */

.clear{
clear:both;
}
[/sourcecode]

Design Studio Layout #2

Create a new document 850×900 pixels, select the color #3e3640 as your forground and #201f20 as your background. Select the gradient tool and drag a linear gradient over your canvas. Apply the noise filter by going to “filter > noise > add noise” enter the setting as in the image below.

Select the rounded rectangle tool and create a rectangle nearly the width of your canvas. Make a selection at the bottom of your rectangle about 50 pixels in height, cut and paste to a new layer. Hide your cutted part of the rectangle for later. You should have something like this.

Add these layer styles to your rectangle to complete the effect.

Move your rectangle to the top of your canvas hiding the top half of it where the rounded edges are.

Unhide your other part of the rectangle and align it up at the bottom of your rectangle.

Add these layer styles to your bottom half of the rectangle.

You should have something like this.

Add your website title, slogan and logo then with the rectangle marquee tool make a selection on your header like in the image below, fill the selection with the color white then lower opacity to 2%.

Do the same with the navigation.

Add your navigation text to your navigation, on one part of the navigation add a hover button.

The layer styles for the hover button are as follows.

I also add a little shine to the hover button like we did to the header and navigation in the previous steps. Using two 1 pixel lines add a divider inbetween each navigation item. Add a layer mask to the divider then drag a reflected gradient over the top to blend in the top and bottom half the divider.

Create a new layer above everything eles in your layers window, with the rounded rectangle tool create a rectangle like the image below.

Add these layer styles to the rectangle.

You should have something like this.

The the steps above and with the same layer styles add another big rectangle underneath the rectangle you just created.

On the 1st rectangle we created add our login and password fields, the icons used in this part are from dryicons.

Once we’ve done that begin to fill in your content box with some content. The icons next to the titles are from the custom shapes libary within photoshop.

The read more buttons are made using the rounded rectangle. Inbetween each bit of text in the above image add a divider the same way we did on the navigation. Once you’ve done that select the rounded rectangle tool again and create a small box for our photo gallery.

Fill the rectangle with the color #e8e8e8 then add a 1 pixel stroke to it using the color #cbc9ca. Repeat this process to add more content to your design.

When your finished you should have something like this.

Gothic Cross Tutorial

Before we start this tutorial download these brush sets and install them ready.
Swirls
Cracks

Create a new document 600×600 pixels, select the pen tool and create half a cross like this.

Right-click and goto “fill path” fill the path with the color black, right-click once more and goto “delete path”. Duplicate your layer then flip it horizontally by going to “edit > transform > flip horizontal”. Move the cross side by side then merge the layers together.

When moving them side by side make sure theres no line in the middle as this will cause problems when adding the layer styles. Select the elliptical marquee tool and create a circle like the image below.

Hit the delete key to make a cut into the cross, DO NOT clear the selection, move the selection and position it into the corners where the stakes meet hit delete each time, the result were looking for is in the image below.

Now were going to add the layer styles, this is where the cross takes shape.

You should end up with this.

With the swirls brush begin to add your swirls, add this layer style to all the swirls.

Carefully build up your layers of swirls untill you have something like this.

Select your cracks brushes and add some cracks to your cross.

Thats it all done, with some more imagination you could end up with something as simple as this.

Simplistic Multi-Tags Icon

Create a new document any size with any background color, select the rounded rectangle change the radius to 10 pixels.

Draw out a thin rectangle in any color, then goto “edit > transfrom > rotate” rotate it very slightly. Once you’ve rotated it added these layer styles and set opacity to 85%.

You should have something like this.

Select the elliptical marquee tool and create a selection like this.

Fill the selection with the color white, whilst holding the CTRL key on the keyboard click your blue tab layer. Goto “select > inverse” then hit the delete key. Set layer opacity to 12% and add a layer mask. Drag a linear gradient from the bottom towards the top.

Select the elliptical marquee tool once more and create a circle in the top left side of the tag.

Finished the step by adding this gradient overlay to the circle.

Add some content to your 1st tag like the image below.

Create more rectangles underneath your main tag. Use the following layer styles for each tag. Remember to rotate each rectangle slightly, use the circle we created previously as a pivit point.

You should have something like this.

On each tag add something different, ive chosen some text, photoshop icons and the hv-designs logo.

Video Sharing Layout #2

Create a new document 850×1200 pixels. Select the colors #141217 and #14171f then select the gradient tool, drag a linear gradient over your canvas. Goto “filter > noise > add noise” enter 2% in the amount, set distribution to uniform then stick a tick in monochromatic. Select the rounded rectangle tool and create a rectangle like in the image below.

Fill the rectangle with the color #20242d, add a 1 pixel stroke to the rectangle but dont do it the normal way by double clicking the layer style, instead goto “edit > stroke” use the color #20242d. Next add a layer mask to the rectangle, then drag a linear gradient over it, make sure background and forground are set to black and white. You have something like this.

Add your website title, slogan and logo. I created my logo by selecting a shape from photoshops custom shape libary. Add it to the canvas then whilst holding the ALT key on the keyboard tap the left arrow key, with every tap on the keyboard a new layer is created and the shape is shifted 1 pixel to the left. Merge all the duplicated layer together then drag the merged layer underneath your orginal. Add your layer styles.

Select the rounded rectangle tool with a radius of 10, create a small rectangle. The edges of the rectangle will both be rounded, select the polygonal marquee tool and make a selection like this at the right end of the shape.

Fill in the 2 corners to make the edge of the shape square.

Now for the next button you just want a normal rectangle, when you get to the end of the navigation duplicate and flip your 1st button, so you have something like this.

Add these layer styles to your buttons to complete the effect.

Next select an image from your favourite image source, add it within the box. Add a simple 1 pixel grey stroke to it. Select the pen tool and create a shape like this.

Fill the selection with the color white then add layer mask to it. Drag a linear gradient from the right to the left to give you a shine effect. Add a sample player button and lower the opacity.

Finish this section by adding more sample videos and some community items.

Select the rounded rectangle tool, and corner off the left side of the shape like we did for the navigation, Fill with the color #1e212a and add a 1 pixel stroke using the color #2f3541. On the rounded part of the shape add a rectangle over the top and fill with the color #ba267d. Inverse the selection and delete the excess. Add a small circle with a white heart in it used from adobes custom shapes libary.

Inside the content box add more videos and comunity icons., ive also added some hearts to give the videos some love 😉 .

Using the same method above create another content box like the image below.

Again add your content items. Create a rectangle at the bottom of your page add the same layer styles to it as the content boxes. Duplicate your navigation menu, logo, site title etc.. and place inside the rectangle. Underneath add your footer information.

Your final image should look like this.