Results 1 to 12 of 12

Thread: Build custom nav bar & rollover buttons in Photoshop
      
   

  1. #1
    Join Date
    Feb 2006
    Location
    Massachusetts
    Posts
    67

    Default Build custom nav bar & rollover buttons in Photoshop

    Naturally, when I designed my home page, I had to make it complicated. ** grin** . What I wanted to do involved having each button in my nav bar slightly different. I wanted the left edge to be flush, as usual, but the right edge will follow a curved shape.

    Somebody suggested using an image map, which is an excellent idea. However, I wanted to have a mouse over/rollover change.
    Like I said, must – be – difficult.

    This is how I built them in Adobe Photoshop. (These directions assume you already know your way around Photoshop.)

    You will start by creating your background image with your nav bar shaped just the way you want it. (If you created this with layers, you should make a copy that’s flattened. If you did use layers, before you flatten is a good time to make and save a selection of each button, with no background included. You’ll use these to make the color changes for the mouse over buttons.) Here’s mine:




    I. To make original navigation button:

    A. Make a rectangular selection around each button, leaving some of the background (this makes it easier to line them up on the page.)
    B. Make this a new layer with Control-J.
    C. Make no other layers but this one visible.
    D. Control-click (in layers palette) to select only this.
    E. Go to Image >Crop
    F. Go to File>Save a copy> save as jpg or gif or whatever, name it “navbar_1” or 2, etc. (It doesn’t matter where you save it, as long as you can find it later.)
    G. Go back in the Photoshop history to Step A. You should have the selection.
    H. Here’s one of mine:




    II. To make the mouse over button:

    A. Make sure your button is selected and go to Layer>Duplicate layer. Name this layer “navbar 1 mouse over” or the like.
    B. Load the selection for the button alone (no background, this should have been made earlier, or use whatever tools you need to select only the areas you want to change the color of.)
    C. Use Image>Adjust>Color Balance to change the colors. (+61, -82, -80 is for the nice purple I used. Write down the numbers you end up with so you can easily duplicate them in each button.)
    D. Make sure no layers are visible except for your duplicate and the color change selection.
    E. Layers>Merge Visible
    F. Control-click (in layers palette) to select just that area, then Image>Crop.
    G. Now “Save a copy” as jpg or gif or whatever, save as “navbar_1_mouseover” or the like.
    H. Here’s one of mine:



    III. To add these buttons to you BlueVoda page:

    A. You should have already added your background image to the page.
    B. Click on the “rollover” tool, find your navbar file, and click Open.
    C. Right click on your navbar image, select “Properties” and browse to your mouse over image.
    D. Click on the Link tab, and add your URL information.
    E. If necessary, resize and reposition the button to fit seamlessly into your background.
    F. Repeat for each button.
    G. Chose “Preview” and have fun seeing your button change color. (Well, that’s what **I** do!!)

    I hope somebody finds this helpful. And hope it's clear. If I've missed something, or you need clarification, feel free to ask.

    Sandy

  2. #2
    Join Date
    Oct 2005
    Location
    Italy
    Posts
    12,080

    Default Re: Build custom nav bar & rollover buttons in Photoshop

    It's a nice tip and very useful. I suggest that you shouldn't put the text in the buttons. If you simply save the button images in the BV buttons library, in their final size, you will be able to use not a rollover but an independent nab bar for each button, so in the future you will be able to edit the text without having to edit the button image again.
    Navaldesign
    Logger Lite: Low Cost, Customizable, multifeatured Login script
    Instant Download Cart: a Powerfull, Customized, in site, DB driven, e-products Cart
    DBTechnosystems.com Forms, Databases, Shopping Carts, Instant Download Carts, Loggin Systems and more....
    Advanced BlueVoda Form Processor : No coding form processor! Just install and use! Now with built in CAPTCHA!


  3. #3
    Join Date
    Feb 2006
    Location
    Massachusetts
    Posts
    67

    Default Re: Build custom nav bar & rollover buttons in Photoshop

    You are SOOOOO right! I goofed, flattened my background & saved it to put into BV. Then FORGOT to go back in the history to unflatten before saving (what I thought was an unflattened version) -- derrrrrrrrrrrrrrr.

    Imagine my dismay when I opened it to tweak some more, augh!

    So, yeah, if I ever want to change that text, I'll have a bit of work to do.

    Sandy <====trying to convince myself that I'll never want to change any of that text . . .

  4. #4
    Join Date
    Oct 2005
    Location
    Italy
    Posts
    12,080

    Default Re: Build custom nav bar & rollover buttons in Photoshop

    But if you only create the buttons, save them in the BV button library and use the method of the independent nav bar for every button, the text can be added directly in BV and changed whenever you want.....
    Navaldesign
    Logger Lite: Low Cost, Customizable, multifeatured Login script
    Instant Download Cart: a Powerfull, Customized, in site, DB driven, e-products Cart
    DBTechnosystems.com Forms, Databases, Shopping Carts, Instant Download Carts, Loggin Systems and more....
    Advanced BlueVoda Form Processor : No coding form processor! Just install and use! Now with built in CAPTCHA!


  5. #5
    Join Date
    Feb 2006
    Location
    Massachusetts
    Posts
    67

    Default Re: Build custom nav bar & rollover buttons in Photoshop

    You are absolutely right. It definitely would be the best way to do it.

    One advantage to using the rollover tool is that you can resize the images. That could be a useful option.

    Sandy

  6. #6
    Join Date
    Mar 2005
    Location
    Wilmington, Delaware USA
    Posts
    12,325

    Default Re: Build custom nav bar & rollover buttons in Photoshop

    Excellent tip!

    VodaHost

    Your Website People!
    1-302-283-3777 North America / International
    02036089024 / United Kingdom
    291916438 / Australia

    ------------------------

    Top 3 Best Sellers

    Web Hosting - Unlimited disk space & bandwidth.

    Reseller Hosting - Start your own web hosting business.

    Search Engine & Directory Submission - 300 directories + (Google,Yahoo,Bing)



  7. #7
    Join Date
    Oct 2005
    Location
    England, UK
    Posts
    4,193

    Default Re: Build custom nav bar & rollover buttons in Photoshop

    Nice one Sandy!

    VodaHost

    Your Website People!
    1-302-283-3777 North America / International
    02036089024 / United Kingdom
    291916438 / Australia

    ------------------------

    Top 3 Best Sellers

    Web Hosting - Unlimited disk space & bandwidth.

    Reseller Hosting - Start your own web hosting business.

    Search Engine & Directory Submission - 300 directories + (Google,Yahoo,Bing)



  8. #8

    Default Re: Build custom nav bar & rollover buttons in Photoshop

    Gosh i would never have been able to figure that out
    Very Good Tip Indeed!!!

  9. #9
    Join Date
    Feb 2006
    Location
    Massachusetts
    Posts
    67

    Default Re: Build custom nav bar & rollover buttons in Photoshop

    So glad I could be of help!

    ====bowing====

  10. #10
    Join Date
    May 2006
    Posts
    247

    Default Re: Build custom nav bar & rollover buttons in Photoshop

    Thats awesome! But I have no photoshop skills whatsever. It just doesn't click with me. Oh well. I have a pretty cool navbar as well. ( http://www.electronics4dummies.com ) If you want instructions, just holler. :)

  11. #11
    Join Date
    Sep 2006
    Location
    Oregon
    Posts
    74

    Default Re: Build custom nav bar & rollover buttons in Photoshop

    This button information is a great idea of which I intend to take advantage if I can get it to work out, but I have some other issues to address first such as how to publish my pages when it won't recognize my user name and password. Even after getting my password emailed to me. apparently it isn't the right one. I will however try to post this question to the proper, I hope department.
    But a great big thank you for your ideas about creating your own button designs. I have done all this sort of thing in "Scala," an old Amiga program that was beautiful for tutorials. It had most of the features I find in BlueVoda, but links work a bit differently and of course it goes about things differently.

    pixelpainter

  12. #12
    Join Date
    Jan 2007
    Location
    Coastal Australia
    Posts
    2

    Red face Please I need Help with saving to libraries

    Hi there all I am new and incompetent!
    I need help....I am trying Nav bar buttons I have made to the Nav bar library?
    How do I access and save items to the library?
    If you could help me I would be greatly apreciative!
    Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •