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

Floating Ice Navigation


1. I am using a 550 x 170 document but you can have yours bigger if you need it. White background will be fine.

2. Using the Rounded Rectangle Tool draw a shape near the top somewhere.

3. Rasterize the layer.

4. Ctrl + Right click on the layer to make a selection.

5. Set a real light colour as your foreground, mine is #F9FAFC.

6. Set a slightly darker blue as your background colour, mine is #E0EDF5.

7. Draw a gradient in your selection.

8. Right click on the layer, select Blending Options and apply a 1px Stroke with the colour #D9EAF4 or something similar.

image 1

9. Duplicate this layer and move it under the other shape.

10. Ctrl + click on this layer to make it a selection.

11. Select the gradient tool again with the same colours as before, drag your mouse in the opposite direction so the lighter colour is at the bottom.

image 2

12. Now here is the easy part. Add a title. I used font colour #3399CC and added a simple drop shadow.

13. Finally, add some text for your menu. I also resized the lower box because I relised it was too large. Click on the thumb below for the full size, good quality image. Enjoy!

Floating Ice Navigation Tutorial: Final Result



Author's URL: Crunked-Designs.com
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 "Floating Ice Navigation"

Only registered users can write comment

Reader's comments