18

The definitive guide to living with Photoshop as a UI designer.

over 4 years ago from , http://meet-cristian.com

PS is a 25 year old jack of all trades so it is to be expected that it won't exceed at any one thing. Let's see if we can put our minds together and create a comprehensive pool of knowledge and resources aimed at making it less of a pain to work with. Here's what I know:

  • Scripts. You can get PS to do a lot of cool stuff with the right scripts - I'll attach the two I'm using. The first one saves subsequent JPEG previews on the desktop and I use it for comparing variations of a design or just to get a basic preview. I have it assigned to CMD+Shift+J; You'll have to change the save path before using it.

The second one (assigned to CMD+Shift+>) will create a vertical and a horizontal guide through the document's centre.

  • Extensions. There are loads of extensions out there and I keep hoping one day I will find a truly great one. I use PSD cleaner from time to time and have, at some point, used ColorKit, SocialKit and Random User Generator. They are all good but because of bugs and limited functionality, I decided I was better off doing the work myself. One place I frequently visit is http://madebyvadim.tumblr.com

  • Performance. Performance in PS sucks and with files getting larger and more complex, it will only go down. If anyone has any suggestions about improving this, you are welcome to post them below. I attached my configuration. (i7 4.0, R9 M295X 4GB, 16GB RAM, 1TB Fusion Drive). https://goo.gl/yska8X

  • Your Workflow. Perhaps the best way to tame PS is to stay organised and find a way past its annoyances. My first recommendation is to use Smart Objects whenever possible - they offload the drain on resources and have the added benefit of not having to update every single instance when you need to make a change. Creating separate instances is also easy with 'New Smart Object via Copy'

Linked smart objects can also limit the instances of repeat elements (such as a header) across several files.

We all use shortcuts, and my most recent and useful discovery is that the layers panel can be controlled. You can assign shortcuts to rename layers/groups, expand groups and (through BTT), even navigate through layers.

My scripts and shortcuts: https://goo.gl/2UXsOq

__ Now, what do you guys have to add?

38 comments

  • Marc EdwardsMarc Edwards, over 4 years ago

    If anyone has any suggestions about improving this, you are welcome to post them below.

    The recommendations I have are:

    • Under Preferences → Performance, click Tall and Thin.
    • Under Preferences → Performance, set the number of history states to 50 or lower.
    • Work predominately at 1×.
    • In the layers panel fly-out Panel Options menu, set the layer thumbnail size to None.

    Having no layer thumbnails is a huge boost. Working mostly at 1× will give you many benefits, including smaller files, better performance, and less memory usage.

    My first recommendation is to use Smart Objects whenever possible - they offload the drain on resources and have the added benefit of not having to update every single instance when you need to make a change.

    Smart Objects are great, but they have some bad characteristics — Smart Objects created in Photoshop are rendered at their native size. This means that if you scale a Smart Object, it will be bitmap scaled up or down, even if your Smart Object was built from vector shapes initially.

    That’s ok in some cases, but it can cause issues if you’re trying to build for lots of pixel densities.

    My scripts and shortcuts: https://goo.gl/A74Kbj

    Thanks. Here's all mine: http://bjango.com/articles/actions/

    And my design workflow: http://bjango.com/articles/appdesignworkflow/

    18 points
    • Cristian Moisei, over 4 years ago

      Performance recommendations: I already have the layer previews disabled, history set to 25 and custom cache values.

      Working at 1x is not an option on retina screens however and they are quickly becoming the standard. For a basic web project I work at 3840 x 2160 which is a horrible idea for performance, but my only choice - since PS is raster based.

      I was referring to using Smart Objects instead of groups where possible: imagine a card based design, where each card is a smart object - you won't need to scale those after you created them. Vector smart objects are also an option if imported from AI, meaning you can scale icons later on.

      Thanks, I'll have a look.

      1 point
      • Marc EdwardsMarc Edwards, over 4 years ago (edited over 4 years ago )

        Working at 1x is not an option on retina screens

        I'm not sure I agree with that. If you’re building for 3× (Retina HD, iPhone 6 Plus) and 4× (some Android devices), working at 1× becomes even more crucial. It means everything you build can scale to exact multiples at the larger sizes.

        Working at 2× breaks that for 3× and 1×.

        Vector smart objects are also an option if imported from AI, meaning you can scale icons later on.

        Unfortunately, Smart Objects from Illustrator have other issues — no gradient dithering, terrible antialiasing, stray pixels and other problems.

        More info here: http://bjango.com/articles/smartobjects/

        3 points
        • Daniel GoldenDaniel Golden, over 4 years ago

          How do you scale a psd from 1x to 2 or 3x and have layer styles scale with it?

          1 point
          • louie solomonlouie solomon, over 4 years ago (edited over 4 years ago )

            When you scale an image using Image > Image Size, by default the effects will scale. If they don't, make sure that "Scale Styles" is checked within the Image Size dialog box (it's under the settings icon, top right).

            3 points
            • Marc EdwardsMarc Edwards, over 4 years ago

              +1

              There’s a few other things that don’t scale, like mask feathering, but those can be scripted. I’ve thrown them all into actions:

              0 points
      • Michael AleoMichael Aleo, over 4 years ago (edited over 4 years ago )

        I disagree that retina is quickly becoming the standard. I'd be willing to bet retina is less than 5% of all Mac sales.

        1 point
        • Braden HammBraden Hamm, over 4 years ago

          He is probably referring to retina iPhones and iPads (which there are a lot of), not just Macs.

          0 points
        • Mike Wilson, over 4 years ago

          You kidding me? You see the new Macbook? Very soon retina will be the only option.

          1 point
        • Cristian Moisei, over 4 years ago (edited over 4 years ago )

          There is only one non-retina model in the Pro line and at half the specs and only £100 cheaper, I doubt it sells that well.

          There are also other high end computer makers that include high dpi displays.

          The question however is not about whether websites should be optimised or not (that's a no brainer: YES!), it's about the designer working on a retina screen.

          Here's what a 1x image looks like on a 2x screen (that's 1920): 1x

          0 points
          • Marc EdwardsMarc Edwards, over 4 years ago

            Here's what a 1x image looks like on a 2x screen (that's 1920):

            Zooming to 200% gets it to the correct size.

            1 point
            • Cristian Moisei, over 4 years ago

              Zooming to 200% gives you half the resolution.

              0 points
              • Marc EdwardsMarc Edwards, over 4 years ago (edited over 4 years ago )

                Yes. That’s 1×. That’s what you want!

                In the same way wireframing helps flesh out concepts, building at 1× helps flesh out view and asset sizes. It means every single thing in your interface will always be snapped to the pixel grid for the 1× size, which is sometimes a technical requirement, but also a good idea — if nothing else, it means you’re working with whole iOS points, OS X points, Android dp and whole CSS pixels (which aren’t display pixels, they’re an abstracted unit). Working at 1× means there’s no need to remember to keep positions and sizes and layer styles to even integers (0, 2, 4, 6, 8 etc). And it’s so much faster. Photoshop uses far less RAM and is snappier at 1×.

                That means everything you build will be perfectly aligned to the 1×, 2× and 3× grid.

                If you build at 2×, you’re only building for 2×. 1× and 3× will likely have issues and need to tweak for each size.

                3 points
  • Benjamin ChristineBenjamin Christine, over 4 years ago (edited over 4 years ago )

    I can use PS really efficiently and know all the shortcuts off by heart. Its a great product but haven't found the scripts and extensions to be of any good.

    Sketch had been a real eye opener for me and have been impressed with all the plugins they offer. Some really smart ones.

    Would love to see PS transform and adapt their product making it more community focused. Your points about the performance is a real issue and sketch really nails that.

    Also I think price is an issue for PS too. But hey its got 25 years of experience behind it which is impressive and I couldn't live without it. It makes me feel secure

    4 points
    • Cristian MoiseiCristian Moisei, over 4 years ago

      Sketch can't come close to the power and features PS is offering. It's also not available for windows, which becomes a huge problem when working in a team.

      I love how fast it is and the fact that it's vector based but I don't consider it a real option.

      4 points
  • Edwin de JonghEdwin de Jongh, over 4 years ago (edited over 4 years ago )

    I would keep an eye on Project Recess: http://photoshopfordesign.com/

    3 points
    • Cristian Moisei, over 4 years ago

      I should watch the MAX conference - thanks for the heads up. So far Recess looks like the same messy, let's cram some more features into our software and see what sticks' approach Adobe has always used, but I'll wait until it's live.

      2 points
      • Edwin de JonghEdwin de Jongh, over 4 years ago (edited over 4 years ago )

        I had the pleasure of sitting with some people from the Photoshop UX team roughly a year ago, and I think they're definitely trying to gear Photoshop more towards a UI design friendly interface, or at least a UI-design specific overlay as is going to be the case with Recess.

        They seemed super passionate about the segment of their userbase that is UI designers, so I wouldn't give up on them yet.

        0 points
        • Cristian MoiseiCristian Moisei, over 4 years ago

          I assume you have no info on any timeframes. I love your website by the way. (despite it not being retina ready.)

          1 point
          • Edwin de JonghEdwin de Jongh, over 4 years ago

            No info unfortunately, no. Thanks! It's actually almost 1,5 years old by now, working on a new (retina-ready) portfolio at the moment.

            0 points
      • Charles PearsonCharles Pearson, over 4 years ago

        In fact Recess is a response to that very problem -- we're trying to create much more refined focused (and ultimately pleasureable) experiences. And bc the front-end is html5/css we're building some nice features and flows that would be super difficult to implement in PS.

        Soon'er'ish you'll get to be the judge of the project. :) Let us know what you think!

        2 points
        • Cristian Moisei, over 4 years ago

          Glad to have someone from the team joining the conversation. Could you clarify a few things?

          • Is this going to be a separate version of PS or just an addon to the large one?
          • will it run on the same PS engine? Performance is in my opinion a far bigger issue than the interface.
          • Will the new UI be customisable?

          Lastly, how can we help?

          1 point
          • Marc EdwardsMarc Edwards, over 4 years ago (edited over 4 years ago )

            Is this going to be a separate version of PS or just an addon to the large one?

            It’s the same version of Photoshop, just a different interface you can switch to.

            Will it run on the same PS engine? Performance is in my opinion a far bigger issue than the interface.

            Yep, it’s Photoshop under the hood.

            Will the new UI be customisable?

            That’s a question for Adobe (wasn’t covered in the MAX 2014 Project Recess presentation).

            Lastly, how can we help?

            I think you’re helping by posting stuff here. :)

            Adobe seem to also like feature requests and bugs for Photoshop to be posted here: http://feedback.photoshop.com/photoshop_family

            2 points
          • Charles PearsonCharles Pearson, over 4 years ago

            First of all, Marc, you're awesome, thanks for helping out here.

            Cristian, like Marc said, Recess uses the PS core. I would love to talk to you more about your performance issues -- most point to the UI and experience as the bigger problem. As for customization, we might have a few things in mind around that. So let's talk, we'd love help and feedback! Email me at cpearson@adobe.com and I can hook you up with a build, and we talk about PS performance and whatever.

            0 points
  • Kieran Black, over 4 years ago

    I love making scripts, here's how I use them https://medium.com/@kieranpblack/photoshop-productivity-with-scripts-keyboard-shortcuts-and-alfred-5de3c44a33c2

    Like Edwin said before, the PS team is doing a lot for UI designers. Libraries is a great feature that is really underestimated in it's usefulness

    1 point
  • Tom KissTom Kiss, over 4 years ago (edited over 4 years ago )

    I have "create smart object from selection" set to a shortcut and find that invaluable.

    One thing I do regularly but realised not everyone knows - hold down shift when dragging layers between files and they will retain their position in the new document.

    Oh, and in preferences > general try changing the sampling to bilinear if you get weird outlining on smart objects.

    0 points
  • Nathan HueningNathan Huening, over 4 years ago

    UI designers still use Photoshop?

    0 points
    • Marcelo MazzaMarcelo Mazza, over 4 years ago

      For those of us on Windows, it's the only decent option (with Illustrator) after the decease of Fireworks :(

      0 points
  • Thibaud Van VreckemThibaud Van Vreckem, over 4 years ago (edited over 4 years ago )

    here's some simple solutions I use to get rid of any performance issues: 1. use ps on windows. 2. get at the very least 32 GB ram (I use 64) 3. try to avoid using too large textfields

    0 points
    • Cristian Moisei, over 4 years ago

      Thanks for your reply. I was considering upgrading from 16GB - what are the areas you noticed the biggest improvements on?

      Also, what do you mean by large text fields?

      0 points
  • Alexandru NăstaseAlexandru Năstase, over 4 years ago

    That script for Previews is awesome! Took it and modified it a little to save previews in the root folder next to the PSD. Get it from here: https://mega.co.nz/#!ANgg0AJQ!i6_wiU0wzDu7eK6QOFFgcYhZp3QkG_sNjuMWEk3RKXo

    0 points
    • Cristian MoiseiCristian Moisei, over 4 years ago

      Glad you're finding it useful. The path can be customised to whatever you need. I prefer saving things to the desktop because I do not keep those previews for long.

      0 points
  • Mariusz OstrowskiMariusz Ostrowski, over 4 years ago

    Please fix URL to your scripts and shortcuts.

    0 points