May 22nd, 2009 in Photoshop Tutorials by Richard Carpenter
Your PROject Pt.1
17 Votes, Rating: 4.82
Loading ...Hello welcome to another tutorial series. In this series we’ll be creating a website in photoshop then later on code it into a 5 page template. We’ll also be adding a nice jquery slide effect for our featured content section using JFlow.
lets get started firstlt create a new document 900 x 1090 pixels with a black background. Select the rectangular marquee tool and create a box at the top. Fill the box with a radial gradient using the colors #202121 and #000000.
At the very bottom of the rectangle create two 1 pixle lines ontop of each other spanning the width of your canvas.
Add a layer mask to your lines layer. With the gradient tool and a reflected gradient start from the middle and drag towards the edge of the canvas. Make sure forground is white and background color is black. The edges of your lines should blend into the background. You should have something like this.
In the top left hand corner add your website title and slogan. Ive chosen to add a few layer styles to the 2nd word in my title. The layer styles are as follows.
You should have something like this.
On the same level as your website title towards the right hand side add a simple navigation using the rounded rectangle to create a hover state. The color of the blue hover is #0096ff.
Underneath the website title add some featured content text with a title. Next to the title make a simple little icon/bullet point and place it next to the title.
On the right side of the header create a rounded rectangle, just big enough to fit inside the space provided. Make the rectangle over lap the header at the bottom.
Fill your selection with a radial gradient using the same technique as we did for the header background. Once you’ve filled your selection with the radial gradient add these layer styles.
You should now have something like this.
Ontop of the rounded rectangle make a selection like the image below using either the pen tool or the polygonal lasso tool.
Fill the selection with the color white then set layer opacity to 6%. Next find an image you want to use as your featured image. Im using an image of the acer gemstone blue laptop. Resize your image to fit inside the rounded rectangle leaving a good 10-15px all the way around.
Once you’ve postioned your image add this inner shadow.
Using the rounded rectangle tool with a radius of 5pixels create two small buttons with arrows facing left and right.
The reason why the arrows are more to the left on the buttons is because the buttons will be tucked underneath our featured image. The layer styles for the buttons are as follow.
Tuck your buttons underneath your featured image.
Using the rectangular marquee tool make a selection from the two 1 pixel lines we created down to the rest of the canvas. Fill the selection in the same way we did our header background image. (radial gradient).
Select the rectangular marquee tool once again and create a selection underneath all the header elements.
Fill the selection with any color then add these layer styles.
Now we have our content box begin to add some dummy content. We’ll start off with a simple header in capitals, underneath the header add a simple time/date stamps.
Underneath the header and time/date stamp create those two 1pixel lines on top of each other again. (divider). Stretch the divider lines across the content box leaving about 10-15px either side.
Underneath the divider line begin to add your dummy content/images to your content box. Use the steps above to create more content boxes as needed.
Now for the footer, create a selection spanning the width of your canvas. Fill the selection with a reflected gradient using the colors #202020 & #111110. Duplicate your site title and slogan then move it down towards the left hand side of the footer. Add your copyright info on the right. When you’ve finished your footer you should have something like this.
Heres the finished result
Hope you’ve enjoyed this tutorial, dont forget to subscribe via rss and twitter. Also please spend 2 minutes and promote this post using the icons below. Your help and support is much appreciated. Many Thanks.
Other Parts To This Project
Download The FREE Template
You can download the FREE CSS Template by clicking HERE.
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
28 Responses to “Your PROject Pt.1”