request to convert image to png

[james438]

4717

I want to convert this image into png format with a black cross with a transparent background. I'm hoping someone might be interested. I don't have the means or know how to do this.

Thanks

EDIT: You can see an example of this symbol here (http://www.sovgraceopc.org/). In most browsers and PCs the Q looks like the image shown above. This is not true for mobile browsers, which is why I am hoping to get the png version of that image. Technically it is the letter Q when viewed in a type of symbol font.

I also notice that the image I uploaded to DD was converted to jpeg format :(

EDIT: Here is a link to the png version I created. http://www.animeviews.com/images/pops/cross.png

[djr33]

I'm not sure what damage the conversion to JPG did. Repost with a link to the file somewhere else if this doesn't work for you.
You could also use a GIF if you wanted just simple transparency (either transparent or not).
But this PNG is about as good as you'll get from that.
4718

[james438]

I edited the post above with a link to the png version of the image. Not that it is needed since the version you created for me is excellent. Thank you :)

[djr33]

If you zoom in a lot to the PNG, you'll see the same fuzzy pixels in it that are there in the JPG version-- looks like the JPG conversion didn't harm anything.
If it turns out that the fuzzy pixels need to be removed, you probably just need to paint them out. But they're not visible unless you zoom in (or maybe against certain backgrounds), but they could also give it some texture.
Glad it works for you.

[bernie1227]

However, the main problem with jpg is not the quality of the original photo, but retaining the quality. Jpg is a compression format, and as such, the goalis to compress the picture, as to take up less space. Every time a jpg is saved, it compresses, if I remember correctly, by about 10:1 for each pixel. If there are a lot of fiddle pixels in the photo which make a big difference, this am effect it.
Hope I helped,
Bernie

[djr33]

JPG has a quality range of 1 to 10 (at least that's how it's displayed often, maybe it's really 1% to 100%), and the loss of quality varies by that, as well as by the details in the image-- in this case it's black and white so very little was lost. Originally I saw some fuzzy pixels and I wasn't sure if they were in the original or due to the JPG conversion. But they're in the original too, so it looks like JPG compression didn't do much.

Converting to JPG is a bad idea if you want to maintain full quality. But it can (as in this case) not do much damage. Other times (especially if the quality is set very low) it can be obviously lower quality; or it can be somewhere in the middle where there's essentially invisible quality loss that only appears if you later do other things to the image.

[james438]

I did upload the image to this thread in png format, but the forum decided to convert it to jpeg for some reason.

I could be wrong. I tried to upload it just now and it did upload it as png, so maybe I accidentally uploaded the wrong image.

I believe the image quality is 1 to 100. Take a look at imagejpeg (http://php.net/manual/en/function.imagejpeg.php).

[djr33]

I believe the image quality is 1 to 100. Take a look at imagejpeg.That's true. But in other programs I've seen 1 to 10. So I don't know what the technical specifications are for the format. It might in fact not have any literal "quality" specifications, just that various algorithms that can convert to JPG choose to do so with varying quality on whatever scale applies to that algorithm. The final image is just JPEG data... I don't think it's JPEG data at X%.

[jscheuer1]

The bottom line is that once an image is 'stepped on' using the JPEG format it can be difficult or impossible to retrieve the 100% quality/resolution it once had without resorting to the the original. That information isn't saved, you can only try editing the image back to higher quality. So always keep a backup of the original. I try to alway edit only copies. The three programs* I use have a scale of 1 to 100 or 1 to 99. So at least that much is available. There could be a number of other stops available in the format, like 11.765% for example. But 1 to 100 seems adequate. Some programs use 1 as the best quality, 100 as the worst, most are 1 as the most compression/least quality, 100 as the least compression/most quality.


*Paint Shop Pro, The Gimp, Xat Optimizer Pro

[djr33]

The bottom line is that once an image is 'stepped on' using the JPEG format it can be difficult or impossible to retrieve the 100% quality/resolution it once had without resorting to the the original.Right, but what I was trying to explain above is that the amount of damage varies greatly-- in this case, I can't see any at all.
As a general rule, it's good to save backups of full quality images, a very good idea.
But that's not the problem here-- James just uploaded a JPG or uploaded a PNG that was automatically converted to a JPG. The question was just whether, in this case, it would be worth redoing the conversion (to remove the background) with the original PNG. And it wasn't-- the quality from the JPG was fine.


Some programs use 1 as the best quality, 100 as the worst, most are 1 as the most compression/least quality, 100 as the least compression/most quality.It's this sort of variation that makes me wonder if it really isn't part of the format at all, just a part of certain/most algorithms that convert to JPG.

[james438]

Thanks for posting the graphics editors that you use jscheuer1. I recently downloaded The Gimp and am playing around with it.

[jscheuer1]

I don't see it as any real variation. It's just the way the scale is represented. Remember it's a double edged scale. As resolution increases, compression decreases. So it's just a matter of which (resolution or compression) is represented by the number. Unless you mean some with 1 - 99, others with 1 - 100. I think that might be indicative of one or both of:

99% is the highest quality you can expect form JPEG which is never 100% lossless. Programs that include 100% are lying to you.


In the JPEG format the scale is divisible into any reasonable number of equal and/or unequal increments.


Unless james438 uploads the original image to a server and gives us a link to it there, we cannot be 100% sure we are seeing the original.

I suspect though that the minor artifacts in the image are due to how it was first created, rather than conversion to JPEG. But that's only a suspicion. I could easily be wrong about that.

[djr33]

He did link to the original, and I've compared them both-- there's nothing to worry about in this case (even though that's not usually true).

[james438]

<?php
$im = imagecreatetruecolor(330, 400);
$bg = imagecolorallocate($im, 0, 0, 5);
$black = imagecolorallocate($im, 0, 0, 0);
imagefill($im, 0, 0, 5);
$text='Q';
$font = 'include/fonts/tt9832l.ttf';
imagettftext($im, 300, 0, 10, 320, $black, $font, $text);
imagecolortransparent($im, $bg);
header('Content-type: image/png');
imagepng($im);
imagedestroy($im);
?>

The above is kinda cool because it takes a character of a particular letter of a given .ttf font file and outputs it as an image with a transparent background using php's GD library.

You can see a larger version of the image of the letter Q here (http://www.animeviews.com/images/pops/cross.png). Actually, the image in the first post was the bold version. I am still working out how to do that.

Line 2: $im = imagecreatetruecolor(330, 400);
//changes the size of the box.

Line 8: imagettftext($im, 300, 0, 10, 320, $black, $font, $text);
//300 is the font size. 10 is the offset from the leftmost side of the box. 320 is the baseline of the font, not the bottommost location of the letter.

If you are curious the font I posted above is holiday pi regular (http://www.fonts.com/font/bitstream/holiday-pi/regular). You can also download it legally for free here (http://font.downloadatoz.com/font,4593,holiday-pi-bt.html). I believe it also comes bundled with various microsoft products like Microsoft Office or Microsoft Publisher so you may want to check around first before buying.

[bernie1227]

I thought the point of fonts was being able to read them :p

[james438]

To create a bold version of the letter you just draw the image 9 times in each of the 9 quadrants. The 8 quadrants that are not the center one are off center by 2px depending on the size of the image and the level of boldness you are going for.

bernie1227, I think fonts like the one I am working with are designed to store icons of a particular theme like Halloween or hand signals.

[jcvintner]

I want to convert this image into png format with a black cross with a transparent background. I'm hoping someone might be interested. I don't have the means or know how to do this.

In Photoshop you can import this image, and since you currently have highly contrasting content, it makes it really easy to use layer blending. Export to PNG 24 with transparency and negate the matting (unless you'd like to blend it more with the background using a mat color). I brought the blending to 184 on the Gray channel for this example to maintain the smooth edges, hope it helps. A smudge of gray remains for smoothness otherwise the image starts losing its edge.

4727

[djr33]

That can approximate it, but the best results are by using the image itself as an alpha channel. That's what I did for the image in the first reply in this thread.

[jcvintner]

Except through the Alpha, in your example, we end up with artifacts beyond the edge lines of the image, which you can see by applying a dark backdrop. One way to check this is to add a contrasting stroke to your edge if you'd prefer not to add a dark test layer.

[djr33]

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?

[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.

4728

[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)
4732

From post#17 (Layer Blending)
4733