A digital media design blog.

Month: February 2014 (page 1 of 2)

A picture paints two words.

Alphabet photography full name image

My name made out of the environment around us.

 

Here it is – my finished alphabet photography image. This task has been an interesting one, and one which has engaged me and taught me some new things.

To start with, we went out in small groups and tried to find enough objects and places in the environment to create the individual photographs resembling letters of the alphabet. This at times proved to be more of a challenge than we perhaps initially expected, as a lot of the environment is made up of either organic flowing lines such as in plants and trees, or the straight forward, logical rectangles and geometric shapes of man made structures and buildings. These types of objects lend themselves well to the simpler letters (such as O, which can be approximated by countless circular objects, or L, which any right-angled line can stand in for), but as we discovered quite rarely make up more complex shapes (such as a K, for example). As such, some improvisation was needed to make a couple of letters. The K of my surname was carefully constructed out of marker pens, for instance.

I decided to keep the editing and manipulation of these photographs to a minimum, as I did not think that it was necessary to apply any over the top effects or similar tactics to the images due to the processes that I went through to capture them to begin with. I feel each image was framed well enough that the letter being shown in each is apparent to the viewer, and the lack of significant editing past resizing and stitching the images together helps the feel of the overall composition. I also think that it helps to convey what I believe to be the overall theme of the project, which is that these are just scenes that may be observed in every day life, but by looking closer at the details of what is there new patterns and ideas can be observed. I think some of the significance of that idea might have been lost had I excessively manipulated the images to show what I wanted to be seen.

In finding these letters, I learned a lot about composition and framing of photographs. An object which from one angle or location may have looked ordinary and unhelpful might from a slightly different position have taken on a different shape which resembled a needed letter. The task also made me think about other photographic ideas such as depth of field / focal length, since using these tools can bring out a specific region of a scene to portray, rather than just blanket capturing everything in view.

Overall I think this task has turned out well, and the images that were captured are of generally high quality. A slight drawback that I can see with the task is that the act of spelling out my own name, while certainly making the result more personal, may have resulted in a poorer image overall, since there is a lot of character repetition in my name and this caused less actual new content to be displayed.

If I were to redo or continue with this alphabet photography idea, I think I would like to be more selective with my photography to convey more of a mood or idea, such as using a limited colour palette. However, I think that limiting the available objects that could be photographed in this way would make it much more difficult to find the appropriate letters amongst the limited selection.

Photography Project

The next brief is in, and this time it is a photographic one. The project is to create an image which spells out words (specifically, our own name), using photographs of the environment to make up the letters. I think this has the potential to be a very interesting task, from both a theoretical and a practical standpoint. On the practical front, it will be a good chance to experiment with photography and related techniques, as well as possibly some photo editing afterwards. This will be beneficial, as photography is something that I’ve never really seriously got into (outside of the occasional holiday snap) and it will be a good chance to learn the ropes.

From a more theory-based perspective, I think the task will really influence the way that I perceive my surroundings, and require a certain frame of mind to see things that I would normally see one way (as everyday objects and places) as something entirely different (representations of letters and language). This has the possibility of touching on some interesting philosophies and ideas.

Outside of the set task, we have also been introduced to some other photographic techniques such as creating time-lapses and panoramas. I look forward to trying these activities out as well, and hope to come up with some interesting pieces at the end.

Flash Animation Summary

The ‘Flash animation with soundtrack’ brief was something which I think helped to improve my skills, from both a very specific technical and software-oriented perspective and a broader conceptual viewpoint. I learned important things on subjects ranging from basic animation and soundtrack creation / synchronisation to visual abstraction and simplicity.

I think the animation I created had merit as an experiment with the techniques involved in the task, and I am generally happy with it as an artefact, however were I to attempt this task again there may be things I would do differently. For example, the animation I created was perhaps too rigid in it’s structure and characterisation, where the task called for a more abstract piece of work. This is something which I stand by as a creative decision, but which maybe could have been a follow up piece to an initial , more traditionally abstract animation.

Nevertheless, I think that this short project has been a success, in that I achieved my initial aims for it. These were to refresh my knowledge of simple animation using Flash and to take a first look into the area of music production for the soundtrack. I definitely did both of these things and more besides, and learned from the experience.

Speaking of music production, I do not think that it is something that I wish to continue too much further at present. The brief was a good entry point into it and I learned a few basic techniques, such as layering tracks and using sampled loops. I also think that the track I managed to produce was fit for purpose and served the animation well, even if it was a bit basic in it’s composition. I think however that my efforts would be more wisely spent pursuing other areas which are of more interest to me.

Again, the final result of this project can be seen here.

Flash Animation Progress

This animation task has thrown up some interesting design choices and questions. At the start of the project, upon receiving the brief, it was suggested that we make our animations in an abstract style. This, from some of the examples shown from the early days of animation, might be most commonly interpreted as consisting of simple shapes, colours and lines with no real structure or meaningful progression throughout the animation, other than variation with the beat or melody of the accompanying music track. This sort of style can be seen for example in the short animation “A Colour Box” by Len Lye (accessed at: http://vimeo.com/6276547).

This style is all well and good, and certainly has its merits in experimenting with animation techniques and music synchronisation, however, it did not really interest me enough to pursue it for this task. I instead opted for a more (albeit very loosely) plot-driven piece, with a defined character and progression through the animation. Where I brought in the abstract ideas, then, was with the events of the animation. Rather than seeking to animate this character going through some ordinary task or activity, I chose to portray a scene based more around the emotions or feelings associated with a specific activity (in this case, listening to music).

I went about this by having a clear transition from the character simply walking along, to the activity taking place. This transition was primarily achieved by the initial lack, and then introduction of, the music track. I also added some visual cues such as a pair of headphones being dropped on to the character.

The music that I created for the piece is meant to convey a sense of joy, and a carefree attitude that the character is portrayed to be feeling during the activity of listening to the music. The character is then animated moving around the screen in a way that is greatly exaggerated, and which defies the normal rules of motion and gravity. I have used this motion as a visual representation of the mood being represented, which in this section is meant to suggest an elation at the music which removes everyday worries, and therefore physical restrictions on the animated character.

I also tried to make the piece humorous in nature, as it is quite a light hearted subject matter and I think that the humour works well with the exaggerated animations.

The final animation can be found here. 

Flash Animation Mini-Brief

The next piece of work to be done towards the portfolio of mini-projects is an animation made using Adobe Flash. The task also calls for an original soundtrack for the animation, which should be produced using GarageBand. The animation should be roughly 15 seconds in length, and should fit on a canvas of 22mm by 16mm in size.

This task will help me extend my skill set as I have only briefly used Flash to create animations in the past, and I have no experience at all with the GarageBand software, or any form of music production. While the task calls for only a simple soundtrack to last the required 15 seconds, I think even this will give me an insight into the creative processes involved with audio production, and let me get a feel for the area and see if it is something I would be interested in continuing with after the conclusion of the task.

I will also, I think, benefit from going through the animation process in Flash, as it is an area I haven’t done anything in for a while, and so it will be useful for me to be refreshed on the techniques and practices that go with it.

Thoughts on hand-drawn animation.

After I had produced the bouncing ball animation by hand, I realised several things. The first of these was that with such a small number of frames, it is quite hard to see small changes or deformations in the drawn shape. Because of this, the ‘squashing’ of the ball at the edges of the paper is not really exaggerated enough in the drawings to be entirely obvious in the final animation. This and many other reasons (primarily the ridiculous simplicity of the animation) cause me to acknowledge that what I produced is not very good as a piece, although it did serve well as a learning experience.

Another thing that I learned is that hand animation is really not an area that is meant for me. My drawing abilities are not up to scratch to produce anything in this manner except the most basic of animations using simple geometric shapes without taking an extraordinarily long time trying to draw something more complicated. Due to this, I do not intend to continue much further with this particular form of animation, although I see the usefulness of this task in learning about the history and foundations of animation.

Thanks to this task and my research around it, I have become more interested in animation as a whole, and am keen to try out some different methods and styles of it. I will focus, though, on more computer-generated areas where my drawing skills may not have so much of an impact.

Drawn Animation – Progression

As I begun the hand-drawn 12 frame animation task, I had several ideas of what I could draw. My initial plan was to try to animate a typical human walking cycle, although I quickly realised that this would prove quite difficult due to a combination of needing to redraw the entire image for each frame  and my lack of drawing skill.

I then changed my plan to animate a simple ball bouncing around the imagined space of the page, as I felt I could probably manage to draw at least a semi-passable circle twelve times.

I began by drawing the ball at the 4 cardinal directions on the page, hitting each of the edges and about to bounce off. To try to achieve this, I drew the ball slightly squashed in towards the edge each time. I then drew two transitional stages for each direction of motion, and again drew the ball as if it were being deformed, this time by the force of its motion and air resistance.

Once I had the required 12 images, I took a photo of them and imported them to the computer, as I felt this would be the easiest and best way to show them in a digital form as an animation. I then appropriately framed the images and turned them into an animated .gif file using the ‘gifsicle’ command in a Terminal environment.

The result of this can be seen below.

Hand drawn bouncing ball animation

The final bouncing ball animated gif image.

 

Hand Animation – Background

I recently worked on a short animation project, whereby the goal was to create a simple 12 frame animation using hand drawings, in the style of a zoetrope animation. In taking this on I decided to look into the history of this form of animation, as this was the first time I had heard of the particular technique.

The zoetrope is an early animation device which gives the illusion of motion in a series of still images. It is made up of simply a hollow cylinder (with vertical slits cut into the sides at regular intervals), on the inside of which is a strip made up of a sequence of static pictures. The device is then spun and a viewer can look through the slits to see the imagery inside. The spacing of the slits causes the images to appear to the human eye one after the other in rapid succession rather than blurring together, which much like a cinema projector creates  the illusion of a moving image.

The device can draw its roots all the way back to 180 AD and Chinese inventor Ting Huan, who created an early form of the zoetrope called ‘chao hua chich kuan’, which translates as ‘the pipe which makes fantasies appear’ (Needham 1962).

The modern zoetrope however was invented in 1833 by British mathematician William George Horner (Thompson and Bordwell 2010). He named it the ‘daedalum’ and it later became popular in the 1860s upon being patented by English and American manufacturers.

It was later improved upon and replaced by such devices as the praxinoscope and eventually modern film and television. However, the zoetrope retains its position as a large part of the origins of modern animation.

References

Needham, J., 1962. Science and Civilisation in China: Volume 4, Physics and Physical Technology, Part 1, Physics. Cambridge: Cambridge University Press

Thompson, K. and Bordwell, D. 2010. Film history.  New York, NY: McGraw-Hill Higher Education.

A page of videos

I have now completed the video page of the channel project website. I am pleased with the way it turned out, and with the methods I used to create it. I kept the page simple, with a responsive list of video thumbnails and titles which when clicked expand a video player containing the relevant video. This functionality was coded using PHP.

video player image

The expanded video player section.

PHP code for video player page

Some of the code behind the video player section.

The entire page, including the video player itself, is fully responsive and the thumbnails will flow to best fit the current screen width.

Video page at medium width

The video page at a medium width.

Video page at a small width

The video page at a small width.

 

I feel that the page has been a success overall. If I were to do a similar page in the future, I would like to include a flash fallback video for maximum compatibility, however due to the lack of flash on my own machine and the timing behind receiving the final rendered videos I have been unable to do this on this occasion. I have however encoded both mp4 and webm versions of t#every video to ensure compatibility across HTML5 video capable browsers.

The rest of the website has been completed by myself and the rest of the website team in our group, including a javascript-based image carousel on the homepage, and I have compiled the entire website together and made some tweaks to ensure full responsiveness across the site.

The final product can be seen here.

The various methods of responsive navigation

When it comes to responsive web design, it is important to implement it properly for the whole site, including the navigation bar. When on a large desktop display, this bar can afford to be a simple row of links with visual styling. However, as displays start to decrease in size it is important for it to make appropriate use of the available screen real estate.

There are multiple ways of doing this, of varying degrees of complexity. For my current channel project, I felt it was important to choose the right method of implementation for the navigation, so here I will discuss a few of them and my final decision.

The first and perhaps the easiest method is to simply center the navigation and let the navigation bar links overflow onto new lines as necessary using simple CSS. This is largely the approach I took for my personal website, although there I also moved the logo around the navigation at certain widths using media queries. This method is simple yet effective, and quick to implement. However, it can lead to a certain ‘jumbled’ aesthetic as the links may not be aligned, and it may not look very professional.

Personal portfolio menu at small screen width

The menu of my portfolio – at certain widths this approach can look a little odd.

Another similar approach that somewhat solves this issue, is to use media queries to make all of the navigation links the same width and height below a certain size, and then have them overflow as before. This creates more of a grid, with uniform cell sizes. For example, each link could be set to a half or a third of the viewport width to create two or three columns of links respectively. This creates a more professional look.

Yet another possible implementation of the menu is in a dropdown selection box. This has the advantage of being expandable and scrollable, and so being able to fit in large menus with possible sub-menus on the page without it constantly using the majority of the vertical space on the screen. It also may be familiar to many of the website’s users, as many applications use such selection items.

There are other variations that also expand out when clicked so as to not be constantly using screen space, which I feel is an important aspect. One of these is to have the menu off the side of the screen, and then have it slide in at the touch of a button.  This however has the disadvantage of using the entire vertical length of the screen when expanded.

The final option I will touch on, and the option I have implemented in the channel project website, is to restyle the menu into a simple vertical list under a certain screen width using CSS media queries, and then hide it. Then, using javascript a button is set to display and hide the menu on click. When the screen is resized back over the threshold width, the menu is reverted back to a horizontal row. I feel that this option works well in this context, as it is simple and easy to understand, and it uses a minimal amount of space on the page whilst still being easy to click/tap accurately.

Non expanded mobile friendly menu button

The non-expanded menu at small screen widths.

Expanded mobile friendly menu

The expanded menu, upon click of the menu icon.

Older posts

© 2024 Aaron Baker

Theme by Anders NorenUp ↑