request to convert image to png

[jscheuer1]

The ideal way to do something like this is to use only black. At the edges should be pixels that are black and partially transparent in a gradient to all transparent. That way it will look smooth at the edges against any color background. The better/finer this gradient is, the more the image can be scaled without losing smoothness. I know The Gimp and other advanced image editors can do that, I'm just not sure how.

[djr33]

I just forgot to make everything black when I converted the image before. In Photoshop there's no direct way to apply an alpha channel (as far as I know) but you can create a new channel, which by default will be an alpha, then paste the contents of a black and white image into it, thus applying that image as an alpha channel. It took me a while to figure that out the first time I used it, but it works well. I imagine the process in the GIMP is the same.

[james438]

djr33, what you created works great. I like what you made. The image is from one of those weird fonts that are out there. The letter Q in that font looks great as a cross/divider on the http://www.sovgraceopc.org site (A picture of me is on that page. Hint, I am wearing glasses on the top image and wearing a black shirt. I am male.) The Q on that page is bold, but is too much of a pain to get that font to show up in mobile browsers until it occurred to me to detect whether the visitor was using a mobile device by using $_SERVER[HTTP_USER_AGENT] and doing a str_replace of Q with a png image of the budded cross (or imported font letter Q).

In the first post in this thread in the second EDIT you see the substandard png version I created using a script that I posted later in this thread that creates a png version of any character of a particular font file. The reason it is substandard is that the image is not in the bold format. I have tried creating a script that will create a bold version of the budded cross that we are talking about in this thread, but I can't seem to get it to look quite right, which is why I am am happy with the image you posted.

If you are looking at http://www.sovgraceopc.org with your mobile browser and wondering why all of the Q's do not look like budded crosses it is because I am lazy and have not finished updating the rest of the site.

I have almost zero knowledge and experience with graphic design.

[djr33]

Ah, thanks for explaining that. I didn't notice the bold difference.

Well, if you'd like I could redo it with black-- if the white fuzzy border shows up on whatever background you're using. Let me know.

Graphic design isn't too hard once you start to figure it out. It might take some time, but start playing with it. With free programs like the GIMP it's easier to get into it in the first place, too.

[djr33]

The pen tool could work in theory, but it would take a long time and this image already has a built-in alpha channel ready to use.

[james438]

I downloaded The Gimp after learning about it in his thread. It is rather complicated for me, but I am glad to have it. Graphics design is not something I am eager to learn though.

I don't think there are any built in ways to create a png image of a character using php's GD library, but ImageMagick can, although I am less familiar with it. I want to try it sometime just for fun.

[jscheuer1]

I was able to obtain a very clean image of the character. While viewing the page in Opera I used its Dragonfly to increase the font size to 300px and remove all background and other overlapped elements to white. I did a print screen, pasted to The Gimp, cropped it to the size of the character. It was only 2 colors, black and white. I changed white to alpha and saved. The image could then be resized and any interpolation around its edges was a gradient of semi transparent black pixels. The Gimp is so good at resizing that these regions were thinner than I might have preferred, but adding a little blur can make them wider. The trick would be to add it only to the outer edges, or not. It's pretty good just as is, so I'm leaving that out. To prevent the forum from stepping on the images I'm uploading two in a .zip file. One is the full size, the other slightly smaller which exhibits those regions I mentioned.

cross.zip

[jcvintner]

Well, inspecting the images closer reveals that there's a white boundary around both of ours. The best solution is to use the image as an alpha channel with the entire image as black. What I did on the first replace resulted in partially transparent grays, to the blackness degree of those grays. What you did was similar, just with a different method.

However, after all of this, I've looked at James's first post again and I'm confused: the new PNG (from the edit) actually is already on a transparent background. James, is there anything more that should be done from that?

I flattened each image to demonstrate what I meant. The edge lines are ok in the Alpha example, but for some reason that method left behind artifacts outside of the edge lines. Here are both images with a thin red stroke added on a white background to demonstrate how to check transparency clipping the quick and easy way. Layer blending effectively removes the bits Alpha missed; It also allows the trim function to work correctly, reducing file size in the process. We use this method quite often at work prior to sending crops for printing.

As mentioned earlier, pen tool cropping would be ideal for the sharpest edge lines, normally the chop line is placed just inside the edge for a seamless transition, and thats how I would tackle the thin white tracing left by blending, alpha, or quick masking methods. Besides, a pen tool vector mask can be scaled without risking degradation to the image, especially handy if you're planning a full DTP kit.

From post#2 (Alpha)


From post#17 (Layer Blending)