Typographic Task 3

For the third task on typography I chose the typeface design with which I would develop further into a vector alphabet. I chose the “Lewis Mechanics” as I have named it, sketches as I feel these would be reasonable to create as my first typeface. However from looking at my sketches it was apparent that I had issues in weight throughout the alphabet and therefore I chose one letter to base the width upon the rest. I chose the letter T for this as I felt it has a clear, crisp definition while also retaining a clunky, machine like feel.

Sketches For The Lewis Mechanics Typeface

Before creating each letter on Illustrator I first created the lowercase x. This was used as a guide for where the x-height appears, therefore giving me the median and baseline guides. As I proceeded with my designs I created the ascender height and descender height. These guidelines can be seen in use in my speed video where i created the G. I created the skeleton for the G using the letter D flipped horizontally.

Typographic Task - Part 3 from Nicole H.D.W. Sinclair on Vimeo.

Q Weight Measurements

In order to level the weight out as to be even across the alphabet I used a simple line as a guide to measure the width with. This is demonstrated in this image of my Q. As a stylistic feature on the font I incorporated a circle into each letter where appropriate, with the exception of the letter O. This was also to keep the feel of the inspiration to the font within the apparel.

Legibility Test & Background Variation

Above is a test I made to check the legibility of my typeface. Below you can see my final font, I have also created a few variations to show how it would work on different coloured backgrounds.

White and Grey Backdrops

Final Typeface Design for "Lewis Mechanics"

Overview of Workshop

I found this to be an interesting workshop to take part in and found the process of developing a font takes careful consideration. I enjoyed creating the typeface, however I feel I spent too much time on developing it, though this came out with the above outcome which i feel is successful.

P.S. 28th May - Upon searching for the image which I was inspired by for the above typeface I discovered it was not created by Wyndam Lewis but in fact Edward Wadsworth and is named "Newcastle". In conjunction with this discovery the typeface will no longer be called Lewis Mechanics but Wadsworth Mechanics instead.

Typographic Task 2

Following on from the first task I developed my initial sketches as to create three full alphabets. While doing this I had further inspiration from reflecting on the task and created the following sketches. I then used this page of sketches and that from two other styles to create the three alphabet sheets.

Inspired by Wyndam Lewis

Below are the three sketched full alphabet designs with development visuals.

Inspired by Wyndam Lewis

Inspired by Josef Muller Brockmann

Inspired by Josef Muller Brockmann

Photoshop - Animated Gifs

Overview

Animated gifs are a simple way of producing moving content for web design and are typically used within advertising banners. However, they can also be used as an easy way to create interesting visuals, whether this be for emotional response or just to add to the apparel design.

Gif’s are lossless in quality but limited to 256 colours however, which is great for simple animations involving the use of a couple of colours and for type. But for photographs this degrades the image and therefore it is better to use jpeg. However, now you can use Jpeg images within a Gif, this combines the animated element with the wider Gamut of colours.

As a graphic designer, unless you create an animation intended for the big screen, such as within Television or for an advert then you wont need to use any pixel type other then square pixels.

Basic Frame Animation

Key Steps

For the first exercise we were talked through creating a Frame based animation. We were asked to create up to 10 images as these would make up our little gif, however I created a sunset scene, not realising it wouldn’t work well with this technique. To export this file we went to file, save for web and saved this as a Gif set at looping forever. I learnt from this that frame animations are best to have a set background if you plan on doing such as I had.

Frame to Movie

Scanned image used was created by tutor as example.

Render Settings

Another way to output such animations is by exporting them as a movie file. This allows you to add further effects and possibly audio to accompany the film. We can also use scanned in imagery within animation such as these and create a flick book effect. We used the same method of Frame animation, though the difference comes in the form of the export tools. With this method it uses Jpeg quality and therefore is good for scanned imagery and/or photos. There is two options for exporting this file, the first being as a QuickTime file and the second as a H.264. The difference between using these is basically on whether you want the video to relay on QuickTime and generally the latter is chosen. As this is for a simple frame animation for web we will choose medium quality.

Digital Cel Based Animation

New Video Layer

The third exercise was a development from the first and this involved taking the concept of Celluloid (or Cel for short) animation and applying it within Photoshop. This can be quite a laborious process if you have many moving elements, however if you build the image up as they would do in traditional cel animation then this makes it a smoother process. In order to set up your active cel as it were go to Layer, Video Layers and select New Blank Video Layer. I found using both the trackpad and the mouse quite challenging when drawing out the imagery, especially using the freehand paintbrush tool. I feel using the paintbrush would feel more natural and in turn become easier when using a graphics tablet. For this task we rendered out the video at 24fps and had the resolution set to half of a full HD screen, this being 960 x 540 square pixel. In order to accurately track where your animated subject is, use the Onion Skin feature. This feature speaks for itself; it makes the top layer semi-transparent as to enable the designer to trace over the previous lines.

Appearing Box - Cel Animation from Nicole H.D.W. Sinclair on Vimeo.

Moving Image Trace

Import Video & Set Timeline Frame Rate

For the forth and final exercise we imported a video file and set the frame rate to 12fps as to enable simple quick experimentation with this technique, as it would have been 24 usually. These videos provided to base our animation on were that of action shots, dancing, skateboarding and the like. I chose a video of a break-dancer and on a new blank video layer, using very rough marks I drew out a stickman as to represent the dancer. I drew out enough of these frames to achieve 3 seconds and again using a graphics tablet may help in this process. At first I used the Onion Layer option to aid in positioning my stickman, though once many frames had been drawn out this became difficult to distinguish between.



Stickman Loop from Nicole H.D.W. Sinclair on Vimeo.

Cel Animation Tutorial

 

Following on from the workshop, I watched the above video which guides the viewer through the traditional Cel animation process. I found this useful in understanding how to lay out such frame animation within the digital method.