A Look at Software: Adobe Illustrator
My process to Illustrator Asset Creation
As a web designer, it is important to know how to use certain tools and software to make my own assets and designs on a needed basis. Adobe Illustrator, which is an industry standard vector graphic software, is my go-to software for making logos, video game and animation assets, and web icons. I use this software not only in web design, but in design in general with its easy-to-use tools, and workflow. With this, I have been able to make different designs of logos and icons that I can use in wireframing software and animation software.
The Tools
There are several useful tools in Illustrator. The main tools I’ve come to enjoy are the Curvature Tool, the Rotate and Reflect Tools, and the shapes. You can get a lot accomplished with these. I find these especially useful when putting a drawing on and making it digital.
For example, on my ShadeCloak project, I took a picture of my drawing draft, and imported it into Illustrator. I locked the layer the original image was on, then traced different parts of the image using the Pen tool. Here is where I traced the cloak itself:
I also used the shape and rotation tools to make the ShadeCloak’s little spark friend:
I used mainly the curvature tool to trace around the different parts of the piece. I traced around the cloak first on the second layer (with the original drawing being in a locked first layer for tracing), and on the third layer, I made the head and the legs, then on the fourth, I made the eyes with the oval tool and traced around the hair with the curvature tool as well. I put in some color as well. This is the end result of the first digital iteration of my character. I also had a blue cloaked character in mind as well:
I used these also in my Sea Dragon project a couple of years ago when I first got into Illustrator. I mainly used the reflect tool to help create symmetry between the two sides. As with the the ShadeCloak project, I put the original drawing in a locked first layer, and traced it with the curvature tool. But here, I didn’t trace all of the image, and only about half of it, as well as the dragon’s head. This is because I wanted more symmetry with this piece, and I also ran out of paper space in the original drawing as well, so I needed to add to it. I also did things differently with the dots in the digital version, and the original had more ornamentation I didn’t add. This was the end result:
Making Icons
One of the most useful uses of Illustrator in the web and app design industry is the ability to make icons, and other custom assets for the web. I made quite a few assets from scratch very easily. This can be anywhere from general web icons, to logos, to other website assets.
I made some more creative icons that could be used as web assets. For these, I actually used many of the shape tools, and manipulated by adding and removing space from them. I did use the rotation tool for the sun, and the curvature tool for the fire in the firepit icon. These took me only a little bit of time to complete:
There are also other places where people can get some free icons, such as flaticon.com and freepik.com, but it is nice to know the tools to make custom icons so they can better match what you are creating if you can’t find anything else, especially if it will take shorter amounts of time to just make your own.
Compatibility With Other Apps
The main reason using Illustrator is so easy is its compatibility to use the assets directly from Illustrator to other apps, such as the animation software Hype 4, and the wireframing software Sketch. I may make one page of all my assets on Illustrator for a project, copy the vector versions of those assets directly from Illustrator, and paste them directly into my project either in Hype or Sketch. This saves me saving individual PNG assets for those projects.
My Final Thoughts
Illustrator has helped with with a lot of my projects so far, and I understand that there may be a time where the industry software may change, but for now, this bit of vector software is what I’m going to stick with for the time-being, as it has been very useful for me so far.
Thanks for reading!
Chelsea Hansen is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web Design and Development. The following article relates to the Final Design Project in the DGM 1220 Course and representative of the skills learned.
