Blog

Design Resources

  • Photoshop Presets / Settings / Keyboard Macros


    Installation Instructions
    Plugins
    1. In your Application Folder go to Adobe Photoshop CS5 / Plug-ins / Panels
    2. Copy the folders Corner Radius and guideguide inside the Panels folder.
    Presets
    In the folder called Presets, select all the files and drag them to the Photoshop icon in your dock. You'll notice that nothing happens but that's ok. If you do it again you'll get duplicates.

    Workspace
    1. With Photoshop Closed go on Finder and Navigate to /Users/(yourname)/Library/Preferences/Adobe Photoshop CS5 Settings/WorkSpaces/
    2. Then drag the file called "UI Workspace" to that folder.
    3. Open Photoshop and click on Window > Workspace > UI Workspace and you should notice the panels change around.

    This workspace is designed to work with a large monitor + a laptop screen, so things may look out of place. It's ok for you to drag things around to make it work for you but all of these panels are important so don't completely dismiss any of them.

    Settings
    On the bundle I'm sending there's a folder called Settings with screenshots of my Photoshop settings.
    Just make sure that your Preferences match each of those for better performance and improved tools.

    Keyboard Maestro + Photoshop Shortcuts
    1. Drag the Keyboard Maestro app into your application folder
    2. Open it and exit out of the welcome screen
    3. Click File > Import Macro Library
    4. Select the file Keyboard Maestro Macros.kmlibrary from my folders
    5. You'll see a screen with the button INSERT, click that and it'll import these macros
    6. You then need to enable access to assistive devices by opening System Preferences > Universal Access > Tick Enable access for assistive devices at the bottom - close out.
    Back in the Keyboard Maestro Groups you should now see a folder called Photoshop, and inside it you'll see several Macros and they keyboard shortcuts that trigger them. Open Photoshop and try them out.
    Panel Options
    Many panels in Photoshop need to be configured to show the best options. You can access these by clicking  on the top right of each panel.
    • Tool Presets Panel: Small List and Show All Tool Presets
    • Actions Panel: Button Mode
    • Styles Panel: Large list
    • Info Panel: In Panel options, tick every box
    • History Panel: In Panel Options the first 3 options should be ticked.
    PS: Keyboard Maestro requires a license to run past 30 days. I highly recommend getting it!
    PPS: Some of these shortcuts I set require a full Mac keyboard with Numpad.

  • Golden Ratio Shapes

    After a lot of googling I couldn't find any decent Golden Ratio/Spiral plugins for Photoshop, so I made these shapes.

    Download here

    To install just drag the file to the Photoshop icon on the dock and it'll add them to your shape library.

    You can flip, resize, rotate the shapes as needed because the golden ratio will always stay the same.

    The ratio (1 : 1.6) should only be applied vertically or horizontally, not a combination of both. This image shows how NOT to do it.

    This shows how to use it in web design:

  • Golden Ratio Shapes

    After a lot of googling I couldn't find any decent Golden Ratio/Spiral plugins for Photoshop, so I made these shapes.

    Download here

    To install just drag the file to the Photoshop icon on the dock and it'll add them to your shape library.

    You can flip, resize, rotate the shapes as needed because the golden ratio will always stay the same.

    The ratio (1 : 1.6) should only be applied vertically or horizontally, not a combination of both. This image shows how NOT to do it.

    This shows how to use it in web design:

  • iPad 2 PSD

    Available in black and white, portrait and landscape.

    There are 1 layer for black, another for white, hide one and show the other to toggle the colors.

    You can also change the content of the screen by copying it into the smart object, which is 1024x768 pixels.

    Download here

  • iOS Icon Template

    This template lets you design iOS icons and automatically resizes, sharpens and adds highlights. Just edit 1 Smart Object and all icons will be handled for you.

    Once you're finished, drag the PSD to Slicy and the PNGs will be automatically exported with the correct name, sizes and without the rounded corners (as they should be). 

    Download the PSD here

  • Preset Styles

    Most designers I know don't take advantage of the style pallet on Photoshop; mostly because the ones that come by default are butt ugly and designers immediately close it off.

    But preset styles can be quite useful for UI designers that often have to do similar styles over over and over. So These are the ones that I have.

    They can be used as is, or you can tweak them after applying them - it still saves time.

    • Default - no style
    • Basic Dropshadow
    • Silver
    • Button
    • 1px white dropshadow down
    • 1px white dropshadow left (useful for vertical dividers)
    • Bevel up
    • Bevel down
    • 1px white dropshadow down (stronger)
    • Silver color
    • Border + innerglow
    • 1px border

    Now here's a pro tip; you can hold Shift and click these styles and it adds them up. It'll replace things that are already set, but you could click dropshadow then hold shift and click 1px border and then you'll get an object with a border and a dropshadow.

    To make your own styles bring the effects panel, make your style and then click on NEW STYLE button under cancel. Choose a name and that's it, the style will be added to the style window.

    To install my styles you can download them here: http://cl.ly/dc862512aca51a43ecd4

    Then on the styles pannel (Window > Styles) click the dropdown menu and choose "Load Styles", then select my file and that's it.

  • Pro Photoshop Tip: Custom Keyboard Shortcuts

    Although fairly easy to find, not many people make use of custom Keyboard Shortcuts on photoshop.

    If you're already using V, B, U, X, D, ⌘D, ⌘H, ⌘A  etc you might want to expand your horizon and set shortcuts for some other commonly used actions that either lack shortcuts or have obscure or impossible to press ones.

    To do it just go to Edit > Keyboard Shortcuts.

    Here are some that I have set, which overrode some other default shortcuts I didn't care about.

    Copy and pasting layer styles is extremely useful and probably the one I use the most. You can even paste the style onto multiple layers by selecting them all. 

    • Copy Layer Style: ⌘⇧C
    • Paste Layer Style: ⌘⇧V

    And since you're going there, you might as well set these too:

    • Clear Layer Style ⌘⇧* or ⌘⇧X
    • Open Blending Options ⌘⇧F19 or ⌘⇧+ (easy to reach with your right hand)
    • Open shape color picker ⌘⇧F18
    • Change layer name (or group name) ⌘⇧0 (also easy to reach on numpad)
    • Convert to Smart Object ⌘⇧O
    • Window > Arrange > New Window (which opens a duplicate window of the same file so you can view it with different zoom levels etc) ⌘⇧N (overwriting new layer which I never use)

    Then there's Saving for Web which by default has got to have the most complicated shortcut ever! It's like ⌘⌃⌥⇧S easy for a finger contortionist but not anyone else. So I overrode the "Save As" shortcut...

    • Save for web: ⌘⇧S

    The other useful thing to do is to create an Save for Web action and assign a shortcut to it. The problem with that is that you HAVE to specify a folder, so I send it to the desktop where I can easily move it where I want.

    To create the action go to Window > Actions then click on the new icon at the bottom of the pane, give it a name, and then save any file to web to the desktop (with your favorite settings, mine is PNG with transparency) then click the pause button on the action panel, double click the action on the right side and you can assign a function key (a shortcut). I chose ⇧F15.

    And here's a list of not so well known default shortcuts that are really useful.

    • Control Brush Size with the [ ] keys
    • Control Brush Hardness with Shift + [ ] keys
    • Control layer opacity simply by selecting the layer and typing numbers 0 to 9 which go by 10% increments and 0 is 100%. If you want something in between like 13 you can type 1 and 3 quickly. Still can't find a way to do 0%.
    • Control fill opacity by selecting the layer and typing Shift + 0 to 9
    • Transform an object with the same dimensions / move as you just did by pressing ⌘⇧T (really useful for repeating actions)
    • On the toolbar, certain options have multiple suboptions, like the shape one (U) for example. TO toggle between them just press Shift + U
    • Press Shift + arrows to nudge objects 10px at a time
    • NEW! Change the layer filter by pressing Shift + + and - really handy for toggling through filters to see which ones look best.
    • NEW! Change the color of the canvas back with the fill tool by holding shift and clicking on the canvas.
    • NEW! On CS5 you can now drag an image file straight into the canvas and it'll import it as a smart object. Before you used to have to open the image on photoshop first and THEN drag it.