My website has been missing a favicon for a while (which is the icon that shows up in the browser tab), so I decided to design a logo today. Part of the challenge was to create an animated gif version that I could use as a loading image.
The result: my first photoshop animation! And with my website’s new continuous deployment pipeline powered by Amazon CodeBuild, I was able to deploy it to production within a couple minutes of pushing code.
Let’s take a look at the finished product and how I designed it with illustrator and photoshop.
The Concept
My original concept was to draw out the letters “ME” (my initials) joined together in an animation. As I built the animation, I decided to separate out the three bars of the E to differentiate it from the letters “IVE.” The static logo, without any animations, looks like this in illustrator:
A pretty simple concept. Someone has probably thought of it before, but it’s just for my personal website, so simple is good.
Illustrating frames
The next step in making the animation, with the full concept in mind, was to draw out the frames in Illustrator. For this step I used the text tool to trace out a reference and the pen tool to draw each stage of the drawing.
Next, I copied over each stage in the animation into photoscop. Each stage is its own layer, and the Photoshop timeline was configured to show one layer per frame in the animation.
Results
While overall, this animation required a decent bit of manual copy and paste work, it was pretty easy and will probably go quicker next time. I exported the animation as a GIF image and here it is. As designed, the animation pauses for five seconds at the end before looping.
The frame rate is a bit low, but it’s a pretty good proof of concept.
Favicon & loading screen
I was able to quickly drop the static version into my website’s loading process pretty quickly. Both Angular2+ and React render their app onto a static HTML element, the contents of which can include pre-loading content that will be overwritten once loading is successful. I simply exported the static logo as an SVG from illustrator and dropped it into the HTML.
<svg role="img" aria-label="Loading..." xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><defs><style>.cls-1{font-size:184.31px;fill:#fff;font-family:ArialMT, Arial;}.cls-2{fill:#3f51b5;}</style></defs><title>Loading...</title><text class="cls-1" transform="translate(11.42 193.45)">M</text><rect class="cls-2" x="164.48" y="61.62" width="71.04" height="15.36"/><rect class="cls-2" x="164.48" y="176.82" width="74.88" height="17.28"/><rect class="cls-2" x="164.48" y="117.3" width="65.28" height="15.36"/></svg>Embedding the SVG is preferable to linking to it, since the browser doesn’t have to fetch the resource. The HTML file is the first resource sent when a browser loads the web page after all, and since we’re waiting on content to load, we want the loading indicators to be available before additional content. Here the SVG is fairly simple so does not bog down the HTML.
We can also edit Illustrator’s generated SVG to make it more accessible, all you have to do is add an aria-label attribute to the SVG element.
And that’s all there is to it. I might write a blog post about my website’s new continuous deployment setup in future.