Monday, November 26, 2012

DIY: Navigation Menu for Blogger

Do you remember my ecstatic blog post about My New Navigational Menu? It was so easy to do that I've actually changed it again since then, but I felt that someone with a little less experience in doing so might have difficulty getting started on this project. That's how this tutorial was born! If you need any assistance understanding this tutorial or if you feel there's a matter that I could further elaborate on, feel free to let me know in the comments!

Today I'll be showing you how to put together your own horizontal navigation bar and slice it up using Adobe Photoshop! To do this yourself, you should already have a design in mind for this element of your blog, and be able to work your way around an image manipulation program. For those of you that don't have a version of Photoshop, I can highly recommend the GIMP. GIMP stands for "GNU Image Manipulation Program" and is a great free alternative with very similar features.

Creating your image

First, you'll need to make an image for your navigation bar. Open your image editor and create a new file with a transparent background that is no wider than your header, or else it won't fit into the allotted space. As for the height, I like to start with around 100 pixels so I have some elbow room, with the intention of cropping it down to size later. 

Rename the current layer "Background". On the Background layer, use the Rectangular Marquee Tool (M) to  select an area that is equal to the size you want your navbar to be, and fill it with your intended background color.

Using the Horizontal Type Tool (T), add the links that you would like to be included and position them appropriately.

Finally, feel free to spruce it up in any way you see fit! Creating a new layer for each additional embellishment will help to keep things organized and make it easy for you to come back and edit each aspect separately!

Once you've finished, crop your image down to the closest edge and save your image as a PSD file (or XCF if you're using GIMP).


Slicing your image

Carefully consider which portions of your image will be sliced into links! When you use the slice tool, you are literally cutting your image into pieces that will be saved as individual images, and you will need to put them back together with HTML later.

From the "View" menu, select "Show > Slices" and get out your Slice Tool (K).

You may notice that your image now has the number 1 in the upper left hand corner. As you cut into your image, each new piece, or slice, will be assigned a number. These numbers will help you to identify which piece you're working with when you're arranging them using HTML.

Now it's time to start slicing! Your slice tool will allow you select a rectangular area; use this to outline the sections of your image that you intend to make into links. When you've finished, your links should be outlined in blue, as well as the little box in the corner that displays your slice number. The areas that are not designated links will be greyed out.

I wanted my slices to span the entire height of my image; this will prevent me from having to stack images atop one another when I'm putting them back together.

Now it's time to export your navigation bar! Select "Save for Web & Devices" from the "File" menu and save your project. (If you'd like a quick run-down of this area of Photoshop, be sure to check out this post!)

Once you've gotten this far, congratulations! You can move on to uploading your files and applying it to your blog! There's a really thorough video tutorial that covers how to do this by Katrina over at Pugly Pixel, which is a really great blog that covers a pretty vast amount of blog design tips and services. Thanks for reading and best of luck in your bloggy endeavors!

No comments:

Post a Comment