RMC: Navigation Buttons – Moore-Mays Genealogy

I can’t lie to you, after such a long hiatus, I’ve been dreading this particular post. Not because of the subject matter, I’m just afraid of not making any sense whatsoever. Nothing for you to worry about though, because if you’re reading this, then I got ‘er done!

This is the image I’m going to hopefully recreate. This is the navigation buttons I created for the original re-design. However, I don’t need those same tabs anymore. I’ve re-evaluated which “quick links” I’m going to showcase on the top of the page. This means I need to remake the image instead of recycling it from the old re-design concept.

I start by making the base image. I made it 980 pixels wide by 75 pixels tall. I’ll most likely crop some of that height out once I get the buttons created. I just don’t like to be too cramped when I’m creating the initial image. It’s much easier to crop it off then to add it back… Okay that’s a fib, I’m just too lazy to add to the image after I’ve already started.

I used the selection box to “select” a 980 pixel by 25 pixel box. This will be the top line of buttons. Once I have the area selected, I make a new layer and flood fill it with my theme blue color. I’m using blue because I did try other colors but they were too busy or loud for the design.

Here are my two button layers. The colors are simply taking up space on the layers, because I’m not keeping them. I like to use gradients on buttons to give them more depth. However, I’m really bad at getting gradients straight. So I’ve discovered, doing a gradient overlay of a plain color is much more my speed.

Under my favorite menu, Blending Options, I add a foreground to background gradient overlay to the top buttons. I’m going for lighter buttons on top and darker on the bottom. The plan is that when you hover over the menu, the buttons will change from the top button to the corresponding bottom button. That means I want to see a visible difference between the top and bottom buttons. I’m going to save the base image when it’s done, that way I can change the colors later if I have to. Most likely I will, because that’s just how it goes with my designs!

Here are my button blocks so far. Now it’s time to decide on how many buttons I’ll be using and how big each one will be. It’s definitely a personal decision, but I’m going to make sure each button is the same width. I just like things to line up perfectly, but if that’s not your speed, you don’t have to do it that way.

These are the sections I’ve decided on for the buttons:

Home. Websites should always have a way back to the “beginning”, like an out clause.
The Blog. This will go to the main blog page but could change because of the way the site will be setup. So another good reason to keep a changeable version of the buttons.
Moore Surnames
Mays Surnames. I have my father’s side separated from my mother’s to keep it a little less confusing.
Contact. An easy way for folks to find my contact information
Diary of Llewellyn. I’m going to separate my Diary of Llewellyn posts into their own section of the website so they aren’t mixed in with regular entries anymore. This link will also hopefully lead to an index of all the entries (someday).

So that’s six sections divided by 980 pixels. That would leave 163.3333333 pixels for each button. That doesn’t work for me. It leads to too much math for me. I’m one of those lazy people who groans and can’t make a decision on how to precede from an answer like that. So I do what any logical person would do. I add another button, bring the count up to seven, which gives me 140 pixels for each button. So I’ll just add another section for a disclaimer/copyright page. See, everything worked out in the end!

For the next part I zoom in just enough to be able to see the grid lines on the image. This is going to help me keep my lines straight for the next step. Next, I create a new layer that I title “RED LINES OF DEATH” for no other reason then I like to name things. This layer is going to have nice, clear red lines to shape my boxes for the buttons. I’ll add more aesthetically pleasing ones at the end but first I just want to mark my boxes so I can add my text.

Using my select tool again, I meticulously mark the end of each button with 2 red lines. The 2 red lines will help me know that it’s the end of a button. I did this for both rows. As you can tell, the buttons are beautifully spaced. However that isn’t going to get my text in the center of the box. Since I went with a 25 pixel high button panel, I’m not going to be vertically center, I can mark the horizontal center though. For the vertical spacing, I’m just going randomly say I want at least 5 pixels of space beneath my text. I might move it higher or lower. I just won’t be able to tell until I get the text on the image.

To easily mark where I want the bottom of my text to be (not at all because I’m lazy of course), I use the single marquee line tool on both the top and bottom button panels. I ended up leaving 4 blank pixel rows beneath my line because the text will be right about the red line, making it 5 pixels from the bottom.

Once the horizontal line is set, it’s time to set the center mark. I do this because I’ve found that it’s easier to get things looking center if you’ve got an idea of where the actual center is. My eyes have been bad for my whole life, so I don’t trust myself. Which is also why I use the RED LINES OF DEATH. They are easy to see. I set my selection tool for 70 pixels wide by 75 high. This will cover the whole height of the image so I can mark the top and bottom at the same time. Now where you see the green arrow pointing is my horizontal center.

Now all my pretty red lines are in place. It’s time to get this party started. First though, I like to get up and stretch after this much eye strain at one time. Also I’m usually a bit on the frustrated part by this time. My math skills have always been adequate at best and all this perfect lining things up stuff always gets me tense. Which is obviously why I went into web design and sewing. Obviously I’m into self-torture or I like a good challenge. However you want to look at it.

You’ll have to look at that image in it’s original size, but I always make sure my text alignment is set on center. This way the text tool uses a box to mark the center of the text. If you chose right or left alignment, the box will be at the place where the text starts, so you’d have to eye where your text goes. As I’ve said before, I don’t trust myself for that anymore.

I go through and add each text separately, making sure that the boxes are on the right side of my center red line.

Once I’ve got all my text on there, I realize that the right side is more crowded than the left side. I quickly realize switching one of the short words and one of the long words might make it look more balanced.

That looks better! Now it’s time to put in the button structure lines. This isn’t a necessary step, but I like the look of it.

Again, not because I’m lazy but because it’s faster, I use the vertical single marquee tool to select all my vertical red lines at the end of the buttons. I flood fill these on a new blank layer.

This lets me use the selection tool to select the areas between the button layers and simply “Cut” out the places I don’t want the line to be. To me this is simpler then zooming in and scrolling around trying to get the exact line in the right place.

Then in a last minute stroke of genius… Sorry I had to. I add a “stroke” border to each button layer. I don’t know why they call it stroke. They should just call it a border, which is what it is. Anyway, I add a 1 pixel outside border to each layer in a lighter blue. This will make the colors stand out and it won’t disappear against the buttons when you hover over one. I chose an outside “stroke” because it was an easy way of adding it to the top and bottom of each layer. Since the left and right go off the end of the image, the program can’t add a border to it.

Voila, I now have a finished product. Before I flatten the image and save though, I make sure to save a .PSD version of the file. This keeps all layers intact so that I can come back and quickly edit them later. I make it a habit to keep something like this for every website. Who knows when you might decide to change up which things you link in the top menu!?

I almost forgot. I turned off my RED LINES OF DEATH (sorry I enjoy that too much) layer instead of deleting it. This is so that if I bring up the .PSD later, I don’t have to remake the lines for any reason. I like to keep all my “construction lines” for later use. Since I hid the layer from view, when I went to flatten the image, the program wanted to know if I wanted to discard the hidden layers. For the sake of flattening I said YES. However, if you haven’t saved your .PSD yet, I would do that first before flattening the image or closing anything. If you chose yes, it will discard that layer and merge everything visible into one layer for saving.

When you click Save As… there should be an option under “Format” for a Photoshop or .PSD file. I usually do this one first and then flatten and save as a .PNG or .JPG. For almost all my images I choose .JPG but for the buttons I chose .PNG because I want them to remain crisp and not get pixelated at all in the compression of the file.

That’s all I have time for today (because it’s my birthday)! I’ll try and come back early in the week next week to show how to get the image set up on the website. I’m hoping I’m helping you guys just a little bit. I know it’s more tricky then just using a template but once you’ve done it once, you get better at it and it gets easier!

Previous Posts in this series:

Leave a Reply Cancel reply