Join Justin Seeley for an in-depth discussion in this video Planning your project, part of Photoshop CS6 for Web Design (2012).
- View Offline
Your first step when starting a new web-based project is going to be to plan out the project itself. This means determining exactly what you're building, where it's going, and what the intended audience is going to be. This will be your driving force throughout the entire design process, everything from mockup to changing it into actual images, to converting it all the way over to CSS and HTML. So the planning stage is very important, but it can be really simple. I've got a file opened here, and this is something that I created by utilizing an application on my iPad called Adobe Ideas.
Adobe Ideas is basically a sketching application that allows me to easily just sort of draw things with my finger. This is what I've started doing for a lot of my web and application projects. I go into Adobe Ideas, I make a quick sketch, I send it out, open it up in Photoshop, and use that as a template going forward for whatever it is that I might be working on. For instance, let's assume here that I'm making a WordPress theme that I'm going to then hand off to a developer to code into PHP, CSS, and all that good stuff. This is the basic structure for the entire theme.
As you can see here at the top, I've got a header it goes all the way across the top. I'm going to have a content slider underneath. I'm going to have a row of video thumbnails beneath that. I'll have some text down here at the left, an image flush right, and then we'll have a footer down at the bottom. Now of course I would go through a lot of different things in terms of planning this out. I would determine the overall width of the document, the overall width of the theme itself, how tall the header is, how big is the slider, how big are the thumbnails, is the text farther to the left than the image, or where does the image fall in relationship to the text, how tall should I make the footer, is the footer a full width, is it just the width of the theme, et cetera.
You have to take all of this stuff into account when you're planning, but starting from a sketch like this, it's a lot easier than just trying to do it off the top of your head. And with apps like Adobe Ideas or any other type of sketching application that you can download onto a tablet or a mobile device, you no longer have to do this on paper. I call these apps the modern-day cocktail napkin, because now instead of actually sketching on a napkin, I can just sketch in any one of these programs and I can instantly bring that into a program like Photoshop or Illustrator and I can build working prototypes off of them.
It's very cool. So after I've got my basic sketch down inside of Photoshop like this, I'll start by creating a new blank document. So I'm just going to do Command+N or Ctrl+N on my keyboard to create a new document and then I'm going to start setting this up. Now I have a preset in my Presets menu called Blog Design. My Blog Design preset that I've created and saved has a width of 1200 pixels and a height of 2000 pixels. So if you want to create a document just like that, just type in a Width of 1200; a Height of 2000; Resolution can be set to 72, that's fine; Color mode should be set to RGB; and then I'm simply going to hit OK.
Once I hit OK, I've now got the basic backbone of my document in place. From here it's just a matter of determining the exact sizes of everything inside of the blog design itself and then implementing that utilizing guides, grids, and shape layers.
- Customizing a web workspace
- Decoding the mysteries behind screen size and resolution
- Coloring web graphics
- Using layers and layer comps effectively
- Working with transparency
- Creating wireframes on a grid
- Styling text
- Creating image sprites
- Optimizing images as JPEG, GIF, or PNG files
- Integrating with the rest of the Adobe Creative Suite