Create a Stylized Navigation Bar and Slice it for Web

Create a stylish navigation bar with Illustrator

In the following tutorial you will learn how to create a stylized navigation bar. You will learn how to use the Appearance Panel to style a navigation bar, and how to use the Slice Tool to cut and export the images so they can be used as part of a website. Let’s begin!

 

Press Command + N to create a new document. Enter 1025 in the width box and 53 in the height box then click on the Advanced button. Select RGB, Screen (72ppi) and make sure that the "Align New Objects to Pixel Grid" box is unchecked before your click OK. Enable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid). Next, you’ll need a grid every 5px. Go to Edit > Preferences > Guides & Grid, enter 5 in the Gridline every box and 1 in the Subdivisions box. You can also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to replace the unit of measurement to pixels from Edit > Preferences > Unit > General. All these options will significantly increase your work speed.

Comments

Be the first to write a comment

You must me logged in to write a comment.