Digital Circlism Day 3: Featured Artist: Ben Heine

Today’s essential question: How does Ben Heine create iconic faces from history and pop culture by drawing circles of various sizes and colors?

Here are some examples of Ben Heine’s work:

Today we will:

• Continue working on our projects in Illustrator
• Upload both a PDF and PNG of our projects to our Google Drive accounts
• Publish a new blog post with the following:
  • a PDF of our progress
  • a PNG of our progress
  • a few sentences describing what was easy and what was difficult

Digital Circlism Day 2: Value

Today’s essential question: How can I use value to determine where to draw my circles?

Value works on a scale:

Where to Place Circles: Helpful Hints

Remember, you should try to have most of the self-portrait (not including the background) covered in circles by the end of Friday’s class. Make sure you are drawing your circles large enough that this is realistic.

Good: Use value changes to determine where to place circles:

Bad: Circles overlap

Bad: Circle placement ignores value/color changes

Bad: Large gaps between circles

Bad: Circles are way too small

Today we will:

• Continue working on our projects in Illustrator
• Upload both a PDF and PNG of our projects to our Google Drive accounts
• Publish a new blog post with the following:
  • a PDF of our progress
  • a PNG of our progress
  • a few sentences describing what was easy and what was difficult

New Project: Digital Circlism Self-Portrait

Today’s essential question:What are some characteristics of a good self-portrait?

Today we will begin our Digital Circlism self-portraits. We will prepare our reference selfies and begin working in Illustrator. Make sure you post BOTH your reference photo AND the work you have completed in Illustrator in today’s blog post, and upload BOTH to your Google Drive.

Artist Ben Heine (depicted in the self-portrait on the left) creates realistic portraits using circular flat areas of color against a black background.

Project Requirements:

• 11×14″ (portrait) or 14×11″ (landscape)
• Created in Adobe Illustrator with the ellipse tool
• Uses a reference photo of yourself. Can be either a current photo or a baby/childhood photo.
• Shows high-quality craftsmanship and technical skill
  • No overlapping circles or large gaps between circles
  • Circles properly capture value transitions
• Daily progress posted to class blog. Computers malfunction, and it is your responsibility to back up your work to a USB Drive or your Google Drive.

Examples of Bad Reference Selfies:

 

What are some issues with these selfies?

What are some characteristics of a good self-portrait reference photo?

Part 1: Take your reference photo

Use your phone or a class camera to take your reference photo. You may also use an existing selfie as long as no parts of your face are obscured.

Part 2: Make sure your image is the correct size in Photoshop

1. Open the file in Photoshop
2. Select the crop tool from the toolbar on the left side of the screen 
3. At the top of the screen, set the dimensions to 11×14 inches
   
4. Drag the crop tool to select the area you would like to crop
5. Press the “enter” key to crop your photo
6. Save your reference photo

Before

After

Part 3: Setting Up your File in Illustrator

1. Create a new file in Illustrator (File -> New Print Document)
2. Set the dimensions to 11×14 inches
3. Place your reference photo in the Document (File -> Place)
4. Scale the reference photo so it fits within the edges of the document
5. Lock your reference layer
6. Save your file as a PDF

Part 4: Drawing Circles

1. Click and hold on the shape tool until an ellipse appears in the drop down menu.
   Select the ellipse:
   
2. On the lower left side of the screen, adjust the color so you do not have a fill, and your outline color is something that will stand out against your skin and hair (bright blue or neon green are good choices.)
   
3. Hold down on the shift key and drag to create an appropriately sized circle. You can adjust the size of the circle using the black arrow tool, and move the circle using the arrow keys on the keyboard.
4. Use value/color changes to determine where to draw circles, like the example below:
   

Pacing Guide: You should have most of your image filled with circles by the end of Friday’s class. Please make sure you are drawing your circles large enough that this is realistic. (This does not include the background – that will remain solid black.) It is often easiest to start with the forehead and/or cheeks, since these tend to be large, flat areas of color.

Today we will:

• Introduce the Digital Circlism project
• Take our reference photos
• Crop our reference photos in Photoshop to the correct dimensions
• Post our reference photos to our blogs
• Set up our Digital Circlism projects in Illustrator
• Post both a PDF and PNG of our progress to our blogs

Pep talk time

Today’s essential question: What do I need to do to finish my character animation?

I know a lot of you are stressed about the animations. It really does get easier if you keep practicing. (Ms. Lawson is proof – she used to be terrible at animation!) We will start our low-poly self-portrait project next week, so start looking for a selfies you’d like to use as a reference, and post them to your blog AND upload them to your Google Drives.

Today we will:

• Finish our character animations
• Upload both the Animate and gif files to the animation folders in our school Google Drive accounts, and make sure we have shared the folder with Ms. Lawson
• Create a new blog post with the following:
  • gif of the animation (if you have not finished it, post what you have)
  • An artist statement about the finished animation OR a plan on what you need to do to finish your animation

Animation Helpful Hints

Today’s essential question: What are some ways I can simplify the animation process?

Today we will continue animating our characters. You may find it helpful to sketch out the timeline (with layers for each body part) like the image above.

Here are some examples of character animations SOTA students are currently working on:

Tianna, 10th Grade

Dariel, 11th Grade

Olecia, 11th Grade

Things to remember (follow these steps in order to prevent a stressful weird animation):

• Create a new Animate Document that has the same dimensions as your character.
• Import the .ai file of your character that you created in Illustrator. Convert all graphics to symbols when you import the .ai file.
• Put each body part on a separate layer .
  You can use folders  to organize your layers:
  
• THEN use the transform tool  to move all rotation points to the correct locations
  
  

  before

  

  after
• THEN set key frames  in the spots in the timeline where you want your action to change
• THEN use the transform tool  to rotate or move body parts at various keyframes
  
  

  before

  

  after
• THEN add tweens
• THEN add eases
• Save your animation as a .fla file
• Export your animation as a GIF

Today we will:

• Continue working on our character animation
• Upload both the Animate and gif files to the animation folders in our school Google Drive accounts, and make sure we have shared the folder with Ms. Lawson
• Create a new blog post with the following:
  • gif of the animation (if you have not finished it, post what you have)
  • a few sentences on our blog summarizing any challenges you faced today, how you worked through those challenges, and how you currently feel about computer animation.

Bringing Our Character into Animate

Today’s essential question: How can I bring the character I created in Illustrator into Animate?

How to Bring the Character You Created in Illustrator into Animate:

1. Open the PDF of your finished character in Illustrator
2. Save your file as an Illustrator (.ai) file.
   (File -> Save As -> Illustrator (ai))
   
3. Open Adobe Animate
4. Create a new file the same dimensions as the Illustrator file of your character
5. Import the Illustrator (ai) file of the character that you just saved
   (File -> Import -> Import to Library)
   
   Select the Illustrator (.ai) file
6. Hold down the shift key to select all the layers you want to import. Then check the box to make sure each layer gets converted to its own movie clip. (This will save you tons of time so you don’t have to convert body parts individually later on. If you want to quickly import all layers, you can check the “Select All Layers” box at the top left.)
   
7. Drag your body parts onto the stage, making sure each body part is on its own layer. Name your layers!
8. Use the transform tool to adjust rotation points BEFORE setting any key frames or animating anything.
9. Save your Animate file regularly to avoid losing any work.

Today we will:

• Finish tracing over our character sketches in Illustrator, tracing each moveable part as a separate shape
• Bring our character into Animate and prepare our Animate file so we can animate the character next class.
• Create a new blog post with an image of the work we created today. (If you are working in Animate, you can post screen shots of your library & timeline.)