Foundation class - Graphic Arts 2 · 20110619 v10
Assignments and Exercises
Group work HSRW stop-motion animation ...........................................2
Exercise visitors or business card........................................................5
Exercise nameplate.........................................................................5
Assignment short-story ...................................................................6
Assignment Romeo & Juliet...............................................................7
Assignment website .......................................................................8
Assignment lettering: What you have always wanted to say. ...................10
General information
All exercises and assignments are mandatory. Assignments count for your
final grades, exercises do not. Please make sure that all your works have
your name on them.
Tools to buy
Things we will use in this class: Cutter with metal guide rail, 30 cm long
metal ruler, pencils and a sharpener, a pair of scissors (preferably for
paper), bone folder, thin and thick black markers, calligraphy pens or
similar writing tools, removable glue.
Due dates
Keep in mind, that the final (the very last) due dates may change during
the course of the semester. Be prepared to be finished with everything by
cw 26 latest.
⠋1 ⠟
Foundation class - Graphic Arts 2 · 20110619 v10
Group work HSRW stop-motion animation
Form groups of 3 students (4 as exception). Create a stop-motion animation
with the letters HSRW (alternatively the words ”Rhine-Waal University of
Applied Sciences“ or „Hochschule Rhein-Waal“). You may write the letters
(or words) in any way you find suitable and appealing. The letters could
sequentially appear, be written, erased, they might grow or rot, they could
be danced or sung (as long as they appear on screen), fall from the sky or
vanish into the mist. Stop-motion means that you create a sequence of
photos and animate them to create a movie. You are consequently not
supposed to film, but to take single shots. The final movie should be at
least 20 seconds long.
Evaluate and test technical methods to create your animation, do so early
enough to have time for questions, mistakes and accidents. Technical
perfection play a minor role in this project, technical means chosen should
fit the overall visual of your work though.
Sound
There will be a modular soundtrack for your animations soon. For the time
being you may use any audio you find suitable. To make sure the video can
be published online, make sure you make the sounds yourselves or legal
permission by the authors.
Credits
Your movie should contain your names as designers as well as some
additional information. These so called credits usually appear at the end of
the movie:
•
•
•
•
•
•
your name
your semester
your course of study
name of the lecturer
your university
the year or semester you created your work
Typical credits could look like this:
Jörg Petri, 2nd semester Information and Communication Design,
Foundation Class Graphic Arts, Prof. Zielke, Rhine-Waal University of
Applied Sciences, summer-semester 2011
Output format
Quicktime movie, Codec H.264, 1920 x 1080 px size, 25 frames per second
hand in digitally, optionally upload to video-sharing platform
Technology
Animating your photos is, regarding technology, not part of this class.
Anyhow, I will assist you in any way I can. A simple and foolproof
animation workflow could be something like this:
⠋2 ⠟
Foundation class - Graphic Arts 2 · 20110619 v10
•
•
•
•
•
•
shoot your sequence as raw
develop your raws to jpg max. quality (automate!)
crop your images to 16:9 ratio if necessary (automate!)
import images into iMovie or Final Cut
adjust timing, synchronise to sound
export movie
Schedule
task
finished by CW
Form groups
12
First concept including scribbles
13
Test animation drawn or photographed
14
Second mock-up animation
15
shoot your animation
15 - 19
finalise and render in HD
19 - 24
final due date
june 27th
Inspiration
The Web is a magnificent resource to find inspiration on typography,
calligraphy, animation in general and more importantly stop-motion
animation. This is just a small list of animations I found inspiring, I am sure
you will find plenty yourself.
Collection 50 animations
http://www.smashingmagazine.com/2008/12/31/50-incredible-stopmotion-videos/
Draw and erase animation
http://www.youtube.com/watch?v=u46eaeAfeqw
http://www.youtube.com/watch?v=Y3sb1-3hRTc
Larger draw and erase animation
http://www.youtube.com/watch?v=uuGaqLT-gO4
more on that: http://blublu.org
http://www.liveleak.com/view?i=d2c_1200809075
Animations with post-its
http://www.youtube.com/watch?v=BpWM0FNPZSs
http://www.youtube.com/watch?v=EZTL0EKrKRM
http://www.youtube.com/watch?v=7IeSqVboADw
http://www.youtube.com/watch?v=juBFxe0-ryI
A video using post-its
http://www.youtube.com/watch?v=Y1rZqw5bXb4
⠋3 ⠟
Foundation class - Graphic Arts 2 · 20110619 v10
Real-life stop-motion
http://www.youtube.com/watch?v=o2pvO-FEqq4
http://www.dailymotion.com/video/x8z89e_erdmobel-aus-meinemkopf_music
http://www.youtube.com/watch?v=DKWdSCt4jGE
http://www.youtube.com/watch?v=JtGJ1lD23-U
http://vimeo.com/4829648
http://www.trendhunter.com/trends/oren-lavies-her-morning-elegance
3d-typography
http://lookslikegooddesign.com/typography-optix-digital/
Stop-motion with physical letters
http://vimeo.com/1591936
http://www.youtube.com/watch?v=pZmn6anF9Ps
Typographic animations, kinetic type
http://www.youtube.com/watch?v=FMCdmoJ8Ab4
http://www.youtube.com/watch?v=ejweI0EQpX8
http://www.youtube.com/watch?v=kb2iRbtrSb4
http://www.youtube.com/watch?v=Vm4ImPm_wuE&NR
http://www.youtube.com/watch?v=_CvAPBQL_0Y&NR
http://www.youtube.com/watch?v=I7mnwHpSJro
http://vimeo.com/1191402
http://www.viddler.com/explore/brianshaler/videos/2/
http://www.draftsmen.com/videos-kinetic-typography-live-out-loud[tAAoaNMM-xc].cfm
there is a lot more kinetic typography, try these:
http://vimeo.com/search/videos/search:typography/f3009638/page:1/
sort:relevant/format:thumbnail
(this link might not work, just type into the search field of vimeo)
New ones:
http://www.vimeo.com/14958082
http://www.vimeo.com/6382511
http://www.vimeo.com/18499580
http://www.vimeo.com/20534171
http://www.vimeo.com/5233789
http://www.vimeo.com/22655744
http://player.vimeo.com/video/22099160
Please send me links to other animations you find convincing.
⠋4 ⠟
Foundation class - Graphic Arts 2 · 20110619 v10
Exercise visitors or business card
Receive a name and a profession. Design a unicoloured black visitors or
business card for the combination drawn, format is 85 x 55 mm. You may
use grayscale, but should try to stick to monochrome designs if possible.
Bring your card printed and cut to its final format to class, make sure your
name is on the back.
Make up any additional information you might need, like address or
website.
Due date
CW 13
Exercise nameplate
Create an image as a nameplate with your name on it for web use and send
it to [email protected] by e-mail. This nameplate will
represent your website-assignment on the class-homepage. Important:
your mail must contain the letters [FCGA2] in the subject line, including the
squared bracket.
Format
Portable network graphics, 24 bit
260 x 110 px size, resolution 72 dpi
filename [yearmonth]_[your]_[name].png (e.g. 201104_joerg_petri.png),
use only ASCII-characters
Due date
CW 16
⠋5 ⠟
Foundation class - Graphic Arts 2 · 20110619 v10
Assignment short-story
Pick a public-domain short-story or a book, e.g. from www.gutenberg.org
(http://www.gutenberg.org/wiki/Category:Bookshelf for pre-categorized
books). Think of a way to present your text as a book in an appropriate
manner. It would significantly improve your ability of judgement if you
read the text of your choice before starting to design. Think of a suitable
book-format that suits your text, considering the amount and kind of text
you are designing for. Design a softcover for your book using an image and
type. You can use illustrations or photographs, or just type. Take into
account that this cover has a front page and a back, a thicker book might
have a spine as well.
Imprint
Include a small imprint in your book. Information needed in the imprint is:
•
•
•
•
•
•
•
your name
your semester
your course of study
name of the course this work is part of
name of the lecturer
your university
the year or semester you created your work
You can add optional information you find important, like typefaces, paper
or other material you used, inspiration you find worth mentioning, your
website etc.
An imprint could look like that:
Jörg Petri, 2nd semester Information and Communication Design,
Foundation Class Graphic Arts, Prof. Zielke, Rhine-Waal University of
Applied Sciences, summer semester 2011
Fonts: Fago Pro
Paper: none, it is digital
Text from www.gutenberg.org
Try to introduce all parts of a regular book into your design, if appropriate.
Schedule
task
finished by CW
Pick a story
12
First design of cover
13
Second design of cover, back (and spine)
14
Final design of cover, back and spreads
15
Book dummy, including cover and spreads
June 27th
⠋6 ⠟
Foundation class - Graphic Arts 2 · 20110619 v10
Assignment Romeo & Juliet
Read Shakespeare's piece Romeo and Juliet if you have not done so yet.
Watching the movie (http://www.imdb.com/title/tt0117509/) might inspire
you as well, watch it in english, as it uses the original text. Think of a
setting you would like to place this love-story in. Design a small book
containing the balcony scene that stages the play in the setting of your
choice. E-mail me in case you need the text digitally.
Your perspective on the book should try to think of the book as an object
that represents the setting of your choice. The setting can be referred to by
typography, material (paper), binding, colour and anything you find
appropriate.
Hand in your complete book.
Schedule
task
finished by CW
Pick a setting
14
First design
15
Second design
16
Third design
17
Final design of cover, back and spreads
19
Final design in book dummy
June 27th
⠋7 ⠟
Foundation class - Graphic Arts 2 · 20110619 v10
Assignment website
Create a simple website that presents at least 5 works of yours. The website
is supposed to contain your name and some basic information about your
works. Think of a way integrating your stop-motion-video (possibly in a
smaller resolution, e.g. via vimeo or youtube). Start to design the site using
design software, tools like gimp, photoshop or illustrator. Bring at least 2,
better 3 design alternatives to class (e-mail to me with subject line [FCGA2],
or on an USB-stick) as a JPG (resolution 1024 x 768 or 1280 x 1024 for better
beamer presentation).
Design restrictions
Use HTML and CSS to define the information displayed on screen. Use textand HTML-elements only (all attributes controlled by HTML and CSS, such as
colour, font-size, borders etc.) for the layout of the page, everything is
supposed to be controlled by CSS. If unavoidable, you may use one image
only to present text. You may use background-images for the basic layout,
and of course small thumbnail images of your works.
Technical information
Use HTML and CSS only, one image for text representation and backgroundimages are allowed. Your code (HTML and CSS) must be conform to the
standards of the w3c, you can find them online, as well an online validator.
Find information where to upload your files on university-webspace, e.g. at
the IT-department. Let me know if finding free webspace inside or
outside the university turns out to be a problem. Hand in your complete
website-data to me, via e-mail, physically stored, by a link. Test your site
in at least two browsers on Mac OS and Windows, you can access the PCpools using your university-login.
Links, technical
http://selfhtml.org/
http://css-discuss.incutio.com/wiki/Css_Editors
https://sites.fastspring.com/macrabbit/instant/cssedit
http://validator.w3.org/
http://html5boilerplate.com/
http://habilis.net/validator-sac/
Links, inspiration
http://www.weshootbottles.com/
http://lennartbasler.com/
http://www.silverbackapp.com/
http://scribbleandtweak.com/
http://beautifultype.net/
http://denver2012.drupal.org/
http://www.tedxportland.com/
http://unfold.no/
http://desandro.com/
http://lucuma.com.ar/
http://lukedorny.com/
⠋8 ⠟
Foundation class - Graphic Arts 2 · 20110619 v10
http://www.contrast.ie/
http://www.oliviabee.com/
Links on technical issues we discussed in class
http://jpetri.de/htmlbeispiel/
http://jpetri.de/htmlbeispiel/kaestchen.html
http://jpetri.de/htmlbeispiel/text.html
Schedule
task
finished by CW
First design
19
Second design
20
First HTML version
21
Final HTML version uploaded onto HSRW-webspace
June 27th
⠋9 ⠟
Foundation class - Graphic Arts 2 · 20110619 v10
Assignment lettering: What you have always wanted to say.
Think about words, something you would like to express through lettering.
Whatever that is, you should feel that it is strong enough to be worth
working on it. The topic What you have always wanted to say could help
you finding something, you are not limited to it though. It could be some
letters or a single word, a name or a small sentence of a few words only.
You could choose one of the quotes you find on the website. The only thing
really important is that you choose something you would like to represent
in handwritten lettering. Make sketches in original size, preferably many.
Start with pencil-drawings, begin to use black pens when you are familiar
with the shapes, practise your letters as often as possible, in small and
large sizes. You may use the computer to finish your work (if you choose to
do so, use a vector-application like Adobe Illustrator). It is important
though, that your idea is well expressed on your paper-sketches. In case
your work is finalised digitally (as a vector based PDF), hand in your
original, final sketch (on paper) as well. Apply your lettering to an A3 sized
carton or cardboard with your name on the back.
Please note that this due date is a deadline.
Schedule
task
finished by CW
Choose letters, words, phrase
20
First sketches (2-5)
21
More sketches (10-20)
22
Even more sketches (30-50)
23
Final lettering
June 6th
⠋ 10 ⠟