HTML, CSS and Javascript

After having our first web development workshop, I am excited to get into it on the course. I already have a fair amount of experience in Web Development so I thought I would post one of my on going projects.

http://www.unitydevelopment.co.uk

This is a work in progress website, but It already takes advantage of some nice HTML and CSS techniques. For example the header image is a looping video of one of the projects the company is working on which works using HTML 5 Video which is a very simple plugin using the <video src=”></video> tags.

However the main challenge for this website was to make it fully responsive (a task that I am still working on). If you look at this website on the phone you are not redirected but you are taken to the same site but with different CSS properties that look great on the mobile. This is achieved with media queries. Here you can specify screen or window size and have different CSS properties underneath. Therefore I have various breakpoints. If you go on the website and re-size the window you will see the CSS properties change and items on the page move to best fir the screen.

Animation

This week we were introduced to animation, looking initially at Pixilation which is essentially stop-frame animation of humans. Having had experience with animation programs on the computer I was keen to try some stop-motion animation.

In our seminar we were asked to create a 12 frame animation for a rotoscope. I wanted to create an animation that could easily loop so I decided to try a growing plant, which did not end up looking very good. So for my next attempt I tried to keep it more simple. This is a floating ball of ink which has the appearance of it continually dripping. This looked good on the rotoscope as it looped very well.

rotoscope

After the seminar I tried to think about stop-motion animation. Specifically one that represents a cycle. So I chose the cycle of time.

Time

This GIF loops very well. I think this is one of the best that I tried because it represents the cycle alot better.

Pixilation I found very interesting an upon looking deeper into it I found that it is still being used today for some fairly big projects. It provides a great stylistic look to a video that cannot really be shown in movies anymore which is why we see it more in music videos for example.

As these traditionally protray a story that has a beginning and end, it cannot really stick to the theme of cycle. So therefore I tired a pixilation of only my hand doing a motion that can loop well.

hand

For this task I found the best way to create these animation was to use an app rather than to take the photos with my camera and create the animation using Photoshop. This saved time and gave me more freedom using the smaller camera on my phone. If I were to do this task again I would have attempted to do a longer pixilation story that involves the theme of cycles which could produce some interesting results.

Temporal Expressions

This photographic task involved using various techniques to create images that center around the theme of cycles.

In our seminar we were shown some of David Hockney’s joiner images which he makes using his joiner technique. Stitching photos together into a collage which much more resembles photographs spread out on a table rather than a perfectly stitched panorama.

Hockney Joiner

As it is nearing Halloween I thought I would use the annual cycle of Hallows Eve to present my take on Hockney’s joiner technique.

Halloween Joiner

I like my take on the joiner image as I have used masking in Photoshop to crop out the background of the pumpkin. This way I was able to show only the organic shape of the pumpkin and still have the joiner effect be quite prevalent in the photo.

Next we were tasked with creating both long and short exposure photos.

For my long Exposure photographs I wanted to focus on the cycle of the commute. Therefore I chose to use the Bournemouth Buses and traffic in my photos. With the lights being one of the most obvious things on a vehicle a long exposure photo of such gives a great effect.

 DSC_0689                DSC_0690

for the first image, I took a 6 second exposure photo of the view whilst driving down a road. Here you can see the light streaks curl as the car gives an unsteady platform for long exposures. I think it gives some interesting results. The second image was taken from a still viewpoint as the bus had stopped and traffic moves past. We see the light streaks from the moving traffic alongside the stationary bus.

For my short exposure photos I focused on the cycle of nature. Therefore I looked at capturing a freeze frame of these cycles. I think I did this well especially with the first photo capturing the birds in flight.

 20141011_170802               20141011_170808

20141011_181215

I think that a better way going about this project would have been to pick one specific theme to stick to. I chose multiple themes to explore the ideas I wanted to, but I think one specific theme would have produced a much more unified final portfolio of images.

After Effects Motion Graphics

This is a motion graphic that I have made using key frame animation in After Effects CC. I have used a logo that I made for a company (Unity Development). I wanted to use After Effects because its a relatively simple program to create motion graphics in with a lot of features. This could have been made in Photoshop CC, but it would have taken much longer as you must produce the animation frame by frame. I have used Photoshop in this case to convert the MP4 file produced by AE to an animated GIF so it is viewable on my blog.

Alphabet Photo Collage

ABCThis photo task consisted of creating a collage where each photo represents a letter in the alphabet.

I went with the theme of ‘University Halls’ where each photo is of something from within the halls (which turned out to be a lot more difficult than first anticipated). Some of my favourites here include those in which I have used perspective to create the Letter. For example The ‘M’, ‘P’ and ‘E’ were only visible when taken from these particular angles. I have also tried to incorporate texture along with the depth techniques. For example the ‘V’ is only visible because of the stitching but is made of the same material as its background. Others I have tried to relate to the letter itself. For example the ‘T’ is a picture of a Tea bag and the ‘K’ is made from keys.

In hindsight I could have made this a lot easier for myself by choosing a different theme, and could have saved a lot of time if I took the pictures in any order rather than going through the alphabet from start to finish. However I do think I managed to find some interesting objects to take photos of and used some nice techniques to capture them. If I were to do this project again I would like to focus on one particular photo technique and stick to it for every photo. This would produce a more professional looking product and have one uniform look rather than a mess of photos. However what I have produced does have some personal touches to it which makes it both fun to look at and could make a good addition to our flat notice board.