Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

The Grue & Blog

Adobe Illustrator for Web Development

June 11, 2016
Adobe Illustrator for Web Development

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.

Web Designer vs Developer

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.

4 Reasons Why An Illustrator File Can Help You

  1. CSS properties: Illustrator has a feature where you can click on an element in the design window (a box, a text element etc.) and then you can see the exact CSS code that element has! Such as height and width dimensions, color hex #, font size/family, and any styles like a box shadow.
CSS Properties in Adobe Illustrator
  1. Multiple device designs in one project: Illustrator allows for multiple artboards (design spaces) in one project. That way, a designer can create the layouts for a page meant for a desktop, a tablet, and a mobile phone all right alongside each other. This is great for visualizing the flow of elements and how sizes may vary between the layouts.
  2. Layers and organization: If the designer has set up a “developer friendly” file, the project should be relatively easy to navigate with all the design elements intuitively labeled and organized. This will make it super clear what things are, which images are used, and where they are located in the page hierarchy.
  3. Communication notes: This is also dependent on if the designer wants to make things even more clear by including a layer (that you can toggle on and off) explaining things that you may not be able to find in CSS properties display. Something like margins or padding is a good example of where a designer may have specific numbers to communicate.

Time To Open Illustrator

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!

Exploring Adobe Illustrator for the First Time

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.

Explore the Design

Explore the Design - Adobe Illustrator

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.

Height and Width Rectangle - Adobe Illustrator

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”.

Using The Layers Panel

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.

Using the Layers Panel - Adobe Illustrator

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.

Further Questions

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.

Doc Brown Needs Help With Adobe Illustrator

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.

The Designer

The Designer is a creative specialist who has spent years understanding and practicing fine-art in a digital environment. He also makes a lot of smoothies.

The Designer
Subscribe

Comments