Wanna stay up to date with all of our posts! We hate spammers so rest assure, we will only send you great content and interesting articles. That doesn't sound so bad, huh?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Everyone knows designers and developers are different breeds of people. They think differently, dress differently, speak different languages, and have their own unique cultures. More often than not they have no idea how to communicate with each other. This presents a problem when they are building a website, utilizing their individual skills, and must work together to complete the project seamlessly.
In my previous article Adobe Illustrator for Web Designers, I discussed how the use of Adobe Illustrator could be a useful tool for designers to work with and then how to prepare their projects so that they are “developer friendly”. The goal of this article right now is to encourage developers to become familiar with Adobe Illustrator’s interface so that they can receive a project file (.Ai) from a designer and be able to understand exactly what the designer is trying to accomplish. After dissecting the Ai file, the developer should have most of what they need to build and style a page. Any more unanswered questions can be worked out through universal human-to-human communication.
Unfortunately in order for this design communication process to work, you will need a copy of Adobe Illustrator or have access to the creative cloud. If it’s a one-time project, you could just do a free 30-day trial. When you open up the Ai file, you will most likely be overwhelmed by all the unrecognizable panels and toolbars, but do not be afraid!
This program is used for hundreds of different tasks, but you will be doing just one task with it so you only need a few panels and the rest you can ignore.
There are many ways to configure the workspace to make it simpler and have it work well for this. View the Illustrator Tutorial Video to see how to set up the interface optimally. The panels you will need are “CSS properties” and “layers”. You can bring both these into the project by going to the top menu under “windows” and then clicking the respective panels.
Important: In the CSS panel, there is an icon on the bottom (the one on the left) called “export options”. Click that and make sure “Generate CSS For Unnamed Objects” and “Include Dimensions” is checked.
Now that you have the CSS properties panel open and working, take a look around the design! Start clicking on things (without dragging and moving their positions of course) and see what pops up in the CSS properties panel. This should all be pretty helpful in putting together a stylesheet so that you don’t have to guess the dimensions, font sizes, and colors used. If you are still confused about how the objects are spaced, there is a little trick to measuring distances. For example, let’s say you want a pixel number for how far down an object is from the header text. You can use the rectangle tool to do this. That is found on the left side of the screen in the tools panel under a button which has an icon that looks just like….a rectangle. Or you can do a keyboard shortcut of “m” and that will change your cursor to now start creating rectangles instead of clicking on objects. To measure a pixel distance click and drag from edge to edge of the space. Without letting go of the click, notice the gray box next to your cursor. This is displaying the height and width of the rectangle to are creating and thus changes numbers as you drag.
Once you let go of the mouse, it will create a rectangle for you. You didn’t wanna create a rectangle though, you only wanted to measure a distance! So just press delete each time you create a rectangle. To get back to clicking objects, click the icon which has a black arrow on the top left of the tools panel or just press the keyboard shortcut “v”.
Another way to break down the design and shed some light on the structure of the page is to simultaneously be looking at the layers panel. This is where all visible elements in the design can be seen in a hierarchal structure. You can resize the layers panel, or drag it out to create a free-floating window, if you want to see more at a time.
If you want to select an element by finding it in the layers panel, you can’t just click where the label is. You need to click on the circle located all the way to the right of the layer label. When you do that, you will see a colored box appear on the right side. Also you will notice that the object is now selected in the artboard with the same color box surrounding it. If you want to select an object on the artboard and see where it is in the layer stack, first click on the object. Then go over to the layers panel and click the little icon on the bottom that looks like a magnifying glass (the one on the left). This will locate the layer you selected on the artboard inside of the layer structure.
Adobe Illustrator can be a great tool the help bridge the gap between designers and developers. But it is only effective if both parties are willing to cooperate and understand each other’s style of thinking. If you, as a developer, are still confused as to what the designer was trying to do, then you may need to ask them to spell it out for you.
Don’t be afraid to ask questions that may seem obvious. Just think about how obvious it is to you to include a forward slash in your closing tags. A designer would say “what the hell’s a closing tag?” You would then have to back up and explain what a tag is in HTML language. So let the designer know that you are confused by the terminology because your need to complete the project outmatches the embarrassment of not knowing the lingo. It is just as much of a responsibility for the developer to ask the right questions as it is for a designer to properly set up their design files in an organized fashion. If you need more detailed and visual instructions for how to navigate the illustrator interface within a design project, you can view my tutorial video: How to Use an Adobe Illustrator File as a Web Developer pt.1.