Lisa, the Simpson!
November 20, 2008, 08:10 *
Welcome, Guest. Please login or register.

Login with username, password and session length
 Add Site
 
   Home   Galleries Library Help Login Register  
Pages: [1]
  Print  
Author Topic: Suusje's Guide to Grabpiccing in Flash  (Read 927 times)
Suusje
The Saxophonist
Hero Member
*
Offline Offline

Gender: Male
Posts: 577
WWW
« on: November 09, 2006, 22:20 »

Suusje's Guide to Grabpiccing in Flash

In this guide I'm going to teach you how create grabpics using a program called Macromedia Flash 8 Professional (or 'Flash'). Flash is a very useful program for this, because it uses vector graphics instead of raster graphics, which means you can zoom in or resize the picture all you want without loss of detail. If you resize a small 100x100 pixel resolution vector image to a resolution of 1000x1000 pixels, it will still look crisp and detailed. Flash also has a very powerful line manipulating tool which also comes in handy when creating grabpics.

A free Macromedia Flash 8 Professional trial can be downloaded here: http://www.adobe.com/products/flash/flashpro/

Step 1: Finding a pic to grab

You can basicly trace everything using Flash, but since this is a Simpsons forum, I'll stick with Simpsons pics. There are lot's of sites where you can find framegrabs to trace (Framegrabs are screenshots taken from episodes), like:
But framegrabs aren't the only things you can trace. You can also use Flash to trace sketches you made.

For this guide I've chosen this framegrab from "A Star Is Torn":



Step 2: Importing the pic into Flash

Fire up Flash and create a new file. Now you should see a white area in the center of your screen (this, and the gray background surrounding it, is called the 'stage'). Go to the menu and select File -> Import -> Import to Stage.... Now you will see a dialog that asks you to select a file. You should select the picture you want to grab. The picture will now appear in the center of the stage.

If the picture you want to grab is bigger than the white area on your stage, you should rightclick on the gray background and select 'Document Properties'. A dialog with the files properties will now pop up. Match has 3 options: Printer, Contents and Default. If the picture you want to grab is bigger than the white area, you should choose Contents. If it doesn't, you can leave it at Default. After doing this, you can close the dialog.

Above the stage, you can see the Timeline. This is useful for creating animations, but in this guide, we're only going to use the Layer part of the Timeline.

Create a new layer by clicking on the Insert Layer button . Make sure the newly created layer is located on top of the other layer (the one that contains the pic you want to grab). After doing this, you should lock the layer that contains the pic you want to grab by clicking on the dot below the Lock icon . You should get something like this:



Step 3: Let the tracing commence!

First you have to select the Line Tool from the toolbar on the left. As you can see on the bottom of the screen the line tool has some settings you can change. I use a line thickness of 2 pixels for my grabpics, but some people prefer thicker or thinner lines for their pics, so you'll have to see for yourself what thickness you want to use. You can leave the other settings untouched.



Before you start tracing, I recommend you zoom in to 800% or 1600%. This makes tracing a lot easier and minor errors are easier to notice, so you can fix them quickly. You can zoom in using the Zoom Tool or the dropdown box that is located on the top right side of the Timeline.

Select the line tool again. It's time to draw the first line! Draw a line over one of the curves in the image by holding the left mouse button. When you release the left mouse button, the line will appear. Now it's time to select the Selection Tool and bend the lines. You can bend lines by clicking on them and pulling them into the right shape:



Now continue doing this until you've traced all the lines in the image.

Tips

- You can delete lines by selecting them using the Selection Tool and pressing Delete on your keyboard.

- Be criticial about the lines! If a line doesn't look perfect, redo it. It will greatly improve the quality of your grabpics.

- When you have to trace eyes or the beads on Marge's or Lisa's necklace, it's easier to use the Oval Tool than the Line Tool. If you hold Shift while drawing a circle with the Oval Tool, you can create perfect circles. You can duplicate lines and circles by selecting them with the Selection Tool and pressing CTRL + D. This is useful for the necklaces, because all the beads will be the same size if you duplicate them.

- If you have to bend small or very large curves, it's better to use more than 1 line segment. It will give a much better result when you do that:



- An easy way to check if you've traced all the lines is to hide the layer with the framegrab in it. You can do this by clicking on the dot below the Eye Icon in the layer where the framegrab is in. If a layer is hidden, a red cross is shown:



Step 4: Coloring your image

Once you're finished tracing, your picture will look something like this:



The only thing your grabpic needs now is color. Click on the paint bucket in the Color part of the toolbar. A dialog will appear showing all kinds of colors to choose from. Your mouse arrow will also change into an eyedropper, which allows you to pick a color from the framegrab by just clicking on the color you want.



The problem with low quality framegrabs is that the colors are often too dark, so you might want to play around a bit with the Color Mixer located on the top right of your screen until you get a good color. Once you've picked the right color, you can use the Paint Bucket Tool to apply the color to your grabpic.

Step 5: Finishing up and saving your grabpic

After you've colored your grabpic, it's time to delete the layer that contains the pic you were grabbing. You can do this by rightclicking on it and selecting Delete Layer. Now you can save the file by selecting File -> Export -> Export Image from the menu. Pick a nice name for your grabpic and be sure to save your grabpic as .gif or .png. The other filetypes are not made for this sort of images.

This is how my grabpic turned out:



The End...

I hope I've helped you with this guide. If you think some parts of the guide need to be improved or changed or if you have any questions, just post it. I'll be more than happy to receive feedback and answer your questions Smile
Logged

KANG *to Marge*: You look lovely this evening. Have you decreased in mass?

[ The Grabpics Thread | Cutest Lisa Moments ]
ametur_poet
Has been playing an umbrella for 30 years
Sr. Member
*
Offline Offline

Gender: Male
Posts: 465

I beg to dream and differ from the hollow lies...

« Reply #1 on: November 09, 2006, 22:26 »

Awesome guide. A well-defined tutorial for beginners in grabpiccing, and several nice little pointers for grabpiccers-in-training. Smile
Logged



"Love is like zooming across the tundra on a snowmobile, then it flips over and pins you down there. Then, at night come the ice weasels." -Matt Groening
Gustavo
Atalaya!
Hero Member
*
Offline Offline

Gender: Male
Posts: 581

Full of power I'm spreading my wings!!!
WWW
« Reply #2 on: November 09, 2006, 22:50 »

wow!  :eek:a very interesting tutorial…  Smile I learned many things… but I have a question ....
this guide works with Flash MX (6)?  Confused it is the only program that I have Smile… thank you very much by guide. it is a great aid Smile Smile Smile
Logged

a cookie, two cookies, three cookies, four cookies, five cookies, six cookies, seven cookies... ouch, amo las galletas, me las comerķa si tuviera algunas en la despensa... hey ! I have in my web browser...

*eating ...  Tongue
Suusje
The Saxophonist
Hero Member
*
Offline Offline

Gender: Male
Posts: 577
WWW
« Reply #3 on: November 09, 2006, 23:13 »

Thanks AP and Gustavo! Smile

This guide should also work for Flash MX. Some tools might be located in a different place, but it should work.
Logged

KANG *to Marge*: You look lovely this evening. Have you decreased in mass?

[ The Grabpics Thread | Cutest Lisa Moments ]
Gustavo
Atalaya!
Hero Member
*
Offline Offline

Gender: Male
Posts: 581

Full of power I'm spreading my wings!!!
WWW
« Reply #4 on: November 09, 2006, 23:20 »

@ Sussje

Thanks!!! Smile

PS:Gustavo open Flash and says...
hmmm first import a image... hmmmm... Confused
(searching scenes)....
ohhhh vectorial draw!!!
oh!!! brain need ideas! Smile

hmmm D'OH! Homer

Logged

a cookie, two cookies, three cookies, four cookies, five cookies, six cookies, seven cookies... ouch, amo las galletas, me las comerķa si tuviera algunas en la despensa... hey ! I have in my web browser...

*eating ...  Tongue
Andreas
Sr. Member
*
Offline Offline

Gender: Male
Posts: 499

WWW
« Reply #5 on: November 10, 2006, 01:25 »

Of course the tutorial works with older Flash versions as well; for KMS, I created a German tutorial in 2001 or so, and during that time, Flash 5.0 was the newest version. Wink Don't worry about the loads of toolbars and pallettes, you don't need most of them anyway, so just hide them to get more space for your drawing.

And another small trick: When exporting your image, choose a high resolution (such as 300 dpi) and save the file as BMP or PNG. Then, open it in a decent graphics program, such as Photoshop, Fireworks, Photopaint, PhotoImpact or whatever you have installed, and reduce the size to your liking (i. e. 800x600 pixels). Most graphic programs will use an algorithm called "anti aliasing" to smooth the edges of the lines, taking away the harsh appearance of the pic a bit.

Also, if you used a gradient in the grabpic, GIF doesn't work very well, so you might want to use JPG. Exporting JPG from Flash doesn't work very well, therefore, use the web export feature that many graphics programs have, and carefully adjust the compression slider, until all visible artefacts are gone. Usually, 75% quality or above are just fine, and won't produce huge file sizes.
Logged

Andreas
Dagdamor
Lisahugger
Administrator
*
Offline Offline

Gender: Male
Posts: 2489

WWW
« Reply #6 on: November 10, 2006, 10:12 »

I have no words about the guide - it's well done, easy to understand and everything is covered!
Great work, Suus Smile I hope it will be helpful to all people around. Thanks!

Andreas
I agree... that moment with graphic formats is not easy for beginners. For example, from all programs I have installed so far, only Photoshop produces decent GIFs, everything else leaves a lot of moire or chooses wrong colors. Maybe you'll consider writing a small column like "Choosing the right format for your picture" someday, eh? Wink
Logged

When the power of love overcomes the love of power, the world will know peace. - Jimi Hendrix
Gazmanafc
SMF Customiser
Hero Member
*
Offline Offline

Gender: Male
Posts: 1049

There can be only one Snake and one Big Boss
WWW
« Reply #7 on: November 12, 2006, 15:54 »

Actually, PSP doesnt have that bad of GIF compression if you press Ctrl+Shift+3 > Enter > Enter before saving.
Logged

Pages: [1]
  Print  
 
Jump to:  

Powered by SMF 1.1 RC3 | SMF © 2001-2006, Lewis Media