The very first general purpose computer was 27 tons, took up 680 feet and consumed 150 KW of power.1 Throughout my life so far, I have seen a vast amount of change in technology and its function. When I was born the MP3 format didn’t exist, let alone players for it to name one example. In the current day and age, the computer can perform the initial mathematical tasks that the original general purpose computer – named the ENIAC (short for Electronic Numerical Integrator and Computer) – was programmed to do, and a plethora of other functions ranging from long distance communication, playing music, doing research, and of course creating art. Art, along with music is one of the most universal forms of communication known to man, so it is no surprise that they would be adapted into the realm of computing.
One of these new age forms of art is graphic design, something I have enjoyed playing with for many years. I consider my experiences with both of them to be somewhat novice, as it is more of a pastime than anything else. With that being said, I have still accumulated a vast amount of skill from tinkering with the hobby, and I see no reason to not share it with you guys. So, let me introduce you to my weapon of choice: Adobe Flash. I originally planned to tell you about Macromedia Flash, but with a quick reference to the internet, it seems Adobe recently acquired the name a couple years ago. However, I still use Macromedia Flash 8 (which I will refer to as Flash from here on out), so if you have a copy of the program, or can get one, this post will probably make a lot more sense to you. It can get expensive though, so if you are going that route, be warned. Also, Flash is capable of both graphic design and animation, but animation requires a lot more time and patience than a single blog post can illustrate, so I’ll work on just graphic design. Let me give you a little bit of background information on the program now.
Flash 8, while newer, the program wasn’t as feature-oriented, so certain features that an advanced user would need weren’t included because it was geared towards new users who were interested in doing basic drawing and animation.2 I used the version before that briefly (Flash MX) and I won’t lie, I didn’t notice much difference, but that might be due to the fact that I still only really do basic drawing and animation to this day. If you have used the Paint program that comes on any windows operating system, you will already be familiar with the most fundamental building blocks in Paint. All of the tools like the brush, fill can, eraser and color palette are part of a basic arsenal of tools, only each one has been decked out with improvements and features for its Flash counterpart. Not to mention all of the new stuff that paint doesn’t have.
If you are a curious sort of person, and aren’t really sure if this is something you want to do, then you can always check out some Flash games at addictinggames.com or newgrounds.com. I’m a huge fan of Newgrounds because some of my favourite Flash content can be found there. A little warning though; Newgrounds has a lot of great Flash content, but it also has a lot of trash too. Anybody can submit to the website, and other people decide through voting what stays and what doesn’t but a lot of garbage manages to get through sometimes. Also, Newgrounds allows the submission of “mature” content, as long as it is appropriate and not rude or offensive. Fortunately, there is a section of the website where all of this is kept, and is not displayed with the regular content. If you are an adventurous type, you may wish to try your hand at creating your own piece of digital art. It is for that reason that I have a little exercise for you.
Exercise:
Before we begin, take note of the Zoom Tool on the left side panel. Its hotkeys are ‘M’ and ‘Z’. You can choose to increase or decrease the zoom at any time by selecting the appropriate option on the ‘Options’ heading on the same panel. This tool is endlessly helpful especially when working with fine details. You can also change the magnification by selecting the preferred option from the drop-down box in the top right hand corner of the timeline (The top of the screen above the canvas).
Start off by finding a picture of your friends or somebody you like and save it somewhere. I’m going to use a picture of Till Lindemann, the front man from German metal band Rammstein as seen in picture 1 below. Once saved, boot the program up and create a new file. Go to’ File > Import > Import to Library.’ You should now see your picture in a box titled Library on the right hand side. If not you can use the shortcut F11 to bring it up. Now go to ‘Insert > New Symbol.’ Name it whatever you like, but make sure Movie Clip is selected, hit OK. You will notice your Library has two items in it now. One is your original picture, and the other is the new symbol you just created. Left click and drag your picture out of the library and on to the screen. Make sure it is selected and go to ‘Modify > Bitmap > Trace Bitmap’ at the top of the screen. Feel free to experiment with these settings sometime, but for now, make sure the Color Threshold is 50, the Min. Area is 8 pixels, and the rest set to normal. You will notice a lot of the colors are blended and the shading is a lot more defined as in Picture 2. Now, under the tools panel on the left hand side, make sure the Selection Tool is in use – you can use ‘V’ to select is as well. Click each part of the picture that is not part of your person and hit delete.
You should end up with something looking like Picture 3. Now select the Lasso Tool or hit ‘L’. Draw a circle around the head to select it - but make sure you get just the head – and drag it to the side with the Selection Tool. The reason I do this is because I like to draw the head right from scratch. I recommend trying it this way the first time, because this exercise will teach you a few new things if you do, but again, you are free to adapt this in whichever way works best for you. With the Pencil Tool (‘Y’) outline some of the key lines on your picture. The pencil is a lot different than the Paintbrush Tool, so when you use it, you have to make sure all of your lines touch. At the bottom under the Properties Tab (CTRL + F3) select the Stroke Color for the pencil and select a color that doesn’t occur naturally in your picture. I’m a big fan of lime green because it is so uncommon. In retrospect, the image I used had a LOT of detail in the shirt, so I don’t expect you to have that much outlining on your own picture, but it’s a good example of how important the lines are from losing your details, and you will see why soon. You can see what I did by referencing Picture 4.
Now for the fun part! Select the Paint Bucket Tool or press ‘K’. When I do this, I like to use naturally occurring colors, but go ahead and experiment too. Use the Paint Bucket Tool to color in section of your person. To match a color to something on the screen already, select the Fill Color option in the properties tab again, but instead of selecting something in the palate that comes up, highlight any color in flash and click and it will select that color. In the next picture, Picture 5 you can see my finished product for this step. Take note how the lines are gone. In most spots I deleted them, but I re-coloured them black on the hands to define the fingers, and extended them down the arm.
We’re almost done. The next step is to draw the head. Select the Paintbrush Tool or press ‘B’. Make sure that the color is black and the smallest brush size is selected. You can check this in the first drop down box under ‘Options’ on the left side panel. With the brush tool selected, click the Zoom Tool and draw a box just big enough to fit your person’s head. The canvas should now show just the head of the person you wish to draw. This next part is an incredibly useful tool for drawing and animation alike. In the top right of the Timeline, there should be a window with just “Layer One” double click this and rename it ‘body’. Below that now there is a small button called ‘Insert Layer’. It looks like a page with a turning corner and a plus sign on it. One you have found it, click it, and you should now have two items on the above window: ‘Layer 2’ and below that ‘body’. The order of the layers is extremely important. Whichever layer is on top is the one that will be displayed on the canvas on top. Rename Layer 2 ‘head’. Now, you should still have the brush selected, so carefully draw the outline of the head without the hair. Then draw the hair outline over top of that, and erase the part of the head that shouldn’t be showing in the hair. Add the facial features and then color it! You can see my product in Picture 6. You can now delete that original head. We run into an issue now however, or at least a potential one. The new head and the body are on different layers. Sometimes this won’t matter, but for touch ups we will probably need to put them together. Drag your head to the desired position and click on the ‘head’ layer. Note how everything on that later has been selected. Use the cut tool by either going to Edit > Cut or by pressing CTRL+X and click on the ‘body’ layer. Most of you are probably familiar with the Paste tool (Edit > Paste or CTRL+V) but we are going to use a different tool. Select Edit > Paste in Place (CTRL+Shift+V). This will drop the cut section directly where it was deleted from.
Your picture should be about finished. Now you should just need to do some minor touch ups around the neck and it should be good. If you want to change the background, deselect whatever is highlighted and in the properties tab change the background to whatever color you like. Or you can make your own by using layers, as shown in Picture 7.
Now the important part: What’s the point in drawing a picture if you don’t know how to share it? Well alright, you could argue practice and good old passion. Select File > Export > Export Image. I always leave the dimensions the same, but I move the quality up to 100%. Other than that, there’s nothing else, and you have just made your first Flash picture!
I am quite interested in viewing your pictures, so email them to me at discarded@live.ca. In a couple of weeks, once we start building our fan base a little more, I will post the best couple at the end of a post (with the artist’s permission of course).
Sending out the old and in with the new,
This is your New Age Art and Graphic Design Specialist
-DisCarded
Reference Pictures:
References
1 "(ENIAC - A Survey of Domestic Electronic Digital Computing Systems - Computers with names starting with E through H". US Department of Commerce. December 1955. http://ed-thelen.org/comp-hist/BRL-e-h.html. Retrieved 2009-04-16.
2 “Learn Macromedia Flash by video tutorials - www.freelearn.110mb.com”. Free Learn. 2002. http://www.freelearn.110mb.com/baseArtecles/flash.html.
No comments:
Post a Comment