Photoshop Tutorials

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

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 16

In the middle of the page I wanted to display some news items in a sort of blog format. First I typed 'news' using the grey color and 'Rockwell' as the font. Next I created a new layer group called 'Item 1' where I would put in all the the elements that make up the first news item. Type the title of the first news item and place it within this group.

20

Step 17

Next I added some text which would make up the news item then a date at the top right. I put all this within the same news item group.

21

Step 18

Using a light grey color draw a rectangle around the first news item like shown in the image below.

22

Step 19

Now right click on the layer group and duplicate it then move it down and change the title. Now do this again so you have three news items then delete the rectangle layer from the second news item.

23

Step 20

I thought a good use of space in the sidebar would be a Flickr group display which is quite popular in design sites now and can be seen on sites such as PSDlearning and Fuel Your Creativity. Firstly put in a suitable title in the same style as the news title. Now add some images with dimensions; 75x75px, If you want you can copy the thumbnails from the sites I mentioned above then paste them in. Now just arrange them like I've shown below.

24



 

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 4