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

Sleek Web Content Box


Start off with a New Document with the size of 200X250

image 1

Make a rectangle with rounded corners (size:5) then in blending options use the default setting on drop shadow but set the distance to 0

image 2

Make a smaller rectangle with rounded corners and apply the following styles this is where your content will go.

image 3

image 4

image 5

image 6

Make a selection like the one above, by using the polygon tool. to get the diagonal lines hold shift and drag in the direction you want the diagonal line. By holding shift you get a perfectly straight line.

image 7

Fill the selection with a gradient I chose a dark blue color.

image 8

On a new layer and keeping the same selection from before choose select>modify>contract this will make your selection smaller choose 2 in the contract box. Fill the selection with white and set the layer opacity to 30% then using the rectangle selection select the lower half of the white trapezoid and delete it.

image 9

Add a title in the blue trapezoid.

Sleek Web Content Box Tutorial: Final Result

Here is my final result. I have added text links to make it look filled up.



Author's URL: Aviva Directory
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 "Sleek Web Content Box"

Captcha