Meg Robichaud

Illustrator course on matygo

Just finished the syllabus for the crash course in illustration that I’m teaching on matygo.com! Learn the power of Adobe Illustrator in 8 weeks. Check it out!

• illustration
• graphic design
• web design
• adobe
• adobe illustrator
• illustrator
• design
• web assets
• logo design
• layout
• typography

Freelancer Lesson: There’s never too much clarification

Figuring out the ins and outs of freelancing is not something that happens over night. How ever you got started, either making the plunge all at once, or dabbling until it took over, you wake up one morning, completely overwhelmed. All of a sudden you’re trying to market yourself, maintain old clients while finding new clients (which is about 100 emails a day), managing subcontractors, updating your portfolio and pretending like you totally understood the tax part of it. Oh, and somewhere in there you’ve got to actually do all that work you said you would.

I’ve made my share of mistakes; from the standard freelancers undervalue themselves to an infuriating amount of unpaid work, to a collection of rather embarrassing bookkeeping mistakes. I like to think that I learned from them, and don’t (okay, rarely) make the same mistake twice. I figured it’s time I start sharing them, and hopefully someone can just read about it, and skip one sheepish email or unpaid invoice.

Todays lesson {part one}: There is never too much clarification {quotes}.

Quotes are always difficult, particularly for new designers. If you haven’t tracked time before, trying to factor out the tv you watched while working on your last project is tough. Once you get some experience, you get a better idea of how long it will take you to do something - but every project is different, and what if you were just on a roll last time? No one wants to be on the hook for unpaid time, but it’s also nice to show up with a quote that sounds reasonable. So if you find yourself with the opportunity to just bill at the end, without a quote ahead of time, you should jump at it, right? Wrong.

No one likes a surprise with a dollar sign. Just because you didn’t give them something to expect, doesn’t mean they don’t have expectations. I assume if you’ve managed to get the go-ahead without a quote, they know your rate, but in the spirit of clarification. Make sure they know your rate. Unfortunately, that’s not enough. They may not be basing their expectations off what their what you cost three years ago, or what their last designer costs, or what their brother-in-law’s sister’s nephew charged when he was 12. Who knows. You can take advantage of the no-quote by being a bit more vague, but just give them *something*. 

Give yourself a larger window: “I’ll get started tomorrow, it’ll probably take me 6-12 hours, so expect it over the weekend”

Give them a starting point: “I did something similar to this *here*, and it took me about 40 hours when it was all said and done. Though, as I understand it, you’re looking for more custom illustrations.”

Be honest, and just keep them in the loop: “I’ve never done a project like this before, but I will check in with my progress when I hit 20 hours.”

Todays lesson {part two}: There is never too much clarification {information}.

It’s really exciting when a client asks for something really specific, using design/web2.1 jargon. Awesome! I know exactly what you’re talking about and will get started right away! Don’t do that. Every client is different, and a lot of them probably do know exactly what they’re asking for but.. clarification never hurts, but when it helps, man does it help. A particularly dangerous combination when you combine it with an open quote, a misinformed client is a painful headache if you let it go to far. Simply explaining back what you intend to do goes a long way.

It is always a good rule to break down a project into steps. Reasonable people are reasonable, if they just understand it (and if they’re not reasonable, fire them - yeah, you can fire clients too). If it’s an illustration, include that you need to do some research to get the perspective right, if it’s a website, include that you need to wireframe, if it’s an icon, make sure they know that they are harder then they look. 

Combine these two ideas - explain a project back, broken down into steps - and you’re golden. It will keep you and your client on the same page, and prevent any big surprises, while giving you a friendly way to say “you do know that you’re asking for a website… right?”

• graphic design
• web design
• illustration
• freelance
• advice
• article
• lesson
• quotes

Walk Through: Sketch to Digital art

I was working away on a logo/illustration hypertiny (check them out, they do cool things) and it occurred to me that this would be a great example to take a walk through in converting a sketch to digital art. Here we go.

Okay, so maybe the first step is a bit tricky, but if you can get through this part on your own, I’ll walk you through the rest…

Take out your sketch book and draw something awesome.

Got it? Good. Me too - I’m using HyperTiny’s baby monkey. 

Place it into illustrator. 
(That’s file > place) 

Your screen should look something like this:

That is, you’ll need your tools (to the left), you’ll need your sketch (center) and you’ll need the pallets to the right. (If you can’t find all of those pallets, just go to the window menu, and they will all be listed there)

Select your illustration, and open the layers pallet.
Make a second layer, and move the one with your illustration to the top.
(The new layer button is that little folded paper icon on the bottom of the layers pallet)
(Just click & drag to move layers) 

Your layers should look something like this:

Keep that layer (layer 1 with the sketch) selected. Open your transparency pallet.
Change the blending mode to multiply, and the opacity to ~60%.

It should look something like this:
 

Go back to your layers pallet, and click the lock button on Layer one.
(It’s the empty box by the eye)

 

Awesome. Guess what you can do now? Trace your sketch. This is a big step, too. Break out your pen tool, and just trace all of the basic shapes.

I know it’s a little intimidating to try to draw an entire sketch with the pen tool, but if you just look at it as one simple shape at a time, it’s not so bad. 

Here’s the first two shapes that I started with - I used the elipse tool (L) for the circle, and pen tool for the flag. Just two solid shapes. No problem.

 

While you’re working on that, I’ve also got a couple of (pro?) tips that might be handy.

• Remember that the sketch on top is on multiply, so if you use the eye dropper to select colours, you’re going to get the multiplied version. 
  • Instead, toggle the eye on the layers pallet, and hide your sketch when you use the eye dropper. 
  • Alternatively, you can just select, then unselect the shape with the colour you want, then the next shape you draw will be that colour.

•  Remember the move-to-front/move-to-back & move-forward/move-backwards hot keys (I’ll list them below). Instead of trying to match the edges perfectly, just make your shapes overlap, then send one to the back or front. If you master this, drawing gets much faster.
  • Move forward one object: ⌘ + ]
  • Move backward one object: ⌘ + [
  • Move to front: ⌘ + shift + ]
  • Move to back: ⌘ + shift + [
• If you want to copy the edge of any object, use your direct selector (A) to select the points of the edge that you want, but leave the last end points that you want out (AI will always grab one more end point on each side). Copy. Paste. 
• If you’re drawing a shadow, don’t come up with a whole new colour, just add a bit of black.

Make it through? Me too. So this is how mine looks after I’ve traced all of the basic shapes. 

 

Not that different, but when you take away the sketch… Voila! you have simple, digital illustration! (I added some tufts of hair).

 

You can stop here, if you want. Or, you can go back in and clean it up, and add shadows. Another daunting task, I know. But maybe it’s not so bad… Enter: pathfinder pallet.

Let’s take the same starting point, at the very top of the boat. 

Right now, not that interesting…


Select a single shape (in my case, the top circle), and duplicate it. 



Duplicate it again. This time, strategically just a slightly downwards & to the right.

Open your pathfinder tool, and click “minus front” (That’s the second one from the left). It should look something like this:

 

Open your colours pallet, and drag the black out about 15%. (ie. less black)
(if you don’t have any black in your colour, hold shift while you drag any other slider, and it will give you a lighter version of what ever colour you had)

Drag the object back over the original object. Voila! Highlight! And you didn’t have to draw any of it.

 

If you have the patience to do that for all of your elements, you come out with a decent illustration. Have a look at how my monkey turned out after just adding shadows and highlights with the path finder tool.


It looks complicated, but it’s all just basic shapes, with a little black or white added to them to make the shadows and highlights.

Now, you can start really having some fun…

 

Well guys. I covered a lot there. I would love to hear if you’re trying this out, and I am always around twitter if you get stuck, or have any questions! @megrobichaud

• illustration
• illustrator
• sketch
• tutorial
• monkey

Is it flattering to become the Growlab mascot?

Another illustration before the night is done! One of the founders of Sunnytrail (one of the companies in the GrowLab cohort) has the tendency of saying unexpectedly awesome things, that have led us to believe that he’s an evil genius. I’ve somehow been convinced to draw the t-shirts?

 

• illustration
• design
• illustrator
• vector
• texture
• photoshop

It’s been an icon-full day: New Matygo Icon Set

Holy cats, I think I may run out of icon-magic after this week. More icons for you! Matygo is launching their market place, I’m lending a hand. 



And of course, every icon needs a home..

 

Thoughts? Comments? Concerns?

• icon design
• graphic design
• web design
• asset design
• design
• illustration
• illustrator
• vector
• photoshop
• adobe

Find People Icon

Well, if you keep up with my tumblr, you’ll know I was having some trouble with the “Find People” icon. I couldn’t decide if it should be “FIND people” or “find PEOPLE.”

I came up with some sketches emphasizing each direction, but none of them really captured both.

I got some great feedback from Dylan Patty & NightofReason (thanks!!) But ultimately went with this direction:

I figured that you only really want to “FIND people” when you first download the app, and want to populate it with people/things that make the app worth using. But this icon is to stay on your homescreen *forever* long after you’ve found all of the people that you intend to find. After that, you’re not really interested in “FINDING people” you just want to “find PEOPLE.”
Ergo, People > the finding thereof.

So, here’s what I came up with. 

And of course, it needs a home, with the rest of the home page icon set …

 

Thoughts? Comments? Concerns?

• illustration
• icon design
• icons
• people
• find peope
• iphone
• iphone design
• illustrator
• photoshop
• adobe
• design
• graphic design