Extracting background texture from PSD file


I'm new to Photoshop. I have just started to learn from seeing and using free web templates available on the net.

I have this good looking web template in a PSD file. The background has a nice texture, which I want to extract as a jpg file and use it in the background property in my CSS file. Obviously I want to extract just the right patch so that I can repeat it throughout the page.

How can I mark the exact area and create the smallest png file? You can download the file from here. https://skydrive.live.com/redir?resid=C0126A573B9DAD5D!271

Also in the same template, you can see a pattern (the very first element) that repeats horizontally. How can I mark the exact area to extract the minimum area and use it to repeat horizontally on my webpage.


11/27/2012 12:39:00 AM

Accepted Answer

The basics to get any of the textures....

Turn off visibility for all layer groups except the "background" group.

Then choose Image > Trim, select "Transparent Pixels", and hit OK

Lastly, choose File > Save For Web.

As for the pattern you refer to, there are at least 6 patterns I see. There's no telling which one you mean, but essentially the steps are the same as above.

Here's a tip for texture patterns which fill the image. This won't work for those horizontal only patterns.....

Follow the above steps to get just the texture:

  • Turn off visibility for all layer groups except the "background" group.
  • Then choose Image > Trim, select "Transparent Pixels", and hit OK

This leaves a 1600x2022px document.

  • Choose Filter > Other > Offset and input 50% of the values (800 for H and 1011 for V) and ensure "Wrap around" is ticked. This moves the document edges to the center of the document.
  • Choose View > Clear Guides (to remove all the guides which are already part of the template)
  • Choose View > New Guide, tick Veritcal and input 50% and hit OK - you should see a new guide in the middle of the document.
  • Repeat the step above, choose View > New Guide, this time tick Horizontal and again input 50% and hit OK. You should now have a guide crosshair in the center of the document.
  • Select the Rectangular Marquee Tool.
  • In the Control bar choose Fixed Ratio from the Style drop down. Width: and Height: in the control bar should read 1 and 1.
  • Hold down the Option/Alt key and click-drag from the Guide crosshairs to whatever size tile you want (if you're after a specific size you may want to set up guides fo that prior to click-dragging) and let go.
  • Now choose Image > Crop (document should crop to your tile)
  • Choose Image > Image Size and note the width and height of the image.
  • Choose Filter > Other > Offset and input 50% of the width and height from the Image Size reading. For example, if your image size was 202px wide and 202 pixels tall, you'd input 101 into both Offset fields. Again, ensure "Wrap around" is checked and hit OK.
  • File > Save for Web

This will get you a tile, with the proper edges at whatever size you choose. AS a sample here's a 101x101pixel tile....


Now, this assumes the original texture was indeed a seamless pattern. If the original image is not a seamless pattern you won't get a seamless result.

11/27/2012 2:53:00 AM