0

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.

Thanks

1
  • 2
    I'd recommend re-phrasing this question to something like "How to calculate where to cut an image to create a pattern", and post the particular jpg background image you are having trouble with.
    – Yisela
    Nov 27, 2012 at 3:58

1 Answer 1

3

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....

pattern

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.

2
  • Thanks Scott, what I want is something similar to scoundrels.fm/images/bg.gif for the backgrounds and freshdesk.com/images/pattern-top.png for the horizontal repeating patterns. I want to know how to extract the minimum image width and height, which I can use as the CSS background property either by tiling it or repeating it horizontally.
    – Arun
    Nov 27, 2012 at 2:10
  • You'll have to manually figure that out. There's no automated method for a file with flat layers.
    – Scott
    Nov 27, 2012 at 2:12

Your Answer

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

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