Building Tiled Backgrounds Using Photoshop and Illustrator

– taterboy | November 3rd, 2009

Filed under: Design, Illustrator, Photoshop, Tutorials

I can’t wait to get back to publishing Flash tips and code, but we’ve been so wrapped up in ChessJam lately leaving so little time to clean up code and make things more component-ized. I am enjoying the break from programming though, doing illustration again has been very rewarding.

Fixing Blotchy Textures:
In producing tiled textures for some of the background paintings and 3D renderings, I found that even though the tiles did not really show any seams, they were creating some weird patterns over the whole tiled area. They needed tweaking without a long and laborious process of exporting and rendering. The key for me was to have a realtime preview of what I was working on, seeing how the tile would look tiled over a larger surface while I was painting in Photoshop. There may be better ways, we always appreciate feedback, but this worked really well and now my textures are much less blotchy.

The Preview:
After you get the tile started in Photoshop, save a PSD. Then you can Place (File : Place) that PSD into Illustrator. Using the duplicate feature in Illustrator (command + option : Mac or control + alt : PC) you can drag out as many of these tiles as you need. I built a 9 unit grid using the placed PSD. Then every time I saved in photoshop, the tiles would update in Illustrator when I brought Illustrator to the front. Now I can see how the dynamics of the tile will effect the larger area after it is tiled.



UPDATE:

Added sample of tiled background.

Here are some sneaks of the new screens created and updated for the new 2.0 release. To find out more about what is happening with ChessJam, check out the official ChessJam blog.



Technorati Tags: , , , , , , ,

| 4 Comments » | facebook:

4 Comments »

  1. I checked out the Chess Jam site. Very nice work. But I have no idea why you’re talking about tiled backgrounds. They don’t appear tiled, and I don’t see why they should be. Just make a background image. What am I missing?

    Comment by Mike — December 16, 2009 @ 7:01 am

  2. Sorry for the confusion, I used the technique above in the textures for the 3D renderings of the castle and some of the background paintings. The castle uses one main texture that is tiled across the complete surface. Previously the texture was blotchy and you could see the pattern of tiles. Now it is harder to tell that it is one tiled image over the whole castle. The background brickwork in the painting above is also tiled. I guess the post was not complete without a valid sample. Thanks.

    Comment by taterboy — December 16, 2009 @ 8:03 am

  3. nice tut thanks

    Comment by Free PSD Tutorials — January 24, 2011 @ 1:27 am

  4. The pattern you created had a weird pattern.But the technique you used was good.

    Comment by bellakristen — April 25, 2012 @ 10:44 pm

RSS feed for comments on this post. TrackBack URL

Leave a comment

*