dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: how to create a menu using layers?

  1. #1
    Join Date
    Feb 2003
    Posts
    72

    how to create a menu using layers?

    I have Adobe Photoshop 6.

    I am trying to create a menu with an image as the background. Above the background are the options - Home, Contact us, About us and so on.....

    Once i create a new layer for the text mentioned above, i then need to divide each of the above options so i can create a link for each of them.

    The problem is, i just do not know how to do it, or where to go from here?

    I have been told that i need to slice and crop it?? Don't know how to do this.

    Hope someone can help me?

    Thanks in advance.

  2. #2
    Join Date
    Jan 2003
    Location
    Peg City
    Posts
    638
    I would say that you should look at some menu scripts and analyze them so that you can edit it to add your images. Check www.dynamicdrive.com for some of these menus. If you need any help customizing the menus, post again.

    Havik

  3. #3
    Join Date
    May 2003
    Location
    Central Ohio, U.S.
    Posts
    26
    bash,

    While I agree with Havik to some degree, there's really no need to go looking at unrelated scripting stuff for this. It can be easily accomplished in Photoshop.

    When you open your image in Photoshop, you should see rulers along the top and left side of the image window. (These are usually gray bars with little hash marks and numbers in them.) If you don't see the rulers, go under the View menu in Photoshop and select Show Rulers (if you're on Windows, Ctrl-R is probably the keyboard shortcut). Also, while you're in the View menu, make sure that it says Show Guides (not Hide Guides) and that the Snap To Guides option is checked. (These last two items are for the next step.)

    Next, go to your image window and click somewhere inside the left ruler ... and with the mouse button still held down, drag to the right. You should see a dotted line following your cursor. This is a guide. Drag the guide in between two menu items (like Home and Contact Us) so that you create an imaginary separation line between the two options. Let go of the mouse button, and the guide will change into a solid, bright line. Now repeat this step over and over again until you've created imaginary separation lines between all the stuff you want to link to. (This will also work by clicking and dragging from the top ruler, too.) Note: You can move guides around as much as you want ... even after you've placed them.

    You've just finished the "slicing" part that you mentioned.

    Once the guides are in place to your liking, save the image file. Now select the Marquee tool (the dashed box in the main toolbar), go to the image window, and move the cursor over the edge of the image near one of the guides. Click and start to drag, and an animated, dashed box (a "marquee") should start to form and follow your cursor. Drag this marquee over to the next guide, and the marquee should snap to it automatically. Now, you should have selected an area of the image that you want to use as a button/link.

    Next, with the marquee still active, go to the Image menu in Photoshop and select Crop. Everything outside the marquee in the image window should disappear, so you're only left with portion you want to use as a button/link as well as the guides you used to create the marquee.

    You've just finished the "cropping" part that you mentioned.

    Now make sure you use the Save As function (not the Save function) under the File menu, and call this graphic whatever you want ... like menu_01.gif or menu_01.jpg or whatever. Close the image window after it's saved.

    Next, open to the "master" image file (the one with all the guides you placed), and repeat the previous cropping steps until you've saved the entire image as a bunch of separate chunks (menu_02.jpg, menu_03.jpg, etc.). Make sure you stick to the guides as you split up the "master" image ... otherwise, things make look weird later when you bring all the chunks back together.

    Finally, go into your Web design program and just place/import the separate images one after the other. If all goes well, they should seamlessly stack together and appear to be one image. Note: To avoid possible graphic shifting and display problems, make sure you set the border to 0 (zero) on the images that you use as buttons/links.



    Hope that helps,

    Jason

  4. #4
    Join Date
    Feb 2003
    Posts
    72
    It's definitely helped!!

    Thank you 'J'

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
  •  
HTML5 Development Center



Recent Articles