OUGD 504 - Studio Brief 2

After our session with John, in which he discussed thinking differently and doing things that we want to do, I started thinking about things that I could do working with moving images. As our second studio brief is based around Design For Web, I am going to try creating some simple gif's. This is something I have never done before, but think could be useful for my website. In order to get some idea of how this works, I am going to initially start off this process by looking online and reading about how to create a simple gif. These are the websites that I have found that will help guide me:

From reading through these pages, taking into consideration what each person is saying, I think that I can quite easily create my own gif using simple illustrator vectors. Within my Design For Print project, I have created some simple geometric illustrations that I feel could work quite well as a moving gif. What I would like to experiment with is a gif that constantly loops, without there being an obvious seam between the start and finish points. This is the object that I want to create into a moving image:

In order to do so, I have created many layers from the various lines; each line being on a separate layer. This will allow me to create a stop-motion kind of gif, in which the lines of the shape will gradually become visible and eventually create the whole shape. They will then start to disappear, hopefully returning to the start point and therefore allowing for a seamless loop.

As you can see from the images below, this is how it will work:

To create a moving gif, I need to take these layers into Photoshop. To do so, I have to export the file as a PDF, so that the layers are still separate when it is opened in Photoshop. When I have Photoshop open, I need to go to 'Window' and then 'Timeline'. Once done, this will then open a window along the bottom of the document, and when you click 'Create Video Timeline'. This automatically takes all of the individual layers and puts them into this format:

You can now click play and see how your gif will work. Each purple bar represents the time that that layer is played for, and they can be moved sideways in order to delay the start of that certain image. In order for the gif to work how I want, I need to stagger the start of the images so that it slowly builds up to create the whole image. This looks like this:

When ready, I then need to save this for web so that it will be a gif, as opposed to a static jpeg. When in the 'Save For Web' window, I need to select to save it as a Gif and ensure that the loop option is set to forever. This means that the gif will constantly continue to play, instead of only playing once then being a static image.

This is the gif that I have created first:

Although this hasn't worked completely, I do understand where I have gone wrong. What I didn't realise would happen, is when it gets to the point of the gif where the lines should start to disappear, they don't. This is because the line is already there, so when the shape without the line is placed on top, the line is still visible. In order to correct this, I am going to edit the layers in Illustrator; on the layers where the line should be gone, I have instead placed a white line. This will lay over the top of the existing line, thus covering it up. This is how my new, working gif looks:

After having put white lines where the missing lines should be, I realised that there is a much easier method of removing the lines. What I could have done would require me to shorten the length of time that the first images are played for. However, this method has still worked and is a success in terms of a first attempt at creating my own gif.