RSS link icon

My fancy Content Box 

 

In this Adobe Photoshop tutorial you will see how to make a funky new web content box, this was actually part of a software project im in, we try to make some new user interfaces for windows applications and I got a bit inspired here.

 

photoshop content box

 

Start by drawing a rectangle on the stage with the rounded rectangle tool, then in the layers panel right click the layer and choose rasterize layer, double click it to get in to the layers styles panel and give it settings as shown below.

 

photoshop content box

 

photoshop content box

 

photoshop content box

 

Now hold down ctrl and click the layer with the shape to load the shapes selection, then with the polygonal lasso tool choose selection mode "intersect with selection" and click around to make a selection at the top as shown below.

 

photoshop content box

 

Make a new layer and name it "top" fill a color in the selection.

 

Then double click the new top layer to get to the layers styles panel and give it settings as shown below.

 

photoshop content box

 

photoshop content box

 

Now we are ready to make those two small buttons at the bottom of our content box.

 

So with the elliptical shape tool drag and draw a elliptical shape as shown below, then in the layers panel right click the shape layer and choose rasterize layer.

 

photoshop content box

 

In the layers panel double click the new layer containing the ellipse and give it styles like this.

 

photoshop content box

 

photoshop content box

 

Now make a new layer above the buttons layer, hold down ctrl and click the buttons layer to load its selection, then with the elliptical selection tool make sure to use the intersect with selection mode, and make a selection of the top part of the button as shown below.

 

photoshop content box

 

Now make a copy of the buttons layer and the glossy layer and place it at the other side of our content box.

 

Make a content top title with the text tool.

 

One last thing I did was to make the bottom part of the content box bend a bit in with a curve.

to do this go select the content box layer and go to edit -> transform -> wrap and drag the bottom part in the middle, but be carefully, not to overdue it.

 

photoshop content box

 


babbu says: Wednesday, June 04, 2008

Nice Tutorials.Thanks


deaneubanks says: Thursday, May 08, 2008

nice looking box, thanks for the help


vik says: Thursday, March 13, 2008

cool. thanks

   


 

 

 

 7

 
 
   Web Premium
 
 

All rights reserved, Copyright 2008. Contact