reviewstash

by the stash, for the stash

Guest Information

Reviewstash isn't just another technology review website - it's your review website! Registered members can submit reviews to be featured on the home page, participate in contests, and ask questions in the forums - register today to get started! Registration also removes interstitial ads.
Topic rating: 0

#1 3/17/08 10:40 AM

Daniel Levy's Avatar
Daniel Levy United States
Staff
Gender: male
From: Sacramento / Santa Barbara, CA
Registered: 12/08/07
Posts: 6989
Karma: 77
Note: UTF Spokesman
Reputation :   154 

Website
Tags: [2.0, guide, help, ps, tut]

Open up a new 800x600 document in photoshop, put that aside, then save this image to your desktop.

http://reviewstash.com/files/greenbloglayout/pattern.png

Open that pattern.png into photoshop, then select the entire image and go to Edit ---> Define Pattern

You can then exit out of this image, but you'll need to use that pattern / fill in just a little bit.

Click back into your 800x900 image

Navigate to Edit ---> Fill, then select the pattern you just made, and keep the settings at "Normal, 100%", make sure the box is unticked.

You should then end up with something like this.

http://reviewstash.com/files/greenbloglayout/1.png

Next, make a new layer, and click on the rectangular marquee tool.

Click style, then select Fixed Size, type in "443" for Width, and "797" for Height.

Click Anywhere on the document and try to center it the best you can, with an even amount of white on the top and bottom.

Right click on that layer, and open up the Blending Options.

Put a tick next to "Drop Shadow", and setup the menu as follow.

http://reviewstash.com/files/greenbloglayout/2.png

You should end up with something like this, albeit better centered.

http://reviewstash.com/files/greenbloglayout/3.png

Now, make a new layer, and again using the rectangular marquee tool as I explained, use "800" for the Width, and "196" for the height.

Fill it in white, or black, it's up to you, just as long as you have it.

You should then center this layer behind your main box like this.

http://reviewstash.com/files/greenbloglayout/4.png

Right click on the box you just made in the layers menu, and select blending options, you're going to use these settings, if you want specific colors or information, let me know, but I figure it's up to you to do that.

http://reviewstash.com/files/greenbloglayout/5.png

http://reviewstash.com/files/greenbloglayout/6.png

You should then end up with this.

http://reviewstash.com/files/greenbloglayout/7.png

Now, make a new layer, and put using the rectanglular marquee tool, select a portion at the top and leave a small gap in-between your other box, most likely 1 or 2px, just a helpful tip, zoom in as close as you can so you can move your box acurately, you should end up with this.

http://reviewstash.com/files/greenbloglayout/8.png

Now that you have created the basic framework for a web 2.0 blog, you can add extra features to your photoshop mockup, I added thinner lines behind the green bar, a green title header, fake bars depicting content, and an RSS icon at the bottom, if you need any information post and I'll be glad to help you.

My finished version looks like this.

http://reviewstash.com/files/greenbloglayout/final.png

 
 
 

3/17/08 10:40 AM

Advertisement Bot


#2 3/17/08 10:14 PM

Dwijesh Sheth's Default Avatar
Dwijesh Sheth China (PRC)
Member
Gender: male
From: Antelope, CA / Tianjin, China
Registered: 12/10/07
Posts: 861
Karma: 3
Reputation :   

Website

Wow, thanks.

 
 
 

Board footer

Optimized for 1280x1024 @ 32 bit
Fueled by FluxBB
Top 20 Posts
Who's Online
Index Map
About Us