Creating a Navigation Bar in photoshop/dreamweaver

I really wanted to get focused on building my actual site, i have spent so much time on the blog, which is great because i feel more confident with CSS but at the moment I need to start creating my other pages.

I thought about what would come first, taking my insperation from Albertos Oveido’s site, I needed a base homepage, simple with photos and links. But I had no clue how to make a navigation bar….

so i YouTubed it and found this amazing video which helped me make my navigation bar.

So I started creating the navigation bar that would run throughout my website (except the home screen)

I did use my common sense ot change a few things, for instance in the video you are taught how to get a highlighted effect on roll over, i didn’t want this, I wanted just the taxt to change colour.

this is how i achieved the pink rollover on link effect. Originally i didn’t want pink because it was to feminine, but it fits so weel with my picture and will help establish myself as a brand. The grey overtones with pink highlights.

Then I built the sidebar div and inserted all the relevant photos.

I put my chosen grey tone as the background and added my photo in. The snapshot above is a me testing the page in my browser and hovering over the word gallery.

This is how i got the text to change on roll over, it was a lot simpler then i expected, but I wouldn’t have been able to do it without the video help.

“When Clicked go to URL:” is the place where you can make the links active, this is something i must remember to do when all pages are made.

After looking at this i decided the dark grey was too binging, it would distract from the photos and make the viewer feel confined and uncomfortable, so I changed to colour to a light grey almost white. I Have yet to add the home link though.

I had this basic structure down now, so I wanted to start on the home page, originally i thought a similar sidebar, maybe in grey, and a large picture would look nice.

I decided that this looked awful.too much going on and it look amateurish. So I took away the picture, but then I was left with this huge gap. So I enlarged my photo and enlarged the link jpg size and put them side by side to create this.

Simple but i really like it, it instantly create a theme which will be continuous, and it isnt to busy and not too empty. I added the rollover text effect so if i hovered over Gallery it becomes this…

One thing I strugled with when playing around with all of this is mixing % with px. for instance i don’t want to set the px that match my 13 inch screen and then find on a 20 inch the website is a huge scramble. so % are more helpful. But i couldn’t work out how to position a photo using % this is my next job. I really feel like my site is coming together now. I’ve finally found a visual i’m happy with, even though that meant scrapping the colour swatches and logos I had made.

Thinking about it, the home page could probably do with my name on it, maybe running up the side of the photo, on one side, probably the right side. Another job for me to do.

One thought on “Creating a Navigation Bar in photoshop/dreamweaver

  1. I think this is one of the most vital info for me.

    And i am glad reading your article. But want to remark on few general things, The website style is ideal, the articles
    is really nice : D. Good job, cheers

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s