Movement? Are we talking about a video here? How can I have “movement” in a static printed design? It’s not a flip book we’re talking about are we?

No, I’m simply talking about creating a sense of movement through a design. It assists in giving the end-user a clear path for their eye to follow. Sometimes this movement is instrumental in directing the viewer’s eye to the places you want them to look and even the sequence in which you want them to look.

This may be a little easier to understand if we look at some examples.

First, let’s start with a design that has no movement to it. Let’s assume that each of these circles are photographs or design elements. How will the end-user’s eye move through a design that is laid out like this?

They will probably “read” through the design elements in this manner. Why? Well, because in Western society – this is how we are taught to view things. It’s the way we read. Always start in the upper left corner and read left to right working your way down through the design.

This is the average westerner’s predisposition on how to look at a design. But we can break this method of viewing and impose our own. Let’s look at another very basic layout using extremely basic shapes. Except this time let’s give them an over-powering movement.

Ok, now this is a PAINFULLY obvious example of movement. If this were the design, the viewer would have almost NO options as to how to look at this design other than lower left to upper right.

I just want to make the obvious point that we CAN control, or at least heavily influence how viewers take in our designs. With this in mind – we need to make sure that the movement in our design helps the overall function.

Now, because I’m such a huge fan of comic books, let’s look at a few comic book illustrations that use movement in their composition to carry a person’s eye through the image.

This panel is by famed comic book artist Will Eisner. He was well known for amazing compositions – and his comic The Spirit (now a major motion picture.) This is a great little composition because you almost feel like you’re following the character’s movements. You start at the top of the illustration and snake your eyes down each set of stairs until you see the figure at the bottom.

The next example I want to use is the cover for The Fantastic Four #1 comic book. This is really a great use of movement in a composition. You either start at the title or at the monster in the center. In either case, the progression of movement after that is so wonderfully obvious. From the title you follow Human Torch’s flame over to the character list, then down to the monster emerging from beneath the street. From there, it’s a clear spiral working around the outside of the illustration; from the monster you go back through the Human Torch to Invisible girl, to the Thing to Mr. Fantastic and finally to the innocent bystanders.

Let’s take a look at that with the path drawn on top.

Let’s look at one last example – but maybe something with a better design application.

That’s it’s for now. As you’re waiting for Part 7, catch up on the rest of the series:

Become a Master Designer: Part 1: Limit your Fonts
Become a Master Designer: Part 2: Limit your Colors
Become a Master Designer: Part 3: Contrast, Contrast, Contrast
Become a Master Designer: Part 4: Spacing is your Friend
Become a Master Designer: Part 5: Depth

Advertisement: New Go Media Portfolio Site! - Check our our new Go v5 portfolio site with some new work!

I have been working with natural media more recently, and as a result, I have been learning how to bring my natural work onto the digital drawing board. I have shown a few people my “watercolor” technique and it has proven to be wildly popular amongst my peers. It’s not very hard to accomplish, so I figured I’d take a few minutes to share it with you good folk!

For this tutorial I will assume that you have a basic working knowledge of Adobe Photoshop. Everything here should be backwards compatible back to 7.0 at the very least. Without further delay, I present information for you to be having:

By the end of this writing you should be able to achieve a halftone watercolor effect similar to what I have achieved with this:

Making The Drips and Splatters

Before we can do anything in Photoshop, we have to have some splatters and washes and drips. I don’t actually use watercolor paints, I make an ink wash. You could just as easily search free stock images such as those at The Stock Exchange, but I prefer to make them myself. If you’d rather not wait for paint to dry, you can snag the free high quality textures at the bottom of the post. It lends greater flexibility to my technique, and a more accurate delivery of the effects. Here are the supplies that I use, your mileage may vary:

Ink Wash Supplies

The supplies pictured are as follows:

• A standard Wash Brush used for painting
• A Canson acrylic sketch pad (185LB Cold Press Paper)
• Dr. PH Martin’s Bombay Black India Ink
• a Sauce Cup (be sure that the owner of the sauce cup is okay with ink being put in it..long story…)

Obviously, the supplies you use are up to you. This is just what I have had the greatest success with.

I fill my sauce cup about 1/3 of the way up with water, then I add approximately 3 drops of black ink. You may have to figure out what works best for you, but this mix has worked well for me in the past. Note: I use black ink because the contrast allows for a reasonable file quality even with my cheap scanner.

At this point I lay some paper towels on a counter, hold the paper up with one hand, and proceed to make a mess. There’s really no wrong way with this effect. The sloppier the better. I usually try to stay generally true to whatever shape I’m working with, but keep in mind that the imperfections are what makes it interesting. Also, once I get the drips and wash the way I’d like I lay the paper flat and splatter some of the mix on it. It’s fun - make a mess!

Here’s a video tutorial so you can see exactly how it was done.

Okay, I have made a mess. Now what?

At this point you’ll need to scan your wash into the computer, or take a high quality picture of it to transfer to your computer. Save it somewhere you can find it and open it up in photoshop. I try to scan at nothing less than 300DPI, but it’s not really that important. As long as the file is big enough to resize without getting terribly pixelated, you should be okay. Here’s mine:

This is my splatter image.

I have already opened up the file that contains the linework for my Mermaze design.

Press Ctrl+A to “select all” on your ink wash file, then click the window with your other artwork and Ctrl+V to paste it into the image.

Resize, rotate, and move your wash to where you want it in the final output. I have placed it behind my lines, personal preference. Here’s where I’ve arrived:

Once you are happy with size and placement, you’ll want to be sure that you have the wash layer selected in your laters pallet, then Ctrl+A to select all and Ctrl+X to cut the image.

Making The Halftone

Press Ctrl+N to make a new document, be sure the background is set to white or transparent, and click okay to make the new document. Press Ctrl+V to paste your wash into the new document. Once you have this done, we will prepare the wash to be made into a halftone.

Press D to reset your foreground and background colors. Then click the “Image” menu and select Adjustments>Gradient map. The gradient map dialog will pop up, and you should notice your wash become slightly more black and white.

Click the gradient picture on the dialog so that the Gradient Adjustment Dialog pops up. You will need to move the white tab in towards the middle until you are sure that the white background on your wash is absolutely white. Then you’ll need to adjust the black tab until your wash is as dark as you feel it should be.. Mine looks something like this:

I have placed red arrows pointing to where I have my black and white tabs set. This step is important because if your background is anything other than absolutely white, the halftone will have little dots placed all over it in an attempt to make it look off-white. It will not be attractive. Hit “OK” on both of the dialogs when you are finished setting the tabs.

Tip: A good way to be sure your background is pure white is to click your foreground color so that the color selector comes up, click the background of your image with the eyedropper tool, and make sure the hex code is “FFFFFF”.

Now that your background is white, and everything looks good, it’s time to make the halftone. In the “Image” menu select Mode>Grayscale. Press OK on any questions that pop up about flattening layers, or losing color information.

Now you will open the “Image” menu again and select Mode>Bitmap. When the first Dialog pops up, be sure the Method is set to Halftone Screen:

When you press OK a second Dialog will pop up. You may want to play with these settings a bit but the important parts to note here are: Halftone type should be “Round” and never set “Lines Per Inch” or “Angle” higher than 45 if you are setting this design up to be screen printed. Any higher and the printer could encounter problems. If at all possible, it’s best to contact the printer first and ask them.

Once that is done hit “OK” and your splatter should now be a halftone. From the “Image” menu select Mode>GrayScale once again. Using the magic wand tool select the white background of your ink wash. Press Ctrl+i to invert your selection. Press Ctrl+X to cut the selection, Select the window with the design you want the watercolor placed in, and press Ctrl+V to paste it in. You will probably need to move your halftone into position.

Finally from the “Layer” menu select Layer Style>Color overlay and pick a color you would like your halftone to be. That’s all of it. Here’s what mine looked like:

That’s all for this tutorial. I’ll have more soon!

Free Ink Wash Splatters

I have a file with some high resolution splatters for you to try out. The image below is a sample of some of the washes, drips, and splatters in the package. They’re all really hi-res, so you’ll be able to get a lot of mileage out of them. Click the link below the image to download the file:

We’re going to make a pattern brush.

We’re going to start in Illustrator (I’m using CS3).

I chose to make a wavy line brush because it’s relatively easy and it teaches the basics of pattern brush construction without a lot of messy details. It also gave me a chance to share another technique involving blend modes and distort filters.

So to start off, hit the backslash key or click the line segment tool from your Illustrator Toolbox. Draw a line about 650px wide. Now hit “v” to switch to your selection tool and select the line segment. While holding the ALT key (Option key on a Mac), drag the line segment down about 80px. You’ll see that holding the ALT key while dragging makes a copy of the selected object. Now, I hope you didn’t click anything else, because we’re going to hit CTRL+D to duplicate the last action again. Now you should have three lines nicely spaced on top of each other.

Like this:

Now we’re going to make a blend between these three lines. First we need to modify the default blend options.

Go to Object>Blend>Blend Options.

Change the default setting from “smooth color” to “specified steps”, and then change the number of steps to about 8.

With all three lines selected, hit ALT+CTRL+B, or

go to Object>Blend>Make.

You should now have 8 lines between each of your original 3 lines.

Looking good so far. Let’s give our lines some personality with a distort filter. For this brush I used the Roughen filter. With your lines selected, go to

Effect>Distort & Transform>Roughen.

The Roughen filter has quite a few options. I changed the defaults from “corner” to “smooth”, and decrease the size and detail to 6 and .93, respectively. The screenshot below shows the effect I got from those settings. Just put in whatever settings look good to you – it won’t prevent you from following the rest of this guide.

We’ve got a little change of pace coming. We’re going to have to move out of Illustrator for a little bit to get this pattern brush… well… patterning.

Open Photoshop and make a new document 2500×2500 pixels.

Copy your wavy lines from Illustrator and paste as a smart object into your Photoshop Document. After you paste, hold the shift key and scale the smart object so that it just touches the edge of your document.

Photoshop’s Offset filter shifts the pixels of your image by a certain amount. This is really handy for making edges seamless.

Go to Filter>Other>Offset

(They really hide this super useful filter, huh).

Since your document is 2500 pixels wide, set the shift to something about 1/2 of that, or close to 1250 pixels. Make sure the “wrap around” option is checked.

You’ll see the seam right away. It should be just about dead center. This is what we need to fix.

Fixing this seam is really the only subjective part of this whole guide. It really helps if you have a Wacom set up. Hit “B” to activate the brush tool. Set it to 100% hardness. Now just use the bracket keys to find increase or decrease the size of the brush until it’s equal to the thickness of your lines. For me, this was about 4px. Now erase and draw in the lines so that they connect nicely. Here’s how mine looked about 1/2 through the fix-up:

Keep at it. Try to imitate the movement of the rest of the lines. This will depend on what Roughen settings you chose back in Illustrator.

Finally, okay I’m done.

Save your document as a PSD somewhere handy, and we’ll get back to Illustrator in the next step.

We’re almost there. Let’s get that PSD into our Illustrator document.

Go to File>Place

and browse to the PSD you saved. In order for this to be vector again we need to autotrace it (this is why we worked at a nice high resolution while in Photoshop). With the PSD selected, go up to the little down triangle beside the Live Trace button and choose “Detailed Illustration” from the list of autotrace presets (this one almost always works the best for me).

Sweet! You probably want to make this thing a lot smaller before you make a brush out of it. So with the selection tool, hold shift and drag inward from a corner to scale it down.

Drag the whole object over to your Brushes panel. A new brushes dialog will pop up. Choose “pattern brush”.

Now you’ll be faced with a few options. The only one I really changed on this screen was the Colorization method. I changed it from the default to “Hue Shift”. This setting means that the brush will take on the stroke color.

Now you’re free to draw away with your new brush! The best way to test it is to hit L to draw a circle shape and use the brush as the stroke. If you don’t see any seams – it worked!

This method applies to all kinds of pattern brushes. If you want to make a chain pattern brush, just draw one. Then export to Photoshop, use the offset filter and fix the seam. Then back to Illustrator for autotracing and brush-making.

Something cool that was not covered in this guide is that pattern brushes have special parts for the beginning, end, and corners of strokes. This is really cool and adds a lot more flexibility. Keep your eye on the Go MediaZine and maybe a future post will cover these parts of a pattern brush.

Happy designing!

Advertisement: Go Media Freebies! Download a bunch of free vectors, textures, and sample motion packs.

If you’re in a rush here is the meat of what I gathered from picking through these previews:

Photoshop CS4 will..

• use the graphics card more aggressively, allowing for smooth zooming, canvas rotation, and other cool 3D effects with good performance
• have the same UI enhancements as the rest of the creative suit: tabs, frames, etc.
• include intelligent scaling, like the kind we’ve ooo’d and ahhh’d about for the past year
• be more flexible because of non-destructive editing via new adjustment options
• may possibly have multi-touch support
• have better masking.

Previews & Feature Lists

Camera Town Preview
This is one of the best previews I could find. Really comprehensive, but long. Looks to be straight from the horse’s mouth.

Pop Photo Hands On
A nice down-to-earth look at some helpful features.

Macworld previews the content-aware scaling
Macworld talks about how cool this feature is. Does anybody remember that this technology was developed a year or more ago, and bought by Adobe?

MacNN Multi Touch
MacNN lets us know that Photoshop will support multi-touch with certain hardware. Cool. Useable?

ZDNet Photoshp CS4 First Look
The ZDNet flavor of Photoshop CS4 preview. Nice, but could use some screenshots.

Videos

Sneak preview from Photoshop World Orlando

New 3D Effects

Content Aware Scaling (yawn)

Smooth zooming & rotating

Lets start with the obvious:

User Interface Changes

Section Summary:

1. New Splash Screen (of course)
2. No Microsoft Toolbar saves pixels
3. Document Tabs!
4. Document Frames
5. More accessible workspace presets
6. Some tools moved around on the tool panel

Adobe Illustrator CS4 starts flaunting its new look right from the start – the splash screen is still simplistic, but now features some shiny transparency effects on the “Ai”.

The next interface change may have you wondering if there is something wrong with your view settings. No, everything is working fine. Illustrator is overriding the Microsoft Windows Title Bar – the minimize, maximize and close buttons are integrated right into the main window (similar to Google Chrome). This not so subtle tweak actually saves quite a few pixels, which, it turns out, you’re going to need!

One of the best changes to the user interface in Illustrator CS4 is document tabs. If you have more than one Illustrator document open at a time, they automatically form tabs ala Firefox. If you want, these tabs can be separated from the main Illustrator window by grabbing the tab and dragging outward. You’re probably already an expert at managing tabs, and after a few minutes in Illustrator CS4 you’ll wonder how you put up with all that minimizing and restoring of documents. Tabbed documents save a lot of clicks.

If you look closely at the screenshot below, you’ll also notice that there is no ‘Filter’ menu – only an ‘Effects’ menu. I speculate that Adobe did away with the redundancy of the filter menu because of increases in effect performance and changes to the appearance panel.

CS4 has more document management tricks up its sleeve – frames. These frames are accessed via a little icon to the right of the menu bar called “Arrange Documents”. Click and you’ll find a drop down list of frame presets for two, three, four and more open documents. These presets are useful for comparing two documents side by side (especially on that new 30″ cinema display, right?). The “Arrange Documents” menu contains many presets for arranging open documents – stack side by side, on top of each other, in a grid, etc.

First Look: Adobe Illustrator CS4 Document Management from Go Media on Vimeo.

The paradox of new software is that it must balance conflicting interests: more power and improved usability. That is probably why the most recent versions of Illustrator keep re-thinking panel (they’re only palettes in Photoshop) management. Well, CS4 is no exception. The brains at Adobe have made workspace presets more accessible by putting a drop-down menu right above the panels. They’ve also done a lot of the leg work to convince us that custom workspaces can save time. These presets are easily accessible and fill the dock with customized panels for typography, web, painting, etc. The presets from Adobe also include application specific layouts such as “Like Photoshop”.

The Illustrator’s toolbox has been slightly shuffled in Illustrator CS4. The eraser tool is given a more prominent place in a group of often used tools – it now sits along with the pen, text, shape, and brush tools. This means that the scissors and knife tool have also moved (they’re only accessible in the flyout of the eraser). The slice tools use to sleep in the fly out menu from the crop tool. Now, they have their own spot on the toolbar.

Finally, while having little effect on your workflow, Adobe moved their logo and link from the tool box to the menu bar. These are the kind of little tweaks I really enjoy – they make CS4 feel more polished, refined and purposeful.

New Tools

Section Summary

1. Blob Brush
2. Artboard Tool
3. Updated Gradient Panel
4. Appearance Panel Overhaul
5. New Document Options

Blob Brush Tool
The first new tool I noticed was the Blob Brush Tool. If you’ve ever worked in flash or frequently expand brushes, you’ll probably appreciate this new tool. Here’s how it works: it organically draws a shape instead of a path. As you draw with the brush, the path is expanded every time you raise your wacom pen (or mouse). Then, as you add more brush strokes, overlapping sections are automatically added together to form one shape. Here’s a video of the brush tool in action to see what I mean:

First Look: Adobe Illustrator CS4 Blob Brush Tool from Go Media on Vimeo.

When the blob brush tool is double clicked, brush options are available. I was happy to see that Wacom tablets will be fully supported with blob brushes. Depending on how the final product turns out, Wacom artists may be able to ditch the Photoshop + Autotracing routine and stay in Illustrator the whole time by using blob brushes.

Artboard tool

While this could technically fall under “changed” features, it is cool enough to warrant its recognition as a whole new feature. The artboard tool is an evolution of the crop area tool from Illustrator CS3. However, instead of using cumbersome hotkeys to create multiple crop areas, CS4 re-thinks the whole concept of an artboard. In CS4, using the artboard tool will create a new artboard by default and give it a number automatically. Clicking on the white space of any artboard with the Selection Tool will activate it. These new artboards are way better than the nearly invisible crop areas of CS3, and make it much easier to manage projects-in-progress! Adobe makes it clear that these new artboards mean business – Artboards can have their own rulers! Just right click on the active artboard and tick “show artboard rulers”. Artboards are always editable – you can resize and move them around until you’re satisfied.

Most importantly, this tool is very well integrated into the Export window. Finally, you can export multiple artboards (crop areas) to separate files in one step!

Last, we’ve got artboards within artboards. if you think this is getting ridiculous – so do I. While I can hardly imagine the need for nested artboards (on top of the document-taming tab tools in CS4), Adobe must have found a need for this feature. To enable it, simply hold shift while dragging with the artboard tool inside of an existing artboard. Check out the video for a short demonstration of the new artboards in CS4.

First Look: Adobe Illustrator CS4 Artboard tools from Go Media on Vimeo.

Updated Gradient Panel

Adobe finally addressed one of my biggest complaints about Illustrator: the inability to form a gradient from color to transparency. Now, Gradients have opacity options – Finally! This option lets you select any of the colors on the gradient slider and choose its opacity. For even more control, you can now double click on the color slider and access the full range of color picking tools.

The gradient panel now has a handy button to quickly “reverse” the gradient – another one of those little refinements that will save you tiny bits of time and effort. The angle tool on the gradient now has a slider so you can now dial in the correct gradient angle a little faster. Finally, Radial gradients now have a ’roundness’ option. No more stretching gradients and applying clipping masks – now you can just define the roundness of the radial gradient.

If these updates weren’t enough, Adobe has iced the gradient cake with the Gradient Annotator. The Gradient Annotator allows you to adjust gradients intuitively – right from the shape itself. Since a picture is worth a thousand words, just take a look at the screenshot and video below to see what I mean. This tool won’t enable dazzling new effects, but it will make it easier to get gradients just right the first time.

First Look: Adobe Illustrator CS4 Gradient Tools from Go Media on Vimeo.

Appearance Panel Overhaul
Admittedly, I rarely (if ever) use the appearance panel, so I may miss a few things here. Anyway, here it goes: Changes to an objects’ appearance can now be hidden / shown via Adobe’s signature ‘eye’ to toggle visibility. Also, the appearance panel now gives you access to raster effects previously only accessible in the “effects” menu.

EDITED: Teri from Adobe sent me this nice email about why I should be using the Appearance panel. Definitely got me thinking…

Adam,

In your review of Illustrator CS4, you wrote that you “rarely (if ever) use the Appearance panel”.

If you don’t, you are missing a lot of power! The Appearance panel is the only way to add multiple strokes or fills to a single object, or to add strokes or fills to groups. It is also how you change the options on previously applied live effects, or target an effect to just the fill or just the stroke instead of to the whole object. It is a whole tool kit for constructing and modifying complex graphic styles.

One of the best ways to figure out the power of the Appearance panel is to open it up in conjunction with the built-in Graphic Styles libraries, draw a few simple objects, and go through the various styles, applying them to your sample object, expanding the various little triangles on the Fill and Stroke rows in the Appearance panel, double-clicking on the effects used in the style, and in general seeing how the “recipe” for that style is constructed. Soon you will be on your way to constructing your own complex styles.

You might also enjoy looking over some of the demo files on my web site, especially the ones in the “Folder Full of Style Demos”.

http://tpettit.best.vwh.net/adobe/index.html

Whats new with…Ctrl+N?

Adobe gives a nod to print designers in the updated new document dialog. In Illustrator CS4 you’ll be able to define the number of artboards and how they’ll be arranged. These controls will make it much easier to set up documents for multipage print projects. Custom bleed settings are also possible with Illustrator CS4. Check out the screenshot below – new features have been highlighted.

What do you think?

My gut reaction is that Illustrator CS4 will be an enjoyable upgrade. I like that Adobe has kept the glint and glamor to a minimum (few fancy new tools with little practicality) and instead made important workflow improvements. When I have four color variations of a logo to export, the new multiple artboard features are going to be nice.

So what is your reaction to the new features? Has Adobe used this year wisely? Let us know what you think in the comments and check out the CS4 poll at the bottom of the page.

‘Till next time!

Step 1

Getting your Wacom installed
Well first of all, just plug the USB cord of your Wacom Tablet into your computer. You’ll see that the pen tracks right away, but it has one major problem; it will not reach to all corners of the screen without having to be picked up for another swipe across the tablet. This is because you haven’t installed the Wacom Software yet.

So calm down. Yes that new toy smell is really exciting, but we’ve got to install some stuff first. Put in the CD that came with your Wacom or head over to wacom’s website to download the software & drivers for your model. Once installed, you should notice some things are different.

First, the tablet is proportional to the screen now - you can point to any spot on the screen without picking up your pen.

Second, unlike your mouse, your Wacam pen will point to exactly the same spot on your screen when it is pointed at the corresponding spot on the tablet. This is really cool once you get comfortable with it.

Step 2

Adjust your Wacom’s settings Fire up Photoshop or PainterX and play around

I know you want to!

I’m only going to to cover the use of the Wacom with Photoshop because it is all we use at Go Media. For a great video tutorial on Wacom settings in PainterX, check out Ray Frenden’s guest post from a while back.
Go ahead and create a new Photoshop Document at a pixel resolution equal to your screen resolution. Set your foreground color to black and select the Brush Tool. Press on the rocker button closest to the tip of your pen, which should be mapped to be a right click by default. Set the brush hardness all the way to 100% and size to about 20px. Press F5 to bring up the Brushes palette and make sure the “Shape Dynamics” box is checked. Make sure the rest of the settings match the screenshot.

Now go ahead, draw a squiggly line! Does the brush vary in thickness in response to pressure? Great! It doesn’t? Don’t worry, it happens to us all of the time. Shut down Photoshop, fire up the wacom tablet properties software just for fun, restart Photoshop. Rinse & Repeat.

Step 3

Adjusting your Wacom’s settings

In your start menu you should see a ‘Wacom’ folder, and inside, a ‘Wacom Tablet Properties’ program. This utility helps you tweak the special buttons on your tablet, pen pressure, and a lot of other stuff. The most important setting here (and the only one I’m going to talk about) is the ‘Tip Feel’.

As you can see from the screenshot above, I like pen tip to have a firm feel. This means that I have to press harder to get the same line thickness than at the default settings. I find that being able to keep a constant medium to hard pressure helps me make smoother lines. The software has a handy little preview of how hard you’re pressing so use that as a benchmark to find the best setting.

Drawing Tips

Before I started using a Wacom I imagined that it would magically transform me into a good artist. Not so! In many ways the Wacom is more difficult to control than traditional drawing tools (it’s saving grace is the Undo function). So unfortunately even if you follow this tutorial perfectly I can’t guarantee you’ll be drawing scrolls like Jeff does. Even so, here are some tips for getting better as a Wacom artist.

1. Practice! Plain old drawing is great, but also try some Wacom training drills. One that I’ve used is trying to draw perfectly spaced even lines from thin to thick. Then try it thick to thin, then thin, thick, thin. Try concentric curves, squares - anything that requires you to keep line thickness and spacing consistent is good.
2. Zoom in. Your Wacom’s tablet area is proportionate to your screen, not your zoom setting. For that detailed linework go ahead and zoom in to reduce shakiness.
3. Be Decisive. Quickly drawn lines are naturally straighter, so don’t be bashful.

That’s It!

If you haven’t jumped on the bandwagon, a Wacom is a great tool for a designer to have around. If you picked one up but never felt like it was working quite right for you, I hope this how-to cleared some things up.

Till next time!

I say mostly because it went through a series of transformations - one of which was an export to photoshop (for some wacom-esque highlighting) followed by a hi-res auto trace in Illustrator. So, some edges are slightly off, but the overall seamless effect is there. Go ahead and download it, but stick around for some behind the scene paparazzi shots of how it was made.

I’ll admit it - I had never made a seamless pattern before. I knew I wanted it to be swirly, so I pen-tooled some reference photos for ingredients as I brainstormed just how this was going to work.

By the time these ingredients were ready I had a plan for a workable but really laborious process to make a seamless pattern. In the screenshots below you’ll find an explanation of how it was done, but really, if you know of a better way please share in the comments!

EDITED: Track6 knows a much more accurate and quick way to accomplish these steps and was nice enough to share it with everybody in the comments. The idea is the same, but the process better. Thanks!

As you can see from the last screenshot, the pattern was still quite a mess at this stage. Filling out the middle took a little while of puzzle piecing everything together. By the end of the workday last Friday I had spent a little too much time on this thing, and still wasn’t happy. So over the weekend curves were smoothed and highlights added, and finally it was starting to look right. An anxious face showed up in the curves so I made a little preview image just for fun.

So that’s the story of this freebie! I hope if you embark on making your own custom seamless pattern you’ll share some shortcuts with me in the comments.