• Read more about 10 Photoshop Shortcuts for UI/UX Design

Our work as designers is filled with many repetitive tasks that can become time consuming, we have talked about ways to Automate Photoshop to Improve your Workflow, and Design Etiquette - all of these things help make our lives a little easier.  Now lets talk through some ways you can improve your UX/UI workflow in Photoshop by implementing some of the standard keyboard shortcuts the program offers, how to edit them and create your own shortcuts. Which will save you time! Who doesn’t want to save time?

Create new layer behind selected layer

• MAC: CMD+New Layer icon
• WINDOWS: CTRL+New Layer Icon

New layer via copy

• MAC: CMD+J
• WINDOWS: CTRL+J

Create new layers from existing ones. You can copy text, images, even folders with these shortcuts. Need to re-use the card you already designed? Just copy it!

Bring layer forward

• MAC: CMD+]
• WINDOWS: CTRL+]

For those times when you need to rearrange the order of your layers - forget the mouse and use the keyboard instead.

Send layer back

• MAC: CMD+[
• WINDOWS: CTRL+[

Pro Tip: Create a shortcut for renaming layers (In my case I use CMD+Shift+R) this is an easy and quick way to copy/paste/rename a layer name. Also, if you press ‘tab’ while the rename layer is active it will cycle through your layers with the name that is highlighted and it will be ready to be edited or you can press (shift+tab to go in a different direction).

Deselect the entire image

• MAC: CMD+D
• WINDOWS: CTRL+D

Reselect

• MAC: CMD+Shift+D
• WINDOWS: CTRL+Shift+D

We recently found this shortcut and it is really useful for when you click away from the selection and you need to re-do it.

Invert selection

• MAC: CMD+Shift+I
• WINDOWS: CTRL+Shift+I

Select all layers

• MAC: CMD+Opt+A
• WINDOWS: CTRL+Alt+A

Need to select all your layers to create a new group? Here’s your solution! Tip: Did you know you can collapse all your groups from the layer Menu?

Deselect from the selection area

• MAC: Opt+drag
• WINDOWS: Alt+drag

Increase/decrease size of selected text by 2pts

• MAC: CMD+Shift+>/<
• WINDOWS: CTRL+Shift+>/<

Align text left/center/right

• MAC: CMD+Shift+L/C/R
• WINDOWS: CTRL+Shift+L/C/R

Not convinced about the shortcuts Photoshop offers? You can customize them yourself, go to the application menu, under ‘Edit’, you’ll see “Keyboard Shortcuts” or just press Alt+Shift+CMD +K or Alt+Shift+Ctrl +K

In this window you’ll see all the different shortcuts that photoshop has to offer, there are many you won’t need as often when working as a UI/UX designer, so you can take advantage of this and create your own shortcuts for the tools you do use for example, copy/paste/clear layer styles; save them as a set to keep a copy and, if you want, share it with your team!

You can set shortcuts for the application menus, the panels (How about giving that ‘Collapse All Groups’ feature a shortcut?) and of course, tools. Tip: See that Menu tab? Here you can define special settings to the menu, assign a color to different menu options, even hide the ones you never use!

Did you know you can create a shortcut to align elements to the left/right/center/middle? There’s also another way to create your own shortcuts for repetitive tasks, through actions! We have talked a little bit about how to do so in our post Automate Photoshop to Improve your Workflow  be sure to check it out!

• Read more about How To Automate Photoshop To Improve Your Workflow

We specialize in interface design and we take pride in our process but there is a lot of work done behind the scenes before the design is complete. When you work as a digital interface designer, you spend your day interacting with many tools and files. Sometimes you find yourself doing repetitive tasks which can become annoying after awhile but being methodical and organized can definitely help. We have talked about design etiquette and how to keep your files and folders organized which can help improve your workflow - but what about shortcuts on tools…Let’s talk ways you can customize Photoshop to save you time and hopefully improve your workflow.

The Actions Panel

‘Actions’ are one of the tools you can use to help automate things in Photoshop. "An action is a series of tasks that you play back on a single file or a batch of files” —menu commands, panel options, tool actions, and so on. For example, you can create an action that changes the size of an image, applies an effect to the image, and then saves the file in the desired format”. Source  Adobe Support There are many ways you can take advantage of this tool, for example, instead of having to manually copy and paste the style of a layer - you can have it attached to a keyboard shortcut in an action. There are some tools that don't have an option for a keyboard shortcut, having actions allows the user to give a keyboard shortcut to a specific tool to use it later. Not all the tools in photoshop have keyboard shortcuts. Actions can be used manually in ‘Batch’ or you can utilize Droplet which are small applications that automatically process all files that are dragged onto their icon. More about actions

Template files and the CC library

Artboards make working with multiple files easier - in combination to smart objects linked to CC libraries, you can have everything you need without needing extra .psd or .psb files in your computer. You can access them from the cloud, no matter where you are and no matter what device or application in the adobe family you are using. This is helpful when dealing with images that are going to be used in different social media sites.

Scripts

You can have an event, such as opening, saving, or exporting a file in Photoshop that triggers a JavaScript or a Photoshop action. Photoshop provides several default events, or you can have any scriptable Photoshop event trigger the script or action. See the Photoshop Scripting Guide for more information on scriptable events. Source  Adobe Support Scripts are similar to actions but they allow access to elements not accessible by actions and this gives more flexibility and automation to some tools. There are many useful scripts for example Template Generator, Lighten / Darken Color and many others, just search for “Photoshop Scripts” and you’ll get many results, or create your own! Related: https://www.ps-scripts.com/

Plugins and Extensions

Add-ons allow complex tasks to be done with a single click, you can add special effects to a picture, modify layer names in batch, and more, there are many available paid and free plugins available from Adobe’s Creative page. Do you have suggestions or is there a particular tool that you would be interested in learning more about to improve your workflow? Reach out!

• Read more about Part 3 Forming A Design Team: Tools

It’s been a little while since our last post, but none the less I’m back and ready to talk about the third portion of Forming A Design Team. We covered Structure, and Process so far, and with this post we’ll talk about the tools that will enable you and your team to excel. To me, tools can be sorted into three categories, Wireframing, Interface, and Prototyping, and we’ll cover each one and it associated apps.

I think it’s important point out that not each of these tools will work for every team, and you may already have your tool set established, which is awesome! These are the tools that we have started to use at Mobomo and so far they’re working very well for us...but who knows what the new year will bring. New tools and programs come out every month, so this list could be updated to reflect better ways of working. Below are the categories I mentioned previously, with the tools associated with them.

WIREFRAMEING

INTERFACE

PROTOTYPING

Like I said before, these might not necessarily work for your team and some are bound to change or be updated, but for the moment they are working they have proven to be great for us. It should also be noted that not every tool is right for every job, so make sure when deciding which program to use you let the project dictate that and not your feelings toward it.

• Read more about Designing in Photoshop on a Retina Screen

One of the pain points of retina MacBook Pros is that Photoshop, natively, offers no elegant way to design in relative dimensions, thus 100% 1:1 pixel ratio files look tiny on a retina monitor.

My first stab at alleviating the squinting and blurriness was a naive attempt to simply x2 the pixel dimensions of my document (1200px scaled to 2400px).

Bottom line: Don't do it!
While it gets the job done, Photoshop doesn't natively do a great job of scaling type and patterns up and down. Thus, what was 24px on a retina screen becomes 12.01px on a non-retina screen, which will drive any designer completely crazy.

So what's the solution? Well, thanks to the folks at UI Parade, I did stumble upon an indirect solution. Their plugin, DevRocket, offers magical (+) and (-) buttons that leave nothing to Photoshop's interpretation. This was originally released to facilitate more realistic iOS retina comping. In a recent version of DevRocket, however, they've allowed the plus and minus buttons to be used on documents not generated by their plug-in.

While small, this DevRocket feature has been quite handy; enabling myself as well as our entire design team to work together in a way that is beautiful-regardless of pixel density!

Troubleshooting Tip: The only hiccup in this process is that copying and pasting text in a new layer occasionally confuses Photoshop; copying 12px text onto a new layer sometimes creates 24px text on a 1:1 document. After a few times though, this will become second nature.