Buttonize graphics - Tilted Forum Project Discussion Community

ataylor20 · 12-10-2006, 11:28 AM

Not sure if this is the right spot to ask this question... So if its not I apploigize.

I have some graphics that I want to add to a website and will continually be adding more that I want to buttonize each. I have read serveral tutorials on how to do this in adobe CS and WOW is it not a simple task.

Is there a program or a auto script or something that I can use to do this? (Novice here so speak plainly and indepth)

Thanks a ton!

Andrew

ngdawg · 12-10-2006, 12:04 PM

Depends what you mean by 'buttonize'....if you mean a larger page to open upon clicking-in Dreamweaver it's very simple to do and can be done a couple of different ways-either by making a link (highlight the 'button', drop the Modify menu, go to 'Make a link') or go to the behaviors tab, click on the + sign and in that menu, open 'Browse to', fill in the size info and choose how you want the window to open by clicking on the behavior showing in the tabbed 'behaviors' page under 'events'.
A 'button' is no more than a graphic to which you attach behaviors. Every graphics program has their own version of what a button 'should' be; I prefer this straight forward approach. All of mine are graphics assigned behaviors and links once they've been inserted into the page's table.
I don't have info on how to do it in other webpage builders.

ataylor20 · 12-10-2006, 12:35 PM

What am trying to do is take a photo I have that is say 250 x 100 and make it in to a button. I found a tutorial on Adobe CS that shows how to do this but to do serveral images like this will take a while. I was wondering if theres more of a stream line process somewhere.

Adobe Button Tutorial

A graphic button like this is what I want, yet not for text, actually images that I have to add.

ngdawg · 12-10-2006, 01:09 PM

Ah....in PS:
File/new
rounded rectangle shape tool(choose your color of course that you want the button to be, if white, go ever-so-slightly gray)
Layer/layer style/bevel and emboss
Layer, flatten image.
Save as 'button'.
File/new/transparent
Open image to be used
Edit/copy/paste to new file
Select button(either by magic wand lasso and Select/Inverse or Marquee tool or Polygon)
Edit/copy/paste over image.
In layers, reduce opacity until image is seen clearly. Adjust image sharpness with Image/Adjustments/Curves
You can also just paste the image on top of the button and reduce its capacity instead-depends on the image, really.
Save as.

By saving a basic button first, all you have to do is change the image and repeat the layering over of the button graphic and reducing its opacity.
Tutorials generally suck, I've found, as they seem to have a need to use every stupid little feature...I've done in 5 steps what my books list 20 for and have 're-taught' my instructors on a few tricks.

12-10-2006, 11:28 AM	#1 (permalink)
ataylor20 Insane	Buttonize graphics Not sure if this is the right spot to ask this question... So if its not I apploigize. I have some graphics that I want to add to a website and will continually be adding more that I want to buttonize each. I have read serveral tutorials on how to do this in adobe CS and WOW is it not a simple task. Is there a program or a auto script or something that I can use to do this? (Novice here so speak plainly and indepth) Thanks a ton! Andrew __________________ I'd bend her over... How about You?

12-10-2006, 12:04 PM	#2 (permalink)
ngdawg peekaboo Location: on the back, bitch	Depends what you mean by 'buttonize'....if you mean a larger page to open upon clicking-in Dreamweaver it's very simple to do and can be done a couple of different ways-either by making a link (highlight the 'button', drop the Modify menu, go to 'Make a link') or go to the behaviors tab, click on the + sign and in that menu, open 'Browse to', fill in the size info and choose how you want the window to open by clicking on the behavior showing in the tabbed 'behaviors' page under 'events'. A 'button' is no more than a graphic to which you attach behaviors. Every graphics program has their own version of what a button 'should' be; I prefer this straight forward approach. All of mine are graphics assigned behaviors and links once they've been inserted into the page's table. I don't have info on how to do it in other webpage builders. __________________ Don't blame me. I didn't vote for either of'em.

12-10-2006, 12:35 PM	#3 (permalink)
ataylor20 Insane	What am trying to do is take a photo I have that is say 250 x 100 and make it in to a button. I found a tutorial on Adobe CS that shows how to do this but to do serveral images like this will take a while. I was wondering if theres more of a stream line process somewhere. Adobe Button Tutorial A graphic button like this is what I want, yet not for text, actually images that I have to add. __________________ I'd bend her over... How about You?

12-10-2006, 01:09 PM	#4 (permalink)
ngdawg peekaboo Location: on the back, bitch	Ah....in PS: File/new rounded rectangle shape tool(choose your color of course that you want the button to be, if white, go ever-so-slightly gray) Layer/layer style/bevel and emboss Layer, flatten image. Save as 'button'. File/new/transparent Open image to be used Edit/copy/paste to new file Select button(either by magic wand lasso and Select/Inverse or Marquee tool or Polygon) Edit/copy/paste over image. In layers, reduce opacity until image is seen clearly. Adjust image sharpness with Image/Adjustments/Curves You can also just paste the image on top of the button and reduce its capacity instead-depends on the image, really. Save as. By saving a basic button first, all you have to do is change the image and repeat the layering over of the button graphic and reducing its opacity. Tutorials generally suck, I've found, as they seem to have a need to use every stupid little feature...I've done in 5 steps what my books list 20 for and have 're-taught' my instructors on a few tricks. __________________ Don't blame me. I didn't vote for either of'em.