physical drawing typography 2

illustrator skills

In this processes and production lesson we were focusing on the features that are available in illustrator. This was software that I had not used before- so many of the screenshots here document every detail of the practical in order to form a series of revision material as for future reference if needed. 

The city scape image used here was taken from an online source, with the reference at the foot of the page at where to find it. I thought it would be easy to practice tracing functions on an image which could be easily silhouetted and has a definitive outline. 

Before editing this layer was duplicated, and place on top, similarly to how layers would be pasted on top of each other on Photoshop.

We first practiced how to use the pen tool. Experimentation in to how to create a curved line alongside a simple straight one was undertaken. Below shows the anchor points within a curve, and i earn how these can be added or deleted after the shape ha already been created to edit it further. A thick black stroke is also added here to explore the effects that can be applied on to it.

Then below shows how these curved lines can be reconnected to form a continual "circle-like" shape. The more un-uniformed shape closest to the base of the image was linked back to install during the drawing out. However the more circular one above it was edited by retracing the shape over and over again to refine its shape gradually, in to a more perfect circle. I didn't know this was an available feature- however this is quite good for tracing out pre existing drawings in which a perfect circle is not required, but a close similarity is wanted. 

Then we began to trace the background image This can be seen below, with the traced area being indicated with a red thin line. This is done by similarly clicking anchor points within the image and mapping out the are you want to include. The more intricate the detail, the higher number of anchor points are needed. ( This is kind of shown at the top of the sky scraper when more dots are used around the detail that is on the roof of the building.)

We then looked at how an image's trace points could be expanded. Below shows the points automatically selected, and here this can be manipulated for example to remove the cloud selection in the sky.  This can also then be changed to adjust how many colours are included in the image. So here it was changed to just black and white (2), removing some of the mid grey scale tones.

To further emphasis with areas were selected I coloured the background of the image red, just by using the fill tool. This other wise would consist of a time consuming process of tracing and then inverting before using this tool. 

Although this isn't a perfect fill of the sky, it shows how this could be achieved fairly quickly. With a little refinement it would produced a unique look to an image and would be fitting for comic book use with the black and white contrasting with a strong primary coloured background.  The limitation of colour use is something which would also be exercised by comic book graphic designers, as a small ranged palette is normally used

Above shows experimentation of adding a fill gradient to a shape. These can be manipulated by changing the colours included in the gradient  e.g blue and white here. And can also be altered in the right hand side tool bar by dragging the selections along the gradient example. 

Below is further use of fill and stroke on shapes and lines. The originally drawn shape is seen in the middle curve, whereas in the last curve, the originally drawn shape is then expanded in relation to the size it is visualised on screen as. 

Below are further experimentation with shape. It started as seen in the first image here; with three different shapes in three different colours. These were then grabbed together and new shapes were formed by using the shape finder tool. For example the circle was attached to one of the points on the star, as seen in red in the second screenshot here. The new shapes formed therefore mean some areas of some shapes get detached as well, so as you can see in the third screenshot- the two bottom corners of the original rectangle could be moved.  Or in deleting the new shape, it leaves behind interesting formations as in the forth screenshot. 

Perception was then experimented with, as seen below. Certain areas could be dragged and shaped to appear in the foreground or towards the background of the composition. This would provide interesting logos as it's different and adds a 3d dimension to the simple shapes. 

Then we looked at how art boards could be used on illustrator. Three are added here; and it was explained how this is a good tool for planning animation, frame by frame. The red circles below are to give an indication of this, with the right screenshot having a stretched circle pasted above the original to reflect the movement which would take place in the animation. 

Finally we combined all these skills in to a composition of our own.

A previous task was to edit a self portrait. So I chose to use my edited version in this composition. Below shows the original photograph, and then below the edited, airbrushed one. These edits were done on photoshop software. 

Below shows the image placed in illustrator with he amounts of colours being used reduced. 

Then here the expanded trace applied. 

Above shows the image trace being manually adjusted. in regards to number of colours used and the thresholds.  

Below is this applied to the image.

It was then essential to a grid to the image as to abide by the rule of thirds which is essential in photography. 

After this a simplistic typeface was added in a corresponding tone used in the image.

Here is the final version. 

Which has a graphically posterised effect with minimal colour use. 

http://www.artpistol.co.uk/sites/default/files/imagecache/artwork_zoom/places_006.jpg

apa 6th referencing

Benefits of citation;

-shows off research, 

-shows thorough knowledge, 

-stops plagiarism, 

-tracable information, 

-copyright.

Essay referencing tips;

-check academic integrity on unlearn,

-quotes of over 40 words don't need to be in speech marks,

-quotes over 40 stand alone in a separate block of text,

-3-5 authors should be introduced individually

-then these 3-5 authors are reduced to 'et all' throughout the essay,

-6 authors or more and you should use 'et all' from the outset.

http://writing.wisc.edu/Handbook/DocAPA.html

Reference list recommendations;

-list author and then surname in alphabetical order,

-reference list,

-bibliography

-wide range of resources e.g. books, journals, online etc,

-main information should be formatted in to italics,

-for magazines or online journals, give the homepage URL,

-can cite images, so give figure labels that can be tracked in reference and in document,

-using images from books, use photographer details or those documented about it in the book,

-exhibitions can be cited,

-refer to APA citation booklet,

-use help guides for summon,

-APA style blog for reference on how to cite difficult resources. 

http://blog.apastyle.org

Jonathan Lindley

This lecture was led by Jonathan Lindley- a former student at the University of Huddersfield. 

Who wanted to share his own experience of using graphics in combination with sound to create interesting outputs; the aim of this was to inspire our own studio work, as well as providing some contextual background which our own work would span from. 

An example of his work was for Geist (Drumcorps) in which he composed a "glitch" like animation for the music video of this song. The heavy metal sound of this track was written in relation to "unfairness" in society- so this too was the inspiration for the design. Statistical research was essential in order to denote this "unfairness". 

https://vimeo.com/62313576

This was "centrifugal force" by The Fall Line- with an electric, folk, acoustic style. That was designed an made by sunbird records. He used after effects and cinema 4d to produce these cute animation graphics.

https://vimeo.com/108336100

He also shared a music video in which he felt the track had been reflected thoroughly in the design of the visualisation that accompanied it. 

Four tet- smile around the face

key notes;

• explicit
• transparency
• performance
• poetry
• narrative
• feel
• look
• listen
• experience
• meet
• learn

typography animation

For this production class we were making a short 10second clip about a typeface using the text editing features available on Adobe After Effects software.                            For this I conducted research in to one of the types already available in this software- and chose 'courier' as this typeface seemed to have a story behind it would could be played upon. 

To go along with the story, I wanted a sound clip to convey my "typewriter" emphasis. I found a clip relevant on youtube, and used an mp3 converter in order for this to be converted in to a song format which could be added to an after effects file.                                                          As well a typewriter image was needed, and I wanted to achieve a 'cute' doodle like drawing in order to keep a vintage look to the video.  Its a kitsch, modern vintage which is taken in designers today.

I planned out these scenes before production, and wanted a title, name and date of creation, fun animation and then detailed information/ quote on the last frame. 

Frame one- black with white text
frame two- black with text, zoom out transition
frame three-white typewriter, gradual type appearing
frame four- white with black text, edit of text as read

Above the timeline shows how a red circle with a edited blend mode, can be added to each corresponding letter and then taken away to appear to press the key.

As this occurs, the letter is added to the page printing out, one letter  at a time.

Here is the effect which was added to each key word in the quote here. A red white and black minimal colour scheme was applied throughout.

Above shows the transition of the "1955" text panning out to eventually form the white background for the next frame. This was done by starting the 'scale' and 'position' at the desired position and size on page, and then re timing the larger one a few moments later. This seamlessly zooms out then to cover the entire page.

 Above shows the timeline for the 10 second clip. 

Above the sound clip is added to a small section of the clip (where the typewriter keys will be pressed). The sound was lowered here so it wasn't too loud and over powering, and was clipped accordingly in relation to length.

The graph view here is relation to the 1955 transition. This shows how the path from a to b is achieved. This can be edited by curving the line, to speed up or slow down the movements, However after trilling this out, i think the quickest transition suggested here is best.

The graph can also make music manipulation easier if necessary. as the sound can be lower to silence at the end of the piece gradually, or can increase from silence to full volume gradually at the start.

Here is the exported video.

(also on vimeo)

 

https://vimeo.com/154228115
https://www.youtube.com/watch?v=hFWXgB0wpsU
http://cache2.asset-cache.net/gc/165908123-typewriter-line-drawing-gettyimages.jpg?v=1&c=IWSAsset&k=2&d=168OYMj9xlweKU0ZJr0Egy9vxuwrtQXcwOD8OzuzlpRnS4FwDzjsLaSSq2B%2FRKUz

writing with Amanda Tinker

Notes below provided by the talk from Amanda Tinker.

• visit kent university website for a stage by stage quite at how and when to complete specific areas of the essay research and writing.  http://www.kent.ac.uk/smfa/documents/welcome_week/Essay%20Writing%20Guide.pdf    http://www.kent.ac.uk/ai/ask/index.php
• use university resources such as; my reading list, summon, subject guides and google scholar. 
• when researching use a scan, skim, detailed approach to reading.
• be sure to be clear as to whether you are writing a report or an essay.
• reports focus on structures with clarity, informative text, built points, tables, diagrams and labelled figures.