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

Blue Content Box


1. First thing we want to do is create a new document with the dimensions of 900x365.

Blue Content Box image 1

2. Next thing we want to do is change the background color to #005b9e by using our paint bucket tool to fill our background layer.

3. Now using your rectangle marquee tool, or your rectangle tool make a rectangle similar to the following and fill it with #FFFFFF

Blue Content Box image 2

4. Now insert the folllowing blending options onto its layer.

Blue Content Box image 3

Blue Content Box image 4

5. Your document will now look something like this

Blue Content Box image 5

6. Next thing we want to do is to use our rounded rectangle tool with a radius of 15px to create a rectangle similar to the following. Make sure your foreground is set to #639ebd

Blue Content Box image 6

7. Next, insert the following blending options onto your rounded rectangles layer

Blue Content Box image 7

Blue Content Box image 8

Blue Content Box image 9

Blue Content Box image 10

Blue Content Box image 11

8. Your document will now look like the following

Blue Content Box image 12

9. Using your rectangle marquee tool with a feather set to 15px make a selection similar to the following and fill it with #FFFFFF. Then set it under your rounded rectangle tool.

Blue Content Box image 13

10. Now, just adjust your opacity to 50% and change the blending mode to Soft light and your document will look like the following

Blue Content Box image 14

11. The next step is optional if you want to add a little more to your background. I used a Starburst effect set to overlay and the opacity set to 8%.

Blue Content Box image 15

12. Using your rounded rectangle tool with a foreground set to #FFFFFF and the radius set to 5px make a box similar to the following

Blue Content Box image 16

13. Next lets use our rounded rectangle tool to make the back of our button. Set the radius to 5px, and make something similar to this

Blue Content Box image 17

14. Now use these blending options on your button layer

Blue Content Box image 18

Blue Content Box image 19

Blue Content Box image 20

Blue Content Box image 21

15. Next lets add a shine to our buttons layer. Ctrl+Click your layer to select it. Create a new layer and fill it with #FFFFFF. Delete the bottom half of it and you should have something that looks like this

Blue Content Box image 22

16. Change the blend mode to overlay and the opacity to 35%. Then just add some text and it will look like this

Blue Content Box image 23

17. Now just repeat steps 13-16 as many times as you'd like and you should have something that looks like this

Blue Content Box image 24

18. We want to symbolize what it will be like for an active link. So using your polygonal lasso tool make a triangle similar to the following and fill it with #FFFFFF

Blue Content Box image 25

19. The last step is adding your content and you should have something that looks like the following

Blue Content Box Tutorial: Final Result



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

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Blue Content Box"

Only registered users can write comment

No comments yet...