Valentine's day - vector comic

For the first time I decided to actually make a comic rather than a stand-alone vector graphic. I figured it would be good practice for me. So I sketched up very loosely what I was going for:

As I was sketching I was also figuring out which parts are going to be reused and assessing how much work I would need to do in Illustrator. One thing was decided from the beginning - this wasn't going to be a point by point build. I decided best way of going about this would be to just sketch it up with a stylus and color with a blob brush for the most part - for small separate details I could always resort to point-by-point or shape-building methods.

I didn't finish sketching out the final frame but I just knew it would be an easy build based on previous content so I left it alone.

I started with the tree - traced the trunk, and used a blob brush to make the leaves. I put the darkest green behind the tree trunk, and the med. green and light green shapes in front. grouped it up and copy pasted it everywhere I needed it. Then made a couple ellipses and applied clipping masks. In retrospect I could've waited to build each frame and then apply the masks but this was more helpful visually and the area wasn't cluttered with unnecessary details.

Then I drew the girl, the bird, and the bear - all just traced and colored. Even though I had drawn the bird a couple times I just re-used the one from the first frame and added details were needed (like the tail and spread wings), or moved parts of it where necessary - like the beak and eyes. Same goes for the girl. The bear I had to draw 3 times as he appeared completely differently in every frame and there was  no way around it.

The rest was little details here and there that were quite easy to make anyway.

The layout is what took another 1-2 hours after the fact - since my sketch was too loose and I changed some stuff around the layout I had in mind just didn't work. I grouped everything by each frame to move it around without a hassle. And copied al those groups onto one new layer and turned all other layers hidden. Finally I got a composition that I was happy with and the work was done.

So this took me about 5.5 - 6 hours with one smoke break (without counting fixing the layout later). I was almost glued to the screen the whole time. The first frame probably took me the longest. Looking back I probably could've saved some time if I wasn't organizing my layers and sub-layers in such a meticulous way. But it's a habit that I've worked hard to acquire and which pays off in most cases - especially if you are to reuse pieces of your work later for something else - then instead of a giant tangled mess you have a clean neatly ordered set of layers.

Point-by-point build would've taken a lot longer for this because my sketch was so loose. If I had spent more time drawing on paper the point-by-point would've been the way to go probably :)

Surface 2 Pro setup for drawing

This is my setup for drawing / vector graphics / etc.

Surface 2 Pro by itself is great - full blown OS, small and light yet as powerful as my Desktop PC. Stylus support is amazing so naturally I was very excited to draw on it rather than a Wacom tablet - Finally I get to look at where I'm drawing rather than my hand drawing somewhere on the side and my eyes being glued to the screen in front of me.

But for using Illustrator or Photoshop the screen is to small. What do to do? Get a docking station. And not just any docking station - Microsoft docking station specifically for Surface. you just slide the sides in - and immediately everything connected to the station is working - no hassle.

At first I just set it up on my desk normally - but the tilt wasn't enough for me so I came up with this idea of setting it flat on the table - just like my Wacom was. It turned out to be surprisingly sturdy and convenient to use.

And when I'm doing web-development or don't need to draw with a stylus in general I just set it up normally to my left. with Type cover attached - docking station doesn't get in the way so especially when I'm not mirroring the display it's actually kind of nice to have to keyboards :)

And when I need to leave I just slide the sides out ...

And I'm good to go!

My poor PC doesn't get any action any more. It just sits there sadly with a Scorpion tattoo on its side. And the only time it gets turned on is when I'm moving more files from its hard drive to my sky drive (it's a long process - I have a lot of photos :) and want to filter out the baddies before I put it on SkyDrive.) Oh yeah and with the purchase of Surface Pro you get 200 GB SkyDrive space for 2 years.

Ah, and for people extremely loyal to the Wacom tablets - be happy - you can install the Wacom drivers on your Surface. I personally haven't done that because I just don't feel like it's something I need to do. Surface Stylus support hasn't let me down - pressure, tilt everything is perfect (for me anyway).

This is not part of my normal set up but 'it' keeps flying onto my desk and pushing keys. He is very drawn to the clacking of mechanical keyboard keys, and anything shiny...

I've got one more thing to write about which arguably isn't very related to this post. On the other hand it was the last piece of the puzzle and essential gear for having a very convenient set of tools for drawing. A light tracing pad.

I looked at a couple options and this one seemed perfect for me - it's very thin and light, has a brightness setting and is LED. It was $80 on Amazon for 8' x 12' size (it's actually slightly bigger so is perfect for both A4 and Letter which is pretty much what I draw on). There were cheaper options - Autograph had a 40$ one but it was more like a box that seemed inconvenient to use over longer periods of time and used a white light bulb - don't know how evenly it would be lit up so I figured if I am to buy such a thing I'd rather get the one I want. Really you can just build it yourself - take a picture frame and put a lamp under it :)

This makes my life a lot easier - I make a rough sketch than trace it and make necessary adjustments then scan it in - which takes out the guesswork when rebuilding in vector (guesswork as in hmmm which one of these 10 lines in the sketch is the on I'm supposed to build).

A couple Illustrations

"Good Dinner Tonight"

This turned into a far more elaborate Illustration than the original scribbles. In general it's good to create a set of backgrounds that can be used with various drawings. You can modify a couple things to make it look different. I think of it as having a set of building blocks. As your collection grows you get more possibilities of what you can "build".

"German chocolate cake story"

I kept this as simple as the original sketch. I made this with a stylus and the blob brush. Was making pretty good time until I got to the cake part and got hung up on details and ended up making a second version of it.

Got lazy with the plate... but was pretty happy with the cake and especially the cherry.

The style didn't go with the rest of the Illustration so I just kept it as a separate piece.

"Catburger"

I've been really busy with work and other stuff lately and didn't have time to keep up with this blog or any other little personal projects like say finishing up the snake game. I'm guessing I won't be able to get my hands on it sooner than mid January. The game itself is done I just gotta polish it - add levels, sounds, main menu and other little stuff like that.

I've been looking into Visual Studio Express 2013 for Web and I gotta say Microsoft did a great job with it. I mean I love my PHP Storm from Jetbrains and that's what I do work in still but I'm seriously considering switching to VS for good. This is on the side-note I am hoping to make a full post on this subject after I look more into it. One of the many things I loved about it was that Bootstrap was already added to the projects. 

Next couple posts until mid Jan will probably be sets of illustrations like this post. Happy upcoming holidays :)

Improving drawing skills with a stylus

I can draw okay for the most part but I do feel a need to improve on that. I can pull it off better when I have a pencil in my hand. It's much easier than controlling the stylus pen in some ways. You look on the screen instead of right where your hand moves, the space is a lot more limited than when drawing on paper, etc.

So for building graphics in Illustrator I prefer placing a sketch drawn with a pencil as a template layer and building graphics with the Pen tool. You get all kinds of flexibility and precision but it definitely requires more time.

Besides, for other programs like Animate stylus drawing is the way to go for the most part - partly because it's a lot quicker... for people who are good with it.

I don't believe in such a thing as talent. For me it's all about putting time into something. Anybody can get really good at anything if they clock in hours and hours of work. The trick is not to get discouraged with bad results. Chances are when you start something you are going to be bad at it especially if it's more of a physical thing - drawing, playing an instrument, singing, martial arts etc. It's easy when we are kids because there is all kinds of spare time and no work / responsibilities. So, I came up with this little plan.

Every evening before I go to bed I draw a very small picture with a marker on a dry erase board. Then I take a picture of it with my phone. Next day when I have time to kill I place the photo on a template layer and use a stylus to trace it. Sometimes I skip it - and let those sketches pile up a bit. Since they are very small and simple it doesn't take much time to re-create it. And it's easier to work with a template rather than drawing with a stylus from the get-go. I don't try to fix any flaws of the marker scribbles - the exercise is just to train my hand. Later if I feel like it I can color it and add to it. I use the Brush tool in Illustrator, set its size to vary from 1pt up to 10pt depending on the line thickness.

It's a long shot. The improvement will come slower than if say you put in 5-6 hours into it daily. But it's a lot less demanding, and easier to stick to. It doesn't really matter what the subject matter is. You can pick a couple characters and just keep drawing those in different positions or doing different things. I usually base it on something funny that happened that day.

Another thing that might help stick to it is if you sort of do it for another family member - a spouse, a child, or a parent. That way it's easier to come up with something cute and funny every day as you have context and can make inside jokes. Also you will get feedback which is extremely important with creative work. And if it's a family member they will be happy about it, they will look forward to it. Here's a couple I did:

Oct 21

Oct 22

Oct 23 - kicked myself in the eye with my knee while doing an ax-kick. It really hurt but was very funny.

Oct 24 - I realized I needed a haircut after I continuously zipped my hair into my boots on accident for a couple days.

These were the first 4 that I made. I will post more once I color the rest. For coloring I use a blob brush and draw behind mode as it's fun to do and it's another thing stylus is really well-suited for.

Fringe - observers - September.

Okay... let's see here. Recently I watched all of Fringe and well it's added to the list of my favorite shows / sci-fi genre creations. So, I had a sketchbook in front of me, I grabbed a pencil and drew this:

This kind of sketch is a BAD BAD BAD idea for converting into vector and very difficult to work with. I knew that as I was shading away with the pencil. I also knew that when I was scanning it and placing in Illustrator despite of knowing better than that.

I rebuilt it with Besier curves (with the Pen tool and other shapes) and this is how it came out:

I looked at it cringed and decided to add spice by adding text-filled shapes. Played with it for a while:

The collar text says "spicy". It just didn't go well with the shape.. Anyway. Looked at it more, squinted and decided to add more changes. So I re-sketched the face and redid it in more of a graphic novel style. And then redid both of these:

Last one is my favorite. I drew the symbols with a stylus - was fun.

I got stuck for a while - couldn't find the correct observer font - all the links to the one everybody said was good were broken :( . Eventually I found a pdf with all these symbols, I print screened it a couple times and just used LiveTrace. I hope it's the correct symbols at least - in the blue version the top word is supposed to be september (or SEPTEMBER) and the second row reads "i love tabasco".

Other fonts used: Arial, Broadway, Ecliptic BRK.

Note: Whatever it is you do in Illustrator ALWAYS work with a copy of the shape - whether it's going to be used in conjunction with another shape and pathfinder tools, a path for a text, or as the original template for derivative shapes (like for reflecting, shearing, etc.). If you decide you don't need it just delete it later. A lot of times it's nice to lock and hide it - or place on a separate layer just for those (depending on how complex your work is).

Digitizing hand-drawn art - part 2 - Bézier curves, pathfinding

Here's a link to Part 1. In short it suggests using a real scanner and the LiveTrace tool in Illustrator.

So, again, scanner is essential. I use a $50 Canon and the results are always much better than taking a photo with my DSLR camera or especially phone camera - mostly because there will be no warping of the image.

For me, there are 2 types of sketches - perfectly drawn through, inked ones and messy scribbles. Like this:

The first sketch is clean, inked, and finished - the only thing left to do is to color it. In this case I should be fine using the LiveTrace tool. This is best for people preferring to do most of the work on paper and to deal with Illustrator as little as possible.

The second sketch on the other hand is a real mess - parts of it are drawn with a pencil and the rest with a pen. All lines are messy and not drawn out. Some details are just not there, and some need to be redone. LiveTrace is really not an option here because the sketch is loose and not finished. To deal with this kind of sketches I will need to do 95% of work in Illustrator. Here's what you need to do.

1. Draw your sketch - don't worry about it being messy or having some curves done wrong. You can make a clean sketch like the bear one and still use this method - it's up to you. The point is you don't have to.

2. Scan your sketch, place it in Illustrator on the bottom layer (and set the layer to template or make it semi-transparent).

3. The sketch will be your guide. The idea is to build that with Bézier curves, basic shapes like elipse, rectangle etc., and the use of pathfinder panel tools. So really it's a combination of different things and you yourself can decide which of the three to use and when. But you should be familiar and comfortable with Bézier curves and pathfinder tools. If you are not, I strongly recommend investing some time into it. In a long run it will save you a lot of headache and trouble.

If you choose this method, you will have 100% control of every tiny detail and curve and can readjust things quite easily. Also readjusting one thing won't "break" other parts.

Here's an example.

On the left is my initial pencil sketch scan. On the right is most of the artwork built with curves and shapes. Notice that everything in the right picture has no fill and precisely the same outline (0.5px plain solid #9E005D). I save that as a graphic style and always use it when I work with this method.

And here is the end result.

Everything is a separate path that I can easily control and modify at any time with no hassle or inconvenience.

When you have a sketch that you use like a template or a guide it is a lot easier to just build paths by points with the Bézier curves rather than using a stylus and the pencil or brush tool. That's also a way to do things but I personally like doing that when I don't have a sketch and am drawing something in the Illustrator from the start.

Bézier curves

(You should watch this in full screen mode)

Use the Pen tool (P) to build a path point by point.

You can add/remove points later with Add Anchor Point (+) and Delete Anchor Point (-) tools (they are in the Pen drop down menu but really you should use the + and - keys).

Each point will have 2 handles - they control curve segments directly to the right and to the left of the point. Use Direct Selection (A) for selecting a specific point (or multiple points). If there are no handles on a selected point it means it's a corner - you can convert it to a smooth point with the Convert Anchor Point Tool (Shift C) or if you have Direct Selection it will show up on the Control panel.

The way Convert tool works is you hold down on an anchor point and drag in any direction - it will convert the point to a smooth one and 2 handles will appear. At first the handles are connected and dragging one around affects the other. If you want to break that, use the Convert tool to drag one of the handles - after that they will move separately from each other. If it's a smooth point you can convert it to a corner one by just clicking with the Convert tool on the point directly.

Placement of points is crucial. There is no rule about it however I prefer to have as little anchor points as possible - it's easier to control the path that way. There is sort of an unwritten rule called "rule of clocks" or something like that. It says if you can fit an imaginary wall clock (elliptical, not necessarily round) into a piece of the curve, that curve needs to have anchor points on 12, 3, 6, 9 o'clock points. You sort of rotate the imaginary clock - so 12 doesn't necessarily appear on the top. It's hard to explain with words so here's a drawing :)

The red path is your curve. It has 6 anchor points - start point, 3, 9, 6, 3, and end point. I could have put another anchor point (or added an imaginary clock) into the curve right before the end point - but it was unnecessary since it's the last 'segment' and i could achieve the desired result by adjusting handles on the end point.

If you regard this path as a  function, you need to have an anchor point on every point of extreme - every maximum and minimum of the function, or every peak and valley.

Don't think too much about this - just get a feel, add points remove points, play with the handles.

Pathfinding

(You should watch this in full screen mode)

Open the Pathfinder panel. The first line on that panel says "shape modes" and has Unite, Minus Front, Intersect, and Exclude buttons. Sometimes it's easier to build a shape by breaking it down into simpler shapes and joining them - for instance, if you are drawing a heart, the easy way to make it perfect would be to draw a circle and a triangle, Unite those shapes, and then reflect the united shape. Then unite 2 pieces of hearts and voila - you have a perfectly symmetrical heart.

Minus Front is like a cookie cuter - the shape that's in front will be subtracted from the shape underneath.

Intersect works like an AND operator in programming and logic. If you have 2 overlapping circles and click Intersect you will have a new shape that's the overlapping area of the 2 circles.

Exclude will do the opposite - it will unite the 2 circles and subtract the overlapping area.

One thing to keep in mind - when you use the pathfinding method it's a good habit to copy and paste in front the 2 shapes you're working with. Because, for example, when you use the Minus Front button you will lose the shape in the front - and if you have other future uses for it it's best to have a copy. The copy or the "throw-out shape" has only one use - to modify some shape.

Know your tools and hot keys!

Most of the books on Adobe Illustrator explain every tool in depth but don't do a good job explaining when and why you should use them. That is what I'm targeting in this tutorial - I'm hoping it will give general guidelines and ideas on how to accomplish your goal and how to work with the tools. Once you understand when and why to use certain tools you should read up on those in your Illustrator book or online - there's plenty of material on that.

Hotkeys are important - it saves a lot of time to push a button on the keyboard rather than selecting a tool on a panel with the mouse cursor every time. However, I strongly discourage getting a list of shortcuts and trying to memorize them. You should learn the hotkeys naturally - by use. You will notice that there are a lot of tools that are used very frequently - like Direct Selection, Selection, Pen, Ellipse, etc. just pay attention to the tooltips when you go and click on a tool. You will learn the important hotkeys overtime and with no effort.

Practice makes perfect - do a couple examples from here and there. Start with a simple sketch, then move on to more complex artwork. Explore the tools and options, try different techniques, see what you like and what you don't like. There is no right or wrong way of doing things - you can accomplish the same result through different methods - just some may take a lot more time than others.

Ah yeah, and here's the final graphic for the squirrel sketch. I was lazy I didn't do highlights and shadows on the squirrel. :)

__________________

EDIT

In the Bezier curves part of this tutorial I was writing about the clock method and described it as an unwritten rule. That was my bad - it's Von Glitchka's Clockwork Method (TCM). I accidentally stumbled upon his video lecture on Lynda.com once and later I bought one of his books (Vector basic training). I'd recommend that book to anybody who hasn't read it. It focuses more on the whole creative process rather than explaining what each tool does. And gives perspective in general on some techniques. Anyway. I just didn't realize TCM was Von Glitchka's method and assumed it's just a rule of thumb.

Including a file via Javascript (with jQuery)

When the website you're developing is big enough it will be most annoying to copy paste the "header" and "footer" code parts every time on every page. If you are using a server-side language like PHP you really don't have a problem - just do

<? include('header.html'); ?>

But what if the site you're developing has very many pages but they are all really simple - to the point that you can't really justify using a server side language? Common issue.

With javaScript you can't really include a file but you can "load" a file into a div, paragraph, or whatever else. When it comes to javaScript, I ALWAYS use jQuery for web-page development. So we need to include that first.

<html>
    <head>
        <script type="text/javascript" src="inc/js/jquery.min.js">
        </script>
        <script>
            $(function(){
                  $("#headerDiv").load("header.html");
              });
        </script>
    </head>
    <body>

        ...
        <div id="headerDiv"></div>

    </body>
</html>

Simple, clean, nice, makes me happy... if it is not working for you I'm going to guess that you are using Chrome and developing locally. It's a Chrome thing - they don't let you do that for security reasons. Just upload your file to the server and test it out - it will work like a charm (in Chrome, too).

What's even better, you can keep your site menu in a separate file as well - this way if the customer requests some changes or asks to add a menu item or you simply made a mistake - you will only have to edit the menu file instead of each and every of the 100 pages you have.

You can argue that the menu might be slightly different on every page - the current menu item needs to be highlighted / different from others. also not a problem - include your menu file, then use .addClass().

I always use Twitter Bootstrap as well, so for me i just do .addClass("active") on whichever <li> I need. You WILL have to add id-s to each and every menu item to do this correctly. It's a really small trade of in time compared to what you would spend if you weren't doing things in this sort of way.