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

Sleak Content Box


Step 1: Creating the Workspace:

Start with a 500 x 200 Document and fill in the background as a neutral white (#FFFFFF)

Step 2: Create the base layer

Make a new layer and make a selection with your Rectangular Marquee tool like so:

image 1

Step 3: Smooth it over

Then go to Select > Modify > Smooth. Smooth over with 7px Radius, to get this shape:

image 2

Fill in this selection with the colour #EBEFF2. Once you've filled it in set this Drop Shadow setting:

image 3

The beginning of the base should now start to form:

image 4

Step 4: Creating the Bottom section

On the layers thumbnail hold Ctrl on the keyboard and click on the thumbnail it will select the whole of the selection. Then grab your Rectangular marquee tool and select the third one labeled Subtract from selection. Use this tool and make a selection over your shape like so:

image 5

Once you have made this selection you should have something like this:

image 6

Make a new layer and Fill this in with a Neutral Black (#000000) And then apply the following Layer style:

Gradient Overlay:

image 7

Apply this and now and then change the layer style of this layer to Lighten in the layers panel. The bottom of the content box should now have a burned colour effect to it:

image 8

Step 5: Creating the Top Section

Now for the top part. On the very first base layer we did in Step 2 select the layers thumbnail via the method you did before and then grab your rectangular Marquee tool again and select the third one Subtract from selection and this time make a selection over the base like this:

image 9

Making this selection should leave you with the top part being selected like this:

image 10

Make a new layer and fill it in with a neutral white (#FFFFFF) Then apply the following Layer Styles:

Drop Shadow:

image 11

Inner Shadow:

image 12

Gradient Overlay:

image 13

image 14

Stroke:

image 15

Applying all those will give you something like this:

image 16

Step 6: Adding in some minor details

Next lets add in a couple of very small circle in the top tab at the right hand corner like so:

image 17

Finally add in some text, I'm using Verdana, regular size 11pt for the title and size 10pt for the content text:

image 18

Finally I duplicated the whole of the content box layers (Everything) and then tweaked some settings around:

The Final Result:

Sleak Content Box Tutorial: Final Result

On the second content box I simply changed the font to Arial changed the circle colours and changed the very first base layer of the content boxes layer mode to Lighten to give a more sleek grey effect!



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

Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Sleak Content Box"

Captcha