What is a G.I.F

The internet's recent obsession with G.I.F's, that's graphic interchange format(.. so definitely not pronounced jif) has allowed for a more diverse range of emotions and shared humour to be experienced online. These short videos are usually humorous and the very best manage to loop succinctly creating an endless pleasing cycle of footage. 

The format supports merely 8 bits per pixel for each image and up to 256 different colours chosen from the '24 bit RBG colour space'. 

G.I.F

Typically a G.I.F will have around 16 to 24 frames per second . Due to the limited size and frame rate, the file format is iconic for the style of movement created, usually quite rugged. 

The G.I.F was a file format basically rendered useless by the late 90's, of course all things come back round and the G.I.F remains a treasured part of the internet we know today. In popular culture, G.I.F's are slowly fading out of use in a trendy way, but I'm sure your Mum will still send them to the family group chat...

Idea 1:

Simple logo style graphics. A person holding a page up to the audience (us), the image keeps changing. From good to bad to represent how designers can change our perspective. 

Pros: - Linear style and only one aspect moving, easier to translate into a GIF 

Cons: - Does it translate the essay well, does it just look like someone holding a picture 

Idea 2:

Again, a simple graphic linear style. one person(A)  holds a picture in front of another face (B), the picture changes throughout the graphic. B can't see anything except the picture that A is holding symbolising a designers control over public space.

 

Pros: more clear message, even without reading essay 

Cons: I can't draw , may not work with my level of skill

Idea 3:

A really life billboard is pictured, the picture inside is warped and reveals a headline or article that was pictured in the essay. 

Pros: Real use of public space

Cons: not sure which article would best represent this 

Audrey Malo

"Malo experiments with color and contrast in her editorial illustrations and gifs, always telling a story with a touch of humor."

Malo's style has elements of how I initially want my GIF style to be. The simple linear design with use of colour to make the design stand out is really effective. I think use of drawing tablet will be the easiest way to make a short animation. However perhaps through using more traditional techniques such as scan and cut, the design will begin to have more texture. 

Thoughts:

I feel this is my least favourite of all the designs because it doesn't communicate much. However, if I can think of how to make the image inside more interesting then it could be quite a successful design, I can see how it would translate into a GIF

Thoughts:

Although the least successful visually, it is one that I am most prepared to put work into. I think the concept works well to represent the essay showing physically the influence on audience in a simplified way. It could also be visually very pleasing. Once the initial characters are drawn, it shouldn't be too difficult to draw the different frames inside of the paper. It just may take me a while to get the first part done! I think a clean colour scheme and some texture is needed to give the piece more character. 

Lina Lark

She studied illustration at the Camberwell College of Arts in London, where she graduated with distinction in 2015. Lina's work has been shortlisted for Price for Illustration 2016, and AOI World Illustration Award and New Talent Award 2017.

Her style is very modern with use of Graphic shapes and bright colour. I like the idea of the figures not being completely realistic and more stylised.

GIF 3 becomes the first G.I.F

As an easy introduction to G.I.F making, I thought the 3rd image would be the easiest to bring to life. I started with the image I had previously shown in the document and used the warp tool to create slightly different versions of the same image. By just moving one part of the image, it kept it simple and easier for me to figure out if the GIF would be successful. I then used photoshop to adjust the time of each frame and saved it for web legacy. The results are fitting. I like the message and the way the billboard represents the essay well, However it does feel rather simplified and it seems as though it could be pushed further, through perhaps looping or morphs into different messages. GIFS are usually short, though I feel this is too short for the particular context. 

During my tutorial we spoke about the positives and negatives of this particular design. We talked about how it's neither fully humorous or fully serious. This is partially due to the typeface choice, it isn't accurate to what a billboard would use and creates a soft feel to the work. Some artists I have been suggested to look at due to this are David Iyke, Craig Alden and John Carpenter. Using these, I will see how much further I can go with this idea, though I would like to test out a different idea alongside this. As it could be more successful in its projection of the message. 

 

 

Thoughts:

Visually, this idea has turned out quite well, better than expected. The idea is for text inside the billboard to move and warp therefore it can be used as a GIF. I think if the second idea doesn't come up to scratch by next week, I will focus again on this one. To make the design more personal, I could add different things into the background of the photo, or simplify the colour way in order for it to fit within the 256 limit of GIFs. I think a typewriter font works well in for this and the public space element is very visible therefore there are clear links to the essay. 

Lining up layers

Initial outcomes of second attempt GIF

Simultaneously, I created two GIFs with different backgrounds. Both exactly the same except the colours. I thought they turned out really well; excluding the minor exclamation points and missing fingers... It was more successful than I thought, the transition worked well and the message is clear. Showing others the GIF they described it as 'cute' and 'so true!' which is exactly the type of vibe I was intending to create. Perhaps by adding more frames, it could become smoother. And the use of 'R' instead of 'are' could be confusing so I will probably swap that. 

I keep attempting to use coloured backgrounds, yet they keep getting swapped out for white. But it just looks so clean, the figure seems to stand out and creates a cleaner overall appearance. I like how the hands and feet have hints of pink, rather than an overwhelming screen.

Pink n green GIF

Idea 2 and 3 combined

'You are what you design' was just quick phrase I inserted into my final idea at the beginning of the project. It seems to have stuck, it seems fitting as it's a basic way to some up the intentions of my essay. 

It's a take on the phrase 'You are what you eat' ala Green Giant. It's sort of a way to urge designers to consider what they are doing and realise that you represent yourself through the design. I wanted to keep it playful, I wasn't keen on the fact in the original idea being a found image, due to copy right etc. But, I am no artist, illustration is not my strong point; as you can probably tell from the previous ideas. I saw the figure (pictured left in 'initial shape') on an instagram page briefly, but lost the original it looked similar. It was a simple drawing for a black lives matter protest, I thought the use of shape was really interesting and would translate well for a GIF. 

Outline shape

After playing around with the shape tools, I thought ovals created quite a nice, light character form. The character isn't meant to resemble a human directly. In my initial ideas, I wanted it to be a girl holding the sign to an audience, but I feel as though the character adds a different , more interesting element. It gives more freedom in how the GIF can transform, rather than having to make clothes/ mouths/moving limbs etc. The GIF idea is based on a sign holder, the ones that would stand outside and promote a company. The character will turn the board vertically and it will read something else. Hopefully, this will loop perfectly and create a sweet little animation. 

Making the GIF

Theres not much to say about the process of making the GIF as there's little skill involved, more just patience. I made the character on illustrator, but the GIF have to be made in Photoshop. Therefore for every frame, I would adjust the character slightly, then copy and paste it into PS. After this has been done for all the slides, I combined the slides at a rate of 0.2 seconds and placed it on a loop. Whilst exporting the GIF, I experienced some difficulty in it being saved to the computer. The file size was too large for the computer to handle, therefore I had to lower the quality to fix this. 

Colour scheme/typeface

The colour scheme wasn't based off anything in particular, I just knew that from the initial ideas, I had been creating a gif inspired by old label cartoons, ones with outlines and bright colours; therefore, colour had to play a role in the making. Green and pink compliment each other well, I had used yellow at first but thought it was too stark. In the tutorial, we spoke of how the font wasn't fitting, it lacked context. After the redesign, I felt the work going into a different direction, so after looking through different typefaces Lincoln/MITRE from primary foundary jumped out, this is website recommend to me during tutorials. I had previously used it for a typeface in the 16 page document which I loved. The description is as follows "Designed by David Bennewith, Lincoln/MITRE fonts are studies of the typographic system designed by MIT Lincoln Laboratory for use in various displays on the early warning air defense computer network SAGE (1950s–1980s)."

The fun features made it appealing to me, the 'S' and the 'I' showed real flair. I thought it had certain character that would be a charm fitting for the GIF. I also thought it was interesting that it was used in 'early warning defence' as this sign is an early warning defence to the designers (though just a small personal parallel).  It made me treasure the font further 

David Bennewith

Remake

The GIF needed tweaking, therefore I remade it with this in mind. I aligned the eyes to the feet and made the image larger against the background. This took away unnecessary negative space. I also fixed the sign to say 'You are what you design!' rather than 'You r what you design' although it took up more space, I reduced the fixed kern between words to allow more letters to fit on the top line and reduced the overall font size. 

Then I added small details such as the eyes rolling round the eyeball to create more personal character and suggest movement. I am quite happy with the design, I like how it links to the essay and it involves the audience as the receivers of the public space element. I feel however, it may not be the most obvious example of public space as the billboard would've been. But this has allowed be to develop a different skill rather than simply using the warp tool. The typeface works well, the colour scheme is one I personally like but perhaps should have a deeper meaning, or stronger links to the essay, though I didn't quite know which colour would summarise this.