actual signature

[Evoir]

Howdie,

I am working on a clients site, and I am not a graphics wiz by any means. I can poke around in photoshop and fireworks and less in illustrator. I have inherited some files, one of which is a .tiff file of the clients signature. It does not have clean lines, is this inherent in a pixel based file?

http://dev.lizkinder.com/images/LK.SIGNATURE_ex.gif

If I have her re-do this signature, what is the best approach to have a clean signature for the web? Should she write it on white paper and scan it? Do I need a Wacom tablet? Suggestions?

I have tried to include the picture, I hope it works.

[Evoir]

Also, I took that above signature and rotated it, and shrunk it, and it looks like crap! Here is an example: http://dev.lizkinder.com/indexfq.shtml

If you look at this a few days from now, it could be that it has been fixed, but if it looks crappy, I still need some help :hehe:

[Wassercrats]

The most advanced graphics work that I do involves a combination of MS Paint, MS Works, Irfan View, and http://www.gifworks.com or http://www.myimager.com . Needless to say, I'm not a graphics person, but in Irfan View, the median filter effect did pretty good. I'll post the improved signature if you want, but you probably have something like a median filter in one of your tools.

[Evoir]

Hey thanks for helping me. :)

hmmm. It's called a median filter effect? Poking around in Photoshop....

[Jeff]

Maybe things look different on the LCD monitor I'm using...

Just resizing them in Photoshop looks fine to me, but I don't see what is so awful about the above image???

http://marinearchitecture.com/test/LK.gif

http://marinearchitecture.com/test/LK2.gif

[Evoir]

when you look close, it is all pixelated. Why I resized it and rotated it, it looked even more pixelated. Did you look at the link above? I am looking at it on an lcd monitor as well...not the greatest either. Oh, and yours does look better, but I want it to look smoooth.

[Wassercrats]

Well, since the median filter improved the big signature in the first post, I'd use it if that's the size you want. I haven't tried it on the size you have on that webpage, but I copied the webpage one and pasted it to Irfan View, and saw what Jeff saw, which was fine. What size do you want to use?

[Evoir]

you don't see the signature as pixelated? Not quite sure on the size yet, as I am just in the early design phase... Just looking to see if I can make it look better.

[Wassercrats]

Do you have an example of a signature that looks any better than the ones Jeff posted? I don't have an LCD monitor, so things don't look as sharp to me, but I don't think a signature from a website can get much better.

[Evoir]

Look here (http://www.jillrosenwald.com/)

this one seems much smoother.

[Wassercrats]

I think you've been optically illuded. That signature doesn't look any smoother to me. In a way, it is smoother, but that's only because there is a smaller percentage of edge because the lines are thicker. It's the edges that have to be anti-aliased, and the edges of the one you like are just as pixelated as yours, if not more.

The only way you are going to make your signature look better, at least to you, is probably to get the signer to write with a thicker pen or marker or make the background grey instead of white.

[Evoir]

hmm. Maybe I am just not fond of her signature? :) I was afraid of this...
And I wondered about doing it with a thicker pen. So, is the best way to do this with a ticker pen and scan it in, or should I be looking at getting a wacom tablet or something?

Thanks again and again for helping me figure this out. :D

[Randall]

Evoir, the resized version that you linked to is fine! :) The trouble is, you've set the wrong size values in the HTML (it should be 200x127), so the browser is shrinking it -- and browsers do a horrible job resizing graphics.

If you really want it to be 150x95, make it that size in Photoshop.

Ranadll

[TVB]

Evie,

Twice (maybe more?) in this thread you wondered aloud if you need a Wacom Tablet. I think you need to follow your fates and gut instinct here and get it ;) before that 'wonder' fades away. Seems like as good as an excuse as any :P

Betsy
--I had one, and used it only for signatures, then traded it away to someone who helped me out some.

[Evoir]

haha. No, I just have had 1 experience where I had to hand write something and someone had me use the wacom. It is my only experience with handwritten graphics :)

After all this discussion, i think the outcome is that I am not happy with this signature as the anchor for the website. I may use it somewhere else on the site, but not as the top graphic.

But, Betsy, you are not that far off... I was looking up prices on em today.... :D

[Evoir]

Randall,

I forgot that I resized in in html. Silly mE! I've got another design idea in mind anyway, but THANK YOU!

[Randall]

I forgot that I resized in in html. Silly mE! I end up doing that a lot by accident because I hand-code my HTML. "Ewww, why does that graphic look so bad?" Then it dawns on me that the size is wrong... I had one, and used it only for signatures Maybe my old serial-type Wacom is just too slow, but I couldn't see using it for signatures. Too much lag, and I like the natural roughness you get from a scan.

A Wacom is great for touching stuff up, though. Painting with a mouse is like writing with mittens on.

Randall

[TVB]

Oh..I had a great fantasy one day and some money burning a hole in my pocket. I bought it and think it came out of the box maybe five times. The person who I traded it off to is into animation and is making real good use out of it. Mine had a pen however...

Betsy

[Wassercrats]

Does this look ok? I blurred it and decreased the gamma correction:

http://www.polisource.com/PublicMisc/signature.gif

Whatever you do, get her to sign her name several times and select the best looking signature.

[Jeff]

Maybe my old serial-type Wacom is just too slow, but I couldn't see using it for signatures. Too much lag, and I like the natural roughness you get from a scan.

A Wacom is great for touching stuff up, though. Painting with a mouse is like writing with mittens on.
Same here with a serial intuous 9 x 12... a little too much lag for signatures.

But I do love my wacom tablet and use it every single day. I simply can't imagine editing photos without it - for example brushing edges, blending edges, erasing things I don't want in the photo, cloning areas, and lots more are just so much easier and faster with the pen for me than trying to use a mouse. If you have a photo editing program, you have to get a wacom tablet :)

[Evoir]

oh no! I must have a tablet? hahahah maybe...

Here's the new direction of the page, sans signature. I think I'll use her signature on the about page, which doesn't exist just yet. And, I will probably put back the signature if the customer wants it that way ;)

http://dev.lizkinder.com/indexred.shtml

Whatdoyouthink?

[Randall]

Yeah, that looks stronger than the signature version (although I liked the extra white space it created).

Not sure how I feel about Wassercrats' new avatar, though. ;)

Randall

[Jeff]

oh no! I must have a tablet?
yes, I'm sorry, but it's been decided you must buy it for yourself as an early Christmas present... er. an early 4th of July present maybe :P ;)

Then again, I'm still working on getting a floppy drive %)

[kitchin]

My version of Photoshop resizes better in RGB or CMYK than it does in Indexed Color. For a GIF, I switch to RGB, shrink, and then back to Indexed Color. Also, something a simple as adding contrast before resizing can help with thin lines.

Your new design looks great! One quibble: on the text menu at the bottom, I'm seeing "mix and match" cut by a line break.

How about instead of

<p ALIGN="CENTER" CLASS="form"><a HREF="#">stoneware</a> | <a HREF="#">high gloss</a> | <a HREF="#">stripped rim</a> | <a HREF="#">glossy white</a> | <a HREF="#">red clay</a> | <a HREF="#">urban chic</a> | <a HREF="#">mix and match<br>

</a><a HREF="#">order stuff</a> | <a HREF="#">about Liz Kinder</a></p>

something like

<center><table width=600><tr><td>
<p ALIGN="CENTER" CLASS="form">
<nobr><a HREF="#">stoneware</a> |</nobr>
<nobr><a HREF="#">high gloss</a> |</nobr>
<nobr><a HREF="#">stripped rim</a> |</nobr>
<nobr><a HREF="#">glossy white</a> |</nobr>
<nobr><a HREF="#">red clay</a> |</nobr>
<nobr><a HREF="#">urban chic</a> |</nobr>
<nobr><a HREF="#">mix and match</a> |</nobr>
<nobr><a HREF="#">order stuff</a> |</nobr>
<nobr><a HREF="#">about Liz Kinder</a></nobr></p>
</td></tr></table></center>

So the width doesn't depend on the font size, which the user may change. I'm sure there's a better way, but I don't know much CSS.

[Evoir]

yeah, I had just thrown those links in there to see how it wold look. I was torn between even having those links at the bottom or not... So, I took them out for now. New url: http://dev.lizkinder.com

Client is having a photo shoot of her pottery in the next few days, and then I'll be able to build some more pages out. Then, I'll show her. I hope she likes it. :)