16

Post Your Favorite Photoshop UI Design Tips/Tricks

almost 8 years ago from , Freelance Designer

Some of us proudly refused to hop on the Sketch bandwagon, and are still using Photoshop as our main tool for UI design.

What are some of your favorite tips/tricks, actions, scripts, etc. that make your design workflow easier?

Here are some of my faves:

http://bjango.com/articles/actions/ This set of actions from Bjango are a life saver. I use them constantly throughout the day.

http://bjango.com/mac/skalapreview/ Another one from Bjango, I use Skala Preview constantly for previewing my iOS designs on my device.

https://tinypng.com/photoshop This plugin for exporting TINY pngs and jpgs is really awesome.

http://hackingui.com/design/export-photoshop-layer-to-svg/ This script to export SVGs from Photoshop has been a lifesaver too. Great for when you have a large set of icons you need exported out. This does it automatically within seconds.

http://css3ps.com/ I dig this free plugin for generating CSS from shapes and layer styles. Saves a ton of time.

Your turn! Which Photoshop hacks make you a happy designer?

23 comments

  • Dirk HCM van BoxtelDirk HCM van Boxtel, almost 8 years ago

    I hear Bohemian Coding have a stand-alone Photoshop plugin that works miracles. Name eludes me.

    6 points
    • Cristian MoiseiCristian Moisei, almost 8 years ago

      https://itunes.apple.com/us/app/sketch-mirror/id677296955?mt=8

      0 points
    • Evan DinsmoreEvan Dinsmore, almost 8 years ago

      That plugin seems to break my custom keyboard shortcuts and workspace layout. Advanced type options, certain tools, and all sorts of other things have gone missing. And seems to make PS crash more often. :(

      (In all seriousness, can we ever have a discussion about Photoshop on DN without it being immediately related back to Sketch? There's nothing in the title about Sketch. Nothing bashing Sketch. Nothing asking for opinions on design tools. Just some simple PS tips. Sketch fans are starting to sound like Jehovah's Witnesses around here.)

      7 points
  • Karan Worah, almost 8 years ago

    http://www.pngexpress.com/ has saved me a ton of time in naming, exporting and segregating assets. Makes it a breeze to define specs in an understandable way.

    4 points
    • Gabriel LovatoGabriel Lovato, almost 8 years ago

      +1! PNG Express has saved me literally hundreds of hours of exporting and speccing. Also, fast support if you tweet at them (even with bugs)

      0 points
  • Cristian MoiseiCristian Moisei, almost 8 years ago

    I have a few recommendations:

    • instead of Skala Preview, you could use either Photoshop Canvas or Adobe's own tool (requires CC2015). They are much more reliable and do not require a tool on your mac.

    • I use a script to export previews whenever I need to compare major changes or keep track of what I'm doing. It saves a JPEG to my desktop with CMD SHIFT J.

    • I have another script which creates central guides and I have now added it to the Event Manager whenever I create a new document.

    • the Event Manager will also replace the default Background layer with a white Fill layer so I can change that later and keep the background filled even if I resize the document.

    • I disable menus I don't need. PS has a lot of tools in it, some of which I almost never use (like 3D, or tools for which I know the shortcuts). You can disable these in the Edit > Menu > Application Menus section and still come back to them later (a Show All option will be added).

    I made a post about this a month back but it turned into a conversation about performance. You can still get my scripts and shortcuts there.

    https://www.designernews.co/stories/49437-the-definitive-guide-to-living-with-photoshop-as-a-ui-designer

    2 points
    • Marc EdwardsMarc Edwards, almost 8 years ago

      instead of Skala Preview, you could use either Photoshop Canvas or Adobe's own tool (requires CC2015). They are much more reliable and do not require a tool on your mac.

      Please make sure any comparisons with Skala Preview compare it to version 2, which now has USB support and lots of new stuff. It’s far more reliable. Also, I think Skala Preview is the only one to offer iOS and Android device previewing?

      3 points
      • Cristian MoiseiCristian Moisei, almost 8 years ago

        Does it work without the mac app now?

        0 points
        • Marc EdwardsMarc Edwards, almost 8 years ago

          Nope.

          The Mac app is the reason many features exist:

          • USB transfer.
          • Sending PNG, PSD, AI and PDFs.
          • Resending on save.
          • Sending the clipboard automatically.

          None of those would be possible if we didn’t have a Mac app. The end goal was also to ensure we had great device preview for our own design tool we’re working on.

          1 point
          • Cristian MoiseiCristian Moisei, almost 8 years ago

            I think the problem is conceptual. You don't need to send PSD, PDF, PNG or resend on Save - you need to see what the design you're working on looks like on a phone.

            The approach Canvas and Adobe's tool is taking is to show the current artboard in realtime, without the need for a cable or a mac app. Just connect it and do your work - the latest version of it will always be on the phone (it takes 1 or 2 seconds to update after every change).

            Another problem with the mac app is that it's not available on windows, whereas these 2 (and Pixl Preview on android) work directly with PS and windows users can have them too.

            I'm sure you've gotten used to Skala Preview by now but give these a shot and see if they don't make more sense.

            0 points
            • Anthony Collurafici, almost 8 years ago

              Pssst .. He made Skala

              11 points
            • Marc EdwardsMarc Edwards, almost 8 years ago (edited almost 8 years ago )

              I think the problem is conceptual. You don't need to send PSD, PDF, PNG or resend on Save - you need to see what the design you're working on looks like on a phone.

              I agree, but not everyone uses Photoshop, and even those using Photoshop may not like the performance hit it can have by updating live (more noticeable on slower Macs).

              Supporting dragged files means Illustrator support. Supporting clipboard sending means iOS Simulator support and Sketch support.

              It’s also worth noting the timing of our decisions — we started work on Skala Preview in 2011.

              The approach Canvas and Adobe's tool is taking is to show the current artboard in realtime, without the need for a cable or a mac app.

              Adobe Preview can work via USB, which is essential in many situations where the Wi-Fi network is locked down and ports are blocked.

              Adobe Preview does need a Mac app, it just happens that the Mac app is Photoshop itself. :)

              Another problem with the mac app is that it's not available on windows

              That’s definitely a fair point. We considered all options when we started work on Skala Preview, and decided the Mac app gave our customers the most flexibility, but as you’ve mentioned, that means no Windows support.

              1 point
  • Heidi Dong, almost 8 years ago

    Griddify http://gelobi.org/griddify/ is great for quickly establishing grids.

    1 point
  • Marc EdwardsMarc Edwards, almost 8 years ago (edited almost 8 years ago )

    Thank you for the links, Javin!

    I like Photoshop secrets as and the Graphic Design Stack Exchange can have some good tips as well.

    1 point
  • Julian CJulian C, almost 8 years ago

    Distribute layers horizontally — http://morris-photographics.com/photoshop/scripts/distribute-horizontally.html with shortcut Control+Option+Command+H

    Distribute layers vertically — http://morris-photographics.com/photoshop/scripts/distribute-vertically.html with shortcut Control+Option+Command+V

    Using these scripts solves this: http://graphicdesign.stackexchange.com/questions/16152/how-to-distribute-an-equal-amount-of-space-between-each-object-in-photoshop

    1 point
  • Rakesh KRakesh K, almost 8 years ago

    Here are my tips for iOS UI design in Photoshop: 30+ tips to improve your iOS design workflow (in Photoshop)

    1 point
  • Bruno BarrosBruno Barros, almost 8 years ago (edited almost 8 years ago )

    The TinyPNG plugin now works kind of natively on CC 2015, like Adobe stated here: https://medium.com/photoshop/introducing-export-options-for-photoshop-7e8b58207150

    I mean, the compression technology used on TinyPNG and others (like ImageOptim and ImageAlpha) is now part of the Photoshop PNG-8 export.

    That said, I really recommend PNG Express (http://www.pngexpress.com) as the best asset exporter on the market. It's really reliable and fast.

    1 point