Advice on creating patterns in Illustrator

Greersome · Dec 23, 2009

I'm learning Adobe Illustrator CS4 and have been trying to create a pattern I can use as a background for a web site and I need some expert advice.

Goal: Create a pattern comprised of ta company logo (ideally text) that can become the backdrop for a web site. Ideally, the pattern would be comprised of rows of the same text (the name of the company), but the text would be slightly off-set on each subsequent row so that the text flows diagonally rather than perfectly aligned with the text above it.

Example:
Company Name Compan
e Company Name Compa
me Company Name Comp
ame Company Name Com

I can create patterns that are aligned, but off-set patterns seem to be a stumbling block for me. Does anyone know of a quick and easy way to do this?

Many thanks in advance.

I'm also interested in figuring out how to do this with non-text images. The following web site serves as a good example of what I'm trying to achieve.

Thank you in advance for any and all help!

CrimsonRequiem · Dec 23, 2009

Do your design and then do a clipping mask.

Greersome · Dec 24, 2009

Thanks Crimson. I appreciate the reply. However, I must not have been clear.

Your advice to "do a clipping mask" would explain how to get the web site pieces in the center of my image. However, the first part of your statement is where my mystery remains "do your design".

I would like to know how to make a repeating pattern such as the one in the web site mentioned. I'd especially like to know how to make a repeating text pattern. I don't believe that clipping masks will do this, but I could be mis-understanding you.

Anyone else?

Thanks in advance.

directeuphorium · Dec 24, 2009

the not so technical way would be to type the name in the font and size you'd like then copy and paste it a few times till you have as many as you'd like. Then group each row of text together and move them as you see fit.

also turn off "snap to grid" as that option will not make anything easier for you in this task.

Greersome · Dec 24, 2009

@directeuphorium - thanks. this is closer, but still doesn't achieve my objective. Again, I'm trying to create a Pattern. This is something that I will be able to use as a Fill for shapes. I want to be able to create a shape (say a circle), then set the Fill to a custom pattern that contains the name of the company.

Here's what I've done so far, but it still doesn't create a clean tile.

1. Open new Ai document
2. Select Type tool, then type in the document 'Company Name' three times each separated by three spaces.
3. Select the Direct select tool and select the text I just typed. Command(ctrl)-C then Command(ctrl)-V to paste.
4. Move the new text just below the first row of text but indented slightly.
5. Repeat steps 3 and 4 until I have four lines of text with each one slightly indented.
6. Select all of the objects on the document and group them.
7. Drag them to the swatch panel.
8. Delete the text from the document and use the Ellipse tool to paint a circle.
9. Using the swatch panel, set the Fill to the pattern created in step 7.

This works... almost. The fill now has gaps to the left and right of each line of 3 'Company Name's. This is because the text does not repeat continuously. The four rows of 'Company Name' comprised just a single tile. The white space at the beginning and end of each line remains a part of that pattern and therefore shows up on the document.

How do I create a pattern that appears continuous. Is there not an easy way to do this with Illustrator?

Any advice? Again, thank you directeuphorium for your help. Although my goal eludes me, I've learned from your post.

directeuphorium · Dec 24, 2009

Greersome said:
@directeuphorium - thanks. this is closer, but still doesn't achieve my objective. Again, I'm trying to create a Pattern. This is something that I will be able to use as a Fill for shapes. I want to be able to create a shape (say a circle), then set the Fill to a custom pattern that contains the name of the company.

Here's what I've done so far, but it still doesn't create a clean tile.

1. Open new Ai document
2. Select Type tool, then type in the document 'Company Name' three times each separated by three spaces.
3. Select the Direct select tool and select the text I just typed. Command(ctrl)-C then Command(ctrl)-V to paste.
4. Move the new text just below the first row of text but indented slightly.
5. Repeat steps 3 and 4 until I have four lines of text with each one slightly indented.
6. Select all of the objects on the document and group them.
7. Drag them to the swatch panel.
8. Delete the text from the document and use the Ellipse tool to paint a circle.
9. Using the swatch panel, set the Fill to the pattern created in step 7.

This works... almost. The fill now has gaps to the left and right of each line of 3 'Company Name's. This is because the text does not repeat continuously. The four rows of 'Company Name' comprised just a single tile. The white space at the beginning and end of each line remains a part of that pattern and therefore shows up on the document.

How do I create a pattern that appears continuous. Is there not an easy way to do this with Illustrator?

Any advice? Again, thank you directeuphorium for your help. Although my goal eludes me, I've learned from your post.

due to the holiday i don't have the time to sit down and reverse engineer these steps. I would just fiddle with it as much as you can, as it's hard for me to visualize what you're going for over the internet.

After the holidays, if you still haven't gotten it just right send me a pm and I'll sit down and we can flesh it out.

macwannabe · Dec 27, 2009

show us what you have so far...

kelvinlars · Dec 30, 2009

How would the clipping mark is done

Greersome · Dec 30, 2009

As requested, here's what I've done so far and what I have so far.

I'm not sure if this will work... the attachment function on this forum is not acting as I would expect. I'll try to post screen shots.

first Image: I have typed 'Company Name' three times equally spaced out on one line.

Second image: I've cut and pasted the text item a few times and arranged it in rows that cascade.

Third Image: I've selected all of the cascading text and dragged it onto the swatch panel to create a new pattern.

Fourth Image: I've created a rectangle selecting the newly created text-based swatch as the fill and set the stroke as a thick black line. Looks great.... but...

Fifth Image: ... in the second rectangle created, it's easy to see that the pattern has gaps in it as identified by the red dashed-lined oval.

How do I create a pattern that repeats without the gaps? There must be an easy way to do this, no? I don't know how to be more clear in my question.

I don't want this gap between the patterns. I'd like to create a pattern based on text that repeats without gaps. Is this possible?