• 0

Calling Photoshop Wizards...


Question

OK, let me explain. I am farily new with Photoshop 6.0, and I have followed a tutuorial I found on the internet to make a website interface, which I have completed with sucess.

However, here's what's problematic. How do I implement HTML for the buttons on the interface? Any help will be appreciated....

Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0

Not sure on the whole proccess but you need to create slices. From there I think you export to image ready. I believe in image ready you can add the html code. Again i am not sure but think that is how is needs to be done.

Link to comment
Share on other sites

  • 0

Are you talking about Image Mapping?

"An imagemap is just a graphic that acts like a hyperlink. However, this graphic is split up into regions which act as different links, so that one picture can take you to more than one page. "

You can easily do that with Dreamweaver/fireworks

Or if you don't have those available, try it the old fashioned way:

01. Make an html file with the basic tags (html/head/body)

02. Then make that file contain ur image but here is the trick

"imagemap.gif"

(any dimensions doesn't matter, but be consistent)

03. save file, run it and then you'll notice that the co-ordinates are given in the status bar

04. grab the coordinates

Square: by placing your mouse over those points.

Record the numbers (top left x, top left y, bottom right x, bottom right y)

Circle: (the x and y coordinates of the center and the radius)

polygon: just list (x,y) of as many points as you like, moving clockwise

When you are done: make a new html file and the code should look like:

imagemap.gif

coords="50,85,165,180"

href='http://whorcare.com'>

Link to comment
Share on other sites

  • 0

On the tool bar there's a buton to open your work in ImageReady 3,click there and make slices arround the buttons (using the slice tool under the magic wand in the toolbar),your image will be subdivided in several areas.

Go to menu "File/Save Optimized As" and select "Html and images" and "All Slices",and save.

Now just make your changes to the buttons so they look they are pressed (Ex.Using Bevel and emboss) and select the button slices with the "Slice Select Tool" (Just press the slice tool for a second and it will show up).

Now do a "File/Save Optimized As" again and while saving change the name of the file so that it will not be the same from last time,select as well "Save Images Only" and "Selected Slices" and save inside the folder "Images" that Image Ready created last time.

Now Using "Dreamweaver" (go to http://www.macromedia.com/software/dreamweaver/trial/ if you dont have it and download the 30Day Trial) open the html file created by image ready and select the slice you wish to make in to a button ,go to the Behaviors Menu (if you dont see it press SHIFT+F3) and with the slice selected press the "+" in the menu to add an action,select "Swap Image" in the action and a menu will pop up asking wich image to switch to,just select the alternative image for the button and it will be done.

I hope it will help :)

and sorry for the bad English but i'm from Portugal :D

Link to comment
Share on other sites

  • 0
Originally posted by AlienHrGig

Yes it is :D

you know the great master that created the Alien for Ridley Scott's movie?

He?s just the best damn abstract dark artist ever, my hero, my inspiration:DD

just that

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.