Showing torn pages

[panox]

Is it possible to show the edges of old pages as they are? So that they appear on the background as old as they are?
I would like to have a transparent-effect on the pages on these regions.
The light blue background should disappear:

http://www.pano.szenerien.de/mz3v2.0.1/index.html

[Florian Nücke]

What you're describing is basically having a custom "shape" of the actual page, which is not possible. You could try making the actual page background transparent, but that'll give you massive performance problems. What you could try is setting the default page background to some color similar to the parchment, or even the overall background color and see how that works.

[CraziestOzzy]

yes it is possible. You can have the image as a .PNG rather than a .JPG, with the sides of the page transparent to your desired shape of old paper. I have had no performance issue trying this, providing the next page underlying your .PNG transparency does not itself show through a transparent side. This requires manually shaping each page so that the transparency of one page does not overlap the next.
Also ensure your boundary edge of the transparency is abrupt with no blending or smoothing effects on the transparent edge when making your old look paper in GIMP or whatever .
I tossed this idea in my current project as I rely heavily on quality .JPG's for a photo gallery.

Another option as mentioned by the boss, is to have your background black and have your old page edges look painted black

[panox]

Another option as mentioned by the boss, is to have your background black and have your old page edges look painted black

Thank you for your hints and ideas.

I already tried picking the color from the background (RGB 51, 51, 51) and painting the background of the page-images with this color. So I hoped that the light blue seams of the scanner as you can see would disappear.
But in fullscreen-mode the background is not equal. There is a light border, so the painted color would appear.
And when you turn the pages, the painted borders of the pages would show the color on top of the other pages.

I'll try with png.

[panox]

@CraziestOzzy

Thank you. I tried it but without result. The png-File is too big for all sites:
jpg=500KB, png=1800KB
Then the transparent background of the PNG24-picture is shown white on the megazine-background:



Can you show me your result?

[Florian Nücke]

You will also have to set the page background to be transparent, i.t. bgcolor="0", either in the book, chapter or page (depending on which pages you wish to make transparent).

[panox]

Thank you, Florian, for your hint! I'll check it out immediately. And thanks for your outstanding work! 

[CraziestOzzy]

@CraziestOzzy

The png-File is too big for all sites:
jpg=500KB, png=1800KB
Then the transparent background of the PNG24-picture is shown white on the megazine-background:

Common error for graphics artists, is not to downsize images for the WWW.
500kb is way too large for a single page .JPG
You should be aiming for under 150kb .JPG file with a page dimension for the typical 400px x 600px.
Having reduced .JPG file size - making the balance between quality and size of file just right - you should then use PNG16.
...and don't forget to follow Florian's advice regards the transparency (reply #5) and mine on reply #2

[panox]

You're right if you refer to normal webpages which have to have short loading times. This book is quite different. The pages have to be zoomable in order to get the handwritten text readable. I just tried out sizes of 400x600 for a page. PNG8, which I can choose in PS will then create about 250 KB per page. And this size will not be readable enough. Decreasing jpg-quality leads to compression-artifacts which destroy the old caracter of the pages.
I think, it will be a compromise not to have the torn pages shown exactly and have jpgs of middle quality.

[Florian Nücke]

It's not ideal, but you could use the gallery (see gallery plugin in the wiki) to add a especially hires variant of the pages, to allow the users to read the text.

[CraziestOzzy]

...in order to get the handwritten text readable...

I would check to see if you have added the antialising tag...

<page aa="true" blah blah blah><img src= "blah blah blah"></page>

Hand written text embeded inside a graphic image is much easier to read with it.
As for artifacts, your post work technique using PS may need to be addressed. I work on the largest possible file at the highest possible quality, filter for noise et cetera and then reduce image dimensions using the "bicubic sharper" option to match the dimension of your desired page for your book. I have been able to have file sizes for photographic images with text overlays on them at around 200kb each page.
Also use Image Ready (or similar)  to check how much quality you can sacrifice before artifacts appear.

[panox]

Thank you for your suggestions. I'll check them out.

Do you mean it like this in the megazine.mz3-file:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE book SYSTEM "http://megazine.mightypirates.de/megazine.dtd">

<book pagewidth="772" pageheight="950" plugins="navigationbar, keyboardnavigation, help, javascript" >
   <chapter>   
   <page >   
         aa="true" <img src="img/p1.jpg"></img>
      </page>
      
         <page >   
         aa="true"<img src="img/p2.jpg"></img>
      </page>
 </chapter>

   

[CraziestOzzy]

you need to include the aa filter inside the page tag...you have not enclosed the aa="true" inside one...remember your are applying the filter to that page, therefore logically include aa filter inside the page as I have shown.

<page aa="true"><img src= "blah blah blah"></page>

[panox]

Thank you, CraziestOzzy!