Class Info

  • Date: Tuesday, December 6, 2022
  • Meeting Info: In person, Pearl 116, 8:30 to 11:00am, followed by Professorā€™s office hours from 11:00am to noon in Pearl 116.
  • Refined versions of Projects 01 and 02 are due by Class 28 (i.e. the night before class!) December 13, 2022.

ALSO

  • SET = Student Evaluation of Teaching. I’ll leave the room for 15 minutes at 9:45 or the best timeā€”so you can complete.
  • Possible demo by Professor Neuringer.

Topic

Objectives

  • Evaluate and understand the differences between static type and type that moves (for instance, static Social Media Posts as done last class and an animated version of one of them).

_________________________________

Some inspiration for Posters (on a range of topics)

_________________________________

Reminder of Social Media Posts (slightly adjusted from Class 25)

_________________________________

Activities

Activity 1.

  • Create an animated GIF. Class Exercise.
  • We will use Photoshop and the words, “HELLO it’s me” broken into two lines.

STEP BY STEP (also see PDF in Handouts).

START by creating a 1280 x 720 pixel document and add a background color to your first layer (you can specify the color when you create the document).

_______

Create a separate layer for each of the letters of the word “HELLO” then an additional layer for “it’s me” (Grammatically, the wording should really be “it’s I” but we’ll ignore that for now.) You will have 7 layers.

Note: if you have to practice getting your size right by starting out with one layer for “HELLOā€ so you can determine size, that’s OK. Then, do each letter on a seoarate layer. Be patient.

Remember: to get lowercase letters, go to Type Options.

_______

Go to WINDOW and select TIMELINE.

_______

Make sure that all layers are visible and then select CREATE FRAME ANIMATION.

_______

You should see a frame with all the components of your design.

_______

Select the first frame and then duplicate it 6 times. You should now see 7 frames.

_______

Select frame 2, go to the layers panels and make the background and the letter “H” the only visible panels.

_______

Select frame 3, go to the layers panels and make the background and the letters “H” and “E” the only visible layers.

_______

Select frame 4, go to the layers panels, and make the background and the letters “H” and “E” and “L” the only visible layers.

_______

Select frame 5, go to the layers panels, and make the background and the letters “H” and “E” and “L” and “L” the only visible layers.

_______

Select frame 6, go to the layers panels, and make the background and the letters “H” and “E” and “L” and “L” and “O” the only visible layers.

_______

Select frame 7, go to the layers panels, and make the background and the letters “H” and “E” and “L” and “L” and “O” and “it’s me” visible.

_______

Select frames 2 to 7 and change the delay frame time to .5 (as in half)

Select frame 1 and change the delay time frame to 1.

_______

Select looping options and change to “Forever.”

_______

SAVE as:
lastname_animation_120622 (it will be a psd file)

_______

Now, go to FILE > EXPORT > SAVE FOR WEB.

Make sure the preset is GIF.

To make your file smaller, change colors to 4 or 8 depending on the amount of colors you have. Choose the minimum amount (of colors) that will not alter your design. SAVE.

Make sure the preset is GIF.

Name your GIF:
lastname_animation_GIF_120622

DRAG your GIF into a browser to test it.

_________________________________

Activity 2.

  • Practice making an animated GIF.
  • If you’ve completed the exercise using the words
    “HELLO / it’s me” then do the same exercise in another language.
  • Select one of your Social Media Posts, bring into (or recreate in) Photoshop and create an animated GIF. Make an animated GIF with the main word of your Concern (e.g.: Water, War, Pollution . . .). Some of you have long concerns, so you will have to edit your title.

_________________________________

Assignments (To-Do After Class)

  • (1) Refine your posters.
  • (2) Refine your Social Medial Posts.
  • (3) Continue to work on one of your Social Media Posts, bring into (or recreate in) Photoshop and create an animated GIF. (Follow same steps as class demo above). Save your file in Photoshop and as a GIF. Upload GIF to Dropbox.
    • Save as: lastname_GIF_120622
  • (4) STUDENT POST > TYPE TALK > Poster/ Promo. Look at the animation and the poster in this Instagram promo. Describe what you see in the poster and promo, created for the 2023 Architectural League Prize for Young Architects and Designers by Michael Bierut and his team at Pentagram. What principles, learned in class, are shown here? Is the word “Uncomfortable” shown successfully?
Print this page