Photoshop  Home Photoshop Web Layout Fresh Content Box
rss

Fresh Content Box

Author: Pulse GFX More by this author


Step 1: Creating the Workspace:

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

Step 2: Create the Base Layer

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

image 1

Hold the shift key on the keyboard to get a equal selection size. Fill in the selection with the colour #cccccc and then apply the following layer styles to the shape:

Drop Shadow:

image 2

Stroke:

image 3

Apply these and then our base layer will look something like this:

image 4

Step 3: Create the Top section

Next if not already select the selection, if you have de-selected the selection then hold Ctrl on the keyboard and click on the base layers thumbnail to select it again. When you have selected it go to Select > Modify > Contract and contract by 4px to give you this selection:

image 5

Make a new layer and Fill in this selection with and colour and then shrink it about this size by using the free transform tool (Edit > Free Transform):

image 6

Apply the following layer styles on this layer:

Gradient Overlay:

image 7

Stroke:

image 8

Our top part should now look like this:

image 9

Step 4: Create the Content area

Now select the very base layer again and re-select the selection again. Then go to Select > Modify > Contract and contract the selection by 4px. Make a new layer and fill it in with any colour. You should then get this effect:

image 10

Shrink the shape from the top to about this size:

image 11

Apply the following layer styles to this layer:

Gradient Overlay:

image 12

Stroke:

image 13

Our content box area should now look like this:

image 14

Step 5: Add a colour burn effect

On the layer we've just been working on re-select layer and then grab your Rectangular Marquee Tool and select the Subtract from Selection setting and make a selection over the content box area like this:

image 15

Once you have done this selection you should end up with a bottom selection like this:

image 16

Make a new layer and fill it in with a neutral Black (#000000). Then change the layers blend mode to Lighten and then apply the following layer style:

Gradient Overlay:

image 17

The bottom selection should now be blended in with the content area and also have a colour burn effect at the end of it:

image 18

Step 6: Add in some text

Finally let's add in some text. For this tutorial I'm using the font Trebuchet MS. For the top title part I am using it at size 12pt with the Anti Alliasing at Sharp. For the content area I'm using it at size 10pt with the Anti Alliasing at Sharp again. Add in your text and you should get something like this:

The Final Result:

Fresh Content Box Tutorial: Final Result



Author's URL: pulsegfx.net

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Fresh Content Box"