Photoshop Tutorials

Design a Web Template using the “960 Grid System” - Page 3

E-mail Print
User Rating: / 106
PoorBest 
Article Index
Design a Web Template using the “960 Grid System”
Page 2
Page 3
Page 4
Page 5
All Pages

Step 11

Next I made a custom RSS feed icon which you only really need to add if you were planning to have RSS feeds available on the site. First I drew a rectangle using the blue color then I added the word 'RSS' using the font, 'Rockwell' in white. For the actual feed icon you can download it from here in the 'Developer Kit' and place it into your document. I then put the icon in a new layer group then duplicated the group then changed the blue rectangle to a grey rectangle, again to show what it would look like when hovered over.

11 12 13

Step 12

I thought that a kind of slideshow element would look good on the homepage so to figure out what it would look like I copied in a stock image which matched the color scheme, if you;re interested the image can be downloaded from SXC here. Paste the image into your document then scale it down and position it like so.

14

Step 13

Select the rectangular marquee tool and drag a selection box over the image (the part which you want to keep) then select the layer with your image in it then go Layer>Layer Mask>Reveal Selection and you should be left with something that resembles the image below.

15

Step 14

Using the font 'Rockwell' again type a wee caption with the text tool. Next create a new layer and drag the layer below the text then draw two white rectangles behind the words then change the text color to the same blue that we used before.

16

17

Step 15

To the right of the slideshow image I left a space for a small quote or maybe a 'welcome to our site' thing. I put in the quote by drawing a text box then typed a a few words in a sans serif font in the grey color. Next I added some oversized quote marks by doing each one in a separate text layer and boosting up the pt size and positioning them accordingly.

18

19



 

More tutorials by Ross Aitken

Subscribe to Photoshop Tutorials

Free Email Newsletter

Search

Active Writers

  • Denny Tang is the founder of Photoshop Tutorials and specializes in photo editing with Adobe Photoshop.
  • David Cox is a graphic designer from the USA. You can check out his blog/portfolio at AEVION.
  • Oliver Cereto is a graphic designer and photographer from Málaga, Spain. View more of Oliver's work at olivercereto.com.
  • Ross Aitken is currently studying design at Glasgow, UK. You can find more tutorials by Ross at PSD Learning.

Get paid $150-300 per tutorial. Become a writer.

You are here: Home Photoshop Tutorials Layouts Design a Web Template using the “960 Grid System” - Page 3