1

I'd like to create a scaleable multi-resolution web effect similar to iBooks and started by building on this tutorial.

The problem is with the background image: background image

As you can see it has two masks on it that give it that special effect:

Masks and layer

What I want to do is create a background that will fit any resolution, for this I need a tileable version of the image background and a translucent PNG mask image which I can scale on top of that tileable image to give a similar effect.

I have no idea how to convert the mask layers above into a simple raster that I can save as a standalone PNG file. I tried replicating the look using a translucent radial gradient but didn't get anywhere.

Without the mask the image looks like this which is allot less compelling:

enter image description here

Any tips on how to easily make a texture tileable will also be appreciated but I can probably manage this myself. Thanks.

Improve this question
13
  • It depends a little in how you're thinking about doing it all, but I would basically duplicate that current wooden texture ( Duplicate so that you can see the neutral texture behind it. ) brush a hole in the middle much like in your masks there and maybe raise the saturation a bit, make the color more reddish and make it darker.
    – Joonas
    Mar 11, 2012 at 11:04
  • By the way. I could be wrong, but doesn't the question title ask about how to tile up this wooden texture, but in the actual question you ask how to make those vignette's into transcluent png?
    – Joonas
    Mar 11, 2012 at 11:10
  • Thanks. I'm assuming (and I may be wrong here) that I can get a PNG mask image that will include the effect only (a transparent image) that I can just overlay on the last image within my question to create the first image within my question. This can work well because then I can tile the background image and scale the mask image. If I have a hole in the middle of an image you will see a seam that wouldn't fit.
    – Shai Almog
    Mar 11, 2012 at 11:13
  • Yes. The tiling and the layering are one and the same in my mind, I can't tile the image as it is and if I scale it as it is there will be visible distortion. However, if I can separate it to two layers I can tile the background and scale the overlay layer producing a great effect for all resolutions.
    – Shai Almog
    Mar 11, 2012 at 11:15
  • 1
    Here's a quick example of what I'm talking about... jsfiddle.net/lollero/fztsV ( Clicking the container will animate the dimensions. ) What I did was make a crappy pattern from the texture and then crop an area to use as the vignette and then did as I suggested before. The only problem with what I'm suggesting is possible blurring of the texture in the vignette image if it's dimensions become too high, but it should stil work.
    – Joonas
    Mar 11, 2012 at 11:35

1 Answer 1

Reset to default
4

I'm not feeling very motivated to answer as it seems like you didn't even try my suggestion and you were saying that my idea doesn't work because this and that which just seemed to me like you didn't read my messages properly. ( could be that I wasn't very clear in what I said, but still. )

My example didn't quite look like your image because, I'm not doing your 'work' for you, I'm just suggesting a method for you to do it.

Basic idea is this:

  1. make a tiling texture.
  2. make a non-tiling texture that is based on the prior one so that it is as consistant as possible and make it darker. ( The size of this one should be about the regular size that the box would be. )
  3. make a hole in the middle of the non-tiling texture.

If you're super worried about the texture'es having a seam of some sort, you could try to change it's opacity really low and then darken the non-tiling image even more.

http://jsfiddle.net/lollero/fztsV/1/

http://jsfiddle.net/lollero/fztsV/1/show/

Clicking the image will show the way non-tiling image looks when the size of it is bigger than the original size of the image.

if you need to allow the size to get quite big, the non-tiling image will get blurry, but you might be able to avoid that by making the non-tiling image a bit bigger than the regular size. ( but then again, little blurring in the edges is not so bad.. )

enter image description here enter image description here

Note that there is also a way to make this so that the vignette edges wont scale according the container, but that's even more coding related so I won't go into that.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.