Join Justin Seeley for an in-depth discussion in this video Creating developer-friendly files, part of Illustrator CC for Web Design: Core Concepts.
- View Offline
- Now matter what circle you run in, whether it be the designer circle, or the developer circle, or if you're somewhere in the middle, like myself and you consider yourself to be a hybrid. Chances are you heard that old joke where everybody is always making fun of each other on the other side. Where designers can't make anything functional, but developers can't make anything look good. It's that constant back-and-forth that you have between those two sides. I think that most of that stems from the lack of communication, and we as designers can help bridge that gap by communicating better with our developers.
It starts by creating what I call a developer friendly file. In this movie, I'm going to show you exactly how I do that inside of Illustrator. I have open here a mock-up for an app that I've been working on. What I want to do here is I want to sort of organize this in such a way that it makes sense both to me and to the developer. In order to do that, I have to do some serious rearranging, grouping, and renaming. For the most part, we're going to be working inside of the layers panel. If you don't have the layers panel out on your screen, it's most likely docked somewhere over here if you followed along with the work-space tutorial earlier.
Go ahead and just open that up so that it's on screen. I'll just keep my onscreen like this, so you can see it. Basically, what we want to do is start to go through here, and we want to group like object together first and foremost. I'm going to come through, and I'm just going to select something like order now and the green background behind it. We're going to group it with command G. Same thing for the view menu over here, command G. For the logo elements, I'll select all of these that's the text, the two green bars, the word Parmigianos, and also the hat, which looks like this. We'll group all of those together.
Then, the background should be all by itself. That's good. The background should stand on its own. Good. I've all ready cleaned up a lot, because I got all these groups over here. What I'm going to do now is go through and rename the groups. In this case, this top one right here, the red button, that's going to be the view_btn. This one is going to be order_btn. Now, why am I naming them these? First of all, I'm keeping everything in lowercase letters. I'm also making sure that most of these sort of go together with an underscore, no spaces or anything like that.
Why? When a developer is creating something called CSS classes, these are the general names that he can use for those CSS classes. The same thing for this right here. Let's go ahead and double-click. I'm going to call this logo.png, that way he knows that that's the file format that I want this image saved out as. Finally, for the background here let's save this as bg_tile.png. For this, I'm just going to call this body, because that's the overall body, the background of this app.
What we're going to do is now we're going to start developing a layer structure that helps this along. What I'm going to do now is I'm going to create a new layer here, layer two. We're going to call this header. Create a new layer here, and we're going to call this footer. I'm going to create, actually no. We're not going to create another layer, we're just going to rename layer one. We're going to name this one content. We're going to put that in-between the header and footer. Actually, let's move header to the top, footer to the bottom, and content in the middle. Something kind of like that. Now, I've got header, content, and footer.
Now, I don't have anything for my header or footer content right now. Let's say that I needed a title bar across the top, or a row of buttons along the bottom. That would be the header and the footer. I now have places to put those. I'm also building the basic structure of a website right here inside of my layers panel. For instance, if you were building a blog, rendering, or something like that, a header, a footer, a content area, you could also build a layer for a side bar. You could build out layers for something like a slider. Anytime you have a big block of content, I think that that big block of content deserves to be on its own layer.
You name these things in such a way, that it's easy for the developer to understand exactly what they are, and where they should go. Then, inside of the layer, you work on grouping liked objects together. Things that are going to be one single piece on the website or inside of the application, and you name those according to what you want them to be. In most cases, things like rectangles and text can be recreated with simple html and CSS. You just have to give them names that are relatively similar to what a developer would write inside of a CSS or html document.
Certain things can't be produced in html and CSS, this graphic for instance. You want to name that something like .png, so the developer knows exactly what file format you would want that particular image to be in. That's all going to come with time. You're going to learn exactly what that means when you need to use it, how that works over time. You have to learn the basics of some of these things like CSS and html in order to understand exactly what your developer is needing from you. Now, if you're a coder all ready, you know all of this stuff. I'm just given you a mechanism to make yourself a little bit more organized.
However, if you're just getting started, and you're trying to learn all of this stuff, then my suggestion is to reach out to a developer or go onto Lynda.com and find some of our web design fundamental courses, learn some of this terminology, and then use that terminology to help you better organize your files. It'll make it a much easier experience for you and also a much more enjoyable experience for you and whomever you're working with.