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

BioShock WebSite Header


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

Click to enlarge
Click to enlarge

3. Apply these layer styles

- Gradient: #157272 to #1b8484

image 2

- Stroke: #126464

image 3

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

Click to enlarge
Click to enlarge

5. Select the Single Row Marquee Tool and place it at the top of your canvas and delete it

Click to enlarge
Click to enlarge

6. Change this layer's blend mode to Overlay and opacity to 55%

Click to enlarge
Click to enlarge

7. Using the Rectangular Marquee Tool select the inside part of the stroke you just made

image 7

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%

Click to enlarge
Click to enlarge

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

image 9

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%

image 10

11. Apply some text to it, I'm going to use Bebas at 18pt and White color

image 11

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

image 12

13. Apply these layer styles

- Drop Shadow: #0d5858

image 13

- Gradient: #78d4d4 to #b0ffff

image 14

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

image 15

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

image 16

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%

Click to enlarge
Click to enlarge

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)

Click to enlarge
Click to enlarge

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

Click to enlarge
Click to enlarge

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

Click to enlarge
Click to enlarge

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

Click to enlarge
Click to enlarge

21. Apply this layer style
- Gradient: #111111 to #2c2c2c

image 22

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

Click to enlarge
Click to enlarge

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

Click to enlarge
Click to enlarge

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%

Click to enlarge
Click to enlarge

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%

Click to enlarge
Click to enlarge

26. Write in your links, I'm going to use Verdana 12pt #ffffff, and it's finished!

BioShock WebSite Header Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: Aviva Directory
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 "BioShock WebSite Header"

Only registered users can write comment

No comments yet...