Final Fantasy Nemesis is not responsible for the content of external internet sites
Want to partner? Click here.
|
|
 |
view our exclusively available range of media, all freely downloadable!
|
|
 |
join our community and partake in enjoyable challenging discussions.
|
|
 |
know where you stand with our comprehensive fansite listing
|
|
| Tutorials - Navigation Bar |
Make a new image that's 780x100 pixels wide and high. Make the background transparent to start off with, and click ok to create your new image.
In this tutorial I will show you how to create quite a pretty navbar. It just uses a few simple filters and some basic effects, so it's really easy to learn, and looks great with any template. First of all we want to make the base of the Navbar. This is simple. Just draw a long Marquee selection all the way across the image and about half of the image height wise, like so:
Change your foreground colour to the base colour you want your navbar to be. If you wish to follow my example, then I used html code #ebebeb, which is used a lot on my site.
It's best to try and match your colour to the general colour feel on your site, else it might not fit in with the rest of your layout. When your foreground colour is the colour of your choice, press CTRL+Delete to fill your selection with it. Press CTRL+D to deselect your
colour. Make a new layer above that layer, and make a selection covering half of the image, either the bottom half or the top half, like so:
Fill this selection with a colour darker than the colour you used before. This will give you a nice, clean blurry effect if you choose the colour correctly. I used html code #c0c0ce. Fill your selection with this colour by pressing CTRL+Delete and then CTRL+D to deselect it. Now comes the magic part. Go to 'Filter - Blur - Gaussian Blur'. Give it a number that looks right to you.
I used 15 and it gave a nice, smooth blurry finish. Now, hold down CTRL and click on layer 1. You should now have the selection of the first shape you made. Whilst still on Layer 2, click 'SHIFT+CTRL+I' to inverse the selection. We're going to get rid of all the loose colour on the second layer which we don't want to ruin the image. Hit Delete to get rid of all the excess. You should now have something looking like this:
Now what we want to do is divide the navbar up into different segments as necassary for your image. Note that you should first add some text so you know where to split it into segments. Again, if you wish to follow, I used Impact, Size 24. I also added a small stroke effect to it to make it stand out a little. Here's how mine looked when I added the text:
With the text added, now comes the next step. We want to divide it up into segments now that we can use the text as a guideline. First of all, you need to merge the two layers together that contain the different colours. To do this, select 'Layer 2' (the top non-text layer) and press 'CTRL+E" to merge the two layers down. Now that they're one layer, this effect will come along nicely. Right click the merged layer and click 'Blending Options' in the menu.
This should open up the blending options! When the Blending Options are up, Click the word 'Stroke' at the bottom. Change the Size to 1, the Position to Outside, the Blend Mode Normal, the Opacity 100% and Change the Fill type to Colour, using the colour #c0c0ce. Don't close it just yet, because there's more. Click on 'Bevel and Emboss' and match these settings:
Now we're going to divide it into segments. Still on this layer, Select the Single Column Marquee tool from the toolbar. Now move click roughly in the centre of two words and maybe move it a little, then press delete. Do this all the way along between your different words, and you should have something like below. Notice the little bevel effect that we applied to the layer? It gives each button a little engravement to add to realism and also to its appearance. Here is my finished piece:
This part is completely optional. If you want, you can add a pretty border around your Navbar to give it that final effect. It's an easy step. Click on your text layer and then press 'New Layer' to create a new layer. CTRL and click the layer with your rectangular shape on. This will get up the selection of that layer. If you have gaps, which you probably will, then fill them in by holding down SHIFT and selecting them.
On your new layer, go to 'Select - Modify - Border'. Enter '4' in the box and then click ok. Then go to 'Select - Feather' and enter half of your border, which in my case was 4, so I entered two. Then click ok. You should now have a small selection around you image. This is correct. Now we want to fill the selection with the colour we used as the stroke and the blur on the bar.
This was #c0c0ce. Press 'CTRL+Delete' to fill the selection with that colour. Press 'CTRL+D' to deselect the selection and get the rectangle back by CTRL and clicking Layer 1. Whilst still on your top layer, click 'Delete' to delete the excess border on our nabar. Go to 'Layer - Flatten Image' and there you go, it's complete. Here is my final image. Click the image for a much larger version.
Last Updated Saturday, October 11th, 2008
|
|
