ruk·si

Photoshop

Updated at 2014-10-18 13:47

This note contains tips and tricks for Adobe Photoshop itself. Other tools and extensions are listed in image tool notes. Most tips are from the web design point of view.

Learn to use "new document" settings. These are good defaults for web design.

Width/Height:
    You decide.
Resolutions:
    72 ppi (pixels/inch).
Color Mode:
    Prefer RGB Color 16 bit.
        8 bit or 32 bit should rarely be needed.
    Use CMYK 8 bit when the end product is printed.
        This will limit the color palette to colors printers can produce.
Background Contents:
    Transparent

Color Profile:
    Don't Color Manage this Document.
Aspect Ratio:
    Square Pixels.

Learn and use keybindings. This is the one most important thing that will improve your workflow. Make your own keybindings when you eel like some operation takes too long or the keybinding doesn't make sens.

Edit -> Keyboard Shortcuts
    -> Layer -> Duplicate Layer

Use pixel units. Change your Photoshop units to pixels when your end-product is digital and not print.

Preferences -> Units & Rulers -> Change all into pixels.

Use consistent light. Global light should come straight from above so it is close to the usual operating system global lightning.

Close all files.
-> Layer -> Layer Style -> Global Light
    -> Angle:    90
    -> Altitude: 45

Don't use managed color profiles. Photoshop will manage your colors but when creating websites, but you don't need that and it will just make images different color when the file is saved in a different format like JPG or PNG.

Edit
    -> Assign Profile
        -> Don't Color Manage This Document.
    -> Color Settings
        -> Working Spaces
            -> RGB: Monitor RGB
        -> Color Management Policies
            -> RGB: Off
            -> CMYK: Off
            -> Gray: Off
        -> Advanced Options
            -> Turn Off Blend RGB Colors Using Gamma
            -> Turn Off Blend Text Colors Using Gamma
View
    -> Proof Setup
        -> Monitor RGB

Remove unnecessary features. Improves performance, especially when working on large files.

Preferences
    -> Performance
        -> History & Cache -> Cache Levels -> 1
        -> Graphics Processor Settings -> Advanced Settings
            -> Drawing Mode -> Basic
            -> Disable Anti-alias Guides and Paths
    -> File Handling -> Image Previews -> Never Save
    -> General
        -> Disable Enable Flick Panning
        -> Disable Animated Zoom

Setup default layer styles. Like keybindings, it will save you time.

Layer -> Layer Style -> Any Blending Mode -> Make Default

Use groups. Groups make design files a breeze to maintain, so use groups whenever two layers can be logically summarized as a set.

Use masks. Erasing pixels from included pictures is impossible to undo and edit. Prefer applying masks to groups, not to individual layers.

Use guidelines and grids. There are multiple great extensions for generating grids, check out image tool notes for extensions to use.

Decide your color palette and fonts before starting. There are multiple ways to define a color palette e.g. Adobe Color All fonts have a voice that should match what you are communicating.

Use separate text boxes for each different type of text. Having multiple style of text in the same text box is hard to manage.

Trim your images. Don't leave empty space in exported image files.

Don't transform fonts. Never stretch typefaces, it's hard or sometimes even impossible to replicate on websites.

Exporting images as JPG or PNG: Once gain, there are great image tool to help with this.

Web graphics should be PNG with alpha.
Big images should be JPG.
Remove all shadows from the exported files.
Disable Convert to sRGB

When passing a web design to developers:

Ask if the developers want the assets in PSD or PNG/JPG.
Use minimal number of PSDs e.g.
    projectname_desktop.psd
    projectname_tablet.psd
    projectname_mobile.psd
    assets/fonts
    assets/icons
    assets/stock_photography
    assets/ui_elements.psd
Name files according the function, not the visual style of the content.
Include fonts with the project or URL the web font.
Keep everything as vectors to allow resizing.
Use layer groups.
Use global folders for all elements that are shown on top of all groups.
Keep your layers as they are, do not flatten any layers.
Name all your layers and groups.
Remove unnecessary layers.

Sources