Join Justin Seeley for an in-depth discussion in this video Creating a developer-friendly file, part of Photoshop CC 2014 for Web Design.
This movie is going to be all about creating what I call developer-friendly files. And this means, basically, we want to be able to hand off a file to our developer that really conveys everything that we want inside of it and contains a lot of information that's easily read and understood. And so, I'm going to bring out my layers panel so you can see exactly what I'm talking about here. This is the finished mock up of the design that we're going to be creating throughout this course. So, if you haven't seen it already, there it is. You'll also notice that my layers panel isn't like a normal layers panel.
I've got everything organized into each individual section. Like the header, the welcome section, about us, portfolio, contact us, footer, everything basically that corresponds to the navigation or the sections that I've created in the document itself. And so, that is step number one, getting yourself organized, every single piece of your mock up should go into some sort of group or folder, that way it's easily recognizable and you can always get to where you need to go. Now, when I'm inside of something like the header for instance, what I might want to do is at least learn a little bit about how developers work and the types of things that they're looking for, so that I know what to name my layers to make a little bit more sense.
For instance, a menu. It's not just going to be called menu. Chances are, in the CSS code, it's going to be called something like .menu for a div class. So, maybe, I rename this layer .menuul, for menu un-ordered list. And that way they know to style this A, as an un-ordered list and it's a menu component. Then we've got here the hover state. That doesn't necessarily mean anything to the developer so we could actually put, in parenthesis, only for rollover.
Something like that. The logo, you'll learn a little bit later on why we would want to append a file extension to this when we talk about the Adobe Generator. But, in general, what I would do is just tell the developer hey, I need this as a .PNG graphic for instance. Then, I would just go through my file, piece by piece, making sure that I have everything clearly defined as to what I want, and how I want it. Use the layers panel as sort of like a note taking device, so that when your developer gets this comp, they have a great understanding of what it is you're doing, what it is they need to do and everybody can be on the same page.
So, organization first, communication second. That's what translates into a developer-friendly file.
- Why use Photoshop for web design?
- Decoding the mysteries behind screen size and resolution
- Giving your website a purpose with a content strategy
- Customizing a web workspace in Photoshop
- Designing responsively
- Creating wireframes on a grid
- Choosing colors and fonts
- Developing a UI kit with Photoshop
- Assembling a page mockup
- Creating image sprites
- Optimizing images
- Integrating with the rest of the Adobe Creative Cloud