Vector art has hit the big screen. A 2006 film based on a Phillip K. Dick novel used 50 animators working for 18 months to create vector effects. A Scanner Darkly, a 2006 film about a futuristic world, was done entirely in vector. Each minute of film took 500 hours to complete, using a licensed software program not available to consumers. Adobe Illustrator is also a vector program (if not the vector software), and we can create similar images using it.

We caught up with Starling Allen, the lead animator for A Scanner Darkly, and asked him about vector technology, his inspirations, and the methods used for this vector animation film.

[ Check out this Adobe Illustrator tutorial on creating the A Scanner Darkly vector effect. ]

Q: Did vector art inspire you to create the film’s effect? What’s your experience with and outlook on vector art?

Using vectors is beneficial because each frame has hundreds of marks on it and files stay small. Also, as you know vectors can be blown up infinitely, making a transfer to the big screen possible. I come from a fine art background, with very little experience with vectors and no previous animation experience. This film and this software have definitely opened my eyes to the possibilities of future projects using vectors.

Q: How do you feel this vector-looking animation adds to the emotion/effect of the film?

The film is enhanced by the look of the animation. The characters in the story are living in the near future, in a paranoid world. The animation, while clinging to reality due to its detail and proximity to real footage, allows the viewers to enter the head space of the characters and feel their paranoia and experience their mind-altered environment. Vector art also allowed this movie to be made for the budget it was allowed. The animation is able to get these elements across by creating a convincing environment that they could live in.

Q: Lines as well as smooth, solid colors are used in this animation technique. Why did you decide to go with this look?

The combination of lines with the solid colors was chosen because from the beginning [Director] Rick [Linklater] wanted this to feel like a graphic novel come to life. He liked the realism of the drawings in some graphic novels, but also the stylized look they capture. It was also important that the audience recognize the stars throughout the film. Using black lines was a good way to start a scene and really define the actors, backgrounds, objects, etc.

Q: Lastly, any plans to use more vector-looking art in other projects?

A number of us have been affected by this film and this process. I had never before had any real desire to make animation, though I enjoyed it. Now I feel as though it is something that can be achieved in a style I value and look forward to what comes next. I have definitely become a vector fan and would only use vectors in upcoming animation projects.

A Scanner Darkly is a Warner Independent Pictures release. Images © Warner Bros. Entertainment.

Graphis magazine referred to Carson as a “Master of Typography.” I.D. magazine included Carson in their list of “America’s most innovative designers.” In Newsweek magazine, a feature article said of Carson: “…he changed the public face of graphic design.” Emigre, a graphic design journal that ran for 21 years up until 2005, devoted an entire issue to Carson. His long list of clients includes American Express, AT&T, Atlantic Records, Budweiser, CNN, Levi’s, MTV, Sony, Toyota, Warner Bros., and Xerox, to name just a few.
Carson travels throughout the United States and the world, speaking at seminars and conferences on topics of graphic design and typography. He also enjoys surfing and at one time was a professional surfer.

Layers: David, could you tell us a little about your new book?
Carson: It’s called The Rules of Graphic Design. I’m working on it now in Zurich, Switzerland, where I have a small studio, besides my one in the states. It will show a lot of the new work I’ve done over the past few years, and will, as the title suggests, finally get the official “rules” out on graphic design. It should be out early spring 2008.
My first workshop I ever attended on graphic design was in Switzerland, so the book will no doubt be affected by my being here. I started it in the states and it will be finished there.

Layers: As one of the most well-known and influential graphic designers in the world, how do you balance work and play? Do you still get to surf often?
Carson: I’ve always felt I make my living from my hobby, so I’m lucky in that respect. As Marshall McLuhan said, if you’re totally involved in something, it is no longer work, it’s “play or leisure.”
I surf in the Caribbean every winter. There’s a perfect point break in my front yard. I watch the Internet surf reports, and when a swell is coming, I head down to the British West Indies. It’s a very special place and helps me recharge.

Layers: When creating a design such as a magazine cover, article, or website, what are a few of the most important things a designer should consider?
Carson: Who is the audience, what is that audience’s visual language, what type of things are they seeing? How can you communicate and reinforce visually what is written or spoken, and how can you stand out from the competition in that particular field?

Layers: You redesigned Surfer Magazine in 1991 and founded Ray Gun as well. How does redesigning a medium, whether it’s a magazine or advertising campaign, differ from creating something from scratch?
Carson: In some ways they are very similar. You have to determine who the audience is, and what is the message you want to portray through the design. A new design gives you a bit more freedom, as you can help define the language. I think Ray Gun helped establish a certain visual language for alternative music. But redesigning, or inventing something new, both have their challenges and rewards, and I enjoy both. As long as you look for the solution in the particular thing you are working on, and not some predetermined formula or system, you will never run out of ideas.

Layers: I remember attending a seminar when you spoke at a local school here in Central Florida years ago, and you told us a story about where you had the text in a magazine article covered up or unreadable, but the layout was spectacular. Do you have any other humorous or quirky stories of editors getting mad that your layout caused the article to be unreadable?
Carson: You might be referring to the article I set in the font Dingbat, largely because I found the article very boring. To start designing, I have to read the article, or brief it or listen to the music, to see where it takes me visually and emotionally. It was [a] bit funny, maybe, that at Ray Gun some of the writers complained early that their articles were hard to read. But then by the 30th issue, the same writers would complain if they thought their articles were too easy to read! The layout came to signal something worthwhile to read, so the writers came to look forward to see how their words were interpreted.

Layers: Some have said that you are heavily influenced by the ocean. Is that true, and where do you find other sources of inspiration when creating a design?
Carson: My environment always influences me. I’m always taking photos and I believe things I see and experience influence the work. Not directly, but indirectly in some shape or color or something that registers. The ocean has always played a big part in my life, but it’s hard to say exactly what that influence is in regards to the work. But I’m always scanning the environment I’m in, and I’m sure it ends up in the work.
I think it’s really important that designers put themselves into the work. No one else has your background, upbringing, life experiences, and if you can put a bit of that into your work, two things will happen: you’ll enjoy the work more, and you’ll do your best work. Otherwise, we don’t really need designers—anyone can buy the same programs and learn to do “reasonable, safe” design.

Layers: You have branched out into directing television and video commercials. What aspects of print design do you also use when directing video? Do you often focus on typography as a major part of it?
Carson: I’m often asked to direct commercials where the type plays an important role, and sometimes I add type to other peoples’ work. My approach is very similar to print: who is the audience, what is the emotion of the spot, or the feeling we want the viewer to get from watching, and how visually can we make that happen?

Layers: Could you give an example of a video project that you enjoyed directing? What software do you or your associates use when creating these, and do they include Adobe After Effects?
Carson: After Effects is hugely important in the commercials I work on. It’s hard to imagine how we did them before. Well, actually I know—we did them in very expensive suites in post-editing houses in Los Angeles and New York! I just did some work for Saturn cars, and it was almost all done with After Effects. It’s clearly the best tool for motion graphics.

I directed an in-flight commercial for American Airlines—a 90-second spot—that I enjoyed very much, from casting the actors to selecting footage to having some fun with the type. I also made a commercial for the band Nine Inch Nails for the MTV music awards, and the launching of Lucent Technologies, which were type-only spots. In general, I’m drawn more toward moving images and type, but I’ll always do print, even though “print has ended.”

Layers: Finally, what advice would you have for other graphic designers just starting out?
Carson: Do what you love, trust your gut, your instincts, and intuition. And remember the definition of a good job: If you could afford to, if money wasn’t an issue, would you do the same work? If you would, you’ve got a great job! If you wouldn’t, what’s the point? You’re going to be dead a long time. So find that thing, whatever it is, that you love doing, and enjoy going to work for, and not watch the clock or wait for weekends and holidays.

For more information on David Carson, visit www.davidcarsondesign.com.

Download the support files.

Step 1

Open the Adobe InDesign publication file we saved from the second part of the tutorial. Go to the back cover (page 4) and use the Text tool to add a title using the same font we used for the titles on page 3. I used Rosewood. Creating two separate text boxes enables us to move each line to where we want with a Selection tool, instead of having to move it word-processor style.

Step 2

Go to File>Place and select the Word document, Spreading Joy.doc. Instead of clicking-and-dragging a text box, just click somewhere and the entire article will be placed. Move it so it’s over the photo like shown here.

Step 3

Select the photo of the woman blowing the bubbles. Open the Text Wrap palette (Window>Text Wrap). Click the third-from-left option at the top so the text will wrap around our photo. Normally the text will wrap around the entire photo. But since this photo is overexposed and has a lot of white area in it we can have text, let’s have the text wrap more specifically around the subject in the photo instead of the entire photo. Change the Contour Options to Detect Edges.

Step 4

This causes the text to wrap around the woman.

Step 5

Draw two circles using the Ellipse tool (hold Shift to make perfect circles). Select them with the Selection tool and add a text wrap on the Text Wrap palette. Select the third-from-left option at the top. We also want to get rid of the lines where only a word or two is, on the right side of the woman. So move the photo over to the right a little bit to push the text out of that area.

Step 6

One downside of using the Detect Edges County Option on the Text Wrap palette is that it may allow text into areas you don’t want it to be. For the photo of the woman blowing bubbles, the white area shown here has let an “a” letter in there.

Step 7

Let’s fix that. One way to do that is to create an object-such as a circle here-and add a text wrap to it on top of the area we don’t want text.

Step 8

Let’s add a pull quote to one of the articles. Go to page 2 and off to the side use the Text tool to add a quote. Change the font size of the actual quote and have the source of the quote be a smaller font size.

Step 9

Add a text wrap to this text box, using the same option as the other text wraps.

Step 10

Next, click-and-drag the text box with the Selection tool over an area of text. Placing it on the edge somewhere prevents it from creating awkward short text sections such as would happen with placing it slightly off the side of the page.

There’s a little too much white space here between the pull quote and the article. Fix that by clicking-and-dragging the sides of the text wrap. You can move the line or just a corner. This enables the text to get closer to the pull quote.

Now we’ve created a four-page publication and learned a few techniques in the process. Try creating a newsletter, portfolio, or magazine with the same tools we’ve used here.

Download the support files.

Step 1

Open InDesign and go to File>New or click the Create New File icon on the welcome screen. Set the settings shown here, all the default settings, except set it to 4 pages.

Step 2

Let’s set up the master pages. That way we can add a header and page numbers automatically. Double-click on the A-Master icon on the top of the Pages pull-out palette to open up the master pages.

Step 3

In the lower-left hand corner of the left master page, click-and-drag with the Text tool to drag out a text box for the page number.

Step 4

Go to Type>Insert Special Character> Auto Page Number. [if you are using InDesign CS3 the menu is a bit different: Type> Insert Special Character >Markers>Current Page Number.]

Step 5

This will insert an automated page number so you don’t have to number each page. Change the size (and style if you want) of the font to an appropriate one for you publication.
[Note: Additionally, you could also place text (like the word 'page' or '#' symbol) in front of the page number and it would be continued throughout all pages using the master page template.]

Step 6

Select the Selection tool. Hold down Option (PC: Alt) and click-and-drag the text box that has the automatic page number in it over to the right page to create another instance of the Auto Page Number. I placed the text box on the right side page on the lower right hand corner.

Step 7

If you put the text boxes for the page numbers in the same locations as I chose to, it should look something like this.

Step 8

Page numbers are not the only objects to put onto the master pages. And all the objects don’t have to be automatically updated objects, either. You can add photos, text, or shapes and they’ll be on every page. For this tutorial, add just a simple title at the top of each page by clicking-and-dragging out a text box along the top.

Step 9

Open the Paragraph palette and click the center justify icon to center the text after highlighting it. Up in the Control palette, change the tracking to 600 to spread out the spacing of the text to spread out the title. The Tracking setting icon is an uppercase AV with directional arrows underneath it.

Step 10

Open Adobe Illustrator, create a New Document and go to File>Place to place the japanese_flag.gif file.

Step 11

After clicking on the placed file with a Selection tool, click on the down arrow next to Live Trace up on the Control palette to pull down the options. Click on Tracing Options. Change the settings to the ones shown here; pretty much a basic black and white trace. Click Trace to apply the trace.

Step 12

Press Expand up on the Control palette.

Step 13

Next, Deselect the image. Then, using the Direct Selection tool, click on the white areas of the placed image. Press Delete to remove the white areas. Be sure you are using the Direct Selection tool, the white arrowed one, and not the Selection tool, the black arrowed one, which would select then entire object instead of the clicked object (the white area) of the greater expanded object.

Step 14

With the Direct Selection tool, click on the black object and click on the black and white gradient in the Swatches palette (Windows>Swatches).

Step 15

Change the direction of the gradient to a diagonal slant by selecting the Gradient tool and then clicking-and-dragging form the bottom right to the upper left of the object.

Step 16

Next, click-and-drag a color from the Swatches palette to one end of the gradient on the Gradient palette (click on the gradient tab if the palette isn’t open). Click-and-drag another color to the opposite side of the gradient slider to add the other end of the gradient. I changed this one to red and white to keep with the Japanese theme.

Step 17

The object should look something like this. For the publication, we want more white area, so use the Gradient palette slider to have more white area.

Save it as an Illustrator.ai file for the next part of this tutorial. Save the InDesign file as well. With the second part, we’ll use this as a nice background for two pages of the publication. We’ll also add some new graphics and unique title text and complete the publication with the third part.

Download the support files.

Step 1

Open Adobe Illustrator and open the Japanese vector file with the gradient we created in the first part. Open the publication we created in Adobe InDesign. In Illustrator, choose a Selection tool and click on the Japanese gradient flag and go to Edit>Copy. In InDesign, double-click on page 2 icon on the Pages palette. Go to Edit>Paste and resize the object to go across the spread of pages 2 and 3.
Note: In InDesign, you need to hold Cmd (PC: Ctrl) when you resize the object. If you just click-and-drag the corner without holding Cmd (PC: Ctrl), it will crop out that section instead of resizing it.

Step 2

Next, let’s place the photo we want for page 4, the back cover, and you’ll see what I mean. Go to page 4 by scrolling or double-clicking on its icon in the Pages palette. Go to File>Place and place the bubbles.jpg file. With a Selection tool, click-and-drag it to move it so the photo is flush with the bottom of the page and towards the right. To crop out parts of the photo that are unneeded, click-and-drag a corner. If you want to resize it, hold down Cmd (PC: Ctrl).

Step 3

Now let’s add the cover images and titles of the articles. You could add the text into the image file in Photoshop, but if we want to change the text later it’s more of a hassle. It’s preferable to add the text in InDesign as text boxes over the image. In InDesign, go to page 1 and go to File>Place and place the file lines.jpg. Resize it and move it towards the center of the front cover. Go to Object>Rotate to rotate the text along the lines. Designers such as David Carson bring text design in magazines to a new creative level. Instead of just typing in horizontal text, try vertical text or coordinate it with the photo behind it, such as we do here.

Step 4

It should look something like this if it’s placed the same way as I did.

Step 5

Next, let’s create a nice title header for the bottom part of the cover. Open Illustrator and use the Ellipsis tool to draw a perfect circle (hold down Shift to maintain ratio for a perfect circle). Use the Rounded Rectangle tool to draw a shape on top of it like shown here.

Step 6

Click on each of the objects and change the Fill color to an orange color from the Swatches palette. Set the Stroke to None if it isn’t already. With the Text tool, click to add some text. Click again to create another text box for the page number. Resize the fonts with the Control palette. Alternatively, if you just clicked instead of clicking-and-dragging, you can click-and-drag the text to resize the text size. Move it over the objects as shown here.

Step 7

Click-and-drag around all the shapes and text, and go to Edit>Copy. In the InDesign document, go to the cover (page 1) and go to Edit>Paste and move the objects to the bottom left of the cover. Go to File>Place to place the same photo we have on the back (page 4), named bubbles.jpg. The cover should look something like this so far.

Step 8

Let’s add a title and an “about us” section of text on the cover. On page 1, click-and-drag with the Text tool to create a title at the top. I used Impact for a strong font. In the bottom right-hand corner, click-and-drag a text box and type out what your publication is about.

Step 9

Now let’s insert the articles. Go to page 2 (the left hand side of the inside spread) and go to File>Place and place the Word document file, Kimonos and Video Games.doc. Once you select the file and click OK, the cursor will turn into a paragraph mouse icon. There’s two ways to place the text. You can either just click somewhere and the entire article will be placed and you can resize the resulting text box. Or click-and-drag out where you want the paragraphs to be.

For this tutorial, let’s use the second technique. Click-and-drag in the left hand side of page 2, from near the top to the bottom to create a column of text. Most of the article will still not be placed, so there will still be text to be placed. Click once on the red plus sign at the bottom of the text box and click-and-drag from the top to the bottom again. Repeat this for a third column, and then repeat it for the rest of the text to go along the bottom like shown here.

Step 10

The text is left-justified, which is what text usually is if you’re using Word or some other word processor. But we want it to fill the columns like they do in newspapers. So select the text in the article and click the Justify icon on the Paragraph palette.

Step 11

One of the biggest problems of beginning layout editors, at least in my experience from advising a university newspaper, is uneven paragraphs (besides copy editing, which is a different subject). There’s an easy way to vertically align the paragraphs. Click-and-drag from the top Ruler down to the text boxes to move it right below the first line of text. Then click-and-drag the text boxes to align them using this guide. Add a title and a subhead by adding new text boxes.

Step 12

Let’s place two articles on page 3. Go to page 3 and go to File>Place and place the Word document, Top Ten Places to Travel.doc. Use the same techniques from the previous steps to create the columns in a customized way. Add a title above it. I used the Rosewood font. Place this article on the bottom half of page 3.

Step 13

Next, go to File>Place and place the Word document, Thoughts on Travel.doc. Add a title above it in the same font as the other article. (You don’t want too many fonts in a publication; perhaps 2 or 3 at most for body text and titles).

Step 14

Most of you may just manually add indents when typing in a word processor such as Word by using the tab key. There’s another way to indent the first line in paragraphs so you can add the indent after placing the text without having to manually go through and tab every indent. After selecting the text of the article we just placed, go to the Paragraph palette and change the value in the second-from-top field on the left to 1 pica (1p0).

Step 15

This will indent the first line in each paragraph automatically.

Step 16

If you’re following along exactly as opposed to customizing the articles to your project, your page 2 and 3 spread should look something like this.

Save the InDesign publication to finish up this publication in the next and final section of this tutorial.

I got this public domain image from Alice in Wonderland book from the 1800s, scanned onto a web site. There are thousands of other images out there in the public domain.

Step 1

Open a new document in Illustrator, go to File>Place and place the public domain image of Alice. Open the Layers palette and click the Create New Layer button at the bottom of the palette to create a new layer. This is to keep our new vector shapes on their own layer.

You can use various colors for your trace, but for this one I want to keep it simple with just black traces. Use the Pen tool (or the Pencil tool) to trace over the dark parts of this line drawing. Manually tracing allows us greater control and also lower number of paths and anchors than we would have with Live Trace.

Step 2

For the curvy parts of the drawing, use the Pen tool and click once on one end of the dark area. Next, click-and-drag slightly so the path curves along the shape.

Step 3

Some dark areas are smaller and thinner than others. To avoid a blocky appearance, curve the edges by clicking-and-dragging as you click anchor points with the Pen tool. When you draw back to the original starting point for each shape, hover over the original point and click to close the path.

Step 4

As you draw each shape, try clicking the Eye icon on the Layers palette next to the layer that the original image is on. This will allow you to see just the shapes without the image underneath and help you determine if there are any missing parts.

Step 5

I added a few new shapes which make this trace look a bit different from the original photo. These ripples I made using the Pen tool make the girl look like she’s standing in water.

Step 6

Her hand ended up being awkwardly in the air, so I added a cigarette. (I don’t smoke, but hey, this Alice does).

Here’s the original image next to the vector illustration that I traced from it.

I’ve also included a few examples of public domain images you can trace over for unique art. Check them out. You might get some great ideas.

You can also find many resources linked at the bottom of this Wikipedia entry. Click on some of the links and see what’s out there.http://en.wikipedia.org/wiki/Wikipedia:Public_domain_image_resources

Step 1

Open a new document in RGB mode, since this will be for the web and not for print. For this example, we’ll make a black background with white icons for a wide variation between the icons and their background. Draw a black square or rounded square with the Rectangle tool or the Rounded Rectangle tool (click-and-hold over the Rectangle tool icon on the Toolbar to get more options). Hold Shift while dragging to make a square.

Step 2

Click-and-hold the Rectangle tool icon and then click the Star tool. Change the Fill at the bottom of the Toolbar to White. Make sure the Stroke is set to None. Click-and-drag on the black square area to draw a white star.

Step 3

Click the Selection tool on the Toolbar. Hold down Option (PC: Alt) and click-and-drag the star to duplicate it. It doesn’t matter where you move it, we’ll situate it correctly next. With the Selection tool, click-and-hold the middle box at the top border of the star. Now drag it down so that is upside down but about half the size of the original star. Move it so its two points meet the points of the original star.

Step 4

Click the Rectangle tool and draw a rectangle over the new upside down star. In the Gradient palette (Window>Gradient), change the gradient to white and black, and move the middle slider to the left. I set it to about 15%. Change the angle to 270° so the black is on bottom moving vertically to lighter shades.

Step 5

Select the rectangle we just made as well as the upside down, smaller star. One way to di this is to click-and-drag over the area with the Selection tool, then Shift-click the black background to de-select it. In the Transparency palette (Window>Transparency), click the arrow to get the flyout menu. Click Make Opacity Mask. Now we have the reflecting icon!

Step 6

Try a few different shapes. Here I’ve drawn a few different objects by drawing the shapes then grouping them (Object>Group) to create a few more examples.

1

As an example, let’s click-and-hold onto the Rectangle tool, which will bring out a side menu which includes the Ellipse tool. Select it and draw out a circle. Hold Shift to make a perfect circle.

2

On the Control Palette, change the stroke to a different brush.

3

Choosing this example brush will change the stroke to something like this.

4

Next, change the size of the brush to a higher number.

5

The circle doesn’t look like a circle anymore. This causes this interesting look, but let’s make something a little bit better.

6

Select the Star tool from the same toolbar area.

7

Change the Stroke of the brush to 100 pt and to this brush shown here.

8

The effect causes it to not look like a star anymore, but this abstract background.

9

Ctrl-click (PC: Alt-click) and drag the object to a duplicate, and do this twice to make two. Change the color of the Stroke of the designs, and adjust the Opacity in the Transparency palette.

10

Finally, place a raster image (File>Place) and apply a Live Trace (for this one, I used the Type preset).

11

Click Expand, and use the Direct Selection tool to select some parts of it and delete them. Now we have a unique, abstract design which can be used as a background or even a logo.

By doing so, we’ll learn a few techniques, including applying gradients to simulate a dried paint effect, the Add to Shape command in the Pathfinder palette, clipping masks, and typing on a path.

Step 1

Open a new file in Adobe Illustrator. With the Ellipse tool, click-and-drag out a few overlapping circles. Hold down Shift to draw perfect circles. They should all together form a “cloud” shape.

Step 2

Change the Fill color to an orange swatch from the Swatches palette. Set the Stroke to None.

Step 3

Click-and-drag around all the shapes with a Selection tool to select them all. Open the Pathfinder palette (Window>Pathfinder) and click Add to Shape to combine them all. Press Expand to get rid of the inner edges and make it truly one object.

Step 4

Next, deselect the cloud so we don’t change its color. Draw out a few long, vertical rounded rectangles with the Rounded Rectangle tool. Change its Stroke to None and set the Fill to a gradient. In the Gradient palette, click-and-drag a dark orange and a regular orange to the opposite sides, like shown here.

Step 5

Click-and-drag with the Gradient tool to make the darker orange appear on the bottom side. The effect is accomplished by having a little bit darker orange near the bottom of the paint drips, much like dried paint, which would be a little bit darker.

Step 6

Now let’s add some text for the parts of the website. With the Pen tool, create a curved path that follows the top curves of the cloud. To do this, click first at one point, then let go and then click where the end of a curve is, but don’t let go yet. Drag it to curve the path. After drawing a curve, be sure to click again on the most recently created point to reset the angle so you don’t get awkward curves.

Step 7

With the Text tool, click somewhere on the path and enter in the text.

Step 8

Select the text and go to Edit>Copy and Edit>Paste in Front. Then move the front text for now to select the back text and add some arrowheads to it by going to Effect>Stylize>Add Arrowheads.

Step 9

Make the back arrowhead text a different color from the text in front, like blue. Then move the front text back on top of the arrowhead text.

Step 10

Add a photo by placing it (File>Place). If you’d like it to have rounded corners, just draw a Rounded Rectangle over it and when selecting both the photo and the rounded rectangle, go to Object>Clipping Mask>Make. Add a background black rounded rectangle and Arrange it behind the photo for a border. Add some other decorations, such as stars with the Star tool or birds or arrows with the Pen tool.

Now we have the basic design down for a portfolio website. Using this, we’d use Adobe Dreamweaver or Adobe GoLive along with Adobe Photoshop to layout out the functional website.

Step 1

Place a photo image of a tree into Illustrator (File>Place). This one is from Istockphoto.com (CREDIT: Maurice van der Velden).

Step 2

Apply a Live Trace from the Control Palette. I used the Black and White logo preset shown here.

Step 3

The result is this image.

Step 4

Select the Pen tool.

Step 5

Click the Create New Layer icon at the bottom of the Layers palette, so our shape we’re about to draw will be on its own layer to keep things organized. Next, draw a shape that completely covers the tree, with Stroke set to None and the Fill set to White.

Step 6

Click the Eye icon next to the layer that our new shape is on (Layer 2) on the Layers palette to hide the shape temporarily. Click the Create New Layer again to create a third layer (Layer 3). With this layer selected, draw out another shape that is above and to the right of the tree. It shouldn’t cover the tree, but be close to it.

Step 7

Next, let’s put both of our white shapes onto the same layer. To do this, click the right-facing arrow next to Layer 3 and this will allow us to see the layer contents. Click-and-drag the contents, called , onto Layer 2. There should be two paths now on Layer 2 and nothing in Layer 3. Delete Layer 3 by selecting it and pressing Delete Selection icon, which resembles a trash can.

Step 8

With all the layers visible, we still can’t see the tree because the white shapes are now covering it.

Step 9

We want to select just the two white shapes on not the tree. With the objects on their own layer, separate from the tree, that’s easy. Just Option-Click (PC: Alt-Click) Layer 2 in the Layers palette. This selects everything on that layer, which are the two shapes.

Then go to Object>Blend>Make and then immediately go to Object>Blend>Blend Options. Change the blend to a specific number of steps. I used 50.

Step 10

Our Layer palette should look like this, with the tree on its own layer.

Step 11

Go to File>Export and set the Type to SWF, a flash movie. When exporting, make sure you have Layer 1 set to Use as Background. This way the tree is the background of the movie. Make sure Animate Blends is checked, so that each step of the blend is a different frame in the movie. Make sure Loop is not selected if you want it to only play once. Use the settings shown here to create a similar flash movie.

The result should look something like this. This technique can be used to cover or uncover various objects for animated effects.

Step 1

Open up a photo you’d like to use in Photoshop. If you would like to use this photo, just click on it, save it to your computer, and then open it up in Photoshop.

Step 2

With a simple background like the one in this image, use the Magic Wand tool to select just the background. In the Options Bar, turn on the Contiguous option and adjust the Tolerance level as needed. Shift-click to add additional areas to the selection. Once the background is selected, choose Select>Inverse to select the subject. Press Command-J (PC: Ctrl-J) to copy the selection to a new layer. Remove the visibility of the Background layer by clicking its Eye icon in the Layers panel.

Step 3

Press Command-J (PC: Ctrl-J) four times to create four copies of the subject’s layer.

Step 4

In the Layers palette, click on the top layer. Go to Image>Adjustments>Threshold. In the Threshold dialog, drag the slider under the histogram to a Threshold Level of about 30, and click OK.

Step 5

Remove the visibility of the top layer by clicking its Eye icon in the Layers panel. Select the second-to-top layer, and go to Image>Adjustments>Threshold again. Move the slider to a higher amount than you used in the previous step (about 60 in this example).

Step 6

Repeat this process for the third layer from the top and move the slider to an even higher Threshold Level (90 in this example).

Step 7

Repeat this process one last time for the fourth layer from the top and move the slider even higher (195 in this example).

Step 8

Next, we’ll change the color of the black in each layer: The higher layers will have darker shades of the same color that we’re using. But first, we’ll need to remove the white from each layer. Make the top layer the only visible layer and make it active. Select the Magic Wand tool, change its Tolerance to 0, and turn off the Contiguous option. Click on a white area in the image to select all the white, then press Delete (PC: Backspace) to remove the white. Repeat this for each layer.

Step 9

Make the top layer visible and active. Command-click (PC: Ctrl-click) on the top layer’s thumbnail in the Layers panel to select all the pixels in the layer. Change the Background color by clicking on its swatch in the Toolbox and selecting a dark orange in the Color Picker. Press Command-Delete (PC: Ctrl-Backspace) to fill the layer with the new Background color.

Step 10

Repeat the same process for the next layer, but with a slightly lighter orange color. Remove the visibility of the other layers except for the two layers already changed to see the effect so far.

Step 11

Use this technique for the last two layers so that the four layers are each a varying shade of orange. The darker the color, the higher up the layer in the Layer palette’s stacking order.

The effect should result in the darker colors showing the details and the background layers being lighter. This image looks like vector art but it’s still technically a raster image.

We can, of course, place it into Adobe Illustrator if we like and trace it. You can also merge all the colored layers and apply a Hue/Saturation adjustment layer to change the colors.

Have fun experimenting with this technique.