Announcement

Collapse
No announcement yet.

Build custom nav bar & rollover buttons in Photoshop

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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
    www.creationspraise.com
    www.secretsoforganizedpeople.com
    www.huntresscustom.com

    The one who dies with the most toys wins . . . . . . . . nothing! (Matthew 16:26)

  • #2
    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!

    Comment


    • #3
      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 . . .
      www.creationspraise.com
      www.secretsoforganizedpeople.com
      www.huntresscustom.com

      The one who dies with the most toys wins . . . . . . . . nothing! (Matthew 16:26)

      Comment


      • #4
        Re: Build custom nav bar &amp; 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!

        Comment


        • #5
          Re: Build custom nav bar &amp; 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
          www.creationspraise.com
          www.secretsoforganizedpeople.com
          www.huntresscustom.com

          The one who dies with the most toys wins . . . . . . . . nothing! (Matthew 16:26)

          Comment


          • #6
            Re: Build custom nav bar &amp; 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)


            Comment


            • #7
              Re: Build custom nav bar &amp; 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)


              Comment


              • #8
                Re: Build custom nav bar &amp; rollover buttons in Photoshop

                Gosh i would never have been able to figure that out
                Very Good Tip Indeed!!!
                robobobo
                Blog Insomnia.com Blogging Help,Guides & Tips
                Techinfo-4u.com Tech Discussions and Guides
                www.visionlandscapes.ie
                [COLOR=#22229c[/COLOR]

                Comment


                • #9
                  Re: Build custom nav bar &amp; rollover buttons in Photoshop

                  So glad I could be of help!

                  ====bowing====
                  www.creationspraise.com
                  www.secretsoforganizedpeople.com
                  www.huntresscustom.com

                  The one who dies with the most toys wins . . . . . . . . nothing! (Matthew 16:26)

                  Comment


                  • #10
                    Re: Build custom nav bar &amp; 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. :)

                    Comment


                    • #11
                      Re: Build custom nav bar &amp; 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
                      www.dabsoflight.com

                      For fine pixel art and photos
                      pixelpainter@verizon.net

                      Comment


                      • #12
                        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

                        Comment

                        Working...
                        X