Title Sequence - Working in 3D Space

Title Sequence from Emma Nicholson on Vimeo.

Like all of my other animations, I started off in Illustrator creating the typography on separate layers ready to be imported into my composition. Once I imported them into AfterEffects, I then enabled 3D options on all the layers, now I can manipulate the layers on a Z axis as well as X and Y. I manipulated the positions, rotations, speed on various elements the usual way, it took a minuet or two to get used to the effect the 3D element had but I found it was very easy to use. I then applied null objects and edited whole groups to create interesting transitions.

An interesting feature I learnt was being able to pre-compose some of my elements. So I used this feature to add a track matte to my typography, it is like a clipping mask in Illustrator. Pre-comosure is useful as it automatically updates changes to the main composition and so it saves confusing the main composition with more effects.

I was then shows how to apply layer effects, I used the emboss effect to add some interaction between the type and the background. I also made a vignetting effect to draw the eye into the centre on the frame. To create this I made a dark solid layer, I then created a mask with the shape tool and applied the subtract blending mode, I increased the feather of the mask and lowered the opacity to make it more subtle.

I then rendered the composition and converted to low quality for the web.

Kinetic Typography

Kinetic Typography from Emma Nicholson on Vimeo.

In industry, even if I do not want to be involved in animation, it is important to have a basic understanding of how the artwork is set up so you can work effectively and fluently with animators and other creatives. For example, type is often aligned centrally in animation to avoid any text being clipped off with the variation of screen sizes. When creating simple ten second clips like this, especially with simple little content like type, it is best to split each section up to create three key stages within the animation. This enables an equal flow of content and consistent attention of the viewer. To check if my quote was long enough to fill the ten seconds, a handy trick is to read it out loud at a speed that is natural to you, because that is the pace in which you would want to animate it, it you say it in about ten seconds it is okay to use.

To start with I set up a HD format Illustrator document, then create three art boards that will be the three main segments of the animation, these boards is what you show to a client so they can get an idea to how it will progress. I then set all the type in each segment. And once my Illustrator file was complete I imported it into my composition.

I then animated some transitions between key words using position and rotation key frames. I added some easy ease in and out for a little natural bounce. I also added a tiny amount of motion blur to make the movement look that little bit more natural. There was one point where I wanted all the elements to rotate around one anchor point, so to do this I created a null object layer and applied all the words parent as this umm object, so when I moved the null object, the rest of the words moved with it around the anchor point I created for the null object. This was helpful when creating my transitions between the three segments. I also experimented with some of the pre-set effects in AfterEffects however none of them suited the simple style so I decided not to include them.

I then tweaked some areas that were not the speed or position I liked and rendered my video and exported it at lower quality for the web.

Photoshop Timeline and Rotoscoping

In this tutorial I looked at how to use the Photoshop timeline function for Animated gifs, and I also looked at the initial process of rotoscoping. When I created my new document I started to create the artwork I would be animating, I made sure to create each segment on a different layer so I can animate them independently. I then opened the timeline panel and created a frame animation from my layers. In the timeline panel I needed to make sure I selected the option to make frames from layers, I then changed the frame duration to 0.1 seconds. I chose to animate the word Type spelling itself out, and once I created the frames and set the time I could export it as a Gif by selecting the save for web option. This is a useful way to create simple animated web banners or other web elements like small ads. There are useful options when creating gifs, like the ability to switch off visibility on a layer so it will not appear in a frame. Once I created my first gif, I went on to create a more refined version, this scrolled through the letters slower and more smoothly, I also made it the ideal size for a web banner as I was experimenting with HTML at the time and I wanted to apply it to my experiments, you can see this in a screenshot above.

I also tried using the onion skins option which allows me to draw frame by frame and see what my last frame was, it is like drawing on a light box but in Photoshop, it allows for the traditional animation. I created the worm gif this way and  drew each frame simply with the brush tool.

Then I moved onto Rotoscoping, for this I was only shown how to set up a photoshop file ready for the effects. I imported the chosen video into Photoshop, and I then created another layer and worked through it frame by frame drawing the shape of the dancer moving. I can then use this drawing to apply effects to the correct area so they fit with the video of the dancer.

Layout Thumbnails

For my New Visual Language project I am designing a magazine, and so to help with the layout process I started off sketching on paper. I learnt from my Physical Studio tasks how to effectively sketch thumbnails for magazine spreads and how helpful it is to quickly get my ideas onto paper so I can quickly compare ideas and decide on which is the best without wasting time on the computer. Also the small format is less daunting to work with so it is much easier to come up with countless variations. Once I had my rough sketches and thumbnails I moved on to creating detailed layout variations. The aim of these layouts is to provide a template for me to build my magazine on, this keeps the layouts consistent but also allows for flexible variations. I created a different sketch for each layout scenario such as 3/4 text pages and whole image pages, as magazines do not just have one continuous layout.

Typesetting

From the previous InDesign tutorial I learn how to manually justify typography. To manually justify type means to arrange the space and words so that they sit flush on both sides of the text box, making a completely rectangular segment of type. I put this into practice in my recent Foundation Studio Practice module project, New Visual Language. There is a section on Modernism and Post-Modernism which contains a large amount of body copy and so precise typesetting was needed to make sure the type sits comfortably on the page and does not stick out and make the flow of reading unpleasant. So I first got rid of all the widows and orphans by either creating forced line breaks to re-arrange words on lines, or by slightly increasing the tracking to physically make the line longer. Then I moved on to the finer details, such as the rags around this text wrapped quote. I needed to justify the text which surrounded the quote, and to automatically justify it would create large rivers and so I needed to do it manually. I re-arranged the lines and words using forced line breaks, increased or decreased tracking (but no more than 20 either way or it would be too noticeable), and also increased the kerning between words, I used trial and error between these methods and worked my way along the segment until it was perfectly justified with no rivers to see.

rnd Grid Sans - A Typeface Design

From a selection of samples I chose the Beethoven poster designed by Josef Müller-Brockmann to take inspiration from and interpret that into a typeface. Of course the element I was influenced by from the poster was the circular shapes and motion which focuses your eye in on the information, and so I started with that. I drew a very simple circular grid consisting of concentric circles 5mm larger than the other, I then added 5mm width rectangles to the grid for the ascenders, defenders, cross bars and terminals etc. I also added some terminal end guides every 45 degrees around the circular stroke guide so I had a choice and guide as to where I will set the terminals. Once I had set the grid I set about creating a starting shape of the circle and building the letters elements onto it, constructing each character from the inside out. There were tricky letters to work around this circular grid, like the letter S. Typically the letter S is built upon two circles on top of each other, however doing this and breaking my grid would make the
letter S considerably thinner than the rest of the characters and the flow of the words would be lost. So I had to carefully consider these awkward letters when using this restricting circular grid. Of course due to the strict grid the typeface it very simple and utilitarian, there are no characteristic flares like you would find with humanist faces, and even the very small details on most grotesque typefaces. But the downfall to this is that it is impractical to use for body copy and other small sizes as the letters are not economical with space or have the ergonomic handwriting inspired shapes which make a word recognisable and legible at small copy sizes. But as a display face this typeface is interesting, it has terminals that abruptly end sooner than on most typefaces, for example the letter E which terminal stops at the 6 o’clock position rather than somewhere around 3-4 o’clock. These features trip up expectations and so sets it apart from the many minimalist typefaces that are out there.

Typography Development

When I first got the typography fever I did the predictable, I put Helvetica on literally anything that stood still long enough for me to take a picture of it. Most designers do this when they venture into typography for the first time. Then after some time I learnt that Helvetica was not suitable for every design brief, no matter how hard I tried to make it work. It lacked the character which was sometimes needed in some designs. It was suitable as a neutral balancing weight for more detailed and characteristic images or illustrations. An example of this binary opposite being bland and tasteful. I also realised that everyone else was using Helvetica just as blindly as I was. So I moved forwards and started to use other sans serif faces like Gill Sans, Akzidenz Grotesk and Meta. I learnt the difference between Grotesque and Humanist Sans Serifs and that Grotesque was typically for display type and Humanist was typically for body copy text. but my knowledge of type was still quite small, I only varied between regular and bold weights, and I had not fully explored serif faces. So when I got the New Visual Language project for my Foundation Studio Practise module I explored new typefaces like the humanist rounded face Info and the classic grotesque face Univers. I experimented with the light, italic and condensed weights in all different combinations and I discovered a wonderful new expressive side to typography which excited me with its possibilities. This new style I have found is neither Modernist or Post-Modernist; it is in the contemporary style category which I have discussed earlier.

I can not wait to see what I will learn next.

Hepworth Print Fair - Poster

When I visited the Hepworth Print Fair I bought this poster from Nathan Bolton 

- http://www.nathanboltondesign.com - 

I was initially attracted to this poster because I love web development and coding, and this marriage between coding and computing and print was like the stars had aligned for me. When I got the poster home and framed it I got thinking of the concept of the 'Analogue Website' stated on the poster. What Bolton has done here is take the website, or what makes a website, and put it into an environment where it is technically useless, such as here in print. It has given code a visual quality which is not usually seen or considered. It has played with the typical representation between code and the website/computer to trip up my expectations, it is very clever and something which I have not seen before.

But all theory aside, it just looks beautiful. I love Computing and Typography, it was like this poster was made for me!

Am I Modernist or Post-Modernist?

As a part of my New Visual Language project I wanted to extend on the Modernism and Post-Modernism themes and discuss what type of designer I am. I took what I learned from the Modernism and Post-Modernism lectures and they related movements and wrote this short on the style.

Before researching in depth into these two styles I always considered myself more of a Modernist designer. I was not as strict on my styles as the early Modernists however, I still added small amounts of personality to my work and still considered the superficial values as well as the functional ones. But my style has always been simple, minimalist and above all functional, especially with my work on books. However when I explored the themes of Post-Modernism I discovered that there are also many parts of myself personally and my work that are quite Post-Modernist. My poster designs for example; they are simple and functional of course, but as standard practice when I design posters I add small embellishments over the top of the functional elements. These do not have a direct function however I feel the poster is incomplete without them, it can look empty and dull, and a poster needs to be shocking at times and it needs to grab you. And my personal tastes such as music, can be quite expressive and far out from Modernism; I listen to a wide range of music from House and Electro, to old Rock, current Pop Punk and even Metal at times. What genre I listen to depends greatly on what I am doing at the time and what mood I am in or want to be in, I do not have a set rule on what type of music I listen to, I go with what I feel and what is right for the situation; sounds Post-Modernist doesn’t it.

I respect the order and standard Modernism has created, I follow it very closely as much as I can, without it design and the modern world as a whole would not function, there would be mass confusion and chaos. There needs to be an underlying structure to all things otherwise nothing would function, buildings need foundations. But I also respect Post-Modernism in the way it keeps moving forwards, it does not stop and it knows it is never complete as the world is in a constant state of change. Post-Modernism keeps graphic design and art innovative and current and so safeguards their future, otherwise they would stagnate and be forgotten as the world moves on. I also love their expression, their bravery to break the norm and their ability to question everything.

So am I a Modernist or Post-Modernist? I am neither. I am another one of the many contemporary designers who have discovered the benefits of both styles. To put it into perspective think of foundations as Modernism and buildings as Post-Modernism; to have just foundations would be pointless, and to have a building without foundations would mean it would soon collapse, you must have both in order to create the well designed however varied cities we see today, just one or the other may sound good in theory but do not work in practice.

Contemporary Style Short

As a part of my New Visual Language project I wanted to extend on the Modernism and Post-Modernism themes with the modern contemporary style which combines the two. I took what I learned from the Modernism and Post-Modernism lectures and they related movements and wrote this short on the style.

The current fashion within design today is neither Post-Modernism or Modernism, it is a mixture of both. There is a lot of simplicity among design much like late Modernism; logos are in a constant state of change as big corporations strip them back of all typography and flourish until all that is left is the bare symbol of the brand, examples of this is brands like Nike, Starbucks and McDonalds. This de-cluttering of design is stripping it back to the least essential functions needed to communicate with the audience, something Modernist designers aimed to do right from the beginning of the Modernist movement. However despite this back track to simplicity, current top designers like Stefan Sagmeister and Erik Spiekermann talk about the need for beauty among even the simplest of designs, they always put some flourish or finishing touch to a design once they have the bare functions. The standardisation of typefaces has also been lost as more and more typefaces are being designed and used freely each day, designers use a typeface according to the need of a client of the theme of the project, so depending on the variety of work a designer can be using two to three different typefaces for each project, something which would make Modernist Elites shudder.

So the Contemporary style respects both aspects of Modernism and Post-Modernism, however the deciding factor for a design is not the rules of the style, it is the needs of the audience. That is what sets it apart from Modernism and Post-Modernism which put their rules and opinions first before the audience in most cases.

Post-Modernism Short

As a part of my New Visual Language project I was asked to define the term Post-Modernism, and so taking what I learnt from my lectures and from my own research which branched off from the lectures I wrote this short summary.

Post-Modernism is widely considered as the polar opposite of modernism. Post-Modernism is a graphic style that is built upon emotion, reaction and interpretation. These three areas are explored freely, without the limit of Modernist rules and systems. Post-Modernism is a way designers can wholly represent their interpretation of a subject in its purest form before it is rained in and constricted by rules. Post-Modernism was a new way of thinking, it rejuvenated creative minds and replenished the creative field with further innovative and modern work. Post-Modernism is emotion creatively represented in a raw form.

Post-Modernist designers wanted to challenge your expectations and challenge the canon of Modernist ‘good design’. It wanted to explore ground that had never been walked across. It was an expedition into the unknown and the designers involved kicked up the leaves and disturbed the water of the norm.

Dada in Foundation Studio Practice

In my Foundation Studio Practice module I was asked to research Modernism and Post-Modernism, and a key part of Post-Modernism is the Dada movement. I recently had a lecture on this movement and so I used my notes to describe Dada in reference to its influence in graphic design.

Dada was one of the biggest Post-Modernist movements, it came about in the time in-between the two world wars where there was huge social and political unrest. When the dust settled after the first world war people were trying to settle back in to a new life, which at the same time artists were beginning to question their traditions and started to cautiously experiment. This experimentation quickly snowballed out of control and outrageous and absurd art was being created, the artists behind this work aimed to disturb the traditions and anger those who narrow mindedly stuck with the outdated ideals and art forms. Some Dada artists did not make art however to be a piece of art as we know it, they were simply expressing their disgust with the current state of the world. They used their outrageous art to then kick up the leaves and disturb the water of the old ways of thinking.

Dada is freedom, it is spontaneous, it is chance, it is anti everything, it is the religion of truth and feelings .

Dada did not just challenge other artists work, they often ridiculed themselves. They recognised how outrageous their work was and how they were often seen as silly and idiotic, so they pondered on this too and fed it back into their work. This new look on art refreshed the art world and also seeped into graphic design. It disturbed the Modernist Swiss Style and enriched it with a whole new world of visual communication. One of the biggest influences Dada had on graphic design was their approach to typography. They questioned the role of typography, they de-constructed its semiotic structure and played around with each part. They often removed the function of type and used it purely as a visual tool and not a communication tool. This questioning is still carried on today and there is still a feud between those who use type for communication and those who use it for visual meaning. Dada typography was eruptive and usually had no meaning, it greatly upset the Modernist dominated graphic design.

Dada graphic design was often random and had no rules or structure, there was a certain disharmony with each piece. They pushed typography to its absolute legible limits, they violated the canon of graphic design in each way they could. They would even go further to question the norm of language and logic that was already in place, everything that made design was put into scrutiny. They did not want to do what other had done before, their work was truly expressive and so original.

The story behind how Dada was named Dada is quite intriguing too. The founders all gather with the aim to name their social movement. And to deviate from the normal naming methods where they name would have some reference to the cause, the artists tool a dictionary and stuck a knife in it, and the word it landed on happened to be Dada. They liked the word because of how nonsensical it was, it was meaningless and silly and so it was perfect for their work.

Hammer Design - A Modernist Studio

During a Seminar on Form Follows Function I saw a picture of a toolkit with a hammer inside, the discussion about the image was the raw functionality of the hammer. This gave me an idea for a brand; Hammer Design. I thought that an ethos of pure functionality and the image of being a tool would be perfect for a Modernist influenced design studio. This is what the original Modernist designers wanted for designers and studios; they wanted designers to be purely a creative tool for clients to use, they wanted designers to do only the job they were told and how they were told to do it, there was no addition of personal taste. A hammer is also just a tool, it does what you make it do and nothing else, it does not decide when to stop hammering nails, and so designers should not take it upon themselves to add personal tastes to a design.

Although this fits well with Modernist ideals, it is not entirely practical in  he real world. A client might not know what is best for their audience or know how to best communicate with people, whereas a designer with years of experience would. So a good design studio would be expected to question their clients and reach the right solution through working together and joining experience. So sometimes a designers opinion and even personal tastes are needed in design.

The logo of the design is influenced by a few Swiss Design rules, the letters are all lower case as they show more character and it also keeps the logo simple and the lines across consistent.

I used the skills I learnt throughout my Process and Production tutorials to create this logo. I kerned the letters and increased the leading to make the words fit on either side of the hammer. I also traced an image with the pen tool to create the hammer illustration.

Modernism Short

As a part of my New Visual Language project I was asked to define the term Modernism, and so taking what I learnt from my lectures and from my own research which branched off from the lectures I wrote this short summary.

To me Modernism is the structure and the rules behind graphic design. It was developed at a time of huge change and so a new system needed to be established to fit the needs of a fast modern world and modern man. Modernism is brutal and strict, any part of the old art and typography which did not suit the needs of the modern man was discarded and ignored. Modernism aimed to bring an uncompromising age of innovation in art and design which could keep up with the lightning fast development of technology through industry.

PDP Task

I was recently tasked to look at a sample from a typical fashion magazine and give my first impressions of it in terms of how it made me feel, what kind of audience it is aimed at, what tools it uses to attract this audience and what I think about the way it does this.

The Sample I chose was the String Interior design ad in the ELLE magazine from April 2015. From the start I am not appealed by the kitchen shown in the image. Usually images advertising food or kitchens are appealing and make you hungry; they use warm colours and wet textures to make you salivate and crave that food, or kitchen it is prepared in. This kitchen however looks cold, stale and dirty. Plus the open cupboards encourage vermin and cross contamination so this makes the kitchen impractical. So now I question weather this kitchen is made to be used at all, or just to look good and be a fashion statement. I can imagine this kitchen is made to fit with a minimalist and also impractical household.

Despite the image looking unappealing to me it fits and works well with hipster and indie fashions and culture. These people often purposely deviate themselves from common fashions and trends, and so this kitchen which I consider to be anything but normal would be perfect for this audience.

This image uses colour to appeal to its audience, it uses lots of whites, blacks and mostly greens. These colours are almost polar opposites of typical kitchen colours which are creams, browns and yellows. And so the not so trend loving hipsters would love this outrageously different kitchen and its colour scheme.

The objects you see in this kitchen are also quite different to what you might find. I can see lots of jars of olives, a leg of unpleasant meat, sprouts, garlic in black netting, onions and what looks to me like way too much oil for one households typical use. In my kitchen there are colourful packets, range of sauces and herbs, red and white meats and other colourful items. And so the contents of the image also deviate from the norm, so it targets the audience in every possible way. It is very effective but I don’t think I will be buying that kitchen or taking the doors off my cupboards any time soon.