Tips on how to optimize your web design workflow

05 May 2011

I'm not sure about you, but I'm still in favor of using Photoshop to create of my design for the web. However, I agree that this application, even with all its never-ending feature set, is not the ideal environment to design web sites in. The ideal application doesn't exist yet, until it does it is maybe not such a bad idea to investigate ways on how we can optimize our workflow.

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

Photoshop Workspace options

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:

My arrangement of panels and palettes in Photoshop for web site design work

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.

Example with grid enabled

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 + '.

Grid preference settings

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.

Snap to pixels

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.

Shape Layers

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.

SmartObjects in Photoshop - layers SmartObjects in Photoshop - dragging from Illustrator

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.

SmartObjects in Photoshop

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.

Layer Comps to show different states Layer Comps to show different states

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.

Create custom Swatches palette

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.

Save Swatches for Exchange, as .ASE file

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.

Create custom Styles

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.

Create a scratchfile

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

slice your images

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?

Comments

  1. 1 Debbie Van der Mercken 05 May 2011

    Hi Veerle, thanks for sharing this interesting article! Didn’t read the article at 24 ways :-)
    I totally agree that photoshop is the best way to start a webdesign! Some things are very familiar as the scratch file, psd as slice tool, grid, .. but there are some psd tips that are new to me, so thanks for sharing!

  2. 2 Ben 05 May 2011

    I too have found Photoshop and Illustrator the best tools to design a website. Tried fireworks, but like yourself, found it to be a stripped version of Photoshop. 

  3. 3 Bradley Smith 05 May 2011

    There’s an alternate way to importing PSDs into other documents for common elements. There’s a good tutorial about that.

    I use it for headers, footers, and other common elements. I set up a hotkey within the app to run an action that updates the variable data set. I’ve even set up some Automator actions with a Photoshop droplet to trigger this updating across all files of a larger project. Works pretty well, even though it’s obviously not the perfect solution.

  4. 4 dmxtreme 06 May 2011

    Nice Photoshop workflow! Especially the part about using smart objects for multiple template. Never thought of it that way (the indesign way). Thx

  5. 5 shelleweb 06 May 2011

    Great article and tips, thanks :)

  6. 6 Robbie Lawless 06 May 2011

    Hi Veerle,
    What a fantastic tutorial…actually the word tutorial does it no justice at all, this includes tasty tips and masterly advice that makes one feel like they are being let in on some top design trade secrets. A pleasure to read and take on board. Thanks a lot and have a nice weekend.

  7. 7 David Galloway 06 May 2011

    Very informative!
    Thanks so much for sharing, this will be very useful for our next project!

  8. 8 George Probst 06 May 2011

    I never knew about the “snap to pixels” option on the shape tools. Thanks for the tips!

  9. 9 Dom 07 May 2011

    This are great tips, but I still prefer to use Fireworks any day. It may not have some of the features that Photoshop has (image manipulation) but then neither does Illustrator but you use that right?

    Fireworks is just so much easier to do page layouts & site layouts (across multiple in file pages).

    I hate the sheer number of layers & groups you end up with in Photoshop and I find myself spending as much time trawling through them as I do designing. Not so in Fireworks. In fact I don’t even think about grabbing objects within groups and diving into nested layers. In this sense, it’s very much like Illustrator.

    Granted the interface is a little different to the rest of Adobe’s suite but that’s because it’s originally a Macromedia product.

    I would have hoped that Adobe would have integrated all Firework’s functionality into Illustrator, or allow full integration with Photoshop (so you could edit Smart Objects in P/Shop and bring them back).

    Alas, Adobe’s support is less than great. I mean, copying a transparent object from Fireworks into Photoshop flattens it onto white!!

    There’s definitely a market for a de facto web design app. If Adobe isn’t going to make it - maybe Apple should?

    Fingers crossed someone will… 10 years in and we’re still in the same place.

    :(

  10. 10 Raziel1 08 May 2011

    the ideal application doesn’t exist yet

    It does, and it’s called Fireworks. I can only recommend you all reading the articels on Fireworks, to get an insight into it. Using Illustrator and photoshop for webdesign is pretty cracy as both application werenever ment for this kind of work. Fireworks offers features of both applications and combines them into one programm.

    Using it for 3 days will never let you use photoshop again anymore, asyou will clearly see that it is just the wrong application for doing webdeigns.

    Its like you would use microsoft word for layouting and print instead of InDesign.

    At first, i have to admit, i used photoshop just because i knew it more and just didn’t knownenough about Firework. But after 2 to 3 days serious work with it on on of my recent projects. I feel like i found the holy grale ^^

     

  11. 11 Dawood 10 May 2011

    Simple yet great insights.

  12. 12 Kalie Mitchell 10 May 2011

    Thank you so much for sharing this.

  13. 13 Gustavo 12 May 2011

    Pretty nice article! I’m a big fan of your work and I always learn a lot with your articles. Like you, I prefer to start the design in Photoshop and do not move to markup until the design is done. The downside of this approach is that it’s time consuming. We definitely need a real web application!

  14. 14 Raziel1 13 May 2011

    @Gustavo

    We definitely need a real web application!

    And again: This application is called Fireworks. Believe me, it may look strange ant first if you are used to photoshop, but after you spent some hours with it and discovered the main features, you will never use anything else again.

    It really is “the” application for web. Instead of having hundreds of layers for example, you just have one for a button. You can even tell the button how it looks when states like mouseover or click occur.

    you can then convert it into a symbol so it may be used all over you site/projekt, without having to copy all layers again. If you then discover that your button needs another color or should look totaly different. You just change the main symbol and every occurence of it changes accordingly!. You also can change every objects properties on the fly. So no need to draw a new rounded-corner-rectangle because you just want to change it.

    You can also have pages including masterpages, so that when parts of you website like header and footer with buttons are used in more than one page of your site, they are always taken from the masterpage and don’t need to be copied again and again.

    at the end, you can even link all pages and tell buttons/links to what they are reffering to, so that you can let fireworks create a preview of your site in real HTML/CSS (but just ment for preview). This is then displayed in the browser of your choice and can be navigated and used like a real site. perfect for trying out designs in real environments or showing it to clients!


    and there is so much more…..

  15. 15 Veerle Pieters 15 May 2011

    @Bradley Smith

    There’s an alternate way to importing PSDs into other documents for common elements…

    Thank you for this tip. Seems like a nice PS feature to look into.

    @Dom

    This are great tips, but I still prefer to use Fireworks any day. It may not have some of the features that Photoshop has (image manipulation) but then neither does Illustrator but you use that right?

    I use Photoshop in combination with Illustrator. I’ve been using Illustrator since its 1st version and so I’m so used to create my vector-based elements (icons, logos, illustrations…) there and it could never be replaced by Fireworks. The SmartObject placement in Photoshop and the fact that I go back and forth between the 2 apps for editing icons etc. doesn’t bother me at all as I have both apps open at all times anyway.

    Granted the interface is a little different to the rest of Adobe’s suite but that’s because it’s originally a Macromedia product.

    Exactly. And that’s why I can’t be as productive as I am in Photoshop. I loose too much time and then end up with something I’m not able to execute, and so I’m stuck. The main reason why people prefer using Fireworks for web design is because its support for multiple pages, which is a big plus, I know, but for me it’s not *enough* to convince me. The time to design stuff is way faster in the apps I know, and I simply don’t see myself investing into getting to know Fireworks… and then hearing that Adobe drops it (you never know).

    You don’t replace 18 years of experience in switching to another application by reading some articles or following a course. Getting to know a new app costs time to be as proficient as I am now in Photoshop and Illustrator.

    @Raziel1

    I can only recommend you all reading the articels on Fireworks, to get an insight into it. Using Illustrator and photoshop for webdesign is pretty cracy as both application werenever ment for this kind of work.

    They are still design applications, and I find my way in these apps to design: Illustrator for my logo and icon creations, and Photoshop for the entire web pages. I still stand by my earlier thought: the ideal app doesn’t exist yet.

    Its like you would use microsoft word for layouting and print instead of InDesign.

    I’m sorry but by claiming that it only tells me you either truly hate Photoshop and/or Illustrator, or you just don’t know how to handle them and be productive. It’s just like I said before, it comes down to personal preference, experience, productivity speed…

  16. 16 Alejandro 16 May 2011

    Wow! quite usefull tips! very nice work, man! i’ve read before some articles redacted by web designers about why fireworks is better than photoshop when you are designing web stuff, but i feel more comfortable working on ps over fw, and now you truly based some good reasons, and you fortify my sensations:). Do you use fw or just work with ps?

  17. 17 Thomas 18 May 2011

    Cheers for a great post Veerle. You have def. showed me a couple of tricks I never have used. Thanks a million, some of this will go into my own tool box.

  18. 18 Butch V. 19 May 2011

    Hi and thanks for sharing this article :)

    I’m beginning to agree with using PS as a way to begin designing website mock-ups. I started out with Fireworks but there are certain elements in PS that Fireworks doesn’t have and it makes me switch between programs every now and then (Such as dynamic filters in PS). Ive met a couple of people who mock-up in Fireworks and say that Fireworks can do alot of things that PS and Illustrator can do but I don’t see how that works out honestly.

  19. 19 Dom 19 May 2011

    I guess what we’re all saying here is there’s not enough time to learn a new piece of software. When I ran my own company I made everyone switch to Photoshop as that was our preferred workflow. After some reluctance, every designer embraced Fireworks and now would never consider a backwards move.

    Yes, you can bring elements from Illustrator into Photoshop but you can do that in Fireworks - and they remain editable vectors within Fireworks.

    You don’t have to worry about hundreds of grouped layers or Layer Comps (the 2 most annoying and time wasting workflows within Photoshop).

    You can manage symbols and master page elements very easily and they help create consistency.

    And you can have Live Effects / Filters just like Photoshop.

    My only beef with it currently is the app doesn’t talk very well with Photoshop - so copy & pasting objects between the apps isn’t great.

    I’ve used Photoshop since v.2 so it’s nothing to do with how long someone’s used a piece of software - just for me Photoshop is still an image editing piece of software and not a layout app - no matter how many features Adobe try to shoe horn in clumsily.

    All I can suggest is try to learn Fireworks as you would any other piece of software - within 2 weeks you’ll be seeing benefits.

  20. 20 Dirk 23 May 2011

    Funny how your article keeps noting that *in your opinion* Photoshop works better, yet people find themselves offended and start defending Fireworks like there’s no tomorrow :)

    Great article, I really enjoyed it. I’ve been working with Photoshop for about 10 years now, but I still discover features by watching other people use it. I’ve yet to really start using Layer Comps, which I probably will give a go fairly soon, you sold them pretty nicely there ;) The scratch file is a solid idea as well. As I write this, the realisation strikes me that the reason I don’t use the slice tool, is basically negated by using Layer Comps (complicated designs) so I might even give that a go again too!

    Might I add that use of Smart Objects comes with a slight disclaimer, especially with photos: when using Smart Objects to resize photos without destroying them, file-size can get out of hand in a hurry. I’ve ended up with files of several gigs before. This (I guess) will be an issue on slower, older computers and/or laptops.

    That said, it’s a brilliant technique that I use a great many times a day.

    Right, ‘nuff said for now ;)

    Cheers,

    - Dirk

  21. 21 Tina 23 May 2011

    Thank you for such a useful and interesting article!

  22. 22 Robert 24 May 2011

    Thanks for the inspiring article! I think that this will speed up my workflow a lot :-)

  23. 23 Yongning Liang 26 May 2011

    Awesome work!
    Thanks for sharing.

The Deck

Ads via The Deck