{"id":14809,"date":"2016-08-17T16:31:40","date_gmt":"2016-08-17T23:31:40","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=14809"},"modified":"2020-04-22T06:36:06","modified_gmt":"2020-04-22T13:36:06","slug":"top-10-photoshop-shortcuts-ui-designers","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/top-10-photoshop-shortcuts-ui-designers\/","title":{"rendered":"Top 10 Photoshop Shortcuts for UI Designers"},"content":{"rendered":"

As a UI Designer and long time fan\/user of Adobe, I still tend to find myself using Photoshop to create icon sets and mobile\/web mockups.<\/p>\n

Here are a handful of shortcuts I’ve picked up throughout the past five years to make the everyday design workflow a little easier.<\/p>\n

1. Filling a Layer with a Click<\/h2>\n

Now, this is a really neat shortcut.<\/p>\n

You can fill a selected layer with your current foreground or background colors. It’s definitely time-saving.<\/p>\n

MAC: Alt+Backspace (foreground) or Cmd+Backspace (background)<\/p>\n

WINDOWS: Alt+Delete (foreground) or Ctrl+Delete (background).<\/p>\n

\"image09\"<\/p>\n

2. Copy Layer Styles<\/h2>\n

This shortcut is probably something you learned within the first few weeks of learning Photoshop.<\/p>\n

Simply hold down the Alt\/Opt key and drag the FX icon in the layers panel from the layer with the styles to the target layer – the styles will be copied right over!<\/p>\n

\"image00\"<\/p>\n

3. Shape Attributes<\/h2>\n

Just like copying layer styles, copying shape attributes is also extremely helpful when needing to design multiple shape elements. When copying shape attributes, you are able to copy the live shape properties of an element such as color and border properties.<\/p>\n

To copy shape attributes, right-click on the layer that holds the attributes that you want to copy, select Copy Shape Attributes, then select the layer that you want to paste the attributes and select Past Shape Attributes.<\/p>\n

\"image05\"<\/p>\n

4. Quickly change measuring units<\/h2>\n

How annoying is it when you create a new document and your measurements are in inches instead of pixels? It’s definitely frustrating to have to go through the breadcrumb trail of  Edit>Preferences>Units & Rulers.<\/p>\n

But, if you didn’t already know, you can alternatively simply right-click your document’s rulers (if they’re visible) and select the measuring unit of your choice. Easy enough, right?<\/p>\n

\"image07\"<\/p>\n

5. Insert Lorem Ipsum<\/h2>\n

Workable copy isn\u2019t always available for the website or app we’re mocking up. That’s where Lorem Ipsum comes into play.<\/p>\n

Now, I used to use Lorem Ipsum generator web applications, but I found out about three years ago that Photoshop has it’s very own Lorem Ipsum function. When you draw a text box in Photoshop, go to the menu bar, select Type > Paste Lorem Ipsum to fill your text box with Lorem Ipsum text.<\/p>\n

\"image01\"<\/p>\n

6. Eyedropper Shortcut<\/h2>\n

Working with the Brush tool but you need to sample another color from an image? Instead of clicking the Eyedropper tool, simply hold the Alt or Option key to switch temporarily. Release to return back to Brush tool.<\/p>\n

MAC: Hold down the Option key<\/p>\n

WINDOWS: Hold down the Alt key<\/p>\n

\"image06\"<\/p>\n

7. Save for Web & Devices<\/h2>\n

For years, I used the menu bar to access this option and save my designs for web. Solely out of habit. It was only until recently I started using this shortcut. It’s now one of my personal favorite shortcuts.<\/p>\n

MAC: Cmd+Shift+Opt+S<\/p>\n

WINDOWS: Ctrl+Shift+Alt+S<\/p>\n

\"image04\"<\/p>\n

8. Artboards<\/h2>\n

This is a fairly new feature on Photoshop CC. If you’re a UI Designer, using multiple artboards in a single document is an absolute must.<\/p>\n

Now you can lay out your separate screen mockups as if you were working in Illustrator. Awesome.<\/p>\n

\"image03\"<\/p>\n

9. Adobe Preview<\/h2>\n

I absolutely love this feature. It’s a great way to view your designs on selected screen sizes.<\/p>\n

I typically use Preview to confirm that every pixel and element in my mobile screen mockups looks pixel-perfect on the device. Just download the Adobe Preview app<\/a> onto your phone or tablet, make sure the devices and your computer are on the same WiFi network and you’re all set.  <\/p>\n

10. Copy CSS<\/h2>\n

If you\u2019re a UI Designer who also codes your design, this neat feature allows you to copy the CSS of just about every element in your document.<\/p>\n

Just right click on the layer of choice, select “Copy CSS” and you then you have a nice snippet of CSS in your clipboard for usage.<\/p>\n

\"image02\"<\/p>\n

Bonus Tip: Prototyping Your Photoshop Design<\/h2>\n

If you use UXPin<\/a>, you can use their Photoshop plugin to start prototyping your static designs<\/a>. Once you\u2019ve installed the plugin, you can create smooth interactive prototypes like the below confirmation animation.<\/p>\n

\"image08\"<\/p>\n

The collaborative platform doesn\u2019t flatten files, so you can prototype any layer. Just drag and drop your file into your project and you\u2019re ready to go.  <\/p>\n

Join the world's best designers who use UXPin.<\/h2>Sign up for a free trial.<\/span>Try it for free!<\/a><\/section>\n","protected":false},"excerpt":{"rendered":"

Quick shortcuts to improve design productivity and quality. <\/p>\n","protected":false},"author":115,"featured_media":14820,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,18,172,4],"tags":[],"class_list":["post-14809","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-process","category-product-design","category-ui-design"],"yoast_title":"","yoast_metadesc":"Here are a handful of shortcuts to pick up to make the everyday design workflow a little easier.","acf":[],"yoast_head":"\nTop 10 Photoshop Shortcuts for UI Designers | UXPin<\/title>\n<meta name=\"description\" content=\"Here are a handful of shortcuts to pick up to make the everyday design workflow a little easier.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/top-10-photoshop-shortcuts-ui-designers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Top 10 Photoshop Shortcuts for UI Designers\" \/>\n<meta property=\"og:description\" content=\"Here are a handful of shortcuts to pick up to make the everyday design workflow a little easier.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/top-10-photoshop-shortcuts-ui-designers\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-17T23:31:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-22T13:36:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/photoshop-split.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"395\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Aaron Jackson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aaron Jackson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/top-10-photoshop-shortcuts-ui-designers\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/top-10-photoshop-shortcuts-ui-designers\\\/\"},\"author\":{\"name\":\"Aaron Jackson\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/f8617e53e4d67c130db4619f088e4343\"},\"headline\":\"Top 10 Photoshop Shortcuts for UI Designers\",\"datePublished\":\"2016-08-17T23:31:40+00:00\",\"dateModified\":\"2020-04-22T13:36:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/top-10-photoshop-shortcuts-ui-designers\\\/\"},\"wordCount\":740,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/top-10-photoshop-shortcuts-ui-designers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/photoshop-split.jpg\",\"articleSection\":[\"Blog\",\"Process\",\"Product Design\",\"UI Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/top-10-photoshop-shortcuts-ui-designers\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/top-10-photoshop-shortcuts-ui-designers\\\/\",\"name\":\"Top 10 Photoshop Shortcuts for UI Designers | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/top-10-photoshop-shortcuts-ui-designers\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/top-10-photoshop-shortcuts-ui-designers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/photoshop-split.jpg\",\"datePublished\":\"2016-08-17T23:31:40+00:00\",\"dateModified\":\"2020-04-22T13:36:06+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/f8617e53e4d67c130db4619f088e4343\"},\"description\":\"Here are a handful of shortcuts to pick up to make the everyday design workflow a little easier.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/top-10-photoshop-shortcuts-ui-designers\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/top-10-photoshop-shortcuts-ui-designers\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/top-10-photoshop-shortcuts-ui-designers\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/photoshop-split.jpg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/photoshop-split.jpg\",\"width\":700,\"height\":395,\"caption\":\"photoshop split\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/top-10-photoshop-shortcuts-ui-designers\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Top 10 Photoshop Shortcuts for UI Designers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/f8617e53e4d67c130db4619f088e4343\",\"name\":\"Aaron Jackson\",\"description\":\"Aaron Jackson is a Graphic and Web Designer at Pearson Realty. He studied graphic and web design at Fresno City College and The Art Institutes.\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/aaron-jackson\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Top 10 Photoshop Shortcuts for UI Designers | UXPin","description":"Here are a handful of shortcuts to pick up to make the everyday design workflow a little easier.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/top-10-photoshop-shortcuts-ui-designers\/","og_locale":"en_US","og_type":"article","og_title":"Top 10 Photoshop Shortcuts for UI Designers","og_description":"Here are a handful of shortcuts to pick up to make the everyday design workflow a little easier.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/top-10-photoshop-shortcuts-ui-designers\/","og_site_name":"Studio by UXPin","article_published_time":"2016-08-17T23:31:40+00:00","article_modified_time":"2020-04-22T13:36:06+00:00","og_image":[{"width":700,"height":395,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/photoshop-split.jpg","type":"image\/jpeg"}],"author":"Aaron Jackson","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Aaron Jackson","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/top-10-photoshop-shortcuts-ui-designers\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/top-10-photoshop-shortcuts-ui-designers\/"},"author":{"name":"Aaron Jackson","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/f8617e53e4d67c130db4619f088e4343"},"headline":"Top 10 Photoshop Shortcuts for UI Designers","datePublished":"2016-08-17T23:31:40+00:00","dateModified":"2020-04-22T13:36:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/top-10-photoshop-shortcuts-ui-designers\/"},"wordCount":740,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/top-10-photoshop-shortcuts-ui-designers\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/photoshop-split.jpg","articleSection":["Blog","Process","Product Design","UI Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/top-10-photoshop-shortcuts-ui-designers\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/top-10-photoshop-shortcuts-ui-designers\/","name":"Top 10 Photoshop Shortcuts for UI Designers | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/top-10-photoshop-shortcuts-ui-designers\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/top-10-photoshop-shortcuts-ui-designers\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/photoshop-split.jpg","datePublished":"2016-08-17T23:31:40+00:00","dateModified":"2020-04-22T13:36:06+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/f8617e53e4d67c130db4619f088e4343"},"description":"Here are a handful of shortcuts to pick up to make the everyday design workflow a little easier.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/top-10-photoshop-shortcuts-ui-designers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/top-10-photoshop-shortcuts-ui-designers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/top-10-photoshop-shortcuts-ui-designers\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/photoshop-split.jpg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/photoshop-split.jpg","width":700,"height":395,"caption":"photoshop split"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/top-10-photoshop-shortcuts-ui-designers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Top 10 Photoshop Shortcuts for UI Designers"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/f8617e53e4d67c130db4619f088e4343","name":"Aaron Jackson","description":"Aaron Jackson is a Graphic and Web Designer at Pearson Realty. He studied graphic and web design at Fresno City College and The Art Institutes.","url":"https:\/\/www.uxpin.com\/studio\/author\/aaron-jackson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/14809","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/115"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=14809"}],"version-history":[{"count":0,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/14809\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/14820"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=14809"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=14809"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=14809"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}