Greenish & fresh content box design

Tutorial introduction

This Photoshop tutorial will teach you how to create a fresh and unique content box design for you website easily, step by step.

main idea of this tutorial is to teach you the techniques of creating neat web graphics that everyone will like.

The final result of this content box photoshop tutorial is:

The tutorial

open photoshop and create a new document sized 280×280 (px)

paint the background layer (named “Layer 1″ on default) in #eceeeb:

(1.)double click on the foreground color and then change the # value to #eceeeb in the color picker window.

(2.)choose the ‘Paint bucket tool’ (G) and one click on the workspace.

Choose the ’rounded rectangle tool’ and copy the following values to the top bar.

then, create a new rounded rectangle that will be the main box shape..

change this layer’s color to green (#7caa02).

changing the shape layer color is done by double click on the color icon besides the layer name.

Next thing is to add some effects to that flat shape.

I applied ‘gradient overlay’ and ’stroke’ effects. the following 2 images shows you the values you need to enter on each effect. you can change it a bit if you like to.. it’s up to you.

blending options is reachable by more than one way. here’re two:

(1.) click on ‘fx’ icon on the bottom of the layers box and then click on the ‘blending options’ option.

(2.) go to “layer - layer style - blending options’ from the top menu of Photoshop program.

gradient overlay values (from green #85A800 to black #000000):

stroke values (stroke color is #ECEDEA):

*please note the blend mode

result till this step should be like below: