December 6, 2014
Explain your design process, especially on your heading typography and lighting effects.
This week’s Design Showcase had us creating a holiday e-card for the University of Florida. Having completed similar projects for my company, I had a good idea of the direction I would want to take with the messaging, and with the recent lessons in animating images/gifs with lighting effects, I had my design shaped up in my head.
Here’s how the card came out:
Initially, I looked for an image of a strand of Christmas lights that I could use as a base, but wasn’t able to find an image I liked and then decided to make my own in Adobe Illustrator. I found a single bulb and traced the image in AI recoloring it to look like UF orange and blue. After making some changes to each bulb once replicated, I arranged the bulbs in a fashion that looks like they were strewn about on a table. I connected the bulbs using the Pen tool and drawing a green line.
Back in Photoshop, I started with a canvas of 600 px by 900 px and placed a red rectangle as the background. I chose more of a Christmas/holiday red, than a cherry or brick red, but I liked the idea of harken to the brick colors of the UF campus. I drew my headline on the top and selected the font Bodoni 72 Smallcaps Book which had a nice, blocked serif feel. I entered the text “Happy Holidays from the University of Florida” and spaced along three lines, adjusting the tracking and leading to tighten the feeling.
Next, I placed as an embedded object my strand of orange and blue Christmas lights from Illustrator. I rotated the graphic so that the strand appeared to be coming in from the left side of the screen into frame. I then duplicated the layer twice to create my lighting effects. On the first layer, I created points of light on the blue bulbs, adjusting the size, intensity, and ambiance with a lighter blue. The second layer I created points of light for the orange bulbs using similar intensity and ambience, but with an orange tone. The three layers, when toggled on and off now create an effect similar to a blinking strand of lights.
Below the lights, I added a holiday and new year message with the UF logo beneath. The final touch was to add drop shadows to the elements to provide depth to the layers.
Finally, I saved each version of the lights out as a jpeg and using the skills from our animated digital advertising lesson, I used scripting to drop the three graphics into a new file. I created a frame animation, duplicating the light layers to then create five total frames that when saved as an animated gif, would look as though the lights were blinking. I left the graphic on loop so that it would continue to animate the lighting.
Overall, I envisioned the e-card being sent out either within the content/body of an email, or placed onto a webpage where users would be prompted to visit from email, social or other channels. I wanted the spirit of the card to be non-denominational and not entirely specific to one faith or belief set. I feel the orange and blue of the bulbs allowed for this effort, as did the general holiday greeting in the headline and copy.
I liked how the animation turned out. As I shared in my post from our weekly creative on lighting, I need to continue playing with lighting to get a better understanding of how it works and the effects you can create. While this graphic does work well, I would have liked to have played with the bulbs a bit more, or used an actual photo of a strand of lights, versus a vector illustration. Also, I’m not sure I got the lighting just right, but given another full day or two to play with it, I’m sure I could get the lights to twinkle just as if they were on a tree.
Animated Gif, Animation, Photoshop, VIC5325,