Click to See Complete Forum and Search --> : Need Help w/ Saving Link Shapes Please...
banksworld1986
10-20-2007, 07:23 PM
Greetings.
Basically, I'm trying to create links in photoshop. I already know the basics, but I'm trying to save links that are angular. I need to save just the link, not a square image of the link. I can't figure out how to get around saving a rectangle vs. an angular rectangle. I've attached an example. Do I need to cut it with the lasso tool and right-click, save selection? Which I've tried but it didnt' work. Any advice would be appreciated. Thanks so much.
scragar
10-20-2007, 07:38 PM
cut it down to the smallest rectangular selection you can(crop tool), then make the background transparent(it's an eraser, something like magic eraser, but I can't remember).
harumph
10-22-2007, 10:05 AM
Are you going to also want rollovers (where the image changes color or moves a bit)?
Centauri
10-22-2007, 10:44 AM
A graphic can only be saved as a rectangular shape, with a width and height. To do what you want, you have to save the graphic in a format that supports transparency (.gif or .png) and make the area around the trapezoid transparent, as scragar alluded to above. The separate images can be stacked beside each other on the web page using negative margins so they actually overlap to close the visual gap between the sides.
harumph
10-22-2007, 11:19 AM
There is another way if you only have a few buttons. Look up "image maps". Not recommended with larger image blocks, but functional.
harumph
10-22-2007, 12:05 PM
Take a look at this. (http://www.alistapart.com/articles/sprites/)
banksworld1986
10-23-2007, 09:03 AM
Hello.
Yes I am going to want to use rollovers for the links. I've figured out the answer to my question on how to save link shapes. Now my next question stems from your comments. What would be the best way to create rollovers for these link shapes? Or should I even be trying to save the link shapes individually for the addition of rollovers?
I appreciate your comments and responses. Thanks!
Centauri
10-23-2007, 09:33 AM
Because of the angled sides of the link images, trying to do a full one-image sprite-based rollover will involve two rollover offsets and gets messy. I would use separate images, but with each containing both the normal and rollover images. An article discussing this can be seen here (http://www.wellstyled.com/css-nopreload-rollovers.html), although I normally prefer to stack the two states one above the other rather than horizontally as shown in the article.