Gaming Layout #3

Create a new document 950 x 1160 pixels fill your background layer with the color #161616. Create a rectangle using the rectangular marquee tool about 190 pixels in height and about 900 pixels wide. Fill with any color then add these layer styles to it.

Your rectange should look something like this.

Add your websites title, slogan and logo to your rectangle aswell as a shine that goes across your header by using the pen tool, you should all no how to do this by now. Once you’ve done that your rectangle should look like this.

Now your going to need a stock image like this for this next part. This image i got from HERE

Once you have your image paste it inside your rectangle, to do this copy your image to the clipboard then click your header layer whilst holding the CTRL key to make a selection, then goto “edit > paste into”. Your image should now be confined to the boundries of your header rectangle. Move your image into position then set layer blending mode to “luminosity”. Add a layer mask to your pasted image then drag a reflected gradient over the brightest part of the image.

Select the rounded rectangle tool and create a rectangle behind your header title text, set layer fill % to 8% and add a white stroke to it. You should be left with this.

Underneath your header rectangle create 2 thinner rectangles (navigation size) making sure its the same width as the header, also make sure they are on seperate layers, label them nav1 and nav2 (nav1 being at the top).

On the nav1 layer add these layer styles.

Add these layer styles to nav2.

On top of each rectangle add another rectangle colored white the same width but half the height. Set layer opacity to 4% these rectangles will act as shine. Your two rectangles should now be transformed into this.

The two rectangles will be our two tier navigation system so add some main navigation items at the top then add some sub items at the bottom. Also inbetween each item ad some dividers, they are made by adding two 1 pixel lines next to each other, fill each 1 pixel line with a darker and lighter shade of color which matches your navigation.

Now to make our hover styled button, select the rounded rectangle tool and draw around an item in your top navigation, im going to use the news item, fill with any color then add these layer styles to it.

You should have something like this.

Now were going to create our content box, select the rectangular marquee tool and create a small rectangle fill with the color white.

Add these layer styles.

Duplicate this layer and move down about 400 pixels, inbetween the two rectangles add a game related image or just a white box.

Ontop of each rectangle create a smaller rectangle half its height fill with white then set layer opacity to 3%.

Now using a diagonal lines pattern fill each rectangle with the pattern set the lines layer opacity to 2%. Ive included the lines pattern file in with the PSD download. Also lable your content box.

Following the steps above create more content boxes as needed, also add an advert or two.

Fill your content boxes with content, and game related images.

Now for your footer, simple duplicate your header elements, then move to the very bottom, add some copyright text. easy peasy, your finished product should look similar to this.

Thanks for reading. Dont forget to subscribe to our RSS.

Interior Design Layout

Create a new document 850×1300 pixels, fill your background layer with the color black. Select the rectangular marquee tool and create two rectangles on top of each other using the colors #2e2e2e and #202020.

Leave a 1 pixel gap inbetween each rectangle, place the rectangles at the very top of your canvas, merge both rectangles into one layer. Now goto “filter > noise > add noise” use the settings below.

Now add a layer mask to your layer, set forground and background to black and white, select the gradient tool using a linear gradient start from the bottom of the rectangle and drag up. Right-click your mask on the rectangle layer and goto “apply layer mask”. Repeat the steps above only this time from the top of the rectangle.

Continuing using the same process as above only this time select a reflected gradient, set forground color to white and this time drag from the middle of the rectangle towards the edge either left or right, choice is yours. You should then have something like this.

Add your site title and logo, the pink color i used is #ff0072 and the font is used is “swatch it”.

Underneath your background jazz and site title add your navigation text. On this navigation im going to use a two tier one, so i add a rectangle around one of the navigation items then add a long rectangle underneath.

The little arrow on the 2nd navigation was made using the pen tool. For this next part your going to need some interior design stock images. Add a nice looking interior design stock image underneath your navigation, add a 1 white pixel stroke to the image.

On top of our big image add two black rectangles towards the bottom. Also add a 1 pixel white stroke to each of the rectangles then lower the “fill” to 60%.

Fill these boxes with some information of your choice. Underneath the big image add a further two interior design style images and then a black square at the end, add a 1 pixel white stroke to each of them.

In the end box add some more information, then select the rounded rectangle tool and create an equal square rectangle.

Fill your rectangle with the color black then add these two layer styles.

Now hide ALL YOUR LAYERS apart from the rectangle one, create a new blank layer above it then goto “layer > merge visable” make sure you have the rectangle layer selected. UNHIDE all your other layers. Add a layer mask to your rectangle and blend it in from the left side. Now duplicate your rectangle layer 3 times and place like the image below.

Fill these rectangles with some products related to interior design. Now for the footer duplicate your background jazz, site title and logo then move right the bottom of your canvas, add your copy right information.

Your end product should looke something like this.

Simple Glass Effect Tutorial

For this glass effect were going to be creating a glass picture frame with a photo in it. Create a new document 600 x 450 pixels, now were going to need a busy background to see the effect, black or white just wont show it very good. Im using a wooden floor background. Select the rectangular marquee tool and create a big rectangle on the canvas.

Add these layer styles to your rectangle.

Your rectangle should now be transformed into someting like this.

Select the polygonal lasso tool and create a selection like this (see image below), this will be a simple shine across the picture frame.

Fill the selection with the color white and set layer opacity to about 2%, this will make the shine just visable as we dont want it to be too visable. You should have something like this.

Now were going to create the slot where the photo goes, select the rounded rectangle tool and create a rectangle in the center of our picture frame, once you have your rectangle select the pen tool right-click on your canvas and goto “fill selection” make sure you fill it with the color white.

Now add these layer styles to your rounded rectangle.

Your inner rectangle should now look like this.

Make a selection on the rounded rectangle by click the layer it is on whilst holding down the CTRL key on the keyboard. Open up your photo and copy it to the clipboard, go back to your orginal canvas then goto “edit > paste into” your photo should now be pasted within that selection. Re-size/Re-align your photo to fit into the rectangle.

Add this layer style to your photo layer.

Selec the pen tool and create a selection like this.

Fill the selection with white then set layer opacity to about 12-15% your final image should now look like this.

Highligther Pen Tutorial

Create a new document 600×400 pixels with any background color, create a new layer above your background layer called “nib pt1” (nib part one). Select the polygonal lasso tool, firstly create a rectangle fill with the color black. Still with the polygonal lasso tool make a diagonal cut on the left chopping off the end of the rectangle.

Create a new layer labelled “nib pt1 shine”. Select the pen tool and create a line (shown in the image below) select a 2 pixle white brush then re-select the pen tool, right-click on the canvas and goto “stroke path”. Add a layer mask then drag a linear gradient from the bottom towards the top.

The result is shown in the image below.

Create another new layer labelled “nib pt2” select the rounded rectangle tool then create a rectangle joining off from the nib, fill with the color black then cut the back end off the round rectangle.

Create a new layer labelled “nib pt2 shine” create a line across “nib pt2” make the line about 2 pixels wide and the length of the shape on “nib pt2” layer. Fill with the color white.

Create a new layer labelled “nib pt3”. Select the pen tool and create a shape like this (see image below).

Fill with the color black by right-clicking and going to “fill path”. Your image should now look like this.

Create another new layer called “nib pt3 shine” then again with the pen tool create a shape like in the image below. Fill with the color white then goto “filter > blur > guassian blur” blur by anout 5 pixels. Once you have blured the shape, press CTRL + T and resize it abit.

You should have something like this.

Create a new layer labelled “nib pt3 end”, select the rectangular marquee tool and just cap off the end of the nib. Make the rectangle a little bit bigger than the shape we created. Then at the top create that little white line again similar to the one we created earlier.

Now with the rectangular marquee tool create 2 rectangles on 2 seperate layers, the 2 rectangles will be one for the body of the highlighter and one for the end of the highligher. Ive colored my body in pink but this will change when we add the layer styles.

Now we have our basic shape for our highlighter pen. We Now need to add a drop shadow to each one of these layers, nib pt1, nib pt2, nib pt3, nib pt3 end, the body of the pen and the end of the pen.

Your image should now look like this.

Now its time to add some layer styles to the rest of the pen, starting with the “nib pt1” layer. Double click your layer and add these two layer styles.

Head straight over to the layer with the body of the pen on it and add these layer styles.

Your pen should now look like the image below. Also you dont have to use pink, just change all the pink on the layer styles and add your own color.

All thats left to do now is add some text onto our pen, here some pictures of the final result in different colors.

Thanks for reading. 😉

Custom Hard Drive Icon

Create a new document 600×460 pixels with your desired background, create a new layer called “hd_top” select the rounded rectangle tool, once you have the rounded rectangle selected we need to change a few options, change the selection type to “shape layers” and change “radius” to 20 pixels.

Select the color black then drag out your rectangle whilst holding down the shift key, this will ensure we get a nice even square. Goto “edit > transform > perspective” drag the top right or left anchor point inwards untill you have a look like this.

The rectangle we just created will be the top of our hard drive so lets give it abit of depth and add these layer styles.

The gradient overlay is not really important you can change that to any color you like. You should now have something like this.

Duplicate your layer “hd_top” then drag the new layer underneath its orginal, right click it and goto “clear layer styles” now add a color overlay using the color “#5e5e5e”. Name this layer “hd_middle” then move it down a couple of times.

Duplicate the “hd_top” layer then right click and clear the layer styles. Now whilst holding the “ALT” key on the keyboard press the down arrow key about 40-42 times. Now doing this will create 40-42 new layers and with each press of the down arrow key it shifts it down 1 pixel. HIDE all layers apart from the ones you just duplicated, then goto “layer > merge visable” the 40-42 layers should now have been merged into one layer, unhide all your other items then drag the layer underneath “hd_middle”. Name this new layer “hd_bottom”.

Now add these layer styles to “hd_bottom”.

You should be left with this.

Now we have our basic shape for our hard drive, now its time to dress it up with some extras, firstly create a new layer above “hd_top” called “hd_shine” select the pen tool and create a selection like this.

Fill the selection with the color white then set layer opacity to about 15%.

Now were going to make the indent in the top of our hard drive, duplicate “hd_top” then press “CTRL + T” now whilst holding down the shift key resize it and place in the middle of the hard drive. rename this layer “hd_indent”.

Add this inner shadow to your indent shape.

Now set layer blending mode to “lighten”, your indent layer should now look like this.

Select the rectangular marquee tool and create 2 small squares, make sure the two squares are on seperate layers labelled “light 1 on” and “light 2 off”.

Add these layer styles to your “light 1 on” layer.

Add these layer styles to your “light 2 off” layer.

You should now have something like this.

Now create a long rectangle in the middle, and a small square on the right. Add these layer styles to these two items.

On the small square change the color overlay to white, you should have something like this.

Inside the long rectangle add a 1 pixel yellow line then add a 2 pixel dark grey line using the rectangular marquee tool. In the small white box add 4 dots. (see image below).

To finish the icon add a simple name for your hard drive.

Personal Portfolio Layout #2

Create a new document 850×790 pixels, fill your background layer with the color #080808. Create a rounded rectangle by using the rounded rectangle tool, make it slighly smaller than 850 pixels so its fits nicely on the canvas. Place the rectangle at the very top.

Find yourself a nice image to use as your header, im going to use the same image i used in one of my previous tutorials located HERE. Copy and paste your desired image to the clipboard. Head back over to your canvas click your rectangle layer whilst hold the CTRL key on the keyboard, this will load the selection. Now goto “edit > paste into” you image should now be inside the rectangle, you can still resize the image while its inside the rectangle, resize the image to suit. Heres mine.

Ive also desaturated my image to make it black and white, ive also added some layer styles which are listed below.

Select the rectangle marquee tool and create a small selection to the left of the header.

Fill with the color white and set opacity to 12% now add these layer styles to it.

Add your website title and slogan inside the box. Now select the rounded rectangle tool and create a your navigation under your header, make sure the two shapes align nicely on the sides. Add these layer styles to your rectangle.

You should have something like this.

Create a selection on top of the navigation like in the image below, fill with the color white then lower opacity to about 18%, add your navigation text, and add two 1pixels lines between each bit of text for a divider.

Thats the header and navigation sorted now for the content boxes. For this bit your going to need some diagonal line pattern, im not going to show you how to make the pattern as there are loads of tutorials out there already for that, althou i shall include the pattern file in the PSD download. Select the rounded rectangle tool and create a square.

Fill with the color black then delete the rounded part from the top of the square using your desired cutting tool then add these layer styles.

You should be left with this.

Still with the rounded rectangle tool create a selection like this.

Fill with the color black then add this stroke to it.

Now click your rounded rectangle layer that you just created (the small one out the two) whilst holding the ctrl key on the keyboard to load the selection, create a new layer and select your diagonal lines pattern, fill the selection. If your diagonal lines are black you might want to add a white color overlay to it, then lower opacity to around 8%.

Repeat the steps above to create more content boxes. Im going to add a further 3 to this layout.

Label your content boxes with the type tool, ive used a small arial font using the colors white (ffffff) and the green color (#afd107).

Now begin to add your content to each box.

Now for the footer, select the rectangular marquee tool and create a rectangle across the bottom of your canvas fill with the color black then add a simple stroke layer style.

Fill your footer box also with the diagonal lines pattern and add your copyright text.

To the right of the footer add a 1 pixel green line (#afd107).

Now select a small arrow from photoshop’s custom shapes libary and add that to the line, fill the arrow with the same green color as the line then add a black 1 pixel stroke to it.

Thats it all done.