Latest Contest Winners
SotW #9 Winner: Kronus


Pure Creativity :: The Gates :: The Swap Meet :: [PS] Tileable Background Image - View Topic
Topic Rating: *****
Printable View
Administrator
*****
Arch Vizier
[Avatar]
There's nothing wrong with red shirts.
Posts: 516
Gender: Male
Location: Maryland, USA
Joined:  
Class: Archmage, 2nd Degree
Points: 2,705
Reputation: 4
[PS] Tileable Background Image (10th Apr 10 at 10:03pm UTC)
This is a skill that a lot of designers would really benefit from having, because it makes your designs actually codable. Side benefit: it helps if you ever want to produce a texture for whatever reason.

1. Start with a 300x300 pixel document. Use Filter > Render > Clouds to create a random cloud pattern. It's fast, and it's a generic place to learn from.
Image

2. Create horizontal and vertical guidelines at 10%, 40%, 60%, and 90%. Yes this is a lot of guidelines. At least it makes a pretty pattern.
Image

3. Go to Image > Canvas Size and make the height of the canvas 600px.

4. Duplicate the layer twice. Move the first duplicate up 150px and the second duplicate down 150px.
Image

5. Create layer masks for each of these new layers.

6. On the first copy (top), draw a black to white gradient from the 40% guide to the 10% guide on the layer mask. Do the same for the other layer but from 60% to 90%.
Image

7. Control-click on the icon of the original layer to select its outline and then crop the image. You have now made an image that can seamlessly tile vertically.

8. Use Layers > Merge Visible to collapse everything back down to the original layer.

9. Repeat steps 3-8 in the horizontal direction.
Image

You have now produced a tileable image. This procedure works fine for images that do not need precise detail, like random cloud effects. However, if you are working on an image that is complex, you will have to erase bits and pieces of the duplicate layers by hand until everything lines up. The important thing is that the 10% on each side of the image should not be modified at all. As long as that stays the same, your image will tile seamlessly.

If you liked this tutorial, share it with your friends. But, please, don't claim it as your own.
©2010 Webmaren. All rights reserved.

Image
 
Regular Member
***
[Avatar]
Posts: 116
Joined:  
Class: N/A
Points: 605
Reputation: -2
pm
OFFLINE
Re: [PS] Tileable Background Image (11th Apr 10 at 1:06am UTC)
Very good ... This is definitely one of the things that gets on my nerves when coding up a site... {Smile}

<3

Image
wImg
Free - Simple - Image Hosting
 Printable View

RETURN TO TOP
All times are GMT+0 :: The current time is 8:14pm
Page generated in 0.1238 seconds
Purchase Ad-Free Credits
This Forum is Powered By vForums (v2.4)
Create a Forum for Free | Find Forums