Every website should have a logo and my brand is no exception. I’ve been meaning to have a logo created for me for so long. The one I’m using as a .ico is from a site that sells pre-made logo but is not exclusive. That’s before Fiverr.
Now for the first time, I’ve ordered a $5 logo (actually charged $7 including Fiverr’s fee) for my website. The package is great. Two minimalist logo with source and unlimited revisions.
I received the delivery a day before the due date which is great. It looks like this:
These are actually fantastic! I like them although I specifically said in my request to avoid using an obvious shape of an ice crystal but still open to ideas. I have a few request revisions though. They said to wait due to weekend.
My revision requests are simple: positioning of the logo to the left, color change of the slogan and removal of curly braces on top and bottom of logo 1 as well as changing of braces to square or curly brackets on logo 2.
I thought those are simple enough revisions but I only know how to use a bit of Photoshop. The source file sent is a .ai file which turns out to be an Adobe Illustrator file.
After some research on the difference of Photoshop and Illustrator, I figured that Illustrator is a vector file editor and I should be able to use my new-found skill in SVG with it. I have an idea about the crystal in the logo. I would like it to spin on its axis.
After some tinkering with Illustrator and a quick search on how to rotate a path, I came up with the logo above. An animated SVG logo made by myself!
Outlining the steps, this is what I did:
- Regroup the layers to a more meaningful groupings like logo name, slogan, the “X” in the ice crystal, the paths I planned to spin, etc.
- Rename the layers. This will be used as id attribute in the exported SVG.
- Take note of the coordinates of the exact center of the ice crystal. This will be used in the transformation in SVG. Zooming to a few thousand with the rulers shown and a couple of guides in Illustrator made it easy.
- Export to SVG with Artboard option on to retain the margin rather than being cropped to the edge.
- Add the transformation code in the SVG group identified by the id (layer name) set in Illustrator.
- Uploading to WordPress requires a plugin called SVG Support. Otherwise it will complain of security issues.
The second logo did not go to waste. I’ve edited it retaining the actual logo and used it for my other blog site: https://codingwitness.com. I think it’s perfect because that logo looks like an eye for “witness”. Animating this logo is challenging since the ice crystal is a single path in Illustrator. I had to separate them logically (using scissors tool and joining the objects in Illustrator) and do the same steps above. I used the same slogan.
I think it’s nicer than my logo here. But will keep it this way until I receive my revision request. Not sure if I will use it but I’m still open for ideas.
By the way, the “Coding Witness” part above is my own doing. I transformed the text to outline to be able to change fill color and stretched out the “C” and “W”.
The animation also uses a “trick” to add some delay in between repeats by setting the
values attribute of
animateTransform combined with a longer
dur as follows:
values="0 74.52 44.2;360 74.52 44.2;360 74.52 44.2;360 74.52 44.2;360 74.52 44.2" dur="15s"
The trick is repeating the 2nd value (the
to attribute) a couple of times making the animation seemed at pause. I got this technique by dissecting the example here (which does not explain a lot why the trick worked): http://jsfiddle.net/viphalongpro/mzz08e31/