Transparency

DrewBoyd · 03-21-2016, 05:59 PM

Well, I'm back.

I have wanted for two years to make the little images that I use for scene break glyphs transparent -- pretty much since I realized that in sepia mode they had hideous white squares around them.

So thanks to you all sorting out my recent wildcard fiasco, I was feeling all cocky and decided to try to tackle it again. So I got Aaron Shepard's book "Pictures on Kindle" and thought I followed the GIF steps exactly...

Dismal failure. Ugly white squares mocking me. Ugh.

I tried searching here, but didn't find anything that addressed transparency. Could someone please point me to the correct forum to search in order to continue my quest?

Thanks so much! Hope you all are doing well!

RbnJrg · 03-21-2016, 06:34 PM

Quote:

Originally Posted by DrewBoyd

Well, I'm back.

I have wanted for two years to make the little images that I use for scene break glyphs transparent -- pretty much since I realized that in sepia mode they had hideous white squares around them.

So thanks to you all sorting out my recent wildcard fiasco, I was feeling all cocky and decided to try to tackle it again. So I got Aaron Shepard's book "Pictures on Kindle" and thought I followed the GIF steps exactly...

Dismal failure. Ugly white squares mocking me. Ugh.

I tried searching here, but didn't find anything that addressed transparency. Could someone please point me to the correct forum to search in order to continue my quest?

Thanks so much! Hope you all are doing well!

You talk about little images; can you post any of them here?

DrewBoyd · 03-21-2016, 09:27 PM

This is the sort of thing I'm talking about. These examples are actually larger than they are in the books. They are just small little pics to indicate a scene change or POV change.

I took the JPEGs into PaintShop, moved them from the background to Layer 1, deleted the background, deleted the white around them, and saved them as GIFs. The files do have transparency around them. Until they get into the Fire -- then they go back to ugly white boxes.

RbnJrg · 03-22-2016, 08:40 AM

It seems that your images doesn't have a transparent background. I have reprocessed them and now it seem to work. I attach an epub so you can see the source code and the new images. In the second case, I followed another aproximation: instead of a transparent .gif, I used a .svg image. For that kind of images (linearts) is better to use .svg.

Regards

DrewBoyd · 04-02-2016, 03:39 PM

Quote:

Originally Posted by RbnJrg

It seems that your images doesn't have a transparent background. I have reprocessed them and now it seem to work. I attach an epub so you can see the source code and the new images. In the second case, I followed another aproximation: instead of a transparent .gif, I used a .svg image. For that kind of images (linearts) is better to use .svg.

Regards

Thank you so much! I had no idea I wasn't saving the images properly. I was able to take your file and figure out what I had been doing wrong. I really appreciate it -- I have been trying to solve this puzzle for over a year. Couldn't be happier to finally be transparent!

Now I'm off to learn all about SVG files...

RbnJrg · 04-03-2016, 09:03 AM

Quote:

Originally Posted by DrewBoyd

Thank you so much! I had no idea I wasn't saving the images properly. I was able to take your file and figure out what I had been doing wrong. I really appreciate it -- I have been trying to solve this puzzle for over a year. Couldn't be happier to finally be transparent!

You are welcome

jcsalomon · 05-19-2016, 10:53 AM

Is there a way to make such images visible when the user chooses a white-on-black display theme? (Perhaps not with PNG transparency, but maybe with SVG images?)

jackie_w · 05-19-2016, 11:44 AM

Quote:

Originally Posted by jcsalomon

Is there a way to make such images visible when the user chooses a white-on-black display theme? (Perhaps not with PNG transparency, but maybe with SVG images?)

I don't know the answer to this but if it was me I'd try a "cheat's way" with the SVG image.

Just open it in a text editor. Almost the last line says:

Code:

style="fill:#000000"

i.e. black (#000000)

I'd just make it a colour which would be visible on both a black and a white background, namely a shade of grey (e.g. #aaaaaa) for eink, or maybe something a bit more colourful if I always read on a colour tablet/phone.

GrannyGrump · 05-24-2016, 07:33 AM

If your images are truly tiny, you can create them as a glyph in a font. I do this frequently for fleurons and dividers, and then use a font size of 3em up to 8em to make them display large enough for the purpose.

I use Inkscape to do a bitmap tracing of the image, and then import that resulting svg into my font editor and create a custom font. (Type3 from CR8 software --- free demo is pretty much feature-unlimited, time-unlimited, but will only save a max of 50 characters) If you find this interesting, maybe I could put up a small tutorial.

EDIT TO ADD: I have successfully used images up to 600x600 px to do this, the font editor lets you scale the svg to a usable size. You could probably go even larger, but I have never tried.

The great thing about using this method, is that the decorations are part of the font, and will change color along with other text if the user chooses to use night mode, sepia, etc.

03-21-2016, 05:59 PM	#1
DrewBoyd Member Posts: 14 Karma: 10 Join Date: Feb 2016 Device: Kindle Fire	Transparency Well, I'm back. I have wanted for two years to make the little images that I use for scene break glyphs transparent -- pretty much since I realized that in sepia mode they had hideous white squares around them. So thanks to you all sorting out my recent wildcard fiasco, I was feeling all cocky and decided to try to tackle it again. So I got Aaron Shepard's book "Pictures on Kindle" and thought I followed the GIF steps exactly... Dismal failure. Ugly white squares mocking me. Ugh. I tried searching here, but didn't find anything that addressed transparency. Could someone please point me to the correct forum to search in order to continue my quest? Thanks so much! Hope you all are doing well!

03-21-2016, 09:27 PM	#3
DrewBoyd Member Posts: 14 Karma: 10 Join Date: Feb 2016 Device: Kindle Fire	Glyph samples This is the sort of thing I'm talking about. These examples are actually larger than they are in the books. They are just small little pics to indicate a scene change or POV change. I took the JPEGs into PaintShop, moved them from the background to Layer 1, deleted the background, deleted the white around them, and saved them as GIFs. The files do have transparency around them. Until they get into the Fire -- then they go back to ugly white boxes.

05-24-2016, 07:33 AM	#9
GrannyGrump Obsessively Dedicated... Posts: 3,221 Karma: 35037583 Join Date: May 2011 Location: PA {back in the usa!} Device: Sony PRS-T2, ADE on PC	If your images are truly tiny, you can create them as a glyph in a font. I do this frequently for fleurons and dividers, and then use a font size of 3em up to 8em to make them display large enough for the purpose. I use Inkscape to do a bitmap tracing of the image, and then import that resulting svg into my font editor and create a custom font. (Type3 from CR8 software --- free demo is pretty much feature-unlimited, time-unlimited, but will only save a max of 50 characters) If you find this interesting, maybe I could put up a small tutorial. EDIT TO ADD: I have successfully used images up to 600x600 px to do this, the font editor lets you scale the svg to a usable size. You could probably go even larger, but I have never tried. The great thing about using this method, is that the decorations are part of the font, and will change color along with other text if the user chooses to use night mode, sepia, etc. Last edited by GrannyGrump; 05-24-2016 at 07:41 AM.

05-19-2016, 10:53 AM	#7
jcsalomon Zealot Posts: 98 Karma: 1204 Join Date: Jun 2012 Device: Bookari (née Mantano Reader) on Android; Kindle Fire HD	Is there a way to make such images visible when the user chooses a white-on-black display theme? (Perhaps not with PNG transparency, but maybe with SVG images?)

Advert

Advert