Blue Content Box

In this tutorial you will learn how to create a sleek blue content box with navigational bar. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Author:

Matthew Heidenreich

Category:

Photoshop

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

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

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


5. your document will now look something like this

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

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





8. Your document will now look like the following

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.

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

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%. You can download the starburst effect here

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

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

14. Now use these blending options on your button layer




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

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

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

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

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

 
Get a commercial/public use licence for this PSD (More info)

Remember if you have any questions or comments about this tutorial to leave your responses in the comments below and we will get back to you very quickly.

If you enjoyed this tutorial please take a moment to visit one of our sponsors

Show Some Love
Thank you for your support

16 Responses

  • Guitar Tabs

    Cool tutorial, thanks!

  • Alex Rogahn

    Look real nice! only criticism is the gloss, use a gradient to give it more depth 🙂

  • Matthew Heidenreich

    haha ,yeah… you alwasy tell me that 🙂

  • rajvee india

    good , i am new to this world i am trying , please update me very often to my mail id

    Thnkzzz with regards
    Rajvee(india)

  • SupeV

    Thanks !!! Great Tutorial

  • Gizelle

    I am new to Photoshop and like the tutorial. I just am wondering how this turns into a website? I do mostly hand coding and use Dreamweaver CS4.

    Would the psd file be imported into dreamweaver as what? If it’s an image, how do you add links? Sorry, I am such a novice at any of the Photoshop stuff.

    Thanks,

    Gizelle M.

  • Matthew Heidenreich

    @Gizelle

    What you would do is to slice your document in photoshop and then move into dreamweaver and change it to css and html, as it will just make a html tabled layout. You can go to sites like good-tutorials.com and search for slicing tutorials to get a better understanding for what i mean. Hopefully this helps;

  • Drupal Darren

    A nice effect. It didn’t take much to chop this up and turn it into a Drupal page template. Thanks.

  • JSmith

    Great Tutorial. I’ve looked at a lot of other tutorial sites and the end results are often average at best. This site looks really polished.

    Thank you for helping me get to the next step!

  • Banjo Billy

    Nice tut! Maybe a stupid question, but does anybody know the name of that image gallery thing? It looks so cool, but I can’t find it anywhere…

  • Matthew Heidenreich

    @Banjo Billy

    Not a stupid question. If your referring to an image gallery that is set up like my example, I am unsure of a script that can do that. You could hard code something with javascript I imagine though. Or you can check out sites such as hotscripts.com to find something to your likings

  • johannes

    this is a really good Tut, but I wonder if you can show or make a Tut where you show how you can get all this work in Dreamweaver. like the image gallery

  • Business Card Printing

    Nice! The design is very clean and simple. Your designs are very consistent, always above par. Keep up the excellent work!

  • CgBaran Tuts

    Nice box for coding with jquery

  • kiefer anderson

    pictures is missing

  • Guitar Tabs

    Ok, but why blue 😉

Leave a Comment

Name (required)

Mail (required)

Website

Message

 

Sponsors