Digitizing hand-drawn art

Creating art directly in Illustrator is great - you can mess with each single line and change colors and even components on the go. However creating something from scratch is rather tedious and time-consuming - even if you're pretty good with a stylus it still is faster to draw something by hand with a pencil (at least in my case anyway). This of course doesn't apply to say abstract-ish sort of art like the three I posted before. I'm talking about drawing pretty detailed characters and objects.

I got a book called "how to draw your own graphic novel" (which is great by the way; has good advice and nice practice exercises). I went ahead and drew the very first character from there - a barbarian. Once it was done I used a 0.05 Black ink pen to outline it, erased all the pencil and was done with it. I wanted to color it in Illustrator so it was time to test out the Image trace feature. I took a photo with a DSLR camera, tuned it in photoshop a bit, and placed the file and tried different tracing modes. It wasn't the best result - I kept losing either the very top lines or the very bottom ones because of the way camera focused. I tried using a tripod and went back and forth with it. Then I started just rebuilding the whole image with curves and lines using the photo as a guidline. It worked but the process was very slow and tedious. And well it wasn't what I wanted.

Then I figured I'd go get a cheap scanner and see if that will make my life easier. I got a $50 Canon scanner (2400x4800dpi). Scanned the image (in grayscale or black and white), upped the contrast and placed it in AI. 

Inked sketch

Image trace worked like a charm - I used the "Sketched Art" option. The black outline was a compound path and all the pieces had no fill but where there so I didn't even have to use a brush to give it a fill - just selected each single piece or groups and colored it. Then I made a couple sub-layers to add shading and detail. After that was done I made a background layer and drew the ground, mountains, etc with a stylus - easy stuff.

Final result

Now, please remember, that this is a picture from "how to draw your own graphic novel" book - not my own creation - so don't use it anywhere or for anything :)

Another way of doing this is building the art point by point and using the sketch as a guide. This method is described in Part 2 of this tutorial.

Buffy / original Scoobies

This was a good show. I decided to attempt making a t-shirt design (which was limited to 5-6 colors). That didn't fall through for me but I still had fun. Anyway here's my original image and t-shirt version.

 

 Next time I make a tv-show themed graphic it will probably be either Doctor Who (10th doctor) or Game of Thrones. But for now I have a bunch of other things I need to make first, so probably will be a while.

Product Naming and Domain Parking

So, you decided to name your company / product / app / website / brand etc? You've been told by everybody how important the name is, given a bunch of vague unhelpful advice of how it should be something memorable, strong, fashionable, short, expressive, awesome, modern, 'edgy', and many other adjectives found in the language? Aside from that you've given it a lot of thought and want it to be "you". Something unique, and related to you in some way. You sit and think about it day and night, right down names on walls because you ran out of paper around the house / office, it comes to you in a dream and in the morning you wonder what drinks you had or what did you have before falling asleep to come up with such horrible idea.

Anyway. The point is you put a lot of thought and effort and time into naming your precious. And YES finally! You got it! It's just right! Sunshine and joy, good mood, cheerful singing, the world is at your feet. You get your cup of coffee and go to godaddy.com, asmallorange.com, or any other hosting spot. You type in myPrecious.com and that smile is wiped off of your face - the name is taken. You say "fine. I'll try this one". Nope that's taken, too. You try .net .org, ... .tv! (you're desparate!) taken... taken. TAKEN! You wonder who has thought of that name that you love so much. You go check out the page and oh what a surprise it's not being used - it's parked. Pay somewhere between $500 and $1.500 or hey $25.000 and that domain will be yours. The other 40% says "hey, if you want this domain click here or contact derpderp@domainnamesiwant.derp." Eventually, you will come across a couple of websites that use a similar name as you had originally chosen for a really horribly "designed" page that actually has nothing to do with the word.

From this point you have a couple choices.

Look around you, pick an object, type in that, if it's not taken - hey it's all yours. Name your precious creation ForkOnAPlate or GlassOfMilk or laVase etc. To anybody who questions you tell them they are not artistic enough to comprehend (and in your mind say "you're not autistic enough to understand").

Or make up a name that means absolutely nothing just put in random letters or close your eyes and type something.

Or, open a dictionary, find a verb that you like, skip a letter or two, or misspell it in a fancy way, let your imagination loose. One of them should work.

Anyway, the point is it's hard enough to find a name, and it's even harder to find a domain name that's not parked or in a very rare case used by somebody else. So next time you make fun of product names or laugh at how they have nothing to do with the product / website / brand, understand that people just didn't want to spend unreasonable money on buying out a... name.

It's really bad out there and nobody is doing anything about it. In my opinion parking should be illegal and monitored by hosting providers. But of course it brings in money to providers so why should they move a finger? The system works fine for them and brings in extra money. And why would they spend time and resources on something that's sort of profitable for them?

On the other hand, if there was a domain provider who would forbid domain parkings, it would probably get all the clients from all the other ones that don't. It would take just one to do that. They could even up their hosting prices - and balance out their no parking policy. Eventually all the other providers would end up with name parkers and no other business, bad reputation, and hopefully either go out of business or change their policy to no parking as well. Sure wouldn't happen overnight but hey would work and pay off eventually. And we would stop having ridiculous brand names and have less chaos, less headaches, less stress, sunshine and singing.

Where was I? Oh, yes. Perfect world. It could and should happen though. I think, a lot of people never give any thought to this problem until they come face to face with it. Then, as soon as they settle for other bad options they forget that there was a problem at all and don't want to so much as raise a finger and do something about it, talk about it, start a petition, raise awareness, or anything else that people do. But first step is realizing that there is a problem that needs solving. A problem that shouldn't have been there in the first place. I bet if somebody went out to all the stores bought out all the milk, and started selling it for $500 per carton or say to the highest bidder I bet people would not be too happy about it and not tolerate it. So ask yourselves why should domain parking be tolerated?

Eraser and Brushes

My first attempt of using eraser instead of a brush. For this technique you draw a basic shape and then use eraser to give it detail.

The tree has 4 layers - first I drew a blob of the middle green shade. Then set the eraser to vary in size based on stylus pressure from 1pt to 3pt and kind of deleted parts where branches would be seen. It was pretty ugly. Then with a blob brush I drew the trunk and the branches, made it azure with the eraser, put that layer under the green. Was still ugly. Drew a dark green shape, placed it between the two, made it azure with the eraser. Finally drew the light green with a blob brush on top of everything and used the eraser again.

The ground was done the same way (2 layers - azure dark on top, lighter solid shape behind). The grass was drawn with a brush with same settings as the eraser. Gradiented the background, added mountains, added the frame and the 'stars'.

The fun of this technique is you draw very generally and liberally and in very broad terms. And then with the eraser just make it azure. It's rather simple and easy to do. What's neat is the same can be achieved with a brush - just then you have to be good at giving it a general shape. This way instead of growing your drawing you take away from it - it's subtractive. But because you have layers and isolation mode it's super-easy compared to say subtractive sculpturing.

The stars being on top of the frame but behind the tree give the graphic some depth.

Foxies

Made a graphic for my mom for International Women's day (March 8).

The writing actually has a couple pieces to it - two layers of the same text (one with a stroke with flowery endpoints, and the other with stroke of none, outer glow, drop shadow), and two groups of flowers (made with transform tool - easy stuff). All flowers on the foreground were stars with all of their anchors converted to curves and readjusted a bit.

I had a different idea for the background but it had to be something happy and with flowers. Took me probably just as long to draw and color the foxes as everything else. And I still kind of don't care for anything but the foxes.
 

Implementing RSS feeds on a website

Nowadays, regardless of a company or a person wanting to have a personal homepage they will still have a facebook page, twitter, blog, or something else - somewhere where they have been and will be posting updates and news about their product or services. That is also referred to as news feed or RSS (Rich Site Summary).

So, it makes a lot of sense to take that feed (or feeds) and implement them on the website under News section - this way the client won't have to worry about updating their website and can just keep posting where they are used to - everybody is happy - client doesn't need to learn anything or do anything and proceeds with his usual routine. And less work for you as a developer/webmaster - you don't have to go update the content.

Most websites make it pretty simple - you just find the RSS button and get the link. Facebook however does things differently. You can go here:

http://developers.facebook.com/docs/reference/plugins/like-box/

by default data-stream=true which means you will get all the posts feed. And you can adjust the width... but it's still not really good for most case scenarios. The result is shown right there next to the inputs - It looks like a scrollable iframe, you can't get rid of the borders or change anything about the styles.

Instead you can use this link:

http://fbrss.com/

It will give you lists of all the people you friended and all the pages you've liked. So go find the page you were looking for and click the link on the right side where it says "RSS some page". Great. Now copy the address from the address bar - just put it in notepad or somewhere else for now.

Now go here:

http://www.jquery-plugins.net/FeedEK/FeedEk.html

As you could've guessed from the link it's a jQuery plugin. Download it (will be a  .rar - you will need a 7zip or a similar program to open it. There is a link to a free 7zip program right there on the page).

Unzip it. Put the JavaScript file into your javascrip folder and include it on your page, and do the same with the stylesheet - or if you already have a stylesheet just copy-paste the styles into your own file (you can do that with the js file as well). They are very small and lightweight. Make sure to have jQuery included (which you should regardless of what page you're making...) and it must be 1.9.1 version or higher.

Copy-paste this code in the <head> ... </head> portion of your page preferably right before the closing </head> tag.

<script type="text/javascript">
        $(document).ready(function () {
            $('#divRss').FeedEk({
                FeedUrl: 'http://rss.cnn.com/rss/edition.rss',
                MaxCount: 5,
                ShowDesc: true,
                ShowPubDate: true,
                DescCharacterLimit: 400
            });
        });
    </script>

Go get the URL you pasted into your notepad at the beginning of this. replace the URL that appears in red with your own (the one in notepad where I told you to paste it ;) ).

And now wherever you want on your page the feed to show just make an empty div with the correct id:

<div id="divRss">
</div>

You can mess around with styles and parameters, add or remove stuff and customize it to your liking - I'm not explaining that - you will figure it out on your own :)).

This will work anywhere literally - your page can be a .html. So, even if you have the smallest hosting package out there this will still be usable and will work just fine.

Of course, if you know PHP or some other server-side language you can make it even better. There is a pretty good tutorial here:

http://nouveller.com/web-design/how-to-easily-display-a-facebook-page-feed-on-your-website/

If you do it with PHP you can easily get all of the posts and paginate it and make it pretty and put it in the format you want but if you want something small and easy to do the one I described should be sufficient.

Seamless Patterns for Web

Illustrator CS6 comes with an excellent pattern making tool - it takes care of all the overlapping and gives a lot of flexibility for your tiling options. The patterns will be completely seamless.

For example, this is the original piece that I made for the pattern:

This is the pattern creation / editing tool.

It has a couple modes for tiles - Grid, Brick by row, Brick by column, Hex by row (the one used here), Hex by column. The tile will have different bounds than the actual swatch - I'm displaying both here - the hexagon is obviously the tile bound and the blue rectangle around it is the swatch bound.

You can move the actual pieces around, resize them and do all kinds of nifty things. Once you play enough you save it.

The problem is it will save the pattern for current file. It's not a big deal since you're saving it as a swatch in the current file, and any swatch is accessible in any other file - you just have to import it. Just annoying a bit - Would be great if you could just save your own patterns as a swatch and be done with it.

That's a small problem to have and it has maybe not perfect but still a solution.

Now, problem 2 is a lot bigger - you can't save your actual pattern as a file or output it for web. So basically you're bound to using it in Illustrator files only... and if you want to save it for web you have to do it manually and the old fashioned way. It's not too bad if you're using a Grid mode. If you chose Hex mode then well good luck.

After reading on the subject on blogs and forums I decided to try one thing.

I dragged the pattern from swatches onto the artboard, ungrouped everything, deleted unnecessary objects, turned the pixel view on, added 4 guidelines that would contain the piece that I needed, and resized artboard to the rectangle defined by the guides. It was not fun but well it worked and I didn't get any white spacing or overlaps.

Second time I noticed one of the rectangles created after I dragged the pattern onto the artboard was exactly the swatch size (at least so it seemed to me). So I ungrouped everything and fitted the artboard to that rectangle. I had to readjust the artboard though it was 0.3px to the left for some reason. Just zoom in all the way turn the pixel preview on and make sure there are no lines or anything.

Now, some people were recommending using the tile size which would work great unless you got funny measurements like 100.2807px or if the tile and swatch sizes don't match.

Hopefully someday Adobe will decide to have pity over people with this problem and put a feature in for saving the actual pattern. One can dream.