The title of this article might sound familiar to some of you, as I have written this article for 24 Ways in December of last year. In the meantime many new readers have arrived unaware of this article so I thought it couldn't hurt publishing it here again on my site.
Why use Photoshop?
It will probably not come as a surprise if I say that Photoshop and Illustrator are the applications that I know best, and feel most comfortable and creative in. Some people prefer Fireworks for web design. Even though I understand people's motivations I still prefer Photoshop personally. On the occasions that I gave Fireworks a try, I ended up just using the application to export my images as slices, or to prepare a dummy for the client. For some reason I've never been able to find my way in that app. There were always certain things missing that could only be done in either Photoshop or Illustrator, which bothered me.
Why not start in the browser?
These days with CSS3 styling emerging and all, there are people who find it more efficient to design in the browser. I agree that at a certain point, once the basic design is all set and defined, you jump right into the code and go from there. But the actual creative part, at least for me, needs to be done in an application such as Photoshop. As a designer I need to be able to create and experiment with shapes on the fly, draw things, move them around, change color, gradient, effects etc. I don't see me doing this with code. I'm sure if I switch to markup all too quickly I might end up with a rather boxy and less interesting design. Once I start playing with markup, I leave my typical 'design zone'. My brain starts thinking differently. More rational and practical, if you know what I mean. Trying to structure and analyze how to markup my design in the most efficient semantic way etc. When I design, I tend to let that go for a bit. Think more freely and not so much about the limitations as it might hinder my creativity. Now that you know my motivations to stick with Photoshop for the time being, let's see how we can optimize this beast.
Optimize your Photoshop workspace
In Photoshop CS5 you have a few default workspace options to choose from which can be found at the top right in the Application Bar (Window > Application Bar).
You can set up your panels and palettes the way you want starting from the 'Design' workspace option,and save this workspace for future web work. Here is how I have set up things for when I work on a web site design:
I have the layers palette in the open state, and I keep the other palettes in the collapsed state. Sometimes when space permits I have them all in the open state. For designers who work both on print and web, I think it's worthwhile to save a workspace for both, or for when you're doing photo retouching.
Set up a grid
When you work a lot with Shape Layers like I do, it's really helpful to enable the Grid (View > Show > Gird) in combination with Snap to Grid (View > Snap To > Grid). This way your vector-based work will be pixel sharp, as it will always snap to the grid, and so you don't end up with blurry borders.
To set up your preferred grid, go to Preferences > Guides, Grids and Slices. A good setting is to use 'Gridline Every 10 pixels' and 'Subdivision 10'. You can switch it on and off at any time using the shortcut Cmd/Ctrl + '.
It might also help to turn on Smart Guides (View > Show > Smart Guides).
Another important tip for making sure your Shape Layer boxes and other shapes are perfectly aligned to the pixel grid when you draw them is to enable Snap to Pixels. This option can be enabled in the Application bar in the Geometry options dropdown menu when you select one of the shape tools from the toolbox.
Use Shape Layers
To keep your design as flexible as possible it's a good thing to use Shape Layers wherever you can as they are scalable. I use them when I design for the iPhone. All my icons, buttons, backgrounds, illustrative graphics,… they are all either SmartObjects placed from Illustrator, or Shape Layers. This way the design is scalable for the retina display.
Use Smart Objects
One of the things I like a lot in Photoshop, are SmartObjects. Smart Objects preserve an image’s source content with all its original characteristics, enabling you to perform nondestructive editing to the layer. For me this is the ideal way of making my design flexible. For example a lot of elements are created in Illustrator and are pure vector-based. Placing these elements in Photoshop as SmartObjects (via copy & paste, or drag from Illustrator into Photoshop) will keep them vector-based and scalable at all times without quality loss.
Another way on how you could use SmartObjects is whenever you have repeating elements, like for example if you have a stream or list of repeating items. You could for instance create 1, 2 or 3 different items (only just for the sake of randomness), make SmartObjects of each one, and have these repeated to create the list. Then, when you need to do updates, you only need to update the SmartObject, and the update will be automatically be applied in all its linked instances.
Turning photos into SmartObjects before you resize them is also something you might consider doing. You never know when you'll need that same photo just a bit bigger. It keeps things more flexible as you leave room to resize the image in a later stage. I'm using this in combination with the SmartFilters a lot, as it gives me such great flexibility.
I usually use SmartObjects as well for the main sections of a webpage, which you need repetitively for the different pages of a site. So for elements such as: header, footer, sidebar,… It can be handy for bigger projects that are constantly evolving, and where you have to create a lot of different pages in Photoshop. You could save a template page that has the main sections set up as SmartObjects, always in their latest version. Each time you need to create new page, you start from that template file. In case you need to update an existing page because the footer, sidebar, header… has been updated, you can drag the updated SmartObject into this page. Though I wish Photoshop made it possible to have SmartObjects live as separate files, which are then linked to my different pages. So whenever I update the SmartObject the pages are automatically updated next time I open the file. The same way in how a linked file works when you place a external image in InDesign or Illustrator.
Use Layer Comps
In some situations the usage of Layer Comps can come in handy. I try to use them when the design consists of different states. For example if there is a hidden and show state of certain content. For instance, the content is showed after clicking a certain button. It can be handy to create a Layer Comp for each state. Then when you switch between the 2 Layer Comps you switch between these 2 states. It's OK to move or hide content in each of these states, as well as applying different layer styles. I find this particular handy when you need to save separate jpeg versions of each to show the design to the client, instead of going over all the eye icons in the layers palette to turn the layer's visibility on or off.
Create a set of custom color Swatches
I tend to use a separate color Swatches palette for each project I work on, by saving a separate Swatches palette in the folder of the project (as an .ASE file). You can do this via the palette's dropdown menu and choose for Save Swatches for Exchange. Choosing this option will give you the flexibility load this palette in other Adobe applications like Illustrator, InDesign or Fireworks. This way, each time I have the colors of that particular project at hand. I name each color, using the hexadecimal values.
Loading, saving or change the view of the Swatches palette can be done via the palette's dropdown menu. My preferred view is 'Small List' so I can see the hexadecimal values or other info I have added in the description.
Though, I wish Photoshop had the option of loading several different Styles palettes, each as separate palette, so I could have 2 or more of them open at the same time, but each as separate palettes. This would be handy whenever I switch to another project, as I'm usually working on more than 1 project in 1 day. Now you can add a set of colors to the palette that is already open which is not very efficient if you need to update the palette of a project separately.
Create a set of custom Styles
Just like with saving a Swatches palette, I also always save the styles I apply in the Styles palette and save it as a separate Styles file in the folder of this project when I work on a web site design or design for iPhone/iPad. During the process, when styles are added I re-save it. Each time I work on the project, I load the styles palette of that particular project. Though, here I have the same remark as with the color swatches. It would be great if we could have different Styles palettes open at the same time.
Use a scratch file
What I also find particularly timesaving, in case you are working on a rather big project, is working with some kind of scratch file. By that I mean a file that has elements in place that you re-use a lot in the general design. Think of buttons, icons, etc. that you need in every page or screen design. This is handy for both web design work and iPad/iPhone work.
Use the Slice Tool
This might not be something you think of at first, because you probably associate this way of working with *old-skool* table techniques. Still, you can apply your slice anyway you want with your way of working in mind. Just think about this for a second. If you use the slice tool, and you give each slice its proper filename, you don't have to worry about this once you need to do updates on the slice or image. Photoshop will know how the image of that slice is named and which 'Save for Web' export settings you've used for it. You can also export multiple 'slices' all at once, or export only the ones you need using 'Save selected slices'.
I hope this list of optimization tips were useful, and that these will help improve and enjoy your time in Photoshop. That is until the ultimate web creation application makes its appearance. Somebody is building this as we speak, right?