How do I breakdown a PSD Background To Tileable layered elements

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.

Answer

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.

Attribution
Source : Link , Question Author : Shai Almog , Answer Author : Joonas

Leave a Comment