Web Hosting Forum | Lunarpages
News: July 14, 2008 - New Contest! - Submit Your WordPress Theme Designs, Win BIG!
June 30, 2008 - Submit Your Site for the July 08 Site of the Month Award!
 
*
Welcome, Guest. Please login or register.
Did you miss your activation email?
July 25, 2008, 11:54:56 PM


Login with username, password and session length


Pages: [1]   Go Down
  Print  
Author Topic: making graphic buttons for links  (Read 1786 times)
MrPhil
Quantum Encyclopedia Writer
*****
Offline Offline

Posts: 3108



« on: February 01, 2007, 11:58:48 AM »

I have a number of links on my pages that I use an image (button) for. Presently, I'm creating the .gif files in a rather labor-intensive manner, and would like to find something to produce these .gif files more easily, without sacrificing design flexibility.

Currently, I hand-edit a PostScript file to draw the buttons just the way I want them (in Ghostscript/Ghostview), cut and paste over to The GIMP image editor, change the background color to transparent, slice and dice the arrays of buttons into individual files, and scale them down. This is unsatisfactory because of the time involved and the resulting quality isn't that great. For example, I have to spend a good deal of time on every button (they're ovals) to pick out all the pixels (fringing the edge) with some background color and change them to transparent. This also results in a rougher-than-I'd-like shape to the resulting button. (Can GhostScript be told not to anti-alias lines and curves?)

Is GIF transparency all-or-nothing? Button edges would be a lot smoother if there could be partial transparency. Does anyone know how to use GIMP to remove the background all in one go, without leaving behind a fringe of semi-colored pixels that have to be attacked by hand? Every time I've tried to select by color, it messes up the other colors that are to stay in place.

Producing on PostScript gives me minute control of font and placement (as well as easily producing additional buttons from a script function), but the act of cutting and pasting over to GIMP and then scaling has never produced satisfactory results. Especially troublesome is when I can't get button alignment precisely right because I can't get alignment on pixels the same for each button. Scaling effects also contribute to bluriness in text.

Anyway, are there any nice button image editors out there? Something free (or cheap) that produces buttons in GIF, PNG, or JPEG with transparent edges, and gives me exact control over what's produced (preferably not only selecting from a list of styles)? I don't want to use Flash or anything like that -- just standard format images. Failing that, any suggestions on how to do this better with PostScript and GIMP? I'm worried about using PNG with transparency because of poor support in IE6 browsers.

Thanks for any suggestions! 
Phil
Logged

leighsww
* The Tough Love Cuddly One *
Berserker Poster
*****
Offline Offline

Posts: 14072


WWW
« Reply #1 on: February 02, 2007, 02:05:40 PM »

Are you referring to the buttons on this page of your site?

http://www.catskilltech.com/Merchandise/index.html

If you are, then until someone can give you a button software program that can do it easier ... see if my following post may help you achieve better results regarding the fringing:

http://www.lunarforums.com/forum/index.php?topic=33302.msg250572#msg250572

NOTE: Since you aren't using CorelDraw, however, only the last two paragraphs in my post are what would be applicable to what you can do.

This method works the best for me with eliminating fringing to get a smooth, flawless transition.
Logged
MrPhil
Quantum Encyclopedia Writer
*****
Offline Offline

Posts: 3108



« Reply #2 on: February 02, 2007, 06:19:56 PM »

Yes, navigation buttons like those.

I do start out with a close background color, but I'd like to have the ability to put the buttons on any background. So, there shouldn't be any trace of the original background. With my current method, the problem is that there is anti-aliasing to "bleed" the border into the background. The pixels are the background + border color in varying amounts. When I use The GIMP's transparency tool, only the 100% background color get changed to transparent, and the rest have to be selected and changed to transparent by hand. Unfortunately, that is not only labor-intensive, but also tends to produce a slightly irregular border, as there's no smooth blend. My understanding is that GIF is "all or nothing" on transparency and JPEG doesn't have transparency (?), and while PNG has varying amounts of transparency, IE6 supports it poorly.

I tried rendering in Ghostview/Ghostscript with "1 bit" anti-aliasing (rather than the default 4 bits) and didn't see any substantial difference. I was hoping that it would draw nice crisp edges, but it didn't (possibly due to Point-to-pixel mapping?).

I suspect that part of the problem is that I'm doing the drawing in PostScript, and 1) there's not a good mapping from Big Points to screen pixel resolution, and 2) cut and paste into The GIMP (at yet another resolution?) is compounding the problem. If I could figure out how to get PostScript to draw onto exact screen pixels, then perhaps the image would cut and paste smoothly into The GIMP, and getting rid of the background would be clean and easy. Reading the GS FAQs, it appears that GIF support was removed when Unisys started enforcing its LZW patent. The patent has expired, but I don't see anything about GIF output going back in. That would be the best of all worlds for me -- scriptable graphics, wide choice of fonts, and with direct GIF output.

Has anyone had experience with aligning PostScript (Ghostview/Ghostscript) exactly on pixels, and turning off antialiasing so I don't have to turn semi-transparent pixels into fully transparent? Thanks much!
Logged

PM91326
Pong! (the videogame) Master
*****
Offline Offline

Posts: 20



« Reply #3 on: March 16, 2007, 06:15:45 PM »

paintdotnet has a freeware that works really well.

Here is their forum and good tuts on how you can create bottons. http://paintdotnet.12.forumer.com/index.php

For their FreeWare.... http://www.majorgeeks.com/download4548.html

The Pixel " TEETH " can be blurred out to make ur edges smoother...it takes some work non the less, but quality sometimes means you need to apply the time on the work at hand.

Tablets make the editing and work much easier IMHO.
Logged
MrPhil
Quantum Encyclopedia Writer
*****
Offline Offline

Posts: 3108



« Reply #4 on: March 16, 2007, 07:32:12 PM »

Thanks for the suggestion. Paint.NET can certainly do some cool effects, but I don't think it's what I'm looking for. 1) It requires that I download and install .NET 2.0, 2) It doesn't sound like it's scriptable, so I can make a minor change to a flat file and rerun everything at once, rather than doing each operation by hand, 3) many of the tutorials seem to be broken (missing images, 404s). Is there any advantage to Paint.Net over The GIMP or Photoshop?

Maybe I should read up on GIMP's "Script-Fu" (I think that's the name of it). That might let me produce cleaner graphics with scripting. It will have to wait, as I've got a lot of other stuff on my plate right now.
Logged

masonbarge
Pong! (the videogame) Master
*****
Offline Offline

Posts: 25



« Reply #5 on: April 02, 2007, 10:08:04 AM »

Here's one suggestion about .gif transparency where you need dithering.  Do the original on the same color background you expect to use behind it on the web page.  When you format it as a .gif, make the graphic's background color the transparent color, set tolerance to 0 or 1, and use 100% opacity on all partially transparent pixels.  This will give you a nice smooth edge at a minimum file size.

I use Paintshop Pro, so you may have to translate the technique.
Logged

"If this is coffee, please bring me some tea. If this is tea, please bring me some coffee."

                  ~ Abraham Lincoln
Pages: [1]   Go Up
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.3 | SMF © 2006-2007, Simple Machines LLC
Seo4Smf v0.2 © Webmaster's Talks


Valid XHTML 1.0! Valid CSS! Dilber MC Theme by HarzeM