Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

20 Time-Saving Tips to Improve Designer’s Workflow

Want to save some time? Of course you do! You are probably always looking for ways to do this faster and make that easier, it’s human nature! One of the best ways to save time is experience. The more experience you have, the more comfortable you are working, the more you have developed your own best methods, and with experience you know how to better avoid mistakes and disasters. So always stay hard at what you do and you will definitely save more than “just” time!

However, regardless of your experience level, there are ways to speed up the common design tasks. You should find some of these not-so-well-known tips and strategies listed below very helpful for your workflow. And please feel free to suggest more ideas in the comments to this post!

You may also want to check out the following Smashing Magazine articles:

General Workflow and Customization Link

1. Customize your workspace in design applications Link

When working, it is important to have all necessary tools and panels readily available to speed up your workflow. However, the tools and panels needed, fluctuate based on the project at hand. Adobe design programs provide several standard default workspace settings, such as Type, Web, Video, etc.

These are beneficial for a start, but customizing workspaces to fit personal and project needs can further speed your workflow. Experiment with different set-ups to find the best settings. It is best to save a workspace after working within a document for a while rather than at the beginning.

  1. While working in a document: Open, close, and reorganize panels, window layout and interface to optimal conditions
  2. Go to: Window > Workspace > Save Workspace (In Dreamweaver, the menu option is listed as Workspace layout)
  3. Give the workspace a name (ex. Mike’s Logo Project); In some cases, you will be asked to select which settings to save, if so select the appropriate items
  4. To use the layout in the future, Go to: Window > Workspace > title of your workspace

2. Customize your preferences in design applications Link

Numerous program settings are stored in the Adobe applications, including general display options, file-saving options, performance options, cursor options, transparency options, type options, and options for plug-ins and scratch disks. These preferences are just that, preferences. It is no surprise that not everyone agrees with the same preferences, so for an optimal design experience, you should customize these preferences in each of your design programs to best suit your needs.

Edit Preferences

  • Choose Edit > Preferences > General (Windows) OR choose Program Name (ex. Photoshop) > Preferences > General (MAC)
  • Preference settings are saved each time you quit the application.

Suggested Preferences to Change

  • Photoshop: number of history states, interface display, unit measure default
  • Illustrator: keyboard increment, selection tolerance, baseline shift default, tracking default, unit measure default, grid layout, appearance of black
  • Dreamweaver: code format, code hint, copy/paste, css, css shorthand, new document, browser preview defaults, validator
  • Flash: on launch default, actionscript, drawing, text, warnings, PSD & AI file import
  • InDesign: drag-and-drop text editing, dynamic spelling, auto-correct, leading, unit measure default, keyboard increment, dictionary, display performance, appearance of black

3. Combine common graphics from past projects into one document for easy use in the future Link

Design should never repeat itself, however there are certain elements that are often repeated out of necessity, such as icons, logos, symbols, etc. (particularly when you are creating a wireframe). Combine all of these common elements into one Photoshop or Illustrator document for future use. This will eliminate the search through past design documents for an icon or symbol you have already created.

File with common graphic elements

4. Learn and practice using keyboard shortcuts, then create your own Link

Sure command-C and command-V are helpful for copying and pasting, but don’t stop there. A keyboard shortcut exists for most of the common commands and if there is not one, you can create your own. The time saving ability of keyboard shortcuts is priceless.

To create your own select Edit > Keyboard Shortcuts (Windows) or Program Name (ex. Photoshop) > Keyboard Shortcuts (Mac OS). You can create different sets of shortcuts for different tasks
if desired. Browse to the command that you would like to edit and enter a new shortcut combination. Note: To enter the key combination, press the keys on the keyboard. You do not need to spell out the key names, such as Control, Option, and so on.

Resources for finding and learning shortcuts:

Photoshop Link

5. Create reusable files or templates with commonly used settings Link

In general, when beginning a website mockup/design in Photoshop, there are several things you do (or should do) automatically before you begin, such as set the size and dimensions, create guides, and create common layer folders (see Always organize layers into several folders below). Instead of creating these generic settings each time, create a template file with these settings already created.

Next time you begin to design a website mockup, set up your basics, then stop and save a version labeled “webtemplate.psd,” or any other relevant filename. Then begin every future design with that template file. You will appreciate eliminating this repetitive task the next time you design!

Photoshop template file

6. Record and use actions for repeated tasks Link

One of Photoshop’s most effective time-savers is the actions panel. It allows you to record a task or series of tasks to be used later for similar projects. As with many Adobe tools, there are a number of helpful default actions already set-up, however, the actions panel is best used when recording custom actions, many of which are project specific.

For example, if you had a series of filters and adjustments applied to an image within a design and you needed to apply the same effects to several other images, then recording the steps would allow for an exact and quick replication of the effect.

The actions panel can be very dynamic or it can be very simple, depending on your needs and experience. Follow the steps below for the basic functions of the actions panel. Then check out the additional resources listed here for further learning.

  1. Open the Actions Panel: Window > Actions OR use the keyboard shortcut, Option-F9 (MAC) Alt-F9 (WINDOWS).
  2. Create a new action by clicking the New Action button, located at the bottom right of the actions panel.
    Click New Action
  3. Once a new action is created, it automatically begins recording. If not, click the round record button, located at the bottom of the actions panel.
    Photoshop Actions Panel
  4. Proceed with applying any adjustments, filters, size changes, etc. until the desired effect has been reached.
  5. Once finished, click the Stop Playing/Recording button, located next to the record button at the bottom of the actions panel
  6. If a specific task was recorded during the action that is undesired, that specific task can be deleted without re-recording the action by selecting the task, then clicking the delete button.
  7. To play an action, select the appropriate layer to apply the action to, then click Play. Photoshop will perform the actions live on the screen, but should only take a few seconds.

Helpful Resources for Photoshop Actions

7. Use batch actions for repeating a task on a group of files Link

When using basic Photoshop actions, you must click play each time to apply the action. This isn’t convenient when the same action needs to be applied to a large group of files. This is where batch actions becomes very helpful. The batch automation panel allows for the application of an action to a folder of images or files. For example, if you had a folder of 50 images that need to be resized to 500x500px and rotated 90 degrees, it would be time consuming to apply the action individually to each file.

Rather, configure the batch actions dialog box to apply the action to all files in the folder, then Photoshop will do the grunt work and spit out all 50 images, rotated and resized.

To access the batch actions panel, select File > Automate > Batch.

Photoshop batch actions

8. Use the image processor for resizing a group of images Link

Similar to the batch actions panel, the image processor selects a folder of images or all open images and resizes and saves them to a desired location. The image processor is better for resizing images than the batch actions panel, though the same action can be performed in both.

To access the image processor, select File > Scripts > Image Processor.

Photoshop image processor

9. Make history snapshots to create comparable versions of a file Link

Photoshop’s history panel is a life-saver sometimes, however it is even more convenient to create multiple instances of the same file to be compared later. The Snapshot command lets you make a temporary copy (or snapshot) of any state of the file. The new snapshot is added to the list of snapshots at the top of the History palette. Selecting a snapshot lets you work from that version of the image.

Photoshop history snapshots

Create a Snapshot

  1. Select a state and do one of the following:
    • To automatically create a snapshot, click the Create New Snapshot button on the History panel, or if Automatically Create New Snapshot When Saving is selected in the history options, choose New Snapshot from the History panel menu.
    • To set options when creating a snapshot, choose New Snapshot from the History panel menu, or Alt-click (Windows) or Option-click (Mac OS) the Create New Snapshot button.
  2. Enter the name of the Snapshot in the Name text box.
  3. Choose the snapshot contents from the From menu:
    • Full Document – Makes a snapshot of all layers in the image at that state
    • Merged Layers – Makes a snapshot that merges all layers in the image at that state
    • Current Layer – Makes a snapshot of only the currently selected layer at that state

10. Always organize layers into several folders or groups Link

It is best practice to always label layers and organize them into manageable folders/groups. It allows for quick navigation of layers and the movement of groups of layers. For example, when designing for the web, it is helpful to have several folders, such as header, sidebar, footer, etc. If the sidebar needed to be relocated within the file, select the folder and drag the entire group to the desired location.

To create a layer folder, click the create a new group icon, located to the left of the create new layer button inside the layers panel.

Organize Photoshop layers into folders

11. Create adjustment layers instead of directly editing a layer Link

When editing images, using Photoshop’s adjustment features is a life-saver because of the expansive amount of control you have over the appearance. However, it isn’t always an exact science and you may not like the final outcome. This is where adjustment layers come in handy.

Without harming the original layer, Photoshop will apply the adjustment as a clipping mask to the previous layer or the entire document. You may apply as many adjustment layers to one layer as would like and the beauty of them is the ability to hide them with the click of a button, just like any other layer.

To create a new adjustment layer, select Layer > New Adjustment Layer > the desired adjustment

Photoshop adjustment layer

12. Right-click to select a layer Link

Simple as it sounds, a right-click or control-click (Mac), can save a lot of headache when trying to locate layers. Within a document, to select a layer without scrolling through the layers panel, hover over the object to be selected and right click. Several layers will be displayed, click on the desired layer to move to that layer.

Illustrator Link

13. Record and use actions for repeated tasks Link

Recording and using actions is common to Photoshop users, however little-known is that Illustrator possesses the same capability of recording and playing actions.

  1. Open the Actions Panel: Window > Actions
  2. Create a new action by click the New Action button, located at the bottom right of the actions panel
  3. Once a new action is created, it automatically begins recording. If not, click the round record button, located at the bottom of the actions panel
  4. Proceed with applying any transformations, adjustments, effects, etc. until the desired outcome has been reached
  5. Once finished, click the Stop Playing/Recording button, located next to the record button at the bottom of the actions panel
  6. If a specific task was recorded during the action that is undesired, that specific task can be deleted without re-recording the action by selecting the task, then clicking the delete button
  7. To play an action, select the appropriate object to apply the action to, then click Play. Illustrator will perform the actions live on the screen

14. Create custom swatch libraries Link

Color is important to the success or failure of a design. Therefore, choosing colors can be a difficult task. So why not simplify the process by only browsing through colors that are worthy of being selected? Adobe provides a number of excellent swatch books that are a good start, but even those can be overwhelming. Creating custom swatch libraries, organized by project or client, allows for better color management.

  1. Open the swatches panel: Window > Swatches
  2. Locate and create the desired swatches. Create a new swatch by clicking New Swatch, located at the bottom of the swatches panel.
  3. To add a swatch from another swatch book, click and drag the swatch into the swatches panel.
  4. Optionally, organize swatches into color groups for easier browsing. For example, group all reds and browns together. To create a color group: Select swatches to be included by holding the Command key (Control key on Windows) and clicking. Then, click the New Color Group button, located at the bottom of swatches panel. Give it a name, and click OK. Add additional swatches to the color group by clicking and dragging them into the group.Illustrator swatches
  5. Once the swatch panel has been organized and the desired swatches have been added (you can delete undesired swatches also), click the swatch panel options button, located in the upper right corner of the swatches panel. Select Save Swatch Library as ASE or Save Swatch Library as AI. ASE stands for Adobe Swatch Exchange and should be chosen if you would like to use the swatch library in other Adobe programs, like Photoshop or Indesign. If not, choose save swatch library as AI and the swatch library will only be available in Illustrator.
  6. To open a swatch library: Click the swatch panel options button, located in the upper right corner of the swatches panel. Then select Open Swatch Library and find the category, User Defined. The swatch library you created will be listed under its given name.

15. Use the “same” command to select like elements Link

A small but mighty time-saving feature, the “same” command in Illustrator allows the selection of all like elements, such as all objects with a red fill color or all objects with a 5pt stroke.

  1. To use the “same” command: Select the object with the desired characteristic. For example, if you want to select all objects with a red fill color, then select any object with a red fill color within the document.
  2. Go to Select > Same > the desired command

Also, check out the “object” command for similar options. The “object” command will select all common elements, such as all brush strokes rather than all red brush strokes.

  1. To use the “object” command: Go to Select > Object > the desired command

16. Organize elements into layers for easier management Link

Layers, another common photoshop feature, also exists in Illustrator, however it is not as widely used. The layers function similarly to those in Photoshop. Unlike Photoshop, Illustrator does not automatically place new objects into separate layers, but rather places them into sub-layers. Click the arrow next to the layer to access the sub-layers. It is important to keep in mind that Illustrator and Photoshop are different programs and each have their own purposes.

The biggest time-saving advantage of layers, is the ability to lock them, which allows for easier selection and editing. Also, layers add the ability to create clipping masks.

  1. To access the layers panel: Window > Layers
  2. To create a new layer, click Create New Layer, located at the bottom right of the layers panel. To create a sub-layer, which functions similarly to layers within layer groups in Photoshop, click Create New Sub-layer, located next to the new layers button.Illustrator layers panel

17. Use common symbols from the Glyphs panel Link

Anybody need a copyright symbol, some arrows, or a email symbol? If so, utilize the Glyphs panel in Illustrator. Many common symbols and some uncommon ones too, are listed there. Each font has its own set of glyphs, however symbol fonts such as Wingdings, Webdings, and Zapf Dingbats are the best to browse through for symbols from anything such as mail and phone symbols to arrows and circles.

  1. To access the glyphs panel, select Type > Glyphs
  2. To change the font family, browse through the drop down menu, located at the bottom of the Glyphs panel

Illustrator glyphs panel

InDesign Link

18. Create stylesheets for quick formatting Link

Stylesheets in a web designer’s mind usually means only one thing, CSS stylesheets. However, if you are working on a print project in InDesign, stylesheets will also save you hours of time formatting, just as CSS stylesheets do. You can set them up as you work, saving individual styles to be applied to other similar areas.

Styles are handled in four separate panels: character styles, paragraph styles, table styles, and object styles. To add a new style, create the desired effect, then highlight/select the style and click the Create A New Style button. To apply the style, select the text/object to be formatted and click on the new style you created in the styles panel.

To access the styles panels, select Window > Type & Tables > Paragraph Styles OR Character Styles OR Table Styles. The object styles are located under Window > Object Styles.

19. Use Data-Merge for automatically personalizing stationery, invitations, etc. Link

500 personalized invitations to be completed by tomorrow? Not a problem, if you use the data merge feature in InDesign, also commonly referred to as mail merge. You merge a data source file with your current document and InDesign automatically produces each personalized version of the file. Use data merge for letters, envelopes, invitations, mailing labels, post cards, etc.

To access the data merge panel, select Window > Automation > Data Merge.

Additional Resources for Using Data Merge

20. Vow to learn and use one time-saving tip per day Link

You can’t commit all of these tips to memory in one day, so pick one to learn everyday, or at least one per week. Do something once, ok. Do something twice, great! Do something 10 times, now that’s dedication. You can also make a note or even a full-color PDF document, if you wish, that contains some of these time-saving tips for quick reference.

Further Resources Link

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14

↑ Back to top Tweet itShare on Facebook

Michael Shelton is a web designer, developer and writer based in the United States with over 5 years of freelance and professional experience in the design field. He writes for a number of blogs across the internet and occasionally on his own website,, where his entire design portfolio can be found. You can also follow him on Twitter.

  1. 1

    I’d add use smart objects before resizing or duplicating multiple layers to the photoshop list. There’s nothing worse than having to go back and re-resize a raster image, except having to re-duplicate a bunch of layers because of one small change that needed to be made to an individual element. Smart objects are a serious time-saver for me.

  2. 2

    Best time saving : turn off your internet connection :)

  3. 3

    “stationery” not “stationary”

  4. 4

    Some nice timesaving features there, thanks!

  5. 5

    superb, very useful article

  6. 6

    great stuff – the existence of this website is fantastic.

  7. 7

    Klaye Morrison

    May 26, 2009 4:10 pm

    No Fireworks tips? I guess it doesn’t really need any seeming as it’s already phenomenally less time consuming than Photoshop.

  8. 8

    Neil Martin

    May 26, 2009 4:35 pm

    One thing that I’ve never known how to automate is resizing a group of photos. I know there’s the batch processing option, but that would then save all images to say, 800x600px wide. However, if some photos are portrait, then what I want is to resize it to 600×800. This means that I end up just resizing them manually with an action on each one instead.

  9. 9

    great tips, thank you….

  10. 10

    Grat stuff! Add this one to the mix.
    RE: number 3
    As an alternative to a single document with “generic” icons and graphics, particularly with Illustrator, simply add them to the Symbols palette so they will always be quickly accessible in all your documents.

  11. 11


    May 26, 2009 8:28 pm

    great post! I never knew the image Processor was there :P Thank you!

  12. 12

    Oh the years I would have saved if only I new about the photoshop image processor tool!! Now I do! Woot! Thanks SM

  13. 13

    ZOMG! i’ve practiced some of those before but THIS is really something different.

  14. 14

    Great tips – again thanx for your great job guys!

  15. 15

    Omigod…thank you thank you thank you! :) Did I say thank you?

  16. 16

    May 27, 2009 6:41 am

    good set of advices I can certainly benefit from this article, I think that putting a bunch of icons into a single file can make it large enough to take a long time to open. I prefer to use adobe bridge. its faster and you can browse by folders.

    In Photoshop right clicking to select a layer is fast but you can also Ctrl click on the layer and it will be automatically selected, you can also check the top left side and select auto select group or layer. I find this very useful sometimes but distracting at others. so it depends on your project or the way you work.

  17. 17

    Nidhi Agrawal

    May 26, 2009 9:46 pm

    Love the new adjustment layer tip in photoshop.. its funny how many times i go into the layer menu in each design but never explored that option… thanks SM!!!

  18. 18

    Luis Eduardo

    May 26, 2009 9:49 pm

    Great post i didn’t know about all those possibilities in adobe products.


  19. 19

    really a very helpful tips even every designer know that but did not use them a lot. but after reading this I will start to use these tips to save time.

  20. 20

    real great tips in there

  21. 21

    Excellent tips and at least two I never knew!

  22. 22

    I have been using the majority of these tips on my projects for the past few years now in various forms, dependent upon the software in some cases.

    For those new to design these are really great tips.



  23. 23

    Great tips. Why no fireworks help?

    I guess it’s only got problems that Adobe won’t sort anyway!

  24. 24

    Great tips to save time!!!

  25. 25

    Nischal Tiwari

    May 27, 2009 12:52 am

    Really Nice Suggestions for people working on WEB. Cheers

  26. 26

    Jan Kovařík

    May 27, 2009 1:22 am

    Thanks, i using most of these tips and all are useful!

  27. 27

    I have always been a firm believer in keyboard shortcuts. Long before anyone knew what they were, I read an article in HOW by a Japanese designer who recommended using them, and I have never looked back since.

    Glad to see I have been using most of these tips, but it’s an excellent list and good for all designers to see where they stand, in the scheme of things.

    This deserves a re-read, though – I see there are tips that are waiting to be learned!

  28. 28

    René Rodriguez

    May 27, 2009 2:29 am

    Nice round-up of time saving design tips. For Web mock-ups, you can also consider using Photoshop’s Layer Comp feature which works nicely. It forces you to maintain organized layers, but once you get the hang of it, it’s great. I prefer it to using history snap shots. Great article!

  29. 29

    Nice post but I do care all these things when I start my work.

    Keep posing good articles.

  30. 30

    Good article. It’s always the little, but obvious when you think about them, things that can help speed up workflow. I’ve already got it into my head to use the keyboard shortcuts, the rest of this article will definitely come in handy too!

  31. 31

    If you’re a fireworks user, I’d seriously recommend using the Styles library and adding to this regularly. One-click effects and colour/lin fills is just a dream – especially when trying to keep a style consistant across pages etc. It can become very addictive to see what cool styles you can keep creating.

  32. 32

    nice list knew a lot of them already!
    Like Landry says turning of the Internet no messengers and email and forums…
    Saves a lot of time. Same goes for just drawing it then visualizing it on you PC.
    this way its easier to adjust something.

    Copy passing layer styles is also a big time saver btw

  33. 33

    this is all common things a designer should take care…

    very basic article…

    SM, plz post something serious design stuff… this is going downward now…

  34. 34

    Really great ….and thanku very much

  35. 35

    Tom Bradshaw

    May 27, 2009 3:53 am

    Decent tips, especially the ones for recording actions – much appreciated!

  36. 36

    Really Nice Stuff

  37. 37

    Two trick every designer should know also:
    – On Mac OS X, you can customize any menu of any application by using the keyboard system preference
    – In Photoshop , use the Layout Comp palette to save different “page” or state in the same document instead on duplicating layers in many folder

  38. 38

    Don’t change the default shortcuts! That is great if you work from home on the same PC/Mac all of the time, but if you get a gig on site and in a new environment this may slow you down. It is bad enough the shortcuts are different from one Adobe program to the next, don’t make it harder.


  39. 39

    Quakeulf >:3

    May 27, 2009 4:26 am

    In Illustrator CS4:

    Make use of the new workspace to work with several images at the same time. Especially good if you are doing characters in different poses. Copypasta A LOT. Make use of the bend, twist, shear and pen-tools for maximum efficiency, and always look for methods to cut down on the effort to produce an image, especially when you have over 800 images that needs to be done in a little over a week… ;_;

  40. 40

    Darth Vinsus

    May 27, 2009 4:27 am

    wow! really awesome article, it’s very important to setup your workspace for work. thanks for the shortcuts too.

  41. 41

    Floris Fiedeldij Dop

    May 27, 2009 5:14 am

    What has improved my motivation, inspiration, dedication, workflow and saved me a lot of time, … was ditching the PC and getting a Mac Pro for the heavy lifting. Big files, enough CPU/RAM/HDD to keep things running snappy and fast, was worth the investment. A good big monitor (24″) helps you (together with dual monitor and/or Spaces) use the real estate and keep things clean and organized. Backing up is also easier for some reason. Additionally, learn how to sync, and how to remote connect .. so you don’t have the excuse you can’t work from the iMac .. or the laptop .. And of course, programs like textmate that helps you type div and tab and it’s all there, or simply programs like textexpander to help you re-use snippets, etc. Less frustration, less stress, no 1500 popups to click away every day, and no slowed down system due to anti virus bugging in every hour or so.

  42. 42

    Thanks. I will play with the record function.

  43. 43

    Dusan Vlahovic

    May 27, 2009 6:58 am

    This is one of the best articles i’ve read here, so useful! thanks!

  44. 44

    While i think this is a fantastic compilation for newer designers – i’d say most seasoned designers know and utilize these tips already.

  45. 45

    Really Cool! I’ll keep this in mind always. Thanks a Lot!

  46. 46

    Catherine Cantieri, Sorted

    May 27, 2009 7:41 am

    This is awesome advice! Tweeting it!

  47. 47

    Jacques Menou

    May 27, 2009 8:32 am

    Ehhh… a little underwhelming in terms of originality but always a good reminder.
    This site has been saving me a ton of time when I’m searching for stuff like this. It gives me search results from both Google and Twitter side-by-side. Imagine getting your normal Google results and also seeing what the community is saying (and seeing what links they recommend) on Twitter! Sweet!

  48. 48

    Lawrence Brown

    May 27, 2009 9:38 am

    I created a ‘New Client Folder Structure’ a while back, I duplicate this every time I start a new job and have a folder structure for client content, admin (passwords etc.) designs, holding page. In some of these folders I hold CSS reset templates, HTML & PSD templates for designing sites. I find this a great way to stay quickly organised and not living off the desktop or email inbox.

    I then highlight all my open projects with green, once they are complete they are turned back to normal, then archived in one folder after 3 months (if they are not a repeat job). This whole clients folder is backed up at 6 every day to my jungle disk – just to make sure the days work is never lost!

  49. 49

    Good article!

    Instead of using Photoshop’s History to capture variations of the file, use Layer Comps. All variations will be contained in the same Photoshop file, and will be there even after the file is closed and reopened. And each layer comp is fully editable.

  50. 50

    Good stuff.

    By the way, I guess you have a typo -> Vow to learn and use one time-saving tip per day

  51. 51


    May 28, 2009 6:04 am

    @Neil Martin

    File > Automate > Fit image

  52. 52

    Thanks a lot! you guys are the best!

  53. 53


    This is really usefull!

  54. 54

    Awesome list of awesome time savers!

  55. 55

    Good Day,

    in regard to the number 12 (Right-click to select a layer).
    Not many people name every layer they have, and when having a big document with a stack of layers underneath the cursor this is not very convenient.

    In case you have “auto select” turned off (this feature lets you choose the layer right away b clicking it on the image.), you could hold “ctrl” on windows and then click the layer with the left mouse button. This will override the turned off feature. Very useful and a real timesaver for me. Although this does not work if you want to select a layer that is not directly visible or is placed under a semi-transparent layer, because PS selects the top layer.

  56. 56

    Herr Kaiser

    May 31, 2009 10:26 am

    AD #9) HISTORY SNAPSHOTS – those are not meant to produce compareable Screenshots. You got Layer Compositions (if that´s the correct en-term) for this. Such Compositions get´s saved when you save the file, which doesn´t happen with History Screenshots.

    I really love Smashing Mag, but this Article is one of the poorest and i could say more than just one word about nearly every point. (For eg. #12: Strg/Ctrl Button + left-klick is the easiest way to directly select a Layer or Layer-Group)

  57. 57

    You will always find the odd German who goes onto Smashing Magazine, makes the effort and reads the whole article only to then moan about it. Don’t you have a life? Has the credit crunch not hit you strongly enough that you have enough time to spat on other people’s efforts rather than just ignoring something you don’t like and moving on? Herr Kaiser, its people like you who make Germans look bad.

    The article, by the way, is good – not everyone fell out of College pretending to know everything.

  58. 58

    Christoffer Langenskiold

    June 2, 2009 12:06 am

    Great List! Wow!
    I’d add:Get familiar with Version Cue.

  59. 59

    shane plasebo

    June 2, 2009 10:40 pm

    Is there anything for Fireworks ?

  60. 60

    What would all you web designers do when faced with this:

    You’ve been asked to optimise a group of 100 images and they are a mixture of landscape and portrait and you need to resize and optimise them all for the web. How can I do this in the most efficient way?

    Do I need separate them into two folders landscape and portrait and then run two batch scripts over them?
    What would be your workflow?

  61. 61

    Very nice! Thank you!

  62. 62

    Daniel Norin

    July 15, 2009 7:31 am

    Kuler in CS4 is nice way to manage colors in variuos projects ;)

  63. 63

    Ajmaal Firdowzi

    August 10, 2009 12:17 pm


    Thanks a million. This is exactly what I was looking for.

    I am a banker & I just bought a Mac computer with my bonus I last week. Its the first time that I am using a Mac operating computer & I didn’t quite understand how to use it properly though I am able to get familiar with the basic operations.
    I was able to find this post on Mac terminal skins in a blog levoltz, but is quite hard & complicated to understand for me. Its the first post that came across for me since I mostly use that blog for information.
    Its a good blog, but then, I found yours & its really great, this is so important for me. Although its hard for me to understand some things, I guess that this will be a fast track to get familiar Mac operating systems.

    I thank you you for this amazing post. Keep it up. I will keep in touch.

    Thanks again.

  64. 64

    If your still using Firework stop now and save us all the hassle, it is amateur and completely screws up an office work flow.

  65. 65

    This list is fantastic! Extremely helpful!

  66. 66

    Very nice and useful; thanks for introdusing the “same” command in Illustrator, i’m gonna use it, thanks a lot!!!

  67. 67

    10. Always organize layers into several folders or groups…

    This is most often ignored by designers. And it consume time for web developer to merge and reorganizing all layers, before writing css/slicing images.

  68. 68

    This is gr8 post

  69. 73

    I know one more way for Photoshop in windows. Can use “Formats Customizer” utility and hide unused file types from list ni save and open dialog.

  70. 74

    thanks for the fantastic and useful post…………thanks again.:)


↑ Back to top