Tag: Illustrator

Reader question: Tips for making forms

Email received last week via my contact form:


Love all the forms you’ve designed. Any practical advice or resources for a beginning form maker?

You rock,


First, thanks for the kind words, Bob!

In no particular order, here are all my thoughts about making forms.

  • Forms for me: I make forms that address a need for me. That means that it’s something I will actually use, test, and revise. This also generally means that the form might be useful for someone else. I haven’t made forms on request for someone else yet, so I’m not sure what that process would look like. Making a form that someone might find theoretically useful seems hard to me — it seems easier to make a truly useful form when you have actual users who can provide feedback. In my personal situation, I’m the main feedback-provider. 🙂
  • Sketch the form first: I usually make a hand-sketched prototype before firing up the computer. This involves cutting a piece of paper to the desired size, then using pen or pencil to sketch out whatever fields I want. I might make a few different versions as I experiment with form element placement. This gives me a good idea of how many form elements can fit on the piece of paper and is a relatively quick way to design the form without spending too much computer-detail time.
  • Illustrator rocks: All my forms are made in Illustrator (with the exception of my Excel grocery shopping list). If, like me, you already have Illustrator, then it’s easy to get started. If you don’t, it could be a rather pricey investment just to make cool forms, so maybe you’ll want to try something you already have available — Word or Publisher, for example. Generally I find that Illustrator has the best fine-tune control, you can make custom vector graphics and make easy rounded-corner rectangles, plus it has awesome features like the Transform and Distort command that make duplicating elements super-easy. A few more Illustrator tips follow…
  • Easy copy in Illustrator: You can easily copy and place an object in Illustrator by selecting it with the black arrow tool (aka selection tool, keyboard shortcut “v”), holding the Ctrl or Command key, and dragging it to your new location. Hold Shift down as well to constrain the movement to a straight horizontal, vertical, or 45-degree angle. Actually, by holding the Ctrl key, you can copy an object while doing almost any kind of transformation — rotating, reflecting, etc.
  • Duplicate your last transformation: Let’s say you used my previous tip to move and copy a rounded rectangle to the right, so you now have two rectangles next to each other. You’d like to copy the rectangle again by the same distance. Instead of trying to drag another copy over just the right amount, type Ctrl/Command-D and your last copy/transform move will duplicate itself! Hit the keyboard combo as many times as you want to keep on duplicating.
  • Transform and Distort: If you have a group of objects that you want to duplicate (example – each row on my weight training workout sheet), use the Transform and Distort command. This allows you to edit the “base” group if you want to make changes instead of having to go through each and every row to make changes later! You can apply the Transform and Distort effect several times, too, so you can have groups within groups. Awesome!
  • Pretty forms: For nice-looking forms, make sure your elements align neatly. Use guides if you have to, or zoom in to check that the edges of boxes line up with each other. I think rounded rectangles make the form look friendlier, as do bright colors. But that’s just me.
  • Print, test, print: Once I have the form designed in Illustrator, I do a test print onto scratch paper, cut, punch, etc., and try out the form. I may make some tweaks immediately and do another test print, or it may take a few days of actually using my new form to figure out what I can improve.

Hope this is helpful, Bob! You might want to solicit advice from other form gurus. Dave Seah and Lori Linstruth come to mind, but I’m sure there are many more out there!

Announcing Custom Shadow Box

I am very very very excited to announce that my new “side business” is finally opening its virtual doors. VERY.

Introducing Custom Shadow Box at www.customshadowbox.com!

Custom Shadow Box web site

Business plan? What business plan?

The [rather uncreatively named] business is meant to be a side project for me. I enjoy working with my hands, and this is an opportunity to try to get some additional income while doing something else I love. I’m not expecting a high volume of orders because of the price point, so I expect to show a loss at the end of this year (for the shadow box side business part, anyway). The startup costs weren’t high, but I did invest a nice chunk of change into professional photography in addition to fictitious name filing fees.

Nevertheless, this has been a great (albeit sometimes frustrating) way to learn about selling tangible product in California, which involves getting a reseller license, dealing with sales tax, and all that fun stuff. Making the web site was also a great learning opportunity. More about that in a bit.


First shadow box
It started with a wedding present given to my sister back when she got married. A friend had arranged the invitation artistically in a small shadow box with silk floral accents that matched the colors of the invitation. I always thought it was a cool idea, but it wasn’t until my coworker got married that I finally tried it out. Their invitations were wrapped in orange vellum with a gorgeous patterned ribbon. My coworker had gerbera daisies in her wedding, so I picked some silk flowers that matched the invitation and put it together.

Fast forward to sometime last year. I was brainstorming ways that I could develop alternative streams of income. By this time, I’d created some shadow boxes to display my own wedding photos and invitations and created a couple more for other friends, as several of my friends were conveniently getting married. I played with the idea of making custom shadow boxes for money and sketched out some pricing ideas. Come 2007, I decided that one of my main goals for the year would be to get this new business idea up and running.


First, the logo. Below, you can see the logo evolution. I started with a simple 3D box shape created in Illustrator and eventually made the frame “thicker” to give it some depth. While I liked the inner shadow effect (large upper right), I eventually moved the shadow in front of the box so that I could do cool things with Jason Gaylor-inspired flowers. I liked my original wild tangle of flowers (third row left), but when reduced to logo size it was too hard to tell what they were (my sister Angela’s feedback), so I simplified the shapes for the actual logo itself. I didn’t want the time I spent on the crazy flowers to go to waste, however, so you’ll see that they show up in other parts of the site.

Custom Shadow Box logo evolution

My original logo and web site design color was teal, but my graphic designer sister said that I should pick more neutral colors so that the site wouldn’t clash with my product pictures. Above you can see my attempts at choosing other colors. Eventually I figured out that it would work best to have the shadow box mark in one color and the text and the rest of the site to be in another color. I also made the page titles green to add some additional oomph (that’s a technical term, by the way).

Web site colors

The web site design went very smoothly. I used my wild flower mass as a page background and already had in mind the kind of feel and style I wanted for the web site, which I’d describe as clean and web 2.0-ish.

The web site development, on the other hand, was a fun learning experience and challenge:

  • I tried to use as-clean-as-possible HTML for the markup. I generally suffer from divitis so this was my attempt to use as few divs as possible. (Note – I don’t think the site validates 100% quite yet. Still working out some of the kinks.)
  • I bought DOM Scripting by Jeremy Keith and then completely redid the gallery page to use better markup, with a fancy Javascript file controlling the application of classes.
  • I also used DOM scripting to get the order page more interactive, with prices highlighting as you select options and the bottom invoice amount automatically updating as you “build” your shadow box.
  • I got to experiment with a totally new illustration style. More below.

There are still some challenges with the order page that I haven’t figured out how to deal with. There’s something about my script that won’t allow me to automatically put the focus on a text field after selecting a radio button (such as Calligraphy Options). Also, if you leave the page and then go back to the order form, the radio buttons are selected but the Javascript stuff has all been reset so the prices aren’t highlighted and the order total is “$0.” Not sure what to do about that either. If you’re a Javascript expert and would like to provide some tips or want to monkey around with my code, please do!

Shadow box photo
The next step was to get some product photography. I had put in some temporary pictures into my gallery of older shadow boxes I had created and photographed. Some of the photographs were okay (such as the one used on the home page which had removable glass) but the photos of black frames were generally not usable because of reflections on the glass. I chose Bonnie Anglin from Anglin Art and Design because of her experience with product photography, although I think I offered her a new challenge with photographing glass-faced picture frames! You can see her great results on the gallery page; she took all the photos except the first one and the third one.

At about this point, I also decided that I wanted to put some illustrations on the how it works page, which was text-heavy and boring. I didn’t think my typical comic style would work, so I contacted Paige Pooler to see if she was available. Unfortunately, she wasn’t, but I was inspired to try out a different style of illustration and see how far I could take it. You may remember my first attempts; that specific portrait ended up on my about page. The other illustrations took a while to complete because of a bout of procrastination, but I’m very very pleased with how they turned out. Notice that I managed to incorporate the wild-flowers in the illustrations as well. See the other illustrations on the how it works page.

Custom shadow box illustration

Using code culled from other projects, I finished up the web site by getting the order form to work, then actually shipped shadow boxes (long-belated wedding presents) to test the shipping price. US Priority Mail ended up being the most cost-efficient way to ship. I ordered boxes from Uline although I still need to find a source for bubble wrap (Office Max will do for now).

And this morning, I went live!

Next steps, and how you can help!

Things I still need to do:

  • research bubble wrap costs and find a source
  • create business card and brochure
  • create invoice template
  • finish baby shadow boxes for friends (need to add baby photo) and take photographs for gallery

How you can help:

  • Kindly spread the word! Word of mouth, blogs, anything will help.
  • Provide feedback about the general business idea, site, and price point.
  • See a typo? Let me know!

Using Envelope Distort in Illustrator for Fitting Words in Shapes

Envelope Distort exampleIn my t-shirt design, I’m using Envelope Distort in Illustrator for tweaking the shape of the words. Envelope Distort is awesome for getting words to fit into weird shapes. There are a few ways you can use Envelope Distort in Illustrator CS2 — I’ll show you what I did for the t-shirt design. Then, I’l show you how to make the “totally awesome wavy text effect” graphic.

Continue reading “Using Envelope Distort in Illustrator for Fitting Words in Shapes”

Me, Illustrated… and the Mouth of Sauron

Heavily inspired by Paige Pooler and this guy at istockphoto, I’m trying a new style of illustration. I call it the “retro round-head big-eyed woman-look.” (Take a look at the links and you’ll see what I mean.)

So, here is my first attempt at a retro round-head big-eyed self-portrait using Illustrator:

Question — should I go with bigger eyes or smaller eyes?

The one on the right (smaller eyes) was traced in Illustrator from my original scan, but thanks to the power of vector graphics I increased the size of the eyes and eyebrows for the left version while keeping everything else the same.

When I was making the eyes bigger, I had a sense of deja vu, but realized that I was just remembering a scene from the special features on the Return of the King Extended Edition DVD, where Weta Digital increased the size of the Mouth of Sauron’s mouth to make it look especially weird and creepy. Luckily enlarging the eyes didn’t make my self-portrait look too weird and creepy; I could really go either way but thought I would solicit opinions as well!

Drawing a honey pot in Illustrator

Honey potThis morning I started on the last component of the Baby Bee baby shower paraphernalia. The other bridal shower organizers decided on getting inexpensive “honey stix” for favors. My job was to figure out a cute way of packaging them. I’ll have to post the results later on, but as part of my project, I wanted to draw a honey pot in Illustrator and decided to turn it into a step-by-step tutorial while I was at it. You can see the completed honey pot, now for the step by step…

Continue reading “Drawing a honey pot in Illustrator”

Cheering groundhog forms added

Cheering groundhog form

Doodah suggested that I incorporate the cheering groundhog into the monthly goal tracking forms, and thanks to Illustrator’s Live Trace function (using “Comic” setting), it didn’t take very long (I just had to adjust the paths for the letters and words). You can download the updated PDF or Word document versions on the Monthly Goal Tracker page. The original un-cutsey version is still up there as well.

Weekend Project: Baby shower invitation

Two of my good friends are pregnant for the first time, and I’m helping to throw separate baby showers for both of them along with some of the other women in my church small group. The original plan was to have the invitations for the first shower ready to go by this morning. On Thursday (T-minus 3 days) I realized with a start that I hadn’t done anything about the invitations! Not only that, because it’s been a scatterbrained few weeks, I had misplaced the address list and had no idea how many people were invited. I’m usually one of those people who knows exactly where everything is. Need an x-acto knife? In the office, in the top drawer of the plastic organizer to the left of my desk. But not this time! The address list was nowhere to be found.

Liz came over on Friday night (T-minus 2 days) to brainstorm decor ideas and color schemes so that I could coordinate the invitations. We first thought about an all-white base with accents of pink — white tablecloths and dishes, with pink flowers and napkins. We had some inside knowledge that the parents-to-be were calling their baby “Junebug” so I went on istockphoto.com to try to find some cute bug illustrations.

As I was paging through the 929 results for bug (Insect: Arthropod), we came across this adorable baby bee illustration. Liz and I both gave a simultaneous “awwwwww.” After staring at the image with goofy smiles on our faces, we decided to go with a yellow-and-white color scheme instead of pink-and-white!

I purchased the image and started pulling together some possible layouts in Illustrator after Liz went home. Saturday morning (T-minus 1 day), Steve slept in but I got up early-ish and worked more on the invitations, then printed them out on my laser printer. Since I couldn’t remember how many people were invited (I was thinking maybe around 30?), I printed out 28. Easy enough to make more later.

Saturday night (T-minus 12 hours), the mother-to-be kindly emailed me the address list, and I addressed the invitations. I had one extra left over — yes! Liz happened to come over that evening and gently pointed out that I had forgotten to include a request for guests to bring baby photos of themselves on the invitation, so I made another sheet and inserted it — good thing I hadn’t sealed any envelopes yet!

Here are the results, with some additional description and explanation…

Continue reading “Weekend Project: Baby shower invitation”