|
The animation shown in the video to the left was not appearing correctly - and needed resolving at the end of the previous module. As stated in last module's learning journal; After resizing and re-exporting the gif from Photoshop, the result was a transparent gif that worked correctly in the app. There is an issue with the opacity of the ghost shadow (top panel right) and the sheet ghost in the bottom panel. Both were not set to 100% opacity, so the illustration below should still be viewable through them. This is something I need to experiment with over the next week to try and resolve. If opacity of moving objects is not possible, I will need to reconsider how I go about presenting my ghost character, and how some of my animated interactions will appear and work.
I need to fine tune the transparency issues with the overlays, and decide whether my workflow needs to include AfterEffects based on the complexity of my animations. With these issues in mind, I set about testing transparency when rendering frame by frame animations directly from Photoshop. At this point in time, I was considering abandoning After Effects and working solely in Ps - since my original illustrations for print will be created in Ps. Additionally, at this time there was no option to export GIFs from After Effects - meaning the animation has to be reloaded into Ps after animating - and this seemed like a step I could skip. |
FULL COLOUR (control)
|
FILL 50
|
OPACITY 50
|
GRADUAL OPACITY INCREASE
|
FULL COLOUR (control)
Notes:
- colour fully eclipses printed illustration beneath (as expected). -no change in colour on movement. - illustration triggers animation correctly. - 10 frame movement obvious (playing at 25fps) OPACITY 50%
Notes:
- circle fully eclipses illustration beneath again - colour is paler, but still opaque - has not lowered opacity. -white/discernible outline around circle? -result: not usable option. |
FILL 50%
Notes:
- colour fully eclipses illustration beneath - colour is paler, but still opaque. -appears to be lowering saturation, rather than opacity (as appears digitally) -result: not usable option. GRADUAL OPACITY INCREASE - 0%-100% in 10% Increments
Notes:
- final test to see if any of the levels of opacity appear transparent/semi transparent - proof that what appears to be lowering is the aturation - alpha channel is not working in Eyejack (as works on digital gif). - can either be visible or invisible- no leeway. |
|
|
|
All edges to panels have a "bleed" effect - a conscious choice made when selecting watercolours/pastels for rendering the illustrations. I wanted the drawings to have a handcrafted feel despite being created digitally, and I wanted this texture visible regardless of the finish of paper I later chose to print on.
When the images were finalised, I exported them as .pngs and .jpegs with no scaling. The pages and panels were set up exactly to the specification 17x23cm of my printed pages, so I wanted no discrepancy or loss of quality when I then exported them into Indesign in order to be laid-out for print. Layers/illustrations that would be animated later were hidden for the print export - or in the case of this first page - did not exist. |
The first page that I illustrated and animated was Page 11 - with the ouija board. I chose to complete this first, as it was the only page that consisted of one singular panel, and one singular, "flat" animation. hello
Several decisions were behind this - I wanted some sort of poignancy represented at the moment which Hubert first actively interacts with/successfully contacts the humans in the story. It was originally planned as my centre page double spread when I was intending to create a 24 page book, but now existed as a single page in the new storyboard. As soon as the illustration for the printed image was complete (rendered as above) I added an extra layer, which I drew the planchette onto - ensuring that the hole was the correct size for the letters to be visible through (top right). I then exported the page as usual (bottom right) - with this layer hidden - before revealing it again, and saving a copy of the entire Photoshop document into a series of folders intended for After Effects. I always set up my folders as Import (where the photoshop file went), Export (where the final animation would be exported to ), and Project (where the Ae file itself would be saved). This allows me to quickly find, link, and edit anything as I see fit if I need to revisit it later. |
|
To the left, you can see the first pass of the animation I created. I simply keyframed the position of the planchette over the letters I wanted it to highlight, and then adjusted the paths between the movements to make them smoother.
Later - I tidied up the timing between the movements to each keyframe, and added holds and eases to make the movement more natural/jerky to mimic a natural hand movement of the planchette. The animation was set to the exact dimensions as the printed page(since I had imported the original photoshop file as a composition. To ensure everything was in the right place, I animated the movement with all of the layers visible, and then before exporting, hid all of the "printed" layers (the board, the panel, and the background" so that ONLY the planchette was visible. |
Technical Difficulties
GIF exporting
- As stated above, I now had DIFFERENT transparency issues - when exporting as a gif from After effects, when I was placing the apparently transparent animation into Eyejack Creator, a black background was appearing. (SEE RIGHT) I double checked that I was exporting with alpha channel enabled, but nothing would eradicate the background. After furiously googling solutions, I discovered a plugin to export gifs from AfterEffects named AEJuice Gif. It has been created for older versions of after effects, that offered no option to export as a gif, but most importantly - it could export Gifs with alpha channel and transparency! After testing the plugin and realising its success - my sole concern was about amount of storage it required and time it took to render. It exports not only a gif, but a png sequence. With 30 second animation, working in 30fps - this was creating 900 images. I quickly realised i could cut down the number of .pngs if I decreased the frame rate, and trimmed the composition to exactly the end of the animation - as well as shortening the animations themselves - my shorthand notes on the different test versions that I went through are below:
|
Testing - alpha channel not working on gif export direct from AE
Testing - First successful animation export. Later edited to shorter wording.
|
As soon as I had one animation completed, I added it to my first test animation (created last module) into a "Collection" on Eyejack. This allocated the same trigger to both artworks. - meaning only one QR code was needed to download both animations, and they would appear when their respective trigger images were scanned. I tested this on mine and 2 other mobile devices to ensure it was working, and then set about working on a collection for the actual book.
|
Once I had set up a 'collection' for the book (Hubert) - I could use the QR code to trigger all of the animations. I did test removing and adding different animations to the collection to see if this altered the look of the AR code. when i was certain that it remained the same for the entire collection regardless of edits made within - I screen-shotted it and exported it as an image.
With this created - I could now finalise the covers of the book (where the QR code would need to sit) - and didn't need to worry about fitting multiple QR code spaces on every animated page. |
With the this issue solved, I simply needed a small indicator that the reader could use to identify which pages they could expect an animation on. This needed to be small enough to not interfere with the panels themselves, yet standout from the rest of the illustrations. To make it clearly an add on - I created an "icon" style - using a small circle, and the avatar of a tiny ghost - to visually display that if AR was employed - ghost antics were sure to follow. I exported the icon separately from the page themselves, and added it "in post" - dropping it on top of the pages in indesign and positioning it as suited best for visibility and least interference with the grids.
What the icon means would be clearly explained to the reader on the front cover fold - alongside the QR code. |
Export 1 - Complete misalignment - but adhering to trigger image and surface
Export 2 - still compressing the file - same alignment issues persist.
Export 3 - Exported at identical pixel/aspect ratio. still alignment issues, and problems caused by the panel boundaries - see window overlapping.
Export 4 - Window removed. Everything needs to shift approx. 5mm down.
Export 5 - So close! infuriatingly - everything is around 1.5mm too low!
Export 6 - Finally! Note slight discrepancy in colours/ almost a white outline - but this assists in drawing the viewers eye to what WILL be interactive.
|
The next animation revolved around several panels, and need to directly layer on top of the printed image in order to be cohesive and successful. I had used masks and trackmattes to ensure certain elements remained in their respective panels, and had taken care not to accidentally move anything after importing the composition directly from the photoshop layers, so that the windows would remain in their original positions. However, on the first export and upload to Eyejack creator, the animation was wildly misaligned with the printed image. ( Export 1 - left)
I was unsure what had caused this, so I went back into aftereffects, reimported the photoshop layers again as a comp, and exported the animation via the plugin again, thinking that this would solve the "glitch". I noted that when exporting, a popup saying that the filesize was quite large appeared, with the options to export or compress the file. I thought this would have to do with the amount of pngs in the sequence, (I was having to export as a png sequence with alpha. 600 images. (20seconds - 29.97fps) In order to have a transparent background Upon inspecting the exported gif file, I realised it had been resized to "640". 640 what? - I wasn't sure, as I hadn't set these parameters. Upon having the same issue of alignment (see Export 2 - left), I retested - choosing to not compress the file on export. I also inspected the pixel/aspect ratio of the photoshop file setup, and the after effects canvas size - realising that they were not set to the exact same numbers. I rectified this and re-exported - This resulted in the third test video (Export 3 - left) This new export at ACTUAL size had a much better fit - but issues were caused by breaks in the panels - I went back to photoshop to tweak the original illustration layers - there was no need to bring in the middle floor righthand window. After removing the middle floor window and several other extraneous layers to try and reduce the file size, the export appeared as above left (Export. 4)
The only issue now was a TINY misalignment - everything needed to move down about 5 mm. Since the illustrations and animations were perfectly aligned in my after effects file, I decided to just attempt this by eye as it defied logic. Eventually, I got to an alignment I was happy with! Other things to note! Remembering the correct files to use - working with cloud files on photoshop to reduce usage and space save on my laptop. Already running the external hard drive as the cache/scratch disk.
|
|
For animations that involved a little more than simple appearances and fades, some problem solving was required. For the interactions on Page 6, I had the issue of what would be on the central printed panel versus how I would eclipse this in the animation to explain the story behind the smashed vase. In order to represent the idea of a change in "time", i chose to slowly bring in the panel with a wipe transition - as though erasing/rewinding the printed panel. The easy option would just be to have the "background" panel appear on the beginning of the animation, and remain there (i.e: the printed image would be completely invisible from the point of pointing the phone at the page), but I thought this looked tacky and didn't explain the relationship between the animated state and the printed state well enough. If I had to have the original printed image covered - I wanted to at least do it in a way that was meaningful.
Once I was happy with this process, there was the issue of the movement of the ghosts limbs - effective creating a small walk cycle for 2 steps, and the arms dropping the vase. Additionally, the wilting of the flowers, and the changes in the expression of the woman in the final panels sequence. In an attempt to save time, I had not drawn any of these illustrations in frame sequences (drawn each position of the movements), I worked around this in the following ways: |
Final Result and Conclusions
The final test of the animation is to the right (as you can see - it was not completed until AFTER I had actually printed the book - as the various keyframes of so many points took me much longer than anticipated) . I am happy with the wipe transition especially, as I think this successfully represents the passing of time visually to the reader. It also helps establish the harmonious relationship between the digital and the printed, and I think I have avoided either being too blank or boring. Getting the eyes and mouth (indeed, all of the panels) to line up to the printed trigger took several exports and lots of gentle nudging the animated panels pixels at a time up, down, left and right. Although the offset of the ghost in the top righthand corner panel isn't perfect, the other, more essential panels line up accurately, so I was happy to draw a line under the animation. This experience taught me that It didn't save me any time trying to avoid drawing frame by frame movements, as the resulting manipulation in after effects to simulate walking movement and flowers wilting was complicated enough that it took a similar length of time. If anything, I would have achieved a more polished final look if I had actually frame by frame illustrated these movements. Sometimes, there are no shortcuts! |
|
There were several serious issues with the initial print:
|
I had to reformat the print setup again - reverting back to CMYK colour, and supplying the pages in print-ready setup (booklet style). This meant exporting the pages from indesign "Saving as booklet" so that the page would appear in the correct layout order for printing and folding into the 16 page booklet.
After this, Adobe Acrobat Distiller is used to export a pdf from the file. the dimensions need to be set at the exact dimensions of the printed page, in order for this to appear correctly. (see screenshots of setting up this export to the left) The prints arrived back in a much higher quality; the colour profile far exceeded the facilities at university and the paper was thick, buttery, and smooth - connoting quality and professionalism. The colour profile was much brighter and clearer. Unfortunately, the orientation of the inner covers was incorrect and upon consulting the files provided, I confirmed this was an error on their part. I refrained from repeating the order, as when folding the covers the cracking persevered to a worse extent; the printed layer was actively tearing. |
IN THE FOLD?
With all of the covers in every format and print finished, I trialled a variety of folding options:
|
Things to note:
|
See above: first pass at welcome reveal after ghost has been keyframed to follow the reveal with his movement.
|
When creating the original illustration, I had already mocked up a small sketch of how the word "welcome" would drip down to become "die bitch" - the "font"/way that the letters were arranged was set up for this to be feasible.
Getting the welcome to appear gradually, as though created through touch was another story. After some research, I learned that I could create masks within the layer that had the writing on using the pen tool. I had to create a new mask for each continuous pen stroke (so any gaps in letters/ crossing of t's = new mask). Once these masks were set up, I applied the Effect>Stroke >Reveal - and set the keyframes of opacity to 100% - 0%. This meant that the letters would reveal themselves along the masks I had created gradually. I tweaked some of the keyframe so that certain parts of the writing were inconsistently drawn (nobody move their hand at exactly the same speed the whole time). I then used the position keyframes on the ghost and his arm to follow the reveal on the stroke, and applied warp mesh to smooth certain transitions, and add movement to the sheet as the arm moved. To transition to the next set of words, I created similar masks on that isolated layer, with stroke reveal (see image below) - however, I omitted any strokes that were already there (from "welcome". I then faded out the original "welcome" layer - using custom track matte alpha shape layers with only the needed remaining parts of the letters isolated to remain in place to make up the fully formed "die bitch" sentence. |
|
(Left)
See how reveal is created along the masks which form the stroke. Drips have been added at this point to follow the reveals, |
Moving forwards, I intend to continue working as a graphic designer, and the skills and focus I have developed in this project will act as an asset to my professional working capabilities, and showcase creative thinking and diverse skills in my portfolio. In the more immediate future, I need to work on creating some accent pieces to accompany my work at exhibition, and to consider how I can utilise AR/QR codes to showcase my work and the theory behind my project of augmenting narrative.
As inspiration for how AR can be used to further the experience of art, I visited the Van Gogh:An Immersive Experience exhibition currently being held at Propyard (link here). This is the second immersive Van Gogh experience that I have visited, the first being in Southbank last year (2021); which focussed heavily on physical set pieces and 3-d models/sculptures based on Van Gogh's work. This exhibition focussed on sound, visuals, projection, and AR/VR to EMBODY Van Gogh's work, and place the viewer INTO the art and the mind of the artist. Although this exhibition is to a far larger and more impressive scale than my work could ever dream, it has imparted some useful ideas for disseminating knowledge, The popularity of the exhibition is due to the relatable nature of Van Gogh's mental struggles, and the ability to relate to his human experience (much as I have been trying to stress as the root of intriguing narrative) as much as the novelty and awe of new technologies. Additionally, much of the QR usage at the exhibition was for accessing the printed panels of information on ones personal device. This allowed the user to move on/read at their own pace/not be in direct sightline of the large scale pieces of text information - allowing a more personal, accessible experience of learning. |
Above: Panel of text on display, and then in-app text explanation when scanning the QR code.
|