HV-Designs.co.uk

November 28th, 2010 in Photoshop Tutorials by Aaron

Photoshop Gallery Website Layout Tutorial (CS5)

• Share

Today I am proud to bring you another Photoshop Tutorial! We will be creating a simple product sales page with gallery addition.
This tutorial is going to be classified as an Intermediate Photoshop tutorial as we will be using more styles and custom shaping and images than in our other tutorials. Your final image will look like this:

Resources

Shine Icon Set by DryIcons

Social Media Icon Set by Aaron Nichols

Four Color Logo by Aaron Nichols

Four Color Menu by Aaron Nichols

Getting Started

Start out by creating a new document 1100*1220

Fill your document with white. Now grab your rectangle marquee tool. Choose Fixed Size for your style and draw out a rectangle 1100x20px. Now create a new layer and fill your selection with black.

Now grab your rectangle tool again and draw out a rectangle of 275x20px. You are going to want to create a new layer, fill it with black. You will want to line up your new layer to fit right at the end of your first line. Now space it 60px from the right side of our document.

Top Navigation

Alright, now grab your type tool. We will be using the font Franklin Gothic Medium, Color White, 14pt. Type out “Login” and place it in your black box we just created. Space it 8px from the bottom and 15px from the left.

Grab your type tool again. This time change the font size to 18pt. Type out a “|” and space it 10px from the end of our login text.

Change the text size back to 14pt and type out “Sign Up”. Space it 8px from the bottom and 10px from our “|”. Like this:

How exciting right? Well, no its not exciting at all yet, but it will be. Grab the shopping cart icon (16×16)that we downloaded earlier. You will want to space it 8px from the bottom of our black box and 65px from the left of your Signup Layer. Now add a Color Overlay of White to the shopping cart layer.

Now grab your text tool again. To refresh we are using the font styles: Franklin Gothic Medium, Color White, 14pt. Now type out “Shopping Cart”. Space it 8px from the bottom and 15px from the right of our box. Like so:

Creating the Main Content Layer

Now create a new layer. With this layer selected grab your rectangle marquee tool and create a fixed size of 1100×435. Fill your selection with any color as we will be adding the following layer style to it:

Ok, so from here we are going to be working in an apparently random pattern, but it will all work out in the end trust me.

So first lets add our logo. You can use your logo or download THIS free logo created by me for the sole purpose of this tutorial.

(If you are not using our logo skip this part)

Open up the PSD file and hit Ctrl+I and re-size the image to 50×55. Now drag over the “logo” group and place on our document. Space it 20px from the bottom of our black layer and 90px from the left of our document.

Now grab your type tool and use the Font RockoUltraFLF at 36 pt with a color of #221209. Using this font color will give our document a letterpress style. Center it vertically with our logo image and space it 20px to the right of our logo.

Alright, now to set up our search bar. Create a new layer. On that new layer grab your rectangle marquee tool and make a selection of 275×40. Fill the selection with white and apply the following layer styles:

Now line up our search bar with our black user navigation box and space it 15px from the bottom of the user nav.

Ok, now create a new layer and make a selection of 80×40 and fill it with black. This layer should match up just inside of our search bar and go just to the very end of it. Like this:

Now add the following layer styles to your object:

Alright, now grab the font Myriad Pro, size 18pt, color #151515. Now type out “Search” and center it on our Search Button.

Now we will be grabbing our navigation downloaded above from my Friday Freebies #4. Open up the PSD document and resize your image to a width of 950px. Drag over the Menu group (the plain menu group). Space it 71px from the left of your document and 35px from under the search bar.

Featured Image

Alright, now to set up our featured image. The first thing we are going to do is grab a pic of our most recent work and shrink it down to be 550px by 565px.

Drag the layer over to our PSD document and space it 25px from the bottom of our navigation and 70px from the right of our document.

Now apply the following layer styles:

Alright, now we need to set up the navigtion for our slider. This will be a matter of a few shapes with some layer styles.

Grab your ellipse tool and create a circle that is 25px by 25px. Fill your circle with #6a4126. Space it 45px from the bottom of our brown layer and 10px from right of our latest work.

Duplicate your shape four times and space them 5px from each other. Set the duplicate layer styles to Soft Light.

And now to set up our slider caption. Create a new layer and make a selection with a size of 505×80 and line it up with the left edge of our image and the bottom of our image.

Now lower the opacity to 60%. Grab your text tool with font style RockoUltraFLF, 12pt, and color #ccff00. Type out “$99″ and space it 20px from the left of our image and 15px from the top of our document.

Now grab your line tool, with white set to your forground, and drag out a line that is 60px long. Space it 15px from the left of your text and 12px from the top of our black bar.

Alright, now grab your text tool again. This time use the font Myriad Pro, 6pt, color #ccff00. Type out the name of whatever product you have on the front page. Space it 15px from our white line and 15px from the top of our black bar.

Grab your text tool again, same font, color white, 3pt. Type out some content so that it is two lines. Space it 18px from the left of your white line and 10px from the bottom of your header text.

Time to set up our content to go next to our slider. (See, I told you we were going to go a bit in reverse). Grab your text tool again, same font, color #ccff00, and size 7pt. Now type out whatever you want for your header. I have typed out “Premium Graphics for Discount Prices”. Space your text 25px from the left and 35px from the bottom of your navigation.

Now add some content to your post. You will want to space your content 30px from the left of your document and the first line of text 20px from our header.

Now grab your rounded rectangle tool and give it a radius of 5px. Drag it out so it is 110×30, filling it with white (we are going to add layer styles later on). Now rasterize your layer and add the following layer styles: [

You should have this:

Now grab your type tool and use Myriad Pro, 5pt, color #2f2f2f and type out “Read More”. Center it horizantally and vertically on your button and apply the following style:

Alright, that finishes out our top content. Now onto another area.

Center Content

Create a new layer and make a selection of 1100×475 fill it with black for the time being. Drag this layer to be underneath all our content and just above our top content bg.

Now make sure that the end of our top background is the beginning of our black background.

Alright, now apply the following style:

Grab your Rounded Rectangle tool again and give it a radius of 5px. Drag out a rectangle that is 300×215. Filled with black is fine for now as we will style them later. Now space your shape 27px from the left of our document and 80 px from the brown background.

Now duplicate your layer twice. Space them 73px from each other so you have this:

Now create three groups and name them Content 1, 2, and 3 respectively. Place your first shape layer in Group 1, your second in Group 2, and of course your third in Group 3. Now hide groups 2 and 3, we won’t be working on them right now.

What we are going to do now is to copy a layer style from a previous layer. Our previous layer we are going to be copying our layer style from is our brown bg. To do this right click our brown bg layer and choose Copy Layer Styles. Now simply right click your shape layer and choose Paste Layer Style. Though the other two boxes are hidden you should paste the layer styles on the other two boxes now to save time.

Alright, now grab your icon set from earlier (Big shout out to Dry Icons for the icons) and pick your favorite three. What we are going to do is add our content. In the end you should have something like this

The button was achieved by copying and pasting our other buttons layer styles and the text header uses the same header color as before.

Alright, now lets set up our second content slider. This will be used to display more of our featured content, but in a much smaller size. To start out select your Custom Shape tool, choose Arrow 2.

Now use the arrow tool to draw out an arrow 50×55 and fill it with black. Space it 70px from the bottom of your content box and 20px from the right of your document.

Now apply the following styles:

Duplicate your layer. Go to free Edit–Transform–Flip Horizantal and use the same spacing to place your next arrow on the left side of our document.

Now open up whatever images you want to place in your gallery below your content. Resize the image to 100×100 and bring it over to our document. Space it 45px from your left arrow and 50px from the bottom of your content box.

Now bring over another image the same size or for right now just duplicate your layer and space it 20px from the first image. Duplicate your layer again and space it the same.

Now for our rollover effect image. Drag another image over but this time it needs to be 125×125. Now space it 30px from your other image and 36px from the bottom of your content box. Now add a 5px white stroke. This will give our image a little bit more draw from the eye on mouseover.

Now repeat the process for the last three images,using the same spacing so you have this:

Footer

Now make a selection that covers the rest of your layer. Create a new layer and fill it with black. Bring this layer down and place it above our other two background layers.

Now copy and paste the layer styles from your first background (the brown) onto the layer we just create. Go back up to the top of our layers and grab your text tool. Here we will be adding our footer content, which is going to be our categories with a few recent products.

Grab your text tool and use Myriad Pro, Size 4pt, and Color #98cb00. Type our whatever category you are going to use and spacae it 20px from the bottom of our grey box and 40px from the left of your document.

Now grab your text tool and use Myriad Pro, Size 3pt, and Color #dcdcdc. Add your content for your category and space it 20px from the bottom of your header. Each text line needs to be spaced 15px from each other.

Group all the layers into a group called Header and duplicate the group three times. Space them each 77px from each other. The final right header should be spaced 40px from the right of our document. Delete a a few of the text lines to make it look a little better.

Now grab your favorite social network icon set to use. We are going to be using the icon set in our resources (the 32px size). Drag over your favorite social networks (I am using Dribbble, Facebook, forrst, Twitter, and RSS). Your first icon should be 20px from the left of your document and 15px from the bottom of your document. Each icon after should have a spacing of 20px.

Alright, now grab your rounded rectangle tool with a radius of 5px, color white, and drag out a rectangle that is 80×45. Space this rectangle 20px from the right of our document and 15px from the bottom. Copy and paste the layer styles from our earlier buttons. Grab your text tool, using Myriday Pro, 3pt, and type out Submit. Center it both horizantally and vertically on your button.

Now grab your rounded rectangle tool again and draw out a white shape of 290×45. Keep it 15px from the bottom but space it 10px from the left of our Submit Button.

Now grab your text tool and use Myriad Pro, 5pt, and color #98cb00 to type out Grab Our Product Newsletter. Line it up with the left of our rectangle and 15px above the rectangle.

Grab your text tool again, color #5e4531 and type out your copyright. Center it on the screen and you are done!

Conclusion

I hope you have enjoyed this tutorial and would love to hear your comments!

• Share