Her

Home Photoshop Tutorials Web Layout Blue Content Box

Blue Content Box

Author: PSDVIBE Author's URL: psdvibe.com More by this author

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

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

image 2

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

image 3

image 4

5. Your document will now look something like this

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

image 6

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

image 7

image 8

image 9

image 10

image 11

8. Your document will now look like the following

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.

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

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%.

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

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

image 17

14. Now use these blending options on your button layer

image 18

image 19

image 20

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

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

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

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

image 25

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

Blue Content Box