|
This little tutorial is all about making an image that will tile
seamlessly- very useful for �filling in� jobs instead of plain colours.
You can use seamless graphics- also called tiles or patterns- as web
page backgrounds provided you save them in a format like.jpeg or .gif. I
like making them and bundling them in formats that other people can use
directly in their software- Photoshop, Photopaint etc. so if you
download any from me you will get a PS pat. file along with the
graphics. *end of promo* :)
|
O.K.! Lets get started!
I�m assuming you are already familiar enough with your graphic software
to know what a layer is, aligning, opacity, selecting, cropping and
erasing. I�m not going into individual programs but just explaining the
concepts o.k.? :) Some of you may not have certain tools for measuring
available so you should use a drawing of a square as guide...
|
 Here is the concept quite simply for a very simple pattern:
1. Create a single layer to work on. The drawing area (not necessarily
the page) should have perfectly square dimensions. You should have
rulers and grid turned on if your program has them which it should if it
has layers. Guides as well if you have them.
2. Create a second layer underneath and center a perfect square in the
lower layer as a guide. Make sure opacity of the top layer is 5o %.
3. Next step is to center the object you would like to turn into a
pattern on the top layer - use your aligning tools to find the center
point. In my case I will be using an image of a crane.
4. Next, select the object you just centered and copy it to the clip
board. You are going to paste it back into the document 4 times and each
copy should exist on a separate layer.
5. Your document just got 5 times bigger in megabytes. Have you saved
your document with a practical name yet? Call it �My first pattern� or
something equally special!
|
 6.
You are going to now have to perfectly align the 4 new copies to the 4
corners of the document. There should be a center point on every object
you handle that should make this easier. For those of you who have
aligning functions in your program this should be really easy.
7. Hopefully you sized your document with enough space to allow for
placement of the 4 images without bumping into the original. Once you
are certain the corner images are perfectly centered you can merge those
layers together, or for vector applications, combine or group.
|
 8.
Now the somewhat tricky part because there are different way sof doing
this depending on your software. You will need to get rid of all the
parts of the drawing that exist outside of the square area.
a. For those of you who have a square underneath as a guide you can
select the square on that layer, invert the selection, come back to the
main layer and hit delete or if you prefer to be more cautious, you can
erase. You can also use a �crop to mask function�.
b. For vector based programs you can use your guide square to trim with or power-clip the item into the square.
|
 Of
course it can get much fancier than this! You might want to start
looking at different types of symmetry, start blending or altering the
central part of the image, or start combining different kinds of
graphics: clipart, photos etc.
And finally, one piece of advice: When you export/save your new patterns
make them LARGE and then resize to the desired dimensions. Its
obviously a bit of extra work but the fact is that when you save with
�anti-alias� turned on (and it has to be turned on to have smooth edges
within the image) you will get some feathering on the edges of your tile
which looks horrible. There are application-specific workarounds but
the easiest thing to do is simply resize independently which clears up a
lot of the feathering - it's a shame that software designers don�t put
an option to turn anti-alias off on image edges. Hope this has been of
some use. :)
|
