Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Content Box Tutorial

Content Box Tutorial


1. Start off with a new image. Create a new layer and call it contentbox border. With your rounded rectangle tool, with a radius of 4 pixels, create a decent sized rectangle (depending on what you "need") and use whatever color you like (we will change this later!)
Go to select - modify - contract - 6 pixels. Then hit delete. Keep in mind that I added a background pattern on this img!

2. Now we will apply some layer style to this layer.

Click to Enlarge
Click to Enlarge

Click to Enlarge
Click to Enlarge

Also apply a color overlay using this color (#7DBAC3)
and apply a 1 px stroke, 100% opacity, using this color: (#7F7F7F)

It should look like this!

3. Now, like on the image below create a gray rectangle in a new layer below your content box border layer and apply a stroke to it with a slight darker color. Call your layer gray.

4. Now, below your gray layer, create a new layer and call it contentbox bg color. Fill the layer with the color provided on the image below!

5. Now you're pretty much done! Either add the text in photoshop or slice the image for html! I'm currently working on a small slicing tutorial and a bigger one. I will provide a link at the main page when finished!

Content Box Tutorial: Final Result



Author's URL: RBP
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Content Box Tutorial"

Only registered users can write comment

Reader's comments