Learn how to make a header for your website with a BioShock style

1. Start by opening a new file: 710px * 210px
2. Create a new layer, select the Rectangular Marquee Tool and set a fixed size of 700 * 40px and place your selection at the top of your canvas. Go to Select -> Modify -> Smooth and use 5px radius, now fill your selection with #157272

Adobe Photoshop Tutorials BioShock Header
3. Apply these layer styles
- Gradient: #157272 to #1b8484
Adobe Photoshop Tutorials BioShock Header

- Stroke: #126464
Adobe Photoshop Tutorials BioShock Header

4. Ctrl+Click over the layer thumb, create a new layer and go to Select -> Modify -> Contract and contract it by 5px. Now go to Edit -> Stroke and apply a 1px solid White(#ffffff) stroke
Adobe Photoshop Tutorials BioShock Header

5. Select the Single Row Marquee Tool and place it at the top of your canvas and delete it
Adobe Photoshop Tutorials BioShock Header

6. Change this layer’s blend mode to Overlay and opacity to 55%
Adobe Photoshop Tutorials BioShock Header

7. Using the Rectangular Marquee Tool select the inside part of the stroke you just made
Adobe Photoshop Tutorials BioShock Header

8. Then make a #157272 to Transparent Gradient in a new layer and change this layer’s blend mode to Multiply and Opacity to 60%
Adobe Photoshop Tutorials BioShock Header

9. Repeat Step 7 and move your selection by 5px up, go to Select -> Inverse, create a new layer and make a White to Transparent gradient like in the image below
Adobe Photoshop Tutorials BioShock Header

10. Repeat Step 7 again, go to Select -> Inverse and press Del to clear the excess of White parts. Now change this layer’s blend mode to Soft Light and opacity to 40%
Adobe Photoshop Tutorials BioShock Header

11. Apply some text to it, I’m going to use Bebas at 18pt and White color
Adobe Photoshop Tutorials BioShock Header

12. Create a new layer, make a small circle next to your text with the Elliptical Marquee Tool and fill it with #78d4d4
Adobe Photoshop Tutorials BioShock Header

13. Apply these layer styles
- Drop Shadow: #0d5858
Adobe Photoshop Tutorials BioShock Header

- Gradient: #78d4d4 to #b0ffff
Adobe Photoshop Tutorials BioShock Header

14. Create a new layer, select the Elliptical Marquee Tool and make a circle selection over the top part of your blue circle, now make a White to Transparent gradient over it
Adobe Photoshop Tutorials BioShock Header

15. Ctrl+click over the blue circle layer’s thumb, go to Select -> Inverse and press Del, now change this layer’s blend mode to Soft Light
Adobe Photoshop Tutorials BioShock Header

16. Now we’re going to add a texture, Ctrl+Click over the first layer thumb(the one that has the basic shape) go to Edit -> Copy Merged and then create a new layer and paste it there. Then go to Filter -> Noise -> Add Noise and apply 10% uniform noise to it, change this layer’s blend mode to Multiply and opacity to 30%
Adobe Photoshop Tutorials BioShock Header

17. Now go and look for an image to use in the header, I’m going to use this one and you can also use it. Place it in your file and move it’s layer to the bottom(under the first layer where the shape is)
Adobe Photoshop Tutorials BioShock Header

18. Select the Rectangular Marquee Tool and set a fixed size of 700px * 210px and place it in the middle of your canvas, go to Select -> Inverse and delete your selection
Adobe Photoshop Tutorials BioShock Header

19. Ctrl+Click over the image layer’s thumb, create a new layer and go to Edit -> Stroke and apply a 2px inside White stroke. Change this layer’s blend mode to Overlay
Adobe Photoshop Tutorials BioShock Header

20. Now we’re going to make the Navigation bar at the bottom of the header. Create a new layer and select the Rectangular Marquee Tool with a fixed size of 700px * 40px, place your selection at the bottom and fill it with #oooooo
Adobe Photoshop Tutorials BioShock Header

21. Apply this layer style
- Gradient: #111111 to #2c2c2c
Adobe Photoshop Tutorials BioShock Header

22. Create a new layer, select the Rectangular Marquee Tool and set a fixed size of 700 * 5px, place your selection at the bottom and fill it with #157272
Adobe Photoshop Tutorials BioShock Header

23. Create a new layer, select the Single Row Marquee Tool and make a selection 1px under the top of the last one and fill it with White, then change this layer’s blend mode to Soft Light
Adobe Photoshop Tutorials BioShock Header

24. Ctrl+click over the layer which has the shape on it(the one you created in step 20) and go to Edit -> Copy Merged, then create a new layer and paste it there. Go to Filter -> Noise -> Add Noise and apply 10% uniform noise to it, change this layer’s blend mode to Multiply and opacity to 30%
Adobe Photoshop Tutorials BioShock Header

25. Create a new layer, Ctrl+click over that layer again and go to Select -> Modify -> Contract and contract it by 1px, then go to Edit -> Stroke and apply a 1px White Stroke. Change this layer’s blend mode to Overlay and opacity to 30%
Adobe Photoshop Tutorials BioShock Header

26. Write in your links, I’m going to use Verdana 12pt #ffffff, and it’s finished!
Adobe Photoshop Tutorials BioShock Header