Studio Practice: Morpher: Facebook

Profile picture

This is the image that we decided would work the best as the profile picture for Facebook as an element of seriousness is needed when choosing the final image. The fun photos are for the promotion side of social media. The band decided that the profile picture and the banner should be in both blue and red. So as this photo was not shot using the coloured gels, I had to manipulate the colouring using Adobe Photoshop. The final image was presented to the band and they liked it.

Animated banner

Alongside the profile picture this is the image that is being used for the banner. The band currently have a moving image banner and would quite like to develop something based on the new branding.

Initial ideas

I started to brainstorm the different things that I could try on the banner starting fairly simply as I wasn't sure whether or not I would be using Adobe Photoshop or Adobe After Effects.

- opacity changing

- glitching

- showing the meaning of the logo

- expanding in size

- logo scrolling across the screen

The process

Taking the red photo that had been chosen to be the banner for Facebook, it was imported to Adobe Photoshop and placed on a frame animation on the Timeline. A lot of experiments took place to try and figure out what would work at the top of the social media page.

Using the Frame animation in the Timeline Window, I was able to create an experimental GIF for the banner on Facebook to see what will work at the top of the page on a continuous loop. This idea breaks apart the logo to show how each of the rectangles represent each of the band memebers and how it then comes together to form Morpher. Once this had been shown through animation, the name of the band then appears with the logo in context and moves across the screen like a continuous horizontal scroll. If this idea was to be taken as the final one, it would need to be developed so that all of the animation was much more fluent and there were no parts that paused or jolted etc.

This idea takes away the breaking up of the logo because when on a loop it became too repetitive and began to lack the impact of explaining it. Having a constant banner going across the top could look effective maybe if the word was smaller and repeated more than once so that there were no gaps throughout the whole of the animation.

I then started to try to use Adobe After Effects which is a programme I do not have much experience or confidence using. So I used a tutorial online on the basics of the programme to see if I could apply this to my own design work. I was able to animate the logo expanding and skrinking in size, showing how each section belonged to each of the band memebers and then also playing around the opacity of the text to highlight it at different points. This was a long and confusing process.

fig.1

The development then lead to the idea of having the banner appearing to be glitchy, something that as a band they visually already use and like. I had never created anything like this before, so I found some tutorials online (fig.1) and started to follow them. The tutorials were Adobe Photoshop based, relying on the timeline tool and on the frame animation setting. I had to use the original profile picture as the red could not be manipulated in the same way that a full colour photo could. I will now use the red image for the profile picture and this one for the banner.

The first part of the process was about creating layers which differed in which of the RGB channels were left on. The two layers were then moved in the opposite directions to eachother slightly so that the RGB colour differences could be made apparent. A layer of noise was also added as part of the selection of layers that will allow for the glitchy video to be made. The next part of the process was to use the rectangular marquee tool to make long and thin rectangles in various places on the image so that they could then be moved along to create a layer of even more distortion.

Wind was then created on two separate layers to make the image appear as though it was being blown in one particular way. One layer had the wind to the right and the other had it to the left, allowing for more movement once the animation begins.

Although the tutorial was really detailed in what it was showing and teaching, there were a couple of parts that didn't match up to how my Photoshop was set up and normally at this point I can't move on and just start something new. To overcome this problem on this animation tutorial, I searched alot on the internet for each of the parts that were confusing me and each of them then became clearer. I have enjoyed having to follow different tutorials because it is broadening my knowledge and confidence using all of the Adobe softwares.

The timeline window then needed to be activated and set up to create a frame animation, in order to sequence each of the different effects into a continuous loop, forming a glitch. Gradually as each of the frames were added, different layers were on shown and hid from eyes view in order to create movement within the animation. Once the gif had been created, it needed to be set to 'forever' so that it would loop around continuously. I had to export it a few times in order to pla around with the different lengths of times each of the frames were on show for, as some parts needed to be shorter than others to create the desired look I was aiming for.

When exporting the GIF, there were some settings that I needed to manipulate in order to reduce the file size to something more usable on a large number of platforms.

The developments above show the final GIF and then how it has been manipulated for use on the Facebook banner. The choice to have the eyes flash across was something that as a band they thought would look good, proving to have worked well now that it is finished.

Profile picture revised