{"id":9803,"date":"2011-06-01T17:44:37","date_gmt":"2011-06-01T09:44:37","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=9803"},"modified":"2023-10-31T23:01:04","modified_gmt":"2023-10-31T15:01:04","slug":"photoshop-killer-tips-for-web-designers","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/photoshop-killer-tips-for-web-designers\/","title":{"rendered":"10 Simple Photoshop Tips for Website Designers"},"content":{"rendered":"<p>Photoshop offers powerful tools that help turn your design ideas into reality. However, how familiar are you with Photoshop? Sometimes, it might seem like some designers can create complex designs faster than others. It\u2019s not about clicking speed, but about knowing Photoshop\u2019s features and capabilities.<\/p>\n<p>We want you to make the most of Photoshop. That\u2019s why we\u2019re sharing 10 helpful Photoshop tips to speed up your design process. By the end of this article, you\u2019ll know some tricks and shortcuts that can make your work smoother and faster.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/adobe-photoshop-keyboard-shortcuts\/\" class=\"ref-block__link\" title=\"Read More: 100+ Adobe Photoshop Keyboard Shortcuts\" rel=\"bookmark\"><span class=\"screen-reader-text\">100+ Adobe Photoshop Keyboard Shortcuts<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/adobe-photoshop-keyboard-shortcuts.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-48619 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/adobe-photoshop-keyboard-shortcuts.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">100+ Adobe Photoshop Keyboard Shortcuts<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tPhotoshop is an exceptional design software used by almost every designer in the world. The software has so...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<p>The shortcut keys mentioned are for Windows. If you\u2019re on a Mac, remember: <span class=\"key\">Control<\/span> = <span class=\"key\">Command<\/span> and <span class=\"key\">Alt<\/span> = <span class=\"key\">Option<\/span>.<\/p>\n<h2>10. How to Easily Undo Actions<\/h2>\n<p>Many designers frequently use the undo function. Even when sketching, we often wish there was an \u2018undo\u2019 option!<\/p>\n<p>In Photoshop, pressing <span class=\"key\">Ctrl<\/span> + <span class=\"key\">Z<\/span> undoes your last action. However, pressing it again redoes the action, which can be inconvenient if you want multiple undos.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/killer-photoshop-tips\/keyboard-shortcut-panel.jpg\" alt=\"Photoshop keyboard shortcuts\" width=\"600\" height=\"457\"><\/figure>\n<p>For multiple undos, use <span class=\"key\">Alt<\/span> + <span class=\"key\">Ctrl<\/span> + <span class=\"key\">Z<\/span>. This lets you undo several steps based on the number of History States you set under Edit > Preference > Performance.<\/p>\n<p>If you prefer the more common undo shortcut of <span class=\"key\">Ctrl<\/span> + <span class=\"key\">Z<\/span>, you can change it in the Keyboard Shortcut panel. Press <span class=\"key\">Ctrl<\/span> + <span class=\"key\">Shift<\/span> + <span class=\"key\">Alt<\/span> + <span class=\"key\">K<\/span> to access it and then adjust the setting under the Edit section.<\/p>\n<h2>9. Easily Sample Colors from Anywhere<\/h2>\n<p>Ever seen a well-designed website and wanted to know the exact colors used? When I\u2019m working on a website layout in Photoshop, I often look for color inspiration. Usually, I\u2019d use a color picker tool, note down the hex number, then enter it in Photoshop to get the color. Sounds tedious, right?<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/killer-photoshop-tips\/sampling-color-anywhere.jpg\" alt=\"Color sampling technique in Photoshop\" width=\"600\" height=\"419\"><\/figure>\n<p>You don\u2019t have to go through that. Simply use the Eyedropper tool by clicking on it or pressing <span class=\"key\">I<\/span>. Then, click anywhere on your Photoshop screen and drag the Eyedropper icon to any location on your monitor to pick the color. It\u2019s that simple.<\/p>\n<h2>8. Handy Guide Tool<\/h2>\n<p>Tip #8 offers two useful pointers. As website designers, we often use guides to position elements perfectly.<\/p>\n<p>Usually, to create a guide, you\u2019d go to View, then New Guide, choose its orientation, set its position, and hit Enter. But there\u2019s a shortcut: Press <span class=\"key\">Ctrl<\/span> + <span class=\"key\">R<\/span> to activate the Ruler tool. Click on it and drag down for a horizontal guide, or drag sideways for a vertical one.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/killer-photoshop-tips\/flexible-guide.jpg\" alt=\"Using the guide tool in Photoshop\" width=\"600\" height=\"597\"><\/figure>\n<p>Here\u2019s another tip: When moving a guide with the Move tool (activated by pressing <span class=\"key\">V<\/span>), hold <span class=\"key\">Alt<\/span> to switch between horizontal and vertical guides. With these tips, you\u2019ll master the guide tool in no time.<\/p>\n<h2>7. Duplicate Layer Styles with Ease<\/h2>\n<p>Layer styles can give unique looks to elements, like making a social media icon stand out. But applying the same style to multiple icons can be time-consuming.<\/p>\n<p>Did you notice the <em>fx<\/em> icon next to your layer? It\u2019s not just decorative. If you press <span class=\"key\">Alt<\/span> and drag the <em>fx<\/em> icon to another layer, it copies the styles from the original layer. Pretty handy, right?<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/killer-photoshop-tips\/layer-style-cloning.jpg\" alt=\"Duplicating layer styles in Photoshop\" width=\"600\" height=\"597\"><\/figure>\n<p>Additionally, if you drag the <em>fx<\/em> icon to another layer without pressing <span class=\"key\">Alt<\/span>, it moves the layer\u2019s styles, rather than copying them.<\/p>\n<h2>6. Simplifying Element Centering<\/h2>\n<p>For a pixel-perfect design, elements often need to be positioned with precision. While using guides can help, centering an element within a specific area can be cumbersome, needing multiple guides, measurements, and focus.<\/p>\n<p>However, there\u2019s a more straightforward approach: Click on the layer of the element you wish to center, then press <span class=\"key\">Ctrl<\/span> + <span class=\"key\">A<\/span> to select the entire document. Activate the Move tool and look for icons beside the option \u201cShow Transform Controls\u201d. Click the 2nd icon to vertically center, and the 5th to horizontally center. Just like that, your element is perfectly centered.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/killer-photoshop-tips\/absolute-centering.jpg\" alt=\"Technique for centering elements in Photoshop\" width=\"600\" height=\"597\"><\/figure>\n<p>Furthermore, you can center elements within specific areas, like a footer. Use the Selection tool (activate with <span class=\"key\">M<\/span>) to select the area, and then center the element within that section.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/killer-photoshop-tips\/footer-absolute-centering.jpg\" alt=\"Centering elements within specific areas in Photoshop\" width=\"600\" height=\"598\"><\/figure>\n<p>Explore other alignment options beside \u201cShow Transform Controls\u201d. They offer valuable assistance in various alignment scenarios.<\/p>\n<h2>5. Isolating Elements for a Clearer View<\/h2>\n<p>When designing, you might want to view certain elements in isolation, ensuring they appear as expected. For instance, if you want to check the transparency of slider buttons, ensuring they look consistent with or without the slider\u2019s image.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/killer-photoshop-tips\/view-one-selection.jpg\" alt=\"Isolating elements in Photoshop for better visibility\" width=\"600\" height=\"597\"><\/figure>\n<p>Instead of toggling layer visibility individually, hold <span class=\"key\">Alt<\/span> and click on the \u2018eye\u2019 icon next to the button group. This hides all other layers, allowing you to focus solely on those buttons. Repeat the action to restore layer visibility. This method is especially useful when slicing images, letting you work on specific elements without distractions.<\/p>\n<h2>4. Tailoring Font Tracking for Unique Typography<\/h2>\n<p>Adjusting font tracking (the space between characters) can enhance typography in specific cases, such as logos or buttons, making them more memorable.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/killer-photoshop-tips\/decrease-font-tracking.jpg\" alt=\"Adjusting font tracking in Photoshop for distinct typography\" width=\"600\" height=\"597\"><\/figure>\n<p>For instance, to adjust the tracking of \u2018360\u2019 in \u2018POLO360\u2019, use the Type tool (activate with <span class=\"key\">T<\/span>). Then, hold <span class=\"key\">Alt<\/span> and press <span class=\"key\"><<\/span> to reduce tracking, creating a unique type appearance. This trick is invaluable when working with artistic fonts, ensuring optimal typography without extensive font searches.<\/p>\n<h2>3. Quick Layer Selection<\/h2>\n<p>Designing layouts involves juggling typography, spacing, and graphics. The challenge grows when trying to find a specific element\u2019s layer among hundreds.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/killer-photoshop-tips\/instant-layer-selection.jpg\" alt=\"Quick method for selecting layers in Photoshop\" width=\"600\" height=\"597\"><\/figure>\n<p>Make this task easier: Activate the Move tool with <span class=\"key\">V<\/span>, hold <span class=\"key\">Ctrl<\/span>, and click the element. This selects the element\u2019s layer directly. Remember, if the element is part of a group, this method selects the group folder instead.<\/p>\n<h2>2. Harnessing the Power of Smart Objects<\/h2>\n<p>Smart Objects enhance editing by offering two main functions: nondestructive transformations and nondestructive filtering. They\u2019re especially useful for layouts with heavy graphics. Right-click a layer and choose \u2018Convert to Smart Object\u2019 to access these benefits.<\/p>\n<p>Once converted, you can transform the object without quality loss. For example, after downsizing an image slider and deciding it\u2019s too small:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/killer-photoshop-tips\/transformation.jpg\" alt=\"Transforming using Smart Objects in Photoshop\" width=\"600\" height=\"597\"><\/figure>\n<p>You might revert to the original size:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/killer-photoshop-tips\/backward-transformation-smart-object.jpg\" alt=\"Reverting transformation with Smart Objects in Photoshop\" width=\"600\" height=\"597\"><\/figure>\n<p>However, without using Smart Objects, quality is compromised:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/killer-photoshop-tips\/backward-transformation.jpg\" alt=\"Quality loss without using Smart Objects in Photoshop\" width=\"600\" height=\"597\"><\/figure>\n<p>Clearly, Smart Objects maintain quality during transformations. Also, filters applied to Smart Objects are easily toggled on or off, further enhancing flexibility.<\/p>\n<h2>1. Embracing the Beauty of Snapshots<\/h2>\n<p>Having learned multiple productivity-boosting techniques, consider a scenario where, after hours of work, you wish to revert to a midpoint. Redoing everything is daunting, but Snapshots offer a solution.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/killer-photoshop-tips\/snapshot.jpg\" alt=\"Using Snapshots in Photoshop for revisiting editing stages\" width=\"600\" height=\"598\"><\/figure>\n<p>Snapshots capture temporary copies of editing stages. If you wish to revert, select the desired snapshot. Access Snapshots through the History palette and use the second icon at the bottom. Multiple snapshots can be taken and named for clarity, allowing easy comparison of different design effects.<\/p>\n<p>Remember, snapshots disappear when the document closes. To preserve them, save each as a separate file.<\/p>","protected":false},"excerpt":{"rendered":"<p>Photoshop offers powerful tools that help turn your design ideas into reality. However, how familiar are you with Photoshop? Sometimes, it might seem like some designers can create complex designs faster than others. It\u2019s not about clicking speed, but about knowing Photoshop\u2019s features and capabilities. We want you to make the most of Photoshop. That\u2019s&hellip;<\/p>\n","protected":false},"author":17,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[43],"tags":[1939,978,510],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>10 Simple Photoshop Tips for Website Designers - Hongkiat<\/title>\n<meta name=\"description\" content=\"Photoshop offers powerful tools that help turn your design ideas into reality. However, how familiar are you with Photoshop? Sometimes, it might seem like\" \/>\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.hongkiat.com\/blog\/photoshop-killer-tips-for-web-designers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Simple Photoshop Tips for Website Designers\" \/>\n<meta property=\"og:description\" content=\"Photoshop offers powerful tools that help turn your design ideas into reality. However, how familiar are you with Photoshop? Sometimes, it might seem like\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/photoshop-killer-tips-for-web-designers\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2011-06-01T09:44:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-31T15:01:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/killer-photoshop-tips\/keyboard-shortcut-panel.jpg\" \/>\n<meta name=\"author\" content=\"Alvaris Falcon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alvaris Falcon\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-killer-tips-for-web-designers\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-killer-tips-for-web-designers\\\/\"},\"author\":{\"name\":\"Alvaris Falcon\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/110548906de9455e25024dbfbc9156d1\"},\"headline\":\"10 Simple Photoshop Tips for Website Designers\",\"datePublished\":\"2011-06-01T09:44:37+00:00\",\"dateModified\":\"2023-10-31T15:01:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-killer-tips-for-web-designers\\\/\"},\"wordCount\":832,\"commentCount\":64,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-killer-tips-for-web-designers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/killer-photoshop-tips\\\/keyboard-shortcut-panel.jpg\",\"keywords\":[\"Photoshop tips\",\"Productivity Tips\",\"Web Designers\"],\"articleSection\":[\"Photoshop\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-killer-tips-for-web-designers\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-killer-tips-for-web-designers\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-killer-tips-for-web-designers\\\/\",\"name\":\"10 Simple Photoshop Tips for Website Designers - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-killer-tips-for-web-designers\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-killer-tips-for-web-designers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/killer-photoshop-tips\\\/keyboard-shortcut-panel.jpg\",\"datePublished\":\"2011-06-01T09:44:37+00:00\",\"dateModified\":\"2023-10-31T15:01:04+00:00\",\"description\":\"Photoshop offers powerful tools that help turn your design ideas into reality. However, how familiar are you with Photoshop? Sometimes, it might seem like\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-killer-tips-for-web-designers\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-killer-tips-for-web-designers\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-killer-tips-for-web-designers\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/killer-photoshop-tips\\\/keyboard-shortcut-panel.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/killer-photoshop-tips\\\/keyboard-shortcut-panel.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/photoshop-killer-tips-for-web-designers\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 Simple Photoshop Tips for Website Designers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/110548906de9455e25024dbfbc9156d1\",\"name\":\"Alvaris Falcon\",\"description\":\"Alvaris is a web designer, developer and staff writer for Hongkiat.com.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/alvaris\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 Simple Photoshop Tips for Website Designers - Hongkiat","description":"Photoshop offers powerful tools that help turn your design ideas into reality. However, how familiar are you with Photoshop? Sometimes, it might seem like","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.hongkiat.com\/blog\/photoshop-killer-tips-for-web-designers\/","og_locale":"en_US","og_type":"article","og_title":"10 Simple Photoshop Tips for Website Designers","og_description":"Photoshop offers powerful tools that help turn your design ideas into reality. However, how familiar are you with Photoshop? Sometimes, it might seem like","og_url":"https:\/\/www.hongkiat.com\/blog\/photoshop-killer-tips-for-web-designers\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2011-06-01T09:44:37+00:00","article_modified_time":"2023-10-31T15:01:04+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/killer-photoshop-tips\/keyboard-shortcut-panel.jpg","type":"","width":"","height":""}],"author":"Alvaris Falcon","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Alvaris Falcon","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/photoshop-killer-tips-for-web-designers\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/photoshop-killer-tips-for-web-designers\/"},"author":{"name":"Alvaris Falcon","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/110548906de9455e25024dbfbc9156d1"},"headline":"10 Simple Photoshop Tips for Website Designers","datePublished":"2011-06-01T09:44:37+00:00","dateModified":"2023-10-31T15:01:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/photoshop-killer-tips-for-web-designers\/"},"wordCount":832,"commentCount":64,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/photoshop-killer-tips-for-web-designers\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/killer-photoshop-tips\/keyboard-shortcut-panel.jpg","keywords":["Photoshop tips","Productivity Tips","Web Designers"],"articleSection":["Photoshop"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/photoshop-killer-tips-for-web-designers\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/photoshop-killer-tips-for-web-designers\/","url":"https:\/\/www.hongkiat.com\/blog\/photoshop-killer-tips-for-web-designers\/","name":"10 Simple Photoshop Tips for Website Designers - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/photoshop-killer-tips-for-web-designers\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/photoshop-killer-tips-for-web-designers\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/killer-photoshop-tips\/keyboard-shortcut-panel.jpg","datePublished":"2011-06-01T09:44:37+00:00","dateModified":"2023-10-31T15:01:04+00:00","description":"Photoshop offers powerful tools that help turn your design ideas into reality. However, how familiar are you with Photoshop? Sometimes, it might seem like","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/photoshop-killer-tips-for-web-designers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/photoshop-killer-tips-for-web-designers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/photoshop-killer-tips-for-web-designers\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/killer-photoshop-tips\/keyboard-shortcut-panel.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/killer-photoshop-tips\/keyboard-shortcut-panel.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/photoshop-killer-tips-for-web-designers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"10 Simple Photoshop Tips for Website Designers"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/110548906de9455e25024dbfbc9156d1","name":"Alvaris Falcon","description":"Alvaris is a web designer, developer and staff writer for Hongkiat.com.","url":"https:\/\/www.hongkiat.com\/blog\/author\/alvaris\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-2y7","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/9803","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=9803"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/9803\/revisions"}],"predecessor-version":[{"id":70107,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/9803\/revisions\/70107"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=9803"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=9803"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=9803"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=9803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}