Sorry

This feed does not validate.

In addition, interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

Source: https://tutsplus.com/posts.atom

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <feed xml:lang="en-US" xmlns="http://www.w3.org/2005/Atom">
  3.  <id>tag:tutsplus.com,2005:/posts</id>
  4.  <link rel="alternate" type="text/html" href="https://tutsplus.com"/>
  5.  <link rel="self" type="application/atom+xml" href="https://tutsplus.com/posts.atom"/>
  6.  <title>Envato Tuts+ Tutorials</title>
  7.  <updated>2025-07-02T09:59:00Z</updated>
  8.  <entry>
  9.    <id>tag:tutsplus.com,2005:PostPresenter/cms-109187</id>
  10.    <published>2025-05-26T20:57:29+00:00</published>
  11.    <link rel="alternate" type="text/html" href="https://webdesign.tutsplus.com/color-contrast-checker--cms-109187t"/>
  12.    <title>Create a color contrast checker with HTML, CSS, and JavaScript</title>
  13.    <content type="html">&lt;style&gt;* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}&lt;/style&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iufx"&gt;
  14. &lt;p&gt;By “color contrast” we’re referring to the difference in brightness between foreground and background colors. In simpler terms, it defines how easy it is for the human eye to recognize text or images on a coloured background.&lt;/p&gt;
  15. &lt;p&gt;The &lt;a href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="_blank" rel="noopener"&gt;Web Content Accessibility Guidelines&lt;/a&gt; (WCAG) provide specific recommendations regarding color contrast for text to make web content accessible and visible to people with impaired vision.&lt;/p&gt;
  16. &lt;p&gt;It recommends a minimum contrast ratio of &lt;strong&gt;4.5:1&lt;/strong&gt; for normal text. For larger text, the minimum recommended contrast ratio is &lt;strong&gt;3:1&lt;/strong&gt;. According to the WCAG,  larger text is defined as &lt;strong&gt;24px&lt;/strong&gt; or larger for normal-weight fonts and &lt;strong&gt;18.66px&lt;/strong&gt; or larger for bold text. &lt;/p&gt;
  17. &lt;p&gt;For example, if you have a dark background with dark-colored text, the text will not be easily readable, as seen below.&lt;/p&gt;
  18. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1885/posts/109187/image-upload/color_contrast.png" loading="lazy" width="870px" height="370px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1885/posts/109187/image-upload/color_contrast.png 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1885/posts/109187/image-upload/color_contrast.png" loading="lazy" width="650px" height="279px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1885/posts/109187/image-upload/color_contrast.png 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1885/posts/109187/image-upload/color_contrast.png" loading="lazy" width="380px" height="168px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1885/posts/109187/image-upload/color_contrast.png 2x"&gt;&lt;/figure&gt;
  19. &lt;h2 id="toc-u4ui-how-is-contrast-ratio-calculated"&gt;How is contrast ratio calculated?&lt;/h2&gt;
  20. &lt;p&gt;The contrast ratio between two colors is calculated using the following formula.&lt;/p&gt;
  21. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table shell"&gt;&lt;tbody&gt;&lt;tr id="line-1" class="lineno"&gt;
  22. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  23. &lt;td class="rouge-code"&gt;&lt;pre&gt;contrast ratio &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;L1 + 0.05&lt;span style="color: #d0d0d0"&gt;)&lt;/span&gt; /&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt; L2+0.05&lt;span style="color: #d0d0d0"&gt;)&lt;/span&gt;
  24. &lt;/pre&gt;&lt;/td&gt;
  25. &lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  26. &lt;p&gt;&lt;code&gt;L1&lt;/code&gt; is the relative luminance of the lighter color, and &lt;code&gt;L2&lt;/code&gt; is the relative luminance of the darker color. While higher contrast is generally recommended to meet accessibility standards, moderate contrast is the best as it reduces eye strain. &lt;/p&gt;
  27. &lt;p&gt;Luminance, on the other hand, is the perceived brightness of a color, and it's calculated based on RGB values of that color as shown below:&lt;/p&gt;
  28. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table plaintext"&gt;&lt;tbody&gt;
  29. &lt;tr id="line-1" class="lineno"&gt;
  30. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  31. &lt;td class="rouge-code"&gt;&lt;pre&gt;R0 = R/255
  32. &lt;/pre&gt;&lt;/td&gt;
  33. &lt;/tr&gt;
  34. &lt;tr id="line-2" class="lineno"&gt;
  35. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  36. &lt;td class="rouge-code"&gt;&lt;pre&gt;G0 = G/255
  37. &lt;/pre&gt;&lt;/td&gt;
  38. &lt;/tr&gt;
  39. &lt;tr id="line-3" class="lineno"&gt;
  40. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;3&lt;/pre&gt;&lt;/td&gt;
  41. &lt;td class="rouge-code"&gt;&lt;pre&gt;B0 = B/255
  42. &lt;/pre&gt;&lt;/td&gt;
  43. &lt;/tr&gt;
  44. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  45. &lt;p&gt;Once we obtain these values, we linearise each component as follows:&lt;/p&gt;
  46. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table javascript"&gt;&lt;tbody&gt;
  47. &lt;tr id="line-1" class="lineno"&gt;
  48. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  49. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d28445"&gt;let&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;r&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;R0&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;&amp;lt;=&lt;/span&gt; &lt;span style="color: #90a959"&gt;0.03928&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;?&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;R0&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;/&lt;/span&gt; &lt;span style="color: #90a959"&gt;12.92&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;Math&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;pow&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;((&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;R0&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;+&lt;/span&gt; &lt;span style="color: #90a959"&gt;0.055&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;)&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;/&lt;/span&gt; &lt;span style="color: #90a959"&gt;1.055&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #90a959"&gt;2.4&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  50. &lt;/pre&gt;&lt;/td&gt;
  51. &lt;/tr&gt;
  52. &lt;tr id="line-2" class="lineno"&gt;
  53. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  54. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d28445"&gt;let&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;g&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;G0&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;&amp;lt;=&lt;/span&gt; &lt;span style="color: #90a959"&gt;0.03928&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;?&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;G0&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;/&lt;/span&gt; &lt;span style="color: #90a959"&gt;12.92&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;Math&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;pow&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;((&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;G0&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;+&lt;/span&gt; &lt;span style="color: #90a959"&gt;0.055&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;)&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;/&lt;/span&gt; &lt;span style="color: #90a959"&gt;1.055&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #90a959"&gt;2.4&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  55. &lt;/pre&gt;&lt;/td&gt;
  56. &lt;/tr&gt;
  57. &lt;tr id="line-3" class="lineno"&gt;
  58. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;3&lt;/pre&gt;&lt;/td&gt;
  59. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d28445"&gt;let&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;b&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;B0&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;&amp;lt;=&lt;/span&gt; &lt;span style="color: #90a959"&gt;0.03928&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;?&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;B0&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;/&lt;/span&gt; &lt;span style="color: #90a959"&gt;12.92&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;Math&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;pow&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;((&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;B0&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;+&lt;/span&gt; &lt;span style="color: #90a959"&gt;0.055&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;)&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;/&lt;/span&gt; &lt;span style="color: #90a959"&gt;1.055&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #90a959"&gt;2.4&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  60. &lt;/pre&gt;&lt;/td&gt;
  61. &lt;/tr&gt;
  62. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  63. &lt;p&gt;Finally, we compute the relative luminance like so:&lt;/p&gt;
  64. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table plaintext"&gt;&lt;tbody&gt;&lt;tr id="line-1" class="lineno"&gt;
  65. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  66. &lt;td class="rouge-code"&gt;&lt;pre&gt;Luminance = 0.2126 * R0+0.07152* G0+0.0722*B0
  67. &lt;/pre&gt;&lt;/td&gt;
  68. &lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  69. &lt;p&gt;&lt;span&gt;Now that we know how to calculate the contrast ratio, let’s build our own color contrast tool!&lt;/span&gt;&lt;/p&gt;
  70. &lt;h2 id="toc-vd8v-heres-what-were-working-towards"&gt;&lt;span&gt;Here’s what we’re working towards&lt;/span&gt;&lt;/h2&gt;
  71. &lt;p&gt;&lt;iframe src="https://codepen.io/tutsplus/embed/MYwxWwZ?default-tab=result" width="850" height="500" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy"&gt;
  72. &lt;/iframe&gt;&lt;/p&gt;
  73. &lt;h2 id="toc-1zxq-html-structure"&gt;HTML Structure&lt;/h2&gt;
  74. &lt;p&gt;The HTML structure will have the following elements:&lt;/p&gt;
  75. &lt;ul&gt;
  76. &lt;li&gt;Color pickers for selecting the foreground and background colors&lt;/li&gt;
  77. &lt;li&gt;A display area to indicate whether the selected color combination meets the WCAG guidelines.&lt;/li&gt;
  78. &lt;li&gt;A preview area that displays sample text to visually demonstrate readability.  &lt;/li&gt;
  79. &lt;li&gt;A paragraph displaying the contrast ratio of the selected colors. &lt;/li&gt;
  80. &lt;/ul&gt;
  81. &lt;p&gt;The code for the HTML markup will look like this:&lt;/p&gt;
  82. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table html"&gt;&lt;tbody&gt;
  83. &lt;tr id="line-1" class="lineno"&gt;
  84. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  85. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #f4bf75"&gt;&amp;lt;div&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;class=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"container"&lt;/span&gt;&lt;span style="color: #f4bf75"&gt;&amp;gt;&lt;/span&gt;
  86. &lt;/pre&gt;&lt;/td&gt;
  87. &lt;/tr&gt;
  88. &lt;tr id="line-2" class="lineno"&gt;
  89. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  90. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #f4bf75"&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;Color Contrast Checker&lt;span style="color: #f4bf75"&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
  91. &lt;/pre&gt;&lt;/td&gt;
  92. &lt;/tr&gt;
  93. &lt;tr id="line-3" class="lineno"&gt;
  94. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;3&lt;/pre&gt;&lt;/td&gt;
  95. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #f4bf75"&gt;&amp;lt;div&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;class=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"color-pickers"&lt;/span&gt;&lt;span style="color: #f4bf75"&gt;&amp;gt;&lt;/span&gt;
  96. &lt;/pre&gt;&lt;/td&gt;
  97. &lt;/tr&gt;
  98. &lt;tr id="line-4" class="lineno"&gt;
  99. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;4&lt;/pre&gt;&lt;/td&gt;
  100. &lt;td class="rouge-code"&gt;&lt;pre&gt;    &lt;span style="color: #f4bf75"&gt;&amp;lt;div&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;class=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"color-picker"&lt;/span&gt;&lt;span style="color: #f4bf75"&gt;&amp;gt;&lt;/span&gt;
  101. &lt;/pre&gt;&lt;/td&gt;
  102. &lt;/tr&gt;
  103. &lt;tr id="line-5" class="lineno"&gt;
  104. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;5&lt;/pre&gt;&lt;/td&gt;
  105. &lt;td class="rouge-code"&gt;&lt;pre&gt;      &lt;span style="color: #f4bf75"&gt;&amp;lt;label&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;for=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"text-color"&lt;/span&gt;&lt;span style="color: #f4bf75"&gt;&amp;gt;&lt;/span&gt;Text Color:&lt;span style="color: #f4bf75"&gt;&amp;lt;/label&amp;gt;&lt;/span&gt;
  106. &lt;/pre&gt;&lt;/td&gt;
  107. &lt;/tr&gt;
  108. &lt;tr id="line-6" class="lineno"&gt;
  109. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;6&lt;/pre&gt;&lt;/td&gt;
  110. &lt;td class="rouge-code"&gt;&lt;pre&gt;      &lt;span style="color: #f4bf75"&gt;&amp;lt;input&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;type=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"color"&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;id=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"text-color"&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;value=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"#000000"&lt;/span&gt; &lt;span style="color: #f4bf75"&gt;/&amp;gt;&lt;/span&gt;
  111. &lt;/pre&gt;&lt;/td&gt;
  112. &lt;/tr&gt;
  113. &lt;tr id="line-7" class="lineno"&gt;
  114. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;7&lt;/pre&gt;&lt;/td&gt;
  115. &lt;td class="rouge-code"&gt;&lt;pre&gt;      &lt;span style="color: #f4bf75"&gt;&amp;lt;input&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;type=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"text"&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;id=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"text-color-hex"&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;value=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"#000000"&lt;/span&gt; &lt;span style="color: #f4bf75"&gt;/&amp;gt;&lt;/span&gt;
  116. &lt;/pre&gt;&lt;/td&gt;
  117. &lt;/tr&gt;
  118. &lt;tr id="line-8" class="lineno"&gt;
  119. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;8&lt;/pre&gt;&lt;/td&gt;
  120. &lt;td class="rouge-code"&gt;&lt;pre&gt;      &lt;span style="color: #f4bf75"&gt;&amp;lt;p&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;id=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"text-color-error"&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;class=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"error-message"&lt;/span&gt;&lt;span style="color: #f4bf75"&gt;&amp;gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
  121. &lt;/pre&gt;&lt;/td&gt;
  122. &lt;/tr&gt;
  123. &lt;tr id="line-9" class="lineno"&gt;
  124. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;9&lt;/pre&gt;&lt;/td&gt;
  125. &lt;td class="rouge-code"&gt;&lt;pre&gt;    &lt;span style="color: #f4bf75"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
  126. &lt;/pre&gt;&lt;/td&gt;
  127. &lt;/tr&gt;
  128. &lt;tr id="line-10" class="lineno"&gt;
  129. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;10&lt;/pre&gt;&lt;/td&gt;
  130. &lt;td class="rouge-code"&gt;&lt;pre&gt;
  131. &lt;/pre&gt;&lt;/td&gt;
  132. &lt;/tr&gt;
  133. &lt;tr id="line-11" class="lineno"&gt;
  134. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;11&lt;/pre&gt;&lt;/td&gt;
  135. &lt;td class="rouge-code"&gt;&lt;pre&gt;    &lt;span style="color: #f4bf75"&gt;&amp;lt;div&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;class=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"color-picker"&lt;/span&gt;&lt;span style="color: #f4bf75"&gt;&amp;gt;&lt;/span&gt;
  136. &lt;/pre&gt;&lt;/td&gt;
  137. &lt;/tr&gt;
  138. &lt;tr id="line-12" class="lineno"&gt;
  139. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;12&lt;/pre&gt;&lt;/td&gt;
  140. &lt;td class="rouge-code"&gt;&lt;pre&gt;      &lt;span style="color: #f4bf75"&gt;&amp;lt;label&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;for=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"bg-color"&lt;/span&gt;&lt;span style="color: #f4bf75"&gt;&amp;gt;&lt;/span&gt;Background Color:&lt;span style="color: #f4bf75"&gt;&amp;lt;/label&amp;gt;&lt;/span&gt;
  141. &lt;/pre&gt;&lt;/td&gt;
  142. &lt;/tr&gt;
  143. &lt;tr id="line-13" class="lineno"&gt;
  144. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;13&lt;/pre&gt;&lt;/td&gt;
  145. &lt;td class="rouge-code"&gt;&lt;pre&gt;      &lt;span style="color: #f4bf75"&gt;&amp;lt;input&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;type=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"color"&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;id=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"bg-color"&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;value=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"#FFFFFF"&lt;/span&gt; &lt;span style="color: #f4bf75"&gt;/&amp;gt;&lt;/span&gt;
  146. &lt;/pre&gt;&lt;/td&gt;
  147. &lt;/tr&gt;
  148. &lt;tr id="line-14" class="lineno"&gt;
  149. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;14&lt;/pre&gt;&lt;/td&gt;
  150. &lt;td class="rouge-code"&gt;&lt;pre&gt;      &lt;span style="color: #f4bf75"&gt;&amp;lt;input&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;type=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"text"&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;id=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"bg-color-hex"&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;value=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"#FFFFFF"&lt;/span&gt; &lt;span style="color: #f4bf75"&gt;/&amp;gt;&lt;/span&gt;
  151. &lt;/pre&gt;&lt;/td&gt;
  152. &lt;/tr&gt;
  153. &lt;tr id="line-15" class="lineno"&gt;
  154. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;15&lt;/pre&gt;&lt;/td&gt;
  155. &lt;td class="rouge-code"&gt;&lt;pre&gt;      &lt;span style="color: #f4bf75"&gt;&amp;lt;p&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;id=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"bg-color-error"&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;class=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"error-message"&lt;/span&gt;&lt;span style="color: #f4bf75"&gt;&amp;gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
  156. &lt;/pre&gt;&lt;/td&gt;
  157. &lt;/tr&gt;
  158. &lt;tr id="line-16" class="lineno"&gt;
  159. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;16&lt;/pre&gt;&lt;/td&gt;
  160. &lt;td class="rouge-code"&gt;&lt;pre&gt;    &lt;span style="color: #f4bf75"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
  161. &lt;/pre&gt;&lt;/td&gt;
  162. &lt;/tr&gt;
  163. &lt;tr id="line-17" class="lineno"&gt;
  164. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;17&lt;/pre&gt;&lt;/td&gt;
  165. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #f4bf75"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
  166. &lt;/pre&gt;&lt;/td&gt;
  167. &lt;/tr&gt;
  168. &lt;tr id="line-18" class="lineno"&gt;
  169. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;18&lt;/pre&gt;&lt;/td&gt;
  170. &lt;td class="rouge-code"&gt;&lt;pre&gt;
  171. &lt;/pre&gt;&lt;/td&gt;
  172. &lt;/tr&gt;
  173. &lt;tr id="line-19" class="lineno"&gt;
  174. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;19&lt;/pre&gt;&lt;/td&gt;
  175. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #f4bf75"&gt;&amp;lt;div&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;class=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"output"&lt;/span&gt;&lt;span style="color: #f4bf75"&gt;&amp;gt;&lt;/span&gt;
  176. &lt;/pre&gt;&lt;/td&gt;
  177. &lt;/tr&gt;
  178. &lt;tr id="line-20" class="lineno"&gt;
  179. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;20&lt;/pre&gt;&lt;/td&gt;
  180. &lt;td class="rouge-code"&gt;&lt;pre&gt;    &lt;span style="color: #f4bf75"&gt;&amp;lt;div&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;class=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"results"&lt;/span&gt;&lt;span style="color: #f4bf75"&gt;&amp;gt;&lt;/span&gt;
  181. &lt;/pre&gt;&lt;/td&gt;
  182. &lt;/tr&gt;
  183. &lt;tr id="line-21" class="lineno"&gt;
  184. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;21&lt;/pre&gt;&lt;/td&gt;
  185. &lt;td class="rouge-code"&gt;&lt;pre&gt;      &lt;span style="color: #f4bf75"&gt;&amp;lt;div&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;class=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"results-item"&lt;/span&gt;&lt;span style="color: #f4bf75"&gt;&amp;gt;&lt;/span&gt;
  186. &lt;/pre&gt;&lt;/td&gt;
  187. &lt;/tr&gt;
  188. &lt;tr id="line-22" class="lineno"&gt;
  189. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;22&lt;/pre&gt;&lt;/td&gt;
  190. &lt;td class="rouge-code"&gt;&lt;pre&gt;        &lt;span style="color: #f4bf75"&gt;&amp;lt;h3&amp;gt;&lt;/span&gt;WCAG AA&lt;span style="color: #f4bf75"&gt;&amp;lt;/h3&amp;gt;&lt;/span&gt;
  191. &lt;/pre&gt;&lt;/td&gt;
  192. &lt;/tr&gt;
  193. &lt;tr id="line-23" class="lineno"&gt;
  194. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;23&lt;/pre&gt;&lt;/td&gt;
  195. &lt;td class="rouge-code"&gt;&lt;pre&gt;        &lt;span style="color: #f4bf75"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;Normal Text: &lt;span style="color: #f4bf75"&gt;&amp;lt;span&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;id=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"normal_text_aa"&lt;/span&gt;&lt;span style="color: #f4bf75"&gt;&amp;gt;&lt;/span&gt;Pass&lt;span style="color: #f4bf75"&gt;&amp;lt;/span&amp;gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
  196. &lt;/pre&gt;&lt;/td&gt;
  197. &lt;/tr&gt;
  198. &lt;tr id="line-24" class="lineno"&gt;
  199. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;24&lt;/pre&gt;&lt;/td&gt;
  200. &lt;td class="rouge-code"&gt;&lt;pre&gt;        &lt;span style="color: #f4bf75"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;Large Text: &lt;span style="color: #f4bf75"&gt;&amp;lt;span&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;id=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"large_text_aa"&lt;/span&gt;&lt;span style="color: #f4bf75"&gt;&amp;gt;&lt;/span&gt;Pass&lt;span style="color: #f4bf75"&gt;&amp;lt;/span&amp;gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
  201. &lt;/pre&gt;&lt;/td&gt;
  202. &lt;/tr&gt;
  203. &lt;tr id="line-25" class="lineno"&gt;
  204. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;25&lt;/pre&gt;&lt;/td&gt;
  205. &lt;td class="rouge-code"&gt;&lt;pre&gt;      &lt;span style="color: #f4bf75"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
  206. &lt;/pre&gt;&lt;/td&gt;
  207. &lt;/tr&gt;
  208. &lt;tr id="line-26" class="lineno"&gt;
  209. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;26&lt;/pre&gt;&lt;/td&gt;
  210. &lt;td class="rouge-code"&gt;&lt;pre&gt;      &lt;span style="color: #f4bf75"&gt;&amp;lt;div&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;class=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"results-item"&lt;/span&gt;&lt;span style="color: #f4bf75"&gt;&amp;gt;&lt;/span&gt;
  211. &lt;/pre&gt;&lt;/td&gt;
  212. &lt;/tr&gt;
  213. &lt;tr id="line-27" class="lineno"&gt;
  214. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;27&lt;/pre&gt;&lt;/td&gt;
  215. &lt;td class="rouge-code"&gt;&lt;pre&gt;        &lt;span style="color: #f4bf75"&gt;&amp;lt;h3&amp;gt;&lt;/span&gt;WCAG AAA&lt;span style="color: #f4bf75"&gt;&amp;lt;/h3&amp;gt;&lt;/span&gt;
  216. &lt;/pre&gt;&lt;/td&gt;
  217. &lt;/tr&gt;
  218. &lt;tr id="line-28" class="lineno"&gt;
  219. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;28&lt;/pre&gt;&lt;/td&gt;
  220. &lt;td class="rouge-code"&gt;&lt;pre&gt;        &lt;span style="color: #f4bf75"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;Normal Text: &lt;span style="color: #f4bf75"&gt;&amp;lt;span&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;id=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"normal_text_aaa"&lt;/span&gt;&lt;span style="color: #f4bf75"&gt;&amp;gt;&lt;/span&gt;Pass&lt;span style="color: #f4bf75"&gt;&amp;lt;/span&amp;gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
  221. &lt;/pre&gt;&lt;/td&gt;
  222. &lt;/tr&gt;
  223. &lt;tr id="line-29" class="lineno"&gt;
  224. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;29&lt;/pre&gt;&lt;/td&gt;
  225. &lt;td class="rouge-code"&gt;&lt;pre&gt;        &lt;span style="color: #f4bf75"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;Large Text: &lt;span style="color: #f4bf75"&gt;&amp;lt;span&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;id=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"large_text_aaa"&lt;/span&gt;&lt;span style="color: #f4bf75"&gt;&amp;gt;&lt;/span&gt;Pass&lt;span style="color: #f4bf75"&gt;&amp;lt;/span&amp;gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
  226. &lt;/pre&gt;&lt;/td&gt;
  227. &lt;/tr&gt;
  228. &lt;tr id="line-30" class="lineno"&gt;
  229. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;30&lt;/pre&gt;&lt;/td&gt;
  230. &lt;td class="rouge-code"&gt;&lt;pre&gt;      &lt;span style="color: #f4bf75"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
  231. &lt;/pre&gt;&lt;/td&gt;
  232. &lt;/tr&gt;
  233. &lt;tr id="line-31" class="lineno"&gt;
  234. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;31&lt;/pre&gt;&lt;/td&gt;
  235. &lt;td class="rouge-code"&gt;&lt;pre&gt;    &lt;span style="color: #f4bf75"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
  236. &lt;/pre&gt;&lt;/td&gt;
  237. &lt;/tr&gt;
  238. &lt;tr id="line-32" class="lineno"&gt;
  239. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;32&lt;/pre&gt;&lt;/td&gt;
  240. &lt;td class="rouge-code"&gt;&lt;pre&gt;
  241. &lt;/pre&gt;&lt;/td&gt;
  242. &lt;/tr&gt;
  243. &lt;tr id="line-33" class="lineno"&gt;
  244. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;33&lt;/pre&gt;&lt;/td&gt;
  245. &lt;td class="rouge-code"&gt;&lt;pre&gt;    &lt;span style="color: #f4bf75"&gt;&amp;lt;div&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;id=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"preview"&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;class=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"preview"&lt;/span&gt;&lt;span style="color: #f4bf75"&gt;&amp;gt;&lt;/span&gt;
  246. &lt;/pre&gt;&lt;/td&gt;
  247. &lt;/tr&gt;
  248. &lt;tr id="line-34" class="lineno"&gt;
  249. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;34&lt;/pre&gt;&lt;/td&gt;
  250. &lt;td class="rouge-code"&gt;&lt;pre&gt;      &lt;span style="color: #f4bf75"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;This is a preview text&lt;span style="color: #f4bf75"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
  251. &lt;/pre&gt;&lt;/td&gt;
  252. &lt;/tr&gt;
  253. &lt;tr id="line-35" class="lineno"&gt;
  254. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;35&lt;/pre&gt;&lt;/td&gt;
  255. &lt;td class="rouge-code"&gt;&lt;pre&gt;    &lt;span style="color: #f4bf75"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
  256. &lt;/pre&gt;&lt;/td&gt;
  257. &lt;/tr&gt;
  258. &lt;tr id="line-36" class="lineno"&gt;
  259. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;36&lt;/pre&gt;&lt;/td&gt;
  260. &lt;td class="rouge-code"&gt;&lt;pre&gt;
  261. &lt;/pre&gt;&lt;/td&gt;
  262. &lt;/tr&gt;
  263. &lt;tr id="line-37" class="lineno"&gt;
  264. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;37&lt;/pre&gt;&lt;/td&gt;
  265. &lt;td class="rouge-code"&gt;&lt;pre&gt;    &lt;span style="color: #f4bf75"&gt;&amp;lt;div&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;class=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"ratio"&lt;/span&gt;&lt;span style="color: #f4bf75"&gt;&amp;gt;&lt;/span&gt;
  266. &lt;/pre&gt;&lt;/td&gt;
  267. &lt;/tr&gt;
  268. &lt;tr id="line-38" class="lineno"&gt;
  269. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;38&lt;/pre&gt;&lt;/td&gt;
  270. &lt;td class="rouge-code"&gt;&lt;pre&gt;      &lt;span style="color: #f4bf75"&gt;&amp;lt;h2&amp;gt;&lt;/span&gt;Contrast Ratio: &lt;span style="color: #f4bf75"&gt;&amp;lt;span&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;id=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"contrast-ratio"&lt;/span&gt;&lt;span style="color: #f4bf75"&gt;&amp;gt;&amp;lt;/span&amp;gt;&amp;lt;/h2&amp;gt;&lt;/span&gt;
  271. &lt;/pre&gt;&lt;/td&gt;
  272. &lt;/tr&gt;
  273. &lt;tr id="line-39" class="lineno"&gt;
  274. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;39&lt;/pre&gt;&lt;/td&gt;
  275. &lt;td class="rouge-code"&gt;&lt;pre&gt;    &lt;span style="color: #f4bf75"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
  276. &lt;/pre&gt;&lt;/td&gt;
  277. &lt;/tr&gt;
  278. &lt;tr id="line-40" class="lineno"&gt;
  279. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;40&lt;/pre&gt;&lt;/td&gt;
  280. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #f4bf75"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
  281. &lt;/pre&gt;&lt;/td&gt;
  282. &lt;/tr&gt;
  283. &lt;tr id="line-41" class="lineno"&gt;
  284. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;41&lt;/pre&gt;&lt;/td&gt;
  285. &lt;td class="rouge-code"&gt;&lt;pre&gt;
  286. &lt;/pre&gt;&lt;/td&gt;
  287. &lt;/tr&gt;
  288. &lt;tr id="line-42" class="lineno"&gt;
  289. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;42&lt;/pre&gt;&lt;/td&gt;
  290. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #f4bf75"&gt;&amp;lt;div&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;class=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"error"&lt;/span&gt;&lt;span style="color: #f4bf75"&gt;&amp;gt;&lt;/span&gt;
  291. &lt;/pre&gt;&lt;/td&gt;
  292. &lt;/tr&gt;
  293. &lt;tr id="line-43" class="lineno"&gt;
  294. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;43&lt;/pre&gt;&lt;/td&gt;
  295. &lt;td class="rouge-code"&gt;&lt;pre&gt;    &lt;span style="color: #f4bf75"&gt;&amp;lt;p&lt;/span&gt; &lt;span style="color: #6a9fb5"&gt;id=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"error-message"&lt;/span&gt;&lt;span style="color: #f4bf75"&gt;&amp;gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
  296. &lt;/pre&gt;&lt;/td&gt;
  297. &lt;/tr&gt;
  298. &lt;tr id="line-44" class="lineno"&gt;
  299. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;44&lt;/pre&gt;&lt;/td&gt;
  300. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #f4bf75"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
  301. &lt;/pre&gt;&lt;/td&gt;
  302. &lt;/tr&gt;
  303. &lt;tr id="line-45" class="lineno"&gt;
  304. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;45&lt;/pre&gt;&lt;/td&gt;
  305. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #f4bf75"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
  306. &lt;/pre&gt;&lt;/td&gt;
  307. &lt;/tr&gt;
  308. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  309. &lt;h2 id="toc-sxei-styling-with-css"&gt;Styling with CSS&lt;/h2&gt;
  310. &lt;p&gt;We'll start by adding some basic styles to the body, the enclosing container, and the title.&lt;/p&gt;
  311. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table css"&gt;&lt;tbody&gt;
  312. &lt;tr id="line-1" class="lineno"&gt;
  313. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  314. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #f4bf75"&gt;body&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  315. &lt;/pre&gt;&lt;/td&gt;
  316. &lt;/tr&gt;
  317. &lt;tr id="line-2" class="lineno"&gt;
  318. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  319. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;background-color&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;#fff&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  320. &lt;/pre&gt;&lt;/td&gt;
  321. &lt;/tr&gt;
  322. &lt;tr id="line-3" class="lineno"&gt;
  323. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;3&lt;/pre&gt;&lt;/td&gt;
  324. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;padding&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;20px&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  325. &lt;/pre&gt;&lt;/td&gt;
  326. &lt;/tr&gt;
  327. &lt;tr id="line-4" class="lineno"&gt;
  328. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;4&lt;/pre&gt;&lt;/td&gt;
  329. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  330. &lt;/pre&gt;&lt;/td&gt;
  331. &lt;/tr&gt;
  332. &lt;tr id="line-5" class="lineno"&gt;
  333. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;5&lt;/pre&gt;&lt;/td&gt;
  334. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #f4bf75"&gt;.container&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  335. &lt;/pre&gt;&lt;/td&gt;
  336. &lt;/tr&gt;
  337. &lt;tr id="line-6" class="lineno"&gt;
  338. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;6&lt;/pre&gt;&lt;/td&gt;
  339. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;display&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;flex&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  340. &lt;/pre&gt;&lt;/td&gt;
  341. &lt;/tr&gt;
  342. &lt;tr id="line-7" class="lineno"&gt;
  343. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;7&lt;/pre&gt;&lt;/td&gt;
  344. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;flex-direction&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;column&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  345. &lt;/pre&gt;&lt;/td&gt;
  346. &lt;/tr&gt;
  347. &lt;tr id="line-8" class="lineno"&gt;
  348. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;8&lt;/pre&gt;&lt;/td&gt;
  349. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;align-items&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;center&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  350. &lt;/pre&gt;&lt;/td&gt;
  351. &lt;/tr&gt;
  352. &lt;tr id="line-9" class="lineno"&gt;
  353. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;9&lt;/pre&gt;&lt;/td&gt;
  354. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;max-width&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;800px&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  355. &lt;/pre&gt;&lt;/td&gt;
  356. &lt;/tr&gt;
  357. &lt;tr id="line-10" class="lineno"&gt;
  358. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;10&lt;/pre&gt;&lt;/td&gt;
  359. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;margin&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;0&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;auto&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  360. &lt;/pre&gt;&lt;/td&gt;
  361. &lt;/tr&gt;
  362. &lt;tr id="line-11" class="lineno"&gt;
  363. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;11&lt;/pre&gt;&lt;/td&gt;
  364. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;gap&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;8px&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  365. &lt;/pre&gt;&lt;/td&gt;
  366. &lt;/tr&gt;
  367. &lt;tr id="line-12" class="lineno"&gt;
  368. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;12&lt;/pre&gt;&lt;/td&gt;
  369. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;border-radius&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;8px&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  370. &lt;/pre&gt;&lt;/td&gt;
  371. &lt;/tr&gt;
  372. &lt;tr id="line-13" class="lineno"&gt;
  373. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;13&lt;/pre&gt;&lt;/td&gt;
  374. &lt;td class="rouge-code"&gt;&lt;pre&gt;  
  375. &lt;/pre&gt;&lt;/td&gt;
  376. &lt;/tr&gt;
  377. &lt;tr id="line-14" class="lineno"&gt;
  378. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;14&lt;/pre&gt;&lt;/td&gt;
  379. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  380. &lt;/pre&gt;&lt;/td&gt;
  381. &lt;/tr&gt;
  382. &lt;tr id="line-15" class="lineno"&gt;
  383. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;15&lt;/pre&gt;&lt;/td&gt;
  384. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #f4bf75"&gt;h1&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  385. &lt;/pre&gt;&lt;/td&gt;
  386. &lt;/tr&gt;
  387. &lt;tr id="line-16" class="lineno"&gt;
  388. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;16&lt;/pre&gt;&lt;/td&gt;
  389. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;text-align&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;center&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  390. &lt;/pre&gt;&lt;/td&gt;
  391. &lt;/tr&gt;
  392. &lt;tr id="line-17" class="lineno"&gt;
  393. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;17&lt;/pre&gt;&lt;/td&gt;
  394. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;margin-bottom&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;32px&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  395. &lt;/pre&gt;&lt;/td&gt;
  396. &lt;/tr&gt;
  397. &lt;tr id="line-18" class="lineno"&gt;
  398. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;18&lt;/pre&gt;&lt;/td&gt;
  399. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;color&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;#333&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  400. &lt;/pre&gt;&lt;/td&gt;
  401. &lt;/tr&gt;
  402. &lt;tr id="line-19" class="lineno"&gt;
  403. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;19&lt;/pre&gt;&lt;/td&gt;
  404. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  405. &lt;/pre&gt;&lt;/td&gt;
  406. &lt;/tr&gt;
  407. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  408. &lt;p&gt;Align the color picker elements using Flexbox to ensure child elements (i.e. the input and label) are stacked vertically.&lt;/p&gt;
  409. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table css"&gt;&lt;tbody&gt;
  410. &lt;tr id="line-1" class="lineno"&gt;
  411. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  412. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #f4bf75"&gt;.color-pickers&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  413. &lt;/pre&gt;&lt;/td&gt;
  414. &lt;/tr&gt;
  415. &lt;tr id="line-2" class="lineno"&gt;
  416. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  417. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;display&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;flex&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  418. &lt;/pre&gt;&lt;/td&gt;
  419. &lt;/tr&gt;
  420. &lt;tr id="line-3" class="lineno"&gt;
  421. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;3&lt;/pre&gt;&lt;/td&gt;
  422. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;gap&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;20px&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  423. &lt;/pre&gt;&lt;/td&gt;
  424. &lt;/tr&gt;
  425. &lt;tr id="line-4" class="lineno"&gt;
  426. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;4&lt;/pre&gt;&lt;/td&gt;
  427. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;justify-content&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;center&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  428. &lt;/pre&gt;&lt;/td&gt;
  429. &lt;/tr&gt;
  430. &lt;tr id="line-5" class="lineno"&gt;
  431. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;5&lt;/pre&gt;&lt;/td&gt;
  432. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;margin-bottom&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;20px&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  433. &lt;/pre&gt;&lt;/td&gt;
  434. &lt;/tr&gt;
  435. &lt;tr id="line-6" class="lineno"&gt;
  436. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;6&lt;/pre&gt;&lt;/td&gt;
  437. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  438. &lt;/pre&gt;&lt;/td&gt;
  439. &lt;/tr&gt;
  440. &lt;tr id="line-7" class="lineno"&gt;
  441. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;7&lt;/pre&gt;&lt;/td&gt;
  442. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #f4bf75"&gt;.color-picker&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  443. &lt;/pre&gt;&lt;/td&gt;
  444. &lt;/tr&gt;
  445. &lt;tr id="line-8" class="lineno"&gt;
  446. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;8&lt;/pre&gt;&lt;/td&gt;
  447. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;display&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;flex&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  448. &lt;/pre&gt;&lt;/td&gt;
  449. &lt;/tr&gt;
  450. &lt;tr id="line-9" class="lineno"&gt;
  451. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;9&lt;/pre&gt;&lt;/td&gt;
  452. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;flex-direction&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;column&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  453. &lt;/pre&gt;&lt;/td&gt;
  454. &lt;/tr&gt;
  455. &lt;tr id="line-10" class="lineno"&gt;
  456. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;10&lt;/pre&gt;&lt;/td&gt;
  457. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;width&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;160px&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  458. &lt;/pre&gt;&lt;/td&gt;
  459. &lt;/tr&gt;
  460. &lt;tr id="line-11" class="lineno"&gt;
  461. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;11&lt;/pre&gt;&lt;/td&gt;
  462. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;gap&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;4px&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  463. &lt;/pre&gt;&lt;/td&gt;
  464. &lt;/tr&gt;
  465. &lt;tr id="line-12" class="lineno"&gt;
  466. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;12&lt;/pre&gt;&lt;/td&gt;
  467. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  468. &lt;/pre&gt;&lt;/td&gt;
  469. &lt;/tr&gt;
  470. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  471. &lt;p&gt;Style the inputs and labels as shown below:&lt;/p&gt;
  472. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table css"&gt;&lt;tbody&gt;
  473. &lt;tr id="line-1" class="lineno"&gt;
  474. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  475. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #f4bf75"&gt;label&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  476. &lt;/pre&gt;&lt;/td&gt;
  477. &lt;/tr&gt;
  478. &lt;tr id="line-2" class="lineno"&gt;
  479. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  480. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;font-weight&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;600&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  481. &lt;/pre&gt;&lt;/td&gt;
  482. &lt;/tr&gt;
  483. &lt;tr id="line-3" class="lineno"&gt;
  484. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;3&lt;/pre&gt;&lt;/td&gt;
  485. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;color&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;rgb&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;0&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #90a959"&gt;0&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #90a959"&gt;0&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #90a959"&gt;0.7&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  486. &lt;/pre&gt;&lt;/td&gt;
  487. &lt;/tr&gt;
  488. &lt;tr id="line-4" class="lineno"&gt;
  489. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;4&lt;/pre&gt;&lt;/td&gt;
  490. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  491. &lt;/pre&gt;&lt;/td&gt;
  492. &lt;/tr&gt;
  493. &lt;tr id="line-5" class="lineno"&gt;
  494. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;5&lt;/pre&gt;&lt;/td&gt;
  495. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #f4bf75"&gt;input&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;[&lt;/span&gt;&lt;span style="color: #f4bf75"&gt;type&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"color"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;]&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  496. &lt;/pre&gt;&lt;/td&gt;
  497. &lt;/tr&gt;
  498. &lt;tr id="line-6" class="lineno"&gt;
  499. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;6&lt;/pre&gt;&lt;/td&gt;
  500. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;width&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;100%&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  501. &lt;/pre&gt;&lt;/td&gt;
  502. &lt;/tr&gt;
  503. &lt;tr id="line-7" class="lineno"&gt;
  504. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;7&lt;/pre&gt;&lt;/td&gt;
  505. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;height&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;40px&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  506. &lt;/pre&gt;&lt;/td&gt;
  507. &lt;/tr&gt;
  508. &lt;tr id="line-8" class="lineno"&gt;
  509. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;8&lt;/pre&gt;&lt;/td&gt;
  510. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;border&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;1px&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;solid&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;rgb&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;0&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #90a959"&gt;0&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #90a959"&gt;0&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #90a959"&gt;0.05&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  511. &lt;/pre&gt;&lt;/td&gt;
  512. &lt;/tr&gt;
  513. &lt;tr id="line-9" class="lineno"&gt;
  514. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;9&lt;/pre&gt;&lt;/td&gt;
  515. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;border-radius&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;4px&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  516. &lt;/pre&gt;&lt;/td&gt;
  517. &lt;/tr&gt;
  518. &lt;tr id="line-10" class="lineno"&gt;
  519. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;10&lt;/pre&gt;&lt;/td&gt;
  520. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;cursor&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;pointer&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  521. &lt;/pre&gt;&lt;/td&gt;
  522. &lt;/tr&gt;
  523. &lt;tr id="line-11" class="lineno"&gt;
  524. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;11&lt;/pre&gt;&lt;/td&gt;
  525. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  526. &lt;/pre&gt;&lt;/td&gt;
  527. &lt;/tr&gt;
  528. &lt;tr id="line-12" class="lineno"&gt;
  529. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;12&lt;/pre&gt;&lt;/td&gt;
  530. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #f4bf75"&gt;input&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;[&lt;/span&gt;&lt;span style="color: #f4bf75"&gt;type&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt;&lt;span style="color: #90a959"&gt;"text"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;]&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  531. &lt;/pre&gt;&lt;/td&gt;
  532. &lt;/tr&gt;
  533. &lt;tr id="line-13" class="lineno"&gt;
  534. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;13&lt;/pre&gt;&lt;/td&gt;
  535. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;padding&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;8px&lt;/span&gt; &lt;span style="color: #90a959"&gt;12px&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  536. &lt;/pre&gt;&lt;/td&gt;
  537. &lt;/tr&gt;
  538. &lt;tr id="line-14" class="lineno"&gt;
  539. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;14&lt;/pre&gt;&lt;/td&gt;
  540. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;border&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;1px&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;solid&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;rgb&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;0&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #90a959"&gt;0&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #90a959"&gt;0&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #90a959"&gt;0.05&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  541. &lt;/pre&gt;&lt;/td&gt;
  542. &lt;/tr&gt;
  543. &lt;tr id="line-15" class="lineno"&gt;
  544. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;15&lt;/pre&gt;&lt;/td&gt;
  545. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;border-radius&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;4px&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  546. &lt;/pre&gt;&lt;/td&gt;
  547. &lt;/tr&gt;
  548. &lt;tr id="line-16" class="lineno"&gt;
  549. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;16&lt;/pre&gt;&lt;/td&gt;
  550. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;text-transform&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;uppercase&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  551. &lt;/pre&gt;&lt;/td&gt;
  552. &lt;/tr&gt;
  553. &lt;tr id="line-17" class="lineno"&gt;
  554. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;17&lt;/pre&gt;&lt;/td&gt;
  555. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  556. &lt;/pre&gt;&lt;/td&gt;
  557. &lt;/tr&gt;
  558. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  559. &lt;p&gt;The display area will indicate whether the selected colors have passed the minimum contrast ratio requirement. If they fail, we will show a &lt;em&gt;fail&lt;/em&gt; message, otherwise a &lt;em&gt;pass&lt;/em&gt; message will be displayed.&lt;/p&gt;
  560. &lt;p&gt; Here are the styles for the display area.&lt;/p&gt;
  561. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table css"&gt;&lt;tbody&gt;
  562. &lt;tr id="line-1" class="lineno"&gt;
  563. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  564. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #f4bf75"&gt;.results&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  565. &lt;/pre&gt;&lt;/td&gt;
  566. &lt;/tr&gt;
  567. &lt;tr id="line-2" class="lineno"&gt;
  568. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  569. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;margin-bottom&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;20px&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  570. &lt;/pre&gt;&lt;/td&gt;
  571. &lt;/tr&gt;
  572. &lt;tr id="line-3" class="lineno"&gt;
  573. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;3&lt;/pre&gt;&lt;/td&gt;
  574. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;display&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;flex&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  575. &lt;/pre&gt;&lt;/td&gt;
  576. &lt;/tr&gt;
  577. &lt;tr id="line-4" class="lineno"&gt;
  578. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;4&lt;/pre&gt;&lt;/td&gt;
  579. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;gap&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;20px&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  580. &lt;/pre&gt;&lt;/td&gt;
  581. &lt;/tr&gt;
  582. &lt;tr id="line-5" class="lineno"&gt;
  583. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;5&lt;/pre&gt;&lt;/td&gt;
  584. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;justify-content&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;center&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  585. &lt;/pre&gt;&lt;/td&gt;
  586. &lt;/tr&gt;
  587. &lt;tr id="line-6" class="lineno"&gt;
  588. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;6&lt;/pre&gt;&lt;/td&gt;
  589. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  590. &lt;/pre&gt;&lt;/td&gt;
  591. &lt;/tr&gt;
  592. &lt;tr id="line-7" class="lineno"&gt;
  593. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;7&lt;/pre&gt;&lt;/td&gt;
  594. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #f4bf75"&gt;.results-item&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  595. &lt;/pre&gt;&lt;/td&gt;
  596. &lt;/tr&gt;
  597. &lt;tr id="line-8" class="lineno"&gt;
  598. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;8&lt;/pre&gt;&lt;/td&gt;
  599. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;text-align&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;center&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  600. &lt;/pre&gt;&lt;/td&gt;
  601. &lt;/tr&gt;
  602. &lt;tr id="line-9" class="lineno"&gt;
  603. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;9&lt;/pre&gt;&lt;/td&gt;
  604. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;padding&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;15px&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  605. &lt;/pre&gt;&lt;/td&gt;
  606. &lt;/tr&gt;
  607. &lt;tr id="line-10" class="lineno"&gt;
  608. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;10&lt;/pre&gt;&lt;/td&gt;
  609. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;min-width&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;130px&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  610. &lt;/pre&gt;&lt;/td&gt;
  611. &lt;/tr&gt;
  612. &lt;tr id="line-11" class="lineno"&gt;
  613. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;11&lt;/pre&gt;&lt;/td&gt;
  614. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;border&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;1px&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;solid&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;rgb&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;0&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #90a959"&gt;0&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #90a959"&gt;0&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #90a959"&gt;0.05&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  615. &lt;/pre&gt;&lt;/td&gt;
  616. &lt;/tr&gt;
  617. &lt;tr id="line-12" class="lineno"&gt;
  618. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;12&lt;/pre&gt;&lt;/td&gt;
  619. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;border-radius&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;8px&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  620. &lt;/pre&gt;&lt;/td&gt;
  621. &lt;/tr&gt;
  622. &lt;tr id="line-13" class="lineno"&gt;
  623. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;13&lt;/pre&gt;&lt;/td&gt;
  624. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  625. &lt;/pre&gt;&lt;/td&gt;
  626. &lt;/tr&gt;
  627. &lt;tr id="line-14" class="lineno"&gt;
  628. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;14&lt;/pre&gt;&lt;/td&gt;
  629. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #f4bf75"&gt;.results-item&lt;/span&gt; &lt;span style="color: #f4bf75"&gt;h3&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  630. &lt;/pre&gt;&lt;/td&gt;
  631. &lt;/tr&gt;
  632. &lt;tr id="line-15" class="lineno"&gt;
  633. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;15&lt;/pre&gt;&lt;/td&gt;
  634. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;margin-bottom&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;10px&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  635. &lt;/pre&gt;&lt;/td&gt;
  636. &lt;/tr&gt;
  637. &lt;tr id="line-16" class="lineno"&gt;
  638. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;16&lt;/pre&gt;&lt;/td&gt;
  639. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;text-align&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;center&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  640. &lt;/pre&gt;&lt;/td&gt;
  641. &lt;/tr&gt;
  642. &lt;tr id="line-17" class="lineno"&gt;
  643. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;17&lt;/pre&gt;&lt;/td&gt;
  644. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;color&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;#333&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  645. &lt;/pre&gt;&lt;/td&gt;
  646. &lt;/tr&gt;
  647. &lt;tr id="line-18" class="lineno"&gt;
  648. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;18&lt;/pre&gt;&lt;/td&gt;
  649. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  650. &lt;/pre&gt;&lt;/td&gt;
  651. &lt;/tr&gt;
  652. &lt;tr id="line-19" class="lineno"&gt;
  653. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;19&lt;/pre&gt;&lt;/td&gt;
  654. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #f4bf75"&gt;.results-item&lt;/span&gt; &lt;span style="color: #f4bf75"&gt;p&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  655. &lt;/pre&gt;&lt;/td&gt;
  656. &lt;/tr&gt;
  657. &lt;tr id="line-20" class="lineno"&gt;
  658. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;20&lt;/pre&gt;&lt;/td&gt;
  659. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;margin-bottom&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;5px&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  660. &lt;/pre&gt;&lt;/td&gt;
  661. &lt;/tr&gt;
  662. &lt;tr id="line-21" class="lineno"&gt;
  663. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;21&lt;/pre&gt;&lt;/td&gt;
  664. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  665. &lt;/pre&gt;&lt;/td&gt;
  666. &lt;/tr&gt;
  667. &lt;tr id="line-22" class="lineno"&gt;
  668. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;22&lt;/pre&gt;&lt;/td&gt;
  669. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #f4bf75"&gt;.pass&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  670. &lt;/pre&gt;&lt;/td&gt;
  671. &lt;/tr&gt;
  672. &lt;tr id="line-23" class="lineno"&gt;
  673. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;23&lt;/pre&gt;&lt;/td&gt;
  674. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;color&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;#38a169&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  675. &lt;/pre&gt;&lt;/td&gt;
  676. &lt;/tr&gt;
  677. &lt;tr id="line-24" class="lineno"&gt;
  678. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;24&lt;/pre&gt;&lt;/td&gt;
  679. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;font-weight&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;bold&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  680. &lt;/pre&gt;&lt;/td&gt;
  681. &lt;/tr&gt;
  682. &lt;tr id="line-25" class="lineno"&gt;
  683. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;25&lt;/pre&gt;&lt;/td&gt;
  684. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  685. &lt;/pre&gt;&lt;/td&gt;
  686. &lt;/tr&gt;
  687. &lt;tr id="line-26" class="lineno"&gt;
  688. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;26&lt;/pre&gt;&lt;/td&gt;
  689. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #f4bf75"&gt;.fail&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt;
  690. &lt;/pre&gt;&lt;/td&gt;
  691. &lt;/tr&gt;
  692. &lt;tr id="line-27" class="lineno"&gt;
  693. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;27&lt;/pre&gt;&lt;/td&gt;
  694. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #f4bf75"&gt;.error-message&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  695. &lt;/pre&gt;&lt;/td&gt;
  696. &lt;/tr&gt;
  697. &lt;tr id="line-28" class="lineno"&gt;
  698. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;28&lt;/pre&gt;&lt;/td&gt;
  699. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;color&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;#e53e3e&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  700. &lt;/pre&gt;&lt;/td&gt;
  701. &lt;/tr&gt;
  702. &lt;tr id="line-29" class="lineno"&gt;
  703. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;29&lt;/pre&gt;&lt;/td&gt;
  704. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;font-weight&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;bold&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  705. &lt;/pre&gt;&lt;/td&gt;
  706. &lt;/tr&gt;
  707. &lt;tr id="line-30" class="lineno"&gt;
  708. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;30&lt;/pre&gt;&lt;/td&gt;
  709. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  710. &lt;/pre&gt;&lt;/td&gt;
  711. &lt;/tr&gt;
  712. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  713. &lt;p&gt;Add these styles to the preview and contrast ratio elements .&lt;/p&gt;
  714. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table css"&gt;&lt;tbody&gt;
  715. &lt;tr id="line-1" class="lineno"&gt;
  716. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  717. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #f4bf75"&gt;.preview&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  718. &lt;/pre&gt;&lt;/td&gt;
  719. &lt;/tr&gt;
  720. &lt;tr id="line-2" class="lineno"&gt;
  721. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  722. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;display&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;flex&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  723. &lt;/pre&gt;&lt;/td&gt;
  724. &lt;/tr&gt;
  725. &lt;tr id="line-3" class="lineno"&gt;
  726. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;3&lt;/pre&gt;&lt;/td&gt;
  727. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;align-items&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;center&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  728. &lt;/pre&gt;&lt;/td&gt;
  729. &lt;/tr&gt;
  730. &lt;tr id="line-4" class="lineno"&gt;
  731. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;4&lt;/pre&gt;&lt;/td&gt;
  732. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;justify-content&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;center&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  733. &lt;/pre&gt;&lt;/td&gt;
  734. &lt;/tr&gt;
  735. &lt;tr id="line-5" class="lineno"&gt;
  736. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;5&lt;/pre&gt;&lt;/td&gt;
  737. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;min-height&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;100px&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  738. &lt;/pre&gt;&lt;/td&gt;
  739. &lt;/tr&gt;
  740. &lt;tr id="line-6" class="lineno"&gt;
  741. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;6&lt;/pre&gt;&lt;/td&gt;
  742. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;margin-bottom&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;20px&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  743. &lt;/pre&gt;&lt;/td&gt;
  744. &lt;/tr&gt;
  745. &lt;tr id="line-7" class="lineno"&gt;
  746. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;7&lt;/pre&gt;&lt;/td&gt;
  747. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;font-size&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;24px&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  748. &lt;/pre&gt;&lt;/td&gt;
  749. &lt;/tr&gt;
  750. &lt;tr id="line-8" class="lineno"&gt;
  751. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;8&lt;/pre&gt;&lt;/td&gt;
  752. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;border&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;1px&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;solid&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;rgb&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;0&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #90a959"&gt;0&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #90a959"&gt;0&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #90a959"&gt;0.05&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  753. &lt;/pre&gt;&lt;/td&gt;
  754. &lt;/tr&gt;
  755. &lt;tr id="line-9" class="lineno"&gt;
  756. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;9&lt;/pre&gt;&lt;/td&gt;
  757. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;width&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;100%&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  758. &lt;/pre&gt;&lt;/td&gt;
  759. &lt;/tr&gt;
  760. &lt;tr id="line-10" class="lineno"&gt;
  761. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;10&lt;/pre&gt;&lt;/td&gt;
  762. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;max-width&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;600px&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  763. &lt;/pre&gt;&lt;/td&gt;
  764. &lt;/tr&gt;
  765. &lt;tr id="line-11" class="lineno"&gt;
  766. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;11&lt;/pre&gt;&lt;/td&gt;
  767. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  768. &lt;/pre&gt;&lt;/td&gt;
  769. &lt;/tr&gt;
  770. &lt;tr id="line-12" class="lineno"&gt;
  771. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;12&lt;/pre&gt;&lt;/td&gt;
  772. &lt;td class="rouge-code"&gt;&lt;pre&gt;
  773. &lt;/pre&gt;&lt;/td&gt;
  774. &lt;/tr&gt;
  775. &lt;tr id="line-13" class="lineno"&gt;
  776. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;13&lt;/pre&gt;&lt;/td&gt;
  777. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #f4bf75"&gt;.ratio&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  778. &lt;/pre&gt;&lt;/td&gt;
  779. &lt;/tr&gt;
  780. &lt;tr id="line-14" class="lineno"&gt;
  781. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;14&lt;/pre&gt;&lt;/td&gt;
  782. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;text-align&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;center&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  783. &lt;/pre&gt;&lt;/td&gt;
  784. &lt;/tr&gt;
  785. &lt;tr id="line-15" class="lineno"&gt;
  786. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;15&lt;/pre&gt;&lt;/td&gt;
  787. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;font-style&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;italic&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  788. &lt;/pre&gt;&lt;/td&gt;
  789. &lt;/tr&gt;
  790. &lt;tr id="line-16" class="lineno"&gt;
  791. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;16&lt;/pre&gt;&lt;/td&gt;
  792. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;color&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;#333&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  793. &lt;/pre&gt;&lt;/td&gt;
  794. &lt;/tr&gt;
  795. &lt;tr id="line-17" class="lineno"&gt;
  796. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;17&lt;/pre&gt;&lt;/td&gt;
  797. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  798. &lt;/pre&gt;&lt;/td&gt;
  799. &lt;/tr&gt;
  800. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  801. &lt;p&gt;We'll also have  styles for error messages.&lt;/p&gt;
  802. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table css"&gt;&lt;tbody&gt;
  803. &lt;tr id="line-1" class="lineno"&gt;
  804. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  805. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #f4bf75"&gt;.error&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  806. &lt;/pre&gt;&lt;/td&gt;
  807. &lt;/tr&gt;
  808. &lt;tr id="line-2" class="lineno"&gt;
  809. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  810. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;color&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;#e53e3e&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  811. &lt;/pre&gt;&lt;/td&gt;
  812. &lt;/tr&gt;
  813. &lt;tr id="line-3" class="lineno"&gt;
  814. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;3&lt;/pre&gt;&lt;/td&gt;
  815. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  816. &lt;/pre&gt;&lt;/td&gt;
  817. &lt;/tr&gt;
  818. &lt;tr id="line-4" class="lineno"&gt;
  819. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;4&lt;/pre&gt;&lt;/td&gt;
  820. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #f4bf75"&gt;.error-message&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  821. &lt;/pre&gt;&lt;/td&gt;
  822. &lt;/tr&gt;
  823. &lt;tr id="line-5" class="lineno"&gt;
  824. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;5&lt;/pre&gt;&lt;/td&gt;
  825. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;display&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;none&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  826. &lt;/pre&gt;&lt;/td&gt;
  827. &lt;/tr&gt;
  828. &lt;tr id="line-6" class="lineno"&gt;
  829. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;6&lt;/pre&gt;&lt;/td&gt;
  830. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  831. &lt;/pre&gt;&lt;/td&gt;
  832. &lt;/tr&gt;
  833. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  834. &lt;p&gt;Our simple interface now looks like this:&lt;/p&gt;
  835. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1885/posts/109187/image-upload/color_tool.png" loading="lazy" width="870px" height="675px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1885/posts/109187/image-upload/color_tool.png 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1885/posts/109187/image-upload/color_tool.png" loading="lazy" width="650px" height="505px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1885/posts/109187/image-upload/color_tool.png 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1885/posts/109187/image-upload/color_tool.png" loading="lazy" width="380px" height="297px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1885/posts/109187/image-upload/color_tool.png 2x"&gt;&lt;/figure&gt;
  836. &lt;h2 id="toc-rn01-color-contrast-functionality-with-javascript"&gt;Color contrast functionality with JavaScript&lt;/h2&gt;
  837. &lt;p&gt;To get accurate color contrast ratios, we'll use the WCAG contrast checker API, which provides an easy way to check the contrast between any two colors. The color contrast ratio is obtained by providing the foreground and background color values to the API, as shown below.&lt;/p&gt;
  838. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table shell"&gt;&lt;tbody&gt;&lt;tr id="line-1" class="lineno"&gt;
  839. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  840. &lt;td class="rouge-code"&gt;&lt;pre&gt;https://webaim.org/resources/contrastchecker/?fcolor&lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt;0000FF&amp;amp;bcolor&lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt;FFFFFF&amp;amp;api
  841. &lt;/pre&gt;&lt;/td&gt;
  842. &lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  843. &lt;p&gt;Here we are using black for the text and white for the background.&lt;/p&gt;
  844. &lt;p&gt;The output is a JSON object that looks something like this:&lt;/p&gt;
  845. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table shell"&gt;&lt;tbody&gt;
  846. &lt;tr id="line-1" class="lineno"&gt;
  847. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  848. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  849. &lt;/pre&gt;&lt;/td&gt;
  850. &lt;/tr&gt;
  851. &lt;tr id="line-2" class="lineno"&gt;
  852. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  853. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #90a959"&gt;"ratio"&lt;/span&gt;: &lt;span style="color: #90a959"&gt;"8.59"&lt;/span&gt;,
  854. &lt;/pre&gt;&lt;/td&gt;
  855. &lt;/tr&gt;
  856. &lt;tr id="line-3" class="lineno"&gt;
  857. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;3&lt;/pre&gt;&lt;/td&gt;
  858. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #90a959"&gt;"AA"&lt;/span&gt;: &lt;span style="color: #90a959"&gt;"pass"&lt;/span&gt;,
  859. &lt;/pre&gt;&lt;/td&gt;
  860. &lt;/tr&gt;
  861. &lt;tr id="line-4" class="lineno"&gt;
  862. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;4&lt;/pre&gt;&lt;/td&gt;
  863. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #90a959"&gt;"AALarge"&lt;/span&gt;: &lt;span style="color: #90a959"&gt;"pass"&lt;/span&gt;,
  864. &lt;/pre&gt;&lt;/td&gt;
  865. &lt;/tr&gt;
  866. &lt;tr id="line-5" class="lineno"&gt;
  867. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;5&lt;/pre&gt;&lt;/td&gt;
  868. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #90a959"&gt;"AAA"&lt;/span&gt;: &lt;span style="color: #90a959"&gt;"pass"&lt;/span&gt;,
  869. &lt;/pre&gt;&lt;/td&gt;
  870. &lt;/tr&gt;
  871. &lt;tr id="line-6" class="lineno"&gt;
  872. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;6&lt;/pre&gt;&lt;/td&gt;
  873. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #90a959"&gt;"AAALarge"&lt;/span&gt;: &lt;span style="color: #90a959"&gt;"pass"&lt;/span&gt;
  874. &lt;/pre&gt;&lt;/td&gt;
  875. &lt;/tr&gt;
  876. &lt;tr id="line-7" class="lineno"&gt;
  877. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;7&lt;/pre&gt;&lt;/td&gt;
  878. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  879. &lt;/pre&gt;&lt;/td&gt;
  880. &lt;/tr&gt;
  881. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  882. &lt;p&gt;A ratio of &lt;strong&gt;8.59&lt;/strong&gt; means the two colors pass the minimum color contrast guidelines. The &lt;em&gt;pass&lt;/em&gt; status means the colors also pass the WCAG requirements for both normal text (AA) and large text (AA). &lt;/p&gt;
  883. &lt;p&gt;The pass on AAA means the contrast ratio passes the most strict compliance level. &lt;/p&gt;
  884. &lt;p&gt;Select all the elements we'll be working with. &lt;/p&gt;
  885. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table javascript"&gt;&lt;tbody&gt;
  886. &lt;tr id="line-1" class="lineno"&gt;
  887. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  888. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d28445"&gt;const&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;textColorInput&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;document&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;getElementById&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;text-color&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  889. &lt;/pre&gt;&lt;/td&gt;
  890. &lt;/tr&gt;
  891. &lt;tr id="line-2" class="lineno"&gt;
  892. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  893. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d28445"&gt;const&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;bgColorInput&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;document&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;getElementById&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;bg-color&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  894. &lt;/pre&gt;&lt;/td&gt;
  895. &lt;/tr&gt;
  896. &lt;tr id="line-3" class="lineno"&gt;
  897. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;3&lt;/pre&gt;&lt;/td&gt;
  898. &lt;td class="rouge-code"&gt;&lt;pre&gt;
  899. &lt;/pre&gt;&lt;/td&gt;
  900. &lt;/tr&gt;
  901. &lt;tr id="line-4" class="lineno"&gt;
  902. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;4&lt;/pre&gt;&lt;/td&gt;
  903. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d28445"&gt;const&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;textColorHex&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;document&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;getElementById&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;text-color-hex&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  904. &lt;/pre&gt;&lt;/td&gt;
  905. &lt;/tr&gt;
  906. &lt;tr id="line-5" class="lineno"&gt;
  907. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;5&lt;/pre&gt;&lt;/td&gt;
  908. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d28445"&gt;const&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;bgColorHex&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;document&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;getElementById&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;bg-color-hex&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  909. &lt;/pre&gt;&lt;/td&gt;
  910. &lt;/tr&gt;
  911. &lt;tr id="line-6" class="lineno"&gt;
  912. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;6&lt;/pre&gt;&lt;/td&gt;
  913. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d28445"&gt;const&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;textColorError&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;document&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;getElementById&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;text-color-error&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  914. &lt;/pre&gt;&lt;/td&gt;
  915. &lt;/tr&gt;
  916. &lt;tr id="line-7" class="lineno"&gt;
  917. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;7&lt;/pre&gt;&lt;/td&gt;
  918. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d28445"&gt;const&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;bgColorError&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;document&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;getElementById&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;bg-color-error&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  919. &lt;/pre&gt;&lt;/td&gt;
  920. &lt;/tr&gt;
  921. &lt;tr id="line-8" class="lineno"&gt;
  922. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;8&lt;/pre&gt;&lt;/td&gt;
  923. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d28445"&gt;const&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;normal_text_aa&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;document&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;getElementById&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;normal_text_aa&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  924. &lt;/pre&gt;&lt;/td&gt;
  925. &lt;/tr&gt;
  926. &lt;tr id="line-9" class="lineno"&gt;
  927. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;9&lt;/pre&gt;&lt;/td&gt;
  928. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d28445"&gt;const&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;large_text_aa&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;document&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;getElementById&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;large_text_aa&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  929. &lt;/pre&gt;&lt;/td&gt;
  930. &lt;/tr&gt;
  931. &lt;tr id="line-10" class="lineno"&gt;
  932. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;10&lt;/pre&gt;&lt;/td&gt;
  933. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d28445"&gt;const&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;normal_text_aaa&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;document&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;getElementById&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;normal_text_aaa&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  934. &lt;/pre&gt;&lt;/td&gt;
  935. &lt;/tr&gt;
  936. &lt;tr id="line-11" class="lineno"&gt;
  937. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;11&lt;/pre&gt;&lt;/td&gt;
  938. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d28445"&gt;const&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;large_text_aaa&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;document&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;getElementById&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;large_text_aaa&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  939. &lt;/pre&gt;&lt;/td&gt;
  940. &lt;/tr&gt;
  941. &lt;tr id="line-12" class="lineno"&gt;
  942. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;12&lt;/pre&gt;&lt;/td&gt;
  943. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d28445"&gt;const&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;preview&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;document&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;getElementById&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;preview&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  944. &lt;/pre&gt;&lt;/td&gt;
  945. &lt;/tr&gt;
  946. &lt;tr id="line-13" class="lineno"&gt;
  947. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;13&lt;/pre&gt;&lt;/td&gt;
  948. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d28445"&gt;const&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;contrastRatio&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;document&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;getElementById&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;contrast-ratio&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  949. &lt;/pre&gt;&lt;/td&gt;
  950. &lt;/tr&gt;
  951. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  952. &lt;p&gt;Next, we'll  get the currently selected color values from each of the color picker inputs. Create a function called &lt;code&gt;updateColors&lt;/code&gt; which looks like this:&lt;/p&gt;
  953. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table javascript"&gt;&lt;tbody&gt;
  954. &lt;tr id="line-1" class="lineno"&gt;
  955. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  956. &lt;td class="rouge-code"&gt;&lt;pre&gt; &lt;span style="color: #d28445"&gt;function&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;updateColors&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;()&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  957. &lt;/pre&gt;&lt;/td&gt;
  958. &lt;/tr&gt;
  959. &lt;tr id="line-2" class="lineno"&gt;
  960. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  961. &lt;td class="rouge-code"&gt;&lt;pre&gt;    &lt;span style="color: #d28445"&gt;const&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;textColor&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;textColorInput&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;value&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  962. &lt;/pre&gt;&lt;/td&gt;
  963. &lt;/tr&gt;
  964. &lt;tr id="line-3" class="lineno"&gt;
  965. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;3&lt;/pre&gt;&lt;/td&gt;
  966. &lt;td class="rouge-code"&gt;&lt;pre&gt;    &lt;span style="color: #d28445"&gt;const&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;bgColor&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;bgColorInput&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;value&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  967. &lt;/pre&gt;&lt;/td&gt;
  968. &lt;/tr&gt;
  969. &lt;tr id="line-4" class="lineno"&gt;
  970. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;4&lt;/pre&gt;&lt;/td&gt;
  971. &lt;td class="rouge-code"&gt;&lt;pre&gt;
  972. &lt;/pre&gt;&lt;/td&gt;
  973. &lt;/tr&gt;
  974. &lt;tr id="line-5" class="lineno"&gt;
  975. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;5&lt;/pre&gt;&lt;/td&gt;
  976. &lt;td class="rouge-code"&gt;&lt;pre&gt;    &lt;span style="color: #d0d0d0;background-color: #151515"&gt;preview&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;style&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;color&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;textColor&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  977. &lt;/pre&gt;&lt;/td&gt;
  978. &lt;/tr&gt;
  979. &lt;tr id="line-6" class="lineno"&gt;
  980. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;6&lt;/pre&gt;&lt;/td&gt;
  981. &lt;td class="rouge-code"&gt;&lt;pre&gt;    &lt;span style="color: #d0d0d0;background-color: #151515"&gt;preview&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;style&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;backgroundColor&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;bgColor&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  982. &lt;/pre&gt;&lt;/td&gt;
  983. &lt;/tr&gt;
  984. &lt;tr id="line-7" class="lineno"&gt;
  985. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;7&lt;/pre&gt;&lt;/td&gt;
  986. &lt;td class="rouge-code"&gt;&lt;pre&gt;
  987. &lt;/pre&gt;&lt;/td&gt;
  988. &lt;/tr&gt;
  989. &lt;tr id="line-8" class="lineno"&gt;
  990. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;8&lt;/pre&gt;&lt;/td&gt;
  991. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  992. &lt;/pre&gt;&lt;/td&gt;
  993. &lt;/tr&gt;
  994. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  995. &lt;p&gt;This function gets the current values and applies them to the preview. The selected background color is used as the preview's background while the selected foreground color is applied to the text.&lt;/p&gt;
  996. &lt;p&gt;Invoke the &lt;code&gt;updateColors&lt;/code&gt; function to ensure the preview visually reflects how the text appears on the chosen background. &lt;/p&gt;
  997. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table javascript"&gt;&lt;tbody&gt;&lt;tr id="line-1" class="lineno"&gt;
  998. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  999. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;updateColors&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;();&lt;/span&gt;
  1000. &lt;/pre&gt;&lt;/td&gt;
  1001. &lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  1002. &lt;h2 id="toc-tpyh-color-validation"&gt;Color validation&lt;/h2&gt;
  1003. &lt;p&gt;Before calculating the contrast ratio of the selected colors, we'll first need to validate and sync the color values. This will ensure that when a color is selected using the color picker, the corresponding HEX input value is updated and vice versa. &lt;/p&gt;
  1004. &lt;p&gt;To do that, we'll create two functions, one for validating the foreground and another for validating the background color. &lt;/p&gt;
  1005. &lt;p&gt;Create a function called  &lt;code&gt;updateTextColorFromHex&lt;/code&gt; .&lt;/p&gt;
  1006. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table javascript"&gt;&lt;tbody&gt;&lt;tr id="line-1" class="lineno"&gt;
  1007. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  1008. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d28445"&gt;function&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;updateTextColorFromHex&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;()&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{}&lt;/span&gt;
  1009. &lt;/pre&gt;&lt;/td&gt;
  1010. &lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  1011. &lt;p&gt;Get the current hex value from the text color input.&lt;/p&gt;
  1012. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table javascript"&gt;&lt;tbody&gt;&lt;tr id="line-1" class="lineno"&gt;
  1013. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  1014. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d28445"&gt;let&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;hexValue&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;textColorHex&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;value&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  1015. &lt;/pre&gt;&lt;/td&gt;
  1016. &lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  1017. &lt;p&gt;Check if the value provided starts with the # symbol, if it doesn't, append the symbol at the start of the value. &lt;/p&gt;
  1018. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table javascript"&gt;&lt;tbody&gt;
  1019. &lt;tr id="line-1" class="lineno"&gt;
  1020. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  1021. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #aa759f"&gt;if &lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;hexValue&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;charAt&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;0&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;)&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;!==&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;#&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;)&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  1022. &lt;/pre&gt;&lt;/td&gt;
  1023. &lt;/tr&gt;
  1024. &lt;tr id="line-2" class="lineno"&gt;
  1025. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  1026. &lt;td class="rouge-code"&gt;&lt;pre&gt;      &lt;span style="color: #d0d0d0;background-color: #151515"&gt;hexValue&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;#&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;+&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;hexValue&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  1027. &lt;/pre&gt;&lt;/td&gt;
  1028. &lt;/tr&gt;
  1029. &lt;tr id="line-3" class="lineno"&gt;
  1030. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;3&lt;/pre&gt;&lt;/td&gt;
  1031. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  1032. &lt;/pre&gt;&lt;/td&gt;
  1033. &lt;/tr&gt;
  1034. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  1035. &lt;p&gt;Perform another validation to ensure the provided HEX value is a valid and existing color. &lt;/p&gt;
  1036. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table javascript"&gt;&lt;tbody&gt;
  1037. &lt;tr id="line-1" class="lineno"&gt;
  1038. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  1039. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #aa759f"&gt;if &lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;!&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;isValidHex&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;hexValue&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;))&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  1040. &lt;/pre&gt;&lt;/td&gt;
  1041. &lt;/tr&gt;
  1042. &lt;tr id="line-2" class="lineno"&gt;
  1043. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  1044. &lt;td class="rouge-code"&gt;&lt;pre&gt;      &lt;span style="color: #d0d0d0;background-color: #151515"&gt;textColorError&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;textContent&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;incorrect color&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  1045. &lt;/pre&gt;&lt;/td&gt;
  1046. &lt;/tr&gt;
  1047. &lt;tr id="line-3" class="lineno"&gt;
  1048. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;3&lt;/pre&gt;&lt;/td&gt;
  1049. &lt;td class="rouge-code"&gt;&lt;pre&gt;      &lt;span style="color: #aa759f"&gt;return&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  1050. &lt;/pre&gt;&lt;/td&gt;
  1051. &lt;/tr&gt;
  1052. &lt;tr id="line-4" class="lineno"&gt;
  1053. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;4&lt;/pre&gt;&lt;/td&gt;
  1054. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  1055. &lt;/pre&gt;&lt;/td&gt;
  1056. &lt;/tr&gt;
  1057. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  1058. &lt;p&gt;If the hex value of the color provided is invalid, show a message and exit the function. If it's a valid color, clear the error message and sync the input value and the color picker to ensure the text input and the color input both show the same color.&lt;/p&gt;
  1059. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table javascript"&gt;&lt;tbody&gt;
  1060. &lt;tr id="line-1" class="lineno"&gt;
  1061. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  1062. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;textColorError&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;textContent&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #90a959"&gt;""&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  1063. &lt;/pre&gt;&lt;/td&gt;
  1064. &lt;/tr&gt;
  1065. &lt;tr id="line-2" class="lineno"&gt;
  1066. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  1067. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;textColorError&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;style&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;display&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;block&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  1068. &lt;/pre&gt;&lt;/td&gt;
  1069. &lt;/tr&gt;
  1070. &lt;tr id="line-3" class="lineno"&gt;
  1071. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;3&lt;/pre&gt;&lt;/td&gt;
  1072. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;textColorInput&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;value&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;hexValue&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  1073. &lt;/pre&gt;&lt;/td&gt;
  1074. &lt;/tr&gt;
  1075. &lt;tr id="line-4" class="lineno"&gt;
  1076. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;4&lt;/pre&gt;&lt;/td&gt;
  1077. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;textColorHex&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;value&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;hexValue&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  1078. &lt;/pre&gt;&lt;/td&gt;
  1079. &lt;/tr&gt;
  1080. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  1081. &lt;p&gt;The helper &lt;code&gt;isValidHex&lt;/code&gt; function uses a regular expression to test the input value and it looks like this:&lt;/p&gt;
  1082. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table javascript"&gt;&lt;tbody&gt;
  1083. &lt;tr id="line-1" class="lineno"&gt;
  1084. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  1085. &lt;td class="rouge-code"&gt;&lt;pre&gt; &lt;span style="color: #d28445"&gt;function&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;isValidHex&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;hex&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;)&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  1086. &lt;/pre&gt;&lt;/td&gt;
  1087. &lt;/tr&gt;
  1088. &lt;tr id="line-2" class="lineno"&gt;
  1089. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  1090. &lt;td class="rouge-code"&gt;&lt;pre&gt;    &lt;span style="color: #aa759f"&gt;return&lt;/span&gt; &lt;span style="color: #75b5aa"&gt;/^#&lt;/span&gt;&lt;span style="color: #8f5536"&gt;([&lt;/span&gt;&lt;span style="color: #75b5aa"&gt;A-Fa-f0-9&lt;/span&gt;&lt;span style="color: #8f5536"&gt;]{6}&lt;/span&gt;&lt;span style="color: #75b5aa"&gt;|&lt;/span&gt;&lt;span style="color: #8f5536"&gt;[&lt;/span&gt;&lt;span style="color: #75b5aa"&gt;A-Fa-f0-9&lt;/span&gt;&lt;span style="color: #8f5536"&gt;]{3})&lt;/span&gt;&lt;span style="color: #75b5aa"&gt;$/&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;test&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;hex&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  1091. &lt;/pre&gt;&lt;/td&gt;
  1092. &lt;/tr&gt;
  1093. &lt;tr id="line-3" class="lineno"&gt;
  1094. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;3&lt;/pre&gt;&lt;/td&gt;
  1095. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  1096. &lt;/pre&gt;&lt;/td&gt;
  1097. &lt;/tr&gt;
  1098. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  1099. &lt;p&gt;We'll perform a similar validation for the background color.&lt;/p&gt;
  1100. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table plaintext"&gt;&lt;tbody&gt;
  1101. &lt;tr id="line-1" class="lineno"&gt;
  1102. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  1103. &lt;td class="rouge-code"&gt;&lt;pre&gt;  function updateBgColorFromHex() {
  1104. &lt;/pre&gt;&lt;/td&gt;
  1105. &lt;/tr&gt;
  1106. &lt;tr id="line-2" class="lineno"&gt;
  1107. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  1108. &lt;td class="rouge-code"&gt;&lt;pre&gt;    let hexValue = bgColorHex.value;
  1109. &lt;/pre&gt;&lt;/td&gt;
  1110. &lt;/tr&gt;
  1111. &lt;tr id="line-3" class="lineno"&gt;
  1112. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;3&lt;/pre&gt;&lt;/td&gt;
  1113. &lt;td class="rouge-code"&gt;&lt;pre&gt;    if (hexValue.charAt(0) !== "#") {
  1114. &lt;/pre&gt;&lt;/td&gt;
  1115. &lt;/tr&gt;
  1116. &lt;tr id="line-4" class="lineno"&gt;
  1117. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;4&lt;/pre&gt;&lt;/td&gt;
  1118. &lt;td class="rouge-code"&gt;&lt;pre&gt;      hexValue = "#" + hexValue;
  1119. &lt;/pre&gt;&lt;/td&gt;
  1120. &lt;/tr&gt;
  1121. &lt;tr id="line-5" class="lineno"&gt;
  1122. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;5&lt;/pre&gt;&lt;/td&gt;
  1123. &lt;td class="rouge-code"&gt;&lt;pre&gt;    }
  1124. &lt;/pre&gt;&lt;/td&gt;
  1125. &lt;/tr&gt;
  1126. &lt;tr id="line-6" class="lineno"&gt;
  1127. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;6&lt;/pre&gt;&lt;/td&gt;
  1128. &lt;td class="rouge-code"&gt;&lt;pre&gt;
  1129. &lt;/pre&gt;&lt;/td&gt;
  1130. &lt;/tr&gt;
  1131. &lt;tr id="line-7" class="lineno"&gt;
  1132. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;7&lt;/pre&gt;&lt;/td&gt;
  1133. &lt;td class="rouge-code"&gt;&lt;pre&gt;    if (!isValidHex(hexValue)) {
  1134. &lt;/pre&gt;&lt;/td&gt;
  1135. &lt;/tr&gt;
  1136. &lt;tr id="line-8" class="lineno"&gt;
  1137. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;8&lt;/pre&gt;&lt;/td&gt;
  1138. &lt;td class="rouge-code"&gt;&lt;pre&gt;      bgColorError.textContent = "incorrect color";
  1139. &lt;/pre&gt;&lt;/td&gt;
  1140. &lt;/tr&gt;
  1141. &lt;tr id="line-9" class="lineno"&gt;
  1142. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;9&lt;/pre&gt;&lt;/td&gt;
  1143. &lt;td class="rouge-code"&gt;&lt;pre&gt;      bgColorError.style.display = "block";
  1144. &lt;/pre&gt;&lt;/td&gt;
  1145. &lt;/tr&gt;
  1146. &lt;tr id="line-10" class="lineno"&gt;
  1147. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;10&lt;/pre&gt;&lt;/td&gt;
  1148. &lt;td class="rouge-code"&gt;&lt;pre&gt;
  1149. &lt;/pre&gt;&lt;/td&gt;
  1150. &lt;/tr&gt;
  1151. &lt;tr id="line-11" class="lineno"&gt;
  1152. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;11&lt;/pre&gt;&lt;/td&gt;
  1153. &lt;td class="rouge-code"&gt;&lt;pre&gt;
  1154. &lt;/pre&gt;&lt;/td&gt;
  1155. &lt;/tr&gt;
  1156. &lt;tr id="line-12" class="lineno"&gt;
  1157. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;12&lt;/pre&gt;&lt;/td&gt;
  1158. &lt;td class="rouge-code"&gt;&lt;pre&gt;      return;
  1159. &lt;/pre&gt;&lt;/td&gt;
  1160. &lt;/tr&gt;
  1161. &lt;tr id="line-13" class="lineno"&gt;
  1162. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;13&lt;/pre&gt;&lt;/td&gt;
  1163. &lt;td class="rouge-code"&gt;&lt;pre&gt;    }
  1164. &lt;/pre&gt;&lt;/td&gt;
  1165. &lt;/tr&gt;
  1166. &lt;tr id="line-14" class="lineno"&gt;
  1167. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;14&lt;/pre&gt;&lt;/td&gt;
  1168. &lt;td class="rouge-code"&gt;&lt;pre&gt;    bgColorError.textContent = "";
  1169. &lt;/pre&gt;&lt;/td&gt;
  1170. &lt;/tr&gt;
  1171. &lt;tr id="line-15" class="lineno"&gt;
  1172. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;15&lt;/pre&gt;&lt;/td&gt;
  1173. &lt;td class="rouge-code"&gt;&lt;pre&gt;    bgColorInput.value = hexValue;
  1174. &lt;/pre&gt;&lt;/td&gt;
  1175. &lt;/tr&gt;
  1176. &lt;tr id="line-16" class="lineno"&gt;
  1177. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;16&lt;/pre&gt;&lt;/td&gt;
  1178. &lt;td class="rouge-code"&gt;&lt;pre&gt;    bgColorHex.value = hexValue;
  1179. &lt;/pre&gt;&lt;/td&gt;
  1180. &lt;/tr&gt;
  1181. &lt;tr id="line-17" class="lineno"&gt;
  1182. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;17&lt;/pre&gt;&lt;/td&gt;
  1183. &lt;td class="rouge-code"&gt;&lt;pre&gt;    updateColors()
  1184. &lt;/pre&gt;&lt;/td&gt;
  1185. &lt;/tr&gt;
  1186. &lt;tr id="line-18" class="lineno"&gt;
  1187. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;18&lt;/pre&gt;&lt;/td&gt;
  1188. &lt;td class="rouge-code"&gt;&lt;pre&gt;  }
  1189. &lt;/pre&gt;&lt;/td&gt;
  1190. &lt;/tr&gt;
  1191. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  1192. &lt;h2 id="toc-xqli-event-listeners"&gt;Event listeners &lt;/h2&gt;
  1193. &lt;p&gt;It is also important to ensure that when the color or text input  change, the corresponding values are updated. We do this by adding input event listeners to the elements. &lt;/p&gt;
  1194. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table javascript"&gt;&lt;tbody&gt;
  1195. &lt;tr id="line-1" class="lineno"&gt;
  1196. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  1197. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;textColorHex&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;addEventListener&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;input&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;updateTextColorFromHex&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  1198. &lt;/pre&gt;&lt;/td&gt;
  1199. &lt;/tr&gt;
  1200. &lt;tr id="line-2" class="lineno"&gt;
  1201. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  1202. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;bgColorHex&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;addEventListener&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;input&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;updateBgColorFromHex&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  1203. &lt;/pre&gt;&lt;/td&gt;
  1204. &lt;/tr&gt;
  1205. &lt;tr id="line-3" class="lineno"&gt;
  1206. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;3&lt;/pre&gt;&lt;/td&gt;
  1207. &lt;td class="rouge-code"&gt;&lt;pre&gt;
  1208. &lt;/pre&gt;&lt;/td&gt;
  1209. &lt;/tr&gt;
  1210. &lt;tr id="line-4" class="lineno"&gt;
  1211. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;4&lt;/pre&gt;&lt;/td&gt;
  1212. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;textColorInput&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;addEventListener&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;input&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;function &lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;()&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  1213. &lt;/pre&gt;&lt;/td&gt;
  1214. &lt;/tr&gt;
  1215. &lt;tr id="line-5" class="lineno"&gt;
  1216. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;5&lt;/pre&gt;&lt;/td&gt;
  1217. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;textColorHex&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;value&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;textColorInput&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;value&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  1218. &lt;/pre&gt;&lt;/td&gt;
  1219. &lt;/tr&gt;
  1220. &lt;tr id="line-6" class="lineno"&gt;
  1221. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;6&lt;/pre&gt;&lt;/td&gt;
  1222. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;updateColors&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;();&lt;/span&gt;
  1223. &lt;/pre&gt;&lt;/td&gt;
  1224. &lt;/tr&gt;
  1225. &lt;tr id="line-7" class="lineno"&gt;
  1226. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;7&lt;/pre&gt;&lt;/td&gt;
  1227. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;});&lt;/span&gt;
  1228. &lt;/pre&gt;&lt;/td&gt;
  1229. &lt;/tr&gt;
  1230. &lt;tr id="line-8" class="lineno"&gt;
  1231. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;8&lt;/pre&gt;&lt;/td&gt;
  1232. &lt;td class="rouge-code"&gt;&lt;pre&gt;
  1233. &lt;/pre&gt;&lt;/td&gt;
  1234. &lt;/tr&gt;
  1235. &lt;tr id="line-9" class="lineno"&gt;
  1236. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;9&lt;/pre&gt;&lt;/td&gt;
  1237. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;bgColorInput&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;addEventListener&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;input&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;function &lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;()&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  1238. &lt;/pre&gt;&lt;/td&gt;
  1239. &lt;/tr&gt;
  1240. &lt;tr id="line-10" class="lineno"&gt;
  1241. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;10&lt;/pre&gt;&lt;/td&gt;
  1242. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;bgColorHex&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;value&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;bgColorInput&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;value&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  1243. &lt;/pre&gt;&lt;/td&gt;
  1244. &lt;/tr&gt;
  1245. &lt;tr id="line-11" class="lineno"&gt;
  1246. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;11&lt;/pre&gt;&lt;/td&gt;
  1247. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;updateColors&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;();&lt;/span&gt;
  1248. &lt;/pre&gt;&lt;/td&gt;
  1249. &lt;/tr&gt;
  1250. &lt;tr id="line-12" class="lineno"&gt;
  1251. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;12&lt;/pre&gt;&lt;/td&gt;
  1252. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;});&lt;/span&gt;
  1253. &lt;/pre&gt;&lt;/td&gt;
  1254. &lt;/tr&gt;
  1255. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  1256. &lt;ul class="roundup-block__contents posts--half-width roundup-block--list"&gt;&lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/introduction-to-javascript-event-listeners--cms-35236"&gt;&lt;div class="roundup-block__content-container"&gt;
  1257. &lt;div class="roundup-block__preview"&gt;
  1258. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/35236/preview_image/click.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/35236/preview_image/click.png 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/35236/preview_image/click.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/35236/preview_image/click.png 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/35236/preview_image/click.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/35236/preview_image/click.png 2x"&gt;
  1259. &lt;/div&gt;
  1260. &lt;div class="roundup-block__content-meta"&gt;
  1261. &lt;div class="roundup-block__content-title"&gt;An Introduction to JavaScript Event Listeners for Web Designers&lt;/div&gt;
  1262. &lt;div class="roundup-block__author-info"&gt;
  1263. &lt;div class="roundup-block__author-profile-image"&gt;
  1264. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/20515/profileImage/wvQWK027_400x400.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/20515/profileImage/wvQWK027_400x400.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/20515/profileImage/wvQWK027_400x400.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/20515/profileImage/wvQWK027_400x400.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/20515/profileImage/wvQWK027_400x400.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/20515/profileImage/wvQWK027_400x400.jpg 2x"&gt;
  1265. &lt;/div&gt;
  1266. &lt;div class="roundup-block__author-meta"&gt;
  1267. &lt;div class="roundup-block__author-name"&gt;Anna Monus&lt;/div&gt;
  1268. &lt;div class="roundup-block__published-date"&gt;25 Jul 2023&lt;/div&gt;
  1269. &lt;/div&gt;
  1270. &lt;/div&gt;
  1271. &lt;/div&gt;
  1272. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
  1273. &lt;h2 id="toc-pqig-contract-ckecker"&gt;Contrast checker&lt;/h2&gt;
  1274. &lt;p&gt;The next step is to pass the current foreground and background hex color values to the API.&lt;/p&gt;
  1275. &lt;p&gt;Create a function called &lt;code&gt;getContrastRatio&lt;/code&gt;, which takes two arguments namely, &lt;code&gt;foreground&lt;/code&gt; and &lt;code&gt;background&lt;/code&gt;.&lt;/p&gt;
  1276. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table javascript"&gt;&lt;tbody&gt;
  1277. &lt;tr id="line-1" class="lineno"&gt;
  1278. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  1279. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d28445"&gt;function&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;getContrastRatio&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;foreground&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;background&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;)&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  1280. &lt;/pre&gt;&lt;/td&gt;
  1281. &lt;/tr&gt;
  1282. &lt;tr id="line-2" class="lineno"&gt;
  1283. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  1284. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #949494"&gt;//logic goes here
  1285. &lt;/span&gt;
  1286. &lt;/pre&gt;&lt;/td&gt;
  1287. &lt;/tr&gt;
  1288. &lt;tr id="line-3" class="lineno"&gt;
  1289. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;3&lt;/pre&gt;&lt;/td&gt;
  1290. &lt;td class="rouge-code"&gt;&lt;pre&gt;
  1291. &lt;/pre&gt;&lt;/td&gt;
  1292. &lt;/tr&gt;
  1293. &lt;tr id="line-4" class="lineno"&gt;
  1294. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;4&lt;/pre&gt;&lt;/td&gt;
  1295. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  1296. &lt;/pre&gt;&lt;/td&gt;
  1297. &lt;/tr&gt;
  1298. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  1299. &lt;p&gt;Since the API takes the values without the # symbol, we'll remove the # character using the &lt;code&gt;replace()&lt;/code&gt; method, as shown below.&lt;/p&gt;
  1300. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table javascript"&gt;&lt;tbody&gt;
  1301. &lt;tr id="line-1" class="lineno"&gt;
  1302. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  1303. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d28445"&gt;const&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;fcolor&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;foreground&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;replace&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;#&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #90a959"&gt;""&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  1304. &lt;/pre&gt;&lt;/td&gt;
  1305. &lt;/tr&gt;
  1306. &lt;tr id="line-2" class="lineno"&gt;
  1307. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  1308. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d28445"&gt;const&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;bcolor&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;background&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;replace&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;#&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #90a959"&gt;""&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  1309. &lt;/pre&gt;&lt;/td&gt;
  1310. &lt;/tr&gt;
  1311. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  1312. &lt;p&gt;Here, we are replacing the # symbol with an empty string. For example, if the hex value is #FFFFFF, the output will be FFFFFF.&lt;/p&gt;
  1313. &lt;p&gt;Append the values to the API string.&lt;/p&gt;
  1314. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table javascript"&gt;&lt;tbody&gt;
  1315. &lt;tr id="line-1" class="lineno"&gt;
  1316. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  1317. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d28445"&gt;const&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;apiUrl&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #90a959"&gt;`https://webaim.org/resources/contrastchecker/?
  1318. &lt;/span&gt;
  1319. &lt;/pre&gt;&lt;/td&gt;
  1320. &lt;/tr&gt;
  1321. &lt;tr id="line-2" class="lineno"&gt;
  1322. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  1323. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #90a959"&gt;                fcolor=&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;${&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;fcolor&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;&lt;span style="color: #90a959"&gt;&amp;amp;bcolor=&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;${&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;bcolor&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;&lt;span style="color: #90a959"&gt;&amp;amp;api`&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  1324. &lt;/pre&gt;&lt;/td&gt;
  1325. &lt;/tr&gt;
  1326. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  1327. &lt;p&gt;Using &lt;code&gt;fetch()&lt;/code&gt;, make a network request to the WebAIMi API and handle any occurring errors gracefully.&lt;/p&gt;
  1328. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table javascript"&gt;&lt;tbody&gt;
  1329. &lt;tr id="line-1" class="lineno"&gt;
  1330. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  1331. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;fetch&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;apiUrl&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;)&lt;/span&gt;
  1332. &lt;/pre&gt;&lt;/td&gt;
  1333. &lt;/tr&gt;
  1334. &lt;tr id="line-2" class="lineno"&gt;
  1335. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  1336. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;then&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;((&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;response&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;)&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&amp;gt;&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  1337. &lt;/pre&gt;&lt;/td&gt;
  1338. &lt;/tr&gt;
  1339. &lt;tr id="line-3" class="lineno"&gt;
  1340. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;3&lt;/pre&gt;&lt;/td&gt;
  1341. &lt;td class="rouge-code"&gt;&lt;pre&gt;    &lt;span style="color: #aa759f"&gt;if &lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;!&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;response&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;ok&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;)&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  1342. &lt;/pre&gt;&lt;/td&gt;
  1343. &lt;/tr&gt;
  1344. &lt;tr id="line-4" class="lineno"&gt;
  1345. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;4&lt;/pre&gt;&lt;/td&gt;
  1346. &lt;td class="rouge-code"&gt;&lt;pre&gt;      &lt;span style="color: #aa759f"&gt;throw&lt;/span&gt; &lt;span style="color: #aa759f"&gt;new&lt;/span&gt; &lt;span style="color: #f4bf75"&gt;Error&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;Network response was not ok&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  1347. &lt;/pre&gt;&lt;/td&gt;
  1348. &lt;/tr&gt;
  1349. &lt;tr id="line-5" class="lineno"&gt;
  1350. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;5&lt;/pre&gt;&lt;/td&gt;
  1351. &lt;td class="rouge-code"&gt;&lt;pre&gt;    &lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  1352. &lt;/pre&gt;&lt;/td&gt;
  1353. &lt;/tr&gt;
  1354. &lt;tr id="line-6" class="lineno"&gt;
  1355. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;6&lt;/pre&gt;&lt;/td&gt;
  1356. &lt;td class="rouge-code"&gt;&lt;pre&gt;    &lt;span style="color: #aa759f"&gt;return&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;response&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;json&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;();&lt;/span&gt;
  1357. &lt;/pre&gt;&lt;/td&gt;
  1358. &lt;/tr&gt;
  1359. &lt;tr id="line-7" class="lineno"&gt;
  1360. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;7&lt;/pre&gt;&lt;/td&gt;
  1361. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0"&gt;})&lt;/span&gt;
  1362. &lt;/pre&gt;&lt;/td&gt;
  1363. &lt;/tr&gt;
  1364. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  1365. &lt;h3 id="toc-3rok-update-the-results"&gt;Update the results&lt;/h3&gt;
  1366. &lt;p&gt;If the API response is successful, we'll get a JSON object containing the contrast ratio and the output of the contrast check, either a fail or a pass in this format.&lt;/p&gt;
  1367. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table javascript"&gt;&lt;tbody&gt;
  1368. &lt;tr id="line-1" class="lineno"&gt;
  1369. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  1370. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  1371. &lt;/pre&gt;&lt;/td&gt;
  1372. &lt;/tr&gt;
  1373. &lt;tr id="line-2" class="lineno"&gt;
  1374. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  1375. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;ratio&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;8.59&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt;
  1376. &lt;/pre&gt;&lt;/td&gt;
  1377. &lt;/tr&gt;
  1378. &lt;tr id="line-3" class="lineno"&gt;
  1379. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;3&lt;/pre&gt;&lt;/td&gt;
  1380. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;AA&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;pass&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt;
  1381. &lt;/pre&gt;&lt;/td&gt;
  1382. &lt;/tr&gt;
  1383. &lt;tr id="line-4" class="lineno"&gt;
  1384. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;4&lt;/pre&gt;&lt;/td&gt;
  1385. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;AALarge&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;pass&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt;
  1386. &lt;/pre&gt;&lt;/td&gt;
  1387. &lt;/tr&gt;
  1388. &lt;tr id="line-5" class="lineno"&gt;
  1389. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;5&lt;/pre&gt;&lt;/td&gt;
  1390. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;AAA&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;pass&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt;
  1391. &lt;/pre&gt;&lt;/td&gt;
  1392. &lt;/tr&gt;
  1393. &lt;tr id="line-6" class="lineno"&gt;
  1394. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;6&lt;/pre&gt;&lt;/td&gt;
  1395. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;AAALarge&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;pass&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;
  1396. &lt;/pre&gt;&lt;/td&gt;
  1397. &lt;/tr&gt;
  1398. &lt;tr id="line-7" class="lineno"&gt;
  1399. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;7&lt;/pre&gt;&lt;/td&gt;
  1400. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  1401. &lt;/pre&gt;&lt;/td&gt;
  1402. &lt;/tr&gt;
  1403. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  1404. &lt;p&gt;where:&lt;/p&gt;
  1405. &lt;ul&gt;
  1406. &lt;li&gt;AA - normal text&lt;/li&gt;
  1407. &lt;li&gt;AALarge - large text&lt;/li&gt;
  1408. &lt;li&gt;AAA - strict compliance for normal text&lt;/li&gt;
  1409. &lt;li&gt;AAALarge - strict compliance for large text&lt;/li&gt;
  1410. &lt;/ul&gt;
  1411. &lt;p&gt;We'll then update the results to the page by appending them to the appropriate elements.&lt;/p&gt;
  1412. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table javascript"&gt;&lt;tbody&gt;
  1413. &lt;tr id="line-1" class="lineno"&gt;
  1414. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  1415. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;normal_text_aa&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;textContent&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;data&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;AA&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;===&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;pass&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;?&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;Pass&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;Fail&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  1416. &lt;/pre&gt;&lt;/td&gt;
  1417. &lt;/tr&gt;
  1418. &lt;tr id="line-2" class="lineno"&gt;
  1419. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  1420. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;normal_text_aa&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;className&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;data&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;AA&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;===&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;pass&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;?&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;pass&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;fail&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  1421. &lt;/pre&gt;&lt;/td&gt;
  1422. &lt;/tr&gt;
  1423. &lt;tr id="line-3" class="lineno"&gt;
  1424. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;3&lt;/pre&gt;&lt;/td&gt;
  1425. &lt;td class="rouge-code"&gt;&lt;pre&gt;
  1426. &lt;/pre&gt;&lt;/td&gt;
  1427. &lt;/tr&gt;
  1428. &lt;tr id="line-4" class="lineno"&gt;
  1429. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;4&lt;/pre&gt;&lt;/td&gt;
  1430. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;large_text_aa&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;textContent&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;data&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;AALarge&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;===&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;pass&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;?&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;Pass&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;Fail&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  1431. &lt;/pre&gt;&lt;/td&gt;
  1432. &lt;/tr&gt;
  1433. &lt;tr id="line-5" class="lineno"&gt;
  1434. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;5&lt;/pre&gt;&lt;/td&gt;
  1435. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;large_text_aa&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;className&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;data&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;AALarge&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;===&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;pass&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;?&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;pass&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;fail&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  1436. &lt;/pre&gt;&lt;/td&gt;
  1437. &lt;/tr&gt;
  1438. &lt;tr id="line-6" class="lineno"&gt;
  1439. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;6&lt;/pre&gt;&lt;/td&gt;
  1440. &lt;td class="rouge-code"&gt;&lt;pre&gt;
  1441. &lt;/pre&gt;&lt;/td&gt;
  1442. &lt;/tr&gt;
  1443. &lt;tr id="line-7" class="lineno"&gt;
  1444. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;7&lt;/pre&gt;&lt;/td&gt;
  1445. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;normal_text_aaa&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;textContent&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;data&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;AAA&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;===&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;pass&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;?&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;Pass&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;Fail&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  1446. &lt;/pre&gt;&lt;/td&gt;
  1447. &lt;/tr&gt;
  1448. &lt;tr id="line-8" class="lineno"&gt;
  1449. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;8&lt;/pre&gt;&lt;/td&gt;
  1450. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;normal_text_aaa&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;className&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;data&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;AAA&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;===&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;pass&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;?&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;pass&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;fail&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  1451. &lt;/pre&gt;&lt;/td&gt;
  1452. &lt;/tr&gt;
  1453. &lt;tr id="line-9" class="lineno"&gt;
  1454. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;9&lt;/pre&gt;&lt;/td&gt;
  1455. &lt;td class="rouge-code"&gt;&lt;pre&gt;
  1456. &lt;/pre&gt;&lt;/td&gt;
  1457. &lt;/tr&gt;
  1458. &lt;tr id="line-10" class="lineno"&gt;
  1459. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;10&lt;/pre&gt;&lt;/td&gt;
  1460. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;large_text_aaa&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;textContent&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;data&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;AAALarge&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;===&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;pass&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;?&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;Pass&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;Fail&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  1461. &lt;/pre&gt;&lt;/td&gt;
  1462. &lt;/tr&gt;
  1463. &lt;tr id="line-11" class="lineno"&gt;
  1464. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;11&lt;/pre&gt;&lt;/td&gt;
  1465. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;large_text_aaa&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;className&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;data&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;AAALarge&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;===&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;pass&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;?&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;pass&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;:&lt;/span&gt; &lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #90a959"&gt;fail&lt;/span&gt;&lt;span style="color: #90a959"&gt;"&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  1466. &lt;/pre&gt;&lt;/td&gt;
  1467. &lt;/tr&gt;
  1468. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  1469. &lt;p&gt;Here, each result is displayed as either a Pass or Fail, accompanied by styling that uses red for fail and green for pass.&lt;/p&gt;
  1470. &lt;p&gt;The final step is to update the &lt;code&gt;updateColors()&lt;/code&gt; function to ensure the selected colors are passed to the &lt;code&gt;getContrastRatio()&lt;/code&gt; function.&lt;/p&gt;
  1471. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table javascript"&gt;&lt;tbody&gt;
  1472. &lt;tr id="line-1" class="lineno"&gt;
  1473. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  1474. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d28445"&gt;function&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;updateColors&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;()&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;{&lt;/span&gt;
  1475. &lt;/pre&gt;&lt;/td&gt;
  1476. &lt;/tr&gt;
  1477. &lt;tr id="line-2" class="lineno"&gt;
  1478. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;2&lt;/pre&gt;&lt;/td&gt;
  1479. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d28445"&gt;const&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;textColor&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;textColorInput&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;value&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  1480. &lt;/pre&gt;&lt;/td&gt;
  1481. &lt;/tr&gt;
  1482. &lt;tr id="line-3" class="lineno"&gt;
  1483. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;3&lt;/pre&gt;&lt;/td&gt;
  1484. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d28445"&gt;const&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;bgColor&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;bgColorInput&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;value&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  1485. &lt;/pre&gt;&lt;/td&gt;
  1486. &lt;/tr&gt;
  1487. &lt;tr id="line-4" class="lineno"&gt;
  1488. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;4&lt;/pre&gt;&lt;/td&gt;
  1489. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;preview&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;style&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;color&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;textColor&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  1490. &lt;/pre&gt;&lt;/td&gt;
  1491. &lt;/tr&gt;
  1492. &lt;tr id="line-5" class="lineno"&gt;
  1493. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;5&lt;/pre&gt;&lt;/td&gt;
  1494. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;preview&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;style&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;backgroundColor&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;bgColor&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;;&lt;/span&gt;
  1495. &lt;/pre&gt;&lt;/td&gt;
  1496. &lt;/tr&gt;
  1497. &lt;tr id="line-6" class="lineno"&gt;
  1498. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;6&lt;/pre&gt;&lt;/td&gt;
  1499. &lt;td class="rouge-code"&gt;&lt;pre&gt;  &lt;span style="color: #d0d0d0;background-color: #151515"&gt;getContrastRatio&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;textColor&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;,&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;bgColor&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  1500. &lt;/pre&gt;&lt;/td&gt;
  1501. &lt;/tr&gt;
  1502. &lt;tr id="line-7" class="lineno"&gt;
  1503. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;7&lt;/pre&gt;&lt;/td&gt;
  1504. &lt;td class="rouge-code"&gt;&lt;pre&gt;&lt;span style="color: #d0d0d0"&gt;}&lt;/span&gt;
  1505. &lt;/pre&gt;&lt;/td&gt;
  1506. &lt;/tr&gt;
  1507. &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  1508. &lt;p&gt;Don’t forget to update the contrast ratio by setting the ratio value as the text content.&lt;/p&gt;
  1509. &lt;div class="rouge-syntax-highlight"&gt;&lt;table class="rouge-line-table javascript"&gt;&lt;tbody&gt;&lt;tr id="line-1" class="lineno"&gt;
  1510. &lt;td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"&gt;&lt;pre&gt;1&lt;/pre&gt;&lt;/td&gt;
  1511. &lt;td class="rouge-code"&gt;&lt;pre&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;contrastRatio&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;textContent&lt;/span&gt; &lt;span style="color: #d0d0d0"&gt;=&lt;/span&gt; &lt;span style="color: #d0d0d0;background-color: #151515"&gt;parseFloat&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;(&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;data&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;.&lt;/span&gt;&lt;span style="color: #d0d0d0;background-color: #151515"&gt;ratio&lt;/span&gt;&lt;span style="color: #d0d0d0"&gt;);&lt;/span&gt;
  1512. &lt;/pre&gt;&lt;/td&gt;
  1513. &lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  1514. &lt;h2 id="toc-7cgz-the-final-demo"&gt;The final demo&lt;/h2&gt;
  1515. &lt;p&gt;Here is the final demo!&lt;/p&gt;
  1516. &lt;p&gt;&lt;iframe src="https://codepen.io/tutsplus/embed/MYwxWwZ?default-tab=result" width="850" height="500" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy"&gt;
  1517. &lt;/iframe&gt;&lt;/p&gt;
  1518. &lt;h2 id="toc-ftbm-conclusion"&gt;Conclusion&lt;/h2&gt;
  1519. &lt;p&gt;That's a wrap for this tutorial! We have learned how to build a tool that checks contrast ratios to help adhere to WCAG guidelines. Hopefully, you now feel equipped to create more accessible and user-friendly designs.&lt;/p&gt;
  1520. &lt;ul class="roundup-block__contents posts--half-width roundup-block--list"&gt;
  1521. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/building-an-inclusive-web-why-accessibility-matters--cms-29773"&gt;&lt;div class="roundup-block__content-container"&gt;
  1522. &lt;div class="roundup-block__preview"&gt;
  1523. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/29773/preview_image/brideg-a11y.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/29773/preview_image/brideg-a11y.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/29773/preview_image/brideg-a11y.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/29773/preview_image/brideg-a11y.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/29773/preview_image/brideg-a11y.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/29773/preview_image/brideg-a11y.jpg 2x"&gt;
  1524. &lt;/div&gt;
  1525. &lt;div class="roundup-block__content-meta"&gt;
  1526. &lt;div class="roundup-block__content-title"&gt;Building an Inclusive Web: Why Accessibility Matters&lt;/div&gt;
  1527. &lt;div class="roundup-block__author-info"&gt;
  1528. &lt;div class="roundup-block__author-profile-image"&gt;
  1529. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/20418/profileImage/RlQ_WWuR_400x400.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/20418/profileImage/RlQ_WWuR_400x400.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/20418/profileImage/RlQ_WWuR_400x400.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/20418/profileImage/RlQ_WWuR_400x400.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/20418/profileImage/RlQ_WWuR_400x400.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/20418/profileImage/RlQ_WWuR_400x400.jpg 2x"&gt;
  1530. &lt;/div&gt;
  1531. &lt;div class="roundup-block__author-meta"&gt;
  1532. &lt;div class="roundup-block__author-name"&gt;Sami Keijonen&lt;/div&gt;
  1533. &lt;div class="roundup-block__published-date"&gt;03 Dec 2017&lt;/div&gt;
  1534. &lt;/div&gt;
  1535. &lt;/div&gt;
  1536. &lt;/div&gt;
  1537. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  1538. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/accessibility-basics-designing-for-visual-impairment--cms-27634"&gt;&lt;div class="roundup-block__content-container"&gt;
  1539. &lt;div class="roundup-block__preview"&gt;
  1540. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/27634/preview_image/pre.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/27634/preview_image/pre.png 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/27634/preview_image/pre.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/27634/preview_image/pre.png 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/27634/preview_image/pre.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/27634/preview_image/pre.png 2x"&gt;
  1541. &lt;/div&gt;
  1542. &lt;div class="roundup-block__content-meta"&gt;
  1543. &lt;div class="roundup-block__content-title"&gt;Accessibility Basics: Designing for Visual Impairment
  1544. &lt;/div&gt;
  1545. &lt;div class="roundup-block__author-info"&gt;
  1546. &lt;div class="roundup-block__author-profile-image"&gt;
  1547. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/19988/profileImage/graeme.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/19988/profileImage/graeme.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/19988/profileImage/graeme.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/19988/profileImage/graeme.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/19988/profileImage/graeme.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/19988/profileImage/graeme.jpg 2x"&gt;
  1548. &lt;/div&gt;
  1549. &lt;div class="roundup-block__author-meta"&gt;
  1550. &lt;div class="roundup-block__author-name"&gt;Graeme Fulton&lt;/div&gt;
  1551. &lt;div class="roundup-block__published-date"&gt;13 Jun 2022&lt;/div&gt;
  1552. &lt;/div&gt;
  1553. &lt;/div&gt;
  1554. &lt;/div&gt;
  1555. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  1556. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/how-to-use-the-contrast-checker-in-chrome-devtools--cms-31504"&gt;&lt;div class="roundup-block__content-container"&gt;
  1557. &lt;div class="roundup-block__preview"&gt;
  1558. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/31504/preview_image/pre.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/31504/preview_image/pre.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/31504/preview_image/pre.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/31504/preview_image/pre.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/31504/preview_image/pre.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/31504/preview_image/pre.jpg 2x"&gt;
  1559. &lt;/div&gt;
  1560. &lt;div class="roundup-block__content-meta"&gt;
  1561. &lt;div class="roundup-block__content-title"&gt;How to Use the Contrast Checker in Chrome DevTools&lt;/div&gt;
  1562. &lt;div class="roundup-block__author-info"&gt;
  1563. &lt;div class="roundup-block__author-profile-image"&gt;
  1564. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/2532/profileImage/kezz.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/2532/profileImage/kezz.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/2532/profileImage/kezz.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/2532/profileImage/kezz.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/2532/profileImage/kezz.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/2532/profileImage/kezz.jpg 2x"&gt;
  1565. &lt;/div&gt;
  1566. &lt;div class="roundup-block__author-meta"&gt;
  1567. &lt;div class="roundup-block__author-name"&gt;Kezz Bracey&lt;/div&gt;
  1568. &lt;div class="roundup-block__published-date"&gt;22 Oct 2018&lt;/div&gt;
  1569. &lt;/div&gt;
  1570. &lt;/div&gt;
  1571. &lt;/div&gt;
  1572. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  1573. &lt;/ul&gt;
  1574. &lt;/div&gt;&lt;div class="mediafed_ad"&gt;&lt;img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/669438/s/109187/sc/4/mf.gif" width="1" /&gt;&lt;a href="http://da.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/109187/a2.htm"&gt;&lt;img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/109187/a2.img" /&gt;&lt;/a&gt;&lt;img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/109187/a2t.img" width="1" /&gt;&lt;/div&gt;</content>
  1575.    <published>2025-07-02 09:59:00 UTC</published>
  1576.    <updated>2025-07-02 09:59:00 UTC</updated>
  1577.    <author>
  1578.      <name>Esther Vaati</name>
  1579.    </author>
  1580.  </entry>
  1581.  <entry>
  1582.    <id>tag:tutsplus.com,2005:PostPresenter/ae-14005</id>
  1583.    <published>2014-01-20T02:05:58+00:00</published>
  1584.    <link rel="alternate" type="text/html" href="https://photography.tutsplus.com/articles/how-to-quickly-create-3d-text-animations-in-after-effects--ae-14005"/>
  1585.    <title>How to create 3D text animations in After Effects fast</title>
  1586.    <content type="html">&lt;style&gt;* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}&lt;/style&gt;&lt;div data-content-block-type="Wysi" id="ic0i" class="content-block-wysi content-block"&gt;
  1587. &lt;p&gt;&lt;span&gt;It’s important to know the value of text in a video. Titles, captions, and more deserve the best styles. In this tutorial, you’ll learn how to create 3D text in After Effects. &lt;/span&gt;&lt;/p&gt;
  1588. &lt;p&gt;&lt;span&gt;&lt;a href="https://photography.tutsplus.com/video/compatible-with/adobe-after-effects" target="_self"&gt;Adobe After Effects&lt;/a&gt; is a versatile app for bringing amazing video graphics to life. It helps you &lt;a href="https://elements.envato.com/learn/animation-tutorials" target="_self" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;create animations&lt;/a&gt;, titles, and countless other effects. &lt;/span&gt;&lt;/p&gt;
  1589. &lt;p&gt;&lt;span&gt;After Effects 3D text effects add a new dimension to text in your videos. They’re sure to grab audience attention, and thanks to templates, they’re easy to build.&lt;/span&gt;&lt;/p&gt;
  1590. &lt;p&gt;&lt;span&gt;Let’s get started!&lt;/span&gt;&lt;/p&gt;
  1591. &lt;h2 id="toc-v7n2-why-create-after-effects-3d-text-effects"&gt;&lt;span&gt;Why create After Effects 3D text effects?&lt;/span&gt;&lt;/h2&gt;
  1592. &lt;p&gt;&lt;span&gt;3D text animation has an array of amazing benefits that you and your audience will enjoy. &lt;/span&gt;&lt;/p&gt;
  1593. &lt;p&gt;&lt;span&gt;Consider this when you think about using 3D text in After Effects:&lt;/span&gt;&lt;/p&gt;
  1594. &lt;ul&gt;
  1595. &lt;li&gt;
  1596. &lt;strong&gt;3D text boosts your visual style.&lt;/strong&gt;&lt;span&gt; Flat effects can make videos dull and uninteresting. 3D animated text elevates the look and feel of any clip.&lt;/span&gt;
  1597. &lt;/li&gt;
  1598. &lt;li&gt;
  1599. &lt;strong&gt;You’ll gain attention from viewers.&lt;/strong&gt;&lt;span&gt; If you’ve ever seen a 3D video, you’ll know that they hold your focus. Take advantage of this in your own video projects with the text. &lt;/span&gt;
  1600. &lt;/li&gt;
  1601. &lt;li&gt;
  1602. &lt;strong&gt;It helps highlight key details.&lt;/strong&gt;&lt;span&gt; 3D text helps you add context to your video content. It’s a winning tool for captions, lower thirds, title cards, and so much more. &lt;/span&gt;
  1603. &lt;/li&gt;
  1604. &lt;li&gt;
  1605. &lt;strong&gt;It’s easier to read. &lt;/strong&gt;&lt;span&gt;The added dimension of depth makes 3D text easier to read. Sharing videos with an audience? This helps ensure your titles and captions are read. &lt;/span&gt;
  1606. &lt;/li&gt;
  1607. &lt;li&gt;
  1608. &lt;strong&gt;3D effects are popular marketing tools.&lt;/strong&gt;&lt;span&gt; Using your videos to promote a product or service? 3D animated text is a game-changer. They're attention-grabbing and help you attract new customers.&lt;/span&gt;
  1609. &lt;/li&gt;
  1610. &lt;/ul&gt;
  1611. &lt;p&gt;&lt;span&gt;As you can see, there are many benefits to 3D text effects. Consider how you’ll use them in your next project.&lt;/span&gt;&lt;/p&gt;
  1612. &lt;p&gt;&lt;span&gt;Now, let’s learn how to make 3D text in After Effects, step by step.&lt;/span&gt;&lt;/p&gt;
  1613. &lt;h2 id="toc-puhw-how-to-create-3d-letters-in-adobe-after-effects-step-by-step"&gt;&lt;span&gt;How to make a 3D text animation in After Effects&lt;/span&gt;&lt;/h2&gt;
  1614. &lt;p&gt;&lt;span&gt;For this tutorial, we’ll use the premium &lt;a href="https://elements.envato.com/3d-text-openers-V79RJPB" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;3D Text Openers&lt;/a&gt; template from Envato. It&lt;/span&gt;&lt;span&gt; has several beautiful color combos, and it’s easy to edit.&lt;/span&gt;&lt;/p&gt;
  1615. &lt;p&gt;&lt;span&gt;So let’s dive in and learn how to create a 3D text animation in After Effects.&lt;/span&gt;&lt;/p&gt;
  1616. &lt;h3 id="toc-cjyg-launch-a-3d-text-animation-template-in-after-effects"&gt;&lt;span&gt;1. Launch a 3D text animation template in After Effects&lt;/span&gt;&lt;/h3&gt;
  1617. &lt;p&gt;&lt;span&gt;With your template downloaded, you’ll need to open it in Adobe After Effects. Begin by finding the downloaded folder. &lt;/span&gt;&lt;/p&gt;
  1618. &lt;p&gt;&lt;span&gt;Inside, explore the contents. This one includes a folder with the actual project, and it has a handy help guide to show you how to work with the template.&lt;/span&gt;&lt;/p&gt;
  1619. &lt;figure class="post_image"&gt;&lt;a href="https://elements.envato.com/3d-text-openers-V79RJPB" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/151/posts/108581/image-upload/modify_3d_text_after_effects.jpg" alt="Modify the 3D text effect in After Effects" loading="lazy" width="870px" height="442px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/151/posts/108581/image-upload/modify_3d_text_after_effects.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/151/posts/108581/image-upload/modify_3d_text_after_effects.jpg" alt="Modify the 3D text effect in After Effects" loading="lazy" width="650px" height="333px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/151/posts/108581/image-upload/modify_3d_text_after_effects.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/151/posts/108581/image-upload/modify_3d_text_after_effects.jpg" alt="Modify the 3D text effect in After Effects" loading="lazy" width="380px" height="199px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/151/posts/108581/image-upload/modify_3d_text_after_effects.jpg 2x"&gt;&lt;/a&gt;
  1620. &lt;figcaption&gt;Find the .aep file and double-click on open it in After Effects.&lt;/figcaption&gt;
  1621. &lt;/figure&gt;
  1622. &lt;div class="callout-block"&gt;
  1623. &lt;span class="callout-icon callout-tip"&gt;&lt;/span&gt;
  1624. &lt;div class="callout-message"&gt;After Effects project files are called&lt;strong&gt; .aep&lt;/strong&gt; files. They contain all of the effects and content you need to create After Effects 3D text effects.&lt;/div&gt;
  1625. &lt;/div&gt;
  1626. &lt;p&gt;&lt;span&gt;To launch the project, &lt;strong&gt;double-click&lt;/strong&gt; on the .aep file, and you’ll see it launch in Adobe After Effects. Keep in mind: it may take a few moments. Effects are graphics-intensive.&lt;/span&gt;&lt;/p&gt;
  1627. &lt;h3 id="toc-cspp-select-the-effects-to-edit"&gt;&lt;span&gt;2. Select the effects to edit&lt;/span&gt;&lt;/h3&gt;
  1628. &lt;p&gt;&lt;span&gt;Spend a moment getting familiar with the layout of your After Effects window. In the center, you can see a video preview. On the left, notice the &lt;strong&gt;Project&lt;/strong&gt; panel is open.&lt;/span&gt;&lt;/p&gt;
  1629. &lt;figure class="post_image"&gt;&lt;a href="https://elements.envato.com/3d-text-openers-V79RJPB" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/151/posts/108581/image-upload/3d_text_animation.jpg" alt="3D text animation" loading="lazy" width="870px" height="516px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/151/posts/108581/image-upload/3d_text_animation.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/151/posts/108581/image-upload/3d_text_animation.jpg" alt="3D text animation" loading="lazy" width="650px" height="388px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/151/posts/108581/image-upload/3d_text_animation.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/151/posts/108581/image-upload/3d_text_animation.jpg" alt="3D text animation" loading="lazy" width="380px" height="230px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/151/posts/108581/image-upload/3d_text_animation.jpg 2x"&gt;&lt;/a&gt;
  1630. &lt;figcaption&gt;When After Effects opens, you can see your 3D text After Effects template imported and ready to start editing.&lt;/figcaption&gt;
  1631. &lt;/figure&gt;
  1632. &lt;p&gt;&lt;span&gt;In the &lt;/span&gt;&lt;strong&gt;Project&lt;/strong&gt;&lt;span&gt; panel, you can choose which 3D text animation you want to customize. The template includes several options, which are numbered. You can see these in the &lt;/span&gt;&lt;strong&gt;CUSTOMIZATION&lt;/strong&gt;&lt;span&gt; dropdown folder on the &lt;/span&gt;&lt;strong&gt;Project&lt;/strong&gt;&lt;span&gt; panel.&lt;/span&gt;&lt;/p&gt;
  1633. &lt;figure class="post_image"&gt;&lt;a href="https://elements.envato.com/3d-text-openers-V79RJPB" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/151/posts/108581/image-upload/how_to_make_3d_text_in_after_effects.jpg" alt="After Effects 3D text effects: Customization folder." loading="lazy" width="870px" height="391px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/151/posts/108581/image-upload/how_to_make_3d_text_in_after_effects.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/151/posts/108581/image-upload/how_to_make_3d_text_in_after_effects.jpg" alt="After Effects 3D text effects: Customization folder." loading="lazy" width="650px" height="295px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/151/posts/108581/image-upload/how_to_make_3d_text_in_after_effects.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/151/posts/108581/image-upload/how_to_make_3d_text_in_after_effects.jpg" alt="After Effects 3D text effects: Customization folder." loading="lazy" width="380px" height="177px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/151/posts/108581/image-upload/how_to_make_3d_text_in_after_effects.jpg 2x"&gt;&lt;/a&gt;
  1634. &lt;figcaption&gt;The &lt;strong&gt;Customization&lt;/strong&gt; folder contains a list of After Effects 3D text effects.&lt;/figcaption&gt;
  1635. &lt;/figure&gt;
  1636. &lt;p&gt;&lt;span&gt;For example:&lt;/span&gt;&lt;/p&gt;
  1637. &lt;ul&gt;
  1638. &lt;li&gt;
  1639. &lt;span&gt;Imagine if you want to use the green 3D text effect in After Effects. In this case, you’ll work with the customization files labeled &lt;/span&gt;&lt;strong&gt;03 GREEN Lower Text&lt;/strong&gt;&lt;span&gt; and &lt;/span&gt;&lt;strong&gt;03 GREEN Upper Text. &lt;/strong&gt;
  1640. &lt;/li&gt;
  1641. &lt;li&gt;
  1642. &lt;span&gt;For red, choose the files labeled &lt;/span&gt;&lt;strong&gt;06 RED.&lt;/strong&gt;
  1643. &lt;/li&gt;
  1644. &lt;/ul&gt;
  1645. &lt;p&gt;&lt;span style="text-align:-webkit-match-parent"&gt;In short, you only have to customize the text that you want to use for your project. While you have many options here, you don’t have to use all of them for your After Effects animated text.&lt;/span&gt;&lt;/p&gt;
  1646. &lt;p&gt;&lt;span&gt;Let’s look at how to make 3D text in After Effects using the green option. From the &lt;/span&gt;&lt;strong&gt;Project&lt;/strong&gt;&lt;span&gt; panel, double-click on&lt;/span&gt;&lt;strong&gt; 03 GREEN Lower Text.&lt;/strong&gt;&lt;/p&gt;
  1647. &lt;figure class="post_image"&gt;&lt;a href="https://elements.envato.com/3d-text-openers-V79RJPB" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/151/posts/108581/image-upload/after_effects_3d_text_effects.jpg" alt="After Effects 3D text effects" loading="lazy" width="870px" height="571px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/151/posts/108581/image-upload/after_effects_3d_text_effects.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/151/posts/108581/image-upload/after_effects_3d_text_effects.jpg" alt="After Effects 3D text effects" loading="lazy" width="650px" height="428px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/151/posts/108581/image-upload/after_effects_3d_text_effects.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/151/posts/108581/image-upload/after_effects_3d_text_effects.jpg" alt="After Effects 3D text effects" loading="lazy" width="380px" height="253px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/151/posts/108581/image-upload/after_effects_3d_text_effects.jpg 2x"&gt;&lt;/a&gt;
  1648. &lt;figcaption&gt;With your effect chosen, you’re ready to begin editing.&lt;/figcaption&gt;
  1649. &lt;/figure&gt;
  1650. &lt;p&gt;Watch what happens. In the preview section, you’ll see placeholder text appear. This is showing you that you’re editing only this specific part of the After Effects template. &lt;/p&gt;
  1651. &lt;h3 id="toc-g8x8-replace-the-text-with-your-own"&gt;&lt;span&gt;3. Replace the text with your own&lt;/span&gt;&lt;/h3&gt;
  1652. &lt;p&gt;&lt;span&gt;Now, it’s time to add your own text. Remember, the words that you see are merely placeholders. What you’ll do now is swap them out for your own words.&lt;/span&gt;&lt;/p&gt;
  1653. &lt;div class="callout-block"&gt;
  1654. &lt;span class="callout-icon callout-do"&gt;&lt;/span&gt;
  1655. &lt;div class="callout-message"&gt;&lt;span&gt;Effects can be quite complex to make from scratch. That's why premium templates are great: they leave the design work up to the experts. You’re just dropping in your content.&lt;/span&gt;&lt;/div&gt;
  1656. &lt;/div&gt;
  1657. &lt;p&gt;&lt;span&gt;Look at the bottom of After Effects. The lowermost panel is called the &lt;/span&gt;&lt;strong&gt;Timeline&lt;/strong&gt;&lt;span&gt;. On it, you’ll see stacked layers; these form the effect itself. &lt;/span&gt;&lt;/p&gt;
  1658. &lt;p&gt;&lt;span&gt;The pink line is the actual text that you’ll be editing.&lt;/span&gt;&lt;/p&gt;
  1659. &lt;figure class="post_image"&gt;&lt;a href="https://elements.envato.com/3d-text-openers-V79RJPB" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/151/posts/108581/image-upload/how_to_create_3d_letters.jpg" alt="How to make 3D text in After Effects" loading="lazy" width="870px" height="347px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/151/posts/108581/image-upload/how_to_create_3d_letters.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/151/posts/108581/image-upload/how_to_create_3d_letters.jpg" alt="How to make 3D text in After Effects" loading="lazy" width="650px" height="262px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/151/posts/108581/image-upload/how_to_create_3d_letters.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/151/posts/108581/image-upload/how_to_create_3d_letters.jpg" alt="How to make 3D text in After Effects" loading="lazy" width="380px" height="158px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/151/posts/108581/image-upload/how_to_create_3d_letters.jpg 2x"&gt;&lt;/a&gt;
  1660. &lt;figcaption&gt;In the &lt;strong&gt;Timeline&lt;/strong&gt;, you can see the text layer. It’s labeled &lt;strong&gt;TYPE HERE&lt;/strong&gt;, telling you to click on it to edit.&lt;/figcaption&gt;
  1661. &lt;/figure&gt;
  1662. &lt;p&gt;Notice the layer name labeled &lt;strong&gt;TYPE HERE.&lt;/strong&gt; This points you to where you’ll add your custom text. To add your own custom text, go ahead and double-click on &lt;strong&gt;TYPE HERE.&lt;/strong&gt;&lt;/p&gt;
  1663. &lt;p&gt;&lt;span&gt;When you do, watch the preview screen of your After Effects animated text project. You’ll see the placeholder text is now shaded. This means that it’s selected. &lt;/span&gt;&lt;/p&gt;
  1664. &lt;figure class="post_image"&gt;&lt;a href="https://elements.envato.com/3d-text-openers-V79RJPB" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/151/posts/108581/image-upload/how_to_create_3d_letters_fast.jpg" alt="How to make 3D text in After Effects: Edit placeholder text." loading="lazy" width="870px" height="503px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/151/posts/108581/image-upload/how_to_create_3d_letters_fast.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/151/posts/108581/image-upload/how_to_create_3d_letters_fast.jpg" alt="How to make 3D text in After Effects: Edit placeholder text." loading="lazy" width="650px" height="378px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/151/posts/108581/image-upload/how_to_create_3d_letters_fast.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/151/posts/108581/image-upload/how_to_create_3d_letters_fast.jpg" alt="How to make 3D text in After Effects: Edit placeholder text." loading="lazy" width="380px" height="225px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/151/posts/108581/image-upload/how_to_create_3d_letters_fast.jpg 2x"&gt;&lt;/a&gt;
  1665. &lt;figcaption&gt;With the text layer active, you’re ready to edit. Notice how the placeholder text is selected above.&lt;/figcaption&gt;
  1666. &lt;/figure&gt;
  1667. &lt;p&gt;Add your own text by typing it in. Over on the right, in the &lt;strong&gt;Properties &amp;gt; Text &lt;/strong&gt;group, you can make style edits.&lt;/p&gt;
  1668. &lt;p&gt;For example, you can adjust the font size and alignment, and you can also &lt;a href="https://elements.envato.com/learn/after-effects-how-to-change-solid-color" target="_self" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;change the color&lt;/a&gt; by opening the&lt;strong&gt; Fill&lt;/strong&gt; color chooser.&lt;/p&gt;
  1669. &lt;figure class="post_image"&gt;&lt;a href="https://elements.envato.com/3d-text-openers-V79RJPB" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/151/posts/108581/image-upload/edit_3d_text_after_effects.jpg" alt="Edit the 3D text effect in After Effects" loading="lazy" width="870px" height="482px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/151/posts/108581/image-upload/edit_3d_text_after_effects.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/151/posts/108581/image-upload/edit_3d_text_after_effects.jpg" alt="Edit the 3D text effect in After Effects" loading="lazy" width="650px" height="362px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/151/posts/108581/image-upload/edit_3d_text_after_effects.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/151/posts/108581/image-upload/edit_3d_text_after_effects.jpg" alt="Edit the 3D text effect in After Effects" loading="lazy" width="380px" height="216px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/151/posts/108581/image-upload/edit_3d_text_after_effects.jpg 2x"&gt;&lt;/a&gt;
  1670. &lt;figcaption&gt;Replace the placeholder content with your own words.&lt;/figcaption&gt;
  1671. &lt;/figure&gt;
  1672. &lt;p&gt;Just like that, you’ve created your first After Effects 3D text effects. Now, keep in mind that this template has text on multiple lines.&lt;/p&gt;
  1673. &lt;p&gt;Don’t forget to add your remaining text. Here, you’ve added the lower half of the text.&lt;/p&gt;
  1674. &lt;figure class="post_image"&gt;&lt;a href="https://elements.envato.com/3d-text-openers-V79RJPB" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/151/posts/108581/image-upload/change_3d_text_after_effects.jpg" alt="Change the 3D animated text in After Effects" loading="lazy" width="870px" height="448px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/151/posts/108581/image-upload/change_3d_text_after_effects.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/151/posts/108581/image-upload/change_3d_text_after_effects.jpg" alt="Change the 3D animated text in After Effects" loading="lazy" width="650px" height="337px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/151/posts/108581/image-upload/change_3d_text_after_effects.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/151/posts/108581/image-upload/change_3d_text_after_effects.jpg" alt="Change the 3D animated text in After Effects" loading="lazy" width="380px" height="201px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/151/posts/108581/image-upload/change_3d_text_after_effects.jpg 2x"&gt;&lt;/a&gt;
  1675. &lt;figcaption&gt;Repeat the earlier steps to add your remaining After Effects 3D text effects.&lt;/figcaption&gt;
  1676. &lt;/figure&gt;
  1677. &lt;p&gt;To add the upper text, move back to the &lt;strong&gt;Project &amp;gt; CUSTOMIZATION &lt;/strong&gt;folder. This time, double-click on &lt;strong&gt;03 GREEN Upper Text. &lt;/strong&gt;Then, repeat the steps of selecting and replacing the text.&lt;/p&gt;
  1678. &lt;h3 id="toc-pe6e-render-the-finished-project"&gt;&lt;span&gt;4. Render the finished project&lt;/span&gt;&lt;/h3&gt;
  1679. &lt;p&gt;&lt;span&gt;Above, you learned how to make 3D text in After Effects. The final step in the process is to export the project so that it's ready to share. &lt;/span&gt;&lt;/p&gt;
  1680. &lt;p&gt;&lt;span&gt;You can use these effects as a standalone video, or you can place them inside another project. &lt;/span&gt;&lt;/p&gt;
  1681. &lt;p&gt;&lt;span&gt;Many editors use After Effects for motion graphics and cool effects. Then, they’ll move these effects into other editing apps like Premiere Pro. &lt;/span&gt;&lt;/p&gt;
  1682. &lt;div class="callout-block"&gt;
  1683. &lt;span class="callout-icon callout-info"&gt;&lt;/span&gt;
  1684. &lt;div class="callout-message"&gt;&lt;span&gt;&lt;a href="https://elements.envato.com/learn/how-to-export-after-effects-to-mp4" target="_self" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;Exporting in After Effects&lt;/a&gt; is called rendering.&lt;/span&gt;&lt;/div&gt;
  1685. &lt;/div&gt;
  1686. &lt;p&gt;&lt;span&gt;Return once more to the &lt;/span&gt;&lt;strong&gt;Project&lt;/strong&gt;&lt;span&gt; panel. Below the &lt;/span&gt;&lt;strong&gt;CUSTOMIZATION&lt;/strong&gt;&lt;span&gt; folder is the &lt;/span&gt;&lt;strong&gt;RENDER COMPS &lt;/strong&gt;&lt;span&gt;folder. &lt;/span&gt;&lt;/p&gt;
  1687. &lt;p&gt;&lt;span&gt;Think of these as pre-packaged &lt;a href="https://elements.envato.com/learn/top-10-after-effects-templates" target="_self" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;After Effects templates&lt;/a&gt; that are ready to export. The edits you made will be incorporated automatically.&lt;/span&gt;&lt;/p&gt;
  1688. &lt;p&gt;&lt;span&gt;Recall that the effects you customized were the green designs. To render them, find the right render comp. &lt;/span&gt;&lt;/p&gt;
  1689. &lt;figure class="post_image"&gt;&lt;a href="https://elements.envato.com/3d-text-openers-V79RJPB" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/151/posts/108581/image-upload/render_3d_text_after_effects.jpg" alt="Render 3D animated text in After Effects." loading="lazy" width="870px" height="493px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/151/posts/108581/image-upload/render_3d_text_after_effects.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/151/posts/108581/image-upload/render_3d_text_after_effects.jpg" alt="Render 3D animated text in After Effects." loading="lazy" width="650px" height="371px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/151/posts/108581/image-upload/render_3d_text_after_effects.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/151/posts/108581/image-upload/render_3d_text_after_effects.jpg" alt="Render 3D animated text in After Effects." loading="lazy" width="380px" height="220px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/151/posts/108581/image-upload/render_3d_text_after_effects.jpg 2x"&gt;&lt;/a&gt;
  1690. &lt;figcaption&gt;Double-click on the green render comp to prepare the 3D text animation for exporting.&lt;/figcaption&gt;
  1691. &lt;/figure&gt;
  1692. &lt;p&gt;&lt;span&gt;Here, it’s labeled &lt;strong&gt;03 GREEN RENDER&lt;/strong&gt; on the &lt;strong&gt;Project&lt;/strong&gt; panel. Double-click on &lt;strong&gt;03 GREEN RENDER.&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;
  1693. &lt;p&gt;&lt;span&gt;Watch the &lt;/span&gt;&lt;strong&gt;Timeline&lt;/strong&gt;&lt;span&gt;. You’ll see that After Effects opens the render comp. In the video preview, you can see the finished effects that you have just built.&lt;/span&gt;&lt;/p&gt;
  1694. &lt;p&gt;&lt;span&gt;On the &lt;/span&gt;&lt;strong&gt;Timeline&lt;/strong&gt;&lt;span&gt;, click on the render comp’s layer. It’s labeled &lt;/span&gt;&lt;strong&gt;green 2 lines&lt;/strong&gt;&lt;span&gt; in this template. Clicking selects the layer. &lt;/span&gt;&lt;/p&gt;
  1695. &lt;p&gt;&lt;span&gt;With it selected, go to the &lt;/span&gt;&lt;strong&gt;Composition&lt;/strong&gt;&lt;span&gt; dropdown menu. It’s found at the very top of your After Effects screen.&lt;/span&gt;&lt;/p&gt;
  1696. &lt;figure class="post_image"&gt;&lt;a href="https://elements.envato.com/3d-text-openers-V79RJPB" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/151/posts/108581/image-upload/export_3d_text_animation.jpg" alt="Export 3D text animation" loading="lazy" width="870px" height="557px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/151/posts/108581/image-upload/export_3d_text_animation.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/151/posts/108581/image-upload/export_3d_text_animation.jpg" alt="Export 3D text animation" loading="lazy" width="650px" height="418px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/151/posts/108581/image-upload/export_3d_text_animation.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/151/posts/108581/image-upload/export_3d_text_animation.jpg" alt="Export 3D text animation" loading="lazy" width="380px" height="247px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/151/posts/108581/image-upload/export_3d_text_animation.jpg 2x"&gt;&lt;/a&gt;
  1697. &lt;figcaption&gt;Go to &lt;strong&gt;Composition &amp;gt; Add to Render Queue&lt;/strong&gt; to stage your effects for rendering.&lt;/figcaption&gt;
  1698. &lt;/figure&gt;
  1699. &lt;p&gt;&lt;span&gt;From the &lt;/span&gt;&lt;strong&gt;Composition&lt;/strong&gt;&lt;span&gt; menu, click &lt;/span&gt;&lt;strong&gt;Add to Render Queue.&lt;/strong&gt;&lt;span&gt; You’ll see the &lt;/span&gt;&lt;strong&gt;Render Queue &lt;/strong&gt;&lt;span&gt;open in place of the &lt;/span&gt;&lt;strong&gt;Timeline&lt;/strong&gt;&lt;span&gt;. Here, you’ll have a few choices to make. &lt;/span&gt;&lt;/p&gt;
  1700. &lt;ol&gt;
  1701. &lt;li&gt;
  1702. &lt;span&gt;On the &lt;/span&gt;&lt;strong&gt;Render Settings&lt;/strong&gt;&lt;span&gt; dropdown, you can choose the quality of your output. It defaults to &lt;/span&gt;&lt;strong&gt;Best Settings.&lt;/strong&gt;&lt;span&gt; For most projects, this is a good choice. &lt;/span&gt;
  1703. &lt;/li&gt;
  1704. &lt;li&gt;
  1705. &lt;span&gt;Below is the &lt;/span&gt;&lt;strong&gt;Output Module&lt;/strong&gt;&lt;span&gt; dropdown. This controls the format of your export. The default setting is &lt;/span&gt;&lt;strong&gt;H.264 - Match Render Settings - 15 Mbps.&lt;/strong&gt;&lt;span&gt; Again, this is a good choice. &lt;/span&gt;
  1706. &lt;/li&gt;
  1707. &lt;/ol&gt;
  1708. &lt;p&gt;&lt;span&gt;What you’ll get with these settings is a high-definition MP4 video file. &lt;/span&gt;&lt;/p&gt;
  1709. &lt;figure class="post_image"&gt;&lt;a href="https://elements.envato.com/3d-text-openers-V79RJPB" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/151/posts/108581/image-upload/save_after_effects_3d_text_effects.jpg" alt="Save After Effects 3D text effects" loading="lazy" width="870px" height="231px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/151/posts/108581/image-upload/save_after_effects_3d_text_effects.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/151/posts/108581/image-upload/save_after_effects_3d_text_effects.jpg" alt="Save After Effects 3D text effects" loading="lazy" width="650px" height="176px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/151/posts/108581/image-upload/save_after_effects_3d_text_effects.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/151/posts/108581/image-upload/save_after_effects_3d_text_effects.jpg" alt="Save After Effects 3D text effects" loading="lazy" width="380px" height="109px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/151/posts/108581/image-upload/save_after_effects_3d_text_effects.jpg 2x"&gt;&lt;/a&gt;
  1710. &lt;figcaption&gt;Choose your render settings, and then click &lt;strong&gt;Render&lt;/strong&gt; to start the rendering process.&lt;/figcaption&gt;
  1711. &lt;/figure&gt;
  1712. &lt;p&gt;&lt;span&gt;Finally, click on the &lt;/span&gt;&lt;strong&gt;Output To&lt;/strong&gt;&lt;span&gt; menu on the right. Here, browse to a folder on your computer where you want the finished file to be saved. You can also choose a custom file name by typing it in. &lt;/span&gt;&lt;/p&gt;
  1713. &lt;p&gt;&lt;span&gt;Click &lt;/span&gt;&lt;strong&gt;Save&lt;/strong&gt;&lt;span&gt; when you’ve made these selections. &lt;/span&gt;&lt;/p&gt;
  1714. &lt;p&gt;&lt;span&gt;Now, it’s time to &lt;a href="https://photography.tutsplus.com/articles/understanding-3d-rendering-a-beginners-guide--cms-109097" target="_self"&gt;render the 3D&lt;/a&gt; text animation. To do that, click &lt;/span&gt;&lt;strong&gt;Render&lt;/strong&gt;&lt;span&gt; in the lower right corner of After Effects. When you do, After Effects will get to work rendering your project.&lt;/span&gt;&lt;/p&gt;
  1715. &lt;p&gt;&lt;span&gt;You can keep track of the progress with the &lt;strong&gt;Current Render &lt;/strong&gt;progress bar. &lt;/span&gt;&lt;/p&gt;
  1716. &lt;div class="callout-block"&gt;
  1717. &lt;span class="callout-icon callout-warn"&gt;&lt;/span&gt;
  1718. &lt;div class="callout-message"&gt;&lt;span&gt;Again, these projects are very graphics-intensive. It may take a few minutes to complete the &lt;a href="https://elements.envato.com/learn/how-to-render-video-in-after-effects-faster" target="_self" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;After Effects rendering&lt;/a&gt;. &lt;/span&gt;&lt;/div&gt;
  1719. &lt;/div&gt;
  1720. &lt;figure class="post_image"&gt;&lt;a href="https://elements.envato.com/3d-text-openers-V79RJPB" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/151/posts/108581/image-upload/export_after_effects_3d_text_effects.jpg" alt="Export After Effects 3D text effects" loading="lazy" width="870px" height="233px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/151/posts/108581/image-upload/export_after_effects_3d_text_effects.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/151/posts/108581/image-upload/export_after_effects_3d_text_effects.jpg" alt="Export After Effects 3D text effects" loading="lazy" width="650px" height="178px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/151/posts/108581/image-upload/export_after_effects_3d_text_effects.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/151/posts/108581/image-upload/export_after_effects_3d_text_effects.jpg" alt="Export After Effects 3D text effects" loading="lazy" width="380px" height="110px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/151/posts/108581/image-upload/export_after_effects_3d_text_effects.jpg 2x"&gt;&lt;/a&gt;
  1721. &lt;figcaption&gt;Your finished After Effects 3D text effects will be rendered and ready to share.&lt;/figcaption&gt;
  1722. &lt;/figure&gt;
  1723. &lt;p&gt;After Effects will notify you when the rendering is complete. Then, you can open up your exported MP4 effects.&lt;/p&gt;
  1724. &lt;p&gt;&lt;span&gt;As you can see, it’s easy to build After Effects 3D text effects. That’s all thanks to the power of premium &lt;a href="https://photography.tutsplus.com/tutorials/10-after-effects-3d-text-animation-templates-for-2018--cms-30707" target="_self"&gt;3D text animation templates&lt;/a&gt;.&lt;/span&gt;&lt;/p&gt;
  1725. &lt;h2 id="toc-2cg7-build-your-own-after-effects-3d-text-effects-today"&gt;&lt;span&gt;Build your own After Effects 3D text effects today&lt;/span&gt;&lt;/h2&gt;
  1726. &lt;p&gt;&lt;span&gt;Now you know how to make 3D text in After Effects. It’s a remarkably easy process:&lt;/span&gt;&lt;span&gt; simply choose your favorite template from Envato. Then, swap out the placeholder text with your own words. &lt;em&gt;Voilà!&lt;/em&gt;&lt;/span&gt;&lt;/p&gt;
  1727. &lt;p&gt;Envato has a powerful offer: unlimited downloads. For a flat monthly rate, you can get and use as many creative assets as you want. Enjoy fonts, 3D text animation templates, music, and so much more!&lt;/p&gt;
  1728. &lt;/div&gt;&lt;div data-content-block-type="MultiElementItem" class="content-block content-block-multielementitem relative" data-controller="multi-element-item-gallery" id="ilrc"&gt;
  1729. &lt;div class="flex flex-row items-center div-container" data-multi-element-item-gallery-target="item"&gt;
  1730. &lt;a href="https://elements.envato.com/sales-banner-JXDY9RV" data-multi-element-item-gallery-target="linkImage" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;img src="https://elements-resized.envatousercontent.com/envato-dam-assets-production/EVA/TRX/75/f4/2f/23/24/v1_E10/E10DUB30.png?w=1200&amp;amp;h=800&amp;amp;cf_fit=crop&amp;amp;q=85&amp;amp;format=jpeg&amp;amp;s=dd4f843cc61bf02fcb68535e2996a11854555bb036615b7dd207dea985ec9347" alt="Sales Banner" data-multi-element-item-gallery-target="image" class="w-20 h-20 object-cover" loading="lazy"&gt;&lt;/a&gt;&lt;a href="https://elements.envato.com/sales-banner-JXDY9RV" data-multi-element-item-gallery-target="titleLink" class="w-full flex text-left underline div-container" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;div class="w-full"&gt;&lt;div&gt;Sales Banner&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
  1731. &lt;/div&gt;
  1732. &lt;div class="flex flex-row items-center div-container" data-multi-element-item-gallery-target="item"&gt;
  1733. &lt;a href="https://elements.envato.com/pop-3d-title-2NFHJZT" data-multi-element-item-gallery-target="linkImage" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;img src="https://elements-resized.envatousercontent.com/elements-video-cover-images/files/427938074/imagepreview.jpg?w=1200&amp;amp;h=800&amp;amp;cf_fit=crop&amp;amp;q=85&amp;amp;format=jpeg&amp;amp;s=f4fc5d15272e6c04aee3edc87c8d64d51a2290e65e95339d989ffc639100c826" alt="Pop 3D Title" data-multi-element-item-gallery-target="image" class="w-20 h-20 object-cover" loading="lazy"&gt;&lt;/a&gt;&lt;a href="https://elements.envato.com/pop-3d-title-2NFHJZT" data-multi-element-item-gallery-target="titleLink" class="w-full flex text-left underline div-container" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;div class="w-full"&gt;&lt;div&gt;Pop 3D Title&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
  1734. &lt;/div&gt;
  1735. &lt;div class="flex flex-row items-center div-container" data-multi-element-item-gallery-target="item"&gt;
  1736. &lt;a href="https://elements.envato.com/animated-blob-letters-RJU8NV2" data-multi-element-item-gallery-target="linkImage" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;img src="https://elements-resized.envatousercontent.com/elements-video-cover-images/files/453790137/Preview%20Image%20AE.jpg?w=1200&amp;amp;h=800&amp;amp;cf_fit=crop&amp;amp;q=85&amp;amp;format=jpeg&amp;amp;s=34aaa835f540ea92f688297f48668ac82e038d56fc2d682dda00b2ee08c82f61" alt="Animated Blob Letters" data-multi-element-item-gallery-target="image" class="w-20 h-20 object-cover" loading="lazy"&gt;&lt;/a&gt;&lt;a href="https://elements.envato.com/animated-blob-letters-RJU8NV2" data-multi-element-item-gallery-target="titleLink" class="w-full flex text-left underline div-container" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;div class="w-full"&gt;&lt;div&gt;Animated Blob Letters&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
  1737. &lt;/div&gt;
  1738. &lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ix9k"&gt;
  1739. &lt;p&gt;&lt;span&gt;And if you need any help finding the perfect project content, try out Envato's &lt;a href="https://elements.envato.com/assistant" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;AI-Search assistant&lt;/a&gt;. Simply describe your project needs in just a few words. Save time and get everything you need.&lt;/span&gt;&lt;/p&gt;
  1740. &lt;h2 id="toc-ec8i-keep-improving-your-after-effects-skills"&gt;&lt;span&gt;Keep improving your After Effects skills&lt;/span&gt;&lt;/h2&gt;
  1741. &lt;p&gt;&lt;span&gt;If you're more into &lt;a href="https://www.youtube.com/@envatotuts" target="_self"&gt;video tutorials&lt;/a&gt;, check out the Envato Tuts+ YouTube channel. You can also learn how to make 3D text in After Effects right there:&lt;/span&gt;&lt;/p&gt;
  1742. &lt;figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=ElF6V_vLf-g&amp;amp;t=0"&gt;
  1743.            &lt;iframe src="https://www.youtube.com/embed/ElF6V_vLf-g?rel=0&amp;amp;start=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy" style="border-radius: 15px;"&gt;&lt;/iframe&gt;
  1744.          &lt;/figure&gt;
  1745. &lt;p&gt;&lt;span&gt;3D text After Effects designs are sure to amaze your audience, but they’re only one of countless cool effects that you can create. &lt;/span&gt;&lt;/p&gt;
  1746. &lt;p&gt;&lt;span&gt;Here are several top tutorials to help expand your After Effects skills. Check them out today to become a better editor:&lt;/span&gt;&lt;/p&gt;
  1747. &lt;ul class="roundup-block__contents posts--half-width roundup-block--list"&gt;
  1748. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://photography.tutsplus.com/tutorials/how-to-make-animated-text-after-effects--cms-109089"&gt;&lt;div class="roundup-block__content-container"&gt;
  1749. &lt;div class="roundup-block__preview"&gt;
  1750. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/109089/preview_image/mistake_ae.jpg" alt="" loading="lazy" width="820px" height="574px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1600/uploads/users/30/posts/109089/preview_image/mistake_ae.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109089/preview_image/mistake_ae.jpg" alt="" loading="lazy" width="650px" height="456px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109089/preview_image/mistake_ae.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109089/preview_image/mistake_ae.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109089/preview_image/mistake_ae.jpg 2x"&gt;
  1751. &lt;/div&gt;
  1752. &lt;div class="roundup-block__content-meta"&gt;
  1753. &lt;div class="roundup-block__content-title"&gt;How to make an animated text effect in After Effects&lt;/div&gt;
  1754. &lt;div class="roundup-block__author-info"&gt;
  1755. &lt;div class="roundup-block__author-profile-image"&gt;
  1756. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/33/profiles/21377/profileImage/Pixrate_logo.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/33/profiles/21377/profileImage/Pixrate_logo.png 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/33/profiles/21377/profileImage/Pixrate_logo.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/33/profiles/21377/profileImage/Pixrate_logo.png 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/33/profiles/21377/profileImage/Pixrate_logo.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/33/profiles/21377/profileImage/Pixrate_logo.png 2x"&gt;
  1757. &lt;/div&gt;
  1758. &lt;div class="roundup-block__author-meta"&gt;
  1759. &lt;div class="roundup-block__author-name"&gt;Mohamed Elaasry&lt;/div&gt;
  1760. &lt;div class="roundup-block__published-date"&gt;23 Jan 2025&lt;/div&gt;
  1761. &lt;/div&gt;
  1762. &lt;/div&gt;
  1763. &lt;/div&gt;
  1764. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  1765. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://photography.tutsplus.com/tutorials/stretchy-text-after-effects--cms-109146"&gt;&lt;div class="roundup-block__content-container"&gt;
  1766. &lt;div class="roundup-block__preview"&gt;
  1767. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2852/posts/109146/preview_image/Final_Product7.png" alt="" loading="lazy" width="820px" height="574px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1600/uploads/users/2852/posts/109146/preview_image/Final_Product7.png 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2852/posts/109146/preview_image/Final_Product7.png" alt="" loading="lazy" width="650px" height="456px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2852/posts/109146/preview_image/Final_Product7.png 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2852/posts/109146/preview_image/Final_Product7.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2852/posts/109146/preview_image/Final_Product7.png 2x"&gt;
  1768. &lt;/div&gt;
  1769. &lt;div class="roundup-block__content-meta"&gt;
  1770. &lt;div class="roundup-block__content-title"&gt;On-trend stretchy text with After Effects&lt;/div&gt;
  1771. &lt;div class="roundup-block__author-info"&gt;
  1772. &lt;div class="roundup-block__author-profile-image"&gt;
  1773. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/21379/profileImage/dm.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/21379/profileImage/dm.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/21379/profileImage/dm.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/21379/profileImage/dm.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/21379/profileImage/dm.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/21379/profileImage/dm.jpg 2x"&gt;
  1774. &lt;/div&gt;
  1775. &lt;div class="roundup-block__author-meta"&gt;
  1776. &lt;div class="roundup-block__author-name"&gt;Dylan Mercer&lt;/div&gt;
  1777. &lt;div class="roundup-block__published-date"&gt;24 Mar 2025&lt;/div&gt;
  1778. &lt;/div&gt;
  1779. &lt;/div&gt;
  1780. &lt;/div&gt;
  1781. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  1782. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://photography.tutsplus.com/tutorials/stretchy-variable-fonts-in-after-effects-thanks-to-expressions--cms-109160"&gt;&lt;div class="roundup-block__content-container"&gt;
  1783. &lt;div class="roundup-block__preview"&gt;
  1784. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2852/posts/109160/preview_image/varyFonts_pic_000_Thumbnail02.png" alt="" loading="lazy" width="820px" height="574px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1600/uploads/users/2852/posts/109160/preview_image/varyFonts_pic_000_Thumbnail02.png 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2852/posts/109160/preview_image/varyFonts_pic_000_Thumbnail02.png" alt="" loading="lazy" width="650px" height="456px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2852/posts/109160/preview_image/varyFonts_pic_000_Thumbnail02.png 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2852/posts/109160/preview_image/varyFonts_pic_000_Thumbnail02.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2852/posts/109160/preview_image/varyFonts_pic_000_Thumbnail02.png 2x"&gt;
  1785. &lt;/div&gt;
  1786. &lt;div class="roundup-block__content-meta"&gt;
  1787. &lt;div class="roundup-block__content-title"&gt;Stretchy variable fonts in After Effects (thanks to expressions)&lt;/div&gt;
  1788. &lt;div class="roundup-block__author-info"&gt;
  1789. &lt;div class="roundup-block__author-profile-image"&gt;
  1790. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/21379/profileImage/dm.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/21379/profileImage/dm.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/21379/profileImage/dm.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/21379/profileImage/dm.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/21379/profileImage/dm.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/21379/profileImage/dm.jpg 2x"&gt;
  1791. &lt;/div&gt;
  1792. &lt;div class="roundup-block__author-meta"&gt;
  1793. &lt;div class="roundup-block__author-name"&gt;Dylan Mercer&lt;/div&gt;
  1794. &lt;div class="roundup-block__published-date"&gt;16 Apr 2025&lt;/div&gt;
  1795. &lt;/div&gt;
  1796. &lt;/div&gt;
  1797. &lt;/div&gt;
  1798. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  1799. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://photography.tutsplus.com/tutorials/how-to-create-a-saul-bass-style-title-animation-in-after-effects--cms-109184"&gt;&lt;div class="roundup-block__content-container"&gt;
  1800. &lt;div class="roundup-block__preview"&gt;
  1801. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/109184/preview_image/aoam.jpg" alt="" loading="lazy" width="820px" height="574px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1600/uploads/users/30/posts/109184/preview_image/aoam.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109184/preview_image/aoam.jpg" alt="" loading="lazy" width="650px" height="456px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109184/preview_image/aoam.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109184/preview_image/aoam.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109184/preview_image/aoam.jpg 2x"&gt;
  1802. &lt;/div&gt;
  1803. &lt;div class="roundup-block__content-meta"&gt;
  1804. &lt;div class="roundup-block__content-title"&gt;How to create a Saul Bass style title animation in After Effects&lt;/div&gt;
  1805. &lt;div class="roundup-block__author-info"&gt;
  1806. &lt;div class="roundup-block__author-profile-image"&gt;
  1807. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/591/profiles/18402/profileImage/Profile400.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/591/profiles/18402/profileImage/Profile400.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/591/profiles/18402/profileImage/Profile400.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/591/profiles/18402/profileImage/Profile400.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/591/profiles/18402/profileImage/Profile400.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/591/profiles/18402/profileImage/Profile400.jpg 2x"&gt;
  1808. &lt;/div&gt;
  1809. &lt;div class="roundup-block__author-meta"&gt;
  1810. &lt;div class="roundup-block__author-name"&gt;Charles Yeager&lt;/div&gt;
  1811. &lt;div class="roundup-block__published-date"&gt;20 May 2025&lt;/div&gt;
  1812. &lt;/div&gt;
  1813. &lt;/div&gt;
  1814. &lt;/div&gt;
  1815. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  1816. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://photography.tutsplus.com/articles/editing-questions-beginners-always-ask--cms-109185"&gt;&lt;div class="roundup-block__content-container"&gt;
  1817. &lt;div class="roundup-block__preview"&gt;
  1818. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/109185/preview_image/thumb_tips.jpg" alt="" loading="lazy" width="820px" height="574px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1600/uploads/users/30/posts/109185/preview_image/thumb_tips.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109185/preview_image/thumb_tips.jpg" alt="" loading="lazy" width="650px" height="456px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109185/preview_image/thumb_tips.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109185/preview_image/thumb_tips.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109185/preview_image/thumb_tips.jpg 2x"&gt;
  1819. &lt;/div&gt;
  1820. &lt;div class="roundup-block__content-meta"&gt;
  1821. &lt;div class="roundup-block__content-title"&gt;10 editing questions beginners always ask (answered by a pro)&lt;/div&gt;
  1822. &lt;div class="roundup-block__author-info"&gt;
  1823. &lt;div class="roundup-block__author-profile-image"&gt;
  1824. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2800/profiles/21324/profileImage/TG_Tuts.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2800/profiles/21324/profileImage/TG_Tuts.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2800/profiles/21324/profileImage/TG_Tuts.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2800/profiles/21324/profileImage/TG_Tuts.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2800/profiles/21324/profileImage/TG_Tuts.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2800/profiles/21324/profileImage/TG_Tuts.jpg 2x"&gt;
  1825. &lt;/div&gt;
  1826. &lt;div class="roundup-block__author-meta"&gt;
  1827. &lt;div class="roundup-block__author-name"&gt;Tom Graham&lt;/div&gt;
  1828. &lt;div class="roundup-block__published-date"&gt;22 May 2025&lt;/div&gt;
  1829. &lt;/div&gt;
  1830. &lt;/div&gt;
  1831. &lt;/div&gt;
  1832. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  1833. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://photography.tutsplus.com/tutorials/after-effects-how-to-make-a-2d-photo-into-a-3d-video--cms-108838"&gt;&lt;div class="roundup-block__content-container"&gt;
  1834. &lt;div class="roundup-block__preview"&gt;
  1835. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/403/posts/108838/preview_image/3d_photo_effect_preview.jpg" alt="" loading="lazy" width="820px" height="574px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1600/uploads/users/403/posts/108838/preview_image/3d_photo_effect_preview.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/403/posts/108838/preview_image/3d_photo_effect_preview.jpg" alt="" loading="lazy" width="650px" height="456px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/403/posts/108838/preview_image/3d_photo_effect_preview.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/403/posts/108838/preview_image/3d_photo_effect_preview.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/403/posts/108838/preview_image/3d_photo_effect_preview.jpg 2x"&gt;
  1836. &lt;/div&gt;
  1837. &lt;div class="roundup-block__content-meta"&gt;
  1838. &lt;div class="roundup-block__content-title"&gt;After Effects: How to Make a 2D Photo Into a 3D Video&lt;/div&gt;
  1839. &lt;div class="roundup-block__author-info"&gt;
  1840. &lt;div class="roundup-block__author-profile-image"&gt;
  1841. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg 2x"&gt;
  1842. &lt;/div&gt;
  1843. &lt;div class="roundup-block__author-meta"&gt;
  1844. &lt;div class="roundup-block__author-name"&gt;Jonathan Lam&lt;/div&gt;
  1845. &lt;div class="roundup-block__published-date"&gt;06 Aug 2024&lt;/div&gt;
  1846. &lt;/div&gt;
  1847. &lt;/div&gt;
  1848. &lt;/div&gt;
  1849. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  1850. &lt;/ul&gt;
  1851. &lt;/div&gt;&lt;div class="mediafed_ad"&gt;&lt;img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/669438/s/9743/sc/4/mf.gif" width="1" /&gt;&lt;a href="http://da.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/9743/a2.htm"&gt;&lt;img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/9743/a2.img" /&gt;&lt;/a&gt;&lt;img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/9743/a2t.img" width="1" /&gt;&lt;/div&gt;</content>
  1852.    <published>2025-06-30 13:03:00 UTC</published>
  1853.    <updated>2025-06-30 13:03:00 UTC</updated>
  1854.    <author>
  1855.      <name>Andrew Childress</name>
  1856.    </author>
  1857.  </entry>
  1858.  <entry>
  1859.    <id>tag:tutsplus.com,2005:PostPresenter/cms-33757</id>
  1860.    <published>2019-08-12T05:36:49+00:00</published>
  1861.    <link rel="alternate" type="text/html" href="https://design.tutsplus.com/tutorials/how-to-replace-a-sky-in-a-photo-in-affinity-photo--cms-33757"/>
  1862.    <title>How to replace the sky in a photo in Affinity Photo</title>
  1863.    <content type="html">&lt;style&gt;* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}&lt;/style&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ipwp"&gt;&lt;p&gt;Mother Nature doesn't always deliver the perfect sky. This Affinity Photo tutorial will show you how to replace drab skies with vibrant clouds, colors, or entirely &lt;a href="https://design.tutsplus.com/tutorials/how-to-remove-a-background-from-a-logo--cms-109171" target="_blank" rel="noopener"&gt;new backgrounds&lt;/a&gt;. Learn how to replace the background to dramatically change the mood of your photos. &lt;/p&gt;&lt;/div&gt;&lt;div data-content-block-type="TableOfContents" class="content-block content-block-tableofcontents"&gt;
  1864. &lt;div data-content-block-type="ContentTextBlock" class="content-block content-block-contenttextblock" id="io09"&gt;&lt;p&gt;Jump to content in this section:&lt;/p&gt;&lt;/div&gt;
  1865. &lt;ul class="visual-toc-list toc-ordered-list visual-toc__regular-theme div-container visual-toc-list__overflow visual-toc-list__unequal-split" start="0"&gt;
  1866.  
  1867.  
  1868. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-m74u-how-to-add-clouds-to-a-sky"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;How to add clouds to a sky&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  1869. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-opbl-how-to-create-a-sunset-photo-effect"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;How to create a sunset photo effect&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  1870. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-ajrg-how-to-extract-a-mountain-range"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;How to extract a mountain range&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  1871. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-4f2m-how-to-create-sunrise-lighting-effects"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;How to create sunrise lighting effects&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  1872. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-xsvj-how-to-create-shadow-effects"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;How to create shadow effects&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  1873. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-6klc-how-to-create-a-sunset-color-grade"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;How to create a sunset color grade&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  1874. &lt;li class="toc-item-title" id="i06tr"&gt;&lt;a href="#toc-oogb-how-to-replace-anything-in-a-photo-using-envato-imageedit"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;How to replace the sky (and any object) in a photo using Envato ImageEdit&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  1875. &lt;/ul&gt;
  1876. &lt;/div&gt;&lt;div data-content-block-type="Wysi" id="i1kq" class="content-block-wysi content-block"&gt;
  1877. &lt;h2 id="toc-m74u-how-to-add-clouds-to-a-sky"&gt;
  1878. &lt;span class="sectionnum"&gt;1.&lt;/span&gt; How to add clouds to a sky&lt;/h2&gt;
  1879. &lt;p&gt;First, let's look at the quickest way to replace the sky, which is to add clouds! This method will work best for shots where the sky is just a little too flat and could use some detail. In this example, we will be adding a bit of a twist to our clouds. But the technique is the same, whether you want a dark sky replacement photo effect or a straight-up twister. &lt;/p&gt;
  1880. &lt;h3 id="toc-y7yt-step-1"&gt;Step 1&lt;/h3&gt;
  1881. &lt;p&gt;Start by dragging and dropping the &lt;a href="https://elements.envato.com/strange-stormy-clouds-PN2R2SM" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;strange stormy sky stock image&lt;/a&gt; onto the canvas, over our &lt;a href="https://elements.envato.com/pretty-girl-in-a-beach-5L2JTEQ" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;beach image.&lt;/a&gt; Crop the image to add a bit more room for the cloudy sky. &lt;/p&gt;
  1882. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/1.1.jpg" alt="place base image " loading="lazy" width="870px" height="856px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/1.1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/1.1.jpg" alt="place base image " loading="lazy" width="650px" height="640px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/1.1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/1.1.jpg" alt="place base image " loading="lazy" width="380px" height="374px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/1.1.jpg 2x"&gt;&lt;/figure&gt;
  1883. &lt;h3 id="toc-1dh6-step-2"&gt;Step&lt;strong&gt; &lt;/strong&gt;2&lt;/h3&gt;
  1884. &lt;p&gt;Make sure the horizon line of each photo matches up reasonably closely. You can temporarily bring down the &lt;strong&gt;Opacity &lt;/strong&gt;of the storm clouds if needed to line everything up. &lt;/p&gt;
  1885. &lt;p&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/1.2.jpg" alt="match horizon lines " loading="lazy" width="870px" height="856px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/1.2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/1.2.jpg" alt="match horizon lines " loading="lazy" width="650px" height="640px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/1.2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/1.2.jpg" alt="match horizon lines " loading="lazy" width="380px" height="374px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/1.2.jpg 2x"&gt;&lt;/p&gt;
  1886. &lt;h3 id="toc-x6x6-step-3"&gt;Step 3&lt;/h3&gt;
  1887. &lt;p&gt;Next, add a &lt;strong&gt;Layer Mask &lt;/strong&gt;to the storm clouds. Then, with a large, soft, round &lt;strong&gt;Brush&lt;/strong&gt;, mask out the bottom half of the cloud image.&lt;/p&gt;
  1888. &lt;p&gt;As both photos have a grey hue to them, they will blend beautifully with each other. With this method, I suggest choosing a sky that is similar in tone to the original image if you'd like to save some time on blending. &lt;/p&gt;
  1889. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/1.3.jpg" alt="mask sky " loading="lazy" width="870px" height="856px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/1.3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/1.3.jpg" alt="mask sky " loading="lazy" width="650px" height="640px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/1.3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/1.3.jpg" alt="mask sky " loading="lazy" width="380px" height="374px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/1.3.jpg 2x"&gt;&lt;/figure&gt;
  1890. &lt;h3 id="toc-9aqf-step-4"&gt;Step 4&lt;/h3&gt;
  1891. &lt;p&gt;Finish blending the two images by adjusting the color, brightness, and contrast of both the clouds and the original image if needed.&lt;/p&gt;
  1892. &lt;p&gt;Here, I darkened and upped the contrast of both the base image and clouds using a &lt;strong&gt;Brightness/Contrast&lt;/strong&gt; layer, while also desaturating the base image using a black and white &lt;strong&gt;gradient map &lt;/strong&gt;adjustment layer. &lt;/p&gt;
  1893. &lt;p&gt;I then committed to the "storm of the century" vibe by adding both green and blue hues to the image with a &lt;strong&gt;Color Balance&lt;/strong&gt; and S curve &lt;strong&gt;Curves&lt;/strong&gt; layer. &lt;/p&gt;
  1894. &lt;h4 id="toc-jxbk-brightnesscontrast-settings"&gt;Brightness/Contrast settings &lt;/h4&gt;
  1895. &lt;ul&gt;
  1896. &lt;li&gt;&lt;strong&gt;Brightness: -38%&lt;/strong&gt;&lt;/li&gt;
  1897. &lt;li&gt;&lt;strong&gt;Contrast: 19%&lt;/strong&gt;&lt;/li&gt;
  1898. &lt;/ul&gt;
  1899. &lt;h4 id="toc-0w3j-gradient-map-settings"&gt;Gradient Map settings &lt;/h4&gt;
  1900. &lt;ul&gt;
  1901. &lt;li&gt;&lt;strong&gt;Black to White &lt;/strong&gt;&lt;/li&gt;
  1902. &lt;li&gt;&lt;strong&gt;Opacity: 47%&lt;/strong&gt;&lt;/li&gt;
  1903. &lt;/ul&gt;
  1904. &lt;h4 id="toc-is2o-color-balance-settings"&gt;Color Balance settings &lt;/h4&gt;
  1905. &lt;ul&gt;
  1906. &lt;li&gt;&lt;strong&gt;Red: -33%&lt;/strong&gt;&lt;/li&gt;
  1907. &lt;li&gt;&lt;strong&gt;Green: 51%&lt;/strong&gt;&lt;/li&gt;
  1908. &lt;li&gt;&lt;strong&gt;Blue: 59%&lt;/strong&gt;&lt;/li&gt;
  1909. &lt;/ul&gt;
  1910. &lt;h4 id="toc-3bnz-curves-settings"&gt;Curves settings &lt;/h4&gt;
  1911. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/1.4-1.jpg" alt="curves " loading="lazy" width="870px" height="624px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/1.4-1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/1.4-1.jpg" alt="curves " loading="lazy" width="650px" height="468px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/1.4-1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/1.4-1.jpg" alt="curves " loading="lazy" width="380px" height="276px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/1.4-1.jpg 2x"&gt;&lt;/figure&gt;
  1912. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/1.4-2.jpg" alt="final layers " loading="lazy" width="870px" height="856px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/1.4-2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/1.4-2.jpg" alt="final layers " loading="lazy" width="650px" height="640px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/1.4-2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/1.4-2.jpg" alt="final layers " loading="lazy" width="380px" height="374px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/1.4-2.jpg 2x"&gt;&lt;/figure&gt;
  1913. &lt;h2 id="toc-opbl-how-to-create-a-sunset-photo-effect"&gt;
  1914. &lt;span class="sectionnum"&gt;2.&lt;/span&gt; How to create a sunset photo effect&lt;/h2&gt;
  1915. &lt;p&gt;Next, let's amp it up a notch by creating a substantially more dynamic sky mixed with a reflective surface.&lt;/p&gt;
  1916. &lt;h3 id="toc-ntc5-step-1"&gt;Step 1&lt;/h3&gt;
  1917. &lt;p&gt;First, let's crop our &lt;a href="https://elements.envato.com/beautiful-landscape-of-lanzarote-island-P5MZDRQ" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;beach image&lt;/a&gt; to increase the sky. I'll opt for less land, so we have an equal mix of sky, water, and earth. &lt;/p&gt;
  1918. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/2.1.jpg" alt="place image " loading="lazy" width="870px" height="564px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/2.1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/2.1.jpg" alt="place image " loading="lazy" width="650px" height="423px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/2.1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/2.1.jpg" alt="place image " loading="lazy" width="380px" height="250px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/2.1.jpg 2x"&gt;&lt;/figure&gt;
  1919. &lt;h3 id="toc-1h1j-step-2"&gt;Step 2&lt;/h3&gt;
  1920. &lt;p&gt;Now, drop in the &lt;a href="https://elements.envato.com/sky-background-composition-of-nature-QGJU3MP" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;sky replacement.&lt;/a&gt; Once again, just like in the previous image, line up the horizons.&lt;/p&gt;
  1921. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/2.2.jpg" alt="match horizon lines  " loading="lazy" width="870px" height="564px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/2.2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/2.2.jpg" alt="match horizon lines  " loading="lazy" width="650px" height="423px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/2.2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/2.2.jpg" alt="match horizon lines  " loading="lazy" width="380px" height="250px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/2.2.jpg 2x"&gt;&lt;/figure&gt;
  1922. &lt;h3 id="toc-nu5i-step-3"&gt;Step 3&lt;/h3&gt;
  1923. &lt;p&gt;Add a &lt;strong&gt;Layer Mask &lt;/strong&gt;just as we did with the last sky, only this time we'll be a bit more precise with our masking.&lt;/p&gt;
  1924. &lt;p&gt;I'm still going to use a soft brush, but it's much smaller. I'm blending the horizon line almost seamlessly with the new sky. &lt;/p&gt;
  1925. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/2.3.jpg" alt="mask out sky " loading="lazy" width="870px" height="564px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/2.3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/2.3.jpg" alt="mask out sky " loading="lazy" width="650px" height="423px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/2.3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/2.3.jpg" alt="mask out sky " loading="lazy" width="380px" height="250px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/2.3.jpg 2x"&gt;&lt;/figure&gt;
  1926. &lt;h3 id="toc-invc-step-4"&gt;Step 4&lt;/h3&gt;
  1927. &lt;p&gt;&lt;strong&gt;Duplicate&lt;/strong&gt; the sky image, delete the layer mask, and set the layer to &lt;strong&gt;Overlay.&lt;/strong&gt; Bring down the layer &lt;strong&gt;Opacity &lt;/strong&gt;to &lt;strong&gt;50%. &lt;/strong&gt;&lt;/p&gt;
  1928. &lt;p&gt;Next, add a new&lt;strong&gt; L&lt;/strong&gt;&lt;strong&gt;ayer Mask &lt;/strong&gt;to the sky, masking out all but the top quarter of the water. &lt;/p&gt;
  1929. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/2.4.jpg" alt="overlay sky " loading="lazy" width="870px" height="564px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/2.4.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/2.4.jpg" alt="overlay sky " loading="lazy" width="650px" height="423px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/2.4.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/2.4.jpg" alt="overlay sky " loading="lazy" width="380px" height="250px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/2.4.jpg 2x"&gt;&lt;/figure&gt;
  1930. &lt;h3 id="toc-8xui-step-5"&gt;Step 5&lt;/h3&gt;
  1931. &lt;p&gt;Now, repeat that same step, only this time setting the layer to &lt;strong&gt;Soft Light.&lt;/strong&gt;&lt;/p&gt;
  1932. &lt;p&gt;Again, delete and then add a new&lt;strong&gt; L&lt;/strong&gt;&lt;strong&gt;ayer Mask &lt;/strong&gt;to the duplicated sky. Mask out any area of the sky that's touching the land or the frothy white parts of the water. &lt;/p&gt;
  1933. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/2.5.jpg" alt="soft light sky " loading="lazy" width="870px" height="564px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/2.5.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/2.5.jpg" alt="soft light sky " loading="lazy" width="650px" height="423px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/2.5.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/2.5.jpg" alt="soft light sky " loading="lazy" width="380px" height="250px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/2.5.jpg 2x"&gt;&lt;/figure&gt;
  1934. &lt;h3 id="toc-k8nl-step-6"&gt;Step 6&lt;/h3&gt;
  1935. &lt;p&gt;Let's finish this beautiful beach day off by bringing the stark blue of the sky into both the water and land using a&lt;strong&gt; Color Balance&lt;/strong&gt; layer.  &lt;/p&gt;
  1936. &lt;h4 id="toc-1ji7-color-balance-settings"&gt;Color Balance settings&lt;/h4&gt;
  1937. &lt;ul&gt;
  1938. &lt;li&gt;&lt;strong&gt;Red: -16%&lt;/strong&gt;&lt;/li&gt;
  1939. &lt;li&gt;&lt;strong&gt;Blue: 53%&lt;/strong&gt;&lt;/li&gt;
  1940. &lt;/ul&gt;
  1941. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/2.6.jpg" alt="color balance  " loading="lazy" width="870px" height="564px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/2.6.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/2.6.jpg" alt="color balance  " loading="lazy" width="650px" height="423px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/2.6.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/2.6.jpg" alt="color balance  " loading="lazy" width="380px" height="250px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/2.6.jpg 2x"&gt;&lt;/figure&gt;
  1942. &lt;h2 id="toc-ajrg-how-to-extract-a-mountain-range"&gt;
  1943. &lt;span class="sectionnum"&gt;3.&lt;/span&gt; How to extract a mountain range &lt;/h2&gt;
  1944. &lt;p&gt;When quick blending and layer mode magic won't do the trick on their own, you may have to remove one sky altogether to place the other. Compositing is also the ideal solution if you are going for something more stylistic, surreal, or fantasy inspired.&lt;/p&gt;
  1945. &lt;h3 id="toc-rv18-step-1"&gt;Step 1&lt;/h3&gt;
  1946. &lt;p&gt;As with the last image, we want to have a bit more sky than before, so crop the canvas to give us more vertical space. &lt;/p&gt;
  1947. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/3.1.jpg" alt="place landscape " loading="lazy" width="870px" height="514px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/3.1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/3.1.jpg" alt="place landscape " loading="lazy" width="650px" height="386px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/3.1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/3.1.jpg" alt="place landscape " loading="lazy" width="380px" height="229px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/3.1.jpg 2x"&gt;&lt;/figure&gt;
  1948. &lt;h3 id="toc-shry-step-2"&gt;Step 2 &lt;/h3&gt;
  1949. &lt;p&gt;Now, let's extract the sky from the original image. The best results would come from masking out the sky by hand using just a simple &lt;strong&gt;Brush&lt;/strong&gt; and&lt;strong&gt; Layer Mask &lt;/strong&gt;combo. However, use your preferred method for extraction. For a quick extract job, I like to rely on the Refine Mask tool.&lt;/p&gt;
  1950. &lt;p&gt;Use the &lt;strong&gt;Flood Select Tool&lt;/strong&gt; to create a quick selection and mask of the sky.&lt;/p&gt;
  1951. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/3.2.jpg" alt="flood select and mask  " loading="lazy" width="870px" height="514px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/3.2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/3.2.jpg" alt="flood select and mask  " loading="lazy" width="650px" height="386px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/3.2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/3.2.jpg" alt="flood select and mask  " loading="lazy" width="380px" height="229px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/3.2.jpg 2x"&gt;&lt;/figure&gt;
  1952. &lt;h3 id="toc-f1u5-step-3"&gt;Step 3&lt;/h3&gt;
  1953. &lt;p&gt;Then, &lt;strong&gt;right-click&lt;/strong&gt; on the mask&lt;strong&gt; &lt;/strong&gt;and select&lt;strong&gt; Refine Mask &lt;/strong&gt;to refine and smooth the mask. &lt;/p&gt;
  1954. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/3.3-1.jpg" alt="refine mask " loading="lazy" width="870px" height="514px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/3.3-1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/3.3-1.jpg" alt="refine mask " loading="lazy" width="650px" height="386px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/3.3-1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/3.3-1.jpg" alt="refine mask " loading="lazy" width="380px" height="229px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/3.3-1.jpg 2x"&gt;&lt;/figure&gt;
  1955. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/3.3-2.jpg" alt="refine mask results " loading="lazy" width="870px" height="514px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/3.3-2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/3.3-2.jpg" alt="refine mask results " loading="lazy" width="650px" height="386px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/3.3-2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/3.3-2.jpg" alt="refine mask results " loading="lazy" width="380px" height="229px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/3.3-2.jpg 2x"&gt;&lt;/figure&gt;
  1956. &lt;h3 id="toc-vjau-step-4"&gt;Step 4&lt;/h3&gt;
  1957. &lt;p&gt;You can also use the &lt;strong&gt;Select &amp;gt; Grow/Shrink&lt;/strong&gt; function to get rid of any pesky unwanted edges. Set the &lt;strong&gt;Radius &lt;/strong&gt;to &lt;strong&gt;-1 px &lt;/strong&gt;and then mask out the selection. &lt;/p&gt;
  1958. &lt;p&gt;This is an excellent method to use when your image will be a backdrop or you need to mock something up quickly. Otherwise, zoom in real close, and mask that bad boy out by hand! &lt;/p&gt;
  1959. &lt;p&gt;Go ahead and place the &lt;a href="https://elements.envato.com/natural-night-sky-stars-with-milky-way-galaxy-NUEJ2R8" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;new sky&lt;/a&gt; behind the &lt;a href="https://elements.envato.com/mars-like-deserted-land-of-the-death-valley-usa-BN93MW5" target="_blank" rel="external noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;mountain range&lt;/a&gt; for now as well. &lt;/p&gt;
  1960. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/3.4.jpg" alt="final layers " loading="lazy" width="870px" height="514px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/3.4.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/3.4.jpg" alt="final layers " loading="lazy" width="650px" height="386px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/3.4.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/3.4.jpg" alt="final layers " loading="lazy" width="380px" height="229px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/3.4.jpg 2x"&gt;&lt;/figure&gt;
  1961. &lt;h2 id="toc-4f2m-how-to-create-sunrise-lighting-effects"&gt;
  1962. &lt;span class="sectionnum"&gt;4.&lt;/span&gt; How to create sunrise lighting effects&lt;/h2&gt;
  1963. &lt;p&gt;Next up, let's lay down our highlights. You will likely do the bulk of your highlights on layers set to Screen, but you can also play with other layer modes like Color Dodge, Soft Light, or Overlay. The Curves layer is also a great tool to use for creating or enhancing highlights.&lt;/p&gt;
  1964. &lt;h3 id="toc-8uhy-step-1"&gt;Step 1&lt;/h3&gt;
  1965. &lt;p&gt;Create a new layer set to &lt;strong&gt;Screen,&lt;/strong&gt; and paint some ambient light focused on the horizon line.&lt;/p&gt;
  1966. &lt;p&gt;Keep the brush very large with a &lt;em&gt;low&lt;/em&gt; &lt;strong&gt;Flow&lt;/strong&gt; rate so you can build up the color slowly. Color pick a color from the new sky—in my case, pale yellow and orange.&lt;/p&gt;
  1967. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/4.1.jpg" alt="add screen light " loading="lazy" width="870px" height="514px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/4.1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/4.1.jpg" alt="add screen light " loading="lazy" width="650px" height="386px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/4.1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/4.1.jpg" alt="add screen light " loading="lazy" width="380px" height="229px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/4.1.jpg 2x"&gt;&lt;/figure&gt;
  1968. &lt;h3 id="toc-clvg-step-2"&gt;Step 2&lt;/h3&gt;
  1969. &lt;p&gt;Repeat this step on a layer clipped inside your landscape to help connect and blend the two images.&lt;/p&gt;
  1970. &lt;p&gt;The lighting on this layer will be more focused if you have a rising sun or any bright light source, as I do.&lt;/p&gt;
  1971. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/4.2.jpg" alt="ad inner screen light " loading="lazy" width="870px" height="514px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/4.2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/4.2.jpg" alt="ad inner screen light " loading="lazy" width="650px" height="386px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/4.2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/4.2.jpg" alt="ad inner screen light " loading="lazy" width="380px" height="229px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/4.2.jpg 2x"&gt;&lt;/figure&gt;
  1972. &lt;h3 id="toc-exxg-step-3"&gt;Step 3&lt;/h3&gt;
  1973. &lt;p&gt;Repeat the above step behind the mountainscape as well.&lt;/p&gt;
  1974. &lt;p&gt;Every landscape will be different, and every sky a different time of day. If you are unsure how you should paint in your lighting, look up some references of a similar environment to get a better idea.&lt;/p&gt;
  1975. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/4.3.jpg" alt="add backdrop screen light " loading="lazy" width="870px" height="514px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/4.3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/4.3.jpg" alt="add backdrop screen light " loading="lazy" width="650px" height="386px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/4.3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/4.3.jpg" alt="add backdrop screen light " loading="lazy" width="380px" height="229px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/4.3.jpg 2x"&gt;&lt;/figure&gt;
  1976. &lt;h2 id="toc-xsvj-how-to-create-shadow-effects"&gt;
  1977. &lt;span class="sectionnum"&gt;5.&lt;/span&gt; How to create shadow effects&lt;/h2&gt;
  1978. &lt;p&gt;For shadows, I recommend the use of layers set to Multiply or Soft Light, along with Brightness/Contrast and Curves adjustment layers. &lt;/p&gt;
  1979. &lt;h3 id="toc-ak0x-step-1"&gt;Step 1&lt;/h3&gt;
  1980. &lt;p&gt;Let's start with a &lt;strong&gt;Brightness/Contrast &lt;/strong&gt;adjustment layer clipped into the mountains to darken everything and lower the contrast, as shaded areas will usually have less contrast than lit areas.&lt;/p&gt;
  1981. &lt;h4 id="toc-oegu-brightnesscontrast-settings"&gt;Brightness/Contrast settings&lt;/h4&gt;
  1982. &lt;ul&gt;
  1983. &lt;li&gt;&lt;strong&gt;Brightness: -84%&lt;/strong&gt;&lt;/li&gt;
  1984. &lt;li&gt;&lt;strong&gt;Contrast: -42%&lt;/strong&gt;&lt;/li&gt;
  1985. &lt;/ul&gt;
  1986. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/5.1.jpg" alt="darken mountains " loading="lazy" width="870px" height="514px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/5.1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/5.1.jpg" alt="darken mountains " loading="lazy" width="650px" height="386px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/5.1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/5.1.jpg" alt="darken mountains " loading="lazy" width="380px" height="229px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/5.1.jpg 2x"&gt;&lt;/figure&gt;
  1987. &lt;h3 id="toc-qual-step-2"&gt;Step 2&lt;/h3&gt;
  1988. &lt;p&gt;Next, go in and mask out all the areas where the light source would be hitting. Use the original lighting to guide you.&lt;/p&gt;
  1989. &lt;div id="toc-x2di-you-may-be-able-to-skip-this-step-if-the-light-in-your-image-is-not-as-intense-as-it-is-in-this-particular-image" class="callout-block"&gt;
  1990. &lt;span class="callout-icon callout-info"&gt;&lt;/span&gt;
  1991. &lt;div id="toc-jvbl-you-may-be-able-to-skip-this-step-if-the-light-in-your-image-is-not-as-intense-as-it-is-in-this-particular-image" class="callout-message"&gt;You may be able to skip this step if the light in your image is not as intense as it is in this particular image.&lt;/div&gt;
  1992. &lt;/div&gt;
  1993. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/5.2.jpg" alt="mask shadows " loading="lazy" width="870px" height="514px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/5.2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/5.2.jpg" alt="mask shadows " loading="lazy" width="650px" height="386px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/5.2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/5.2.jpg" alt="mask shadows " loading="lazy" width="380px" height="229px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/5.2.jpg 2x"&gt;&lt;/figure&gt;
  1994. &lt;h3 id="toc-r1ep-step-3"&gt;Step 3&lt;/h3&gt;
  1995. &lt;p&gt;You can also paint in shadows using just a brush on a layer set to &lt;strong&gt;Multiply. &lt;/strong&gt;I like to set the layer &lt;strong&gt;Opacity &lt;/strong&gt;to &lt;strong&gt;50%&lt;/strong&gt;, but it depends on how deep you want your shadows to be.&lt;/p&gt;
  1996. &lt;p&gt;When painting shadows, &lt;em&gt;avoid using black&lt;/em&gt; as shadows are hardly ever flat black. Instead, use a darker, desaturated version of the color you're painting on. For instance, I could use dark brown on these mountains.&lt;/p&gt;
  1997. &lt;p&gt;Blue is also an excellent color to choose in this particular scene. Blue and orange are contrasting colors, so they pair very well together. &lt;/p&gt;
  1998. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/5.3.jpg" alt="add deeper shadows " loading="lazy" width="870px" height="514px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/5.3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/5.3.jpg" alt="add deeper shadows " loading="lazy" width="650px" height="386px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/5.3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/5.3.jpg" alt="add deeper shadows " loading="lazy" width="380px" height="229px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/5.3.jpg 2x"&gt;&lt;/figure&gt;
  1999. &lt;h3 id="toc-wv2m-step-4"&gt;Step 4&lt;/h3&gt;
  2000. &lt;p&gt;One of my best friends when it comes to compositing landscapes is the layer &lt;strong&gt;Blend Options.&lt;/strong&gt;&lt;/p&gt;
  2001. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/5.4-1.jpg" alt="blend options " loading="lazy" width="870px" height="514px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/5.4-1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/5.4-1.jpg" alt="blend options " loading="lazy" width="650px" height="386px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/5.4-1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/5.4-1.jpg" alt="blend options " loading="lazy" width="380px" height="229px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/5.4-1.jpg 2x"&gt;&lt;/figure&gt;
  2002. &lt;p&gt;Here you can tell a layer how much it should show up on light or dark areas. I don't want these shadows to cover and darken the highlights of the image beneath, so I can drag the point on the right-hand curve to control the range of light.&lt;/p&gt;
  2003. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/5.4-2.jpg" alt="bring down curve point " loading="lazy" width="870px" height="514px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/5.4-2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/5.4-2.jpg" alt="bring down curve point " loading="lazy" width="650px" height="386px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/5.4-2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/5.4-2.jpg" alt="bring down curve point " loading="lazy" width="380px" height="229px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/5.4-2.jpg 2x"&gt;&lt;/figure&gt;
  2004. &lt;p&gt;The further I pull, the less it will show on the lighter areas of the image beneath. You can further refine this by adding more points to the curve and adjusting them. &lt;/p&gt;
  2005. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/5.4-3.jpg" alt="add second curve point " loading="lazy" width="870px" height="514px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/5.4-3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/5.4-3.jpg" alt="add second curve point " loading="lazy" width="650px" height="386px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/5.4-3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/5.4-3.jpg" alt="add second curve point " loading="lazy" width="380px" height="229px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/5.4-3.jpg 2x"&gt;&lt;/figure&gt;
  2006. &lt;p&gt;You can also use this tool to pinpoint highlights or color. It's a tool best learned by just playing with it and seeing what it can do.&lt;/p&gt;
  2007. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/5.jpg" alt="final layers " loading="lazy" width="870px" height="564px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/5.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/5.jpg" alt="final layers " loading="lazy" width="650px" height="423px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/5.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/5.jpg" alt="final layers " loading="lazy" width="380px" height="250px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/5.jpg 2x"&gt;&lt;/figure&gt;
  2008. &lt;h2 id="toc-6klc-how-to-create-a-sunset-color-grade"&gt;
  2009. &lt;span class="sectionnum"&gt;6.&lt;/span&gt; How to create a sunset color grade&lt;/h2&gt;
  2010. &lt;p&gt;Finally, it always helps to add a few adjustment layers over everything to tie it all together. &lt;/p&gt;
  2011. &lt;h3 id="toc-eqbj-step-1"&gt;Step 1&lt;/h3&gt;
  2012. &lt;p&gt;First, let's add an S curve for some added contrast, along with bringing up the blues and reds in the shadows.&lt;/p&gt;
  2013. &lt;h4 id="toc-um6f-curves-settings"&gt;Curves settings&lt;/h4&gt;
  2014. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/6.1.jpg" alt="curves " loading="lazy" width="870px" height="510px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/6.1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/6.1.jpg" alt="curves " loading="lazy" width="650px" height="383px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/6.1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/6.1.jpg" alt="curves " loading="lazy" width="380px" height="228px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/6.1.jpg 2x"&gt;&lt;/figure&gt;
  2015. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/6.1-2.jpg" alt="curves results " loading="lazy" width="870px" height="510px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/6.1-2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/6.1-2.jpg" alt="curves results " loading="lazy" width="650px" height="383px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/6.1-2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/6.1-2.jpg" alt="curves results " loading="lazy" width="380px" height="228px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/6.1-2.jpg 2x"&gt;&lt;/figure&gt;
  2016. &lt;h3 id="toc-oq1d-step-2"&gt;Step 2&lt;/h3&gt;
  2017. &lt;p&gt;Next, create a masked &lt;strong&gt;Color Balance &lt;/strong&gt;adjustment layer, adding blue to the outer edges of the image and one to bring more oranges into the innermost area of the image. &lt;/p&gt;
  2018. &lt;h4 id="toc-fg4b-color-balance-settings"&gt;Color Balance settings&lt;/h4&gt;
  2019. &lt;ul&gt;
  2020. &lt;li&gt;&lt;strong&gt;Red: -25%&lt;/strong&gt;&lt;/li&gt;
  2021. &lt;li&gt;&lt;strong&gt;Green: -20%&lt;/strong&gt;&lt;/li&gt;
  2022. &lt;li&gt;&lt;strong&gt;Blue: 22%&lt;/strong&gt;&lt;/li&gt;
  2023. &lt;/ul&gt;
  2024. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/6.2.jpg" alt="outer color balance  " loading="lazy" width="870px" height="510px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/6.2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/6.2.jpg" alt="outer color balance  " loading="lazy" width="650px" height="383px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/6.2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/6.2.jpg" alt="outer color balance  " loading="lazy" width="380px" height="228px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/6.2.jpg 2x"&gt;&lt;/figure&gt;
  2025. &lt;h3 id="toc-n7io-step-3"&gt;Step 3&lt;/h3&gt;
  2026. &lt;p&gt;Finally, create a second masked &lt;strong&gt;Color Balance &lt;/strong&gt;adjustment layer, bringing more yellows and reds into the innermost area of the image. &lt;/p&gt;
  2027. &lt;h4 id="toc-c9ic-color-balance-settings"&gt;Color Balance settings&lt;/h4&gt;
  2028. &lt;ul&gt;
  2029. &lt;li&gt;&lt;strong&gt;Red: 23%&lt;/strong&gt;&lt;/li&gt;
  2030. &lt;li&gt;&lt;strong&gt;Green: -28%&lt;/strong&gt;&lt;/li&gt;
  2031. &lt;li&gt;&lt;strong&gt;Blue: -77%&lt;/strong&gt;&lt;/li&gt;
  2032. &lt;/ul&gt;
  2033. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/6.3.jpg" alt="inner color balance  " loading="lazy" width="870px" height="510px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/6.3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/6.3.jpg" alt="inner color balance  " loading="lazy" width="650px" height="383px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/6.3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/6.3.jpg" alt="inner color balance  " loading="lazy" width="380px" height="228px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/6.3.jpg 2x"&gt;&lt;/figure&gt;
  2034. &lt;h3 id="toc-qmfi-and-there-you-have-it"&gt;And there you have it! &lt;/h3&gt;
  2035. &lt;p&gt;While sometimes adding a few fluffy white clouds will do the trick, don't be afraid to try changing up the whole mood of a photo by switching from a bright blue sky to a set of ominous clouds rolling in. Or create an entirely new alien atmosphere full of stars and planets. Every photo has a story to tell, and you can change the whole narrative just by choosing one sky over another. The sky is not the limit, after all!&lt;/p&gt;
  2036. &lt;p&gt;Follow along with us over on the &lt;a href="https://www.youtube.com/user/TutsPremium" target="_self"&gt;Envato Tuts+ YouTube channel&lt;/a&gt;:&lt;/p&gt;
  2037. &lt;figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=FsWgGBDdDlo&amp;amp;t=0"&gt;
  2038.            &lt;iframe src="https://www.youtube.com/embed/FsWgGBDdDlo?rel=0&amp;amp;start=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy" style="border-radius: 15px;"&gt;&lt;/iframe&gt;
  2039.          &lt;/figure&gt;
  2040. &lt;p&gt;As always, keep experimenting with different techniques and practicing!&lt;/p&gt;
  2041. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/33757/image/!.jpg" alt="final result " loading="lazy" width="870px" height="496px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/33757/image/!.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/33757/image/!.jpg" alt="final result " loading="lazy" width="650px" height="373px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/33757/image/!.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/33757/image/!.jpg" alt="final result " loading="lazy" width="380px" height="222px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/33757/image/!.jpg 2x"&gt;&lt;/figure&gt;
  2042. &lt;h2 id="toc-oogb-how-to-replace-anything-in-a-photo-using-envato-imageedit"&gt;How to replace the sky (and any object) in a photo using Envato ImageEdit&lt;/h2&gt;
  2043. &lt;figure class="post_image"&gt;&lt;a href="https://labs.envato.com/image-edit"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2827/posts/33757/image-upload/ImageEdit_3_.jpg" alt="Envato AI ImageEdit" loading="lazy" width="870px" height="580px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2827/posts/33757/image-upload/ImageEdit_3_.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2827/posts/33757/image-upload/ImageEdit_3_.jpg" alt="Envato AI ImageEdit" loading="lazy" width="650px" height="435px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2827/posts/33757/image-upload/ImageEdit_3_.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2827/posts/33757/image-upload/ImageEdit_3_.jpg" alt="Envato AI ImageEdit" loading="lazy" width="380px" height="257px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2827/posts/33757/image-upload/ImageEdit_3_.jpg 2x"&gt;&lt;/a&gt;&lt;/figure&gt;
  2044. &lt;p&gt;&lt;a href="https://design.tutsplus.com/tutorials/how-to-edit-images-with-ai--cms-109178" target="_blank" rel="noopener"&gt;Envato AI ImageEdit&lt;/a&gt; simplifies photo editing for everyone, offering tools that make complex tasks easy for both beginners and experts. This tool, along with the rest of the &lt;a href="https://elements.envato.com/learn/envato-ai-features" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;AI tools from Envato&lt;/a&gt;, is included in your subscription with unlimited use &lt;em&gt;(this is not included on Enterprise plans)&lt;/em&gt;. &lt;/p&gt;
  2045. &lt;p&gt;To use this feature, just open an image image within Envato's AI ImageEdit platform and select the &lt;strong&gt;Replace&lt;/strong&gt; tool.&lt;/p&gt;
  2046. &lt;p&gt;Looking to learn more? Why not check out the following photo manipulation tutorials:&lt;/p&gt;
  2047. &lt;ul class="roundup-block__contents posts--half-width roundup-block--list"&gt;
  2048. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/quick-tip-how-to-create-an-abstract-diamond-lens-effect-in-photoshop--cms-31821"&gt;&lt;div class="roundup-block__content-container"&gt;
  2049. &lt;div class="roundup-block__preview"&gt;
  2050. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1990/posts/31821/preview_image/preview-template.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1990/posts/31821/preview_image/preview-template.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1990/posts/31821/preview_image/preview-template.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1990/posts/31821/preview_image/preview-template.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/31821/preview_image/preview-template.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/31821/preview_image/preview-template.jpg 2x"&gt;
  2051. &lt;/div&gt;
  2052. &lt;div class="roundup-block__content-meta"&gt;
  2053. &lt;div class="roundup-block__content-title"&gt;How to Create an Abstract Diamond Lens Effect in Photoshop&lt;/div&gt;
  2054. &lt;div class="roundup-block__author-info"&gt;
  2055. &lt;div class="roundup-block__author-profile-image"&gt;
  2056. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1990/profiles/20506/profileImage/small.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1990/profiles/20506/profileImage/small.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1990/profiles/20506/profileImage/small.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1990/profiles/20506/profileImage/small.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/profiles/20506/profileImage/small.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/profiles/20506/profileImage/small.jpg 2x"&gt;
  2057. &lt;/div&gt;
  2058. &lt;div class="roundup-block__author-meta"&gt;
  2059. &lt;div class="roundup-block__author-name"&gt;Abbey Esparza&lt;/div&gt;
  2060. &lt;div class="roundup-block__published-date"&gt;22 Nov 2018&lt;/div&gt;
  2061. &lt;/div&gt;
  2062. &lt;/div&gt;
  2063. &lt;/div&gt;
  2064. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  2065. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/create-a-minimalist-la-llorona-photo-manipulation-in-adobe-photoshop--cms-31668"&gt;&lt;div class="roundup-block__content-container"&gt;
  2066. &lt;div class="roundup-block__preview"&gt;
  2067. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1990/posts/31668/preview_image/preview-template.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1990/posts/31668/preview_image/preview-template.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1990/posts/31668/preview_image/preview-template.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1990/posts/31668/preview_image/preview-template.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/31668/preview_image/preview-template.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/31668/preview_image/preview-template.jpg 2x"&gt;
  2068. &lt;/div&gt;
  2069. &lt;div class="roundup-block__content-meta"&gt;
  2070. &lt;div class="roundup-block__content-title"&gt;How to Create a Minimalist La Llorona Photo Manipulation in Adobe Photoshop&lt;/div&gt;
  2071. &lt;div class="roundup-block__author-info"&gt;
  2072. &lt;div class="roundup-block__author-profile-image"&gt;
  2073. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1990/profiles/20506/profileImage/small.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1990/profiles/20506/profileImage/small.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1990/profiles/20506/profileImage/small.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1990/profiles/20506/profileImage/small.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/profiles/20506/profileImage/small.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/profiles/20506/profileImage/small.jpg 2x"&gt;
  2074. &lt;/div&gt;
  2075. &lt;div class="roundup-block__author-meta"&gt;
  2076. &lt;div class="roundup-block__author-name"&gt;Abbey Esparza&lt;/div&gt;
  2077. &lt;div class="roundup-block__published-date"&gt;22 Oct 2018&lt;/div&gt;
  2078. &lt;/div&gt;
  2079. &lt;/div&gt;
  2080. &lt;/div&gt;
  2081. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  2082. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-create-a-contemporary-bee-themed-photomanipulation-in-photoshop--cms-31511"&gt;&lt;div class="roundup-block__content-container"&gt;
  2083. &lt;div class="roundup-block__preview"&gt;
  2084. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1990/posts/31511/preview_image/preview-template.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1990/posts/31511/preview_image/preview-template.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1990/posts/31511/preview_image/preview-template.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1990/posts/31511/preview_image/preview-template.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/31511/preview_image/preview-template.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/31511/preview_image/preview-template.jpg 2x"&gt;
  2085. &lt;/div&gt;
  2086. &lt;div class="roundup-block__content-meta"&gt;
  2087. &lt;div class="roundup-block__content-title"&gt;How to Create a Honey Bee Themed Photo Manipulation in Photoshop  &lt;/div&gt;
  2088. &lt;div class="roundup-block__author-info"&gt;
  2089. &lt;div class="roundup-block__author-profile-image"&gt;
  2090. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1990/profiles/20506/profileImage/small.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1990/profiles/20506/profileImage/small.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1990/profiles/20506/profileImage/small.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1990/profiles/20506/profileImage/small.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/profiles/20506/profileImage/small.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/profiles/20506/profileImage/small.jpg 2x"&gt;
  2091. &lt;/div&gt;
  2092. &lt;div class="roundup-block__author-meta"&gt;
  2093. &lt;div class="roundup-block__author-name"&gt;Abbey Esparza&lt;/div&gt;
  2094. &lt;div class="roundup-block__published-date"&gt;11 Sep 2018&lt;/div&gt;
  2095. &lt;/div&gt;
  2096. &lt;/div&gt;
  2097. &lt;/div&gt;
  2098. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  2099. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-create-a-surreal-stitched-portrait--cms-30414"&gt;&lt;div class="roundup-block__content-container"&gt;
  2100. &lt;div class="roundup-block__preview"&gt;
  2101. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1990/posts/30414/preview_image/preview.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1990/posts/30414/preview_image/preview.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1990/posts/30414/preview_image/preview.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1990/posts/30414/preview_image/preview.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/30414/preview_image/preview.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/30414/preview_image/preview.jpg 2x"&gt;
  2102. &lt;/div&gt;
  2103. &lt;div class="roundup-block__content-meta"&gt;
  2104. &lt;div class="roundup-block__content-title"&gt;How to Create a Surreal Stitched Portrait in Adobe Photoshop&lt;/div&gt;
  2105. &lt;div class="roundup-block__author-info"&gt;
  2106. &lt;div class="roundup-block__author-profile-image"&gt;
  2107. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1990/profiles/20506/profileImage/small.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1990/profiles/20506/profileImage/small.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1990/profiles/20506/profileImage/small.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1990/profiles/20506/profileImage/small.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/profiles/20506/profileImage/small.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/profiles/20506/profileImage/small.jpg 2x"&gt;
  2108. &lt;/div&gt;
  2109. &lt;div class="roundup-block__author-meta"&gt;
  2110. &lt;div class="roundup-block__author-name"&gt;Abbey Esparza&lt;/div&gt;
  2111. &lt;div class="roundup-block__published-date"&gt;20 Feb 2018&lt;/div&gt;
  2112. &lt;/div&gt;
  2113. &lt;/div&gt;
  2114. &lt;/div&gt;
  2115. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  2116. &lt;/ul&gt;
  2117. &lt;/div&gt;&lt;div class="mediafed_ad"&gt;&lt;img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/669438/s/33757/sc/4/mf.gif" width="1" /&gt;&lt;a href="http://da.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/33757/a2.htm"&gt;&lt;img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/33757/a2.img" /&gt;&lt;/a&gt;&lt;img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/33757/a2t.img" width="1" /&gt;&lt;/div&gt;</content>
  2118.    <published>2025-06-29 11:38:00 UTC</published>
  2119.    <updated>2025-06-29 11:38:00 UTC</updated>
  2120.    <author>
  2121.      <name>Abbey Esparza</name>
  2122.    </author>
  2123.  </entry>
  2124.  <entry>
  2125.    <id>tag:tutsplus.com,2005:PostPresenter/cms-40653</id>
  2126.    <published>2022-04-27T16:13:19+00:00</published>
  2127.    <link rel="alternate" type="text/html" href="https://design.tutsplus.com/tutorials/how-to-make-a-background-transparent-in-photoshop--cms-40653"/>
  2128.    <title>How to make the background transparent in Photoshop</title>
  2129.    <content type="html">&lt;style&gt;* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}&lt;/style&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iaye"&gt;
  2130. &lt;p&gt;There are several different ways to make a background transparent in Photoshop. And when multiple different tools do the same thing, it can be a pain to figure out which to use and when. Follow along as we go through four of the easiest ways you can &lt;a href="https://design.tutsplus.com/tutorials/how-to-remove-a-background-from-a-logo--cms-109171" target="_blank" rel="noopener"&gt;quickly remove a background&lt;/a&gt; in Photoshop.&lt;/p&gt;
  2131. &lt;figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=vunPHP99_xw&amp;amp;t=0"&gt;
  2132.            &lt;iframe src="https://www.youtube.com/embed/vunPHP99_xw?rel=0&amp;amp;start=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy" style="border-radius: 15px;"&gt;&lt;/iframe&gt;
  2133.          &lt;/figure&gt;
  2134. &lt;/div&gt;&lt;div data-content-block-type="TableOfContents" class="content-block content-block-tableofcontents"&gt;
  2135. &lt;div data-content-block-type="ContentTextBlock" class="content-block content-block-contenttextblock" id="ixpr"&gt;&lt;p&gt;Jump to content in this section:&lt;/p&gt;&lt;/div&gt;
  2136. &lt;ul class="visual-toc-list toc-ordered-list visual-toc__regular-theme div-container" start="0"&gt;
  2137. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-x8ij-how-to-make-a-background-transparent-in-photoshop-using-blend-if"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;How to make a background transparent in Photoshop using Blend If&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  2138. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-p8tv-how-to-make-the-background-transparent-in-photoshop-using-select-color-range"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;How to make the background transparent in Photoshop using Select Color Range&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  2139. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-bmbk-how-to-make-an-image-background-transparent-in-photoshop-using-select-and-mask"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;How to make an image background transparent in Photoshop using Select and Mask&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  2140. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-zbi3-how-to-make-an-image-background-transparent-in-photoshop-using-the-pen-tool-refine-edge"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;How to make an image background transparent in Photoshop using the Pen Tool &amp;amp; Refine Edge&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  2141. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-gaj1-how-to-remove-a-background-without-special-software"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;Bonus: How to remove a background using AI tools from Envato&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  2142. &lt;/ul&gt;
  2143. &lt;/div&gt;&lt;div data-content-block-type="Wysi" id="i4cdq" class="content-block-content-block-wysi content-block"&gt;
  2144. &lt;h2 id="toc-x8ij-how-to-make-a-background-transparent-in-photoshop-using-blend-if"&gt;
  2145. &lt;span class="sectionnum"&gt;1.&lt;/span&gt; How to make a background transparent in Photoshop using Blend If&lt;/h2&gt;
  2146. &lt;h3 id="toc-95fj-step-1"&gt;Step 1&lt;/h3&gt;
  2147. &lt;p&gt;Creating &lt;a href="https://design.tutsplus.com/tutorials/video-tip-remove-the-white-background-from-line-art-in-adobe-photoshop--cms-24361" target="_blank" rel="noopener"&gt;a Photoshop transparent background&lt;/a&gt; is easier than you think, but you need to learn the basics first. Let's start with an alternative to a classic. I'll be using &lt;a href="https://elements.envato.com/clouds-on-black-background-L4WV5E6" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;this cloud photo&lt;/a&gt;. Instead of using Screen for an easy Photoshop transparent background effect, try using Blend If. &lt;/p&gt;
  2148. &lt;p&gt;&lt;strong&gt;Double-click&lt;/strong&gt; the layer you want to extract, and at the bottom of the &lt;strong&gt;Layer Style&lt;/strong&gt; panel, you'll see&lt;strong&gt; Blend If. &lt;/strong&gt;There you'll see the &lt;strong&gt;This Layer&lt;/strong&gt; slider. &lt;/p&gt;
  2149. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0003s_0007_1.jpg" alt="blend if panel " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0003s_0007_1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0003s_0007_1.jpg" alt="blend if panel " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0003s_0007_1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0003s_0007_1.jpg" alt="blend if panel " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0003s_0007_1.jpg 2x"&gt;&lt;/figure&gt;
  2150. &lt;h3 id="toc-edll-step-2"&gt;Step 2&lt;/h3&gt;
  2151. &lt;p&gt;&lt;strong&gt;Blend If &lt;/strong&gt;works by choosing what value range will be blended away, rendering any part of an image with those values transparent. &lt;/p&gt;
  2152. &lt;p&gt;You choose a value by sliding the toggles. The left toggles will target darker values, while the right will target lighter values. &lt;/p&gt;
  2153. &lt;p&gt;Let's slide the &lt;strong&gt;left toggle &lt;/strong&gt;inward, removing the black background. &lt;/p&gt;
  2154. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0003s_0006_2.jpg" alt="pull toggles t the right " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0003s_0006_2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0003s_0006_2.jpg" alt="pull toggles t the right " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0003s_0006_2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0003s_0006_2.jpg" alt="pull toggles t the right " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0003s_0006_2.jpg 2x"&gt;&lt;/figure&gt;
  2155. &lt;h3 id="toc-csn4-step-3"&gt;Step 3&lt;/h3&gt;
  2156. &lt;p&gt;Now, the background is gone, but what we have is a very harsh, jagged edge. &lt;/p&gt;
  2157. &lt;p&gt;To create a smoother transition, hold&lt;strong&gt; Alt &lt;/strong&gt;and split the toggles. Pulling the &lt;strong&gt;right toggle&lt;/strong&gt; further right will create a much softer edge. &lt;/p&gt;
  2158. &lt;p&gt;How far you pull the toggle will change every time. Blend If is a very visual tool, with no magic settings. Just slide until it feels right. &lt;/p&gt;
  2159. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0003s_0005_3.jpg" alt="split toggles " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0003s_0005_3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0003s_0005_3.jpg" alt="split toggles " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0003s_0005_3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0003s_0005_3.jpg" alt="split toggles " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0003s_0005_3.jpg 2x"&gt;&lt;/figure&gt;
  2160. &lt;h3 id="toc-lrng-step-4"&gt;Step 4&lt;/h3&gt;
  2161. &lt;p&gt;There's still quite a bit of fringe left over. To fix that, let's add an&lt;strong&gt; Inner Glow &lt;/strong&gt;layer style. But, if you try to do that now, the glow will appear on the natural edge of the image. The pixels are still there; they're just transparent. So let's &lt;strong&gt;right-click &amp;gt; Convert to Smart Object.&lt;/strong&gt; The&lt;strong&gt; Smart Object&lt;/strong&gt; will treat the Photoshop transparent pixels as deleted pixels.&lt;/p&gt;
  2162. &lt;h3 id="toc-9wy2-step-5"&gt;Step 5&lt;/h3&gt;
  2163. &lt;p&gt;And now we can add that &lt;strong&gt;Inner Glow &lt;/strong&gt;to remove those edges. &lt;/p&gt;
  2164. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0003s_0004_5.jpg" alt="add inner glow " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0003s_0004_5.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0003s_0004_5.jpg" alt="add inner glow " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0003s_0004_5.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0003s_0004_5.jpg" alt="add inner glow " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0003s_0004_5.jpg 2x"&gt;&lt;/figure&gt;
  2165. &lt;h3 id="toc-nhru-step-6"&gt;Step 6&lt;/h3&gt;
  2166. &lt;p&gt;You can follow the same process with images on white backgrounds, only adjust the &lt;strong&gt;right-side toggles&lt;/strong&gt; instead.&lt;/p&gt;
  2167. &lt;p&gt;For this &lt;a href="https://elements.envato.com/black-feather-PNY7YTA" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;Black Feather,&lt;/a&gt; I still used&lt;strong&gt; Inner Glow &lt;/strong&gt;to remove any leftover white background, but I set the &lt;strong&gt;Blend Mode&lt;/strong&gt; to &lt;strong&gt;Darker Color&lt;/strong&gt; and the &lt;strong&gt;Color &lt;/strong&gt;to a dark gray. &lt;/p&gt;
  2168. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0003s_0003_6.jpg" alt="dark inner glow " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0003s_0003_6.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0003s_0003_6.jpg" alt="dark inner glow " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0003s_0003_6.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0003s_0003_6.jpg" alt="dark inner glow " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0003s_0003_6.jpg 2x"&gt;&lt;/figure&gt;
  2169. &lt;h3 id="toc-wuyd-step-7"&gt;Step 7&lt;/h3&gt;
  2170. &lt;p&gt;Now, you may be wondering why you should use Blend If instead of Blend Modes. There's no one correct answer—it all depends on what you want the end effect to be. Blend If will give you a more "solid" feeling effect, while Blend Modes will feel lighter and less opaque.&lt;/p&gt;
  2171. &lt;p&gt;Also, remember that Blend If works with values, so an image doesn't have to be on a black or white background. It just has to be on a solid background that's brighter or darker than the object itself and has distinctly different values.&lt;/p&gt;
  2172. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0003s_0002_7_1.jpg" alt="cloud example " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0003s_0002_7_1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0003s_0002_7_1.jpg" alt="cloud example " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0003s_0002_7_1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0003s_0002_7_1.jpg" alt="cloud example " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0003s_0002_7_1.jpg 2x"&gt;&lt;span class="sectionnum"&gt;&lt;/span&gt;&lt;/figure&gt;
  2173. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0003s_0000_7_3.jpg" alt="feather example " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0003s_0000_7_3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0003s_0000_7_3.jpg" alt="feather example " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0003s_0000_7_3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0003s_0000_7_3.jpg" alt="feather example " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0003s_0000_7_3.jpg 2x"&gt;&lt;/figure&gt;
  2174. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0003s_0001_7_2.jpg" alt="jellyfish example  " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0003s_0001_7_2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0003s_0001_7_2.jpg" alt="jellyfish example  " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0003s_0001_7_2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0003s_0001_7_2.jpg" alt="jellyfish example  " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0003s_0001_7_2.jpg 2x"&gt;&lt;/figure&gt;
  2175. &lt;h2 id="toc-p8tv-how-to-make-the-background-transparent-in-photoshop-using-select-color-range"&gt;
  2176. &lt;span class="sectionnum"&gt;2.&lt;/span&gt; How to make the background transparent in Photoshop using Select Color Range&lt;/h2&gt;
  2177. &lt;h3 id="toc-vnvg-step-1"&gt;Step 1&lt;/h3&gt;
  2178. &lt;p&gt;Up next, we have "Select Color Range". This is an excellent option to switch a background to transparent in Photoshop, especially for objects on studio backgrounds that have too wide a tonal range for Blend If, like this &lt;a href="https://elements.envato.com/ficus-panda-bonsai-tree-ficus-retusa-isolated-on-w-PQYMPNF" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;Bonsai Tree.&lt;/a&gt; That's because, unlike Blend If, Select Color Range keeps color in mind.&lt;/p&gt;
  2179. &lt;p&gt;Go to&lt;strong&gt; Select &amp;gt; Color Range&lt;/strong&gt; to open the &lt;strong&gt;Color Range&lt;/strong&gt; panel. &lt;/p&gt;
  2180. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0002s_0004_2.jpg" alt="color range panel " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0002s_0004_2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0002s_0004_2.jpg" alt="color range panel " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0002s_0004_2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0002s_0004_2.jpg" alt="color range panel " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0002s_0004_2.jpg 2x"&gt;&lt;/figure&gt;
  2181. &lt;h3 id="toc-cd4p-step-2"&gt;Step 2&lt;/h3&gt;
  2182. &lt;p&gt;Let's put in some settings:&lt;/p&gt;
  2183. &lt;ul&gt;
  2184. &lt;li&gt;&lt;strong&gt;Fuzziness: 40&lt;/strong&gt;&lt;/li&gt;
  2185. &lt;li&gt;&lt;strong&gt;Selection Preview: Black Matte&lt;/strong&gt;&lt;/li&gt;
  2186. &lt;li&gt;&lt;strong&gt;Invert: Checked&lt;/strong&gt;&lt;/li&gt;
  2187. &lt;/ul&gt;
  2188. &lt;p&gt;These can change from image to image, especially &lt;strong&gt;Fuzziness, &lt;/strong&gt;which tells Photoshop how much it should be grabbing onto color. Think of it like a tolerance or strictness. I find &lt;strong&gt;40&lt;/strong&gt; to be a good starting point.&lt;/p&gt;
  2189. &lt;p&gt;We also want to click to select the color we want Photoshop to grab onto—in this case, the white background. If your background has shadows or multiple tones of the same color, you can hold down &lt;strong&gt;Shift&lt;/strong&gt; to add colors to the selection. Press &lt;strong&gt;OK &lt;/strong&gt;when you're happy with what you see. &lt;/p&gt;
  2190. &lt;h3 id="toc-rn56-step-3"&gt;Step 3&lt;/h3&gt;
  2191. &lt;p&gt;Add a&lt;strong&gt; Layer Mask &lt;/strong&gt;so that the selection becomes a mask; more likely than not, you'll have some cleanup to do.  &lt;/p&gt;
  2192. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0002s_0003_3.jpg" alt="add layer mask " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0002s_0003_3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0002s_0003_3.jpg" alt="add layer mask " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0002s_0003_3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0002s_0003_3.jpg" alt="add layer mask " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0002s_0003_3.jpg 2x"&gt;&lt;/figure&gt;
  2193. &lt;h3 id="toc-kil2-step-4"&gt;Step 4&lt;/h3&gt;
  2194. &lt;p&gt;Hold down&lt;strong&gt; Control &lt;/strong&gt;and click the&lt;strong&gt; Layer mask &lt;/strong&gt;to reactivate the &lt;strong&gt;Selection.&lt;/strong&gt; &lt;/p&gt;
  2195. &lt;p&gt;Next, let’s go to&lt;strong&gt; Select &amp;gt; Modify &amp;gt; Contract &lt;/strong&gt;and&lt;strong&gt; Contract&lt;/strong&gt; by &lt;strong&gt;2.&lt;/strong&gt; If 2 seems too strong, you can also try 1. &lt;/p&gt;
  2196. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0002s_0002_4.jpg" alt="contract selection " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0002s_0002_4.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0002s_0002_4.jpg" alt="contract selection " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0002s_0002_4.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0002s_0002_4.jpg" alt="contract selection " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0002s_0002_4.jpg 2x"&gt;&lt;/figure&gt;
  2197. &lt;h3 id="toc-nkcc-step-5"&gt;Step 5&lt;/h3&gt;
  2198. &lt;p&gt;Then we're going to&lt;strong&gt; Select &amp;gt; Inverse&lt;/strong&gt; to invert the selection. Then &lt;strong&gt;Edit &amp;gt; Fill &lt;/strong&gt;to fill the selection with black. &lt;/p&gt;
  2199. &lt;p&gt;And if you feel like the edges of your mask are a little harsh, you can open the &lt;strong&gt;Properties &lt;/strong&gt;panel and add a&lt;strong&gt; Feather&lt;/strong&gt; of &lt;strong&gt;0.4 px. &lt;/strong&gt;&lt;/p&gt;
  2200. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0002s_0001_5.jpg" alt="fill in fringe edge " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0002s_0001_5.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0002s_0001_5.jpg" alt="fill in fringe edge " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0002s_0001_5.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0002s_0001_5.jpg" alt="fill in fringe edge " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0002s_0001_5.jpg 2x"&gt;&lt;/figure&gt;
  2201. &lt;h3 id="toc-1rhi-step-6"&gt;Step 6&lt;/h3&gt;
  2202. &lt;p&gt;Finally, if you ever notice any masked areas that shouldn't have been masked, just bust out a hard round &lt;strong&gt;Brush&lt;/strong&gt; set to white and mask those areas back in. This will happen a lot with brighter highlights when extracting on a white background, like our image here.&lt;/p&gt;
  2203. &lt;p&gt;Luckily they're quick to mask back in. And that goes for any of these tools; if a shadow or highlight accidentally gets masked, just pop it back in.&lt;/p&gt;
  2204. &lt;p&gt;That's how to make the background transparent in Photoshop using Select Color Range. It's great for green screens as well. &lt;/p&gt;
  2205. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0002s_0000_6.jpg" alt="fill in lost highlights " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0002s_0000_6.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0002s_0000_6.jpg" alt="fill in lost highlights " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0002s_0000_6.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0002s_0000_6.jpg" alt="fill in lost highlights " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0002s_0000_6.jpg 2x"&gt;&lt;/figure&gt;
  2206. &lt;h2 id="toc-bmbk-how-to-make-an-image-background-transparent-in-photoshop-using-select-and-mask"&gt;
  2207. &lt;span class="sectionnum"&gt;3.&lt;/span&gt; How to make an image background transparent in Photoshop using Select and Mask&lt;/h2&gt;
  2208. &lt;h3 id="toc-10pc-step-1"&gt;Step 1&lt;/h3&gt;
  2209. &lt;p&gt;Next up, let's talk about&lt;strong&gt; Select and Mask&lt;/strong&gt;, or&lt;strong&gt; Refine Edge&lt;/strong&gt; as it's sometimes called. It's one of Photoshop's most powerful selection tools and the one I probably use daily when extracting subjects like &lt;a href="https://elements.envato.com/winter-clothes-pleased-inuit-woman-with-two-pigtai-SCVYBCL" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;this woman.&lt;/a&gt; &lt;/p&gt;
  2210. &lt;p&gt;First, we need to make a selection of our subject. I'm going to use &lt;strong&gt;Select Subject &lt;/strong&gt;and then add a&lt;strong&gt; Layer Mask. &lt;/strong&gt;&lt;/p&gt;
  2211. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0001s_0005_1.jpg" alt="select subject " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0001s_0005_1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0001s_0005_1.jpg" alt="select subject " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0001s_0005_1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0001s_0005_1.jpg" alt="select subject " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0001s_0005_1.jpg 2x"&gt;&lt;/figure&gt;
  2212. &lt;h3 id="toc-75ey-step-2"&gt;Step 2&lt;/h3&gt;
  2213. &lt;p&gt;Now, we can go into &lt;strong&gt;Select and Mask&lt;/strong&gt; either by pressing the button in the upper&lt;strong&gt; Options&lt;/strong&gt; bar or by &lt;strong&gt;double-clicking&lt;/strong&gt; the &lt;strong&gt;Layer Mask &lt;/strong&gt;and choosing &lt;strong&gt;Select and Mask. &lt;/strong&gt;&lt;/p&gt;
  2214. &lt;h3 id="toc-eb1o-step-3"&gt;Step 3&lt;/h3&gt;
  2215. &lt;p&gt;The first thing I always recommend is to check&lt;strong&gt; Smart Radius &lt;/strong&gt;and set the &lt;strong&gt;Radius&lt;/strong&gt; to &lt;strong&gt;4 px.&lt;/strong&gt; You can play with the Radius amount, but 4 px seems to work well for most things. &lt;/p&gt;
  2216. &lt;p&gt;You also want to make sure the &lt;strong&gt;Refine Edge brush &lt;/strong&gt;is active, found on the left-hand side. &lt;/p&gt;
  2217. &lt;p&gt;Next, let's hit &lt;strong&gt;Refine Hair&lt;/strong&gt; in the upper options bar. This will refine the selection around the hair, but not the fur. &lt;/p&gt;
  2218. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0001s_0004_3.jpg" alt="refine hair " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0001s_0004_3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0001s_0004_3.jpg" alt="refine hair " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0001s_0004_3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0001s_0004_3.jpg" alt="refine hair " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0001s_0004_3.jpg 2x"&gt;&lt;/figure&gt;
  2219. &lt;h3 id="toc-0eep-step-4"&gt;Step 4&lt;/h3&gt;
  2220. &lt;p&gt;The fur is a job for the &lt;strong&gt;Refine Edge brush.&lt;/strong&gt; Click and drag across the edges of the fur. Refine Edge will start to grab the fur detail but leave behind the blue background. &lt;/p&gt;
  2221. &lt;p&gt;If Refine Edge is having a hard time separating your subject from the background, you can try switching to &lt;strong&gt;Object Aware &lt;/strong&gt;in the right-hand&lt;strong&gt; Properties&lt;/strong&gt; panel. &lt;/p&gt;
  2222. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0001s_0003_4.jpg" alt="refine edge brush " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0001s_0003_4.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0001s_0003_4.jpg" alt="refine edge brush " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0001s_0003_4.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0001s_0003_4.jpg" alt="refine edge brush " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0001s_0003_4.jpg 2x"&gt;&lt;/figure&gt;
  2223. &lt;h3 id="toc-nlae-step-5"&gt;Step 5&lt;/h3&gt;
  2224. &lt;p&gt;With my base refinement done, I like to press &lt;strong&gt;OK &lt;/strong&gt;and then jump back into &lt;strong&gt;Select and Mask &lt;/strong&gt;to make more &lt;strong&gt;Refinements&lt;/strong&gt;. That way, if I mess my selection up, I can just &lt;strong&gt;Cancel. &lt;/strong&gt;&lt;/p&gt;
  2225. &lt;p&gt;There are a couple of different ways we can deal with the leftover fringe edges in&lt;strong&gt; Select and Mask. &lt;/strong&gt;First, we can bring in &lt;strong&gt;Shift Edge&lt;/strong&gt; by &lt;strong&gt;-10&lt;/strong&gt;, which will shift the edge inwards.&lt;/p&gt;
  2226. &lt;p&gt;But although Shift Edge and the other Global Refinements work great on objects or untextured surfaces, they don't work well with hair and fur. &lt;/p&gt;
  2227. &lt;p&gt;So, instead, we can &lt;strong&gt;Check Decontaminate Colors&lt;/strong&gt; found under &lt;strong&gt;Output Settings. &lt;/strong&gt;Photoshop will try to bring in colors from the object being selected onto that fringe edge. &lt;/p&gt;
  2228. &lt;h3 id="toc-aowj-step-6"&gt;Step 6&lt;/h3&gt;
  2229. &lt;p&gt;Sometimes, this works great. But other times, it'll look pretty horrible. And sometimes it'll look good in some spots but not others. &lt;/p&gt;
  2230. &lt;p&gt;This can be a problem since &lt;strong&gt;Decontaminate Color&lt;/strong&gt; is a destructive filter, meaning it'll permanently change whatever it's applied to. Luckily, I have a way around that. &lt;/p&gt;
  2231. &lt;p&gt;Let's set the &lt;strong&gt;Amount &lt;/strong&gt;to &lt;strong&gt;100&lt;/strong&gt; and change&lt;strong&gt; Output &lt;/strong&gt;to &lt;strong&gt;New Layer with Layer Mask. &lt;/strong&gt;&lt;/p&gt;
  2232. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0001s_0002_6.jpg" alt="decontaminate color " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0001s_0002_6.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0001s_0002_6.jpg" alt="decontaminate color " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0001s_0002_6.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0001s_0002_6.jpg" alt="decontaminate color " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0001s_0002_6.jpg 2x"&gt;&lt;/figure&gt;
  2233. &lt;h3 id="toc-dl71-step-7"&gt;Step 7&lt;/h3&gt;
  2234. &lt;p&gt;Now,&lt;strong&gt; Unhide&lt;/strong&gt; our original layer and layer mask. &lt;strong&gt;Delete &lt;/strong&gt;the layer mask on the Decontaminate Color layer. Then&lt;strong&gt; Clip&lt;/strong&gt; the Decontaminate Color layer into the original layer and mask.&lt;/p&gt;
  2235. &lt;p&gt;We can now add a new &lt;strong&gt;Layer Mask&lt;/strong&gt; onto the Decontaminated layer and mask out all the areas that look not so great. In this case, it's around the subject's hair. &lt;/p&gt;
  2236. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0001s_0001_7.jpg" alt="mask out decontaminate layer " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0001s_0001_7.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0001s_0001_7.jpg" alt="mask out decontaminate layer " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0001s_0001_7.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0001s_0001_7.jpg" alt="mask out decontaminate layer " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0001s_0001_7.jpg 2x"&gt;&lt;/figure&gt;
  2237. &lt;h3 id="toc-ohw9-step-8"&gt;Step 8&lt;/h3&gt;
  2238. &lt;p&gt;If you still have some of that color left, you can get rid of it just by painting on a &lt;strong&gt;Clipped&lt;/strong&gt; layer set to different&lt;strong&gt; Blend Modes. &lt;/strong&gt;&lt;/p&gt;
  2239. &lt;p&gt;Use the &lt;strong&gt;Eyedropper&lt;/strong&gt; tool to pick a color close to the area you are painting on.&lt;/p&gt;
  2240. &lt;p&gt;The&lt;strong&gt; Blend Mode&lt;/strong&gt; will depend on the surface you're painting on and what you need to hide. Here is a general guide on when to use which &lt;strong&gt;Blend Mode,&lt;/strong&gt; keeping in mind you can always mix and match them:&lt;/p&gt;
  2241. &lt;ul&gt;
  2242. &lt;li&gt;
  2243. &lt;strong&gt;Color:&lt;/strong&gt; Use Color to color match the fringe edge to the hair color.&lt;/li&gt;
  2244. &lt;li&gt;
  2245. &lt;strong&gt;Hue:&lt;/strong&gt; Hue can also be used as an alternative to Color.&lt;/li&gt;
  2246. &lt;li&gt;
  2247. &lt;strong&gt;Multiply:&lt;/strong&gt; Use Multiply to darken lighter fringes left behind very dark hair.&lt;/li&gt;
  2248. &lt;li&gt;
  2249. &lt;strong&gt;Darken Color&lt;/strong&gt;: Use Darken Color as an alternative to Multiply or to cover lighter fringes left behind lighter hair.&lt;/li&gt;
  2250. &lt;li&gt;
  2251. &lt;strong&gt;Normal: &lt;/strong&gt;Use Normal when the edge being painted on is low in detail or loses nothing from being a flat color.&lt;/li&gt;
  2252. &lt;li&gt;
  2253. &lt;strong&gt;Lighten: &lt;/strong&gt;Use Lighten on lighter hair with a darker fringe edge.&lt;/li&gt;
  2254. &lt;li&gt;
  2255. &lt;strong&gt;Screen: &lt;/strong&gt;Use Screen as an alternative to Lighten or on light hair with a lighter fringe edge. &lt;/li&gt;
  2256. &lt;/ul&gt;
  2257. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0001s_0000_8.jpg" alt="fill in hair " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0001s_0000_8.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0001s_0000_8.jpg" alt="fill in hair " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0001s_0000_8.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0001s_0000_8.jpg" alt="fill in hair " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0001s_0000_8.jpg 2x"&gt;&lt;/figure&gt;
  2258. &lt;h2 id="toc-zbi3-how-to-make-an-image-background-transparent-in-photoshop-using-the-pen-tool-refine-edge"&gt;
  2259. &lt;span class="sectionnum"&gt;4.&lt;/span&gt; How to make an image background transparent in Photoshop using the Pen Tool &amp;amp; Refine Edge&lt;/h2&gt;
  2260. &lt;h3 id="toc-3p6f-step-1"&gt;Step 1&lt;/h3&gt;
  2261. &lt;p&gt;You should use Select and Mask anytime a mask calls for it; it's not specific to the selection tool. But let's wrap things up by pairing up the&lt;strong&gt; Pen Tool &lt;/strong&gt;and &lt;strong&gt;Refine Edge.&lt;/strong&gt;&lt;/p&gt;
  2262. &lt;p&gt;This is my go-to duo for removing the background from both &lt;a href="https://elements.envato.com/woman-in-light-dress-standing-on-brown-grass-field-LGYTVNU" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;people&lt;/a&gt; and objects that have a mix of smooth and textured edges. &lt;/p&gt;
  2263. &lt;p&gt;Select the &lt;strong&gt;Pen Tool&lt;/strong&gt; and make sure it's set to &lt;strong&gt;Path.&lt;/strong&gt;&lt;/p&gt;
  2264. &lt;h3 id="toc-uee1-step-2"&gt;Step 2&lt;/h3&gt;
  2265. &lt;p&gt;Click to place an&lt;strong&gt; Anchor Point &lt;/strong&gt;on a smooth portion of your subject. I'm going to start right below her hair, at the strap of her dress. &lt;/p&gt;
  2266. &lt;p&gt;Click and hold to place a second&lt;strong&gt; &lt;/strong&gt;anchor. You want to put &lt;strong&gt;Anchor Points&lt;/strong&gt; where curves start and end. Here, the arc of her strap ends, so that's where I placed the point. &lt;/p&gt;
  2267. &lt;p&gt;Before letting go of the&lt;strong&gt; &lt;/strong&gt;anchor,&lt;strong&gt; &lt;/strong&gt;pull to curve the path, having it follow the edge you're trying to extract.  &lt;/p&gt;
  2268. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0000s_0005_2.jpg" alt="place path " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0000s_0005_2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0000s_0005_2.jpg" alt="place path " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0000s_0005_2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0000s_0005_2.jpg" alt="place path " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0000s_0005_2.jpg 2x"&gt;&lt;/figure&gt;
  2269. &lt;h3 id="toc-rmcj-step-3"&gt;Step 3&lt;/h3&gt;
  2270. &lt;p&gt;Hold &lt;strong&gt;Alt &lt;/strong&gt;to bring in or adjust the &lt;strong&gt;Path's Controller Points. &lt;/strong&gt;The controllers help guide the path going from anchor to anchor. You can modify these points at any time. &lt;/p&gt;
  2271. &lt;p&gt;Then place another anchor down the edge of the subject. &lt;/p&gt;
  2272. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0000s_0004_3.jpg" alt="connect paths " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0000s_0004_3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0000s_0004_3.jpg" alt="connect paths " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0000s_0004_3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0000s_0004_3.jpg" alt="connect paths " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0000s_0004_3.jpg 2x"&gt;&lt;/figure&gt;
  2273. &lt;h3 id="toc-hke2-step-4"&gt;Step 4&lt;/h3&gt;
  2274. &lt;p&gt;When placing anchors,&lt;em&gt; fewer is better.&lt;/em&gt; That's because fewer anchor points will result in smoother edges. However, just use as many as you need. &lt;/p&gt;
  2275. &lt;p&gt;The more you use the &lt;strong&gt;Pen&lt;/strong&gt; &lt;strong&gt;Tool&lt;/strong&gt;, the more you'll get used to it and get better at it. A lot of it is built on habit and even personal style.&lt;/p&gt;
  2276. &lt;p&gt;Repeat those steps until you've created a connected &lt;strong&gt;Path&lt;/strong&gt; all around the subject, but skip the hair.&lt;/p&gt;
  2277. &lt;div id="toc-lmrj-the-hair-comes-second-we-only-want-to-focus-on-the-subjects-body" class="callout-block"&gt;
  2278. &lt;span class="callout-icon callout-info"&gt;&lt;/span&gt;
  2279. &lt;div id="toc-jti5-the-hair-comes-second-we-only-want-to-focus-on-the-subjects-body" class="callout-message"&gt;The hair comes second; we only want to focus on the subject's body. &lt;/div&gt;
  2280. &lt;/div&gt;
  2281. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0000s_0003_4.jpg" alt="create a path around entire subject " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0000s_0003_4.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0000s_0003_4.jpg" alt="create a path around entire subject " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0000s_0003_4.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0000s_0003_4.jpg" alt="create a path around entire subject " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0000s_0003_4.jpg 2x"&gt;&lt;/figure&gt;
  2282. &lt;h3 id="toc-xsjn-step-5"&gt;Step 5&lt;/h3&gt;
  2283. &lt;p&gt;When the &lt;strong&gt;Path&lt;/strong&gt; is finished, we can add a L&lt;strong&gt;ayer Mask,&lt;/strong&gt; and on the &lt;strong&gt;Canvas, Right Click &amp;gt; Fill Path&lt;/strong&gt;, filling the path with black. &lt;/p&gt;
  2284. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0000s_0002_5.jpg" alt="fill path with black " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0000s_0002_5.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0000s_0002_5.jpg" alt="fill path with black " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0000s_0002_5.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0000s_0002_5.jpg" alt="fill path with black " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0000s_0002_5.jpg 2x"&gt;&lt;/figure&gt;
  2285. &lt;h3 id="toc-m1hh-step-6"&gt;Step 6&lt;/h3&gt;
  2286. &lt;p&gt;I like to add a &lt;strong&gt;Feather &lt;/strong&gt;of&lt;strong&gt; 0.4 px&lt;/strong&gt; to my masks using the &lt;strong&gt;Properties &lt;/strong&gt;panel, though that is optional and will depend on the image you're extracting. &lt;/p&gt;
  2287. &lt;p&gt;Then we're going to &lt;strong&gt;Right Click &amp;gt; Convert to Smart Object. &lt;/strong&gt;This makes it so we can safely extract our subject's hair without messing up the body's layer mask. &lt;/p&gt;
  2288. &lt;p&gt;Suppose we tried to extract our subject's hair on the same layer mask instead of splitting it into two different masks. In that case, the &lt;strong&gt;Refine Edge&lt;/strong&gt; tool is likely to mess up the smooth, clean edge we made with the &lt;strong&gt;Pen Tool.  &lt;/strong&gt;&lt;/p&gt;
  2289. &lt;p&gt;And because we used &lt;strong&gt;Smart Objects&lt;/strong&gt;, we can easily adjust the body's layer mask—no need to worry about rasterizing the layer. Just &lt;strong&gt;double-click&lt;/strong&gt; the &lt;strong&gt;Smart Object&lt;/strong&gt;, make any adjustments, save, and then close the &lt;strong&gt;Smart Object. &lt;/strong&gt;The main PSD will update with the changes made. &lt;/p&gt;
  2290. &lt;h3 id="toc-526l-step-7"&gt;Step 7&lt;/h3&gt;
  2291. &lt;p&gt;Use the &lt;strong&gt;Magnetic Lasso&lt;/strong&gt; tool or any&lt;strong&gt; Quick Select&lt;/strong&gt; tool to make a sloppy selection from around the hair of the subject.  &lt;/p&gt;
  2292. &lt;p&gt;Add a new&lt;strong&gt; Layer Mask&lt;/strong&gt; to the subject. &lt;/p&gt;
  2293. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0000s_0001_7.jpg" alt="sloppy select hair " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0000s_0001_7.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0000s_0001_7.jpg" alt="sloppy select hair " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0000s_0001_7.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0000s_0001_7.jpg" alt="sloppy select hair " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0000s_0001_7.jpg 2x"&gt;&lt;/figure&gt;
  2294. &lt;h3 id="toc-z0jc-step-8"&gt;Step 8&lt;/h3&gt;
  2295. &lt;p&gt;Finally, go into &lt;strong&gt;Select and Mask&lt;/strong&gt; and use the same &lt;strong&gt;Refine Edge&lt;/strong&gt; techniques from earlier.&lt;/p&gt;
  2296. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/_0000s_0000_8.jpg" alt="refine edge hair " loading="lazy" width="870px" height="559px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/_0000s_0000_8.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/_0000s_0000_8.jpg" alt="refine edge hair " loading="lazy" width="650px" height="419px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/_0000s_0000_8.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/_0000s_0000_8.jpg" alt="refine edge hair " loading="lazy" width="380px" height="248px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/_0000s_0000_8.jpg 2x"&gt;&lt;/figure&gt;
  2297. &lt;h2 id="toc-h25f-thats-it"&gt;That's it! Now you know how to make a  background transparent in Photoshop&lt;/h2&gt;
  2298. &lt;p&gt;That's how to make a background transparent in Photoshop. Removing a background from an image only takes as long as you need it to. Sometimes quick and dirty works; other times, getting that perfect extraction matters. Luckily, through a combination of those four tools, I've been able to extract any image that's crossed my path. And &lt;a href="https://design.tutsplus.com/tutorials/how-to-use-the-remove-tool-in-photoshop--cms-109020" target="_blank" rel="noopener"&gt;Photoshop's auto-select tools&lt;/a&gt; get better and better every year.  &lt;/p&gt;
  2299. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1990/posts/40653/image-upload/beautiful_portrait_of_a_happy_little_girl_2021_08_26_17_41_03_utc.jpg" alt="How to Make the Background Transparent in Photoshop" loading="lazy" width="870px" height="498px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1990/posts/40653/image-upload/beautiful_portrait_of_a_happy_little_girl_2021_08_26_17_41_03_utc.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1990/posts/40653/image-upload/beautiful_portrait_of_a_happy_little_girl_2021_08_26_17_41_03_utc.jpg" alt="How to Make the Background Transparent in Photoshop" loading="lazy" width="650px" height="374px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1990/posts/40653/image-upload/beautiful_portrait_of_a_happy_little_girl_2021_08_26_17_41_03_utc.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/40653/image-upload/beautiful_portrait_of_a_happy_little_girl_2021_08_26_17_41_03_utc.jpg" alt="How to Make the Background Transparent in Photoshop" loading="lazy" width="380px" height="222px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/40653/image-upload/beautiful_portrait_of_a_happy_little_girl_2021_08_26_17_41_03_utc.jpg 2x"&gt;&lt;/figure&gt;
  2300. &lt;p&gt;Hey, but what if you're a visual person? In that case, you'll love the &lt;a href="https://www.youtube.com/c/tutsplus"&gt;Envato Tuts+ YouTube channel&lt;/a&gt;. There you'll find awesome video tutorials, like this new video to learn how to make the background transparent in Photoshop:&lt;/p&gt;
  2301. &lt;figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=vunPHP99_xw&amp;amp;t=0"&gt;
  2302.            &lt;iframe src="https://www.youtube.com/embed/vunPHP99_xw?rel=0&amp;amp;start=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy" style="border-radius: 15px;"&gt;&lt;/iframe&gt;
  2303.          &lt;/figure&gt;
  2304. &lt;h2 id="toc-gaj1-how-to-remove-a-background-without-special-software"&gt;Bonus: How to remove a background using AI tools from Envato&lt;/h2&gt;
  2305. &lt;p&gt;&lt;span&gt;Looking to do more with AI? Envato offers a suite of &lt;a href="https://elements.envato.com/lp/ai-stack/" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;easy-to-use AI tools&lt;/a&gt; like ImageEdit, a great AI background remover.&lt;/span&gt;&lt;/p&gt;
  2306. &lt;figure class="post_image"&gt;&lt;a href="https://labs.envato.com/image-edit"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/48/posts/40653/image-upload/image_edit.jpg" alt="Envato ImageEdit AI background remover" loading="lazy" width="870px" height="870px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/48/posts/40653/image-upload/image_edit.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/48/posts/40653/image-upload/image_edit.jpg" alt="Envato ImageEdit AI background remover" loading="lazy" width="650px" height="650px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/48/posts/40653/image-upload/image_edit.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/48/posts/40653/image-upload/image_edit.jpg" alt="Envato ImageEdit AI background remover" loading="lazy" width="380px" height="380px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/48/posts/40653/image-upload/image_edit.jpg 2x"&gt;&lt;/a&gt;&lt;/figure&gt;
  2307. &lt;p&gt;&lt;span&gt;Also, there’s &lt;a href="https://labs.envato.com/image-gen" target="_blank" rel="noopener"&gt;ImageGen&lt;/a&gt; for creating pictures and &lt;a href="https://labs.envato.com/video-gen" target="_blank" rel="noopener"&gt;VideoGen&lt;/a&gt; for making videos.  They're all part of your subscription, designed to speed up your creative process, whether you're editing photos or designing from scratch.&lt;/span&gt;&lt;/p&gt;
  2308. &lt;p&gt;&lt;span&gt;Placeit also offers an easy tool for removing a background in a couple of clicks, using only your browser. Use the &lt;a href="https://placeit.net/tools/background-remover?utm_campaign=cms-40653&amp;amp;utm_medium=tutorials&amp;amp;utm_source=tutsplus" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendPlaceitClickEvent"&gt;image background remover tool&lt;/a&gt; here:&lt;/span&gt;&lt;/p&gt;
  2309. &lt;figure class="post_image"&gt;&lt;a href="https://placeit.net/tools/background-remover" data-action="click-&amp;gt;ga-analytics#sendPlaceitClickEvent"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/48/posts/40653/image-upload/placeit_background_remover.jpg" alt="Placeit background removal tool" loading="lazy" width="870px" height="236px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/48/posts/40653/image-upload/placeit_background_remover.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/48/posts/40653/image-upload/placeit_background_remover.jpg" alt="Placeit background removal tool" loading="lazy" width="650px" height="180px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/48/posts/40653/image-upload/placeit_background_remover.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/48/posts/40653/image-upload/placeit_background_remover.jpg" alt="Placeit background removal tool" loading="lazy" width="380px" height="111px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/48/posts/40653/image-upload/placeit_background_remover.jpg 2x"&gt;&lt;/a&gt;&lt;/figure&gt;
  2310. &lt;p&gt;&lt;span&gt;Check out these articles for tips and tricks to get even more out of them:&lt;/span&gt;&lt;/p&gt;
  2311. &lt;ul class="roundup-block__contents posts--half-width roundup-block--list"&gt;
  2312. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-edit-images-with-ai--cms-109178"&gt;&lt;div class="roundup-block__content-container"&gt;
  2313. &lt;div class="roundup-block__preview"&gt;
  2314. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/48/posts/109178/preview_image/image_edit_pre.jpg" alt="" loading="lazy" width="820px" height="574px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1600/uploads/users/48/posts/109178/preview_image/image_edit_pre.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/48/posts/109178/preview_image/image_edit_pre.jpg" alt="" loading="lazy" width="650px" height="456px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/48/posts/109178/preview_image/image_edit_pre.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/48/posts/109178/preview_image/image_edit_pre.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/48/posts/109178/preview_image/image_edit_pre.jpg 2x"&gt;
  2315. &lt;/div&gt;
  2316. &lt;div class="roundup-block__content-meta"&gt;
  2317. &lt;div class="roundup-block__content-title"&gt;How to edit images with AI ImageEdit&lt;/div&gt;
  2318. &lt;div class="roundup-block__author-info"&gt;
  2319. &lt;div class="roundup-block__author-profile-image"&gt;
  2320. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2827/profiles/21353/profileImage/Headshot.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2827/profiles/21353/profileImage/Headshot.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2827/profiles/21353/profileImage/Headshot.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2827/profiles/21353/profileImage/Headshot.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2827/profiles/21353/profileImage/Headshot.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2827/profiles/21353/profileImage/Headshot.jpg 2x"&gt;
  2321. &lt;/div&gt;
  2322. &lt;div class="roundup-block__author-meta"&gt;
  2323. &lt;div class="roundup-block__author-name"&gt;Alina Midori Hernández&lt;/div&gt;
  2324. &lt;div class="roundup-block__published-date"&gt;14 May 2025&lt;/div&gt;
  2325. &lt;/div&gt;
  2326. &lt;/div&gt;
  2327. &lt;/div&gt;
  2328. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  2329. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-crop-an-image-with-ai--cms-109182"&gt;&lt;div class="roundup-block__content-container"&gt;
  2330. &lt;div class="roundup-block__preview"&gt;
  2331. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2827/posts/109182/preview_image/Featured_How_to_Crop_an_Image_with_AI.jpg" alt="" loading="lazy" width="820px" height="574px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1600/uploads/users/2827/posts/109182/preview_image/Featured_How_to_Crop_an_Image_with_AI.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2827/posts/109182/preview_image/Featured_How_to_Crop_an_Image_with_AI.jpg" alt="" loading="lazy" width="650px" height="456px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2827/posts/109182/preview_image/Featured_How_to_Crop_an_Image_with_AI.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2827/posts/109182/preview_image/Featured_How_to_Crop_an_Image_with_AI.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2827/posts/109182/preview_image/Featured_How_to_Crop_an_Image_with_AI.jpg 2x"&gt;
  2332. &lt;/div&gt;
  2333. &lt;div class="roundup-block__content-meta"&gt;
  2334. &lt;div class="roundup-block__content-title"&gt;How to crop an image with AI ImageEdit&lt;/div&gt;
  2335. &lt;div class="roundup-block__author-info"&gt;
  2336. &lt;div class="roundup-block__author-profile-image"&gt;
  2337. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2827/profiles/21353/profileImage/Headshot.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2827/profiles/21353/profileImage/Headshot.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2827/profiles/21353/profileImage/Headshot.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2827/profiles/21353/profileImage/Headshot.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2827/profiles/21353/profileImage/Headshot.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2827/profiles/21353/profileImage/Headshot.jpg 2x"&gt;
  2338. &lt;/div&gt;
  2339. &lt;div class="roundup-block__author-meta"&gt;
  2340. &lt;div class="roundup-block__author-name"&gt;Alina Midori Hernández&lt;/div&gt;
  2341. &lt;div class="roundup-block__published-date"&gt;21 May 2025&lt;/div&gt;
  2342. &lt;/div&gt;
  2343. &lt;/div&gt;
  2344. &lt;/div&gt;
  2345. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  2346. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-create-a-movie-poster-using-ai-with-imagegen-and-imageedit--cms-109151"&gt;&lt;div class="roundup-block__content-container"&gt;
  2347. &lt;div class="roundup-block__preview"&gt;
  2348. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/33/posts/109151/preview_image/envatoimageeditpreview.jpg" alt="" loading="lazy" width="820px" height="574px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1600/uploads/users/33/posts/109151/preview_image/envatoimageeditpreview.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/33/posts/109151/preview_image/envatoimageeditpreview.jpg" alt="" loading="lazy" width="650px" height="456px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/33/posts/109151/preview_image/envatoimageeditpreview.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/33/posts/109151/preview_image/envatoimageeditpreview.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/33/posts/109151/preview_image/envatoimageeditpreview.jpg 2x"&gt;
  2349. &lt;/div&gt;
  2350. &lt;div class="roundup-block__content-meta"&gt;
  2351. &lt;div class="roundup-block__content-title"&gt;How to create a movie poster using AI with Envato ImageGen and ImageEdit&lt;/div&gt;
  2352. &lt;div class="roundup-block__author-info"&gt;
  2353. &lt;div class="roundup-block__author-profile-image"&gt;
  2354. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2796/profiles/21283/profileImage/Ash_HS_1.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2796/profiles/21283/profileImage/Ash_HS_1.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2796/profiles/21283/profileImage/Ash_HS_1.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2796/profiles/21283/profileImage/Ash_HS_1.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2796/profiles/21283/profileImage/Ash_HS_1.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2796/profiles/21283/profileImage/Ash_HS_1.jpg 2x"&gt;
  2355. &lt;/div&gt;
  2356. &lt;div class="roundup-block__author-meta"&gt;
  2357. &lt;div class="roundup-block__author-name"&gt;Ashlee Harrell&lt;/div&gt;
  2358. &lt;div class="roundup-block__published-date"&gt;14 Mar 2025&lt;/div&gt;
  2359. &lt;/div&gt;
  2360. &lt;/div&gt;
  2361. &lt;/div&gt;
  2362. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  2363. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/articles/what-is-envato-ai-imagegen--cms-108551"&gt;&lt;div class="roundup-block__content-container"&gt;
  2364. &lt;div class="roundup-block__preview"&gt;
  2365. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2659/posts/108551/preview_image/ImageGen_thumb_108551.jpg" alt="" loading="lazy" width="820px" height="574px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1600/uploads/users/2659/posts/108551/preview_image/ImageGen_thumb_108551.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2659/posts/108551/preview_image/ImageGen_thumb_108551.jpg" alt="" loading="lazy" width="650px" height="456px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2659/posts/108551/preview_image/ImageGen_thumb_108551.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2659/posts/108551/preview_image/ImageGen_thumb_108551.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2659/posts/108551/preview_image/ImageGen_thumb_108551.jpg 2x"&gt;
  2366. &lt;/div&gt;
  2367. &lt;div class="roundup-block__content-meta"&gt;
  2368. &lt;div class="roundup-block__content-title"&gt;What is Envato AI ImageGen?&lt;/div&gt;
  2369. &lt;div class="roundup-block__author-info"&gt;
  2370. &lt;div class="roundup-block__author-profile-image"&gt;
  2371. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2659/profiles/21180/profileImage/profile_selfie_400.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2659/profiles/21180/profileImage/profile_selfie_400.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2659/profiles/21180/profileImage/profile_selfie_400.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2659/profiles/21180/profileImage/profile_selfie_400.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2659/profiles/21180/profileImage/profile_selfie_400.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2659/profiles/21180/profileImage/profile_selfie_400.jpg 2x"&gt;
  2372. &lt;/div&gt;
  2373. &lt;div class="roundup-block__author-meta"&gt;
  2374. &lt;div class="roundup-block__author-name"&gt;Maria Villanueva&lt;/div&gt;
  2375. &lt;div class="roundup-block__published-date"&gt;06 Aug 2024&lt;/div&gt;
  2376. &lt;/div&gt;
  2377. &lt;/div&gt;
  2378. &lt;/div&gt;
  2379. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  2380. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-remove-green-screen-in-photoshop--cms-39674"&gt;&lt;div class="roundup-block__content-container"&gt;
  2381. &lt;div class="roundup-block__preview"&gt;
  2382. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1990/posts/39674/preview_image/preview_template.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1990/posts/39674/preview_image/preview_template.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1990/posts/39674/preview_image/preview_template.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1990/posts/39674/preview_image/preview_template.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/39674/preview_image/preview_template.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/39674/preview_image/preview_template.jpg 2x"&gt;
  2383. &lt;/div&gt;
  2384. &lt;div class="roundup-block__content-meta"&gt;
  2385. &lt;div class="roundup-block__content-title"&gt;How to Remove Green Screen in Photoshop&lt;/div&gt;
  2386. &lt;div class="roundup-block__author-info"&gt;
  2387. &lt;div class="roundup-block__author-profile-image"&gt;
  2388. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1990/profiles/20506/profileImage/small.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1990/profiles/20506/profileImage/small.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1990/profiles/20506/profileImage/small.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1990/profiles/20506/profileImage/small.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/profiles/20506/profileImage/small.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/profiles/20506/profileImage/small.jpg 2x"&gt;
  2389. &lt;/div&gt;
  2390. &lt;div class="roundup-block__author-meta"&gt;
  2391. &lt;div class="roundup-block__author-name"&gt;Abbey Esparza&lt;/div&gt;
  2392. &lt;div class="roundup-block__published-date"&gt;30 Jan 2023&lt;/div&gt;
  2393. &lt;/div&gt;
  2394. &lt;/div&gt;
  2395. &lt;/div&gt;
  2396. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  2397. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-remove-a-person-from-a-photo-in-photoshop-using-content-aware-fill--cms-38257"&gt;&lt;div class="roundup-block__content-container"&gt;
  2398. &lt;div class="roundup-block__preview"&gt;
  2399. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1990/posts/38257/preview_image/preview-template%202.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1990/posts/38257/preview_image/preview-template%202.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1990/posts/38257/preview_image/preview-template%202.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1990/posts/38257/preview_image/preview-template%202.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/posts/38257/preview_image/preview-template%202.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/posts/38257/preview_image/preview-template%202.jpg 2x"&gt;
  2400. &lt;/div&gt;
  2401. &lt;div class="roundup-block__content-meta"&gt;
  2402. &lt;div class="roundup-block__content-title"&gt;How to Remove a Person From a Photo in Photoshop Using Content Aware Fill&lt;/div&gt;
  2403. &lt;div class="roundup-block__author-info"&gt;
  2404. &lt;div class="roundup-block__author-profile-image"&gt;
  2405. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1990/profiles/20506/profileImage/small.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1990/profiles/20506/profileImage/small.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1990/profiles/20506/profileImage/small.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1990/profiles/20506/profileImage/small.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1990/profiles/20506/profileImage/small.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1990/profiles/20506/profileImage/small.jpg 2x"&gt;
  2406. &lt;/div&gt;
  2407. &lt;div class="roundup-block__author-meta"&gt;
  2408. &lt;div class="roundup-block__author-name"&gt;Abbey Esparza&lt;/div&gt;
  2409. &lt;div class="roundup-block__published-date"&gt;30 Sep 2023&lt;/div&gt;
  2410. &lt;/div&gt;
  2411. &lt;/div&gt;
  2412. &lt;/div&gt;
  2413. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  2414. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-resize-multiple-images-all-at-once-in-adobe-photoshop--cms-27580"&gt;&lt;div class="roundup-block__content-container"&gt;
  2415. &lt;div class="roundup-block__preview"&gt;
  2416. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/346/posts/27580/preview_image/resize_preview.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/346/posts/27580/preview_image/resize_preview.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/346/posts/27580/preview_image/resize_preview.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/346/posts/27580/preview_image/resize_preview.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/346/posts/27580/preview_image/resize_preview.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/346/posts/27580/preview_image/resize_preview.jpg 2x"&gt;
  2417. &lt;/div&gt;
  2418. &lt;div class="roundup-block__content-meta"&gt;
  2419. &lt;div class="roundup-block__content-title"&gt;How to resize multiple images at once in Adobe Photoshop&lt;/div&gt;
  2420. &lt;div class="roundup-block__author-info"&gt;
  2421. &lt;div class="roundup-block__author-profile-image"&gt;
  2422. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/346/profiles/2218/profileImage/tutprotest.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/346/profiles/2218/profileImage/tutprotest.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/346/profiles/2218/profileImage/tutprotest.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/346/profiles/2218/profileImage/tutprotest.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/346/profiles/2218/profileImage/tutprotest.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/346/profiles/2218/profileImage/tutprotest.jpg 2x"&gt;
  2423. &lt;/div&gt;
  2424. &lt;div class="roundup-block__author-meta"&gt;
  2425. &lt;div class="roundup-block__author-name"&gt;Melody Nieves&lt;/div&gt;
  2426. &lt;div class="roundup-block__published-date"&gt;14 Jun 2025&lt;/div&gt;
  2427. &lt;/div&gt;
  2428. &lt;/div&gt;
  2429. &lt;/div&gt;
  2430. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  2431. &lt;/ul&gt;
  2432. &lt;/div&gt;&lt;div class="mediafed_ad"&gt;&lt;img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/669438/s/40653/sc/4/mf.gif" width="1" /&gt;&lt;a href="http://da.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/40653/a2.htm"&gt;&lt;img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/40653/a2.img" /&gt;&lt;/a&gt;&lt;img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/40653/a2t.img" width="1" /&gt;&lt;/div&gt;</content>
  2433.    <published>2025-06-28 16:00:00 UTC</published>
  2434.    <updated>2025-06-28 16:00:00 UTC</updated>
  2435.    <author>
  2436.      <name>Abbey Esparza</name>
  2437.    </author>
  2438.  </entry>
  2439.  <entry>
  2440.    <id>tag:tutsplus.com,2005:PostPresenter/cms-109190</id>
  2441.    <published>2025-06-09T15:14:07+00:00</published>
  2442.    <link rel="alternate" type="text/html" href="https://design.tutsplus.com/tutorials/how-to-use-procreate-for-tattoos--cms-109190"/>
  2443.    <title>Comprehensive guide: How to use Procreate for tattoos</title>
  2444.    <content type="html">&lt;figure class="final-product final-product--image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/final_image/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_23_0A_Final.jpg" alt="Final product image" loading="lazy" width="870px" height="574px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/final_image/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_23_0A_Final.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/final_image/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_23_0A_Final.jpg" alt="Final product image" loading="lazy" width="650px" height="431px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/final_image/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_23_0A_Final.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/final_image/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_23_0A_Final.jpg" alt="Final product image" loading="lazy" width="380px" height="255px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/final_image/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_23_0A_Final.jpg 2x"&gt;&lt;!--googleoff: index--&gt;&lt;figcaption&gt;What You'll Be Creating&lt;/figcaption&gt;&lt;!--googleon: index--&gt;&lt;/figure&gt;&lt;style&gt;* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}&lt;/style&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iotd"&gt;
  2445. &lt;p&gt;What if I told you &lt;a href="https://design.tutsplus.com/compatible-with/procreate" target="_blank" rel="noopener"&gt;Procreate&lt;/a&gt; could be your sketchbook, stencil machine, and portable tattoo design studio? Hi, I'm Sirine—a tattoo artist who swapped tracing-paper tantrums for the 'undo' button. I'll give you real-talk tips from someone who's messed up enough times to know the shortcuts. I used to be all about pencil and paper. Now? I'm tapping my way to cleaner designs, happier clients, and fewer "uh-oh" moments. &lt;/p&gt;
  2446. &lt;p&gt;Grab your Apple Pencil and join me to learn how to use Procreate for tattoo artists. Let's turn that iPad into your secret tattoo sidekick.&lt;/p&gt;
  2447. &lt;h2 id="toc-fb3h-what-youll-learn-in-this-article"&gt;What you'll learn in this article&lt;/h2&gt;
  2448. &lt;p&gt;This article is tailored to tattooists who may be digital newbies or simply interested in working smarter. I'll walk you through Procreate's most helpful features, and show you how to set up your workspace, organize layers, and create stencil-ready artwork and client mockups—all from your iPad. You'll learn:&lt;/p&gt;
  2449. &lt;ul&gt;
  2450. &lt;li&gt;How to set up the Procreate workspace&lt;/li&gt;
  2451. &lt;li&gt;How to create print-ready stencils&lt;/li&gt;
  2452. &lt;li&gt;How to organize layers for tattoo art&lt;/li&gt;
  2453. &lt;li&gt;How to add color, brushes, and text in Procreate&lt;/li&gt;
  2454. &lt;li&gt;How to use Procreate for tattoo artists&lt;/li&gt;
  2455. &lt;/ul&gt;
  2456. &lt;/div&gt;&lt;div data-content-block-type="TableOfContents" class="content-block content-block-tableofcontents"&gt;&lt;ul class="visual-toc-list toc-ordered-list visual-toc__regular-theme div-container visual-toc-list__overflow visual-toc-list__equal-split" start="0"&gt;
  2457.  
  2458.  
  2459. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-zu61-how-to-set-up-your-procreates-workspace"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;Gear up: Set up the hardware &amp;amp; software&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  2460. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-0jtt-how-to-customize-a-canvas-like-a-stencil-sheet"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;How to organize Procreate's Gallery for tattoo artists&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  2461. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-0jtt-how-to-customize-a-canvas-like-a-stencil-sheet"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;How do you customize a canvas to function like stencil sheets?&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  2462. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-x95g-how-to-create-canvas-templates-for-different-tattoo-stencils"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;How to create canvas templates for different tattoo stencils&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  2463. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-q7hs-how-to-set-up-procreate-workspace-for-tattoo-design"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;Understanding the Procreate interface for tattoo artists&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  2464. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-qgsn-learn-procreate-gestures-for-speedy-workflow"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;Which Procreate gestures can speed up your workflow?&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  2465. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-bf6r-how-to-set-up-layers-for-tattoo-artwork"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;How to benefit from using Procreate's Layers for tattoo design&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  2466. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-eaey-how-tattoo-artists-can-use-blend-modes-in-procreate"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;How can tattoo artists use Procreate's Blend Modes for tattoo design?&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  2467. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-vh8f-procreate-brushes-for-tattoo-artists"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;How to use Procreate Brushes to mimic tattoo machines&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  2468. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-emcs-color-theory-application-bring-your-tattoo-designs-to-life"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;Color theory &amp;amp; application: Bring your tattoo designs to life&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  2469. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-0lof-how-to-add-text-in-procreate"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;How to add tattoo fonts for Procreate&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  2470. &lt;/ul&gt;&lt;/div&gt;&lt;div data-content-block-type="Wysi" id="i0do9" class="content-block-content-block-wysi content-block"&gt;
  2471. &lt;h2 id="toc-zu61-how-to-set-up-your-procreates-workspace"&gt;
  2472. &lt;span class="sectionnum"&gt;1.&lt;/span&gt; Gear up: Set up the hardware &amp;amp; software&lt;/h2&gt;
  2473. &lt;p&gt;Here's the hardware and software you'll need for your tattoo designs in Procreate.&lt;/p&gt;
  2474. &lt;h3 id="toc-88xe---hardware-essentials-procreate-settings"&gt;Hardware&lt;/h3&gt;
  2475. &lt;p&gt;Get the most responsive gear you can afford, because that's what'll give you the best performance and precision when it comes to digital tattoo sketching. Here are my recommendations: &lt;/p&gt;
  2476. &lt;ul&gt;
  2477. &lt;li&gt;
  2478. &lt;strong&gt;iPad Pro&lt;/strong&gt; (&lt;strong&gt;M4, 2024&lt;/strong&gt;) /&lt;strong&gt; iPad Air &lt;/strong&gt;(&lt;strong&gt;M1 or newer&lt;/strong&gt;) with at least &lt;strong&gt;64GB&lt;/strong&gt; of storage and preferably a &lt;strong&gt;12.9-inch model&lt;/strong&gt;: Fast, reliable performance, and large screen size.&lt;/li&gt;
  2479. &lt;li&gt;
  2480. &lt;strong&gt;Apple Pencil&lt;/strong&gt; (&lt;strong&gt;2nd Gen&lt;/strong&gt;): An Apple pencil gives you a natural drawing experience. Great for line precision, pressure sensitivity, and shading control. &lt;/li&gt;
  2481. &lt;li&gt;
  2482. &lt;strong&gt;Matte screen protector&lt;/strong&gt;: It adds texture and reduces glare, making it ideal for long design sessions. Perfect for a paper-like feel and less smudging. Buy a magnetic version in case you want to take the screen protector off occasionally.&lt;/li&gt;
  2483. &lt;li&gt;
  2484. &lt;strong&gt;Artist glove for iPad &lt;/strong&gt;(optional): Choose a two-finger artist glove that covers your ring, pinky fingers, and the side of your palm. A padded microfiber glove is an excellent option because it helps prevent smudging and can be used as a cleaning cloth while drawing.&lt;/li&gt;
  2485. &lt;/ul&gt;
  2486. &lt;figure class="post_image"&gt;&lt;a href="https://elements.envato.com/closeup-photo-of-drawing-process-in-digital-pad-Y3SN84E" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/closeup_photo_of_drawing_process_in_digital_pad_2025_01_26_04_07_26_utc_copy.jpg" alt="Closeup photo of drawing process in digital pad" loading="lazy" width="870px" height="587px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/closeup_photo_of_drawing_process_in_digital_pad_2025_01_26_04_07_26_utc_copy.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/closeup_photo_of_drawing_process_in_digital_pad_2025_01_26_04_07_26_utc_copy.jpg" alt="Closeup photo of drawing process in digital pad" loading="lazy" width="650px" height="440px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/closeup_photo_of_drawing_process_in_digital_pad_2025_01_26_04_07_26_utc_copy.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/closeup_photo_of_drawing_process_in_digital_pad_2025_01_26_04_07_26_utc_copy.jpg" alt="Closeup photo of drawing process in digital pad" loading="lazy" width="380px" height="260px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/closeup_photo_of_drawing_process_in_digital_pad_2025_01_26_04_07_26_utc_copy.jpg 2x"&gt;&lt;/a&gt;
  2487. &lt;figcaption&gt;Closeup photo of drawing process. &lt;a href="https://elements.envato.com/closeup-photo-of-drawing-process-in-digital-pad-Y3SN84E" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;Image&lt;/a&gt; from Envato.&lt;/figcaption&gt;
  2488. &lt;/figure&gt;
  2489. &lt;h3 id="toc-ue4f-step-2"&gt;Install the Procreate software&lt;/h3&gt;
  2490. &lt;p&gt;Let's get the app ready for tattoo work. Head over to the &lt;strong&gt;&lt;a href="https://procreate.com/procreate" target="_blank" rel="noopener"&gt;Procreate &lt;/a&gt;&lt;/strong&gt;website or the &lt;strong&gt;App Store&lt;/strong&gt; to purchase and download the &lt;strong&gt;Procreate&lt;/strong&gt; app for the one-time purchase price of $12.99. &lt;/p&gt;
  2491. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_00_A.jpg" alt="Preview of Procreate in App store " loading="lazy" width="870px" height="592px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_00_A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_00_A.jpg" alt="Preview of Procreate in App store " loading="lazy" width="650px" height="444px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_00_A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_00_A.jpg" alt="Preview of Procreate in App store " loading="lazy" width="380px" height="262px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_00_A.jpg 2x"&gt;&lt;/figure&gt;
  2492. &lt;h2 id="toc-0jtt-how-to-customize-a-canvas-like-a-stencil-sheet"&gt;
  2493. &lt;span class="sectionnum"&gt;2.&lt;/span&gt; How to organize Procreate's Gallery for tattoo artists&lt;/h2&gt;
  2494. &lt;p&gt;When you open the app, you'll see the &lt;strong&gt;Gallery &lt;/strong&gt;view—this behaves like your personal tattoo studio wall. You can create custom &lt;strong&gt;Stacks&lt;/strong&gt; (folders) to organize your work by client, style, or project, making it easy to browse designs during consultations or revisit old ideas. Here's how to make the most of Procreate’s &lt;strong&gt;Gallery&lt;/strong&gt;:&lt;/p&gt;
  2495. &lt;ul&gt;
  2496. &lt;li&gt;
  2497. &lt;strong&gt;Group&lt;/strong&gt;: Drag canvases into &lt;strong&gt;Stacks&lt;/strong&gt; to sort by flash sheets, custom pieces, or body placement—this is great for managing multiple projects.&lt;/li&gt;
  2498. &lt;li&gt;
  2499. &lt;strong&gt;Label&lt;/strong&gt;: Tap titles to name your files (e.g. &lt;em&gt;Fineline Wrist – Yara 2025&lt;/em&gt;) for quick access.&lt;/li&gt;
  2500. &lt;li&gt;
  2501. &lt;strong&gt;Export&lt;/strong&gt;: Share designs with clients, post on social, or send to stencil print apps.&lt;/li&gt;
  2502. &lt;li&gt;
  2503. &lt;strong&gt;Store&lt;/strong&gt;: Keep all your printable stencil sheets neatly in one folder.&lt;/li&gt;
  2504. &lt;/ul&gt;
  2505. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_00.jpg" alt="How to stack folders in the Procreate gallery " loading="lazy" width="870px" height="657px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_00.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_00.jpg" alt="How to stack folders in the Procreate gallery " loading="lazy" width="650px" height="492px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_00.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_00.jpg" alt="How to stack folders in the Procreate gallery " loading="lazy" width="380px" height="290px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_00.jpg 2x"&gt;&lt;/figure&gt;
  2506. &lt;h2 id="toc-0jtt-how-to-customize-a-canvas-like-a-stencil-sheet"&gt;
  2507. &lt;span class="sectionnum"&gt;3.&lt;/span&gt; How do you customize a canvas to function like stencil sheets?&lt;/h2&gt;
  2508. &lt;p&gt;When creating your tattoo designs in Procreate, it's important to set the canvas to the size you would when selecting the size of your stencil paper. &lt;/p&gt;
  2509. &lt;h3 id="toc-6a2v-step-1"&gt;Step 1&lt;/h3&gt;
  2510. &lt;ul&gt;
  2511. &lt;li&gt;To create a &lt;strong&gt;New Canvas&lt;/strong&gt;, click the &lt;strong&gt;+ &lt;/strong&gt;icon in the top-right corner.&lt;/li&gt;
  2512. &lt;li&gt;Tap the &lt;strong&gt;Custom Size&lt;/strong&gt; icon on the right to create your custom canvas.&lt;/li&gt;
  2513. &lt;li&gt;To adjust the canvas size for print-ready and standard stencil paper, set the&lt;strong&gt; Dimensions&lt;/strong&gt; to &lt;strong&gt;inches&lt;/strong&gt;, &lt;strong&gt;Width&lt;/strong&gt; to &lt;strong&gt;8.5 inches&lt;/strong&gt;, and &lt;strong&gt;Height&lt;/strong&gt; to &lt;strong&gt;11 inches&lt;/strong&gt; (or equivalent to &lt;strong&gt;21.59 cm x 27.94 cm&lt;/strong&gt;).&lt;/li&gt;
  2514. &lt;li&gt;Give your canvas a label, such as '&lt;em&gt;Basic Stencil&lt;/em&gt;'.&lt;/li&gt;
  2515. &lt;/ul&gt;
  2516. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_01_0A.jpg" alt="Create new canvas for stencil ready print on Procreate" loading="lazy" width="870px" height="657px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_01_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_01_0A.jpg" alt="Create new canvas for stencil ready print on Procreate" loading="lazy" width="650px" height="492px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_01_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_01_0A.jpg" alt="Create new canvas for stencil ready print on Procreate" loading="lazy" width="380px" height="290px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_01_0A.jpg 2x"&gt;&lt;/figure&gt;
  2517. &lt;h3 id="toc-nsst-step-2"&gt;Step 2&lt;/h3&gt;
  2518. &lt;p&gt;For our custom stencil canvas, use &lt;strong&gt;300 DPI&lt;/strong&gt; for crisp, print-ready quality—it's perfect for tattoos and professional prints. An &lt;strong&gt;8.5" x 11"&lt;/strong&gt; canvas at this resolution supports up to &lt;strong&gt;120 layers&lt;/strong&gt;, giving you flexibility for detailed work.&lt;/p&gt;
  2519. &lt;p&gt;In Procreate, the canvas size and DPI affect the number of layers you can use. Larger canvases mean fewer layers due to iPad memory limits. In comparison, smaller canvases allow more layers for separating the line work, shading, and color. For larger prints, go with an 11" x 17" canvas. Just keep in mind that a bigger size means fewer layers, and more layers mean more creative control.&lt;/p&gt;
  2520. &lt;p&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_02_0A.jpg" alt="Set resolution DPI to 300 with Maximum layers at 120" loading="lazy" width="870px" height="256px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_02_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_02_0A.jpg" alt="Set resolution DPI to 300 with Maximum layers at 120" loading="lazy" width="650px" height="195px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_02_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_02_0A.jpg" alt="Set resolution DPI to 300 with Maximum layers at 120" loading="lazy" width="380px" height="120px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_02_0A.jpg 2x"&gt;&lt;/p&gt;
  2521. &lt;h3 id="toc-qtq4-step-3"&gt;Step 3&lt;/h3&gt;
  2522. &lt;p&gt;Clarity and contrast are necessary for tattoo stencils for high-contrast black and grey work. So when choosing the &lt;strong&gt;Color Profile&lt;/strong&gt;, select &lt;strong&gt;RGB – sRGB IEC61966-2.1 &lt;/strong&gt;as it's compatible with most printers and stencil-making software. If you're preparing full-color prints, consider switching to &lt;strong&gt;CMYK&lt;/strong&gt; and choosing &lt;strong&gt;RGB (Display P3)&lt;/strong&gt; for rich screen colors.&lt;/p&gt;
  2523. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_03_0A.jpg" alt="Set the Color Profile of a custom canvas" loading="lazy" width="870px" height="291px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_03_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_03_0A.jpg" alt="Set the Color Profile of a custom canvas" loading="lazy" width="650px" height="221px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_03_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_03_0A.jpg" alt="Set the Color Profile of a custom canvas" loading="lazy" width="380px" height="135px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_03_0A.jpg 2x"&gt;&lt;/figure&gt;
  2524. &lt;h3 id="toc-4uvy-step-4"&gt;Step 4&lt;/h3&gt;
  2525. &lt;p&gt;Tattooists can easily showcase their creative process or build a portfolio using Procreate’s &lt;strong&gt;Time-lapse &lt;/strong&gt;feature. When you start a new canvas, &lt;strong&gt;Time-lapse Recording &lt;/strong&gt;is enabled by default. It automatically records every stroke from start to finish, perfect for sharing with clients or on social media. For a good balance of quality and file size, use &lt;strong&gt;1920 x 1080 resolution&lt;/strong&gt; with &lt;strong&gt;Good Quality&lt;/strong&gt; selected.&lt;/p&gt;
  2526. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_04_0A.jpg" alt="Setting time lapse video and resolution setting in good quality " loading="lazy" width="870px" height="374px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_04_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_04_0A.jpg" alt="Setting time lapse video and resolution setting in good quality " loading="lazy" width="650px" height="282px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_04_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_04_0A.jpg" alt="Setting time lapse video and resolution setting in good quality " loading="lazy" width="380px" height="170px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_04_0A.jpg 2x"&gt;&lt;/figure&gt;
  2527. &lt;h3 id="toc-1q4x-step-5"&gt;Step 5&lt;/h3&gt;
  2528. &lt;p&gt;Within &lt;strong&gt;Canvas Properties&lt;/strong&gt;, you can set your preferred background color or hide the background by toggling the &lt;strong&gt;Background Hidden&lt;/strong&gt;. The background color is set to white by default, but you can customize it. Once you're ready, tap &lt;strong&gt;Create &lt;/strong&gt;to begin designing your stencils in Procreate.&lt;/p&gt;
  2529. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_05_0A.jpg" alt="Procreates canvas settings and background color" loading="lazy" width="870px" height="217px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_05_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_05_0A.jpg" alt="Procreates canvas settings and background color" loading="lazy" width="650px" height="166px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_05_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_05_0A.jpg" alt="Procreates canvas settings and background color" loading="lazy" width="380px" height="103px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_05_0A.jpg 2x"&gt;&lt;/figure&gt;
  2530. &lt;figure class="post_image"&gt;&lt;/figure&gt;
  2531. &lt;h2 id="toc-x95g-how-to-create-canvas-templates-for-different-tattoo-stencils"&gt;
  2532. &lt;span class="sectionnum"&gt;4.&lt;/span&gt; How to create canvas templates for different tattoo stencils&lt;/h2&gt;
  2533. &lt;p&gt;To save time in your tattoo design process, create all the stencil sizes you would typically use and save them in your&lt;strong&gt; Gallery&lt;/strong&gt;. Make sure they're all set at a resolution of &lt;strong&gt;300 DPI&lt;/strong&gt;. Here are some examples:&lt;/p&gt;
  2534. &lt;table&gt;
  2535. &lt;tbody&gt;
  2536. &lt;tr&gt;
  2537. &lt;td&gt;&lt;strong&gt;Flash sheet&lt;/strong&gt;&lt;/td&gt;
  2538. &lt;td&gt;11" x 14" (3300 x 4200 px)&lt;/td&gt;
  2539. &lt;td&gt;Ideal for multiple small tattoo designs&lt;/td&gt;
  2540. &lt;/tr&gt;
  2541. &lt;tr&gt;
  2542. &lt;td&gt;&lt;strong&gt;Small tattoo&lt;/strong&gt;&lt;/td&gt;
  2543. &lt;td&gt;4" x 4" (1200 x 1200 px)&lt;/td&gt;
  2544. &lt;td&gt;Clean, compact, and good for fineline and micro tattoos&lt;/td&gt;
  2545. &lt;/tr&gt;
  2546. &lt;tr&gt;
  2547. &lt;td&gt;&lt;strong&gt;Sleeve tattoo&lt;/strong&gt;&lt;/td&gt;
  2548. &lt;td&gt;16.5" x 47" (4950 x 14100 px)&lt;/td&gt;
  2549. &lt;td&gt;For forearm to shoulder; adjust depending on client arm length&lt;/td&gt;
  2550. &lt;/tr&gt;
  2551. &lt;tr&gt;
  2552. &lt;td&gt;&lt;strong&gt;Back/torso tattoo&lt;/strong&gt;&lt;/td&gt;
  2553. &lt;td&gt;14" x 20" (4200 x 6000 px)&lt;/td&gt;
  2554. &lt;td&gt;For back or large areas&lt;/td&gt;
  2555. &lt;/tr&gt;
  2556. &lt;tr&gt;
  2557. &lt;td&gt;&lt;strong&gt;Back/front leg tattoo&lt;/strong&gt;&lt;/td&gt;
  2558. &lt;td&gt;
  2559. &lt;p&gt;8" x 20" (2400 x 6000 px)&lt;/p&gt;
  2560. &lt;/td&gt;
  2561. &lt;td&gt;Shin/Calf&lt;/td&gt;
  2562. &lt;/tr&gt;
  2563. &lt;tr&gt;
  2564. &lt;td&gt;&lt;strong&gt;Portfolio&lt;/strong&gt;&lt;/td&gt;
  2565. &lt;td&gt;2048 x 2732 px&lt;/td&gt;
  2566. &lt;td&gt;iPad screen ratio&lt;/td&gt;
  2567. &lt;/tr&gt;
  2568. &lt;tr&gt;
  2569. &lt;td&gt;&lt;strong&gt;Social media&lt;/strong&gt;&lt;/td&gt;
  2570. &lt;td&gt;1080 x 1080 px&lt;/td&gt;
  2571. &lt;td&gt;Instagram posts&lt;/td&gt;
  2572. &lt;/tr&gt;
  2573. &lt;/tbody&gt;
  2574. &lt;/table&gt;
  2575. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_02a.jpg" alt="set up tattoo templates on Procreate" loading="lazy" width="870px" height="657px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_02a.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_02a.jpg" alt="set up tattoo templates on Procreate" loading="lazy" width="650px" height="492px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_02a.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_02a.jpg" alt="set up tattoo templates on Procreate" loading="lazy" width="380px" height="290px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_02a.jpg 2x"&gt;&lt;/figure&gt;
  2576. &lt;h2 id="toc-q7hs-how-to-set-up-procreate-workspace-for-tattoo-design"&gt;
  2577. &lt;span class="sectionnum"&gt;5.&lt;/span&gt; Understanding the Procreate interface for tattoo artists &lt;/h2&gt;
  2578. &lt;p&gt;Get familiar with Procreate’s interface—think of it like your digital tattoo workstation. The top bar holds your brushes, just like your needle configurations (liners, shaders, magnums, etc.) and wipes. The sidebar is your quick-access tool for switching between fineline and broad strokes. Layers? They're your digital stencil sheets.&lt;/p&gt;
  2579. &lt;div id="toc-byzs-take-a-moment-to-explore-and-get-comfortable-with-the-interface-if-you-have-time-watch-how-to-draw-in-procreate-for-extra-knowledge" class="callout-block"&gt;
  2580. &lt;span class="callout-icon callout-tip"&gt;&lt;/span&gt;
  2581. &lt;div id="toc-v7g8-take-a-moment-to-explore-and-get-comfortable-with-the-interface-if-you-have-time-watch-how-to-draw-in-procreate-for-extra-knowledge" class="callout-message"&gt;Take a moment to explore and get comfortable with the interface. If you have time, watch &lt;a class="css-118vsk3" href="https://design.tutsplus.com/tutorials/how-to-draw-in-procreate--cms-93591"&gt;how to draw in Procreate&lt;/a&gt; for extra details and tips.&lt;/div&gt;
  2582. &lt;/div&gt;
  2583. &lt;h4 id="toc-sm59-gallery-view-this-is-where-you-sort-your-designs-by-project-or-client"&gt;Gallery &lt;/h4&gt;
  2584. &lt;ul&gt;
  2585. &lt;li&gt;This is where you sort and stack your designs by project or client.&lt;/li&gt;
  2586. &lt;/ul&gt;
  2587. &lt;h4 id="toc-zd33-actions-menu-wrench-icon"&gt;Actions Menu (Wrench icon) &lt;/h4&gt;
  2588. &lt;ul&gt;
  2589. &lt;li&gt;Everything starts here—it's your control center.&lt;/li&gt;
  2590. &lt;li&gt;Add photos, text, photos, or files to your canvas.&lt;/li&gt;
  2591. &lt;li&gt;Use it to &lt;strong&gt;Cut&lt;/strong&gt;, &lt;strong&gt;Copy&lt;/strong&gt;, &lt;strong&gt;Paste, &lt;/strong&gt;&lt;strong&gt;Export&lt;/strong&gt;, &lt;strong&gt;Share&lt;/strong&gt;, or create &lt;strong&gt;Time-lapse &lt;/strong&gt;videos.&lt;/li&gt;
  2592. &lt;li&gt;
  2593. &lt;strong&gt;Canvas &amp;gt; Symmetry &amp;gt; Drawing Guide&lt;/strong&gt;: This is a powerful tool for tattoo artists, especially when creating mandalas, mirrored designs, symmetrical images, or body placements (like chest pieces or forearm tattoos). For a better understanding, watch &lt;a href="https://design.tutsplus.com/tutorials/how-to-do-symmetry-in-procreate--cms-93177" target="_blank" rel="noopener"&gt;how to mirror in Procreate for symmetrical drawings&lt;/a&gt;.&lt;/li&gt;
  2594. &lt;/ul&gt;
  2595. &lt;h4 id="toc-gvve-smudge-tool-finger-icon"&gt;Smudge Tool (Finger icon)&lt;/h4&gt;
  2596. &lt;ul&gt;
  2597. &lt;li&gt;Pick any brush in the &lt;strong&gt;Brush Library &lt;/strong&gt;to blend and soften lines or shading.&lt;/li&gt;
  2598. &lt;li&gt;Use the &lt;strong&gt;Smudge Tool&lt;/strong&gt; to blur or create smooth gradients or mixed tones.&lt;/li&gt;
  2599. &lt;li&gt;Adjust the smudge opacity for subtle or bold effects.&lt;/li&gt;
  2600. &lt;/ul&gt;
  2601. &lt;h4 id="toc-qj8y-eraser-tool-eraser-icon"&gt;Eraser Tool (Eraser icon)&lt;/h4&gt;
  2602. &lt;ul&gt;
  2603. &lt;li&gt;Lets you fade, clean up, or correct designs easily.&lt;/li&gt;
  2604. &lt;li&gt;Use the &lt;strong&gt;Opacity&lt;/strong&gt; slider to control intensity.&lt;/li&gt;
  2605. &lt;/ul&gt;
  2606. &lt;h4 id="toc-0jf2-layers"&gt;Layers (Two overlapping squares)&lt;/h4&gt;
  2607. &lt;ul&gt;
  2608. &lt;li&gt;Layers let you build your design step by step, like tracing paper.&lt;/li&gt;
  2609. &lt;li&gt;Tap the &lt;strong&gt;Layers&lt;/strong&gt; icon to add, move, lock, or delete a layer.&lt;/li&gt;
  2610. &lt;/ul&gt;
  2611. &lt;h4 id="toc-cjhq-color-tools-color-dot"&gt;Color Tools (Color dot)&lt;/h4&gt;
  2612. &lt;ul&gt;
  2613. &lt;li&gt;Tap to open the color menu.&lt;/li&gt;
  2614. &lt;li&gt;Use the &lt;strong&gt;Classic Picker &lt;/strong&gt;for hue, saturation, and brightness.&lt;/li&gt;
  2615. &lt;li&gt;Try &lt;strong&gt;Color Harmony&lt;/strong&gt; for matching tones.&lt;/li&gt;
  2616. &lt;li&gt;
  2617. &lt;strong&gt;Drag-and-drop&lt;/strong&gt; to fill areas quickly.&lt;/li&gt;
  2618. &lt;li&gt;
  2619. &lt;strong&gt;Save &lt;/strong&gt;and &lt;strong&gt;share&lt;/strong&gt; custom palettes.&lt;/li&gt;
  2620. &lt;/ul&gt;
  2621. &lt;h4 id="toc-hmca-brush-size-opacity"&gt;Brush Size &amp;amp; Opacity&lt;/h4&gt;
  2622. &lt;ul&gt;
  2623. &lt;li&gt;Use the sliders on the side of the canvas to adjust the &lt;strong&gt;Brush Size&lt;/strong&gt; thickness (top slider) and &lt;strong&gt;Opacity &lt;/strong&gt;(bottom slider).&lt;/li&gt;
  2624. &lt;li&gt;Tap the slider to enter specific values.&lt;/li&gt;
  2625. &lt;/ul&gt;
  2626. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_04c.jpg" alt="Preview of Procreate interface elements and actions" loading="lazy" width="870px" height="523px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_04c.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_04c.jpg" alt="Preview of Procreate interface elements and actions" loading="lazy" width="650px" height="393px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_04c.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_04c.jpg" alt="Preview of Procreate interface elements and actions" loading="lazy" width="380px" height="233px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_04c.jpg 2x"&gt;&lt;/figure&gt;
  2627. &lt;h2 id="toc-qgsn-learn-procreate-gestures-for-speedy-workflow"&gt;
  2628. &lt;span class="sectionnum"&gt;6.&lt;/span&gt; Which Procreate gestures can speed up your workflow?&lt;/h2&gt;
  2629. &lt;p&gt;You can speed up your tattoo design process by just mastering a few key gestures in Procreate, focusing more on your tattoo artistry. Here are simple canvas gestures every tattoo artist should know:&lt;/p&gt;
  2630. &lt;ul&gt;
  2631. &lt;li&gt;
  2632. &lt;strong&gt;Undo&lt;/strong&gt;: Tap the canvas with two fingers on the screen to undo the last action.&lt;/li&gt;
  2633. &lt;li&gt;
  2634. &lt;strong&gt;Two-finger layer tap&lt;/strong&gt;: To adjust a layer’s opacity or transparency quickly, double-tap the layer with two fingers and drag the slider to the transparency percentage you want.&lt;/li&gt;
  2635. &lt;li&gt;
  2636. &lt;strong&gt;Redo&lt;/strong&gt;: Tap the canvas with three fingers to redo what you just undid.&lt;/li&gt;
  2637. &lt;li&gt;
  2638. &lt;strong&gt;Zoom In/Out&lt;/strong&gt;: Pinch two fingers to zoom in or expand two fingers to zoom out the view.&lt;/li&gt;
  2639. &lt;li&gt;
  2640. &lt;strong&gt;Rotate Canvas&lt;/strong&gt;: Twist two fingers to rotate the canvas. This is great for adjusting your wrist angle while lining.&lt;/li&gt;
  2641. &lt;li&gt;
  2642. &lt;strong&gt;QuickShape&lt;/strong&gt;: To draw a perfect line, circle, or shape in Procreate, keep your finger or pen pressed down on the canvas when drawing, and it will automatically snap into a perfect circle, line, arc, or square—a great trick for clean stencil work.&lt;/li&gt;
  2643. &lt;/ul&gt;
  2644. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_03a.jpg" alt="how to use procreate key hand gestures to maneuver canvas" loading="lazy" width="870px" height="459px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_03a.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_03a.jpg" alt="how to use procreate key hand gestures to maneuver canvas" loading="lazy" width="650px" height="345px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_03a.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_03a.jpg" alt="how to use procreate key hand gestures to maneuver canvas" loading="lazy" width="380px" height="206px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_03a.jpg 2x"&gt;
  2645. &lt;figcaption&gt;&lt;a href="https://elements.envato.com/touch-gestures-icons-JQWLE5T" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;Touch Gestures Icons&lt;/a&gt; from Envato&lt;/figcaption&gt;
  2646. &lt;/figure&gt;
  2647. &lt;h2 id="toc-bf6r-how-to-set-up-layers-for-tattoo-artwork"&gt;
  2648. &lt;span class="sectionnum"&gt;7.&lt;/span&gt; How to benefit from using Procreate's Layers for tattoo design&lt;/h2&gt;
  2649. &lt;h3 id="toc-8b56-how-to-setup-layers-for-tattoo-work"&gt;How to use Procreate to organize tattoo artwork layers&lt;/h3&gt;
  2650. &lt;p&gt;Keep your tattoo design clean and editable by organizing your layers—use separate ones for sketching, linework, color, and shading. Label them clearly to stay non-destructive and make adjustments easy.&lt;/p&gt;
  2651. &lt;ul&gt;
  2652. &lt;li&gt;
  2653. &lt;strong&gt;Reference &lt;/strong&gt;images are kept on their own layer with low opacity.&lt;/li&gt;
  2654. &lt;li&gt;
  2655. &lt;strong&gt;Sketch&lt;/strong&gt;: A rough sketch or outline or initial idea.&lt;/li&gt;
  2656. &lt;li&gt;
  2657. &lt;strong&gt;Linework&lt;/strong&gt;: Clean, precise lines for the final tattoo.&lt;/li&gt;
  2658. &lt;li&gt;
  2659. &lt;strong&gt;Color&lt;/strong&gt;: Layer for coloring in the tattoo piece.&lt;/li&gt;
  2660. &lt;li&gt;
  2661. &lt;strong&gt;Shading:&lt;/strong&gt; Adding depth, texture, and color on separate layers, allowing for easy adjustments without affecting the linework.&lt;/li&gt;
  2662. &lt;/ul&gt;
  2663. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_06_0A.jpg" alt="Organize your tattoo design process using Layers on Procreate" loading="lazy" width="870px" height="424px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_06_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_06_0A.jpg" alt="Organize your tattoo design process using Layers on Procreate" loading="lazy" width="650px" height="319px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_06_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_06_0A.jpg" alt="Organize your tattoo design process using Layers on Procreate" loading="lazy" width="380px" height="191px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_06_0A.jpg 2x"&gt;&lt;/figure&gt;
  2664. &lt;h3 id="toc-ofdh-how-to-use-layer-settings-in-procreate"&gt;Quick Procreate layer actions at your fingertips&lt;/h3&gt;
  2665. &lt;p&gt;When you &lt;strong&gt;swipe left&lt;/strong&gt; on a layer in the &lt;strong&gt;Layers&lt;/strong&gt; panel, you’ll see three options:&lt;/p&gt;
  2666. &lt;ol&gt;
  2667. &lt;li&gt;
  2668. &lt;strong&gt;Lock: &lt;/strong&gt;Prevents the layer from being edited. It's great for protecting completed linework, stencils, or reference layers from accidental edits.&lt;/li&gt;
  2669. &lt;li&gt;
  2670. &lt;strong&gt;Duplicate: &lt;/strong&gt;Instantly makes a copy of the layer. It's helpful for creating backup versions, experimenting with color, or making slight variations (e.g. different shading styles).&lt;/li&gt;
  2671. &lt;li&gt;
  2672. &lt;strong&gt;Delete: &lt;/strong&gt;Permanently removes the layer. Be cautious; once deleted, it's gone forever—unless you tap with two fingers immediately to &lt;strong&gt;Undo&lt;/strong&gt;.&lt;/li&gt;
  2673. &lt;/ol&gt;
  2674. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_07_0A.jpg" alt="quick action Layer setting, lock, delete amd duplicate in Procreate" loading="lazy" width="870px" height="536px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_07_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_07_0A.jpg" alt="quick action Layer setting, lock, delete amd duplicate in Procreate" loading="lazy" width="650px" height="402px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_07_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_07_0A.jpg" alt="quick action Layer setting, lock, delete amd duplicate in Procreate" loading="lazy" width="380px" height="239px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_07_0A.jpg 2x"&gt;&lt;/figure&gt;
  2675. &lt;h3 id="toc-420f-top-layer-option-tools-every-tattoo-artist-should-know"&gt;Layer Options tools every tattoo artist should know &lt;/h3&gt;
  2676. &lt;p&gt;Tap the layer thumbnail (not the name) to open the &lt;strong&gt;Layer Options &lt;/strong&gt;menu. This brings up a range of helpful tools perfect for tattoo artists—whether you're creating custom designs or prepping stencils. Here's a quick overview of how these tools can ease your workflow:&lt;/p&gt;
  2677. &lt;ul&gt;
  2678. &lt;li&gt;
  2679. &lt;strong&gt;Rename&lt;/strong&gt;: Tap to label your layers.&lt;/li&gt;
  2680. &lt;li&gt;
  2681. &lt;strong&gt;Select &lt;/strong&gt;isolates everything drawn on that layer. This is useful if you want to move, scale, or adjust the designed part. &lt;/li&gt;
  2682. &lt;li&gt;
  2683. &lt;strong&gt;Clear&lt;/strong&gt; instantly erases all content from that layer. &lt;/li&gt;
  2684. &lt;li&gt;
  2685. &lt;strong&gt;Alpha Lock&lt;/strong&gt; lets you shade or color inside the existing linework only. It's excellent for recoloring outlines or adding soft shading to tattoo fills without going outside the lines.&lt;/li&gt;
  2686. &lt;li&gt;
  2687. &lt;strong&gt;Reference&lt;/strong&gt;: Keeps your line work visible in the reference window while adding shading on a separate layer.&lt;/li&gt;
  2688. &lt;li&gt;
  2689. &lt;strong&gt;Merge Down&lt;/strong&gt; merges the selected layer with the one below it. It's helpful to keep duplicates before merging.&lt;/li&gt;
  2690. &lt;/ul&gt;
  2691. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_08_0A.jpg" alt="procreate layer options menu" loading="lazy" width="870px" height="605px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_08_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_08_0A.jpg" alt="procreate layer options menu" loading="lazy" width="650px" height="454px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_08_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_08_0A.jpg" alt="procreate layer options menu" loading="lazy" width="380px" height="268px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_08_0A.jpg 2x"&gt;&lt;/figure&gt;
  2692. &lt;h3 id="toc-z7bu-how-to-use-alpha-lock"&gt;How to color tattoo art using the Reference layer option in Procreate&lt;/h3&gt;
  2693. &lt;p&gt;&lt;strong&gt;Reference&lt;/strong&gt; layers in Procreate are game-changing for tattoo artists. This feature streamlines the workflow and helps you create clean stencils, precise shading, and effortless color fills without manually selecting each area. To make the most of this feature, set your 'Linework' layer as the &lt;strong&gt;Reference&lt;/strong&gt; layer:&lt;/p&gt;
  2694. &lt;ol&gt;
  2695. &lt;li&gt;Tap the thumbnail of your '&lt;em&gt;Linework&lt;/em&gt;' layer.&lt;/li&gt;
  2696. &lt;li&gt;Select &lt;strong&gt;Reference&lt;/strong&gt; from the menu—look for the small &lt;strong&gt;Reference&lt;/strong&gt; tag under the layer name.&lt;/li&gt;
  2697. &lt;li&gt;Add a &lt;strong&gt;New Layer &lt;/strong&gt;underneath by tapping the &lt;strong&gt;+ &lt;/strong&gt;icon.&lt;/li&gt;
  2698. &lt;li&gt;Use &lt;strong&gt;ColorDrop&lt;/strong&gt; (drag and drop) to fill areas; the linework above acts as a boundary, even though the color is applied to a separate layer.&lt;/li&gt;
  2699. &lt;/ol&gt;
  2700. &lt;p&gt;This approach keeps your outlines and color neatly separated, making edits clean and easy.&lt;/p&gt;
  2701. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_09_0B.jpg" alt="How to use Reference in Layers to Color drop and define color area" loading="lazy" width="870px" height="487px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_09_0B.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_09_0B.jpg" alt="How to use Reference in Layers to Color drop and define color area" loading="lazy" width="650px" height="366px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_09_0B.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_09_0B.jpg" alt="How to use Reference in Layers to Color drop and define color area" loading="lazy" width="380px" height="218px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_09_0B.jpg 2x"&gt;&lt;/figure&gt;
  2702. &lt;h3 id="toc-d2sq-why-use-the-alpha-lock-layer-option-for-tattoo-work"&gt;Why use the Alpha Lock layer option for tattoo design?&lt;/h3&gt;
  2703. &lt;p&gt;&lt;strong&gt;Alpha Lock&lt;/strong&gt; in Procreate locks the transparent parts of a layer so you can paint, shade, or edit only inside the existing linework. It’s perfect for clean fills or gradients, coloring inside shapes, and refining your designs.&lt;/p&gt;
  2704. &lt;ul&gt;
  2705. &lt;li&gt;Say you want red outlines for a traditional tattoo style. Use &lt;strong&gt;Alpha Lock&lt;/strong&gt; on your '&lt;em&gt;Linework&lt;/em&gt;' layer, and then brush or &lt;strong&gt;ColorDrop&lt;/strong&gt; to change the color only of the existing lines. There's no need to redraw! &lt;/li&gt;
  2706. &lt;li&gt;Use Alpha Lock&lt;strong&gt; &lt;/strong&gt;on a solid-shaped layer and brush it in soft shadows or gradients without spilling it outside the edge. Add stipple shading or texture brushes—Alpha Lock keeps them clean.&lt;/li&gt;
  2707. &lt;li&gt;Always keep linework and fills on separate layers—Alpha Lock gives you more power when they’re clean and isolated.&lt;/li&gt;
  2708. &lt;/ul&gt;
  2709. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_10_0A.jpg" alt="use alpha lock to lock the transparent parts of a layer so you can paint, shade, or edit only inside existing linework." loading="lazy" width="870px" height="495px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_10_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_10_0A.jpg" alt="use alpha lock to lock the transparent parts of a layer so you can paint, shade, or edit only inside existing linework." loading="lazy" width="650px" height="372px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_10_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_10_0A.jpg" alt="use alpha lock to lock the transparent parts of a layer so you can paint, shade, or edit only inside existing linework." loading="lazy" width="380px" height="221px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_10_0A.jpg 2x"&gt;&lt;/figure&gt;
  2710. &lt;h3 id="toc-xkgq-how-to-activate-alpha-lock"&gt;How to activate Alpha Lock&lt;/h3&gt;
  2711. &lt;p&gt;You can activate &lt;strong&gt;Alpha Lock &lt;/strong&gt;in two quick ways. You can also &lt;em&gt;disable&lt;/em&gt;&lt;strong&gt; &lt;/strong&gt;Alpha Lock the same way you turned it on if you want to work outside the shape again.&lt;/p&gt;
  2712. &lt;h4 id="toc-zho5-method-1-from-the-layers-menu"&gt;Method 1: From the Layers Menu&lt;/h4&gt;
  2713. &lt;ol&gt;
  2714. &lt;li&gt;Tap the &lt;strong&gt;Layers&lt;/strong&gt; icon.&lt;/li&gt;
  2715. &lt;li&gt;Tap the layer thumbnail.&lt;/li&gt;
  2716. &lt;li&gt;Tap &lt;strong&gt;Alpha Lock&lt;/strong&gt; from the menu. A checkerboard background appears behind the thumbnail (that means it’s active).&lt;/li&gt;
  2717. &lt;/ol&gt;
  2718. &lt;h4 id="toc-eq4o-method-2-with-a-two-finger-swipe"&gt;Method 2: With a two-finger swipe&lt;/h4&gt;
  2719. &lt;p&gt;On the layer you want to lock, do a &lt;strong&gt;two-finger swipe right&lt;/strong&gt;. You’ll see the checkerboard background appear—&lt;strong&gt;Alpha Lock &lt;/strong&gt;is &lt;strong&gt;on&lt;/strong&gt;.&lt;/p&gt;
  2720. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_11_0A.jpg" alt="how to use alpha lock to apply gradients" loading="lazy" width="870px" height="649px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_11_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_11_0A.jpg" alt="how to use alpha lock to apply gradients" loading="lazy" width="650px" height="486px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_11_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_11_0A.jpg" alt="how to use alpha lock to apply gradients" loading="lazy" width="380px" height="286px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_11_0A.jpg 2x"&gt;&lt;/figure&gt;
  2721. &lt;h2 id="toc-eaey-how-tattoo-artists-can-use-blend-modes-in-procreate"&gt;
  2722. &lt;span class="sectionnum"&gt;8.&lt;/span&gt; How can tattoo artists use Procreate's Blend Modes for tattoo design?&lt;/h2&gt;
  2723. &lt;h3 id="toc-ok7z-what-are-blend-modes"&gt;What are Blend Modes and how can you access them?&lt;/h3&gt;
  2724. &lt;p&gt;&lt;strong&gt;Blend Modes&lt;/strong&gt; are the modes that control how one layer interacts with the layers beneath it. So, instead of simply laying one layer on top of the other, you can blend them into one another in unique ways. Blend Modes are good for adding realistic shading, glows, or rich textures to your tattoo designs.&lt;/p&gt;
  2725. &lt;p&gt;To access &lt;strong&gt;Blend Modes&lt;/strong&gt;, tap the layer thumbnail. Select &lt;strong&gt;N&lt;/strong&gt; (&lt;strong&gt;Normal&lt;/strong&gt;), which opens the &lt;strong&gt;Blend Mode&lt;/strong&gt; menu. Scroll through the mode options to see the effect each mode has on your design.&lt;/p&gt;
  2726. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_12_0A.jpg" alt="Access Blend Modes menu by tapping on layer thumbnail" loading="lazy" width="870px" height="586px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_12_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_12_0A.jpg" alt="Access Blend Modes menu by tapping on layer thumbnail" loading="lazy" width="650px" height="440px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_12_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_12_0A.jpg" alt="Access Blend Modes menu by tapping on layer thumbnail" loading="lazy" width="380px" height="260px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_12_0A.jpg 2x"&gt;&lt;/figure&gt;
  2727. &lt;h3 id="toc-klpx-popular-blend-modes-for-tattoo-design"&gt;Popular Blend Modes for tattoo design&lt;/h3&gt;
  2728. &lt;ul&gt;
  2729. &lt;li&gt;
  2730. &lt;strong&gt;Multiply&lt;/strong&gt;: Great for shading. It darkens your base colors without affecting the outline—good for building soft, layered shadows. Use &lt;strong&gt;Multiply &lt;/strong&gt;when placing a stencil or sketch layer over your design.&lt;/li&gt;
  2731. &lt;li&gt;
  2732. &lt;strong&gt;Screen&lt;/strong&gt; or &lt;strong&gt;Add&lt;/strong&gt;: Perfect for highlights or glow effects, especially on color tattoos or illustrative styles. These modes lighten the base and can simulate reflected light on the skin.&lt;/li&gt;
  2733. &lt;li&gt;
  2734. &lt;strong&gt;Overlay&lt;/strong&gt; or &lt;strong&gt;Soft Light&lt;/strong&gt;: Enhance the color vibrancy or add subtle tone variations without upsetting the base artwork—useful for building up realistic depth.&lt;/li&gt;
  2735. &lt;li&gt;
  2736. &lt;strong&gt;Color&lt;/strong&gt;: Used to recolor grayscale tattoos or to apply a color tint over existing linework while keeping the detail visible.&lt;/li&gt;
  2737. &lt;/ul&gt;
  2738. &lt;p&gt;Always use &lt;strong&gt;Blend Modes&lt;/strong&gt; on separate layers, keeping your work clean and editable. Lower the &lt;strong&gt;Opacity&lt;/strong&gt; to help it blend more naturally if the effect is too strong. You can quickly adjust a layer’s opacity by double-tapping the layer with two fingers and dragging the slider.     &lt;/p&gt;
  2739. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_13_0A.jpg" alt="Use blend Modes to blend layers together in Procreate" loading="lazy" width="870px" height="594px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_13_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_13_0A.jpg" alt="Use blend Modes to blend layers together in Procreate" loading="lazy" width="650px" height="445px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_13_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_13_0A.jpg" alt="Use blend Modes to blend layers together in Procreate" loading="lazy" width="380px" height="263px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_13_0A.jpg 2x"&gt;&lt;/figure&gt;
  2740. &lt;h2 id="toc-vh8f-procreate-brushes-for-tattoo-artists"&gt;
  2741. &lt;span class="sectionnum"&gt;9.&lt;/span&gt; How to use Procreate Brushes to mimic tattoo machines&lt;/h2&gt;
  2742. &lt;p&gt;When it comes to digital tattoo design, choosing the &lt;a href="https://design.tutsplus.com/tutorials/how-to-use-photoshop-brushes-in-procreate--cms-34540" target="_blank" rel="noopener"&gt;right Procreate brushes&lt;/a&gt; that replicate the look and feel of real tattoo machines can make all the difference. Tattooing relies on clean lines and smooth shading. Your liner brushes should help you achieve crisp outlines, while the shader brushes build up gradients, whip shade, or stipple your tattoo design work.&lt;/p&gt;
  2743. &lt;h3 id="toc-gzcw-adjusting-brushes-in-procreate"&gt;How to adjust Procreate Brush settings&lt;/h3&gt;
  2744. &lt;p&gt;To customize Procreate brushes, you have a few quick adjustments available from the left slider:&lt;/p&gt;
  2745. &lt;ul&gt;
  2746. &lt;li&gt;
  2747. &lt;strong&gt;Top slider&lt;/strong&gt;: Adjusts &lt;strong&gt;Brush Size&lt;/strong&gt;
  2748. &lt;/li&gt;
  2749. &lt;li&gt;
  2750. &lt;strong&gt;Bottom slider:&lt;/strong&gt; Controls &lt;strong&gt;Opacity&lt;/strong&gt;
  2751. &lt;/li&gt;
  2752. &lt;/ul&gt;
  2753. &lt;p&gt;For complete brush control and access to the &lt;strong&gt;Brush Studio&lt;/strong&gt;:&lt;/p&gt;
  2754. &lt;ol&gt;
  2755. &lt;li&gt;Open the &lt;strong&gt;Brush Library&lt;/strong&gt;: Tap the paintbrush icon in the top-right corner.&lt;/li&gt;
  2756. &lt;li&gt;Select a &lt;strong&gt;Brush.&lt;/strong&gt;
  2757. &lt;/li&gt;
  2758. &lt;li&gt;Then tap the brush image to open the &lt;strong&gt;Brush Studio&lt;/strong&gt;.&lt;/li&gt;
  2759. &lt;li&gt;To customize Procreate tattoo brushes, use the panels on the left to modify specific brush behaviors. You can then test changes on the preview canvas to the right. Once you're satisfied, tap &lt;strong&gt;Done&lt;/strong&gt; to save.&lt;/li&gt;
  2760. &lt;/ol&gt;
  2761. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_14_0A.jpg" alt="brush studio preview showing brush aspects" loading="lazy" width="870px" height="657px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_14_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_14_0A.jpg" alt="brush studio preview showing brush aspects" loading="lazy" width="650px" height="492px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_14_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_14_0A.jpg" alt="brush studio preview showing brush aspects" loading="lazy" width="380px" height="290px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_14_0A.jpg 2x"&gt;&lt;/figure&gt;
  2762. &lt;h3 id="toc-bz2n-how-to-use-the-brush-panel-settings-for-customizing-tattoo-brushes"&gt;How to use the Brush Panel settings for customizing tattoo brushes&lt;/h3&gt;
  2763. &lt;p&gt;To create tattoo brushes that feel natural and perform like real tattoo machines, you’ll need to experiment with Procreate’s &lt;strong&gt;Brush Studio&lt;/strong&gt; to fine-tune every aspect of a brush.&lt;/p&gt;
  2764. &lt;table&gt;
  2765. &lt;tbody&gt;
  2766. &lt;tr&gt;
  2767. &lt;td&gt;&lt;strong&gt;Stroke Path&lt;/strong&gt;&lt;/td&gt;
  2768. &lt;td&gt;
  2769. &lt;ul&gt;
  2770. &lt;li&gt;
  2771. &lt;strong&gt;Spacing&lt;/strong&gt;: Lower spacing creates smooth, continuous lines—important for linework.&lt;/li&gt;
  2772. &lt;li&gt;
  2773. &lt;strong&gt;StreamLine&lt;/strong&gt; (under &lt;strong&gt;Stabilization&lt;/strong&gt;): Helps smooth out shaky strokes for clean outlines.&lt;/li&gt;
  2774. &lt;/ul&gt;
  2775. &lt;/td&gt;
  2776. &lt;/tr&gt;
  2777. &lt;tr&gt;
  2778. &lt;td&gt;&lt;strong&gt;Shape&lt;/strong&gt;&lt;/td&gt;
  2779. &lt;td&gt;
  2780. &lt;ul&gt;
  2781. &lt;li&gt;Use custom shape sources that resemble actual tattoo needles or dotwork textures.&lt;/li&gt;
  2782. &lt;/ul&gt;
  2783. &lt;/td&gt;
  2784. &lt;/tr&gt;
  2785. &lt;tr&gt;
  2786. &lt;td&gt;&lt;strong&gt;Grain&lt;/strong&gt;&lt;/td&gt;
  2787. &lt;td&gt;
  2788. &lt;ul&gt;
  2789. &lt;li&gt;For textured shading, adjust grain movement (choose between &lt;strong&gt;Moving&lt;/strong&gt; or &lt;strong&gt;Textured&lt;/strong&gt;) to create realistic fill styles.&lt;/li&gt;
  2790. &lt;li&gt;Modify &lt;strong&gt;Scale &lt;/strong&gt;and &lt;strong&gt;Zoom&lt;/strong&gt; to match the type of shading style (pepper shading, stippling, etc.).&lt;/li&gt;
  2791. &lt;/ul&gt;
  2792. &lt;/td&gt;
  2793. &lt;/tr&gt;
  2794. &lt;tr&gt;
  2795. &lt;td&gt;&lt;strong&gt;Rendering&lt;/strong&gt;&lt;/td&gt;
  2796. &lt;td&gt;
  2797. &lt;ul&gt;
  2798. &lt;li&gt;Set to &lt;strong&gt;Intense Blending &lt;/strong&gt;or &lt;strong&gt;Uniformed Blending&lt;/strong&gt; for smoother tonal transitions in shader brushes.&lt;/li&gt;
  2799. &lt;/ul&gt;
  2800. &lt;/td&gt;
  2801. &lt;/tr&gt;
  2802. &lt;tr&gt;
  2803. &lt;td&gt;&lt;strong&gt;Wet Mix&lt;/strong&gt;&lt;/td&gt;
  2804. &lt;td&gt;
  2805. &lt;ul&gt;
  2806. &lt;li&gt;Often disabled for linework. It's barely used for tattooing but can help in blending shades.&lt;/li&gt;
  2807. &lt;/ul&gt;
  2808. &lt;/td&gt;
  2809. &lt;/tr&gt;
  2810. &lt;tr&gt;
  2811. &lt;td&gt;&lt;strong&gt;Color Dynamics&lt;/strong&gt;&lt;/td&gt;
  2812. &lt;td&gt;
  2813. &lt;ul&gt;
  2814. &lt;li&gt;Typically off for traditional black and gray tattoo design. It can be useful when working with color mockups.&lt;/li&gt;
  2815. &lt;/ul&gt;
  2816. &lt;/td&gt;
  2817. &lt;/tr&gt;
  2818. &lt;tr&gt;
  2819. &lt;td&gt;&lt;strong&gt;Apple Pencil&lt;/strong&gt;&lt;/td&gt;
  2820. &lt;td&gt;
  2821. &lt;ul&gt;
  2822. &lt;li&gt;
  2823. &lt;strong&gt;Pressure&lt;/strong&gt;: Controls how the brush size reacts to pressure. This affects the size and opacity settings of your brush—important for shading and line variation.&lt;/li&gt;
  2824. &lt;li&gt;
  2825. &lt;strong&gt;Tilt&lt;/strong&gt;: For brushes simulating magnums or shader needles, you can control how the brush behaves when tilted.&lt;/li&gt;
  2826. &lt;/ul&gt;
  2827. &lt;/td&gt;
  2828. &lt;/tr&gt;
  2829. &lt;tr&gt;
  2830. &lt;td&gt;&lt;strong&gt;Properties&lt;/strong&gt;&lt;/td&gt;
  2831. &lt;td&gt;
  2832. &lt;ul&gt;
  2833. &lt;li&gt;
  2834. &lt;strong&gt;Size &amp;amp; Opacity Limits&lt;/strong&gt;: Control min/max ranges for consistency.&lt;/li&gt;
  2835. &lt;li&gt;
  2836. &lt;strong&gt;Stamp Preview&lt;/strong&gt;: This helps see what a shape-based brush (like dot-work) will look like. Turn on when using stamp brushes.&lt;/li&gt;
  2837. &lt;/ul&gt;
  2838. &lt;/td&gt;
  2839. &lt;/tr&gt;
  2840. &lt;/tbody&gt;
  2841. &lt;/table&gt;
  2842. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_15_0A.jpg" alt="Brush customization from Brush panel options menu" loading="lazy" width="870px" height="657px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_15_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_15_0A.jpg" alt="Brush customization from Brush panel options menu" loading="lazy" width="650px" height="492px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_15_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_15_0A.jpg" alt="Brush customization from Brush panel options menu" loading="lazy" width="380px" height="290px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_15_0A.jpg 2x"&gt;&lt;/figure&gt;
  2843. &lt;h3 id="toc-u0r7-how-to-customize-procreate-brushes-for-tattooing"&gt;How to customize default Procreate brushes for tattooing&lt;/h3&gt;
  2844. &lt;p&gt;Let’s put together a few Procreate tattoo brushes that replicate the feel of tattoo machines using Procreate’s built-in brush sets. For even more variety, consider downloading Procreate tattoo brushes from &lt;a href="https://elements.envato.com/add-ons/brushes/tattoo" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;Envato&lt;/a&gt;. As you build your custom brush set, be sure to keep the following characteristics in mind:&lt;/p&gt;
  2845. &lt;ul&gt;
  2846. &lt;li&gt;
  2847. &lt;strong&gt;Linework &lt;/strong&gt;Brush: Crisp, minimal spacing, high stabilization, no grain.&lt;/li&gt;
  2848. &lt;li&gt;
  2849. &lt;strong&gt;Dotwork&lt;/strong&gt; Brush: Custom shape and jitter, textured grain.&lt;/li&gt;
  2850. &lt;li&gt;
  2851. &lt;strong&gt;Whip Shading &lt;/strong&gt;Brush: Tapered stroke, strong pressure curve.&lt;/li&gt;
  2852. &lt;li&gt;
  2853. &lt;strong&gt;Soft Shading&lt;/strong&gt; Brush: Large, low-opacity, smooth blending.&lt;/li&gt;
  2854. &lt;/ul&gt;
  2855. &lt;h4 id="toc-5klq-3-liner-brushes-from-default-procreate-sets"&gt;Liner brushes&lt;/h4&gt;
  2856. &lt;ol&gt;
  2857. &lt;li&gt;
  2858. &lt;strong&gt;Technical Pen &lt;/strong&gt;(&lt;strong&gt;Inking folder&lt;/strong&gt;) Great for clean outlines. Set &lt;strong&gt;Stabilization &amp;gt;&lt;/strong&gt; &lt;strong&gt;StreamLine&lt;/strong&gt; &lt;strong&gt;Amount&lt;/strong&gt; to &lt;strong&gt;56% &lt;/strong&gt;for steadier lines. Then adjust &lt;strong&gt;Apple Pencil &amp;gt; Size &amp;gt; Max.&lt;/strong&gt;
  2859. &lt;/li&gt;
  2860. &lt;li&gt;
  2861. &lt;strong&gt;Fine Tip &lt;/strong&gt;(&lt;strong&gt;Inking&lt;/strong&gt; folder) Mimics a 3RL (3 round liner). Perfect for fine details and small text. Lower the brush size for extra control.&lt;/li&gt;
  2862. &lt;li&gt;
  2863. &lt;strong&gt;Monoline&lt;/strong&gt; (&lt;strong&gt;Calligraphy&lt;/strong&gt; folder)  produces a consistent line width, ideal for stencils or bold traditional work. Customize &lt;strong&gt;Pressure&lt;/strong&gt; and &lt;strong&gt;StreamLine&lt;/strong&gt; to suit your hand.&lt;/li&gt;
  2864. &lt;/ol&gt;
  2865. &lt;h4 id="toc-28bf-4-shading-brushes-from-default-procreate-sets"&gt;Shading brushes&lt;/h4&gt;
  2866. &lt;ol&gt;
  2867. &lt;li&gt;
  2868. &lt;strong&gt;Soft Blend &lt;/strong&gt;(&lt;strong&gt;Airbrushing &lt;/strong&gt;folder). Great for smooth black-and-gray shading, especially on low opacity. Adjust pressure sensitivity and opacity for soft gradients.&lt;/li&gt;
  2869. &lt;li&gt;
  2870. &lt;strong&gt;Medium Brush&lt;/strong&gt; (&lt;strong&gt;Airbrushing&lt;/strong&gt; folder). Less diffused than Soft Brush, it gives more control while still smooth. Suitable for filling and soft whip-style shading.&lt;/li&gt;
  2871. &lt;li&gt;
  2872. &lt;strong&gt;Flicks&lt;/strong&gt; (&lt;strong&gt;Spraypaints&lt;/strong&gt; folder). Dot scatter for pepper shading. Use at low opacity for subtle texture buildup.&lt;/li&gt;
  2873. &lt;li&gt;
  2874. &lt;strong&gt;Peppermint &lt;/strong&gt;brush (&lt;strong&gt;Sketching&lt;/strong&gt; folder) for stipple shading: Try modifying the (&lt;strong&gt;Stroke path  &amp;gt; Spacing&lt;/strong&gt;: 25%, &lt;strong&gt;Jitter&lt;/strong&gt;: 45%, &lt;strong&gt;Falloff&lt;/strong&gt; 22%, &lt;strong&gt;Rendering &amp;gt; Blend Mode &amp;gt; Multiply&lt;/strong&gt;).&lt;/li&gt;
  2875. &lt;/ol&gt;
  2876. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_16_0A.jpg" alt="Monoline brush setting through brush panel" loading="lazy" width="870px" height="506px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_16_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_16_0A.jpg" alt="Monoline brush setting through brush panel" loading="lazy" width="650px" height="380px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_16_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_16_0A.jpg" alt="Monoline brush setting through brush panel" loading="lazy" width="380px" height="226px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_16_0A.jpg 2x"&gt;&lt;/figure&gt;
  2877. &lt;h2 id="toc-emcs-color-theory-application-bring-your-tattoo-designs-to-life"&gt;
  2878. &lt;span class="sectionnum"&gt;10.&lt;/span&gt; Color theory &amp;amp; application: Bring your tattoo designs to life&lt;/h2&gt;
  2879. &lt;h3 id="toc-50x8-how-to-use-procreates-color-wheel-as-your-digital-ink-station"&gt;How to use Procreate's Color Panel as your digital ink station&lt;/h3&gt;
  2880. &lt;p&gt;Consider the color wheel as your virtual ink cap setup or color mixing station. It's a powerful tool once you know how to use it. Here are a couple of quick tips:&lt;/p&gt;
  2881. &lt;ul&gt;
  2882. &lt;li&gt;
  2883. &lt;strong&gt;Double-tap &lt;/strong&gt;a color on the color disc to snap it to the nearest pure version, like pure black, pure white, or a fully saturated hue.&lt;/li&gt;
  2884. &lt;li&gt;To grab a color from your canvas, tap and hold on the area you want, and then release. The &lt;strong&gt;Eyedropper Tool &lt;/strong&gt;will pick it up instantly.&lt;/li&gt;
  2885. &lt;/ul&gt;
  2886. &lt;p&gt;Color theory in tattooing isn't about rules; it's about strategy. Whether you're working in full color or black and grey, learn how to get the most out of your digital palette and create tattoos that stand the test of time. Use the &lt;strong&gt;Color Wheel &lt;/strong&gt;to build harmony in your tattoo designs:&lt;/p&gt;
  2887. &lt;ul&gt;
  2888. &lt;li&gt;
  2889. &lt;strong&gt;Complementary Colors&lt;/strong&gt; (opposites on the wheel): Great for bold contrast (e.g. blue/orange, red/green)&lt;/li&gt;
  2890. &lt;li&gt;
  2891. &lt;strong&gt;Analogous Colors &lt;/strong&gt;(next to each other): Perfect for smooth blends and realism (e.g. blue/teal/purple)&lt;/li&gt;
  2892. &lt;li&gt;
  2893. &lt;strong&gt;Triadic Colors&lt;/strong&gt; (three evenly spaced): Balanced and eye-catching (e.g. red/yellow/blue)&lt;/li&gt;
  2894. &lt;/ul&gt;
  2895. &lt;p style="text-align:-webkit-match-parent"&gt;In Procreate, you can easily use &lt;strong&gt;Reference&lt;/strong&gt; layers or the &lt;strong&gt;Color Harmony&lt;/strong&gt; tab (under the color panel) to explore these combos.&lt;/p&gt;
  2896. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_17_00.jpg" alt="Using Harmony in color panel to choose colors" loading="lazy" width="870px" height="657px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_17_00.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_17_00.jpg" alt="Using Harmony in color panel to choose colors" loading="lazy" width="650px" height="492px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_17_00.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_17_00.jpg" alt="Using Harmony in color panel to choose colors" loading="lazy" width="380px" height="290px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_17_00.jpg 2x"&gt;&lt;/figure&gt;
  2897. &lt;h3 id="toc-36tl-how-to-build-custom-color-palettes"&gt;How to build custom color palettes&lt;/h3&gt;
  2898. &lt;p&gt;You can start by building a realistic color palette that reflects your ink and skin colors. This will help you stay consistent and speed up your process. Tap the &lt;strong&gt;Color &lt;/strong&gt;icon, and then select &lt;strong&gt;Palettes&lt;/strong&gt; at the bottom. Create separate palettes for different tattoo styles or skins. Or you can head to your favorite ink brand website and see if they offer a free digital palette of their inks.&lt;/p&gt;
  2899. &lt;ul&gt;
  2900. &lt;li&gt;
  2901. &lt;strong&gt;Traditional&lt;/strong&gt;: Bold primaries with high contrast (bright reds, deep blues, golden yellows).&lt;/li&gt;
  2902. &lt;li&gt;
  2903. &lt;strong&gt;Realism&lt;/strong&gt;: Muted earth tones and skin-appropriate colors.&lt;/li&gt;
  2904. &lt;li&gt;
  2905. &lt;strong&gt;Neo-Traditional&lt;/strong&gt;: Deep, rich combos. Saturated but sophisticated color combinations.&lt;/li&gt;
  2906. &lt;li&gt;
  2907. &lt;strong&gt;Black &amp;amp; Grey&lt;/strong&gt;: Various range of greys from &lt;strong&gt;10%&lt;/strong&gt; to &lt;strong&gt;90%&lt;/strong&gt; opacity.&lt;/li&gt;
  2908. &lt;/ul&gt;
  2909. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_17_0A.jpg" alt="save tattoo color palettes under color " loading="lazy" width="870px" height="657px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_17_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_17_0A.jpg" alt="save tattoo color palettes under color " loading="lazy" width="650px" height="492px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_17_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_17_0A.jpg" alt="save tattoo color palettes under color " loading="lazy" width="380px" height="290px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_17_0A.jpg 2x"&gt;&lt;/figure&gt;
  2910. &lt;h3 id="toc-nbnj-how-to-check-how-color-looks-on-skin"&gt;How to check how the color looks on skin&lt;/h3&gt;
  2911. &lt;p&gt;What you see on screen isn't always what ends up on the skin. Bright colors in Procreate can look amazing digitally, but remember that tattoo ink heals softer and slightly darker, especially over time. Here's how to check color digitally:&lt;/p&gt;
  2912. &lt;ul&gt;
  2913. &lt;li&gt;
  2914. &lt;strong&gt;Color palette saturation&lt;/strong&gt;: Instead of using fully saturated colors, dial it back to&lt;strong&gt; 70–80%&lt;/strong&gt;. This gives you a more realistic preview of how the tattoo will look once healed. That's because ink settles under the skin, not on top, so it mixes with skin tones and loses a bit of that vibrancy. Designing with a slightly muted tone helps your final tattoo look more like your original concept.&lt;/li&gt;
  2915. &lt;li&gt;
  2916. &lt;strong&gt;Neutral background&lt;/strong&gt;: Always view your design on a neutral background, not pure white—it gives you a more realistic sense of how it'll look on actual skin. Lighter skin might hold bright colors better, while darker skin tones absorb more light, so some hues might not show as clearly.&lt;/li&gt;
  2917. &lt;li&gt;
  2918. &lt;strong&gt;Skin tone matters&lt;/strong&gt;: Use reference photos of your client and adjust your palette accordingly. Drop your design onto a photo of the client's skin. Set the layer to &lt;strong&gt;Multiply&lt;/strong&gt; to preview how colors interact with their skin color, accounting for the natural yellowing effect that occurs as tattoos age.&lt;/li&gt;
  2919. &lt;li&gt;
  2920. &lt;strong&gt;Aging simulation&lt;/strong&gt;: Duplicate your design, and then desaturate it slightly. Reduce the&lt;strong&gt; Saturation &lt;/strong&gt;by &lt;strong&gt;30%&lt;/strong&gt; to mimic faded ink. Add a warm tint (A&lt;strong&gt;djustments &amp;gt; Hue/Saturation&lt;/strong&gt;) to mimic how ink fades over time.&lt;/li&gt;
  2921. &lt;li&gt;
  2922. &lt;strong&gt;ColorDrop&lt;/strong&gt;: Test how reds/yellows pop on darker skin (adjust &lt;strong&gt;Saturation&lt;/strong&gt; +&lt;strong&gt;10%&lt;/strong&gt;).&lt;/li&gt;
  2923. &lt;/ul&gt;
  2924. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_18_0A.jpg" alt="reduce saturation to mimic aging tattoo colors" loading="lazy" width="870px" height="657px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_18_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_18_0A.jpg" alt="reduce saturation to mimic aging tattoo colors" loading="lazy" width="650px" height="492px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_18_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_18_0A.jpg" alt="reduce saturation to mimic aging tattoo colors" loading="lazy" width="380px" height="290px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_18_0A.jpg 2x"&gt;&lt;/figure&gt;
  2925. &lt;h2 id="toc-0lof-how-to-add-text-in-procreate"&gt;
  2926. &lt;span class="sectionnum"&gt;11.&lt;/span&gt; How to add tattoo fonts for Procreate&lt;/h2&gt;
  2927. &lt;h3 id="toc-y7vh-install-fonts"&gt;Install Procreate tattoo fonts&lt;/h3&gt;
  2928. &lt;p&gt;Whether you mock up a client's design or create stencil-ready lettering, adding text in Procreate is a great way to lay out the names, dates, quotes, or script-style tattoos.&lt;/p&gt;
  2929. &lt;p&gt;If you don't have any tattoo fonts for Procreate, head over to &lt;a class="editor-rtfLink" href="https://elements.envato.com/" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;Envato&lt;/a&gt; and browse the collection of &lt;a href="https://elements.envato.com/fonts/tattoo" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;Procreate tattoo fonts&lt;/a&gt;. Once you find the fonts you like, download them and add them to Procreate's &lt;strong&gt;Fonts &lt;/strong&gt;folder. Here's a detailed tutorial on &lt;a href="https://design.tutsplus.com/tutorials/how-to-install-and-use-fonts-in-procreate--cms-35132" target="_blank" rel="noopener"&gt;how to install fonts in Procreate&lt;/a&gt;.&lt;/p&gt;
  2930. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_19_0A.jpg" alt="Download tattoo fonts from envato elements" loading="lazy" width="870px" height="434px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_19_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_19_0A.jpg" alt="Download tattoo fonts from envato elements" loading="lazy" width="650px" height="327px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_19_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_19_0A.jpg" alt="Download tattoo fonts from envato elements" loading="lazy" width="380px" height="195px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_19_0A.jpg 2x"&gt;&lt;/figure&gt;
  2931. &lt;h3 id="toc-ustg-step-by-step-adding-text-in-procreate"&gt;Step-by-step instructions for adding text in Procreate&lt;/h3&gt;
  2932. &lt;ol&gt;
  2933. &lt;li&gt;Start a new canvas or open your existing design.&lt;/li&gt;
  2934. &lt;li&gt;Access the &lt;strong&gt;Text Tool&lt;/strong&gt;: Go to &lt;strong&gt;Actions&lt;/strong&gt; &lt;strong&gt;&amp;gt; Add &amp;gt; Add Text&lt;/strong&gt; – a default text box will appear on your canvas.&lt;/li&gt;
  2935. &lt;li&gt;Once it's up, type in your text. Tap the text box to open the &lt;strong&gt;Text Entry Companion&lt;/strong&gt;. &lt;/li&gt;
  2936. &lt;li&gt;For further customization, tap on &lt;strong&gt;Text Entry Companion &lt;/strong&gt;to access the &lt;strong&gt;Edit Style panel&lt;/strong&gt;.&lt;/li&gt;
  2937. &lt;/ol&gt;
  2938. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_20_0A.jpg" alt="adding text on procreate and using the edit style companion" loading="lazy" width="870px" height="551px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_20_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_20_0A.jpg" alt="adding text on procreate and using the edit style companion" loading="lazy" width="650px" height="414px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_20_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_20_0A.jpg" alt="adding text on procreate and using the edit style companion" loading="lazy" width="380px" height="245px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_20_0A.jpg 2x"&gt;&lt;/figure&gt;
  2939. &lt;h3 id="toc-kcyk-how-to-customize-text-from-the-edit-style-panel"&gt;How to customize text from Procreate's Edit Style panel&lt;/h3&gt;
  2940. &lt;p&gt;The &lt;strong&gt;Edit Style&lt;/strong&gt; panel offers options to change the font, style, kerning, tracking, baseline, opacity, and alignment. Here you can change:&lt;/p&gt;
  2941. &lt;ul&gt;
  2942. &lt;li&gt;
  2943. &lt;strong&gt;Font&lt;/strong&gt;: Choose from built-in fonts or add your own.&lt;/li&gt;
  2944. &lt;li&gt;
  2945. &lt;strong&gt;Size&lt;/strong&gt;: Adjust how large the text appears.&lt;/li&gt;
  2946. &lt;li&gt;
  2947. &lt;strong&gt;Tracking&lt;/strong&gt;: Change the spacing between letters.&lt;/li&gt;
  2948. &lt;li&gt;
  2949. &lt;strong&gt;Leading&lt;/strong&gt;: Adjust the spacing between lines.&lt;/li&gt;
  2950. &lt;li&gt;
  2951. &lt;strong&gt;Alignment&lt;/strong&gt;: Left, center, or right-aligned.&lt;/li&gt;
  2952. &lt;/ul&gt;
  2953. &lt;p&gt;Some tattoo text design tips: &lt;/p&gt;
  2954. &lt;ul&gt;
  2955. &lt;li&gt;Use bold&lt;strong&gt; &lt;/strong&gt;tattoo&lt;strong&gt; &lt;/strong&gt;fonts for legibility.&lt;/li&gt;
  2956. &lt;li&gt;Customize letterforms with Procreate's brushes to make the text unique or stylized. Try script or calligraphy brushes to freehand your own lettering.&lt;/li&gt;
  2957. &lt;li&gt;Always check readability at a smaller size—clients can't zoom in on healed ink.&lt;/li&gt;
  2958. &lt;/ul&gt;
  2959. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_21_0A.jpg" alt="customize text in Procreate using edit style panel" loading="lazy" width="870px" height="657px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_21_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_21_0A.jpg" alt="customize text in Procreate using edit style panel" loading="lazy" width="650px" height="492px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_21_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_21_0A.jpg" alt="customize text in Procreate using edit style panel" loading="lazy" width="380px" height="290px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_21_0A.jpg 2x"&gt;&lt;/figure&gt;
  2960. &lt;h3 id="toc-nx84-how-to-further-customize-text-shapes"&gt;How to further customize text shapes&lt;/h3&gt;
  2961. &lt;p&gt;Once you're happy with your text layout, you can convert the text and transform it into editable shapes. Here's how:&lt;/p&gt;
  2962. &lt;ul&gt;
  2963. &lt;li&gt;Tap the text layer and choose &lt;strong&gt;Rasterize&lt;/strong&gt; (now it's no longer editable text).&lt;/li&gt;
  2964. &lt;li&gt;Use the &lt;strong&gt;Selection&lt;/strong&gt; or &lt;strong&gt;Transform Tool &lt;/strong&gt;to reshape or &lt;a href="https://design.tutsplus.com/tutorials/how-to-curve-text-in-procreate--cms-39093" target="_blank" rel="noopener"&gt;warp the text&lt;/a&gt;.&lt;/li&gt;
  2965. &lt;li&gt;You can also use brushes to draw over or enhance the text manually.&lt;/li&gt;
  2966. &lt;/ul&gt;
  2967. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_22_0A.jpg" alt="customize procreate text using edit warp transform tool" loading="lazy" width="870px" height="657px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_22_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_22_0A.jpg" alt="customize procreate text using edit warp transform tool" loading="lazy" width="650px" height="492px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_22_0A.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_22_0A.jpg" alt="customize procreate text using edit warp transform tool" loading="lazy" width="380px" height="290px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109190/image-upload/tut__Guide_How_to_Use_Procreate_Tattoo_Artists_22_0A.jpg 2x"&gt;&lt;/figure&gt;
  2968. &lt;h2 id="toc-p7iy-turn-on-your-ipad"&gt;Now you know how to use Procreate for tattoos&lt;/h2&gt;
  2969. &lt;p&gt;Right from your iPad, Procreate can be your all-in-one tattoo design studio—sketchbook, stencil maker, and creative hub. Now that you know how to set up Procreate specifically for tattooing, including organizing your gallery, brushes, layers, and stencil templates, I hope these beginner-friendly tips will help you work more efficiently and create cleaner designs.&lt;/p&gt;
  2970. &lt;p&gt;Start now! Turn on your iPad and use Procreate tattoo brushes to make some flash sheets. And if you're looking for more tips, check out &lt;a class="editor-rtfLink" href="https://design.tutsplus.com/articles/a-to-z-of-procreate-tips-tricks-and-hacks--cms-38125" target="_blank" rel="noopener"&gt;A to Z of Procreate: Tips, Tricks, and Hacks!&lt;/a&gt; or some of these tutorials:&lt;/p&gt;
  2971. &lt;ul class="roundup-block__contents posts--half-width roundup-block--list"&gt;
  2972. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/articles/44-best-procreate-fonts-calligraphy-tattoo-comic-and-more--cms-36592"&gt;&lt;div class="roundup-block__content-container"&gt;
  2973. &lt;div class="roundup-block__preview"&gt;
  2974. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2659/posts/36592/preview_image/newthumb_Procreate_fonts.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2659/posts/36592/preview_image/newthumb_Procreate_fonts.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2659/posts/36592/preview_image/newthumb_Procreate_fonts.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2659/posts/36592/preview_image/newthumb_Procreate_fonts.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2659/posts/36592/preview_image/newthumb_Procreate_fonts.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2659/posts/36592/preview_image/newthumb_Procreate_fonts.jpg 2x"&gt;
  2975. &lt;/div&gt;
  2976. &lt;div class="roundup-block__content-meta"&gt;
  2977. &lt;div class="roundup-block__content-title"&gt;43 Best Procreate Fonts (Calligraphy, Tattoo, Comic, and More!)&lt;/div&gt;
  2978. &lt;div class="roundup-block__author-info"&gt;
  2979. &lt;div class="roundup-block__author-profile-image"&gt;
  2980. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg 2x"&gt;
  2981. &lt;/div&gt;
  2982. &lt;div class="roundup-block__author-meta"&gt;
  2983. &lt;div class="roundup-block__author-name"&gt;Daisy E.&lt;/div&gt;
  2984. &lt;div class="roundup-block__published-date"&gt;28 Jan 2024&lt;/div&gt;
  2985. &lt;/div&gt;
  2986. &lt;/div&gt;
  2987. &lt;/div&gt;
  2988. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  2989. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-install-and-use-procreate-brushes--cms-33892"&gt;&lt;div class="roundup-block__content-container"&gt;
  2990. &lt;div class="roundup-block__preview"&gt;
  2991. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2092/posts/33892/preview_image/thumbnail.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2092/posts/33892/preview_image/thumbnail.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2092/posts/33892/preview_image/thumbnail.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2092/posts/33892/preview_image/thumbnail.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2092/posts/33892/preview_image/thumbnail.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2092/posts/33892/preview_image/thumbnail.jpg 2x"&gt;
  2992. &lt;/div&gt;
  2993. &lt;div class="roundup-block__content-meta"&gt;
  2994. &lt;div class="roundup-block__content-title"&gt;How to Install and Use Procreate Brushes&lt;/div&gt;
  2995. &lt;div class="roundup-block__author-info"&gt;
  2996. &lt;div class="roundup-block__author-profile-image"&gt;
  2997. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg 2x"&gt;
  2998. &lt;/div&gt;
  2999. &lt;div class="roundup-block__author-meta"&gt;
  3000. &lt;div class="roundup-block__author-name"&gt;Daisy E.&lt;/div&gt;
  3001. &lt;div class="roundup-block__published-date"&gt;26 Dec 2020&lt;/div&gt;
  3002. &lt;/div&gt;
  3003. &lt;/div&gt;
  3004. &lt;/div&gt;
  3005. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  3006. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-create-and-customize-procreate-brushes--cms-31889"&gt;&lt;div class="roundup-block__content-container"&gt;
  3007. &lt;div class="roundup-block__preview"&gt;
  3008. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2092/posts/31889/preview_image/thumbnail.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2092/posts/31889/preview_image/thumbnail.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2092/posts/31889/preview_image/thumbnail.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2092/posts/31889/preview_image/thumbnail.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2092/posts/31889/preview_image/thumbnail.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2092/posts/31889/preview_image/thumbnail.jpg 2x"&gt;
  3009. &lt;/div&gt;
  3010. &lt;div class="roundup-block__content-meta"&gt;
  3011. &lt;div class="roundup-block__content-title"&gt;How to Create Procreate Custom Brushes&lt;/div&gt;
  3012. &lt;div class="roundup-block__author-info"&gt;
  3013. &lt;div class="roundup-block__author-profile-image"&gt;
  3014. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg 2x"&gt;
  3015. &lt;/div&gt;
  3016. &lt;div class="roundup-block__author-meta"&gt;
  3017. &lt;div class="roundup-block__author-name"&gt;Daisy E.&lt;/div&gt;
  3018. &lt;div class="roundup-block__published-date"&gt;09 Jan 2024&lt;/div&gt;
  3019. &lt;/div&gt;
  3020. &lt;/div&gt;
  3021. &lt;/div&gt;
  3022. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  3023. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-use-photoshop-brushes-in-procreate--cms-34540"&gt;&lt;div class="roundup-block__content-container"&gt;
  3024. &lt;div class="roundup-block__preview"&gt;
  3025. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2092/posts/34540/preview_image/thumb.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2092/posts/34540/preview_image/thumb.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2092/posts/34540/preview_image/thumb.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2092/posts/34540/preview_image/thumb.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2092/posts/34540/preview_image/thumb.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2092/posts/34540/preview_image/thumb.jpg 2x"&gt;
  3026. &lt;/div&gt;
  3027. &lt;div class="roundup-block__content-meta"&gt;
  3028. &lt;div class="roundup-block__content-title"&gt;How to Use Photoshop Brushes in Procreate&lt;/div&gt;
  3029. &lt;div class="roundup-block__author-info"&gt;
  3030. &lt;div class="roundup-block__author-profile-image"&gt;
  3031. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg 2x"&gt;
  3032. &lt;/div&gt;
  3033. &lt;div class="roundup-block__author-meta"&gt;
  3034. &lt;div class="roundup-block__author-name"&gt;Daisy E.&lt;/div&gt;
  3035. &lt;div class="roundup-block__published-date"&gt;19 Jun 2023&lt;/div&gt;
  3036. &lt;/div&gt;
  3037. &lt;/div&gt;
  3038. &lt;/div&gt;
  3039. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  3040. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-use-procreate-layers--cms-31969"&gt;&lt;div class="roundup-block__content-container"&gt;
  3041. &lt;div class="roundup-block__preview"&gt;
  3042. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2092/posts/31969/preview_image/layers_thumb.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2092/posts/31969/preview_image/layers_thumb.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2092/posts/31969/preview_image/layers_thumb.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2092/posts/31969/preview_image/layers_thumb.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2092/posts/31969/preview_image/layers_thumb.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2092/posts/31969/preview_image/layers_thumb.jpg 2x"&gt;
  3043. &lt;/div&gt;
  3044. &lt;div class="roundup-block__content-meta"&gt;
  3045. &lt;div class="roundup-block__content-title"&gt;How to Use Procreate Layers&lt;/div&gt;
  3046. &lt;div class="roundup-block__author-info"&gt;
  3047. &lt;div class="roundup-block__author-profile-image"&gt;
  3048. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg 2x"&gt;
  3049. &lt;/div&gt;
  3050. &lt;div class="roundup-block__author-meta"&gt;
  3051. &lt;div class="roundup-block__author-name"&gt;Daisy E.&lt;/div&gt;
  3052. &lt;div class="roundup-block__published-date"&gt;24 May 2024&lt;/div&gt;
  3053. &lt;/div&gt;
  3054. &lt;/div&gt;
  3055. &lt;/div&gt;
  3056. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  3057. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-install-and-use-fonts-in-procreate--cms-35132"&gt;&lt;div class="roundup-block__content-container"&gt;
  3058. &lt;div class="roundup-block__preview"&gt;
  3059. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2092/posts/35132/preview_image/thumbnail2.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2092/posts/35132/preview_image/thumbnail2.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2092/posts/35132/preview_image/thumbnail2.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2092/posts/35132/preview_image/thumbnail2.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2092/posts/35132/preview_image/thumbnail2.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2092/posts/35132/preview_image/thumbnail2.jpg 2x"&gt;
  3060. &lt;/div&gt;
  3061. &lt;div class="roundup-block__content-meta"&gt;
  3062. &lt;div class="roundup-block__content-title"&gt;How to Install and Use Fonts in Procreate&lt;/div&gt;
  3063. &lt;div class="roundup-block__author-info"&gt;
  3064. &lt;div class="roundup-block__author-profile-image"&gt;
  3065. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2092/profiles/20609/profileImage/new_avatar.jpg 2x"&gt;
  3066. &lt;/div&gt;
  3067. &lt;div class="roundup-block__author-meta"&gt;
  3068. &lt;div class="roundup-block__author-name"&gt;Daisy E.&lt;/div&gt;
  3069. &lt;div class="roundup-block__published-date"&gt;23 Jun 2020&lt;/div&gt;
  3070. &lt;/div&gt;
  3071. &lt;/div&gt;
  3072. &lt;/div&gt;
  3073. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  3074. &lt;/ul&gt;
  3075. &lt;/div&gt;&lt;div class="mediafed_ad"&gt;&lt;img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/669438/s/109190/sc/4/mf.gif" width="1" /&gt;&lt;a href="http://da.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/109190/a2.htm"&gt;&lt;img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/109190/a2.img" /&gt;&lt;/a&gt;&lt;img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/109190/a2t.img" width="1" /&gt;&lt;/div&gt;</content>
  3076.    <published>2025-06-26 15:49:00 UTC</published>
  3077.    <updated>2025-06-26 15:49:00 UTC</updated>
  3078.    <author>
  3079.      <name>MissChatz</name>
  3080.    </author>
  3081.  </entry>
  3082.  <entry>
  3083.    <id>tag:tutsplus.com,2005:PostPresenter/cms-93666</id>
  3084.    <published>2023-01-04T14:50:12+00:00</published>
  3085.    <link rel="alternate" type="text/html" href="https://photography.tutsplus.com/articles/collage-animation-in-after-effects--cms-93666"/>
  3086.    <title>Collage animation in After Effects</title>
  3087.    <content type="html">&lt;style&gt;* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#ixx1{background-color:rgb(243, 245, 246);}#inplk1{background-color:rgb(243, 245, 246);}#iwmd06{background-color:rgb(250, 250, 250);}&lt;/style&gt;&lt;div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="im84"&gt;&lt;p&gt;Learn how to make a collage animation in After Effects with this step-by-step guide in just over an hour.&lt;/p&gt;&lt;/div&gt;&lt;div data-content-block-type="FullWidthSection" class="content-block content-block-fullwidthsection" id="ixx1"&gt;&lt;div class="full-width-section__content-container div-container" id="i2wm"&gt;&lt;div data-content-block-type="Grid" class="content-block content-block-grid" id="iogy"&gt;&lt;div class="element-row one-column-grid" id="i28x"&gt;&lt;div class="element-col" id="ite2"&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="irk0i"&gt;
  3088. &lt;figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=ldT8WkWYvDc&amp;amp;t=0"&gt;
  3089.            &lt;iframe src="https://www.youtube.com/embed/ldT8WkWYvDc?rel=0&amp;amp;start=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy" style="border-radius: 15px;"&gt;&lt;/iframe&gt;
  3090.          &lt;/figure&gt;
  3091. &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div data-content-block-type="TableOfContents" class="content-block content-block-tableofcontents" id="ismp7"&gt;
  3092. &lt;div data-content-block-type="ContentTextBlock" class="content-block content-block-contenttextblock" id="i3hf"&gt;&lt;p&gt;Jump to content in this section:&lt;/p&gt;&lt;/div&gt;
  3093. &lt;ul class="visual-toc-list toc-ordered-list div-container visual-toc-list__overflow visual-toc__thumbnail-theme visual-toc-list__unequal-split" start="0"&gt;
  3094.  
  3095.  
  3096. &lt;li class="toc-item-title visual-toc__item-thumbnail-theme"&gt;&lt;a href="#toc-ycxb-introduction" class="visual-toc__item-thumbnail-link"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/412/posts/93666/image-upload/1_introduction.jpg" alt="introduction" loading="lazy" class="visual-toc__item-thumbnail resized-image resized-image-desktop" width="870px" height="543px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/412/posts/93666/image-upload/1_introduction.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/412/posts/93666/image-upload/1_introduction.jpg" alt="introduction" loading="lazy" class="visual-toc__item-thumbnail resized-image resized-image-tablet" width="650px" height="408px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/412/posts/93666/image-upload/1_introduction.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/412/posts/93666/image-upload/1_introduction.jpg" alt="introduction" loading="lazy" class="visual-toc__item-thumbnail resized-image resized-image-mobile" width="380px" height="242px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/412/posts/93666/image-upload/1_introduction.jpg 2x"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;Introduction&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  3097. &lt;li class="toc-item-title visual-toc__item-thumbnail-theme"&gt;&lt;a href="#toc-1re2-advanced-editing" class="visual-toc__item-thumbnail-link"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/412/posts/93666/image-upload/2_getting_started.jpg" alt="getting started" loading="lazy" class="visual-toc__item-thumbnail resized-image resized-image-desktop" width="870px" height="543px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/412/posts/93666/image-upload/2_getting_started.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/412/posts/93666/image-upload/2_getting_started.jpg" alt="getting started" loading="lazy" class="visual-toc__item-thumbnail resized-image resized-image-tablet" width="650px" height="408px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/412/posts/93666/image-upload/2_getting_started.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/412/posts/93666/image-upload/2_getting_started.jpg" alt="getting started" loading="lazy" class="visual-toc__item-thumbnail resized-image resized-image-mobile" width="380px" height="242px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/412/posts/93666/image-upload/2_getting_started.jpg 2x"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;Getting started&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  3098. &lt;li class="toc-item-title visual-toc__item-thumbnail-theme"&gt;&lt;a href="#toc-kwxi-3-raw-log-and-color" class="visual-toc__item-thumbnail-link"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/412/posts/93666/image-upload/3_null_objects.jpg" alt="null objects" loading="lazy" class="visual-toc__item-thumbnail resized-image resized-image-desktop" width="870px" height="441px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/412/posts/93666/image-upload/3_null_objects.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/412/posts/93666/image-upload/3_null_objects.jpg" alt="null objects" loading="lazy" class="visual-toc__item-thumbnail resized-image resized-image-tablet" width="650px" height="332px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/412/posts/93666/image-upload/3_null_objects.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/412/posts/93666/image-upload/3_null_objects.jpg" alt="null objects" loading="lazy" class="visual-toc__item-thumbnail resized-image resized-image-mobile" width="380px" height="198px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/412/posts/93666/image-upload/3_null_objects.jpg 2x"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;Creating a background&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  3099. &lt;li class="toc-item-title visual-toc__item-thumbnail-theme"&gt;&lt;a href="#toc-b6mn-making-your-collage" class="visual-toc__item-thumbnail-link"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/412/posts/93666/image-upload/4_6_motion_tracking.jpg" alt="making your collage" loading="lazy" class="visual-toc__item-thumbnail resized-image resized-image-desktop" width="870px" height="505px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/412/posts/93666/image-upload/4_6_motion_tracking.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/412/posts/93666/image-upload/4_6_motion_tracking.jpg" alt="making your collage" loading="lazy" class="visual-toc__item-thumbnail resized-image resized-image-tablet" width="650px" height="379px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/412/posts/93666/image-upload/4_6_motion_tracking.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/412/posts/93666/image-upload/4_6_motion_tracking.jpg" alt="making your collage" loading="lazy" class="visual-toc__item-thumbnail resized-image resized-image-mobile" width="380px" height="225px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/412/posts/93666/image-upload/4_6_motion_tracking.jpg 2x"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;Making your collage&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  3100. &lt;li class="toc-item-title visual-toc__item-thumbnail-theme"&gt;&lt;a href="#toc-awr4-edit-enhancers" class="visual-toc__item-thumbnail-link"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/412/posts/93666/image-upload/5_1_call_to_action_end_screen.jpg" alt="call to action" loading="lazy" class="visual-toc__item-thumbnail resized-image resized-image-desktop" width="870px" height="505px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/412/posts/93666/image-upload/5_1_call_to_action_end_screen.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/412/posts/93666/image-upload/5_1_call_to_action_end_screen.jpg" alt="call to action" loading="lazy" class="visual-toc__item-thumbnail resized-image resized-image-tablet" width="650px" height="379px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/412/posts/93666/image-upload/5_1_call_to_action_end_screen.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/412/posts/93666/image-upload/5_1_call_to_action_end_screen.jpg" alt="call to action" loading="lazy" class="visual-toc__item-thumbnail resized-image resized-image-mobile" width="380px" height="225px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/412/posts/93666/image-upload/5_1_call_to_action_end_screen.jpg 2x"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;End screen CTA&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  3101. &lt;li class="toc-item-title visual-toc__item-thumbnail-theme"&gt;&lt;a href="#toc-jooi-conclusion" class="visual-toc__item-thumbnail-link"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/412/posts/93666/image-upload/6_1_foreground_elements.jpg" alt="adding elements and effects" loading="lazy" class="visual-toc__item-thumbnail resized-image resized-image-desktop" width="870px" height="449px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/412/posts/93666/image-upload/6_1_foreground_elements.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/412/posts/93666/image-upload/6_1_foreground_elements.jpg" alt="adding elements and effects" loading="lazy" class="visual-toc__item-thumbnail resized-image resized-image-tablet" width="650px" height="338px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/412/posts/93666/image-upload/6_1_foreground_elements.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/412/posts/93666/image-upload/6_1_foreground_elements.jpg" alt="adding elements and effects" loading="lazy" class="visual-toc__item-thumbnail resized-image resized-image-mobile" width="380px" height="202px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/412/posts/93666/image-upload/6_1_foreground_elements.jpg 2x"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;Adding elements and effects&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  3102. &lt;li class="toc-item-title visual-toc__item-thumbnail-theme"&gt;&lt;a href="#toc-l92l-adding-elements-and-effects" class="visual-toc__item-thumbnail-link"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/412/posts/93666/image-upload/collage_animation_in_after_effects_thumb.jpg" alt="finishing up" loading="lazy" class="visual-toc__item-thumbnail resized-image resized-image-desktop" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/412/posts/93666/image-upload/collage_animation_in_after_effects_thumb.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/412/posts/93666/image-upload/collage_animation_in_after_effects_thumb.jpg" alt="finishing up" loading="lazy" class="visual-toc__item-thumbnail resized-image resized-image-tablet" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/412/posts/93666/image-upload/collage_animation_in_after_effects_thumb.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/412/posts/93666/image-upload/collage_animation_in_after_effects_thumb.jpg" alt="finishing up" loading="lazy" class="visual-toc__item-thumbnail resized-image resized-image-mobile" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/412/posts/93666/image-upload/collage_animation_in_after_effects_thumb.jpg 2x"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;Finishing up&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  3103. &lt;/ul&gt;
  3104. &lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ifmg"&gt;
  3105. &lt;h2 id="toc-e86h-what-youll-learn-how-to-use-adobe-premiere-pro" data-scroll-position-target="chapter"&gt;What you'll learn: Making an After Effects collage animation&lt;/h2&gt;
  3106. &lt;ul&gt;
  3107. &lt;li&gt;How to use rotoscoping to create multiple layers&lt;/li&gt;
  3108. &lt;li&gt;How to create blending effects on animated collages&lt;/li&gt;
  3109. &lt;li&gt;How to motion track an animation in a collage&lt;/li&gt;
  3110. &lt;li&gt;How to add and use 3D assets for your collage animation&lt;/li&gt;
  3111. &lt;li&gt;How to use Keylight in After Effects&lt;/li&gt;
  3112. &lt;li&gt;How to make a stop motion style collage animation in After Effects&lt;/li&gt;
  3113. &lt;/ul&gt;
  3114. &lt;p&gt;Let's get to it!&lt;/p&gt;
  3115. &lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ig5n"&gt;
  3116. &lt;h2 id="toc-ycxb-introduction" data-scroll-position-target="chapter"&gt;
  3117. &lt;span class="sectionnum"&gt;1.&lt;/span&gt; Introduction&lt;/h2&gt;
  3118. &lt;h3 id="toc-trxn-1-what-youll-learn"&gt;1.1 &lt;span&gt;Recreate this collage effect!&lt;/span&gt;
  3119. &lt;/h3&gt;
  3120. &lt;p&gt;&lt;strong&gt;&lt;a href="https://www.youtube.com/watch?v=ldT8WkWYvDc" target="_blank" rel="noopener"&gt;Watch video lesson (1 min) ↗&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
  3121. &lt;p&gt;Check out the introduction of the video to see what we'll be doing. You'll learn the creative process to make a collage animation in After Effects.&lt;/p&gt;
  3122. &lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iy0h68"&gt;&lt;div class="callout-block"&gt;
  3123. &lt;span class="callout-icon callout-info"&gt;&lt;/span&gt;
  3124. &lt;div class="callout-message"&gt;To &lt;a href="https://elements.envato.com/collections/U9WKPSENJ6?utm_campaign=yt_tutsplus_ldT8WkWYvDc&amp;amp;utm_medium=referral&amp;amp;utm_source=youtube.com&amp;amp;utm_content=description" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;download all the items used in this course&lt;/a&gt;, head over to Envato. Once you're subscribed, you can use everything in the collection for this tutorial.&lt;/div&gt;
  3125. &lt;/div&gt;&lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ib2a4"&gt;
  3126. &lt;h2 id="toc-1re2-advanced-editing"&gt;
  3127. &lt;span class="sectionnum" style="font-size:32px;font-weight:600"&gt;2.&lt;/span&gt;&lt;span style="font-size:32px;font-weight:600"&gt; &lt;span&gt;Getting started&lt;/span&gt;&lt;/span&gt;
  3128. &lt;/h2&gt;
  3129. &lt;h3 id="toc-4ty1-1-source-patching-and-track-targeting"&gt;2.1 &lt;span&gt;Getting started in After Effects&lt;/span&gt;
  3130. &lt;/h3&gt;
  3131. &lt;p&gt;&lt;strong&gt;&lt;a href="https://www.youtube.com/watch?v=ldT8WkWYvDc&amp;amp;t=72s" target="_blank" rel="noopener"&gt;Watch video lesson (2 mins) ↗&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
  3132. &lt;p&gt;I'll show you how to set up your composition, including how to create some initial motion by adding a null object.&lt;/p&gt;
  3133. &lt;p&gt;These are the steps we'll follow to start our animated collage:&lt;/p&gt;
  3134. &lt;ol&gt;
  3135. &lt;li&gt;Start a new composition: 1920x1080, 25 fps, 16 seconds, and 20 frames (or make it match your audio track).&lt;/li&gt;
  3136. &lt;li&gt;Import your music track and place it on the timeline.&lt;/li&gt;
  3137. &lt;li&gt;Create the null object and rename it &lt;strong&gt;Movement&lt;/strong&gt;.&lt;/li&gt;
  3138. &lt;li&gt;Hit &lt;strong&gt;P&lt;/strong&gt; to bring up Position.&lt;/li&gt;
  3139. &lt;li&gt;Create keyframes from left to right to simulate horizontal scrolling.&lt;/li&gt;
  3140. &lt;/ol&gt;
  3141. &lt;div class="callout-block"&gt;
  3142. &lt;span class="callout-icon callout-tip"&gt;&lt;/span&gt;
  3143. &lt;div class="callout-message"&gt;This null will drive the entire After Effects collage animation. You won’t need to animate every layer individually.&lt;/div&gt;
  3144. &lt;/div&gt;
  3145. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/412/posts/93666/image-upload/2_getting_started.jpg" alt="Getting started with the After Effects collage animation." loading="lazy" width="870px" height="543px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/412/posts/93666/image-upload/2_getting_started.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/412/posts/93666/image-upload/2_getting_started.jpg" alt="Getting started with the After Effects collage animation." loading="lazy" width="650px" height="408px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/412/posts/93666/image-upload/2_getting_started.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/412/posts/93666/image-upload/2_getting_started.jpg" alt="Getting started with the After Effects collage animation." loading="lazy" width="380px" height="242px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/412/posts/93666/image-upload/2_getting_started.jpg 2x"&gt;&lt;/figure&gt;
  3146. &lt;/div&gt;&lt;div data-content-block-type="EmbedCourse" class="content-block content-block-embedcourse" id="ihmozx"&gt;
  3147. &lt;div class="embed-course-details__wrapper div-container"&gt;
  3148. &lt;div class="div-container"&gt;
  3149. &lt;div class="embed-course-summary__wrapper content-container"&gt;          &lt;div class="free-course__label"&gt;FREE&lt;/div&gt;
  3150.          &lt;div class="embed-course__duration"&gt;
  3151.            &lt;i class="fa fa-clock-o far fa-clock"&gt;&lt;/i&gt;
  3152.            &lt;span&gt;4 Minutes&lt;/span&gt;
  3153.          &lt;/div&gt;
  3154.                    &lt;/div&gt;
  3155. &lt;h2 id="toc-e0vf-is-that-really-it-after-effects-updates-adobe-max-2024"&gt;Is that really it? After Effects updates | Adobe MAX 2024&lt;/h2&gt;
  3156. &lt;/div&gt;
  3157. &lt;div class="embed-course__contents div-container"&gt;
  3158. &lt;div class="embed-course__description"&gt;&lt;p&gt;Get the scoop on everything that was announced for After Effects at Adobe MAX 2024.&lt;/p&gt;&lt;/div&gt;
  3159. &lt;ul class="embed-course__chapters-title-list"&gt;&lt;/ul&gt;
  3160. &lt;/div&gt;
  3161. &lt;/div&gt;
  3162. &lt;div class="embed-course-video__wrapper content-container"&gt;          &lt;figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=GCSTQoEV-vw&amp;amp;t=0"&gt;
  3163.            &lt;iframe src="https://www.youtube.com/embed/GCSTQoEV-vw?rel=0&amp;amp;start=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy" style="border-radius: 15px;"&gt;&lt;/iframe&gt;
  3164.          &lt;/figure&gt;          &lt;/div&gt;
  3165. &lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iqnwe"&gt;
  3166. &lt;h2 id="toc-kwxi-3-raw-log-and-color"&gt;
  3167. &lt;span class="sectionnum"&gt;3.&lt;/span&gt; Creating a background&lt;/h2&gt;
  3168. &lt;h3 id="toc-u3os-1-raw-footage"&gt;3.1 &lt;span&gt; Creating the base layer with null objects&lt;/span&gt;
  3169. &lt;/h3&gt;
  3170. &lt;p&gt;&lt;strong&gt;&lt;a href="https://www.youtube.com/watch?v=ldT8WkWYvDc&amp;amp;t=200s" target="_blank" rel="noopener"&gt;Watch video lesson (5 mins) ↗&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
  3171. &lt;figure class="post_image"&gt;&lt;/figure&gt;
  3172. &lt;p&gt;Let's explore how to add, resize, name, and order the elements we'll include in our collage animation.&lt;/p&gt;
  3173. &lt;p&gt;We'll use the movement &lt;strong&gt;Null Object&lt;/strong&gt; we made in the last lesson to get these items moving from right to left. We need to take the &lt;strong&gt;Pick Whip&lt;/strong&gt; and drag it over to the movement layer to create layers that are 'parented.'&lt;/p&gt;
  3174. &lt;p&gt;Don't worry, this sounds more complicated than it is:&lt;/p&gt;
  3175. &lt;ol&gt;
  3176. &lt;li&gt;Import your video and image assets from Envato.&lt;/li&gt;
  3177. &lt;li&gt;Resize to fit the frame vertically. Don’t worry about horizontal width yet.&lt;/li&gt;
  3178. &lt;li&gt;Rename your layers for clarity.&lt;/li&gt;
  3179. &lt;li&gt;Arrange them in the timeline based on desired sequence.&lt;/li&gt;
  3180. &lt;li&gt;Use the &lt;strong&gt;Pick Whip&lt;/strong&gt; or &lt;strong&gt;Parent&lt;/strong&gt; dropdown to link each asset to the &lt;strong&gt;Movement&lt;/strong&gt; null.&lt;/li&gt;
  3181. &lt;li&gt;Extend or stretch each footage as needed to cover the full scroll length.&lt;/li&gt;
  3182. &lt;/ol&gt;
  3183. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/412/posts/93666/image-upload/3_null_objects.jpg" alt="Collage animation in After Effects: null objects." loading="lazy" width="870px" height="441px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/412/posts/93666/image-upload/3_null_objects.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/412/posts/93666/image-upload/3_null_objects.jpg" alt="Collage animation in After Effects: null objects." loading="lazy" width="650px" height="332px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/412/posts/93666/image-upload/3_null_objects.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/412/posts/93666/image-upload/3_null_objects.jpg" alt="Collage animation in After Effects: null objects." loading="lazy" width="380px" height="198px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/412/posts/93666/image-upload/3_null_objects.jpg 2x"&gt;&lt;/figure&gt;
  3184. &lt;/div&gt;&lt;div data-content-block-type="EmbedCourse" class="content-block content-block-embedcourse" id="iiiwon"&gt;
  3185. &lt;div class="embed-course-details__wrapper div-container"&gt;
  3186. &lt;div class="div-container"&gt;
  3187. &lt;div class="embed-course-summary__wrapper content-container"&gt;          &lt;div class="free-course__label"&gt;FREE&lt;/div&gt;
  3188.          &lt;div class="embed-course__duration"&gt;
  3189.            &lt;i class="fa fa-clock-o far fa-clock"&gt;&lt;/i&gt;
  3190.            &lt;span&gt;38 Minutes&lt;/span&gt;
  3191.          &lt;/div&gt;
  3192.                    &lt;/div&gt;
  3193. &lt;h2 id="i3j3b5"&gt;How to animate text in After Effects | Kinetic typography&lt;/h2&gt;
  3194. &lt;/div&gt;
  3195. &lt;div class="embed-course__contents div-container"&gt;
  3196. &lt;div class="embed-course__description" id="i7iij"&gt;&lt;p&gt;Learn everything you need to creatively animate text in After Effects! Master &lt;a href="https://elements.envato.com/learn/fast-typography-templates" target="_self" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;kinetic typography&lt;/a&gt; and create a stunning sequence for your portfolio.&lt;/p&gt;&lt;/div&gt;
  3197. &lt;ul class="embed-course__chapters-title-list"&gt;&lt;/ul&gt;
  3198. &lt;/div&gt;
  3199. &lt;/div&gt;
  3200. &lt;div class="embed-course-video__wrapper content-container"&gt;          &lt;figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=lzQwR5Gaz1A&amp;amp;t=0"&gt;
  3201.            &lt;iframe src="https://www.youtube.com/embed/lzQwR5Gaz1A?rel=0&amp;amp;start=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy" style="border-radius: 15px;"&gt;&lt;/iframe&gt;
  3202.          &lt;/figure&gt;          &lt;/div&gt;
  3203. &lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i045mx"&gt;
  3204. &lt;h2 id="toc-b6mn-making-your-collage"&gt;
  3205. &lt;span class="sectionnum"&gt;4.&lt;/span&gt; Making your photo collage animation in After Effects &lt;/h2&gt;
  3206. &lt;h3 id="toc-0moh-1-beginning-the-collage-effect"&gt;4.1 &lt;span&gt; Beginning the collage effect&lt;/span&gt;
  3207. &lt;/h3&gt;
  3208. &lt;p&gt;&lt;strong&gt;&lt;a href="https://www.youtube.com/watch?v=ldT8WkWYvDc&amp;amp;t=488s" target="_blank" rel="noopener"&gt;Watch video lesson (3 mins) ↗&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
  3209. &lt;p&gt;Now, we'll get into creating the collage in After Effects​. I'll show you how to choose points in footage that work better to transition through to the next.&lt;/p&gt;
  3210. &lt;p&gt;We'll also explore how to adjust these points so that they flow seamlessly rather than looking like individual assets.&lt;/p&gt;
  3211. &lt;p&gt;Start by isolating a piece of footage for the animated collage. We'll start with the one of the man running.&lt;/p&gt;
  3212. &lt;ol&gt;
  3213. &lt;li&gt;Choose a moment in the clip that feels like a natural transition point.&lt;/li&gt;
  3214. &lt;li&gt;Pre-compose the layer to start adding effects to it.&lt;/li&gt;
  3215. &lt;/ol&gt;
  3216. &lt;p&gt;We want to make everything grayscale and separate the man from the background, so we'll do the following:&lt;/p&gt;
  3217. &lt;h4 id="toc-bvh6-inside-the-pre-comp"&gt;Inside the pre-comp:&lt;/h4&gt;
  3218. &lt;ol&gt;
  3219. &lt;li&gt;Desaturate using "&lt;strong&gt;Hue&lt;/strong&gt;/&lt;strong&gt;Saturation&lt;/strong&gt;."&lt;/li&gt;
  3220. &lt;li&gt;Use the &lt;strong&gt;Roto Brush Tool&lt;/strong&gt; to separate the subject from the background.&lt;/li&gt;
  3221. &lt;li&gt;Freeze the selection.&lt;/li&gt;
  3222. &lt;/ol&gt;
  3223. &lt;h4 id="toc-z03b-back-in-the-collage-comp"&gt;Back in the collage comp:&lt;/h4&gt;
  3224. &lt;ol&gt;
  3225. &lt;li&gt;Duplicate the pre-comp.&lt;/li&gt;
  3226. &lt;li&gt;Remove the roto from the background layer.&lt;/li&gt;
  3227. &lt;li&gt;Insert a colorful element (in this case, we're using a rocket) in between layers.&lt;/li&gt;
  3228. &lt;li&gt;Animate its position and add motion blur for a faster movement effect.&lt;/li&gt;
  3229. &lt;/ol&gt;
  3230. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/412/posts/93666/image-upload/4_1_beginning_collage_effect.jpg" alt="Collage animation in After Effects: beginning the collage." loading="lazy" width="870px" height="549px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/412/posts/93666/image-upload/4_1_beginning_collage_effect.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/412/posts/93666/image-upload/4_1_beginning_collage_effect.jpg" alt="Collage animation in After Effects: beginning the collage." loading="lazy" width="650px" height="412px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/412/posts/93666/image-upload/4_1_beginning_collage_effect.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/412/posts/93666/image-upload/4_1_beginning_collage_effect.jpg" alt="Collage animation in After Effects: beginning the collage." loading="lazy" width="380px" height="244px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/412/posts/93666/image-upload/4_1_beginning_collage_effect.jpg 2x"&gt;&lt;/figure&gt;
  3231. &lt;h3 id="toc-x2us-2-rotoscoping-to-create-multiple-layers-in-your-animation"&gt;4.2 &lt;span&gt;Rotoscoping to create multiple layers in your animation&lt;/span&gt;
  3232. &lt;/h3&gt;
  3233. &lt;p&gt;&lt;strong&gt;&lt;a href="https://www.youtube.com/watch?v=ldT8WkWYvDc&amp;amp;t=649s" target="_blank" rel="noopener"&gt;Watch video lesson (8 mins) ↗&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
  3234. &lt;p&gt;I'll show you how to rotoscope efficiently, working only on the parts of footage you'll be using rather than the whole clip. &lt;/p&gt;
  3235. &lt;div class="callout-block"&gt;
  3236. &lt;span class="callout-icon callout-tip"&gt;&lt;/span&gt;
  3237. &lt;div class="callout-message"&gt;
  3238. &lt;strong&gt;Rotoscoping&lt;/strong&gt; or &lt;strong&gt;Roto&lt;/strong&gt; is a means of hand-drawing a mask to isolate a subject in your footage, frame by frame. This can then be animated independently from the rest of the unselected footage.&lt;/div&gt;
  3239. &lt;/div&gt;
  3240. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/412/posts/93666/image-upload/4_2_rotoscoping.jpg" alt="rotoscoping" loading="lazy" width="870px" height="605px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/412/posts/93666/image-upload/4_2_rotoscoping.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/412/posts/93666/image-upload/4_2_rotoscoping.jpg" alt="rotoscoping" loading="lazy" width="650px" height="454px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/412/posts/93666/image-upload/4_2_rotoscoping.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/412/posts/93666/image-upload/4_2_rotoscoping.jpg" alt="rotoscoping" loading="lazy" width="380px" height="268px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/412/posts/93666/image-upload/4_2_rotoscoping.jpg 2x"&gt;&lt;/figure&gt;
  3241. &lt;p&gt;Let's learn how to separate a subject and add the animation between that isolated subject and the background:&lt;/p&gt;
  3242. &lt;/div&gt;&lt;div data-content-block-type="FullWidthSection" class="content-block content-block-fullwidthsection" id="iwmd06"&gt;&lt;div class="full-width-section__full-container div-container"&gt;
  3243. &lt;h3 id="ixxlrl" class="extended-tips__head-title"&gt;Rotoscoping in After Effects&lt;/h3&gt;
  3244. &lt;div data-content-block-type="ExtendedTips" class="content-block content-block-extendedtips" id="ivey7i"&gt;
  3245. &lt;div class="extended-tips__preview-tutorial div-container"&gt;&lt;figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=ldT8WkWYvDc&amp;amp;t=488"&gt;
  3246.            &lt;iframe src="https://www.youtube.com/embed/ldT8WkWYvDc?rel=0&amp;amp;start=488" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy" style="border-radius: 15px;"&gt;&lt;/iframe&gt;
  3247.          &lt;/figure&gt;&lt;/div&gt;
  3248. &lt;div class="extended-tips__tip-info div-container" id="ivy0cj"&gt;&lt;div class="extended-tips__list" id="i4hors"&gt;
  3249. &lt;div class="list-item extended_tips_list-item" id="inwclf"&gt;&lt;div class="list-item__index-container content-container"&gt;&lt;span class="list-item-index content-container"&gt;1&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
  3250. &lt;div data-content-block-type="ContentTextBlock" class="content-block content-block-contenttextblock" id="i36u6h"&gt;
  3251. &lt;h4 id="toc-rshp-select-your-footage"&gt;Select your footage&lt;/h4&gt;
  3252. &lt;p&gt;Double-click in Timeline to open the layer in its own panel.&lt;/p&gt;
  3253. &lt;/div&gt;
  3254. &lt;div class="list-item extended_tips_list-item" id="iqi0we"&gt;
  3255. &lt;div class="list-item__index-container content-container"&gt;&lt;span class="list-item-index content-container"&gt;3&lt;/span&gt;&lt;/div&gt;
  3256. &lt;div data-content-block-type="ContentTextBlock" class="content-block content-block-contenttextblock" id="ilxoo6"&gt;
  3257. &lt;h4 id="toc-f6ru-select-the-roto-brush-tool"&gt;Select the Roto Brush tool&lt;/h4&gt;
  3258. &lt;p&gt;&lt;span&gt;Use &lt;strong&gt;option&lt;/strong&gt;/&lt;strong&gt;Alt+W &lt;/strong&gt;for the &lt;strong&gt;Roto &lt;/strong&gt;tool&lt;/span&gt;&lt;/p&gt;
  3259. &lt;/div&gt;
  3260. &lt;/div&gt;
  3261. &lt;div class="list-item extended_tips_list-item" id="ieymkf"&gt;
  3262. &lt;div class="list-item__index-container content-container"&gt;&lt;span class="list-item-index content-container"&gt;4&lt;/span&gt;&lt;/div&gt;
  3263. &lt;div data-content-block-type="ContentTextBlock" class="content-block content-block-contenttextblock" id="idq67s"&gt;
  3264. &lt;h4 id="toc-gl6b-brush-over-the-subject"&gt;Brush over the subject&lt;/h4&gt;
  3265. &lt;p&gt;Holding &lt;strong&gt;Control &lt;/strong&gt;or &lt;strong&gt;Command &lt;/strong&gt;while clicking and dragging your mouse, paint over the thing you want to isolate.&lt;/p&gt;
  3266. &lt;/div&gt;
  3267. &lt;/div&gt;
  3268. &lt;/div&gt;&lt;/div&gt;
  3269. &lt;/div&gt;
  3270. &lt;/div&gt;&lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i9ti6v"&gt;
  3271. &lt;h3 id="toc-11h5-3-blending-modes-for-overlay-effects-true-detective-effect"&gt;4.3 &lt;span&gt;Cutting things out to get the paper collage look&lt;/span&gt;
  3272. &lt;/h3&gt;
  3273. &lt;p&gt;&lt;strong&gt;&lt;a href="https://youtu.be/ldT8WkWYvDc?t=1083&amp;amp;feature=shared" target="_blank" rel="noopener"&gt;Watch video lesson (8 mins) ↗&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
  3274. &lt;p&gt;This time, we're not going to rotoscope. I'll show you how to make a rough selection with the pen tool and scale it up for your animated collages.&lt;/p&gt;
  3275. &lt;div class="callout-block"&gt;
  3276. &lt;span class="callout-icon callout-info"&gt;&lt;/span&gt;
  3277. &lt;div class="callout-message"&gt;Splitting a clip shortcut in After Effects: &lt;strong&gt;CMD/CTRL + Shift + D&lt;/strong&gt;
  3278. &lt;/div&gt;
  3279. &lt;/div&gt;
  3280. &lt;p&gt;With a few tweaks, you'll create something that pops off the screen.&lt;/p&gt;
  3281. &lt;p&gt;Pre-compose a new layer of your After Effects collage animation. Then, follow these steps:&lt;/p&gt;
  3282. &lt;ol&gt;
  3283. &lt;li&gt;For still images, mask the subjects using the &lt;strong&gt;Pen Tool&lt;/strong&gt;.&lt;/li&gt;
  3284. &lt;li&gt;Keep it rough to embrace the handcrafted collage style.&lt;/li&gt;
  3285. &lt;li&gt;Add &lt;strong&gt;Drop Shadow&lt;/strong&gt; for depth.&lt;/li&gt;
  3286. &lt;li&gt;Animate the &lt;strong&gt;Scale&lt;/strong&gt; and &lt;strong&gt;Drop Shadow Distance&lt;/strong&gt; in sync for a paper lift effect.&lt;/li&gt;
  3287. &lt;li&gt;Use colorful animated elements like sunbursts behind masked figures.&lt;/li&gt;
  3288. &lt;li&gt;Change color with "Change to Color" and adjust &lt;strong&gt;Hue&lt;/strong&gt;/&lt;strong&gt;Lightness&lt;/strong&gt;/&lt;strong&gt;Saturation&lt;/strong&gt;.&lt;/li&gt;
  3289. &lt;/ol&gt;
  3290. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/412/posts/93666/image-upload/4_3_cutting_out.jpg" alt="Collage animation in After Effects: cutting out." loading="lazy" width="870px" height="630px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/412/posts/93666/image-upload/4_3_cutting_out.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/412/posts/93666/image-upload/4_3_cutting_out.jpg" alt="Collage animation in After Effects: cutting out." loading="lazy" width="650px" height="472px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/412/posts/93666/image-upload/4_3_cutting_out.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/412/posts/93666/image-upload/4_3_cutting_out.jpg" alt="Collage animation in After Effects: cutting out." loading="lazy" width="380px" height="278px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/412/posts/93666/image-upload/4_3_cutting_out.jpg 2x"&gt;&lt;/figure&gt;
  3291. &lt;h3 id="toc-ab48-3-blending-modes-for-overlay-effects-true-detective-effect"&gt;4.4 &lt;span&gt;Blending modes for overlay effects: True Detective effect!&lt;/span&gt;
  3292. &lt;/h3&gt;
  3293. &lt;p&gt;&lt;strong&gt;&lt;a href="https://www.youtube.com/watch?v=ldT8WkWYvDc&amp;amp;t=1549s" target="_blank" rel="noopener"&gt;Watch video lesson (6 mins) ↗&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
  3294. &lt;p&gt;Now, you'll learn how to use blending modes to create some great effects. These include a double exposure and using &lt;a href="https://elements.envato.com/learn/how-to-remove-green-screens-in-after-effects" target="_self" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;green screen&lt;/a&gt; footage with &lt;strong&gt;Keylight&lt;/strong&gt;.&lt;/p&gt;
  3295. &lt;p&gt;We'll do the following to our collage in After Effects:&lt;/p&gt;
  3296. &lt;ol&gt;
  3297. &lt;li&gt;Pre-compose the layered footage (in this case, the face over a court).&lt;/li&gt;
  3298. &lt;li&gt;Choose "Move all attributes into new composition."&lt;/li&gt;
  3299. &lt;li&gt;Use the &lt;strong&gt;Screen&lt;/strong&gt; blend mode on top layers.&lt;/li&gt;
  3300. &lt;li&gt;Adjust layer timing to match visual rhythm.&lt;/li&gt;
  3301. &lt;li&gt;Add blurred green screen overlays (we're using birds here) using &lt;strong&gt;Keylight&lt;/strong&gt; and &lt;strong&gt;Gaussian Blur&lt;/strong&gt;.&lt;/li&gt;
  3302. &lt;li&gt;Stylize the animation with &lt;strong&gt;Posterize Time&lt;/strong&gt; at 12 fps.&lt;/li&gt;
  3303. &lt;/ol&gt;
  3304. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/412/posts/93666/image-upload/4_4_blending_mode.jpg" alt="After Effects collage animation: blending mode." loading="lazy" width="870px" height="630px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/412/posts/93666/image-upload/4_4_blending_mode.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/412/posts/93666/image-upload/4_4_blending_mode.jpg" alt="After Effects collage animation: blending mode." loading="lazy" width="650px" height="472px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/412/posts/93666/image-upload/4_4_blending_mode.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/412/posts/93666/image-upload/4_4_blending_mode.jpg" alt="After Effects collage animation: blending mode." loading="lazy" width="380px" height="278px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/412/posts/93666/image-upload/4_4_blending_mode.jpg 2x"&gt;&lt;/figure&gt;
  3305. &lt;p&gt;More on &lt;strong&gt;Keylight &lt;/strong&gt;later. &lt;/p&gt;
  3306. &lt;h3 id="toc-afd3-4-freeze-frame-in-after-effects"&gt;4.5 &lt;span&gt;Freeze frame in After Effects&lt;/span&gt;
  3307. &lt;/h3&gt;
  3308. &lt;p&gt;&lt;strong&gt;&lt;a href="https://www.youtube.com/watch?v=ldT8WkWYvDc&amp;amp;t=1866s" target="_blank" rel="noopener"&gt;Watch video lesson (5 mins) ↗&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
  3309. &lt;p&gt;We'll use the same effect here as we did in lesson &lt;strong&gt;4.3.&lt;/strong&gt; This time, we're also going to use &lt;a href="https://photography.tutsplus.com/tutorials/how-to-freeze-a-frame-in-after-effects--cms-106729" target="_self"&gt;freeze frame&lt;/a&gt; to stop the motion of a bike jump at the peak of its height. This adds some extra drama.&lt;/p&gt;
  3310. &lt;p&gt;Start with a new pre-composition of this footage. Then:&lt;/p&gt;
  3311. &lt;ol&gt;
  3312. &lt;li&gt;For dramatic pauses, use &lt;strong&gt;Time&lt;/strong&gt; &amp;gt; &lt;strong&gt;Freeze Frame&lt;/strong&gt;.&lt;/li&gt;
  3313. &lt;li&gt;Mask with the &lt;strong&gt;Pen Tool &lt;/strong&gt;and add &lt;strong&gt;Drop Shadows&lt;/strong&gt;.&lt;/li&gt;
  3314. &lt;li&gt;Animate the &lt;strong&gt;Scale&lt;/strong&gt; and &lt;strong&gt;Shadow Distance&lt;/strong&gt; to mimic cut paper lifting.&lt;/li&gt;
  3315. &lt;li&gt;Add supporting elements. Here, we're using animated sunbursts.&lt;/li&gt;
  3316. &lt;/ol&gt;
  3317. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/412/posts/93666/image-upload/4_5_freeze_frame.jpg" alt="Collage animation in After Effects: freeze frame." loading="lazy" width="870px" height="630px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/412/posts/93666/image-upload/4_5_freeze_frame.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/412/posts/93666/image-upload/4_5_freeze_frame.jpg" alt="Collage animation in After Effects: freeze frame." loading="lazy" width="650px" height="472px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/412/posts/93666/image-upload/4_5_freeze_frame.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/412/posts/93666/image-upload/4_5_freeze_frame.jpg" alt="Collage animation in After Effects: freeze frame." loading="lazy" width="380px" height="278px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/412/posts/93666/image-upload/4_5_freeze_frame.jpg 2x"&gt;&lt;/figure&gt;
  3318. &lt;h3 id="toc-c3tz-5-motion-tracking-in-after-effects"&gt;4.6 &lt;span&gt;Motion tracking in After Effects&lt;/span&gt;
  3319. &lt;/h3&gt;
  3320. &lt;p&gt;&lt;span&gt;&lt;strong&gt;&lt;a href="https://www.youtube.com/watch?v=ldT8WkWYvDc&amp;amp;t=2188s" target="_blank" rel="noopener"&gt;Watch video lesson (6 mins) ↗&lt;/a&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;
  3321. &lt;p&gt;In this lesson you'll use &lt;strong&gt;rotoscoping&lt;/strong&gt; again. I'll show you how to add elements to cover up unwanted things with something that looks a little nicer.&lt;/p&gt;
  3322. &lt;p&gt;We'll then motion track that so it stays with the movement in the footage.&lt;/p&gt;
  3323. &lt;p&gt;Here's what we'll do to our animation collage:&lt;/p&gt;
  3324. &lt;ol&gt;
  3325. &lt;li&gt;Use rotoscoping selectively to isolate elements like the subject’s arm or lower body.&lt;/li&gt;
  3326. &lt;li&gt;Freeze only the needed section to keep your project light.&lt;/li&gt;
  3327. &lt;li&gt;Add eye-catching elements between foreground and background.&lt;/li&gt;
  3328. &lt;li&gt;Use &lt;strong&gt;Edit Target&lt;/strong&gt; to attach tracking data to the new elements (in this case, the cactus).&lt;/li&gt;
  3329. &lt;li&gt;Use &lt;a href="https://photography.tutsplus.com/tutorials/how-to-use-after-effects-for-advanced-motion-tracking--cms-42007" target="_self"&gt;&lt;strong&gt;Motion Tracking&lt;/strong&gt;&lt;/a&gt; to pin these elements to specific points in the footage.&lt;/li&gt;
  3330. &lt;li&gt;Adjust anchor points so the new object moves naturally.&lt;/li&gt;
  3331. &lt;li&gt;Clean up edges using &lt;strong&gt;Shift Edge&lt;/strong&gt; and &lt;strong&gt;Feather&lt;/strong&gt; in the Effects panel.&lt;/li&gt;
  3332. &lt;li&gt;Layer &lt;strong&gt;Drop Shadows&lt;/strong&gt; and &lt;strong&gt;Roto Brush&lt;/strong&gt; cutouts for a mixed media look.&lt;/li&gt;
  3333. &lt;/ol&gt;
  3334. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/412/posts/93666/image-upload/4_6_motion_tracking.jpg" alt="Motion tracking for animated collages." loading="lazy" width="870px" height="505px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/412/posts/93666/image-upload/4_6_motion_tracking.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/412/posts/93666/image-upload/4_6_motion_tracking.jpg" alt="Motion tracking for animated collages." loading="lazy" width="650px" height="379px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/412/posts/93666/image-upload/4_6_motion_tracking.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/412/posts/93666/image-upload/4_6_motion_tracking.jpg" alt="Motion tracking for animated collages." loading="lazy" width="380px" height="225px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/412/posts/93666/image-upload/4_6_motion_tracking.jpg 2x"&gt;&lt;/figure&gt;
  3335. &lt;/div&gt;&lt;div data-content-block-type="FullWidthSection" class="content-block content-block-fullwidthsection" id="inplk1"&gt;&lt;div class="full-width-section__content-container div-container" id="ijy5m"&gt;&lt;div data-content-block-type="FullWidthInterviewBlockquote" class="content-block content-block-fullwidthinterviewblockquote" id="i7rsj"&gt;&lt;div id="ij9tng" class="full-width-interview_quote"&gt;&lt;p&gt;"The whole aesthetic is to make things look a little bit thrown together, textual."&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iez4g"&gt;
  3336. &lt;h2 id="toc-awr4-edit-enhancers"&gt;
  3337. &lt;span class="sectionnum"&gt;5.&lt;/span&gt; &lt;span&gt;End screen CTA&lt;/span&gt;
  3338. &lt;/h2&gt;
  3339. &lt;h3 id="toc-lunn-5-motion-tracking-in-after-effects"&gt;5.1 &lt;span&gt;Creating a call-to-action end screen animation&lt;/span&gt;
  3340. &lt;/h3&gt;
  3341. &lt;p&gt;&lt;span&gt;&lt;strong&gt;&lt;a href="https://www.youtube.com/watch?v=ldT8WkWYvDc&amp;amp;t=2571s" target="_blank" rel="noopener"&gt;Watch video lesson (12 mins) ↗&lt;/a&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;
  3342. &lt;p&gt;In this lesson, we'll combine some of the assets we've used with some new ones to make a rough, funky looking scene. We'll place some &lt;a href="https://photography.tutsplus.com/tutorials/how-to-create-a-call-to-action-end-screen-animation-in-after-effects--cms-106719" target="_self"&gt;call-to-action&lt;/a&gt; text on top of it.&lt;/p&gt;
  3343. &lt;p&gt;We'll follow a few simple steps:&lt;/p&gt;
  3344. &lt;ol&gt;
  3345. &lt;li&gt;Reuse earlier cutouts (like the boombox guys) in the final scene.&lt;/li&gt;
  3346. &lt;li&gt;Mask the background using the &lt;strong&gt;Pen Tool&lt;/strong&gt;.&lt;/li&gt;
  3347. &lt;li&gt;Replace the sky with a timelapse or animated burst.&lt;/li&gt;
  3348. &lt;li&gt;Add a &lt;strong&gt;Drop Shadow&lt;/strong&gt; with a white color to simulate a paper edge.&lt;/li&gt;
  3349. &lt;li&gt;Use &lt;strong&gt;CC Page Turn&lt;/strong&gt; to make characters appear like stickers.&lt;/li&gt;
  3350. &lt;li&gt;Add &lt;a href="https://photography.tutsplus.com/tutorials/how-to-make-animated-text-after-effects--cms-109089" target="_self"&gt;animated text&lt;/a&gt; (we're using "Get into the mix") with layered Drop Shadows in red, green, and blue.&lt;/li&gt;
  3351. &lt;/ol&gt;
  3352. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/412/posts/93666/image-upload/5_1_call_to_action_end_screen.jpg" alt="Call to action end screen on an animated collage." loading="lazy" width="870px" height="505px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/412/posts/93666/image-upload/5_1_call_to_action_end_screen.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/412/posts/93666/image-upload/5_1_call_to_action_end_screen.jpg" alt="Call to action end screen on an animated collage." loading="lazy" width="650px" height="379px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/412/posts/93666/image-upload/5_1_call_to_action_end_screen.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/412/posts/93666/image-upload/5_1_call_to_action_end_screen.jpg" alt="Call to action end screen on an animated collage." loading="lazy" width="380px" height="225px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/412/posts/93666/image-upload/5_1_call_to_action_end_screen.jpg 2x"&gt;&lt;/figure&gt;
  3353. &lt;/div&gt;&lt;div data-content-block-type="EmbedCourse" class="content-block content-block-embedcourse" id="ic4rdi"&gt;
  3354. &lt;div class="embed-course-details__wrapper div-container"&gt;
  3355. &lt;div class="div-container"&gt;
  3356. &lt;div class="embed-course-summary__wrapper content-container"&gt;          &lt;div class="free-course__label"&gt;FREE&lt;/div&gt;
  3357.          &lt;div class="embed-course__duration"&gt;
  3358.            &lt;i class="fa fa-clock-o far fa-clock"&gt;&lt;/i&gt;
  3359.            &lt;span&gt;12 Minutes&lt;/span&gt;
  3360.          &lt;/div&gt;
  3361.                    &lt;/div&gt;
  3362. &lt;h2 id="ied9q"&gt;How to make a Y2K art collage in Photoshop&lt;/h2&gt;
  3363. &lt;/div&gt;
  3364. &lt;div class="embed-course__contents div-container"&gt;
  3365. &lt;div class="embed-course__description" id="iq7h7k"&gt;&lt;p&gt;Learn how to create an eye-catching Y2K style art collage in Photoshop! Learn how to recreate the Y2K art style using 3D assets and vibrant color grades.&lt;/p&gt;&lt;/div&gt;
  3366. &lt;ul class="embed-course__chapters-title-list"&gt;&lt;/ul&gt;
  3367. &lt;/div&gt;
  3368. &lt;/div&gt;
  3369. &lt;div class="embed-course-video__wrapper content-container"&gt;          &lt;figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=4FoSOvs0mFk&amp;amp;t=0"&gt;
  3370.            &lt;iframe src="https://www.youtube.com/embed/4FoSOvs0mFk?rel=0&amp;amp;start=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy" style="border-radius: 15px;"&gt;&lt;/iframe&gt;
  3371.          &lt;/figure&gt;          &lt;/div&gt;
  3372. &lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iatg7"&gt;
  3373. &lt;h2 id="toc-jooi-conclusion"&gt;
  3374. &lt;span class="sectionnum"&gt;6.&lt;/span&gt; &lt;span&gt;Adding elements and effects&lt;/span&gt;
  3375. &lt;/h2&gt;
  3376. &lt;h3 id="toc-hnk2-1-the-wrap-up"&gt;6.1 &lt;span&gt;Adding foreground elements to the collage animation in After Effects&lt;/span&gt;
  3377. &lt;/h3&gt;
  3378. &lt;p&gt;&lt;strong&gt;&lt;a href="https://www.youtube.com/watch?v=ldT8WkWYvDc&amp;amp;t=3285s" target="_blank" rel="noopener"&gt;Watch video lesson (5 mins) ↗&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
  3379. &lt;p&gt;If you've made it to this point in our collage animation tutorial in After Effects, you'll have a great base. Now, we need to cover joins and gaps, as well as bring in some depth and texture.&lt;/p&gt;
  3380. &lt;p&gt;Here's how we'll polish our After Effects collage animation:&lt;/p&gt;
  3381. &lt;ol&gt;
  3382. &lt;li&gt;Use sticker-style elements, like transparent tape PNGs.&lt;/li&gt;
  3383. &lt;li&gt;Add layered cityscape elements and mask individual buildings.&lt;/li&gt;
  3384. &lt;li&gt;Apply &lt;strong&gt;Drop Shadows&lt;/strong&gt; and &lt;strong&gt;Gaussian Blur&lt;/strong&gt; to create depth.&lt;/li&gt;
  3385. &lt;li&gt;Animate with&lt;strong&gt; CC Page Turn&lt;/strong&gt; for a layered paper aesthetic.&lt;/li&gt;
  3386. &lt;/ol&gt;
  3387. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/412/posts/93666/image-upload/6_1_foreground_elements.jpg" alt="Animation collage in After Effects: foreground elements." loading="lazy" width="870px" height="449px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/412/posts/93666/image-upload/6_1_foreground_elements.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/412/posts/93666/image-upload/6_1_foreground_elements.jpg" alt="Animation collage in After Effects: foreground elements." loading="lazy" width="650px" height="338px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/412/posts/93666/image-upload/6_1_foreground_elements.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/412/posts/93666/image-upload/6_1_foreground_elements.jpg" alt="Animation collage in After Effects: foreground elements." loading="lazy" width="380px" height="202px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/412/posts/93666/image-upload/6_1_foreground_elements.jpg 2x"&gt;&lt;/figure&gt;
  3388. &lt;h3 id="toc-o3o9-1-adding-foreground-elements-to-the-collage-animation-in-after-effects"&gt;6.2 &lt;span&gt;Using 3D assets in After Effects&lt;/span&gt;
  3389. &lt;/h3&gt;
  3390. &lt;p&gt;&lt;strong&gt;&lt;a href="https://www.youtube.com/watch?v=ldT8WkWYvDc&amp;amp;t=3634s" target="_blank" rel="noopener"&gt;Watch video lesson (5 mins) ↗&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
  3391. &lt;p&gt;Adding 3D assets means you can spin something around to any angle that you want and create a hi-res PNG of that angle.&lt;/p&gt;
  3392. &lt;p&gt;In this lesson, we'll look at where you can grab those assets and how to set them up in After Effects to make adjustments.&lt;/p&gt;
  3393. &lt;ol&gt;
  3394. &lt;li&gt;Import PNG sequences from Envato’s &lt;a href="https://photography.tutsplus.com/articles/understanding-3d-rendering-a-beginners-guide--cms-109097" target="_self"&gt;3D render&lt;/a&gt; generator.&lt;/li&gt;
  3395. &lt;li&gt;Interpret footage at 12 fps to mimic stop motion.&lt;/li&gt;
  3396. &lt;li&gt;Use &lt;a href="https://elements.envato.com/learn/how-to-loop-videos-in-after-effects" target="_self" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;After Effects looping&lt;/a&gt; to repeat the animation.&lt;/li&gt;
  3397. &lt;li&gt;Add wiggle expressions for subtle motion.&lt;/li&gt;
  3398. &lt;li&gt;Style with gold or white Drop Shadows to add more dimensionality.&lt;/li&gt;
  3399. &lt;/ol&gt;
  3400. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/412/posts/93666/image-upload/6_2_using_3d_assets.jpg" alt="Collage animation in After Effects: using 3D assets." loading="lazy" width="870px" height="652px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/412/posts/93666/image-upload/6_2_using_3d_assets.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/412/posts/93666/image-upload/6_2_using_3d_assets.jpg" alt="Collage animation in After Effects: using 3D assets." loading="lazy" width="650px" height="488px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/412/posts/93666/image-upload/6_2_using_3d_assets.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/412/posts/93666/image-upload/6_2_using_3d_assets.jpg" alt="Collage animation in After Effects: using 3D assets." loading="lazy" width="380px" height="288px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/412/posts/93666/image-upload/6_2_using_3d_assets.jpg 2x"&gt;&lt;/figure&gt;
  3401. &lt;h3 id="toc-po7x-2-using-3d-assets-in-after-effects"&gt;6.3 &lt;span&gt;After Effects green screen with the Keylight effect&lt;/span&gt;
  3402. &lt;/h3&gt;
  3403. &lt;p&gt;&lt;strong&gt;&lt;a href="https://www.youtube.com/watch?v=ldT8WkWYvDc&amp;amp;t=3906s" target="_blank" rel="noopener"&gt;Watch video lesson (5 mins) ↗&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
  3404. &lt;p&gt;You'll now learn how to can use large blocks of color in footage as a sort of green screen, and key that out with &lt;strong&gt;Keylight&lt;/strong&gt;.&lt;/p&gt;
  3405. &lt;ol&gt;
  3406. &lt;li&gt;Use &lt;strong&gt;Keylight&lt;/strong&gt; to remove blue or green backgrounds from stock footage (in this case, the "slam dunk" clip).&lt;/li&gt;
  3407. &lt;li&gt;Combine with explosion effects and &lt;strong&gt;Parent&lt;/strong&gt; to the Movement null.&lt;/li&gt;
  3408. &lt;li&gt;Pre-compose layers and apply &lt;strong&gt;Posterize Time&lt;/strong&gt; to match animation style.&lt;/li&gt;
  3409. &lt;/ol&gt;
  3410. &lt;figure class="post_image"&gt;&lt;/figure&gt;
  3411. &lt;/div&gt;&lt;div data-content-block-type="Grid" class="content-block content-block-grid" id="iq9zfv"&gt;&lt;div class="element-row two-column-grid grid-gap--col-wide grid-gap--row-wide"&gt;
  3412. &lt;div class="element-col" id="ir0c4k"&gt;&lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/412/posts/93666/image-upload/6_3_keylight.jpg" alt="Using Keylight in the animated collage." id="ixuyx3" loading="lazy" width="870px" height="570px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/412/posts/93666/image-upload/6_3_keylight.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/412/posts/93666/image-upload/6_3_keylight.jpg" alt="Using Keylight in the animated collage." id="ixuyx3" loading="lazy" width="650px" height="428px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/412/posts/93666/image-upload/6_3_keylight.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/412/posts/93666/image-upload/6_3_keylight.jpg" alt="Using Keylight in the animated collage." id="ixuyx3" loading="lazy" width="380px" height="253px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/412/posts/93666/image-upload/6_3_keylight.jpg 2x"&gt;&lt;/figure&gt;&lt;/div&gt;
  3413. &lt;div class="element-col"&gt;&lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/412/posts/93666/image-upload/6_3_keylight_2.jpg" alt="Using Keylight in the animated collage." id="ipc87b" loading="lazy" width="870px" height="570px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/412/posts/93666/image-upload/6_3_keylight_2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/412/posts/93666/image-upload/6_3_keylight_2.jpg" alt="Using Keylight in the animated collage." id="ipc87b" loading="lazy" width="650px" height="428px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/412/posts/93666/image-upload/6_3_keylight_2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/412/posts/93666/image-upload/6_3_keylight_2.jpg" alt="Using Keylight in the animated collage." id="ipc87b" loading="lazy" width="380px" height="253px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/412/posts/93666/image-upload/6_3_keylight_2.jpg 2x"&gt;&lt;/figure&gt;&lt;/div&gt;
  3414. &lt;/div&gt;&lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iisp8k"&gt;&lt;p&gt;You'll get a sense of how you can add some cool little effects to make the whole piece more interesting and fun!&lt;/p&gt;&lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i4b0k9"&gt;
  3415. &lt;h2 id="toc-l92l-adding-elements-and-effects"&gt;
  3416. &lt;span class="sectionnum"&gt;7.&lt;/span&gt; Finishing up&lt;/h2&gt;
  3417. &lt;h3 id="toc-ndwi-1-adding-foreground-elements-to-the-collage-animation-in-after-effects"&gt;7.1 &lt;span&gt;Adding some final touches&lt;/span&gt;
  3418. &lt;/h3&gt;
  3419. &lt;p&gt;&lt;strong&gt;&lt;a href="https://www.youtube.com/watch?v=ldT8WkWYvDc&amp;amp;t=4217s" target="_blank" rel="noopener"&gt;Watch video lesson (5 mins) ↗&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
  3420. &lt;p&gt;By now you should have a really cool looking animated collage with lots of different elements going on. In this final lesson, we'll look at adding some last little flourishes to finish your project off in style.&lt;/p&gt;
  3421. &lt;p&gt;Here's how we finish up our collage animation in After Effects:&lt;/p&gt;
  3422. &lt;ol&gt;
  3423. &lt;li&gt;Add one last green screen element (we're using the "football header" clip) using Keylight.&lt;/li&gt;
  3424. &lt;li&gt;Animate the &lt;strong&gt;Drop Shadow&lt;/strong&gt; trails with layered keyframes.&lt;/li&gt;
  3425. &lt;li&gt;Add time effects to musical cues for greater impact.&lt;/li&gt;
  3426. &lt;li&gt;Use sticker cutouts, tape textures, and &lt;a href="https://elements.envato.com/learn/cool-video-transition-effects" target="_self" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;creative transitions&lt;/a&gt; to fill any visual gaps.&lt;/li&gt;
  3427. &lt;/ol&gt;
  3428. &lt;p&gt;There you go! The final result should look something like this:&lt;/p&gt;
  3429. &lt;figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=BrJeAbtMNz4&amp;amp;t=0"&gt;
  3430.            &lt;iframe src="https://www.youtube.com/embed/BrJeAbtMNz4?rel=0&amp;amp;start=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy" style="border-radius: 15px;"&gt;&lt;/iframe&gt;
  3431.          &lt;/figure&gt;
  3432. &lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iv5vh"&gt;&lt;div class="callout-block"&gt;
  3433. &lt;span class="callout-icon callout-tip"&gt;&lt;/span&gt;
  3434. &lt;div class="callout-message"&gt;All of the assets used in this After Effects collage animation tutorial are from &lt;a href="https://elements.envato.com/" target="_self" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;Envato&lt;/a&gt;. You can also find a whole range of &lt;a href="https://elements.envato.com/video-templates/compatible-with-after-effects" target="_self" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;After Effects video templates there&lt;/a&gt;. They're all included in your subscription, so you can try and use as many as you like!&lt;/div&gt;
  3435. &lt;/div&gt;&lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ilh31"&gt;
  3436. &lt;h2 id="toc-a61p-learn-more-about-premiere-pro"&gt;Take After Effects further&lt;/h2&gt;
  3437. &lt;p&gt;Learn about After Effects animation and so much more with our free courses.&lt;/p&gt;
  3438. &lt;/div&gt;&lt;div data-content-block-type="Grid" class="content-block content-block-grid" id="i74wo4"&gt;
  3439. &lt;div class="element-row two-column-grid grid-gap--col-wide grid-gap--row-wide" id="i9eghv"&gt;
  3440. &lt;div class="element-col"&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iy9cxk"&gt;
  3441. &lt;figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=V5YDSIqLpZE&amp;amp;t=0"&gt;
  3442.            &lt;iframe src="https://www.youtube.com/embed/V5YDSIqLpZE?rel=0&amp;amp;start=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy" style="border-radius: 15px;"&gt;&lt;/iframe&gt;
  3443.          &lt;/figure&gt;
  3444. &lt;/div&gt;&lt;/div&gt;
  3445. &lt;div class="element-col" id="i7qymu"&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="izck9h"&gt;
  3446. &lt;figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=Jn7IiGG5ZBU&amp;amp;t=0"&gt;
  3447.            &lt;iframe src="https://www.youtube.com/embed/Jn7IiGG5ZBU?rel=0&amp;amp;start=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy" style="border-radius: 15px;"&gt;&lt;/iframe&gt;
  3448.          &lt;/figure&gt;
  3449. &lt;/div&gt;&lt;/div&gt;
  3450. &lt;/div&gt;
  3451. &lt;div class="element-row two-column-grid grid-gap--col-wide grid-gap--row-wide" id="idwg0x"&gt;
  3452. &lt;div class="element-col"&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iuraj2"&gt;
  3453. &lt;figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=dLmfZBT2kJc&amp;amp;t=0"&gt;
  3454.            &lt;iframe src="https://www.youtube.com/embed/dLmfZBT2kJc?rel=0&amp;amp;start=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy" style="border-radius: 15px;"&gt;&lt;/iframe&gt;
  3455.          &lt;/figure&gt;
  3456. &lt;/div&gt;&lt;/div&gt;
  3457. &lt;div class="element-col"&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i6qw1q"&gt;
  3458. &lt;figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=PWvPbGWVRrU&amp;amp;t=0"&gt;
  3459.            &lt;iframe src="https://www.youtube.com/embed/PWvPbGWVRrU?rel=0&amp;amp;start=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy" style="border-radius: 15px;"&gt;&lt;/iframe&gt;
  3460.          &lt;/figure&gt;
  3461. &lt;/div&gt;&lt;/div&gt;
  3462. &lt;/div&gt;
  3463. &lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iqstac"&gt;
  3464. &lt;p&gt;Learn about After Effects animation and so much more with our free courses.&lt;/p&gt;
  3465. &lt;p&gt;If you prefer to learn in a different way, you could try our &lt;a href="https://photography.tutsplus.com/video/compatible-with/adobe-after-effects" target="_self" rel=""&gt;free After Effects tutorials&lt;/a&gt;. We've got a huge library to get you started!&lt;/p&gt;
  3466. &lt;ul class="roundup-block__contents posts--half-width roundup-block--list"&gt;
  3467. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://photography.tutsplus.com/articles/a-concise-guide-to-after-effects-keyboard-shortcuts--ae-1314"&gt;&lt;div class="roundup-block__content-container"&gt;
  3468. &lt;div class="roundup-block__preview"&gt;
  3469. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/392/posts/17948/preview_image/video_editor_hands_adjusting_color_or_sound_on_wor_2021_08_30_06_28_59_utc.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/392/posts/17948/preview_image/video_editor_hands_adjusting_color_or_sound_on_wor_2021_08_30_06_28_59_utc.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/392/posts/17948/preview_image/video_editor_hands_adjusting_color_or_sound_on_wor_2021_08_30_06_28_59_utc.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/392/posts/17948/preview_image/video_editor_hands_adjusting_color_or_sound_on_wor_2021_08_30_06_28_59_utc.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/392/posts/17948/preview_image/video_editor_hands_adjusting_color_or_sound_on_wor_2021_08_30_06_28_59_utc.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/392/posts/17948/preview_image/video_editor_hands_adjusting_color_or_sound_on_wor_2021_08_30_06_28_59_utc.jpg 2x"&gt;
  3470. &lt;/div&gt;
  3471. &lt;div class="roundup-block__content-meta"&gt;
  3472. &lt;div class="roundup-block__content-title"&gt;Essential After Effects Keyboard Shortcuts: Quick Guide&lt;/div&gt;
  3473. &lt;div class="roundup-block__author-info"&gt;
  3474. &lt;div class="roundup-block__author-profile-image"&gt;&lt;img class="roundup-block__author-image" src="//www.gravatar.com/avatar/fe8a4f9cb7c6d9d7e193c688b5b0b12f?s=200&amp;amp;d=https%3A%2F%2Fassets.tutsplus.com%2Fimages%2Fhub%2Favatar_default.png&amp;amp;r=PG" alt="" loading="lazy"&gt;&lt;/div&gt;
  3475. &lt;div class="roundup-block__author-meta"&gt;
  3476. &lt;div class="roundup-block__author-name"&gt;Topher Welsh&lt;/div&gt;
  3477. &lt;div class="roundup-block__published-date"&gt;15 Nov 2022&lt;/div&gt;
  3478. &lt;/div&gt;
  3479. &lt;/div&gt;
  3480. &lt;/div&gt;
  3481. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  3482. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://photography.tutsplus.com/tutorials/best-logo-intros-after-effects--cms-31446"&gt;&lt;div class="roundup-block__content-container"&gt;
  3483. &lt;div class="roundup-block__preview"&gt;
  3484. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/392/posts/31446/preview_image/logo-sting-after-effects.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/392/posts/31446/preview_image/logo-sting-after-effects.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/392/posts/31446/preview_image/logo-sting-after-effects.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/392/posts/31446/preview_image/logo-sting-after-effects.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/392/posts/31446/preview_image/logo-sting-after-effects.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/392/posts/31446/preview_image/logo-sting-after-effects.jpg 2x"&gt;
  3485. &lt;/div&gt;
  3486. &lt;div class="roundup-block__content-meta"&gt;
  3487. &lt;div class="roundup-block__content-title"&gt;11 Top Animated Logo Sting Templates for After Effects&lt;/div&gt;
  3488. &lt;div class="roundup-block__author-info"&gt;
  3489. &lt;div class="roundup-block__author-profile-image"&gt;
  3490. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/15/profiles/36/profileImage/profile.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/15/profiles/36/profileImage/profile.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/15/profiles/36/profileImage/profile.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/15/profiles/36/profileImage/profile.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/15/profiles/36/profileImage/profile.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/15/profiles/36/profileImage/profile.jpg 2x"&gt;
  3491. &lt;/div&gt;
  3492. &lt;div class="roundup-block__author-meta"&gt;
  3493. &lt;div class="roundup-block__author-name"&gt;Andrew Childress&lt;/div&gt;
  3494. &lt;div class="roundup-block__published-date"&gt;20 Oct 2022&lt;/div&gt;
  3495. &lt;/div&gt;
  3496. &lt;/div&gt;
  3497. &lt;/div&gt;
  3498. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  3499. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://photography.tutsplus.com/tutorials/how-to-use-after-effects-precomposing--cms-41994"&gt;&lt;div class="roundup-block__content-container"&gt;
  3500. &lt;div class="roundup-block__preview"&gt;
  3501. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/403/posts/41994/preview_image/precomposing_thumb.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/403/posts/41994/preview_image/precomposing_thumb.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/403/posts/41994/preview_image/precomposing_thumb.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/403/posts/41994/preview_image/precomposing_thumb.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/403/posts/41994/preview_image/precomposing_thumb.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/403/posts/41994/preview_image/precomposing_thumb.jpg 2x"&gt;
  3502. &lt;/div&gt;
  3503. &lt;div class="roundup-block__content-meta"&gt;
  3504. &lt;div class="roundup-block__content-title"&gt;How to Use Precomposing in After Effects&lt;/div&gt;
  3505. &lt;div class="roundup-block__author-info"&gt;
  3506. &lt;div class="roundup-block__author-profile-image"&gt;
  3507. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg 2x"&gt;
  3508. &lt;/div&gt;
  3509. &lt;div class="roundup-block__author-meta"&gt;
  3510. &lt;div class="roundup-block__author-name"&gt;Jonathan Lam&lt;/div&gt;
  3511. &lt;div class="roundup-block__published-date"&gt;22 Aug 2022&lt;/div&gt;
  3512. &lt;/div&gt;
  3513. &lt;/div&gt;
  3514. &lt;/div&gt;
  3515. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  3516. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://photography.tutsplus.com/tutorials/how-to-animate-strokes-and-glow-effects-in-after-effects--cms-41532"&gt;&lt;div class="roundup-block__content-container"&gt;
  3517. &lt;div class="roundup-block__preview"&gt;
  3518. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/403/posts/41532/preview_image/glow_thumb.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/403/posts/41532/preview_image/glow_thumb.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/403/posts/41532/preview_image/glow_thumb.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/403/posts/41532/preview_image/glow_thumb.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/403/posts/41532/preview_image/glow_thumb.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/403/posts/41532/preview_image/glow_thumb.jpg 2x"&gt;
  3519. &lt;/div&gt;
  3520. &lt;div class="roundup-block__content-meta"&gt;
  3521. &lt;div class="roundup-block__content-title"&gt;How to Animate Strokes and Glow Effects in After Effects&lt;/div&gt;
  3522. &lt;div class="roundup-block__author-info"&gt;
  3523. &lt;div class="roundup-block__author-profile-image"&gt;
  3524. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg 2x"&gt;
  3525. &lt;/div&gt;
  3526. &lt;div class="roundup-block__author-meta"&gt;
  3527. &lt;div class="roundup-block__author-name"&gt;Jonathan Lam&lt;/div&gt;
  3528. &lt;div class="roundup-block__published-date"&gt;25 Aug 2022&lt;/div&gt;
  3529. &lt;/div&gt;
  3530. &lt;/div&gt;
  3531. &lt;/div&gt;
  3532. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  3533. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://photography.tutsplus.com/tutorials/how-to-create-a-layout-in-after-effects--cms-41534"&gt;&lt;div class="roundup-block__content-container"&gt;
  3534. &lt;div class="roundup-block__preview"&gt;
  3535. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/403/posts/41534/preview_image/layout_thumb.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/403/posts/41534/preview_image/layout_thumb.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/403/posts/41534/preview_image/layout_thumb.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/403/posts/41534/preview_image/layout_thumb.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/403/posts/41534/preview_image/layout_thumb.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/403/posts/41534/preview_image/layout_thumb.jpg 2x"&gt;
  3536. &lt;/div&gt;
  3537. &lt;div class="roundup-block__content-meta"&gt;
  3538. &lt;div class="roundup-block__content-title"&gt;How to Create a Layout in After Effects&lt;/div&gt;
  3539. &lt;div class="roundup-block__author-info"&gt;
  3540. &lt;div class="roundup-block__author-profile-image"&gt;
  3541. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg 2x"&gt;
  3542. &lt;/div&gt;
  3543. &lt;div class="roundup-block__author-meta"&gt;
  3544. &lt;div class="roundup-block__author-name"&gt;Jonathan Lam&lt;/div&gt;
  3545. &lt;div class="roundup-block__published-date"&gt;24 Aug 2022&lt;/div&gt;
  3546. &lt;/div&gt;
  3547. &lt;/div&gt;
  3548. &lt;/div&gt;
  3549. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  3550. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://photography.tutsplus.com/articles/15-of-the-best-adobe-after-effects-motion-graphics-templates--cms-30666"&gt;&lt;div class="roundup-block__content-container"&gt;
  3551. &lt;div class="roundup-block__preview"&gt;
  3552. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/412/posts/30666/preview_image/motion_graphics_thumb.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/412/posts/30666/preview_image/motion_graphics_thumb.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/412/posts/30666/preview_image/motion_graphics_thumb.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/412/posts/30666/preview_image/motion_graphics_thumb.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/412/posts/30666/preview_image/motion_graphics_thumb.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/412/posts/30666/preview_image/motion_graphics_thumb.jpg 2x"&gt;
  3553. &lt;/div&gt;
  3554. &lt;div class="roundup-block__content-meta"&gt;
  3555. &lt;div class="roundup-block__content-title"&gt;20 Best Motion Graphics Templates for After Effects&lt;/div&gt;
  3556. &lt;div class="roundup-block__author-info"&gt;
  3557. &lt;div class="roundup-block__author-profile-image"&gt;
  3558. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/412/profiles/18841/profileImage/me_web_size.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/412/profiles/18841/profileImage/me_web_size.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/412/profiles/18841/profileImage/me_web_size.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/412/profiles/18841/profileImage/me_web_size.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/412/profiles/18841/profileImage/me_web_size.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/412/profiles/18841/profileImage/me_web_size.jpg 2x"&gt;
  3559. &lt;/div&gt;
  3560. &lt;div class="roundup-block__author-meta"&gt;
  3561. &lt;div class="roundup-block__author-name"&gt;Marie Gardiner&lt;/div&gt;
  3562. &lt;div class="roundup-block__published-date"&gt;27 Dec 2023&lt;/div&gt;
  3563. &lt;/div&gt;
  3564. &lt;/div&gt;
  3565. &lt;/div&gt;
  3566. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  3567. &lt;/ul&gt;
  3568. &lt;/div&gt;&lt;div class="mediafed_ad"&gt;&lt;img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/669438/s/93666/sc/4/mf.gif" width="1" /&gt;&lt;a href="http://da.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/93666/a2.htm"&gt;&lt;img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/93666/a2.img" /&gt;&lt;/a&gt;&lt;img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/93666/a2t.img" width="1" /&gt;&lt;/div&gt;</content>
  3569.    <published>2025-06-25 13:01:00 UTC</published>
  3570.    <updated>2025-06-25 13:01:00 UTC</updated>
  3571.    <author>
  3572.      <name>Tom Graham</name>
  3573.    </author>
  3574.  </entry>
  3575.  <entry>
  3576.    <id>tag:tutsplus.com,2005:PostPresenter/cms-109188</id>
  3577.    <published>2025-06-20T02:40:50+00:00</published>
  3578.    <link rel="alternate" type="text/html" href="https://design.tutsplus.com/tutorials/remove-object-using-ai--cms-109188"/>
  3579.    <title>How to remove anything using AI ImageEdit (blemishes, wrinkles, stray hairs, and more!)</title>
  3580.    <content type="html">&lt;style&gt;* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}&lt;/style&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i8og"&gt;
  3581. &lt;p&gt;&lt;span&gt;Today, thanks to AI, it's super easy and efficient to make your photos look professional, whether you're just tweaking little things or making big changes.&lt;/span&gt;&lt;/p&gt;
  3582. &lt;p&gt;&lt;span&gt;In this tutorial, we'll learn how to use &lt;a href="https://elements.envato.com/learn/introducing-imageedit-ai-photo-editing" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;Envato ImageEdit's AI tools&lt;/a&gt; for common photo touch-ups, such as removing blemishes, smoothing out wrinkles, removing tattoos, and taming stray hairs.&lt;/span&gt;&lt;/p&gt;
  3583. &lt;p&gt;&lt;span&gt;Ready? Let's make your images shine!&lt;/span&gt;&lt;/p&gt;
  3584. &lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i10i"&gt;&lt;p&gt;&lt;span&gt;For this tutorial, we'll be editing with ImageEdit and four photos that are available with your Envato subscription.&lt;/span&gt;&lt;/p&gt;&lt;/div&gt;&lt;div data-content-block-type="MultiElementItem" class="content-block content-block-multielementitem relative" data-controller="multi-element-item-gallery" id="i62m"&gt;
  3585. &lt;div class="flex flex-row items-center div-container" data-multi-element-item-gallery-target="item" id="invq"&gt;
  3586. &lt;a href="https://elements.envato.com/girl-JPUGLHH" rel="" target="_blank" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/33/posts/109188/image-upload/portrait_of_woman_with_glitter.jpg" alt="girl" id="i0a1" class="w-20 h-20 object-cover resized-image resized-image-desktop" loading="lazy" width="870px" height="587px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/33/posts/109188/image-upload/portrait_of_woman_with_glitter.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/33/posts/109188/image-upload/portrait_of_woman_with_glitter.jpg" alt="girl" id="i0a1" class="w-20 h-20 object-cover resized-image resized-image-tablet" loading="lazy" width="650px" height="440px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/33/posts/109188/image-upload/portrait_of_woman_with_glitter.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/33/posts/109188/image-upload/portrait_of_woman_with_glitter.jpg" alt="girl" id="i0a1" class="w-20 h-20 object-cover resized-image resized-image-mobile" loading="lazy" width="380px" height="260px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/33/posts/109188/image-upload/portrait_of_woman_with_glitter.jpg 2x"&gt;&lt;/a&gt;&lt;a href="https://elements.envato.com/girl-JPUGLHH" class="w-full flex text-left underline div-container" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;div id="ipx5" class="w-full"&gt;&lt;div&gt;Girl with freckles and sparkles&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
  3587. &lt;/div&gt;
  3588. &lt;div class="flex flex-row items-center div-container" data-multi-element-item-gallery-target="item" id="id64m"&gt;
  3589. &lt;a href="https://elements.envato.com/blonde-woman-exudes-positivity-confidence-as-stand-XLJ4GDR" rel="" target="_self" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/33/posts/109188/image-upload/woman_in_wardrobe1.jpg" alt="Blonde woman exudes positivity confidence as stands amidst delightful assortment of clothes on" id="im994" class="w-20 h-20 object-cover resized-image resized-image-desktop" loading="lazy" width="870px" height="587px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/33/posts/109188/image-upload/woman_in_wardrobe1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/33/posts/109188/image-upload/woman_in_wardrobe1.jpg" alt="Blonde woman exudes positivity confidence as stands amidst delightful assortment of clothes on" id="im994" class="w-20 h-20 object-cover resized-image resized-image-tablet" loading="lazy" width="650px" height="440px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/33/posts/109188/image-upload/woman_in_wardrobe1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/33/posts/109188/image-upload/woman_in_wardrobe1.jpg" alt="Blonde woman exudes positivity confidence as stands amidst delightful assortment of clothes on" id="im994" class="w-20 h-20 object-cover resized-image resized-image-mobile" loading="lazy" width="380px" height="260px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/33/posts/109188/image-upload/woman_in_wardrobe1.jpg 2x"&gt;&lt;/a&gt;&lt;a href="https://elements.envato.com/blonde-woman-exudes-positivity-confidence-as-stand-XLJ4GDR" class="w-full flex text-left underline div-container" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;div id="il0ci" class="w-full"&gt;&lt;div&gt;Woman with assortment of clothes&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
  3590. &lt;/div&gt;
  3591. &lt;div class="flex flex-row items-center div-container" data-multi-element-item-gallery-target="item" id="i2s9g"&gt;
  3592. &lt;a href="https://elements.envato.com/serious-young-tattooed-black-man-touching-chin-in--V497CYX" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/33/posts/109188/image-upload/man_with_tatttoos.jpg" alt="Serious young tattooed black man touching chin in gray studio" id="iviug" class="w-20 h-20 object-cover resized-image resized-image-desktop" loading="lazy" width="870px" height="554px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/33/posts/109188/image-upload/man_with_tatttoos.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/33/posts/109188/image-upload/man_with_tatttoos.jpg" alt="Serious young tattooed black man touching chin in gray studio" id="iviug" class="w-20 h-20 object-cover resized-image resized-image-tablet" loading="lazy" width="650px" height="416px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/33/posts/109188/image-upload/man_with_tatttoos.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/33/posts/109188/image-upload/man_with_tatttoos.jpg" alt="Serious young tattooed black man touching chin in gray studio" id="iviug" class="w-20 h-20 object-cover resized-image resized-image-mobile" loading="lazy" width="380px" height="246px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/33/posts/109188/image-upload/man_with_tatttoos.jpg 2x"&gt;&lt;/a&gt;&lt;a href="https://elements.envato.com/serious-young-tattooed-black-man-touching-chin-in--V497CYX" class="w-full flex text-left underline div-container" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;div id="iym1l" class="w-full"&gt;&lt;div&gt;Serious young tattooed man&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
  3593. &lt;/div&gt;
  3594. &lt;div class="flex flex-row items-center div-container" data-multi-element-item-gallery-target="item" id="inp5s"&gt;
  3595. &lt;a href="https://elements.envato.com/spring-fashion-photography-portrait-of-stylish-asi-9NLCLX9" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/33/posts/109188/image-upload/woman_posing.jpg" alt="spring fashion photography, portrait of stylish asian model in black strap dress, with trendy" id="iagj8" class="w-20 h-20 object-cover resized-image resized-image-desktop" loading="lazy" width="870px" height="587px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/33/posts/109188/image-upload/woman_posing.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/33/posts/109188/image-upload/woman_posing.jpg" alt="spring fashion photography, portrait of stylish asian model in black strap dress, with trendy" id="iagj8" class="w-20 h-20 object-cover resized-image resized-image-tablet" loading="lazy" width="650px" height="440px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/33/posts/109188/image-upload/woman_posing.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/33/posts/109188/image-upload/woman_posing.jpg" alt="spring fashion photography, portrait of stylish asian model in black strap dress, with trendy" id="iagj8" class="w-20 h-20 object-cover resized-image resized-image-mobile" loading="lazy" width="380px" height="260px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/33/posts/109188/image-upload/woman_posing.jpg 2x"&gt;&lt;/a&gt;&lt;a href="https://elements.envato.com/spring-fashion-photography-portrait-of-stylish-asi-9NLCLX9" class="w-full flex text-left underline div-container" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;&lt;div id="ibm7b" class="w-full"&gt;&lt;div&gt;Portrait of stylish model&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
  3596. &lt;/div&gt;
  3597. &lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ilksi"&gt;
  3598. &lt;h2 id="toc-e39f-how-to-remove-blemishes-using-ai"&gt;How to remove blemishes using AI&lt;/h2&gt;
  3599. &lt;p&gt;Instead of manually sampling areas, &lt;a href="https://labs.envato.com/image-edit" target="_blank" rel="noopener"&gt;ImageEdit&lt;/a&gt; can be your AI blemish remover. This tool can spot blemishes and fill them in with realistic skin texture sampled from surrounding areas. The AI tool understands skin tone, texture, and even subtle lighting variations, ensuring the patch is virtually undetectable.&lt;/p&gt;
  3600. &lt;p&gt;For this part, we’ll be using &lt;a href="https://elements.envato.com/girl-JPUGLHH" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;this portrait&lt;/a&gt;, which is available with your Envato subscription.&lt;/p&gt;
  3601. &lt;h3 id="toc-7cv3-step-1"&gt;Step 1&lt;/h3&gt;
  3602. &lt;p&gt;If you’re working with your own photo, click &lt;strong&gt;Upload Image&lt;/strong&gt;. Then select the image you want to edit with AI.&lt;/p&gt;
  3603. &lt;div class="callout-block"&gt;
  3604. &lt;span class="callout-icon callout-tip"&gt;&lt;/span&gt;
  3605. &lt;div class="callout-message"&gt;If you're working with a photo from Envato, you can edit it directly by clicking &lt;strong&gt;Edit with AI&lt;/strong&gt;.&lt;/div&gt;
  3606. &lt;/div&gt;
  3607. &lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i4c72"&gt;
  3608. &lt;h3 id="toc-tj2w-step-2"&gt;Step 2&lt;/h3&gt;
  3609. &lt;p&gt;Choose the AI photo &lt;strong&gt;Erase&lt;/strong&gt; tool from the left menu. &lt;/p&gt;
  3610. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2827/posts/109188/image-upload/Blemishes1.jpg" alt="how to remove blemishes with AI ImageEdit " loading="lazy" width="870px" height="501px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2827/posts/109188/image-upload/Blemishes1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2827/posts/109188/image-upload/Blemishes1.jpg" alt="how to remove blemishes with AI ImageEdit " loading="lazy" width="650px" height="377px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2827/posts/109188/image-upload/Blemishes1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2827/posts/109188/image-upload/Blemishes1.jpg" alt="how to remove blemishes with AI ImageEdit " loading="lazy" width="380px" height="224px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2827/posts/109188/image-upload/Blemishes1.jpg 2x"&gt;&lt;/figure&gt;
  3611. &lt;h3 id="toc-cu7l-step-3"&gt;Step 3&lt;/h3&gt;
  3612. &lt;p&gt;Select a brush size appropriate for the blemish you want to remove. Click and drag the brush over the spots you want to erase. Make sure to completely cover what you want to remove. &lt;/p&gt;
  3613. &lt;h3 id="toc-0y68-step-4"&gt;Step 4&lt;/h3&gt;
  3614. &lt;p&gt;In the provided text field, clearly describe what you want the AI to erase. In this case, I wanted to erase the glitter and replace it with bare skin. &lt;/p&gt;
  3615. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2827/posts/109188/image-upload/Blemish2.jpg" alt="how to remove blemishes with the Erase tool" loading="lazy" width="870px" height="505px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2827/posts/109188/image-upload/Blemish2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2827/posts/109188/image-upload/Blemish2.jpg" alt="how to remove blemishes with the Erase tool" loading="lazy" width="650px" height="379px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2827/posts/109188/image-upload/Blemish2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2827/posts/109188/image-upload/Blemish2.jpg" alt="how to remove blemishes with the Erase tool" loading="lazy" width="380px" height="225px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2827/posts/109188/image-upload/Blemish2.jpg 2x"&gt;&lt;/figure&gt;
  3616. &lt;h3 id="toc-gtvy-step-5"&gt;Step 5&lt;/h3&gt;
  3617. &lt;p&gt;Choose the option that you're satisfied with, click &lt;strong&gt;Keep&lt;/strong&gt;, and &lt;strong&gt;Download&lt;/strong&gt; the image.&lt;/p&gt;
  3618. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2827/posts/109188/image-upload/Blemish3.jpg" alt="remove blemishes with AI" loading="lazy" width="870px" height="502px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2827/posts/109188/image-upload/Blemish3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2827/posts/109188/image-upload/Blemish3.jpg" alt="remove blemishes with AI" loading="lazy" width="650px" height="377px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2827/posts/109188/image-upload/Blemish3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2827/posts/109188/image-upload/Blemish3.jpg" alt="remove blemishes with AI" loading="lazy" width="380px" height="224px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2827/posts/109188/image-upload/Blemish3.jpg 2x"&gt;&lt;/figure&gt;
  3619. &lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ijl7i"&gt;
  3620. &lt;h2 id="toc-9uzc-ai-wrinkle-remover"&gt;How to remove wrinkles using an AI wrinkle remover&lt;/h2&gt;
  3621. &lt;p&gt;Wrinkles happen naturally, but sometimes, for a particular aesthetic or for commercial purposes, we need a smoother texture. Let's go over the steps to erase wrinkles from &lt;a href="https://elements.envato.com/blonde-woman-exudes-positivity-confidence-as-stand-XLJ4GDR" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;this photo&lt;/a&gt; using the AI wrinkle remover. &lt;/p&gt;
  3622. &lt;h3 id="toc-dnce-step-1"&gt;Step 1&lt;/h3&gt;
  3623. &lt;p&gt;Select the image you want to edit with AI using &lt;strong&gt;Envato ImageEdit&lt;/strong&gt;.&lt;/p&gt;
  3624. &lt;h3 id="toc-q07x-step-2"&gt;Step 2&lt;/h3&gt;
  3625. &lt;p&gt;Click the AI &lt;strong&gt;Erase&lt;/strong&gt; tool from the left menu. &lt;/p&gt;
  3626. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2827/posts/109188/image-upload/Step2Wrinkle.jpg" alt="how to remove wrinkles with AI ImageEdit " loading="lazy" width="870px" height="571px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2827/posts/109188/image-upload/Step2Wrinkle.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2827/posts/109188/image-upload/Step2Wrinkle.jpg" alt="how to remove wrinkles with AI ImageEdit " loading="lazy" width="650px" height="428px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2827/posts/109188/image-upload/Step2Wrinkle.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2827/posts/109188/image-upload/Step2Wrinkle.jpg" alt="how to remove wrinkles with AI ImageEdit " loading="lazy" width="380px" height="253px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2827/posts/109188/image-upload/Step2Wrinkle.jpg 2x"&gt;&lt;/figure&gt;
  3627. &lt;h3 id="toc-kce8-step-3s"&gt;Step 3&lt;/h3&gt;
  3628. &lt;p&gt;Select a brush size appropriate for the object you want to remove. Click and drag the brush over the wrinkles you want to erase. Make sure to completely cover what you want to remove. &lt;/p&gt;
  3629. &lt;h3 id="toc-sjvj-step-4"&gt;Step 4&lt;/h3&gt;
  3630. &lt;p&gt;In the text field, describe what you want the AI to erase and replace. In this example, I wanted to erase the crease and replace it with smooth fabric. &lt;/p&gt;
  3631. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2827/posts/109188/image-upload/Step4.jpg" alt="wrinkle remover AI" loading="lazy" width="870px" height="577px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2827/posts/109188/image-upload/Step4.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2827/posts/109188/image-upload/Step4.jpg" alt="wrinkle remover AI" loading="lazy" width="650px" height="433px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2827/posts/109188/image-upload/Step4.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2827/posts/109188/image-upload/Step4.jpg" alt="wrinkle remover AI" loading="lazy" width="380px" height="256px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2827/posts/109188/image-upload/Step4.jpg 2x"&gt;&lt;/figure&gt;
  3632. &lt;h3 id="toc-mdd7-step-5"&gt;Step 5&lt;/h3&gt;
  3633. &lt;p&gt;Choose the option that you like the most, click &lt;strong&gt;Keep&lt;/strong&gt;, and &lt;strong&gt;Download&lt;/strong&gt; the cleaned image.&lt;/p&gt;
  3634. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2827/posts/109188/image-upload/Final.jpg" alt="how to remove wrinkles using AI" loading="lazy" width="870px" height="570px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2827/posts/109188/image-upload/Final.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2827/posts/109188/image-upload/Final.jpg" alt="how to remove wrinkles using AI" loading="lazy" width="650px" height="428px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2827/posts/109188/image-upload/Final.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2827/posts/109188/image-upload/Final.jpg" alt="how to remove wrinkles using AI" loading="lazy" width="380px" height="253px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2827/posts/109188/image-upload/Final.jpg 2x"&gt;&lt;/figure&gt;
  3635. &lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ix9p2"&gt;
  3636. &lt;h2 id="toc-c9cw-remove-a-tattoo-from-a-photo-using-ai"&gt;How to remove a tattoo from a photo using AI&lt;/h2&gt;
  3637. &lt;p&gt;Beyond facial features, AI's capabilities extend to removing objects or distractions from an image. In this section, we'll be using &lt;a href="https://labs.envato.com/image-edit" target="_blank" rel="noopener"&gt;ImageEdit&lt;/a&gt; as an AI tattoo removal tool with &lt;a href="https://elements.envato.com/serious-young-tattooed-black-man-touching-chin-in--V497CYX" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;this portrait&lt;/a&gt;.&lt;/p&gt;
  3638. &lt;h3 id="toc-l3q9-step-1"&gt;Step 1&lt;/h3&gt;
  3639. &lt;p&gt;Select the image you want to edit with AI using Envato ImageEdit.&lt;/p&gt;
  3640. &lt;h3 id="toc-gnm2-step-2"&gt;Step 2&lt;/h3&gt;
  3641. &lt;p&gt;Click the AI &lt;strong&gt;Erase&lt;/strong&gt; tool from the left menu. &lt;/p&gt;
  3642. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2827/posts/109188/image-upload/Tat1.jpg" alt="AI tattoo removal" loading="lazy" width="870px" height="507px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2827/posts/109188/image-upload/Tat1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2827/posts/109188/image-upload/Tat1.jpg" alt="AI tattoo removal" loading="lazy" width="650px" height="381px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2827/posts/109188/image-upload/Tat1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2827/posts/109188/image-upload/Tat1.jpg" alt="AI tattoo removal" loading="lazy" width="380px" height="226px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2827/posts/109188/image-upload/Tat1.jpg 2x"&gt;&lt;/figure&gt;
  3643. &lt;h3 id="toc-jczl-step-3"&gt;Step 3&lt;/h3&gt;
  3644. &lt;p&gt;Select a brush size appropriate for the details you want to remove. Click and drag the brush over the tattoos, completely covering what you want to erase. &lt;/p&gt;
  3645. &lt;h3 id="toc-uoiz-step-4"&gt;Step 4&lt;/h3&gt;
  3646. &lt;p&gt;In the description box, write what you want the AI to erase. In this case, I wanted to remove the model's tattoos, so I used the smallest brush size to cover the area properly. &lt;/p&gt;
  3647. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2827/posts/109188/image-upload/Tat2.jpg" alt="AI tattoo removal with ImageEdit" loading="lazy" width="870px" height="507px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2827/posts/109188/image-upload/Tat2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2827/posts/109188/image-upload/Tat2.jpg" alt="AI tattoo removal with ImageEdit" loading="lazy" width="650px" height="381px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2827/posts/109188/image-upload/Tat2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2827/posts/109188/image-upload/Tat2.jpg" alt="AI tattoo removal with ImageEdit" loading="lazy" width="380px" height="226px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2827/posts/109188/image-upload/Tat2.jpg 2x"&gt;&lt;/figure&gt;
  3648. &lt;h3 id="toc-mdd7-step-5"&gt;Step 5&lt;/h3&gt;
  3649. &lt;p&gt;Choose the option that you like the most, click &lt;strong&gt;Keep&lt;/strong&gt;, and &lt;strong&gt;Download&lt;/strong&gt; the cleaned image. And that's how easy it is to use this AI tattoo removal feature.&lt;/p&gt;
  3650. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2827/posts/109188/image-upload/Tat3.jpg" alt="AI tattoo remover using ImageEdit" loading="lazy" width="870px" height="502px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2827/posts/109188/image-upload/Tat3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2827/posts/109188/image-upload/Tat3.jpg" alt="AI tattoo remover using ImageEdit" loading="lazy" width="650px" height="377px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2827/posts/109188/image-upload/Tat3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2827/posts/109188/image-upload/Tat3.jpg" alt="AI tattoo remover using ImageEdit" loading="lazy" width="380px" height="224px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2827/posts/109188/image-upload/Tat3.jpg 2x"&gt;&lt;/figure&gt;
  3651. &lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iio4z"&gt;
  3652. &lt;h2 id="toc-8mc9-how-to-remove-stray-hairs"&gt;How to remove stray hairs using AI &lt;/h2&gt;
  3653. &lt;p&gt;Stray hairs, flyaways, or unruly strands can be incredibly frustrating for photographers and retouchers. Manually painting them out is a painstaking process, but ImageEdit provides a much more efficient solution. &lt;/p&gt;
  3654. &lt;p&gt;We'll be using &lt;a href="https://elements.envato.com/spring-fashion-photography-portrait-of-stylish-asi-9NLCLX9" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;this photo&lt;/a&gt; for this section. &lt;/p&gt;
  3655. &lt;h3 id="toc-hq1u-step-1"&gt;Step 1&lt;/h3&gt;
  3656. &lt;p&gt;Select the image you want to edit with AI using Envato ImageEdit.&lt;/p&gt;
  3657. &lt;h3 id="toc-7sxm-step-2"&gt;Step 2&lt;/h3&gt;
  3658. &lt;p&gt;Click the AI &lt;strong&gt;Erase&lt;/strong&gt; tool from the left menu. &lt;/p&gt;
  3659. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2827/posts/109188/image-upload/Stray1.jpg" alt="AI object remover" loading="lazy" width="870px" height="507px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2827/posts/109188/image-upload/Stray1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2827/posts/109188/image-upload/Stray1.jpg" alt="AI object remover" loading="lazy" width="650px" height="381px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2827/posts/109188/image-upload/Stray1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2827/posts/109188/image-upload/Stray1.jpg" alt="AI object remover" loading="lazy" width="380px" height="226px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2827/posts/109188/image-upload/Stray1.jpg 2x"&gt;&lt;/figure&gt;
  3660. &lt;h3 id="toc-94uy-step-3"&gt;Step 3&lt;/h3&gt;
  3661. &lt;p&gt;Select a brush size appropriate for the details you want to remove. Click and drag the brush over the stray hairs.&lt;/p&gt;
  3662. &lt;h3 id="toc-31gm-step-4"&gt;Step 4&lt;/h3&gt;
  3663. &lt;p&gt;In the description box, write what you want the AI to erase. In this case, I wanted to remove a part of the model's hairdo.  &lt;/p&gt;
  3664. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2827/posts/109188/image-upload/Stray2.jpg" alt="AI remove object from photo" loading="lazy" width="870px" height="509px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2827/posts/109188/image-upload/Stray2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2827/posts/109188/image-upload/Stray2.jpg" alt="AI remove object from photo" loading="lazy" width="650px" height="382px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2827/posts/109188/image-upload/Stray2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2827/posts/109188/image-upload/Stray2.jpg" alt="AI remove object from photo" loading="lazy" width="380px" height="227px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2827/posts/109188/image-upload/Stray2.jpg 2x"&gt;&lt;/figure&gt;
  3665. &lt;h3 id="toc-8g8g-step-5"&gt;Step 5&lt;/h3&gt;
  3666. &lt;p&gt;Choose the option that you like the most, click &lt;strong&gt;Keep&lt;/strong&gt;, and &lt;strong&gt;Download&lt;/strong&gt; the final image.&lt;/p&gt;
  3667. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2827/posts/109188/image-upload/Stray3.jpg" alt="remove stray hairs from photo using AI " loading="lazy" width="870px" height="507px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2827/posts/109188/image-upload/Stray3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2827/posts/109188/image-upload/Stray3.jpg" alt="remove stray hairs from photo using AI " loading="lazy" width="650px" height="381px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2827/posts/109188/image-upload/Stray3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2827/posts/109188/image-upload/Stray3.jpg" alt="remove stray hairs from photo using AI " loading="lazy" width="380px" height="226px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2827/posts/109188/image-upload/Stray3.jpg 2x"&gt;&lt;/figure&gt;
  3668. &lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="insoj"&gt;
  3669. &lt;h2 id="toc-e7xg-explore-envatos-ai-tools"&gt;Explore Envato's AI tools&lt;/h2&gt;
  3670. &lt;p&gt;Did you know that your Envato subscription gives you full access to a &lt;a href="https://elements.envato.com/learn/envato-ai-features" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;stack of AI tools&lt;/a&gt;? That includes &lt;strong&gt;ImageEdit&lt;/strong&gt;, &lt;strong&gt;ImageGen&lt;/strong&gt;, &lt;strong&gt;MusicGen&lt;/strong&gt;, &lt;strong&gt;VoiceGen&lt;/strong&gt;, &lt;strong&gt;GraphicGen&lt;/strong&gt;, &lt;strong&gt;InspoGen&lt;/strong&gt;, and &lt;strong&gt;VideoGen&lt;/strong&gt;. &lt;/p&gt;
  3671. &lt;p&gt;These tools are super easy to use, so you can save time on tricky tasks, simplify your &lt;a href="https://design.tutsplus.com/tutorials/how-to-edit-images-with-ai--cms-109178" target="_blank" rel="noopener"&gt;photo editing&lt;/a&gt; and design, and just make creative work way more fun and accessible.&lt;/p&gt;
  3672. &lt;p&gt;Want to get even more out of your creative potential with AI? Check out our other articles for extra tips and tricks!&lt;/p&gt;
  3673. &lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ig1i"&gt;&lt;ul class="roundup-block__contents posts--half-width roundup-block--list"&gt;
  3674. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-edit-images-with-ai--cms-109178"&gt;&lt;div class="roundup-block__content-container"&gt;
  3675. &lt;div class="roundup-block__preview"&gt;
  3676. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/48/posts/109178/preview_image/image_edit_pre.jpg" alt="" loading="lazy" width="820px" height="574px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1600/uploads/users/48/posts/109178/preview_image/image_edit_pre.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/48/posts/109178/preview_image/image_edit_pre.jpg" alt="" loading="lazy" width="650px" height="456px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/48/posts/109178/preview_image/image_edit_pre.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/48/posts/109178/preview_image/image_edit_pre.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/48/posts/109178/preview_image/image_edit_pre.jpg 2x"&gt;
  3677. &lt;/div&gt;
  3678. &lt;div class="roundup-block__content-meta"&gt;
  3679. &lt;div class="roundup-block__content-title"&gt;How to edit images with AI ImageEdit&lt;/div&gt;
  3680. &lt;div class="roundup-block__author-info"&gt;
  3681. &lt;div class="roundup-block__author-profile-image"&gt;
  3682. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2827/profiles/21353/profileImage/Headshot.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2827/profiles/21353/profileImage/Headshot.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2827/profiles/21353/profileImage/Headshot.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2827/profiles/21353/profileImage/Headshot.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2827/profiles/21353/profileImage/Headshot.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2827/profiles/21353/profileImage/Headshot.jpg 2x"&gt;
  3683. &lt;/div&gt;
  3684. &lt;div class="roundup-block__author-meta"&gt;
  3685. &lt;div class="roundup-block__author-name"&gt;Alina Midori Hernández&lt;/div&gt;
  3686. &lt;div class="roundup-block__published-date"&gt;14 May 2025&lt;/div&gt;
  3687. &lt;/div&gt;
  3688. &lt;/div&gt;
  3689. &lt;/div&gt;
  3690. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  3691. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-enlarge-an-image-without-losing-quality--cms-109173"&gt;&lt;div class="roundup-block__content-container"&gt;
  3692. &lt;div class="roundup-block__preview"&gt;
  3693. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/109/posts/109173/preview_image/3408_tut__How_to_enlarge_an_image_withou_losing_quality_ImageEdit_photoshop_Prev_2.jpg" alt="" loading="lazy" width="820px" height="574px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1600/uploads/users/109/posts/109173/preview_image/3408_tut__How_to_enlarge_an_image_withou_losing_quality_ImageEdit_photoshop_Prev_2.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/109/posts/109173/preview_image/3408_tut__How_to_enlarge_an_image_withou_losing_quality_ImageEdit_photoshop_Prev_2.jpg" alt="" loading="lazy" width="650px" height="456px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/109/posts/109173/preview_image/3408_tut__How_to_enlarge_an_image_withou_losing_quality_ImageEdit_photoshop_Prev_2.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/posts/109173/preview_image/3408_tut__How_to_enlarge_an_image_withou_losing_quality_ImageEdit_photoshop_Prev_2.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/posts/109173/preview_image/3408_tut__How_to_enlarge_an_image_withou_losing_quality_ImageEdit_photoshop_Prev_2.jpg 2x"&gt;
  3694. &lt;/div&gt;
  3695. &lt;div class="roundup-block__content-meta"&gt;
  3696. &lt;div class="roundup-block__content-title"&gt;How to enlarge an image without losing quality&lt;/div&gt;
  3697. &lt;div class="roundup-block__author-info"&gt;
  3698. &lt;div class="roundup-block__author-profile-image"&gt;
  3699. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/109/profiles/2378/profileImage/MissChatz_Logo_2020_01_MissChatz_Logo_Mid_400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/109/profiles/2378/profileImage/MissChatz_Logo_2020_01_MissChatz_Logo_Mid_400.png 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/109/profiles/2378/profileImage/MissChatz_Logo_2020_01_MissChatz_Logo_Mid_400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/109/profiles/2378/profileImage/MissChatz_Logo_2020_01_MissChatz_Logo_Mid_400.png 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/109/profiles/2378/profileImage/MissChatz_Logo_2020_01_MissChatz_Logo_Mid_400.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/109/profiles/2378/profileImage/MissChatz_Logo_2020_01_MissChatz_Logo_Mid_400.png 2x"&gt;
  3700. &lt;/div&gt;
  3701. &lt;div class="roundup-block__author-meta"&gt;
  3702. &lt;div class="roundup-block__author-name"&gt;MissChatz&lt;/div&gt;
  3703. &lt;div class="roundup-block__published-date"&gt;16 May 2025&lt;/div&gt;
  3704. &lt;/div&gt;
  3705. &lt;/div&gt;
  3706. &lt;/div&gt;
  3707. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  3708. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-crop-an-image-with-ai--cms-109182"&gt;&lt;div class="roundup-block__content-container"&gt;
  3709. &lt;div class="roundup-block__preview"&gt;
  3710. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2827/posts/109182/preview_image/Featured_How_to_Crop_an_Image_with_AI.jpg" alt="" loading="lazy" width="820px" height="574px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1600/uploads/users/2827/posts/109182/preview_image/Featured_How_to_Crop_an_Image_with_AI.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2827/posts/109182/preview_image/Featured_How_to_Crop_an_Image_with_AI.jpg" alt="" loading="lazy" width="650px" height="456px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2827/posts/109182/preview_image/Featured_How_to_Crop_an_Image_with_AI.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2827/posts/109182/preview_image/Featured_How_to_Crop_an_Image_with_AI.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2827/posts/109182/preview_image/Featured_How_to_Crop_an_Image_with_AI.jpg 2x"&gt;
  3711. &lt;/div&gt;
  3712. &lt;div class="roundup-block__content-meta"&gt;
  3713. &lt;div class="roundup-block__content-title"&gt;How to crop an image with AI ImageEdit&lt;/div&gt;
  3714. &lt;div class="roundup-block__author-info"&gt;
  3715. &lt;div class="roundup-block__author-profile-image"&gt;
  3716. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2827/profiles/21353/profileImage/Headshot.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2827/profiles/21353/profileImage/Headshot.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2827/profiles/21353/profileImage/Headshot.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2827/profiles/21353/profileImage/Headshot.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2827/profiles/21353/profileImage/Headshot.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2827/profiles/21353/profileImage/Headshot.jpg 2x"&gt;
  3717. &lt;/div&gt;
  3718. &lt;div class="roundup-block__author-meta"&gt;
  3719. &lt;div class="roundup-block__author-name"&gt;Alina Midori Hernández&lt;/div&gt;
  3720. &lt;div class="roundup-block__published-date"&gt;21 May 2025&lt;/div&gt;
  3721. &lt;/div&gt;
  3722. &lt;/div&gt;
  3723. &lt;/div&gt;
  3724. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  3725. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-create-a-movie-poster-using-ai-with-imagegen-and-imageedit--cms-109151"&gt;&lt;div class="roundup-block__content-container"&gt;
  3726. &lt;div class="roundup-block__preview"&gt;
  3727. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/33/posts/109151/preview_image/envatoimageeditpreview.jpg" alt="" loading="lazy" width="820px" height="574px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1600/uploads/users/33/posts/109151/preview_image/envatoimageeditpreview.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/33/posts/109151/preview_image/envatoimageeditpreview.jpg" alt="" loading="lazy" width="650px" height="456px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/33/posts/109151/preview_image/envatoimageeditpreview.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/33/posts/109151/preview_image/envatoimageeditpreview.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/33/posts/109151/preview_image/envatoimageeditpreview.jpg 2x"&gt;
  3728. &lt;/div&gt;
  3729. &lt;div class="roundup-block__content-meta"&gt;
  3730. &lt;div class="roundup-block__content-title"&gt;How to create a movie poster using AI with Envato ImageGen and ImageEdit&lt;/div&gt;
  3731. &lt;div class="roundup-block__author-info"&gt;
  3732. &lt;div class="roundup-block__author-profile-image"&gt;
  3733. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2796/profiles/21283/profileImage/Ash_HS_1.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2796/profiles/21283/profileImage/Ash_HS_1.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2796/profiles/21283/profileImage/Ash_HS_1.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2796/profiles/21283/profileImage/Ash_HS_1.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2796/profiles/21283/profileImage/Ash_HS_1.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2796/profiles/21283/profileImage/Ash_HS_1.jpg 2x"&gt;
  3734. &lt;/div&gt;
  3735. &lt;div class="roundup-block__author-meta"&gt;
  3736. &lt;div class="roundup-block__author-name"&gt;Ashlee Harrell&lt;/div&gt;
  3737. &lt;div class="roundup-block__published-date"&gt;14 Mar 2025&lt;/div&gt;
  3738. &lt;/div&gt;
  3739. &lt;/div&gt;
  3740. &lt;/div&gt;
  3741. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  3742. &lt;/ul&gt;&lt;/div&gt;&lt;div class="mediafed_ad"&gt;&lt;img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/669438/s/109188/sc/4/mf.gif" width="1" /&gt;&lt;a href="http://da.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/109188/a2.htm"&gt;&lt;img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/109188/a2.img" /&gt;&lt;/a&gt;&lt;img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/109188/a2t.img" width="1" /&gt;&lt;/div&gt;</content>
  3743.    <published>2025-06-25 09:17:48 UTC</published>
  3744.    <updated>2025-06-25 09:17:48 UTC</updated>
  3745.    <author>
  3746.      <name>Alina Midori Hernández</name>
  3747.    </author>
  3748.  </entry>
  3749.  <entry>
  3750.    <id>tag:tutsplus.com,2005:PostPresenter/cms-109186</id>
  3751.    <published>2025-06-03T11:12:53+00:00</published>
  3752.    <link rel="alternate" type="text/html" href="https://photography.tutsplus.com/articles/davinci-resolve-ai--cms-109186"/>
  3753.    <title>DaVinci Resolve AI workflow: Smart editing, color grading, and audio enhancement</title>
  3754.    <content type="html">&lt;style&gt;* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#i7o5{background-color:rgb(243, 245, 246);}&lt;/style&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iq42"&gt;
  3755. &lt;p&gt;DaVinci Resolve is a bit of a video editing beast! And its latest AI features take things to a whole new level. This isn’t just basic automation, the AI feels like it actually gets what editors are trying to do. It cuts scenes, tracks movement, isolates voices, matches colors and all the stuff that usually eats up time.&lt;/p&gt;
  3756. &lt;p&gt;Let’s look at how these &lt;a href="https://labs.envato.com/video-gen" target="_self"&gt;AI tools&lt;/a&gt; have completely transformed creative workflows. From making fast, smart edits to dialling in colors and cleaning up messy audio. If you’re a digital artist, designer, or just someone who likes bringing visual ideas to life, I think you’ll find these features seriously helpful (and fun).&lt;/p&gt;
  3757. &lt;figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=qexb6qgdicU&amp;amp;t=0"&gt;
  3758.            &lt;iframe src="https://www.youtube.com/embed/qexb6qgdicU?rel=0&amp;amp;start=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy" style="border-radius: 15px;"&gt;&lt;/iframe&gt;
  3759.          &lt;/figure&gt;
  3760. &lt;/div&gt;&lt;div data-content-block-type="FullWidthSection" class="content-block content-block-fullwidthsection" id="i7o5"&gt;&lt;div class="full-width-section__content-container div-container"&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i4kk"&gt;
  3761. &lt;h2 id="toc-83ky-envato-videogen-now-with-veo-3"&gt;Meet Envato VideoGen: AI video tool&lt;/h2&gt;
  3762. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/109186/image-upload/videogen.jpg" alt="videogen with veo 3" loading="lazy" width="870px" height="498px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/109186/image-upload/videogen.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109186/image-upload/videogen.jpg" alt="videogen with veo 3" loading="lazy" width="650px" height="375px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109186/image-upload/videogen.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109186/image-upload/videogen.jpg" alt="videogen with veo 3" loading="lazy" width="380px" height="223px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109186/image-upload/videogen.jpg 2x"&gt;&lt;/figure&gt;
  3763. &lt;p&gt;With Envato, you get access to a full stack of AI tools (&lt;a href="https://labs.envato.com/image-gen" target="_self"&gt;ImageGen&lt;/a&gt;, &lt;a href="https://labs.envato.com/image-edit" target="_self"&gt;ImageEdit&lt;/a&gt;, &lt;a href="https://labs.envato.com/video-gen"&gt;VideoGen&lt;/a&gt;), designed to accelerate your creative journey, all included as part of your subscription. For video creators, that means you can effortlessly generate videos from images or text prompts using VideoGen, including the best and latest models available such as Veo 3.&lt;/p&gt;
  3764. &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ivtk"&gt;
  3765. &lt;h2 id="toc-0b1h-why-creatives-should-care-about-ai-in-davinci-resolve"&gt;
  3766. &lt;span class="sectionnum"&gt;1.&lt;/span&gt; Why creatives should care about DaVinci Resolve AI&lt;/h2&gt;
  3767. &lt;p&gt;Video editing can be a rabbit hole of timelines, keyframes, and endless tweaks. AI tools in DaVinci Resolve take over the boring (and often frustrating) parts, so you can stay focused on what really matters, your creative vision. For example, AI can:&lt;/p&gt;
  3768. &lt;ul&gt;
  3769. &lt;li&gt;Automatically cut up long clips using &lt;strong&gt;Scene Detection&lt;/strong&gt;
  3770. &lt;/li&gt;
  3771. &lt;li&gt;Identify and track objects or people with &lt;strong&gt;Magic Mask&lt;/strong&gt;
  3772. &lt;/li&gt;
  3773. &lt;li&gt;Balance inconsistent audio using &lt;strong&gt;Voice Isolation&lt;/strong&gt;
  3774. &lt;/li&gt;
  3775. &lt;li&gt;Instantly create social-friendly versions with &lt;strong&gt;Smart Reframe&lt;/strong&gt;
  3776. &lt;/li&gt;
  3777. &lt;/ul&gt;
  3778. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_14.jpg" alt="What’s New in DaVinci Resolve 20" loading="lazy" width="870px" height="330px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_14.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_14.jpg" alt="What’s New in DaVinci Resolve 20" loading="lazy" width="650px" height="250px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_14.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_14.jpg" alt="What’s New in DaVinci Resolve 20" loading="lazy" width="380px" height="151px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_14.jpg 2x"&gt;&lt;/figure&gt;
  3779. &lt;h3 id="toc-r4n1-no-need-to-be-a-video-expert"&gt;No need to be a video expert&lt;/h3&gt;
  3780. &lt;p&gt;If you're already familiar with creative tools like Photoshop or Illustrator, jumping into DaVinci Resolve AI will feel quite natural. These AI features are designed to be beginner friendly (e.g. the features just work with a click or a slider) so there’s no need to dive into keyframes unless you want to. Here's a quick list of what makes it beginner friendly:&lt;/p&gt;
  3781. &lt;ul&gt;
  3782. &lt;li&gt;Tools are often one click or slider-based&lt;/li&gt;
  3783. &lt;li&gt;There are clear visual results&lt;/li&gt;
  3784. &lt;li&gt;Plenty of tutorials and community support are out there&lt;/li&gt;
  3785. &lt;/ul&gt;
  3786. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_06.jpg" alt="AI Magic Mask 2" loading="lazy" width="870px" height="478px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_06.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_06.jpg" alt="AI Magic Mask 2" loading="lazy" width="650px" height="359px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_06.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_06.jpg" alt="AI Magic Mask 2" loading="lazy" width="380px" height="214px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_06.jpg 2x"&gt;&lt;/figure&gt;
  3787. &lt;h2 id="toc-5zb6-smart-editing-with-davinci-neural-engine"&gt;
  3788. &lt;span class="sectionnum"&gt;2. &lt;/span&gt;Smart editing with DaVinci Neural Engine&lt;/h2&gt;
  3789. &lt;p&gt;Editing used to be the part that took the longest. Trimming clips, hunting for the right frames, adjusting every little detail. But with the DaVinci Neural Engine, a lot of that has become surprisingly hands-off. &lt;/p&gt;
  3790. &lt;h3 id="toc-0x9i-let-the-ai-do-the-heavy-lifting"&gt;Let the AI do the heavy lifting&lt;/h3&gt;
  3791. &lt;p&gt;The DaVinci Neural Engine uses machine learning to analyze your footage and make smart decisions instantly. That means you can spend less time clicking and more time shaping your story. Here are a few of our favorite tools:&lt;/p&gt;
  3792. &lt;ul&gt;
  3793. &lt;li&gt;
  3794. &lt;strong&gt;Scene Cut Detection: &lt;/strong&gt;Automatically detects edits in long video files (like screen recordings or exported projects) and breaks them into individual clips.&lt;/li&gt;
  3795. &lt;li&gt;
  3796. &lt;strong&gt;Smart Reframe: &lt;/strong&gt;Need to make a vertical or square version of your video for Instagram or TikTok? This tool intelligently tracks the subject and reframes the shot without cutting off anything important. It’s perfect for turning horizontal content into social posts.&lt;/li&gt;
  3797. &lt;li&gt;
  3798. &lt;strong&gt;Object Removal: &lt;/strong&gt;Got an unwanted logo or distraction in the background? This feature helps clean up your footage without needing any complicated masking or rotoscoping.&lt;/li&gt;
  3799. &lt;li&gt;
  3800. &lt;strong&gt;AI Set Extender: &lt;/strong&gt;This expands your scene to fill the entire frame using a simple text prompt. Just highlight the area to extend, and it automatically generates missing regions, even adding new backgrounds behind foreground objects.&lt;/li&gt;
  3801. &lt;/ul&gt;
  3802. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_00.jpg" alt="The AI Set Extender " loading="lazy" width="870px" height="478px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_00.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_00.jpg" alt="The AI Set Extender " loading="lazy" width="650px" height="359px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_00.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_00.jpg" alt="The AI Set Extender " loading="lazy" width="380px" height="214px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_00.jpg 2x"&gt;&lt;/figure&gt;
  3803. &lt;h3 id="toc-dyr6-perfect-for-fast-paced-content-creation"&gt;Perfect for fast-paced content creation&lt;/h3&gt;
  3804. &lt;p&gt;We've found that these AI-powered editing tools make a big difference when working on quick-turnaround projects. The technical parts are handled with ease, whether it’s social media content, promo reels, or behind-the-scenes clips. Which is a huge help when you're up against deadlines or balancing multiple creative tasks and it lets us spend more time on storytelling, visuals, and refining the overall vibe.&lt;/p&gt;
  3805. &lt;h2 id="toc-7cs6-ai-powered-color-grading"&gt;
  3806. &lt;span class="sectionnum"&gt;3. &lt;/span&gt;AI-powered color grading&lt;/h2&gt;
  3807. &lt;p&gt;Color grading is where a project really starts to come alive. It’s the moment everything clicks, from the mood to the tone to the overall feel. But getting it all to look just right? That can be tricky. This is where DaVinci Resolve AI can help take some of the pressure off and make the whole process smoother.&lt;/p&gt;
  3808. &lt;figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=8FNxCYvVkag&amp;amp;t=0"&gt;
  3809.            &lt;iframe src="https://www.youtube.com/embed/8FNxCYvVkag?rel=0&amp;amp;start=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy" style="border-radius: 15px;"&gt;&lt;/iframe&gt;
  3810.          &lt;/figure&gt;
  3811. &lt;h3 id="toc-fkep-get-that-cinematic-look-without-the-guesswork"&gt;Get that cinematic look without the guesswork&lt;/h3&gt;
  3812. &lt;p&gt;With a few clicks, AI tools in DaVinci Resolve can balance, match, and enhance colors across your footage, even if you’re starting with something shot on a phone or a basic camera. Here are a few tools you can rely on:&lt;/p&gt;
  3813. &lt;ul&gt;
  3814. &lt;li&gt;
  3815. &lt;strong&gt;Magic Mask: &lt;/strong&gt; Just draw a rough stroke over your subject, and Resolve uses AI to isolate it across the entire clip, frame by frame. It’s perfect for applying color effects to just one part of the shot, like separating a character from the background.&lt;/li&gt;
  3816. &lt;li&gt;
  3817. &lt;strong&gt;Auto Color and Shot Match: &lt;/strong&gt;Don’t want to grade every clip by hand? Let AI do it for you. Auto Color gives your footage a clean, balanced look instantly. Shot Match is especially helpful for getting different clips to look consistent. This is great for scenes filmed at different times or on different devices.&lt;/li&gt;
  3818. &lt;li&gt;
  3819. &lt;strong&gt;Depth Map: &lt;/strong&gt;Want to create a dreamy background blur or highlight your subject with subtle lighting? This tool uses AI to generate a depth map of your scene, letting you grade different areas based on their distance from the camera, no green screen required.&lt;/li&gt;
  3820. &lt;/ul&gt;
  3821. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_02.jpg" alt="Automatic Depth Map" loading="lazy" width="870px" height="478px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_02.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_02.jpg" alt="Automatic Depth Map" loading="lazy" width="650px" height="359px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_02.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_02.jpg" alt="Automatic Depth Map" loading="lazy" width="380px" height="214px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_02.jpg 2x"&gt;&lt;/figure&gt;
  3822. &lt;h3 id="toc-3q0a-perfect-for-artists-who-want-to-add-cinematic-flair"&gt;Perfect for artists who want to add cinematic flair&lt;/h3&gt;
  3823. &lt;p&gt;These AI color grading tools are ideal for creatives who care about visual style but don’t want to get buried in color wheels and scopes. Whether you're making animated reels, art videos, or portfolio pieces, they help bring your visuals to life with rich, professional looking color.&lt;/p&gt;
  3824. &lt;h2 id="toc-830l-audio-enhancement-with-ai"&gt;
  3825. &lt;span class="sectionnum"&gt;4.&lt;/span&gt; Audio enhancement with AI&lt;/h2&gt;
  3826. &lt;p&gt;Clean, clear sound can make a huge difference in how polished your final video feels. And DaVinci Resolve’s AI-powered audio tools take a lot of the stress out of sound editing, even if you have zero experience.&lt;/p&gt;
  3827. &lt;h3 id="toc-ujx3-make-your-audio-sound-like-it-was-recorded-in-a-studio-even-if-it-wasnt"&gt;Make your audio sound like it was recorded in a studio (even if it wasn’t)&lt;/h3&gt;
  3828. &lt;p&gt;Whether you're working with voiceovers, interviews, or ambient sound, Resolve’s Fairlight tab has some seriously impressive AI features that fix common problems in just a few clicks. Here are some of the tools:&lt;/p&gt;
  3829. &lt;ul&gt;
  3830. &lt;li&gt;
  3831. &lt;strong&gt;Voice Isolation: &lt;/strong&gt;This separates dialogue from background noise such as traffic, fans, room echo and keeps your voice sounding clean and natural. Great for recording in less-than-ideal environments (aka our homes).&lt;/li&gt;
  3832. &lt;li&gt;
  3833. &lt;strong&gt;Dialogue Leveler: &lt;/strong&gt;Automatically balances out the volume of spoken audio so everything sounds consistent. No more sudden jumps between clips.&lt;/li&gt;
  3834. &lt;li&gt;
  3835. &lt;strong&gt;Auto Ducking: &lt;/strong&gt;When you have music and dialogue in the same timeline, auto ducking lowers the music volume whenever someone’s speaking. It sounds subtle and professional, and you don’t have to keyframe a thing.&lt;/li&gt;
  3836. &lt;li&gt;
  3837. &lt;strong&gt;Noise Reduction&lt;/strong&gt;&lt;strong&gt;: &lt;/strong&gt;Removes unwanted hums, hisses, and low level static without killing the quality of your audio.&lt;/li&gt;
  3838. &lt;li&gt;
  3839. &lt;strong&gt;AI Music Editor: &lt;/strong&gt;Easily adjust a music track to fit your video with automatic edits. The audio is analyzed and trimmed or extended to match, with four versions to choose from, visual indicators, and editable sections for flexibility.&lt;/li&gt;
  3840. &lt;li&gt;
  3841. &lt;strong&gt;EQ and Level Matcher: &lt;/strong&gt;This allows you automatically match a clip’s audio level or tone to a reference clip. EQ Match adjusts dynamically for consistent sound, while Level Matcher ensures smooth transitions between clips without manual tweaks.&lt;/li&gt;
  3842. &lt;/ul&gt;
  3843. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_04.jpg" alt="EQ and Level Matcher" loading="lazy" width="870px" height="478px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_04.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_04.jpg" alt="EQ and Level Matcher" loading="lazy" width="650px" height="359px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_04.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_04.jpg" alt="EQ and Level Matcher" loading="lazy" width="380px" height="214px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_04.jpg 2x"&gt;&lt;/figure&gt;
  3844. &lt;h3 id="toc-748e-perfect-for-tutorials-reels-and-animated-voiceovers"&gt;Perfect for tutorials, reels, and animated voiceovers&lt;/h3&gt;
  3845. &lt;p&gt;These tools are useful across all kinds of creative projects. From design tutorial voiceovers to animated shorts and social videos. Even when the visuals are strong, poor audio can be distracting, so having AI handle the cleanup makes a big difference.&lt;/p&gt;
  3846. &lt;h2 id="toc-378n-a-sample-workflow-from-raw-footage-to-final-upload"&gt;
  3847. &lt;span class="sectionnum"&gt;5.&lt;/span&gt; Sample workflow: From raw footage to final upload&lt;/h2&gt;
  3848. &lt;h3 id="toc-bybu-step-1-import-and-organize-your-footage"&gt;Step 1: Import and organize your footage&lt;/h3&gt;
  3849. &lt;p&gt;We start by bringing in our clips, audio, and any reference files into the Media Pool. Labelling and organizing everything early saves so much time down the line, especially if we’re juggling different versions.&lt;/p&gt;
  3850. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_08.jpg" alt="import media" loading="lazy" width="870px" height="424px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_08.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_08.jpg" alt="import media" loading="lazy" width="650px" height="319px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_08.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_08.jpg" alt="import media" loading="lazy" width="380px" height="191px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_08.jpg 2x"&gt;&lt;/figure&gt;
  3851. &lt;h3 id="toc-rosq-step-2-let-ai-handle-the-first-edit"&gt;Step 2: Let AI handle the first edit&lt;/h3&gt;
  3852. &lt;p&gt;We use &lt;strong&gt;Scene Cut Detection&lt;/strong&gt; to automatically slice up long footage, especially if it’s a single export or screen recording. From there, &lt;strong&gt;Smart Reframe&lt;/strong&gt; helps us prep square or vertical versions for social platforms with minimal effort.&lt;/p&gt;
  3853. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_09.jpg" alt="scene cut detection" loading="lazy" width="870px" height="424px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_09.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_09.jpg" alt="scene cut detection" loading="lazy" width="650px" height="319px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_09.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_09.jpg" alt="scene cut detection" loading="lazy" width="380px" height="191px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_09.jpg 2x"&gt;&lt;/figure&gt;
  3854. &lt;h3 id="toc-n0jn-step-3-clean-up-the-audio"&gt;Step 3: Clean up the audio&lt;/h3&gt;
  3855. &lt;p&gt;Next, we head to the Fairlight tab. This is where &lt;strong&gt;Voice Isolation&lt;/strong&gt; and &lt;strong&gt;Dialogue Leveler&lt;/strong&gt; work their magic. If we’re using background music, &lt;strong&gt;Auto Ducking&lt;/strong&gt; makes sure it doesn’t overpower any talking.&lt;/p&gt;
  3856. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_10.jpg" alt="Fairlight tab " loading="lazy" width="870px" height="415px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_10.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_10.jpg" alt="Fairlight tab " loading="lazy" width="650px" height="313px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_10.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_10.jpg" alt="Fairlight tab " loading="lazy" width="380px" height="187px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_10.jpg 2x"&gt;&lt;/figure&gt;
  3857. &lt;h3 id="toc-ydmg-step-4-dial-in-the-visuals"&gt;Step 4: Dial in the visuals&lt;/h3&gt;
  3858. &lt;p&gt;Time for some style. We use &lt;strong&gt;Magic Mask&lt;/strong&gt; to isolate subjects and tweak their colors or lighting without affecting the background. &lt;strong&gt;Auto Color&lt;/strong&gt; gives us a solid starting point, and &lt;strong&gt;Shot Match&lt;/strong&gt; helps everything feel consistent across the edit. If we want to get fancy, the &lt;strong&gt;Depth Map&lt;/strong&gt; lets us blur or grade different parts of the scene based on distance, it’s a subtle touch, but really effective.&lt;/p&gt;
  3859. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_11.jpg" alt="Magic Mask" loading="lazy" width="870px" height="455px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_11.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_11.jpg" alt="Magic Mask" loading="lazy" width="650px" height="342px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_11.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_11.jpg" alt="Magic Mask" loading="lazy" width="380px" height="204px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_11.jpg 2x"&gt;&lt;/figure&gt;
  3860. &lt;h3 id="toc-sy2i-step-5-add-titles-transitions-and-finishing-touches"&gt;Step 5: Add titles, transitions, and finishing touches&lt;/h3&gt;
  3861. &lt;p&gt;This is where we layer in motion graphics, text, or callouts, which is usually built directly in Resolve or pulled in from Illustrator or Photoshop. We also double check our pacing and make any final trims here.&lt;/p&gt;
  3862. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_12.jpg" alt="add titles, transitions, and finishing touches" loading="lazy" width="870px" height="587px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_12.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_12.jpg" alt="add titles, transitions, and finishing touches" loading="lazy" width="650px" height="440px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_12.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_12.jpg" alt="add titles, transitions, and finishing touches" loading="lazy" width="380px" height="260px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_12.jpg 2x"&gt;&lt;/figure&gt;
  3863. &lt;h3 id="toc-htm5-step-6-export-and-share"&gt;Step 6: Export and share&lt;/h3&gt;
  3864. &lt;p&gt;Finally, we head to the &lt;strong&gt;Deliver&lt;/strong&gt; tab, pick our platform presets (YouTube, Instagram, etc.), and export. If it’s going to multiple platforms, we’ll export different aspect ratios, and the AI reframing makes that part super easy.&lt;/p&gt;
  3865. &lt;p&gt;And that’s it! A full creative workflow, powered by AI and way less intimidating than it sounds. The more we use these tools, the more we realize how much time and mental energy they save. Which let's us stay focused on the fun stuff.&lt;/p&gt;
  3866. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_13.jpg" alt="export video" loading="lazy" width="870px" height="587px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_13.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_13.jpg" alt="export video" loading="lazy" width="650px" height="440px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_13.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_13.jpg" alt="export video" loading="lazy" width="380px" height="260px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/403/posts/109186/image-upload/DaVinci_Resolve_AI_Workflow_13.jpg 2x"&gt;&lt;/figure&gt;
  3867. &lt;h2 id="toc-2e45-final-thoughts"&gt;Final Thoughts&lt;/h2&gt;
  3868. &lt;p&gt;DaVinci Resolve AI isn’t about taking control away, it’s about giving time and creative freedom back. Whether you’re editing your first reel, color grading a short, or cleaning up audio on a design tutorial, these tools make the whole process smoother and way less intimidating. &lt;/p&gt;
  3869. &lt;p&gt;&lt;span&gt;We’ve found that once you start using &lt;/span&gt;&lt;a href="https://labs.envato.com/video-gen" target="_self"&gt;AI tools such as VideoGen and ImageEdit&lt;/a&gt;, it’s hard to go back. They help you move faster, stay inspired, and spend more time doing the creative process.&lt;/p&gt;
  3870. &lt;h3 id="toc-pogj-learn-more-about-ai-and-video-editing"&gt;Learn more about AI and Video Editing&lt;/h3&gt;
  3871. &lt;ul class="roundup-block__contents posts--half-width roundup-block--list"&gt;
  3872. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://photography.tutsplus.com/tutorials/veo-3-for-cinematic-results--cms-109196"&gt;&lt;div class="roundup-block__content-container"&gt;
  3873. &lt;div class="roundup-block__preview"&gt;
  3874. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/109196/preview_image/preview.jpg" alt="" loading="lazy" width="820px" height="574px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1600/uploads/users/30/posts/109196/preview_image/preview.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109196/preview_image/preview.jpg" alt="" loading="lazy" width="650px" height="456px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109196/preview_image/preview.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109196/preview_image/preview.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109196/preview_image/preview.jpg 2x"&gt;
  3875. &lt;/div&gt;
  3876. &lt;div class="roundup-block__content-meta"&gt;
  3877. &lt;div class="roundup-block__content-title"&gt;How to get cinematic results with VideoGen, now with Veo 3&lt;/div&gt;
  3878. &lt;div class="roundup-block__author-info"&gt;
  3879. &lt;div class="roundup-block__author-profile-image"&gt;
  3880. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/403/profiles/18836/profileImage/jon_lam.jpg 2x"&gt;
  3881. &lt;/div&gt;
  3882. &lt;div class="roundup-block__author-meta"&gt;
  3883. &lt;div class="roundup-block__author-name"&gt;Jonathan Lam&lt;/div&gt;
  3884. &lt;div class="roundup-block__published-date"&gt;13 Jun 2025&lt;/div&gt;
  3885. &lt;/div&gt;
  3886. &lt;/div&gt;
  3887. &lt;/div&gt;
  3888. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  3889. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://photography.tutsplus.com/tutorials/vibe-coding-after-effects--cms-109198"&gt;&lt;div class="roundup-block__content-container"&gt;
  3890. &lt;div class="roundup-block__preview"&gt;
  3891. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/109198/preview_image/vibe_coding.png" alt="" loading="lazy" width="820px" height="574px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1600/uploads/users/30/posts/109198/preview_image/vibe_coding.png 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109198/preview_image/vibe_coding.png" alt="" loading="lazy" width="650px" height="456px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109198/preview_image/vibe_coding.png 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109198/preview_image/vibe_coding.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109198/preview_image/vibe_coding.png 2x"&gt;
  3892. &lt;/div&gt;
  3893. &lt;div class="roundup-block__content-meta"&gt;
  3894. &lt;div class="roundup-block__content-title"&gt;Vibe Coding in After Effects: We created an AI plugin with NO coding experience!&lt;/div&gt;
  3895. &lt;div class="roundup-block__author-info"&gt;
  3896. &lt;div class="roundup-block__author-profile-image"&gt;
  3897. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/21379/profileImage/dm.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/21379/profileImage/dm.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/21379/profileImage/dm.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/21379/profileImage/dm.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/21379/profileImage/dm.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/21379/profileImage/dm.jpg 2x"&gt;
  3898. &lt;/div&gt;
  3899. &lt;div class="roundup-block__author-meta"&gt;
  3900. &lt;div class="roundup-block__author-name"&gt;Dylan Mercer&lt;/div&gt;
  3901. &lt;div class="roundup-block__published-date"&gt;18 Jun 2025&lt;/div&gt;
  3902. &lt;/div&gt;
  3903. &lt;/div&gt;
  3904. &lt;/div&gt;
  3905. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  3906. &lt;/ul&gt;
  3907. &lt;/div&gt;&lt;div class="mediafed_ad"&gt;&lt;img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/669438/s/109186/sc/4/mf.gif" width="1" /&gt;&lt;a href="http://da.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/109186/a2.htm"&gt;&lt;img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/109186/a2.img" /&gt;&lt;/a&gt;&lt;img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/109186/a2t.img" width="1" /&gt;&lt;/div&gt;</content>
  3908.    <published>2025-06-24 13:45:00 UTC</published>
  3909.    <updated>2025-06-24 13:45:00 UTC</updated>
  3910.    <author>
  3911.      <name>Jonathan Lam</name>
  3912.    </author>
  3913.  </entry>
  3914.  <entry>
  3915.    <id>tag:tutsplus.com,2005:PostPresenter/cms-109189</id>
  3916.    <published>2025-06-03T11:58:13+00:00</published>
  3917.    <link rel="alternate" type="text/html" href="https://photography.tutsplus.com/articles/after-effects-keyboard-shortcuts-cheat-sheet-for-animators--cms-109189"/>
  3918.    <title>After Effects keyboard shortcuts: Cheat sheet for animators</title>
  3919.    <content type="html">&lt;style&gt;* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}&lt;/style&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ibmj"&gt;
  3920. &lt;p&gt;Here we’ll share our favorite keyboard shortcuts that have made After Effects animation smoother, faster, and honestly way more fun. Whether you’re a designer stepping into motion for the first time or an illustrator bringing characters to life, these are the cheat codes you’ll wish you’d known sooner.&lt;/p&gt;
  3921. &lt;figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=w3pmNX74wf4&amp;amp;t=0"&gt;
  3922.            &lt;iframe src="https://www.youtube.com/embed/w3pmNX74wf4?rel=0&amp;amp;start=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy" style="border-radius: 15px;"&gt;&lt;/iframe&gt;
  3923.          &lt;/figure&gt;
  3924. &lt;h2 id="toc-5j1h-getting-started-with-shortcuts"&gt;
  3925. &lt;span class="sectionnum"&gt;1.&lt;/span&gt; Getting started with After Effects keyboard shortcuts&lt;/h2&gt;
  3926. &lt;h3 id="toc-s67m-why-shortcuts-matter"&gt;Why shortcuts matter&lt;/h3&gt;
  3927. &lt;p&gt;Learning After Effects keyboard shortcuts probably isn’t the first thing you’re excited about when opening After Effects. But once you start using After Effects keyboard shortcuts, it’s hard to go back. Shortcuts help you stay in the zone, cut down repetitive clicks, and make animation feel way more intuitive.&lt;/p&gt;
  3928. &lt;p&gt;Think of them as creative muscle memory. The more you use them, the more naturally they start to flow.&lt;/p&gt;
  3929. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/403/posts/109189/image-upload/AE_Keyboard_Shortcuts_00.jpg" alt="After Effects keyboard shortcuts" loading="lazy" width="870px" height="515px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/403/posts/109189/image-upload/AE_Keyboard_Shortcuts_00.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/403/posts/109189/image-upload/AE_Keyboard_Shortcuts_00.jpg" alt="After Effects keyboard shortcuts" loading="lazy" width="650px" height="387px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/403/posts/109189/image-upload/AE_Keyboard_Shortcuts_00.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/403/posts/109189/image-upload/AE_Keyboard_Shortcuts_00.jpg" alt="After Effects keyboard shortcuts" loading="lazy" width="380px" height="230px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/403/posts/109189/image-upload/AE_Keyboard_Shortcuts_00.jpg 2x"&gt;&lt;/figure&gt;
  3930. &lt;h3 id="toc-d9ju-start-with-the-basics"&gt;Start with the basics&lt;/h3&gt;
  3931. &lt;p&gt;You don’t need to memorize dozens of After Effects keyboard shortcuts on day one. Instead, focus on the essentials, which are the ones that’ll save you time straight away. Here are a few good ones to start with:&lt;/p&gt;
  3932. &lt;table&gt;
  3933. &lt;thead&gt;
  3934. &lt;tr&gt;
  3935. &lt;th&gt;Command&lt;/th&gt;
  3936. &lt;th&gt;Windows Shortcut&lt;/th&gt;
  3937. &lt;th&gt;Mac Shortcut&lt;/th&gt;
  3938. &lt;/tr&gt;
  3939. &lt;/thead&gt;
  3940. &lt;tbody&gt;
  3941. &lt;tr&gt;
  3942. &lt;td&gt;&lt;strong&gt;Duplicate layer&lt;/strong&gt;&lt;/td&gt;
  3943. &lt;td&gt;
  3944. &lt;code&gt;Ctrl&lt;/code&gt; + &lt;code&gt;D&lt;/code&gt;
  3945. &lt;/td&gt;
  3946. &lt;td&gt;
  3947. &lt;code&gt;Cmd&lt;/code&gt; + &lt;code&gt;D&lt;/code&gt;
  3948. &lt;/td&gt;
  3949. &lt;/tr&gt;
  3950. &lt;tr&gt;
  3951. &lt;td&gt;&lt;strong&gt;Show all animated properties&lt;/strong&gt;&lt;/td&gt;
  3952. &lt;td&gt;&lt;code&gt;U&lt;/code&gt;&lt;/td&gt;
  3953. &lt;td&gt;&lt;code&gt;U&lt;/code&gt;&lt;/td&gt;
  3954. &lt;/tr&gt;
  3955. &lt;tr&gt;
  3956. &lt;td&gt;&lt;strong&gt;Show Position property&lt;/strong&gt;&lt;/td&gt;
  3957. &lt;td&gt;&lt;code&gt;P&lt;/code&gt;&lt;/td&gt;
  3958. &lt;td&gt;&lt;code&gt;P&lt;/code&gt;&lt;/td&gt;
  3959. &lt;/tr&gt;
  3960. &lt;tr&gt;
  3961. &lt;td&gt;&lt;strong&gt;Show Scale property&lt;/strong&gt;&lt;/td&gt;
  3962. &lt;td&gt;&lt;code&gt;S&lt;/code&gt;&lt;/td&gt;
  3963. &lt;td&gt;&lt;code&gt;S&lt;/code&gt;&lt;/td&gt;
  3964. &lt;/tr&gt;
  3965. &lt;tr&gt;
  3966. &lt;td&gt;&lt;strong&gt;Show Rotation property&lt;/strong&gt;&lt;/td&gt;
  3967. &lt;td&gt;&lt;code&gt;R&lt;/code&gt;&lt;/td&gt;
  3968. &lt;td&gt;&lt;code&gt;R&lt;/code&gt;&lt;/td&gt;
  3969. &lt;/tr&gt;
  3970. &lt;tr&gt;
  3971. &lt;td&gt;&lt;strong&gt;Show Opacity property&lt;/strong&gt;&lt;/td&gt;
  3972. &lt;td&gt;&lt;code&gt;T&lt;/code&gt;&lt;/td&gt;
  3973. &lt;td&gt;&lt;code&gt;T&lt;/code&gt;&lt;/td&gt;
  3974. &lt;/tr&gt;
  3975. &lt;tr&gt;
  3976. &lt;td&gt;&lt;strong&gt;Play/Pause preview&lt;/strong&gt;&lt;/td&gt;
  3977. &lt;td&gt;&lt;code&gt;Spacebar&lt;/code&gt;&lt;/td&gt;
  3978. &lt;td&gt;&lt;code&gt;Spacebar&lt;/code&gt;&lt;/td&gt;
  3979. &lt;/tr&gt;
  3980. &lt;/tbody&gt;
  3981. &lt;/table&gt;
  3982. &lt;h3 id="toc-6j9b-where-to-find-and-customize-shortcuts"&gt;Where to find (and customize) shortcuts&lt;/h3&gt;
  3983. &lt;p&gt;If you're ever unsure, you can view the full list of shortcuts inside After Effects:&lt;/p&gt;
  3984. &lt;ul&gt;
  3985. &lt;li&gt;Go to &lt;strong&gt;Edit &amp;gt; Keyboard Shortcuts&lt;/strong&gt; (Windows)&lt;/li&gt;
  3986. &lt;li&gt;Or &lt;strong&gt;After Effects &amp;gt; Keyboard Shortcuts&lt;/strong&gt; (Mac)&lt;/li&gt;
  3987. &lt;/ul&gt;
  3988. &lt;p&gt;This opens a searchable layout of every shortcut in the app. You can even customize them and change a few keyboard shortcut keys so that they fit your workflow a bit better! &lt;/p&gt;
  3989. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/403/posts/109189/image-upload/AE_Keyboard_Shortcuts_01.jpg" alt="edit After Efftects keyboard shortcuts" loading="lazy" width="870px" height="653px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/403/posts/109189/image-upload/AE_Keyboard_Shortcuts_01.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/403/posts/109189/image-upload/AE_Keyboard_Shortcuts_01.jpg" alt="edit After Efftects keyboard shortcuts" loading="lazy" width="650px" height="489px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/403/posts/109189/image-upload/AE_Keyboard_Shortcuts_01.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/403/posts/109189/image-upload/AE_Keyboard_Shortcuts_01.jpg" alt="edit After Efftects keyboard shortcuts" loading="lazy" width="380px" height="288px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/403/posts/109189/image-upload/AE_Keyboard_Shortcuts_01.jpg 2x"&gt;&lt;/figure&gt;
  3990. &lt;h3&gt;Panel Shortcuts&lt;/h3&gt;
  3991. &lt;p&gt;You can switch to panel specific shortcuts using the &lt;strong&gt;Command&lt;/strong&gt; drop down menu. The keyboard layout will highlight only the keys relevant to that panel in green. These shortcuts work only when that specific panel is active, and you’ll only see commands that apply to it in the list.&lt;/p&gt;
  3992. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/403/posts/109189/image-upload/AE_Keyboard_Shortcuts_02.jpg" alt="panel shortcuts" loading="lazy" width="870px" height="479px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/403/posts/109189/image-upload/AE_Keyboard_Shortcuts_02.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/403/posts/109189/image-upload/AE_Keyboard_Shortcuts_02.jpg" alt="panel shortcuts" loading="lazy" width="650px" height="360px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/403/posts/109189/image-upload/AE_Keyboard_Shortcuts_02.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/403/posts/109189/image-upload/AE_Keyboard_Shortcuts_02.jpg" alt="panel shortcuts" loading="lazy" width="380px" height="214px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/403/posts/109189/image-upload/AE_Keyboard_Shortcuts_02.jpg 2x"&gt;&lt;/figure&gt;
  3993. &lt;h3 id="toc-mkqx-tips-for-remembering-them"&gt;Tips for remembering them&lt;/h3&gt;
  3994. &lt;p&gt;Learning After Effects keyboard shortcuts can be really awkward at first, but it becomes so much smoother with practice. Trust me, your future self will thank you. Here are a few things that will help:&lt;/p&gt;
  3995. &lt;ul&gt;
  3996. &lt;li&gt;Use sticky notes or print out a cheat sheet&lt;/li&gt;
  3997. &lt;li&gt;Say the shortcut out loud as you use it&lt;/li&gt;
  3998. &lt;li&gt;Focus on learning just 2–3 new ones per project&lt;/li&gt;
  3999. &lt;/ul&gt;
  4000. &lt;h2 id="toc-k1vj-essential-everyday-shortcuts"&gt;
  4001. &lt;span class="sectionnum"&gt;2.&lt;/span&gt; Essential everyday shortcuts&lt;/h2&gt;
  4002. &lt;p&gt;These are the shortcuts you can use constantly, whether it’s setting up a new comp, scrubbing through the timeline, or trying to make sense of twenty overlapping layers. They’re perfect for day-to-day tasks and will save you loads of clicking around.&lt;/p&gt;
  4003. &lt;p&gt;You’ll probably end up using most of these without even thinking once they become second nature. So if you’re just getting started with After Effects, this is a great batch to commit to muscle memory.&lt;/p&gt;
  4004. &lt;table&gt;
  4005. &lt;thead&gt;
  4006. &lt;tr&gt;
  4007. &lt;th&gt;Command&lt;/th&gt;
  4008. &lt;th&gt;Windows Shortcut&lt;/th&gt;
  4009. &lt;th&gt;Mac Shortcut&lt;/th&gt;
  4010. &lt;/tr&gt;
  4011. &lt;/thead&gt;
  4012. &lt;tbody&gt;
  4013. &lt;tr&gt;
  4014. &lt;td&gt;&lt;strong&gt;Import files&lt;/strong&gt;&lt;/td&gt;
  4015. &lt;td&gt;
  4016. &lt;code&gt;Ctrl&lt;/code&gt; + &lt;code&gt;I&lt;/code&gt;
  4017. &lt;/td&gt;
  4018. &lt;td&gt;
  4019. &lt;code&gt;Cmd&lt;/code&gt; + &lt;code&gt;I&lt;/code&gt;
  4020. &lt;/td&gt;
  4021. &lt;/tr&gt;
  4022. &lt;tr&gt;
  4023. &lt;td&gt;&lt;strong&gt;New composition&lt;/strong&gt;&lt;/td&gt;
  4024. &lt;td&gt;
  4025. &lt;code&gt;Ctrl&lt;/code&gt; + &lt;code&gt;N&lt;/code&gt;
  4026. &lt;/td&gt;
  4027. &lt;td&gt;
  4028. &lt;code&gt;Cmd&lt;/code&gt; + &lt;code&gt;N&lt;/code&gt;
  4029. &lt;/td&gt;
  4030. &lt;/tr&gt;
  4031. &lt;tr&gt;
  4032. &lt;td&gt;&lt;strong&gt;New project&lt;/strong&gt;&lt;/td&gt;
  4033. &lt;td&gt;
  4034. &lt;code&gt;Ctrl&lt;/code&gt; + &lt;code&gt;Alt&lt;/code&gt; + &lt;code&gt;N&lt;/code&gt;
  4035. &lt;/td&gt;
  4036. &lt;td&gt;
  4037. &lt;code&gt;Cmd&lt;/code&gt; + &lt;code&gt;Opt&lt;/code&gt; + &lt;code&gt;N&lt;/code&gt;
  4038. &lt;/td&gt;
  4039. &lt;/tr&gt;
  4040. &lt;tr&gt;
  4041. &lt;td&gt;&lt;strong&gt;Save project&lt;/strong&gt;&lt;/td&gt;
  4042. &lt;td&gt;
  4043. &lt;code&gt;Ctrl&lt;/code&gt; + &lt;code&gt;S&lt;/code&gt;
  4044. &lt;/td&gt;
  4045. &lt;td&gt;
  4046. &lt;code&gt;Cmd&lt;/code&gt; + &lt;code&gt;S&lt;/code&gt;
  4047. &lt;/td&gt;
  4048. &lt;/tr&gt;
  4049. &lt;tr&gt;
  4050. &lt;td&gt;&lt;strong&gt;Undo / Redo&lt;/strong&gt;&lt;/td&gt;
  4051. &lt;td&gt;
  4052. &lt;code&gt;Ctrl&lt;/code&gt; + &lt;code&gt;Z&lt;/code&gt; / &lt;code&gt;Ctrl&lt;/code&gt; + &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;Z&lt;/code&gt;
  4053. &lt;/td&gt;
  4054. &lt;td&gt;
  4055. &lt;code&gt;Cmd&lt;/code&gt; + &lt;code&gt;Z&lt;/code&gt; / &lt;code&gt;Cmd&lt;/code&gt; + &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;Z&lt;/code&gt;
  4056. &lt;/td&gt;
  4057. &lt;/tr&gt;
  4058. &lt;tr&gt;
  4059. &lt;td&gt;&lt;strong&gt;Maximize or restore active panel&lt;/strong&gt;&lt;/td&gt;
  4060. &lt;td&gt;
  4061. &lt;code&gt;`&lt;/code&gt; (accent grave)&lt;/td&gt;
  4062. &lt;td&gt;
  4063. &lt;code&gt;`&lt;/code&gt; (accent grave)&lt;/td&gt;
  4064. &lt;/tr&gt;
  4065. &lt;tr&gt;
  4066. &lt;td&gt;&lt;strong&gt;Hand tool (for panning around)&lt;/strong&gt;&lt;/td&gt;
  4067. &lt;td&gt;
  4068. &lt;code&gt;Spacebar&lt;/code&gt; (hold)&lt;/td&gt;
  4069. &lt;td&gt;
  4070. &lt;code&gt;Spacebar&lt;/code&gt; (hold)&lt;/td&gt;
  4071. &lt;/tr&gt;
  4072. &lt;tr&gt;
  4073. &lt;td&gt;&lt;strong&gt;Zoom in / out in timeline&lt;/strong&gt;&lt;/td&gt;
  4074. &lt;td&gt;
  4075. &lt;code&gt;Alt&lt;/code&gt; + &lt;code&gt;Scroll Wheel&lt;/code&gt;
  4076. &lt;/td&gt;
  4077. &lt;td&gt;
  4078. &lt;code&gt;Option&lt;/code&gt; + &lt;code&gt;Scroll Wheel&lt;/code&gt;
  4079. &lt;/td&gt;
  4080. &lt;/tr&gt;
  4081. &lt;tr&gt;
  4082. &lt;td&gt;&lt;strong&gt;Show/hide rulers&lt;/strong&gt;&lt;/td&gt;
  4083. &lt;td&gt;
  4084. &lt;code&gt;Ctrl&lt;/code&gt; + &lt;code&gt;R&lt;/code&gt;
  4085. &lt;/td&gt;
  4086. &lt;td&gt;
  4087. &lt;code&gt;Cmd&lt;/code&gt; + &lt;code&gt;R&lt;/code&gt;
  4088. &lt;/td&gt;
  4089. &lt;/tr&gt;
  4090. &lt;tr&gt;
  4091. &lt;td&gt;&lt;strong&gt;Toggle snapping&lt;/strong&gt;&lt;/td&gt;
  4092. &lt;td&gt;
  4093. &lt;code&gt;'&lt;/code&gt; (apostrophe)&lt;/td&gt;
  4094. &lt;td&gt;
  4095. &lt;code&gt;'&lt;/code&gt; (apostrophe)&lt;/td&gt;
  4096. &lt;/tr&gt;
  4097. &lt;tr&gt;
  4098. &lt;td&gt;&lt;strong&gt;Fit comp to viewer&lt;/strong&gt;&lt;/td&gt;
  4099. &lt;td&gt;
  4100. &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;/&lt;/code&gt;
  4101. &lt;/td&gt;
  4102. &lt;td&gt;
  4103. &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;/&lt;/code&gt;
  4104. &lt;/td&gt;
  4105. &lt;/tr&gt;
  4106. &lt;/tbody&gt;
  4107. &lt;/table&gt;
  4108. &lt;h2 id="toc-umod-animation-keyframe-shortcuts"&gt;
  4109. &lt;span class="sectionnum"&gt;3.&lt;/span&gt; Animation &amp;amp; keyframe shortcuts&lt;/h2&gt;
  4110. &lt;p&gt;Keyframes are where the magic happens in After Effects. But they can also turn into a mess fast! These shortcuts will help you stay quick, focused, and way less overwhelmed.&lt;/p&gt;
  4111. &lt;h3 id="toc-g6fg-core-animation-shortcuts"&gt;Core animation shortcuts&lt;/h3&gt;
  4112. &lt;table&gt;
  4113. &lt;thead&gt;
  4114. &lt;tr&gt;
  4115. &lt;th&gt;Command&lt;/th&gt;
  4116. &lt;th&gt;Windows Shortcut&lt;/th&gt;
  4117. &lt;th&gt;Mac Shortcut&lt;/th&gt;
  4118. &lt;/tr&gt;
  4119. &lt;/thead&gt;
  4120. &lt;tbody&gt;
  4121. &lt;tr&gt;
  4122. &lt;td&gt;&lt;strong&gt;Set a keyframe&lt;/strong&gt;&lt;/td&gt;
  4123. &lt;td&gt;Click the &lt;code&gt;stopwatch&lt;/code&gt;
  4124. &lt;/td&gt;
  4125. &lt;td&gt;Click the &lt;code&gt;stopwatch&lt;/code&gt;
  4126. &lt;/td&gt;
  4127. &lt;/tr&gt;
  4128. &lt;tr&gt;
  4129. &lt;td&gt;&lt;strong&gt;Toggle keyframe with expression&lt;/strong&gt;&lt;/td&gt;
  4130. &lt;td&gt;
  4131. &lt;code&gt;Alt&lt;/code&gt; + Click stopwatch&lt;/td&gt;
  4132. &lt;td&gt;
  4133. &lt;code&gt;Option&lt;/code&gt; + Click stopwatch&lt;/td&gt;
  4134. &lt;/tr&gt;
  4135. &lt;tr&gt;
  4136. &lt;td&gt;&lt;strong&gt;Show all animated properties&lt;/strong&gt;&lt;/td&gt;
  4137. &lt;td&gt;&lt;code&gt;U&lt;/code&gt;&lt;/td&gt;
  4138. &lt;td&gt;&lt;code&gt;U&lt;/code&gt;&lt;/td&gt;
  4139. &lt;/tr&gt;
  4140. &lt;tr&gt;
  4141. &lt;td&gt;&lt;strong&gt;Show only modified properties&lt;/strong&gt;&lt;/td&gt;
  4142. &lt;td&gt;&lt;code&gt;UU&lt;/code&gt;&lt;/td&gt;
  4143. &lt;td&gt;&lt;code&gt;UU&lt;/code&gt;&lt;/td&gt;
  4144. &lt;/tr&gt;
  4145. &lt;tr&gt;
  4146. &lt;td&gt;&lt;strong&gt;Easy Ease&lt;/strong&gt;&lt;/td&gt;
  4147. &lt;td&gt;&lt;code&gt;F9&lt;/code&gt;&lt;/td&gt;
  4148. &lt;td&gt;&lt;code&gt;F9&lt;/code&gt;&lt;/td&gt;
  4149. &lt;/tr&gt;
  4150. &lt;tr&gt;
  4151. &lt;td&gt;&lt;strong&gt;Ease In&lt;/strong&gt;&lt;/td&gt;
  4152. &lt;td&gt;
  4153. &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;F9&lt;/code&gt;
  4154. &lt;/td&gt;
  4155. &lt;td&gt;
  4156. &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;F9&lt;/code&gt;
  4157. &lt;/td&gt;
  4158. &lt;/tr&gt;
  4159. &lt;tr&gt;
  4160. &lt;td&gt;&lt;strong&gt;Ease Out&lt;/strong&gt;&lt;/td&gt;
  4161. &lt;td&gt;
  4162. &lt;code&gt;Ctrl&lt;/code&gt; + &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;F9&lt;/code&gt;
  4163. &lt;/td&gt;
  4164. &lt;td&gt;
  4165. &lt;code&gt;Cmd&lt;/code&gt; + &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;F9&lt;/code&gt;
  4166. &lt;/td&gt;
  4167. &lt;/tr&gt;
  4168. &lt;tr&gt;
  4169. &lt;td&gt;&lt;strong&gt;Go to next keyframe&lt;/strong&gt;&lt;/td&gt;
  4170. &lt;td&gt;&lt;code&gt;K&lt;/code&gt;&lt;/td&gt;
  4171. &lt;td&gt;&lt;code&gt;K&lt;/code&gt;&lt;/td&gt;
  4172. &lt;/tr&gt;
  4173. &lt;tr&gt;
  4174. &lt;td&gt;&lt;strong&gt;Go to previous keyframe&lt;/strong&gt;&lt;/td&gt;
  4175. &lt;td&gt;&lt;code&gt;J&lt;/code&gt;&lt;/td&gt;
  4176. &lt;td&gt;&lt;code&gt;J&lt;/code&gt;&lt;/td&gt;
  4177. &lt;/tr&gt;
  4178. &lt;tr&gt;
  4179. &lt;td&gt;&lt;strong&gt;Nudge keyframe 1 frame&lt;/strong&gt;&lt;/td&gt;
  4180. &lt;td&gt;
  4181. &lt;code&gt;Alt&lt;/code&gt; + &lt;code&gt;←&lt;/code&gt; / &lt;code&gt;→&lt;/code&gt;
  4182. &lt;/td&gt;
  4183. &lt;td&gt;
  4184. &lt;code&gt;Option&lt;/code&gt; + &lt;code&gt;←&lt;/code&gt; / &lt;code&gt;→&lt;/code&gt;
  4185. &lt;/td&gt;
  4186. &lt;/tr&gt;
  4187. &lt;tr&gt;
  4188. &lt;td&gt;&lt;strong&gt;Nudge keyframe 10 frames&lt;/strong&gt;&lt;/td&gt;
  4189. &lt;td&gt;
  4190. &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;Alt&lt;/code&gt; + &lt;code&gt;←&lt;/code&gt; / &lt;code&gt;→&lt;/code&gt;
  4191. &lt;/td&gt;
  4192. &lt;td&gt;
  4193. &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;Option&lt;/code&gt; + &lt;code&gt;←&lt;/code&gt; / &lt;code&gt;→&lt;/code&gt;
  4194. &lt;/td&gt;
  4195. &lt;/tr&gt;
  4196. &lt;/tbody&gt;
  4197. &lt;/table&gt;
  4198. &lt;h3 id="toc-dc8o-property-shortcuts-for-animating"&gt;Property shortcuts for animating&lt;/h3&gt;
  4199. &lt;table&gt;
  4200. &lt;thead&gt;
  4201. &lt;tr&gt;
  4202. &lt;th&gt;Command&lt;/th&gt;
  4203. &lt;th&gt;Windows &amp;amp; Mac Shortcut&lt;/th&gt;
  4204. &lt;/tr&gt;
  4205. &lt;/thead&gt;
  4206. &lt;tbody&gt;
  4207. &lt;tr&gt;
  4208. &lt;td&gt;&lt;strong&gt;Position&lt;/strong&gt;&lt;/td&gt;
  4209. &lt;td&gt;&lt;code&gt;P&lt;/code&gt;&lt;/td&gt;
  4210. &lt;/tr&gt;
  4211. &lt;tr&gt;
  4212. &lt;td&gt;&lt;strong&gt;Scale&lt;/strong&gt;&lt;/td&gt;
  4213. &lt;td&gt;&lt;code&gt;S&lt;/code&gt;&lt;/td&gt;
  4214. &lt;/tr&gt;
  4215. &lt;tr&gt;
  4216. &lt;td&gt;&lt;strong&gt;Rotation&lt;/strong&gt;&lt;/td&gt;
  4217. &lt;td&gt;&lt;code&gt;R&lt;/code&gt;&lt;/td&gt;
  4218. &lt;/tr&gt;
  4219. &lt;tr&gt;
  4220. &lt;td&gt;&lt;strong&gt;Opacity&lt;/strong&gt;&lt;/td&gt;
  4221. &lt;td&gt;&lt;code&gt;T&lt;/code&gt;&lt;/td&gt;
  4222. &lt;/tr&gt;
  4223. &lt;tr&gt;
  4224. &lt;td&gt;&lt;strong&gt;Anchor Point&lt;/strong&gt;&lt;/td&gt;
  4225. &lt;td&gt;&lt;code&gt;A&lt;/code&gt;&lt;/td&gt;
  4226. &lt;/tr&gt;
  4227. &lt;/tbody&gt;
  4228. &lt;/table&gt;
  4229. &lt;p&gt;These After Effects keyboard shortcuts are the core of almost every animation you create. You’ll use them constantly, especially &lt;code&gt;U&lt;/code&gt; to reveal your keyframes and &lt;code&gt;F9&lt;/code&gt; for easing. Once you start using them, you’ll wonder how you ever animated without them.&lt;/p&gt;
  4230. &lt;h2 id="toc-wkyb-timeline-layer-shortcuts"&gt;
  4231. &lt;span class="sectionnum"&gt;4.&lt;/span&gt; Timeline &amp;amp; layer shortcuts&lt;/h2&gt;
  4232. &lt;p&gt;Once you start stacking up layers and refining your animation, the timeline can go from “neatly organised” to “total chaos” in no time. &lt;/p&gt;
  4233. &lt;p&gt;These shortcuts will become your go-to tools for staying on top of the madness. Whether you're trimming clips, splitting layers, or nudging things into place, they will help you move faster and keep everything under control.&lt;/p&gt;
  4234. &lt;table&gt;
  4235. &lt;thead&gt;
  4236. &lt;tr&gt;
  4237. &lt;th&gt;Command&lt;/th&gt;
  4238. &lt;th&gt;Windows Shortcut&lt;/th&gt;
  4239. &lt;th&gt;Mac Shortcut&lt;/th&gt;
  4240. &lt;/tr&gt;
  4241. &lt;/thead&gt;
  4242. &lt;tbody&gt;
  4243. &lt;tr&gt;
  4244. &lt;td&gt;&lt;strong&gt;Duplicate selected layer&lt;/strong&gt;&lt;/td&gt;
  4245. &lt;td&gt;
  4246. &lt;code&gt;Ctrl&lt;/code&gt; + &lt;code&gt;D&lt;/code&gt;
  4247. &lt;/td&gt;
  4248. &lt;td&gt;
  4249. &lt;code&gt;Cmd&lt;/code&gt; + &lt;code&gt;D&lt;/code&gt;
  4250. &lt;/td&gt;
  4251. &lt;/tr&gt;
  4252. &lt;tr&gt;
  4253. &lt;td&gt;&lt;strong&gt;Split layer at playhead&lt;/strong&gt;&lt;/td&gt;
  4254. &lt;td&gt;
  4255. &lt;code&gt;Ctrl&lt;/code&gt; + &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;D&lt;/code&gt;
  4256. &lt;/td&gt;
  4257. &lt;td&gt;
  4258. &lt;code&gt;Cmd&lt;/code&gt; + &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;D&lt;/code&gt;
  4259. &lt;/td&gt;
  4260. &lt;/tr&gt;
  4261. &lt;tr&gt;
  4262. &lt;td&gt;&lt;strong&gt;Move layer start to playhead&lt;/strong&gt;&lt;/td&gt;
  4263. &lt;td&gt;&lt;code&gt;[&lt;/code&gt;&lt;/td&gt;
  4264. &lt;td&gt;&lt;code&gt;[&lt;/code&gt;&lt;/td&gt;
  4265. &lt;/tr&gt;
  4266. &lt;tr&gt;
  4267. &lt;td&gt;&lt;strong&gt;Move layer end to playhead&lt;/strong&gt;&lt;/td&gt;
  4268. &lt;td&gt;&lt;code&gt;]&lt;/code&gt;&lt;/td&gt;
  4269. &lt;td&gt;&lt;code&gt;]&lt;/code&gt;&lt;/td&gt;
  4270. &lt;/tr&gt;
  4271. &lt;tr&gt;
  4272. &lt;td&gt;&lt;strong&gt;Trim layer in point to playhead&lt;/strong&gt;&lt;/td&gt;
  4273. &lt;td&gt;
  4274. &lt;code&gt;Alt&lt;/code&gt; + &lt;code&gt;[&lt;/code&gt;
  4275. &lt;/td&gt;
  4276. &lt;td&gt;
  4277. &lt;code&gt;Option&lt;/code&gt; + &lt;code&gt;[&lt;/code&gt;
  4278. &lt;/td&gt;
  4279. &lt;/tr&gt;
  4280. &lt;tr&gt;
  4281. &lt;td&gt;&lt;strong&gt;Trim layer out point to playhead&lt;/strong&gt;&lt;/td&gt;
  4282. &lt;td&gt;
  4283. &lt;code&gt;Alt&lt;/code&gt; + &lt;code&gt;]&lt;/code&gt;
  4284. &lt;/td&gt;
  4285. &lt;td&gt;
  4286. &lt;code&gt;Option&lt;/code&gt; + &lt;code&gt;]&lt;/code&gt;
  4287. &lt;/td&gt;
  4288. &lt;/tr&gt;
  4289. &lt;tr&gt;
  4290. &lt;td&gt;&lt;strong&gt;Pre-compose selected layers&lt;/strong&gt;&lt;/td&gt;
  4291. &lt;td&gt;
  4292. &lt;code&gt;Ctrl&lt;/code&gt; + &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;C&lt;/code&gt;
  4293. &lt;/td&gt;
  4294. &lt;td&gt;
  4295. &lt;code&gt;Cmd&lt;/code&gt; + &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;C&lt;/code&gt;
  4296. &lt;/td&gt;
  4297. &lt;/tr&gt;
  4298. &lt;tr&gt;
  4299. &lt;td&gt;&lt;strong&gt;Toggle layer visibility&lt;/strong&gt;&lt;/td&gt;
  4300. &lt;td&gt;
  4301. &lt;code&gt;Ctrl&lt;/code&gt; + &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;V&lt;/code&gt;
  4302. &lt;/td&gt;
  4303. &lt;td&gt;
  4304. &lt;code&gt;Cmd&lt;/code&gt; + &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;V&lt;/code&gt;
  4305. &lt;/td&gt;
  4306. &lt;/tr&gt;
  4307. &lt;tr&gt;
  4308. &lt;td&gt;&lt;strong&gt;Toggle solo for selected layer&lt;/strong&gt;&lt;/td&gt;
  4309. &lt;td&gt;
  4310. &lt;code&gt;Solo switch&lt;/code&gt; (click)&lt;/td&gt;
  4311. &lt;td&gt;
  4312. &lt;code&gt;Solo switch&lt;/code&gt; (click)&lt;/td&gt;
  4313. &lt;/tr&gt;
  4314. &lt;tr&gt;
  4315. &lt;td&gt;&lt;strong&gt;Toggle layer switches/modes columns&lt;/strong&gt;&lt;/td&gt;
  4316. &lt;td&gt;&lt;code&gt;F4&lt;/code&gt;&lt;/td&gt;
  4317. &lt;td&gt;&lt;code&gt;F4&lt;/code&gt;&lt;/td&gt;
  4318. &lt;/tr&gt;
  4319. &lt;tr&gt;
  4320. &lt;td&gt;&lt;strong&gt;Zoom into timeline&lt;/strong&gt;&lt;/td&gt;
  4321. &lt;td&gt;
  4322. &lt;code&gt;=&lt;/code&gt; (equals key)&lt;/td&gt;
  4323. &lt;td&gt;
  4324. &lt;code&gt;=&lt;/code&gt; (equals key)&lt;/td&gt;
  4325. &lt;/tr&gt;
  4326. &lt;tr&gt;
  4327. &lt;td&gt;&lt;strong&gt;Zoom out of timeline&lt;/strong&gt;&lt;/td&gt;
  4328. &lt;td&gt;
  4329. &lt;code&gt;-&lt;/code&gt; (minus key)&lt;/td&gt;
  4330. &lt;td&gt;
  4331. &lt;code&gt;-&lt;/code&gt; (minus key)&lt;/td&gt;
  4332. &lt;/tr&gt;
  4333. &lt;/tbody&gt;
  4334. &lt;/table&gt;
  4335. &lt;p&gt;Learning how to quickly split and trim layers (&lt;code&gt;Ctrl + Shift + D&lt;/code&gt; and &lt;code&gt;Alt + [&lt;/code&gt;/&lt;code&gt;]&lt;/code&gt;) will be a turning point. It’s one of those things that seems small but makes a huge difference once you’re in the zone.&lt;/p&gt;
  4336. &lt;h2 id="toc-dhvn-masking-effects-visuals"&gt;
  4337. &lt;span class="sectionnum"&gt;5.&lt;/span&gt; Masking, Effects &amp;amp; Visuals&lt;/h2&gt;
  4338. &lt;p&gt;This is the part we really love, getting hands-on with shapes, masks, and effects to bring the visuals to life! &lt;/p&gt;
  4339. &lt;p&gt;That said, clicking around menus to add masks or dig through effects panels can seriously slow you down. These shortcuts help keep things snappy so you can stay focused on making things look amazing.&lt;/p&gt;
  4340. &lt;h3 id="toc-kdac-shape-and-masking-tools"&gt;Shape and masking tools&lt;/h3&gt;
  4341. &lt;table&gt;
  4342. &lt;thead&gt;
  4343. &lt;tr&gt;
  4344. &lt;th&gt;Command&lt;/th&gt;
  4345. &lt;th&gt;Windows &amp;amp; Mac Shortcut&lt;/th&gt;
  4346. &lt;/tr&gt;
  4347. &lt;/thead&gt;
  4348. &lt;tbody&gt;
  4349. &lt;tr&gt;
  4350. &lt;td&gt;&lt;strong&gt;Cycle shape tools (rectangle, ellipse, etc.)&lt;/strong&gt;&lt;/td&gt;
  4351. &lt;td&gt;&lt;code&gt;Q&lt;/code&gt;&lt;/td&gt;
  4352. &lt;/tr&gt;
  4353. &lt;tr&gt;
  4354. &lt;td&gt;&lt;strong&gt;Pen tool (for drawing custom masks/paths)&lt;/strong&gt;&lt;/td&gt;
  4355. &lt;td&gt;&lt;code&gt;G&lt;/code&gt;&lt;/td&gt;
  4356. &lt;/tr&gt;
  4357. &lt;tr&gt;
  4358. &lt;td&gt;&lt;strong&gt;Show mask path properties&lt;/strong&gt;&lt;/td&gt;
  4359. &lt;td&gt;&lt;code&gt;M&lt;/code&gt;&lt;/td&gt;
  4360. &lt;/tr&gt;
  4361. &lt;tr&gt;
  4362. &lt;td&gt;&lt;strong&gt;Show mask feather&lt;/strong&gt;&lt;/td&gt;
  4363. &lt;td&gt;&lt;code&gt;F&lt;/code&gt;&lt;/td&gt;
  4364. &lt;/tr&gt;
  4365. &lt;tr&gt;
  4366. &lt;td&gt;&lt;strong&gt;Invert selected mask&lt;/strong&gt;&lt;/td&gt;
  4367. &lt;td&gt;
  4368. &lt;code&gt;M&lt;/code&gt; (then check &lt;code&gt;Invert&lt;/code&gt;)&lt;/td&gt;
  4369. &lt;/tr&gt;
  4370. &lt;/tbody&gt;
  4371. &lt;/table&gt;
  4372. &lt;h3 id="toc-c2fk-effects-and-visual-controls"&gt;Effects and visual controls&lt;/h3&gt;
  4373. &lt;table&gt;
  4374. &lt;thead&gt;
  4375. &lt;tr&gt;
  4376. &lt;th&gt;Command&lt;/th&gt;
  4377. &lt;th&gt;Windows Shortcut&lt;/th&gt;
  4378. &lt;th&gt;Mac Shortcut&lt;/th&gt;
  4379. &lt;/tr&gt;
  4380. &lt;/thead&gt;
  4381. &lt;tbody&gt;
  4382. &lt;tr&gt;
  4383. &lt;td&gt;&lt;strong&gt;Apply effect (via Effects &amp;amp; Presets panel)&lt;/strong&gt;&lt;/td&gt;
  4384. &lt;td&gt;Drag &amp;amp; drop manually&lt;/td&gt;
  4385. &lt;td&gt;Drag &amp;amp; drop manually&lt;/td&gt;
  4386. &lt;/tr&gt;
  4387. &lt;tr&gt;
  4388. &lt;td&gt;&lt;strong&gt;Remove all effects from selected layer&lt;/strong&gt;&lt;/td&gt;
  4389. &lt;td&gt;
  4390. &lt;code&gt;Ctrl&lt;/code&gt; + &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;E&lt;/code&gt;
  4391. &lt;/td&gt;
  4392. &lt;td&gt;
  4393. &lt;code&gt;Cmd&lt;/code&gt; + &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;E&lt;/code&gt;
  4394. &lt;/td&gt;
  4395. &lt;/tr&gt;
  4396. &lt;tr&gt;
  4397. &lt;td&gt;&lt;strong&gt;Open layer settings&lt;/strong&gt;&lt;/td&gt;
  4398. &lt;td&gt;
  4399. &lt;code&gt;Ctrl&lt;/code&gt; + &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;Y&lt;/code&gt;
  4400. &lt;/td&gt;
  4401. &lt;td&gt;
  4402. &lt;code&gt;Cmd&lt;/code&gt; + &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;Y&lt;/code&gt;
  4403. &lt;/td&gt;
  4404. &lt;/tr&gt;
  4405. &lt;tr&gt;
  4406. &lt;td&gt;&lt;strong&gt;Toggle transparency grid in comp panel&lt;/strong&gt;&lt;/td&gt;
  4407. &lt;td&gt;
  4408. &lt;code&gt;Ctrl&lt;/code&gt; + &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;'&lt;/code&gt;
  4409. &lt;/td&gt;
  4410. &lt;td&gt;
  4411. &lt;code&gt;Cmd&lt;/code&gt; + &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;'&lt;/code&gt;
  4412. &lt;/td&gt;
  4413. &lt;/tr&gt;
  4414. &lt;tr&gt;
  4415. &lt;td&gt;&lt;strong&gt;Take snapshot&lt;/strong&gt;&lt;/td&gt;
  4416. &lt;td&gt;
  4417. &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;F5&lt;/code&gt;–&lt;code&gt;F8&lt;/code&gt;
  4418. &lt;/td&gt;
  4419. &lt;td&gt;
  4420. &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;F5&lt;/code&gt;–&lt;code&gt;F8&lt;/code&gt;
  4421. &lt;/td&gt;
  4422. &lt;/tr&gt;
  4423. &lt;tr&gt;
  4424. &lt;td&gt;&lt;strong&gt;Show snapshot in viewer&lt;/strong&gt;&lt;/td&gt;
  4425. &lt;td&gt;
  4426. &lt;code&gt;F5&lt;/code&gt;–&lt;code&gt;F8&lt;/code&gt;
  4427. &lt;/td&gt;
  4428. &lt;td&gt;
  4429. &lt;code&gt;F5&lt;/code&gt;–&lt;code&gt;F8&lt;/code&gt;
  4430. &lt;/td&gt;
  4431. &lt;/tr&gt;
  4432. &lt;/tbody&gt;
  4433. &lt;/table&gt;
  4434. &lt;p&gt;When you’re deep in a masking pass or experimenting with glows and distortion effects, these shortcuts will save a ton of time. If you’re working on anything visually heavy, they’re well worth memorising.&lt;/p&gt;
  4435. &lt;h2 id="toc-t6ig-expressions-power-user-tips"&gt;
  4436. &lt;span class="sectionnum"&gt;6.&lt;/span&gt; Expressions &amp;amp; power user tips&lt;/h2&gt;
  4437. &lt;p&gt;Once you get comfortable with the basics, you’ll probably start running into things that are just &lt;em&gt;a &lt;/em&gt;little too annoying to keyframe by hand. Things like looping a wiggle, syncing layers, or automating bounces. That’s where expressions come in.&lt;/p&gt;
  4438. &lt;h3 id="toc-b8cf-expressions-and-advanced-animation-shortcuts"&gt;Expressions and advanced animation shortcuts&lt;/h3&gt;
  4439. &lt;table&gt;
  4440. &lt;thead&gt;
  4441. &lt;tr&gt;
  4442. &lt;th&gt;Command&lt;/th&gt;
  4443. &lt;th&gt;Windows Shortcut&lt;/th&gt;
  4444. &lt;th&gt;Mac Shortcut&lt;/th&gt;
  4445. &lt;/tr&gt;
  4446. &lt;/thead&gt;
  4447. &lt;tbody&gt;
  4448. &lt;tr&gt;
  4449. &lt;td&gt;&lt;strong&gt;Add/remove expression to property&lt;/strong&gt;&lt;/td&gt;
  4450. &lt;td&gt;
  4451. &lt;code&gt;Alt&lt;/code&gt; + Click &lt;code&gt;stopwatch&lt;/code&gt;
  4452. &lt;/td&gt;
  4453. &lt;td&gt;
  4454. &lt;code&gt;Option&lt;/code&gt; + Click &lt;code&gt;stopwatch&lt;/code&gt;
  4455. &lt;/td&gt;
  4456. &lt;/tr&gt;
  4457. &lt;tr&gt;
  4458. &lt;td&gt;&lt;strong&gt;Show expression field&lt;/strong&gt;&lt;/td&gt;
  4459. &lt;td&gt;&lt;code&gt;EE&lt;/code&gt;&lt;/td&gt;
  4460. &lt;td&gt;&lt;code&gt;EE&lt;/code&gt;&lt;/td&gt;
  4461. &lt;/tr&gt;
  4462. &lt;tr&gt;
  4463. &lt;td&gt;&lt;strong&gt;Expression pick whip (drag to link properties)&lt;/strong&gt;&lt;/td&gt;
  4464. &lt;td&gt;Click + drag &lt;code&gt;pick whip&lt;/code&gt;
  4465. &lt;/td&gt;
  4466. &lt;td&gt;Click + drag &lt;code&gt;pick whip&lt;/code&gt;
  4467. &lt;/td&gt;
  4468. &lt;/tr&gt;
  4469. &lt;tr&gt;
  4470. &lt;td&gt;&lt;strong&gt;Open Graph Editor&lt;/strong&gt;&lt;/td&gt;
  4471. &lt;td&gt;
  4472. &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;F3&lt;/code&gt;
  4473. &lt;/td&gt;
  4474. &lt;td&gt;
  4475. &lt;code&gt;Shift&lt;/code&gt; + &lt;code&gt;F3&lt;/code&gt;
  4476. &lt;/td&gt;
  4477. &lt;/tr&gt;
  4478. &lt;tr&gt;
  4479. &lt;td&gt;&lt;strong&gt;Reveal selected layer properties&lt;/strong&gt;&lt;/td&gt;
  4480. &lt;td&gt;&lt;code&gt;U&lt;/code&gt;&lt;/td&gt;
  4481. &lt;td&gt;&lt;code&gt;U&lt;/code&gt;&lt;/td&gt;
  4482. &lt;/tr&gt;
  4483. &lt;tr&gt;
  4484. &lt;td&gt;&lt;strong&gt;Reveal only modified properties&lt;/strong&gt;&lt;/td&gt;
  4485. &lt;td&gt;&lt;code&gt;UU&lt;/code&gt;&lt;/td&gt;
  4486. &lt;td&gt;&lt;code&gt;UU&lt;/code&gt;&lt;/td&gt;
  4487. &lt;/tr&gt;
  4488. &lt;/tbody&gt;
  4489. &lt;/table&gt;
  4490. &lt;h2 id="toc-miqa-conclusion"&gt;That’s a wrap!&lt;/h2&gt;
  4491. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/403/posts/109189/image-upload/AE_Keyboard_Shortcuts_03.jpg" alt="keyboard shortcuts" loading="lazy" width="870px" height="250px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/403/posts/109189/image-upload/AE_Keyboard_Shortcuts_03.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/403/posts/109189/image-upload/AE_Keyboard_Shortcuts_03.jpg" alt="keyboard shortcuts" loading="lazy" width="650px" height="190px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/403/posts/109189/image-upload/AE_Keyboard_Shortcuts_03.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/403/posts/109189/image-upload/AE_Keyboard_Shortcuts_03.jpg" alt="keyboard shortcuts" loading="lazy" width="380px" height="117px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/403/posts/109189/image-upload/AE_Keyboard_Shortcuts_03.jpg 2x"&gt;&lt;/figure&gt;
  4492. &lt;p&gt;After Effects can feel like a lot, but once you’ve got a few shortcuts under your fingers, everything starts to click. You don’t need to learn them all at once (I definitely didn’t). Just pick a handful that match how you like to work and build from there.&lt;/p&gt;
  4493. &lt;p&gt;The goal isn’t to memorize a manual, it’s to spend less time digging through menus and more time doing what you love, which is creating cool stuff! So stick this cheat sheet somewhere nearby, and next time you’re animating, try reaching for a shortcut or two. Your future self will thank you.&lt;/p&gt;
  4494. &lt;/div&gt;&lt;div class="mediafed_ad"&gt;&lt;img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/669438/s/109189/sc/4/mf.gif" width="1" /&gt;&lt;a href="http://da.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/109189/a2.htm"&gt;&lt;img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/109189/a2.img" /&gt;&lt;/a&gt;&lt;img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/109189/a2t.img" width="1" /&gt;&lt;/div&gt;</content>
  4495.    <published>2025-06-23 08:39:14 UTC</published>
  4496.    <updated>2025-06-23 08:39:14 UTC</updated>
  4497.    <author>
  4498.      <name>Jonathan Lam</name>
  4499.    </author>
  4500.  </entry>
  4501.  <entry>
  4502.    <id>tag:tutsplus.com,2005:PostPresenter/cms-93200</id>
  4503.    <published>2022-09-15T12:17:36+00:00</published>
  4504.    <link rel="alternate" type="text/html" href="https://design.tutsplus.com/tutorials/how-to-remove-a-background-in-affinity-designer--cms-93200"/>
  4505.    <title>How to remove a background in Affinity Designer</title>
  4506.    <content type="html">&lt;style&gt;* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}&lt;/style&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i8qs"&gt;
  4507. &lt;p&gt;In this tutorial, I'll be demonstrating how to remove a background in Affinity Designer. Since it's a vector-based application, you might assume that Designer wouldn’t be the best option for removing a background. However, it comes equipped with a powerful pixel editor that allows you to make basic edits to images, including using &lt;span&gt;Affinity Designer for transparent backgrounds&lt;/span&gt;.&lt;/p&gt;
  4508. &lt;p&gt;To erase a background, &lt;a href="https://design.tutsplus.com/compatible-with/affinity-designer" target="_self"&gt;Affinity Designer&lt;/a&gt; offers two main techniques that we'll feature in this tutorial. Follow these steps to learn how to remove a white background or even a busy background from any image. It's one of the &lt;a href="https://elements.envato.com/learn/photo-editing-tips" target="_self" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;basic photo-editing tips&lt;/a&gt; that every designer needs to know.&lt;/p&gt;
  4509. &lt;h2 id="toc-asmh-how-to"&gt;
  4510. &lt;span class="sectionnum"&gt;1.&lt;/span&gt; How to open the image in Affinity Designer&lt;/h2&gt;
  4511. &lt;p&gt;Let's start by opening up the image by going to &lt;strong&gt;File &amp;gt; Open&lt;/strong&gt; and locating the image on your computer. &lt;strong&gt;Double-click&lt;/strong&gt; on it to import it into Affinity. I'll be using the &lt;a href="https://elements.envato.com/beautiful-daisy-gerbera-flower-FTQPUK2" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;beautiful daisy flower&lt;/a&gt; image in this section of the tutorial to demonstrate the first background removal technique.&lt;/p&gt;
  4512. &lt;p&gt;Next, we want to remove the lock from the layer by clicking on the lock icon in the top right corner of the &lt;strong&gt;Layers&lt;/strong&gt; panel while the background image is selected. Another option is to &lt;strong&gt;right-click&lt;/strong&gt; on the background layer and deselect &lt;strong&gt;Lock &lt;/strong&gt;from the menu.&lt;/p&gt;
  4513. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_open_unlock_min.jpg" alt="how to remove background in affinity designer open image" loading="lazy" width="870px" height="740px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_open_unlock_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_open_unlock_min.jpg" alt="how to remove background in affinity designer open image" loading="lazy" width="650px" height="554px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_open_unlock_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_open_unlock_min.jpg" alt="how to remove background in affinity designer open image" loading="lazy" width="380px" height="325px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_open_unlock_min.jpg 2x"&gt;&lt;/figure&gt;
  4514. &lt;h2 id="toc-r6pk-how-to-open-the-image-in-affinity-designer"&gt;
  4515. &lt;span class="sectionnum"&gt;2.&lt;/span&gt; How to access pixel persona in Affinity Designer&lt;/h2&gt;
  4516. &lt;p&gt;Since this image is a rasterized photo made of pixels rather than a vector design, we want to work with the &lt;a href="https://design.tutsplus.com/tutorials/how-to-use-pixel-persona-affinity-designer-video--cms-108936" target="_self"&gt;&lt;strong&gt;Pixel Persona&lt;/strong&gt;&lt;/a&gt; for this. Go to the top left corner of the application and click on the &lt;strong&gt;Pixel Persona&lt;/strong&gt; icon, which is made of small colored boxes. Once you've accessed it, notice how the tools have changed.&lt;/p&gt;
  4517. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_pixel_persona_min.jpg" alt="how to remove background in affinity designer acess pixel persona" loading="lazy" width="870px" height="740px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_pixel_persona_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_pixel_persona_min.jpg" alt="how to remove background in affinity designer acess pixel persona" loading="lazy" width="650px" height="554px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_pixel_persona_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_pixel_persona_min.jpg" alt="how to remove background in affinity designer acess pixel persona" loading="lazy" width="380px" height="325px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_pixel_persona_min.jpg 2x"&gt;&lt;/figure&gt;
  4518. &lt;h2 id="toc-zafg-how-to remove-white-background-in-affinity-designer"&gt;
  4519. &lt;span class="sectionnum"&gt;3.&lt;/span&gt; How to erase a white background in Affinity Designer&lt;/h2&gt;
  4520. &lt;h3 id="toc-hnpz-step-1"&gt;Step 1&lt;/h3&gt;
  4521. &lt;p&gt;Having a JPEG image with a white background is a common reason to want to remove the white space and have it with a transparent background instead. It doesn't matter if it's white, black, blue, or any other solid color for this technique that you are about to use.&lt;/p&gt;
  4522. &lt;p&gt;I recommend zooming in on the image. Then, while it's still selected, go to &lt;strong&gt;Select &amp;gt; Select Sampled Color&lt;/strong&gt;.&lt;/p&gt;
  4523. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_select_sampled_color_min.jpg" alt="how to remove white background in affinity designer using select sampled color" loading="lazy" width="870px" height="740px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_select_sampled_color_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_select_sampled_color_min.jpg" alt="how to remove white background in affinity designer using select sampled color" loading="lazy" width="650px" height="554px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_select_sampled_color_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_select_sampled_color_min.jpg" alt="how to remove white background in affinity designer using select sampled color" loading="lazy" width="380px" height="325px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_select_sampled_color_min.jpg 2x"&gt;&lt;/figure&gt;
  4524. &lt;h3 id="toc-fiiu-step-2"&gt;Step 2&lt;/h3&gt;
  4525. &lt;p&gt;Designer will automatically select the main color of your image, so in this case, it will select the white. You can choose another color from your image that you might want by simply clicking on that colored area, and your selection will change.&lt;/p&gt;
  4526. &lt;p&gt;Next, you can adjust the &lt;strong&gt;Tolerance&lt;/strong&gt; level with the slider if you feel as if it's not picking up haze or different &lt;a href="https://design.tutsplus.com/tutorials/how-to-add-a-gradient-fill-in-affinity-designer--cms-93682" target="_self"&gt;soft gradients&lt;/a&gt; that might be around a color that you are removing. Increasing the value from&lt;strong&gt; 15%&lt;/strong&gt; upwards might give you a selection closer to the edge, but this depends from image to image. Hit &lt;strong&gt;Apply&lt;/strong&gt;.&lt;/p&gt;
  4527. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_select_sampled_color_settings_min.jpg" alt="how to remove white background in affinity designer using select sampled color settings" loading="lazy" width="870px" height="760px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_select_sampled_color_settings_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_select_sampled_color_settings_min.jpg" alt="how to remove white background in affinity designer using select sampled color settings" loading="lazy" width="650px" height="568px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_select_sampled_color_settings_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_select_sampled_color_settings_min.jpg" alt="how to remove white background in affinity designer using select sampled color settings" loading="lazy" width="380px" height="333px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_select_sampled_color_settings_min.jpg 2x"&gt;&lt;/figure&gt;
  4528. &lt;h3 id="toc-arfy-step-3"&gt;Step 3&lt;/h3&gt;
  4529. &lt;p&gt;To actually remove the white background, you can hit the &lt;strong&gt;Delete &lt;/strong&gt;key on your keyboard or just go to &lt;strong&gt;Edit &amp;gt; Delete&lt;/strong&gt;. Make sure to follow up this action by going with &lt;strong&gt;Select &amp;gt; Deselect&lt;/strong&gt;.&lt;/p&gt;
  4530. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_delete_background_min.jpg" alt="how to remove background from image in affinity designer" loading="lazy" width="870px" height="740px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_delete_background_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_delete_background_min.jpg" alt="how to remove background from image in affinity designer" loading="lazy" width="650px" height="554px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_delete_background_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_delete_background_min.jpg" alt="how to remove background from image in affinity designer" loading="lazy" width="380px" height="325px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_delete_background_min.jpg 2x"&gt;&lt;/figure&gt;
  4531. &lt;h3 id="toc-xys2-step-4"&gt;Step 4&lt;/h3&gt;
  4532. &lt;p&gt;The next natural step is to check the result you got. Any time you remove a background that is white or any kind of solid-colored background, you want to make sure you put a contrasting color behind it to make sure you actually removed all of the background.&lt;/p&gt;
  4533. &lt;p&gt;To do this, go back to the &lt;strong&gt;Designer Persona&lt;/strong&gt; by clicking on the icon in the upper left corner of the application, and then use the &lt;strong&gt;Rectangle Tool (M)&lt;/strong&gt; to click and draw a shape about the size of your image. Fill it with black or any other contrasting color, and make sure to &lt;a href="https://design.tutsplus.com/tutorials/how-to-use-the-move-tool-in-affinity-designer--cms-108798" target="_self" rel=""&gt;move it&lt;/a&gt; behind the subject.&lt;/p&gt;
  4534. &lt;p&gt;Zoom in as much as you need and take a look around the edges of the subject. If you did not remove all of the background, you will see a white haze around the image because some of those pixels might be different hues. This happens a lot, so don't worry. It's fixable.&lt;/p&gt;
  4535. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_check_background_min.jpg" alt="how to remove background in affinity designer and check the result" loading="lazy" width="870px" height="740px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_check_background_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_check_background_min.jpg" alt="how to remove background in affinity designer and check the result" loading="lazy" width="650px" height="554px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_check_background_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_check_background_min.jpg" alt="how to remove background in affinity designer and check the result" loading="lazy" width="380px" height="325px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_check_background_min.jpg 2x"&gt;&lt;/figure&gt;
  4536. &lt;h3 id="toc-c20j-step-5"&gt;Step 5&lt;/h3&gt;
  4537. &lt;p&gt;By repeating the previous steps, you will get a much more precise selection. While in the &lt;strong&gt;Pixel Persona&lt;/strong&gt;, go back to &lt;strong&gt;Select &amp;gt; Select Sampled Color&lt;/strong&gt; and click exactly on the haze to sample that specific hue. Choose a much higher &lt;strong&gt;Tolerance &lt;/strong&gt;level of&lt;strong&gt; 30%&lt;/strong&gt; and hit &lt;strong&gt;Apply&lt;/strong&gt;. Next, press the &lt;strong&gt;Delete &lt;/strong&gt;key on your keyboard to actually remove the remaining background followed by &lt;strong&gt;Select &amp;gt; Deselect&lt;/strong&gt;.&lt;/p&gt;
  4538. &lt;p&gt;Back in the &lt;strong&gt;Designer Persona&lt;/strong&gt;, check out the result. Your extraction should be perfect now. You have successfully learned how to remove a white background in Affinity Designer.&lt;/p&gt;
  4539. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_repeat_remove_background_min.jpg" alt="affinity designer remove background and repeat precise selection" loading="lazy" width="870px" height="590px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_repeat_remove_background_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_repeat_remove_background_min.jpg" alt="affinity designer remove background and repeat precise selection" loading="lazy" width="650px" height="442px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_repeat_remove_background_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_repeat_remove_background_min.jpg" alt="affinity designer remove background and repeat precise selection" loading="lazy" width="380px" height="261px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_repeat_remove_background_min.jpg 2x"&gt;&lt;/figure&gt;
  4540. &lt;h2 id="toc-u5pb-how-to remove-white-background-in-affinity-designer"&gt;
  4541. &lt;span class="sectionnum"&gt;4.&lt;/span&gt; How to remove a busy background in Affinity Designer&lt;/h2&gt;
  4542. &lt;h3 id="toc-jx5c-step-1"&gt;Step 1&lt;/h3&gt;
  4543. &lt;p&gt;Let's continue with the second way of using Affinity Designer to remove a background. This one is suitable for anything that has a busy or textured background and doesn't necessarily have solid edges like before. I'll be using the &lt;a href="https://elements.envato.com/variety-of-autumn-leaves-J6YNUGF" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;autumn leaves&lt;/a&gt; image in this section of the tutorial.&lt;/p&gt;
  4544. &lt;p&gt;Things to do before we start using &lt;span&gt;Affinity Designer to remove a background that's too busy&lt;/span&gt;:&lt;/p&gt;
  4545. &lt;ul&gt;
  4546. &lt;li&gt;Open the image from your computer.&lt;/li&gt;
  4547. &lt;li&gt;Access &lt;strong&gt;Pixel Persona.&lt;/strong&gt;
  4548. &lt;/li&gt;
  4549. &lt;li&gt;
  4550. &lt;strong&gt;Unlock &lt;/strong&gt;the Background layer.&lt;/li&gt;
  4551. &lt;li&gt;Locate the &lt;strong&gt;Selection &lt;a href="https://design.tutsplus.com/tutorials/how-to-use-brush-tool-in-affinity-designer--cms-108859" target="_self"&gt;Brush Tool&lt;/a&gt;.&lt;/strong&gt;
  4552. &lt;/li&gt;
  4553. &lt;/ul&gt;
  4554. &lt;p&gt;To remove the busy background in this image, we will use the &lt;strong&gt;Selection Brush Tool (W)&lt;/strong&gt;. In the tool's settings at the top, make sure to check &lt;strong&gt;Snap to edges&lt;/strong&gt; and &lt;strong&gt;Soft edges&lt;/strong&gt;. Now, if you bring your cursor over the image, you will notice your cursor is now a circular brush, and you can change the size of that brush at the top under &lt;strong&gt;Width&lt;/strong&gt;. You don't want to make it too big or too small, so a medium size like &lt;strong&gt;300 px&lt;/strong&gt; will be good.&lt;/p&gt;
  4555. &lt;p&gt;P.S. You can get even more &lt;a href="https://design.tutsplus.com/articles/25-best-free-affinity-designer-brushes-affinity-designer-tutorials--cms-35168" target="_self"&gt;free Affinity Designer brushes&lt;/a&gt; here:&lt;/p&gt;
  4556. &lt;ul class="roundup-block__contents posts--half-width roundup-block--list"&gt;&lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/articles/25-best-free-affinity-designer-brushes-affinity-designer-tutorials--cms-35168"&gt;&lt;div class="roundup-block__content-container"&gt;
  4557. &lt;div class="roundup-block__preview"&gt;
  4558. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1631/posts/35168/preview_image/affinitydesignerbrushes.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1631/posts/35168/preview_image/affinitydesignerbrushes.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1631/posts/35168/preview_image/affinitydesignerbrushes.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1631/posts/35168/preview_image/affinitydesignerbrushes.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1631/posts/35168/preview_image/affinitydesignerbrushes.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1631/posts/35168/preview_image/affinitydesignerbrushes.jpg 2x"&gt;
  4559. &lt;/div&gt;
  4560. &lt;div class="roundup-block__content-meta"&gt;
  4561. &lt;div class="roundup-block__content-title"&gt;25+ Best Free Affinity Designer Brushes (&amp;amp; Affinity Designer Tutorials!)&lt;/div&gt;
  4562. &lt;div class="roundup-block__author-info"&gt;
  4563. &lt;div class="roundup-block__author-profile-image"&gt;
  4564. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1631/profiles/20139/profileImage/NB.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1631/profiles/20139/profileImage/NB.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1631/profiles/20139/profileImage/NB.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1631/profiles/20139/profileImage/NB.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1631/profiles/20139/profileImage/NB.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1631/profiles/20139/profileImage/NB.jpg 2x"&gt;
  4565. &lt;/div&gt;
  4566. &lt;div class="roundup-block__author-meta"&gt;
  4567. &lt;div class="roundup-block__author-name"&gt;Nona Blackman&lt;/div&gt;
  4568. &lt;div class="roundup-block__published-date"&gt;30 May 2024&lt;/div&gt;
  4569. &lt;/div&gt;
  4570. &lt;/div&gt;
  4571. &lt;/div&gt;
  4572. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
  4573. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_locate_selection_brush_tool_min.jpg" alt="how to remove background from image in affinity designer when busy" loading="lazy" width="870px" height="760px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_locate_selection_brush_tool_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_locate_selection_brush_tool_min.jpg" alt="how to remove background from image in affinity designer when busy" loading="lazy" width="650px" height="568px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_locate_selection_brush_tool_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_locate_selection_brush_tool_min.jpg" alt="how to remove background from image in affinity designer when busy" loading="lazy" width="380px" height="333px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_locate_selection_brush_tool_min.jpg 2x"&gt;&lt;/figure&gt;
  4574. &lt;h3 id="toc-wpkv-step-2"&gt;Step 2&lt;/h3&gt;
  4575. &lt;p&gt;Start painting around the subject, which in this case is the leaf in focus. You will notice as you're painting that Affinity Designer is placing a dotted line around the subject automatically. Some areas are far from perfect at first, but we'll correct that next.&lt;/p&gt;
  4576. &lt;p&gt;Continue to go around the subject until you get the entire background selected. You're not creating a selection around the leaf but a selection around the busy background.&lt;/p&gt;
  4577. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_use_selection_brush_tool_min.jpg" alt="remove background in affinity designer with the selection brush tool" loading="lazy" width="870px" height="1490px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_use_selection_brush_tool_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_use_selection_brush_tool_min.jpg" alt="remove background in affinity designer with the selection brush tool" loading="lazy" width="650px" height="1110px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_use_selection_brush_tool_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_use_selection_brush_tool_min.jpg" alt="remove background in affinity designer with the selection brush tool" loading="lazy" width="380px" height="643px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_use_selection_brush_tool_min.jpg 2x"&gt;&lt;/figure&gt;
  4578. &lt;h3 id="toc-9vpv-step-3"&gt;Step 3&lt;/h3&gt;
  4579. &lt;p&gt;What we want to do now is to correct the imperfections. Zoom in on the edge of the leaf and make the brush smaller. To push back the dotted line, hold the &lt;strong&gt;Alt &lt;/strong&gt;key and click on the image. While you do this, the selection will move to the edges of the subject.&lt;/p&gt;
  4580. &lt;p&gt;Continue to do this in all the areas that need fixing. Keep in mind that the smaller the brush, the more precision you'll get.&lt;/p&gt;
  4581. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_adjust_selection_brush_tool_min.jpg" alt="remove background in affinity designer making precise selection with selection bruh tool" loading="lazy" width="870px" height="1000px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_adjust_selection_brush_tool_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_adjust_selection_brush_tool_min.jpg" alt="remove background in affinity designer making precise selection with selection bruh tool" loading="lazy" width="650px" height="746px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_adjust_selection_brush_tool_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_adjust_selection_brush_tool_min.jpg" alt="remove background in affinity designer making precise selection with selection bruh tool" loading="lazy" width="380px" height="435px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_adjust_selection_brush_tool_min.jpg 2x"&gt;&lt;/figure&gt;
  4582. &lt;h3 id="toc-vhe3-step-4"&gt;Step 4&lt;/h3&gt;
  4583. &lt;p&gt;Use a very small brush size of about &lt;strong&gt;2-3 px&lt;/strong&gt; for the pointed tips of the leaf and also for the stem to get a precise selection. At this point, the background should be ready to be cut out.&lt;/p&gt;
  4584. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_add_to_selection_min.jpg" alt="affinity designer remove background with precise selection around subject" loading="lazy" width="870px" height="720px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_add_to_selection_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_add_to_selection_min.jpg" alt="affinity designer remove background with precise selection around subject" loading="lazy" width="650px" height="539px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_add_to_selection_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_add_to_selection_min.jpg" alt="affinity designer remove background with precise selection around subject" loading="lazy" width="380px" height="316px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_add_to_selection_min.jpg 2x"&gt;&lt;/figure&gt;
  4585. &lt;h3 id="toc-9alr-step-5"&gt;Step 5&lt;/h3&gt;
  4586. &lt;p&gt;The next step is to open up the &lt;strong&gt;Refine Selection&lt;/strong&gt; window by pressing the &lt;strong&gt;Refine &lt;/strong&gt;button at the top. Affinity Designer will place a red mask over the subject that was selected. You can use this red mask as a reference to determine whether or not your trace is accurate. Zoom in on the leaf as much as needed, and check out the edges. If it doesn't look as accurate as you want it, you can adjust it further by painting over the missing areas to include them in the red area.&lt;/p&gt;
  4587. &lt;p&gt;You can also adjust a few settings but for an accurate trace, the default settings work just fine. Of course, this depends from image to image and what kind of background you are trying to remove.&lt;/p&gt;
  4588. &lt;ul&gt;
  4589. &lt;li&gt;Border width&lt;/li&gt;
  4590. &lt;li&gt;Smooth&lt;/li&gt;
  4591. &lt;li&gt;Feather&lt;/li&gt;
  4592. &lt;li&gt;Ramp&lt;/li&gt;
  4593. &lt;li&gt;Output: Selection, Mask, New layer or New layer &lt;a href="https://design.tutsplus.com/tutorials/how-to-add-a-mask-in-affinity-designer--cms-108930" target="_self"&gt;with mask&lt;/a&gt;
  4594. &lt;/li&gt;
  4595. &lt;/ul&gt;
  4596. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_refine_selection_min.jpg" alt="affinity designer remove background and refine selection settings" loading="lazy" width="870px" height="960px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_refine_selection_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_refine_selection_min.jpg" alt="affinity designer remove background and refine selection settings" loading="lazy" width="650px" height="717px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_refine_selection_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_refine_selection_min.jpg" alt="affinity designer remove background and refine selection settings" loading="lazy" width="380px" height="418px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_refine_selection_min.jpg 2x"&gt;&lt;/figure&gt;
  4597. &lt;h3 id="toc-4ytf-step-6"&gt;Step 6&lt;/h3&gt;
  4598. &lt;p&gt;Now, to actually erase the background in Affinity Designer, all you have to do is press the &lt;strong&gt;Delete &lt;/strong&gt;key on your keyboard, and it's gone. Also get rid of the selection by going to &lt;strong&gt;Select &amp;gt; Deselect&lt;/strong&gt;.&lt;/p&gt;
  4599. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_remove_background_min.jpg" alt="erase background affinity designer" loading="lazy" width="870px" height="740px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_remove_background_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_remove_background_min.jpg" alt="erase background affinity designer" loading="lazy" width="650px" height="554px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_remove_background_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_remove_background_min.jpg" alt="erase background affinity designer" loading="lazy" width="380px" height="325px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_remove_background_min.jpg 2x"&gt;&lt;/figure&gt;
  4600. &lt;h3 id="toc-ruil-step-7"&gt;Step 7&lt;/h3&gt;
  4601. &lt;p&gt;Let's check our work. Back in &lt;strong&gt;Designer Persona&lt;/strong&gt;, grab the &lt;strong&gt;Rectangle Tool (M)&lt;/strong&gt; and draw a shape that covers the artboard. Send it behind the subject and fill it with black or any other contrasting color. Zoom in and check out the edges all around. The leaf looks pretty good without the background.&lt;/p&gt;
  4602. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_check_background_removal_min.jpg" alt="remove background in affinity designer and check the result" loading="lazy" width="870px" height="740px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_check_background_removal_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_check_background_removal_min.jpg" alt="remove background in affinity designer and check the result" loading="lazy" width="650px" height="554px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_check_background_removal_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_check_background_removal_min.jpg" alt="remove background in affinity designer and check the result" loading="lazy" width="380px" height="325px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_check_background_removal_min.jpg 2x"&gt;&lt;/figure&gt;
  4603. &lt;h3 id="toc-12z7-step-8"&gt;Step 8&lt;/h3&gt;
  4604. &lt;p&gt;All that's left to do is save your work. Go to &lt;strong&gt;File &amp;gt; Export&lt;/strong&gt; to open the &lt;a href="https://design.tutsplus.com/tutorials/how-to-use-export-persona-in-affinity-designer--cms-108918" target="_self"&gt;&lt;strong&gt;Export Settings&lt;/strong&gt;&lt;/a&gt; window, where you will see a lot of file formats available. It's best to save your image as a &lt;strong&gt;PNG &lt;/strong&gt;because this format allows a transparent background.&lt;/p&gt;
  4605. &lt;ol&gt;
  4606. &lt;li&gt;To save only the subject without the extra empty space, make sure to have it selected before you go to &lt;strong&gt;File &amp;gt; Export&lt;/strong&gt; and then choose &lt;strong&gt;Area: Selection without background&lt;/strong&gt;.&lt;/li&gt;
  4607. &lt;li&gt;To save the entire image in the original size, you don't need to select anything. Just go to &lt;strong&gt;File &amp;gt; Export&lt;/strong&gt; and then choose &lt;strong&gt;Area: Whole Document&lt;/strong&gt;.&lt;/li&gt;
  4608. &lt;/ol&gt;
  4609. &lt;p&gt;Hit &lt;strong&gt;Export &lt;/strong&gt;and find a location on your computer to save the new image.&lt;/p&gt;
  4610. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_export_image_background_removed_min.jpg" alt="affinity designer remove background and export the new image PNG transparent" loading="lazy" width="870px" height="880px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_export_image_background_removed_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_export_image_background_removed_min.jpg" alt="affinity designer remove background and export the new image PNG transparent" loading="lazy" width="650px" height="657px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_export_image_background_removed_min.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_export_image_background_removed_min.jpg" alt="affinity designer remove background and export the new image PNG transparent" loading="lazy" width="380px" height="384px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/115/posts/93200/image-upload/how_to_remove_background_affinity_designer_tutorial_image_export_image_background_removed_min.jpg 2x"&gt;&lt;/figure&gt;
  4611. &lt;h2 id="toc-0e02-youre-done"&gt;You're done using &lt;span&gt;Affinity Designer to remove a background&lt;/span&gt;
  4612. &lt;/h2&gt;
  4613. &lt;p&gt;You have successfully learned how to remove a background from an image and how to get a transparent background in Affinity Designer. Apply these two techniques when you have a white/solid colored background or when you have a busy and textured background to accurately remove it every time.&lt;/p&gt;
  4614. &lt;p&gt;Would you rather watch a &lt;a href="https://www.youtube.com/user/TutsPremium" target="_self"&gt;design video tutorial&lt;/a&gt;? Then you can't miss this video by &lt;a href="https://tutsplus.com/authors/andrei-marius" target="_blank" rel="noopener"&gt;Andrei Marius&lt;/a&gt; from the &lt;a href="https://www.youtube.com/@envatotuts" target="_self"&gt;Envato Tuts+ YouTube channel&lt;/a&gt;. Quickly learn how to use Affinity Designer for transparent backgrounds:&lt;/p&gt;
  4615. &lt;figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=LAI08JHblgc&amp;amp;t=0"&gt;
  4616.            &lt;iframe src="https://www.youtube.com/embed/LAI08JHblgc?rel=0&amp;amp;start=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy" style="border-radius: 15px;"&gt;&lt;/iframe&gt;
  4617.          &lt;/figure&gt;
  4618. &lt;p&gt;You can also get amazing, &lt;a href="https://elements.envato.com/graphics/compatible-with-affinity-designer" target="_self" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;premium Affinity Designer graphics&lt;/a&gt; on Envato. Save time and upgrade your projects with unlimited downloads of creative assets for a flat monthly fee.&lt;/p&gt;
  4619. &lt;h2 id="toc-qqbg-how-to-remove-a-background-without-special-software"&gt;How to remove a background right in your browser&lt;/h2&gt;
  4620. &lt;p&gt;Learning to &lt;a href="https://design.tutsplus.com/articles/affinity-designer-quick-start-course--cms-93528" target="_self"&gt;use Affinity Designer&lt;/a&gt; to remove a background is pretty cool. But what happens if you're using a computer without this software?&lt;/p&gt;
  4621. &lt;p&gt;Maybe you would've struggled in the past, but now, you can use &lt;span&gt;AI to remove a background. And do we have the one for you! Envato has &lt;a href="https://elements.envato.com/lp/ai-stack/" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;a powerful stack of AI tools&lt;/a&gt;, like &lt;a href="https://labs.envato.com/image-edit" target="_self"&gt;ImageEdit&lt;/a&gt;, that could be the best AI background remover. Just a few clicks (no need for credits, complicated prompts, or software knowledge), and you can &lt;a href="https://elements.envato.com/learn/envato-ai-features" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;tweak any image you want&lt;/a&gt;. It truly is the answer to the question of how to remove background in AI.&lt;/span&gt;&lt;/p&gt;
  4622. &lt;p&gt;&lt;span&gt;The best part? All AI tools are included with your Envato subscription (&lt;em&gt;except for Enterprise accounts&lt;/em&gt;).&lt;/span&gt;&lt;/p&gt;
  4623. &lt;figure class="post_image"&gt;&lt;a href="https://labs.envato.com/image-edit"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2362/posts/93200/image-upload/imageedit_newpromo_1_.jpg" alt="ImageEdit" loading="lazy" width="870px" height="454px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2362/posts/93200/image-upload/imageedit_newpromo_1_.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2362/posts/93200/image-upload/imageedit_newpromo_1_.jpg" alt="ImageEdit" loading="lazy" width="650px" height="342px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2362/posts/93200/image-upload/imageedit_newpromo_1_.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2362/posts/93200/image-upload/imageedit_newpromo_1_.jpg" alt="ImageEdit" loading="lazy" width="380px" height="204px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2362/posts/93200/image-upload/imageedit_newpromo_1_.jpg 2x"&gt;&lt;/a&gt;&lt;/figure&gt;
  4624. &lt;p&gt;You can also use &lt;a href="https://placeit.net/tools/background-remover" target="_self" data-action="click-&amp;gt;ga-analytics#sendPlaceitClickEvent"&gt;Placeit&lt;/a&gt; as a background remover tool. You won't even need to leave your browser, and you can do it from any device, anywhere. &lt;/p&gt;
  4625. &lt;h2 id="toc-iklv-learn-more-about-affinity-designer"&gt;Learn more about Affinity Designer&lt;/h2&gt;
  4626. &lt;p&gt;You saw how easy it is to learn &lt;span&gt;how to remove a background in Affinity Designer. If you want to continue learning, h&lt;/span&gt;ere is a list of other &lt;a href="https://elements.envato.com/learn/learn-affinity-designer-free-video-course" target="_self" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;Affinity Designer tutorials&lt;/a&gt; (and even a few cool &lt;a href="https://design.tutsplus.com/articles/affinity-designer-resources-roundup--cms-30750" target="_self"&gt;Affinity Designer resources&lt;/a&gt;) specially made for you:&lt;/p&gt;
  4627. &lt;ul class="roundup-block__contents posts--half-width roundup-block--list"&gt;
  4628. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/articles/a-to-z-of-affinity-designer--cms-37163"&gt;&lt;div class="roundup-block__content-container"&gt;
  4629. &lt;div class="roundup-block__preview"&gt;
  4630. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/53/posts/37163/preview_image/post%20_thumbs-az.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/53/posts/37163/preview_image/post%20_thumbs-az.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/53/posts/37163/preview_image/post%20_thumbs-az.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/53/posts/37163/preview_image/post%20_thumbs-az.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/53/posts/37163/preview_image/post%20_thumbs-az.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/53/posts/37163/preview_image/post%20_thumbs-az.jpg 2x"&gt;
  4631. &lt;/div&gt;
  4632. &lt;div class="roundup-block__content-meta"&gt;
  4633. &lt;div class="roundup-block__content-title"&gt;A to Z of Affinity Designer: Tips, Tricks, and Hacks!&lt;/div&gt;
  4634. &lt;div class="roundup-block__author-info"&gt;
  4635. &lt;div class="roundup-block__author-profile-image"&gt;
  4636. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/2532/profileImage/kezz.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/2532/profileImage/kezz.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/2532/profileImage/kezz.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/2532/profileImage/kezz.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/2532/profileImage/kezz.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/2532/profileImage/kezz.jpg 2x"&gt;
  4637. &lt;/div&gt;
  4638. &lt;div class="roundup-block__author-meta"&gt;
  4639. &lt;div class="roundup-block__author-name"&gt;Kezz Bracey&lt;/div&gt;
  4640. &lt;div class="roundup-block__published-date"&gt;24 Nov 2023&lt;/div&gt;
  4641. &lt;/div&gt;
  4642. &lt;/div&gt;
  4643. &lt;/div&gt;
  4644. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  4645. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/6-affinity-designer-tools-that-you-should-be-using-right-now--cms-31754"&gt;&lt;div class="roundup-block__content-container"&gt;
  4646. &lt;div class="roundup-block__preview"&gt;
  4647. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/523/posts/31754/preview_image/article-preview-small.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/523/posts/31754/preview_image/article-preview-small.png 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/523/posts/31754/preview_image/article-preview-small.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/523/posts/31754/preview_image/article-preview-small.png 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/523/posts/31754/preview_image/article-preview-small.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/523/posts/31754/preview_image/article-preview-small.png 2x"&gt;
  4648. &lt;/div&gt;
  4649. &lt;div class="roundup-block__content-meta"&gt;
  4650. &lt;div class="roundup-block__content-title"&gt;6 Affinity Designer Tools That You Should Be Using Right Now&lt;/div&gt;
  4651. &lt;div class="roundup-block__author-info"&gt;
  4652. &lt;div class="roundup-block__author-profile-image"&gt;
  4653. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/523/profiles/19105/profileImage/andrei-profile.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/523/profiles/19105/profileImage/andrei-profile.png 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/523/profiles/19105/profileImage/andrei-profile.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/523/profiles/19105/profileImage/andrei-profile.png 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/523/profiles/19105/profileImage/andrei-profile.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/523/profiles/19105/profileImage/andrei-profile.png 2x"&gt;
  4654. &lt;/div&gt;
  4655. &lt;div class="roundup-block__author-meta"&gt;
  4656. &lt;div class="roundup-block__author-name"&gt;Andrei Stefan&lt;/div&gt;
  4657. &lt;div class="roundup-block__published-date"&gt;15 Oct 2018&lt;/div&gt;
  4658. &lt;/div&gt;
  4659. &lt;/div&gt;
  4660. &lt;/div&gt;
  4661. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  4662. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/articles/everything-you-need-to-know-about-affinity-designer-brushes--cms-35217"&gt;&lt;div class="roundup-block__content-container"&gt;
  4663. &lt;div class="roundup-block__preview"&gt;
  4664. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1381/posts/35217/preview_image/Affinity%20Designer%20Brushes%20Tutorial%20Mini%20Preview.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1381/posts/35217/preview_image/Affinity%20Designer%20Brushes%20Tutorial%20Mini%20Preview.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1381/posts/35217/preview_image/Affinity%20Designer%20Brushes%20Tutorial%20Mini%20Preview.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1381/posts/35217/preview_image/Affinity%20Designer%20Brushes%20Tutorial%20Mini%20Preview.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1381/posts/35217/preview_image/Affinity%20Designer%20Brushes%20Tutorial%20Mini%20Preview.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1381/posts/35217/preview_image/Affinity%20Designer%20Brushes%20Tutorial%20Mini%20Preview.jpg 2x"&gt;
  4665. &lt;/div&gt;
  4666. &lt;div class="roundup-block__content-meta"&gt;
  4667. &lt;div class="roundup-block__content-title"&gt;Everything You Need to Know About Affinity Designer Brushes&lt;/div&gt;
  4668. &lt;div class="roundup-block__author-info"&gt;
  4669. &lt;div class="roundup-block__author-profile-image"&gt;
  4670. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1381/profiles/19892/profileImage/avatar.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1381/profiles/19892/profileImage/avatar.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1381/profiles/19892/profileImage/avatar.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1381/profiles/19892/profileImage/avatar.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1381/profiles/19892/profileImage/avatar.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1381/profiles/19892/profileImage/avatar.jpg 2x"&gt;
  4671. &lt;/div&gt;
  4672. &lt;div class="roundup-block__author-meta"&gt;
  4673. &lt;div class="roundup-block__author-name"&gt;Ivan Gromov&lt;/div&gt;
  4674. &lt;div class="roundup-block__published-date"&gt;11 Jul 2020&lt;/div&gt;
  4675. &lt;/div&gt;
  4676. &lt;/div&gt;
  4677. &lt;/div&gt;
  4678. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  4679. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-create-patterns-in-affinity-designer--cms-31947"&gt;&lt;div class="roundup-block__content-container"&gt;
  4680. &lt;div class="roundup-block__preview"&gt;
  4681. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/523/posts/31947/preview_image/tutorial-preview-small.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/523/posts/31947/preview_image/tutorial-preview-small.png 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/523/posts/31947/preview_image/tutorial-preview-small.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/523/posts/31947/preview_image/tutorial-preview-small.png 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/523/posts/31947/preview_image/tutorial-preview-small.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/523/posts/31947/preview_image/tutorial-preview-small.png 2x"&gt;
  4682. &lt;/div&gt;
  4683. &lt;div class="roundup-block__content-meta"&gt;
  4684. &lt;div class="roundup-block__content-title"&gt;How to Create Patterns in Affinity Designer&lt;/div&gt;
  4685. &lt;div class="roundup-block__author-info"&gt;
  4686. &lt;div class="roundup-block__author-profile-image"&gt;
  4687. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/523/profiles/19105/profileImage/andrei-profile.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/523/profiles/19105/profileImage/andrei-profile.png 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/523/profiles/19105/profileImage/andrei-profile.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/523/profiles/19105/profileImage/andrei-profile.png 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/523/profiles/19105/profileImage/andrei-profile.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/523/profiles/19105/profileImage/andrei-profile.png 2x"&gt;
  4688. &lt;/div&gt;
  4689. &lt;div class="roundup-block__author-meta"&gt;
  4690. &lt;div class="roundup-block__author-name"&gt;Andrei Stefan&lt;/div&gt;
  4691. &lt;div class="roundup-block__published-date"&gt;24 Jul 2020&lt;/div&gt;
  4692. &lt;/div&gt;
  4693. &lt;/div&gt;
  4694. &lt;/div&gt;
  4695. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  4696. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-use-affinity-designer-to-design-a-logo--cms-36519"&gt;&lt;div class="roundup-block__content-container"&gt;
  4697. &lt;div class="roundup-block__preview"&gt;
  4698. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2635/posts/36519/preview_image/affinity_logo_preview.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2635/posts/36519/preview_image/affinity_logo_preview.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2635/posts/36519/preview_image/affinity_logo_preview.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2635/posts/36519/preview_image/affinity_logo_preview.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2635/posts/36519/preview_image/affinity_logo_preview.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2635/posts/36519/preview_image/affinity_logo_preview.jpg 2x"&gt;
  4699. &lt;/div&gt;
  4700. &lt;div class="roundup-block__content-meta"&gt;
  4701. &lt;div class="roundup-block__content-title"&gt;How to Use Affinity Designer to Design a Logo&lt;/div&gt;
  4702. &lt;div class="roundup-block__author-info"&gt;
  4703. &lt;div class="roundup-block__author-profile-image"&gt;
  4704. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2635/profiles/21154/profileImage/avatar_sm_400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2635/profiles/21154/profileImage/avatar_sm_400.png 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2635/profiles/21154/profileImage/avatar_sm_400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2635/profiles/21154/profileImage/avatar_sm_400.png 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2635/profiles/21154/profileImage/avatar_sm_400.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2635/profiles/21154/profileImage/avatar_sm_400.png 2x"&gt;
  4705. &lt;/div&gt;
  4706. &lt;div class="roundup-block__author-meta"&gt;
  4707. &lt;div class="roundup-block__author-name"&gt;Zap Layden&lt;/div&gt;
  4708. &lt;div class="roundup-block__published-date"&gt;23 Feb 2021&lt;/div&gt;
  4709. &lt;/div&gt;
  4710. &lt;/div&gt;
  4711. &lt;/div&gt;
  4712. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  4713. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-create-a-greeting-card-template-in-affinity-designer--cms-36227"&gt;&lt;div class="roundup-block__content-container"&gt;
  4714. &lt;div class="roundup-block__preview"&gt;
  4715. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2635/posts/36227/preview_image/preview_image.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2635/posts/36227/preview_image/preview_image.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2635/posts/36227/preview_image/preview_image.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2635/posts/36227/preview_image/preview_image.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2635/posts/36227/preview_image/preview_image.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2635/posts/36227/preview_image/preview_image.jpg 2x"&gt;
  4716. &lt;/div&gt;
  4717. &lt;div class="roundup-block__content-meta"&gt;
  4718. &lt;div class="roundup-block__content-title"&gt;How to Create an Affinity Designer Greeting Card Template&lt;/div&gt;
  4719. &lt;div class="roundup-block__author-info"&gt;
  4720. &lt;div class="roundup-block__author-profile-image"&gt;
  4721. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2635/profiles/21154/profileImage/avatar_sm_400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2635/profiles/21154/profileImage/avatar_sm_400.png 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2635/profiles/21154/profileImage/avatar_sm_400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2635/profiles/21154/profileImage/avatar_sm_400.png 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2635/profiles/21154/profileImage/avatar_sm_400.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2635/profiles/21154/profileImage/avatar_sm_400.png 2x"&gt;
  4722. &lt;/div&gt;
  4723. &lt;div class="roundup-block__author-meta"&gt;
  4724. &lt;div class="roundup-block__author-name"&gt;Zap Layden&lt;/div&gt;
  4725. &lt;div class="roundup-block__published-date"&gt;26 Dec 2023&lt;/div&gt;
  4726. &lt;/div&gt;
  4727. &lt;/div&gt;
  4728. &lt;/div&gt;
  4729. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  4730. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-curve-text-in-affinity-designer--cms-37048"&gt;&lt;div class="roundup-block__content-container"&gt;
  4731. &lt;div class="roundup-block__preview"&gt;
  4732. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/158/posts/37048/preview_image/CurveTextPreview.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/158/posts/37048/preview_image/CurveTextPreview.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/158/posts/37048/preview_image/CurveTextPreview.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/158/posts/37048/preview_image/CurveTextPreview.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/158/posts/37048/preview_image/CurveTextPreview.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/158/posts/37048/preview_image/CurveTextPreview.jpg 2x"&gt;
  4733. &lt;/div&gt;
  4734. &lt;div class="roundup-block__content-meta"&gt;
  4735. &lt;div class="roundup-block__content-title"&gt;How to Curve Text in Affinity Designer&lt;/div&gt;
  4736. &lt;div class="roundup-block__author-info"&gt;
  4737. &lt;div class="roundup-block__author-profile-image"&gt;
  4738. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/158/profiles/957/profileImage/PORTRAIT_2025_400x400_Tuts_.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/158/profiles/957/profileImage/PORTRAIT_2025_400x400_Tuts_.png 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/158/profiles/957/profileImage/PORTRAIT_2025_400x400_Tuts_.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/158/profiles/957/profileImage/PORTRAIT_2025_400x400_Tuts_.png 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/158/profiles/957/profileImage/PORTRAIT_2025_400x400_Tuts_.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/158/profiles/957/profileImage/PORTRAIT_2025_400x400_Tuts_.png 2x"&gt;
  4739. &lt;/div&gt;
  4740. &lt;div class="roundup-block__author-meta"&gt;
  4741. &lt;div class="roundup-block__author-name"&gt;Andrei Marius&lt;/div&gt;
  4742. &lt;div class="roundup-block__published-date"&gt;02 May 2023&lt;/div&gt;
  4743. &lt;/div&gt;
  4744. &lt;/div&gt;
  4745. &lt;/div&gt;
  4746. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  4747. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-create-a-set-of-office-icons-in-affinity-designer--cms-30521"&gt;&lt;div class="roundup-block__content-container"&gt;
  4748. &lt;div class="roundup-block__preview"&gt;
  4749. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/523/posts/30521/preview_image/tutorial-preview-small.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/523/posts/30521/preview_image/tutorial-preview-small.png 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/523/posts/30521/preview_image/tutorial-preview-small.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/523/posts/30521/preview_image/tutorial-preview-small.png 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/523/posts/30521/preview_image/tutorial-preview-small.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/523/posts/30521/preview_image/tutorial-preview-small.png 2x"&gt;
  4750. &lt;/div&gt;
  4751. &lt;div class="roundup-block__content-meta"&gt;
  4752. &lt;div class="roundup-block__content-title"&gt;How to Create a Set of Office Icons in Affinity Designer&lt;/div&gt;
  4753. &lt;div class="roundup-block__author-info"&gt;
  4754. &lt;div class="roundup-block__author-profile-image"&gt;
  4755. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/523/profiles/19105/profileImage/andrei-profile.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/523/profiles/19105/profileImage/andrei-profile.png 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/523/profiles/19105/profileImage/andrei-profile.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/523/profiles/19105/profileImage/andrei-profile.png 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/523/profiles/19105/profileImage/andrei-profile.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/523/profiles/19105/profileImage/andrei-profile.png 2x"&gt;
  4756. &lt;/div&gt;
  4757. &lt;div class="roundup-block__author-meta"&gt;
  4758. &lt;div class="roundup-block__author-name"&gt;Andrei Stefan&lt;/div&gt;
  4759. &lt;div class="roundup-block__published-date"&gt;28 Feb 2018&lt;/div&gt;
  4760. &lt;/div&gt;
  4761. &lt;/div&gt;
  4762. &lt;/div&gt;
  4763. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  4764. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/isometric-christmas-tree-svg-in-affinity-designer--cms-29987"&gt;&lt;div class="roundup-block__content-container"&gt;
  4765. &lt;div class="roundup-block__preview"&gt;
  4766. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/29987/preview_image/pre.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/29987/preview_image/pre.png 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/29987/preview_image/pre.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/29987/preview_image/pre.png 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/29987/preview_image/pre.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/29987/preview_image/pre.png 2x"&gt;
  4767. &lt;/div&gt;
  4768. &lt;div class="roundup-block__content-meta"&gt;
  4769. &lt;div class="roundup-block__content-title"&gt;How to Make an Isometric Christmas Tree SVG in Affinity Designer&lt;/div&gt;
  4770. &lt;div class="roundup-block__author-info"&gt;
  4771. &lt;div class="roundup-block__author-profile-image"&gt;
  4772. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/2532/profileImage/kezz.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/2532/profileImage/kezz.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/2532/profileImage/kezz.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/2532/profileImage/kezz.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/2532/profileImage/kezz.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/2532/profileImage/kezz.jpg 2x"&gt;
  4773. &lt;/div&gt;
  4774. &lt;div class="roundup-block__author-meta"&gt;
  4775. &lt;div class="roundup-block__author-name"&gt;Kezz Bracey&lt;/div&gt;
  4776. &lt;div class="roundup-block__published-date"&gt;07 Dec 2017&lt;/div&gt;
  4777. &lt;/div&gt;
  4778. &lt;/div&gt;
  4779. &lt;/div&gt;
  4780. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  4781. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-draw-a-porg-from-star-wars-in-affinity-designer--cms-30922"&gt;&lt;div class="roundup-block__content-container"&gt;
  4782. &lt;div class="roundup-block__preview"&gt;
  4783. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/107/posts/30922/preview_image/33-porg-starwars-affinity.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/107/posts/30922/preview_image/33-porg-starwars-affinity.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/107/posts/30922/preview_image/33-porg-starwars-affinity.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/107/posts/30922/preview_image/33-porg-starwars-affinity.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/107/posts/30922/preview_image/33-porg-starwars-affinity.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/107/posts/30922/preview_image/33-porg-starwars-affinity.jpg 2x"&gt;
  4784. &lt;/div&gt;
  4785. &lt;div class="roundup-block__content-meta"&gt;
  4786. &lt;div class="roundup-block__content-title"&gt;How to Create a Porg From Star Wars in Affinity Designer&lt;/div&gt;
  4787. &lt;div class="roundup-block__author-info"&gt;
  4788. &lt;div class="roundup-block__author-profile-image"&gt;
  4789. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/107/profiles/2394/profileImage/EeVohH6x3GY.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/107/profiles/2394/profileImage/EeVohH6x3GY.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/107/profiles/2394/profileImage/EeVohH6x3GY.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/107/profiles/2394/profileImage/EeVohH6x3GY.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/107/profiles/2394/profileImage/EeVohH6x3GY.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/107/profiles/2394/profileImage/EeVohH6x3GY.jpg 2x"&gt;
  4790. &lt;/div&gt;
  4791. &lt;div class="roundup-block__author-meta"&gt;
  4792. &lt;div class="roundup-block__author-name"&gt;Yulia Sokolova&lt;/div&gt;
  4793. &lt;div class="roundup-block__published-date"&gt;04 May 2018&lt;/div&gt;
  4794. &lt;/div&gt;
  4795. &lt;/div&gt;
  4796. &lt;/div&gt;
  4797. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  4798. &lt;/ul&gt;
  4799. &lt;/div&gt;&lt;div class="mediafed_ad"&gt;&lt;img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/669438/s/93200/sc/4/mf.gif" width="1" /&gt;&lt;a href="http://da.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/93200/a2.htm"&gt;&lt;img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/93200/a2.img" /&gt;&lt;/a&gt;&lt;img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/93200/a2t.img" width="1" /&gt;&lt;/div&gt;</content>
  4800.    <published>2025-06-22 17:06:00 UTC</published>
  4801.    <updated>2025-06-22 17:06:00 UTC</updated>
  4802.    <author>
  4803.      <name>Diana Toma</name>
  4804.    </author>
  4805.  </entry>
  4806.  <entry>
  4807.    <id>tag:tutsplus.com,2005:PostPresenter/cms-34464</id>
  4808.    <published>2020-01-07T11:09:55+00:00</published>
  4809.    <link rel="alternate" type="text/html" href="https://design.tutsplus.com/tutorials/how-to-remove-a-background-in-photoshop--cms-34464"/>
  4810.    <title>How to remove a background in Photoshop</title>
  4811.    <content type="html">&lt;style&gt;* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}&lt;/style&gt;&lt;div data-content-block-type="Wysi" id="ikzx" class="content-block-wysi content-block"&gt;
  4812. &lt;p&gt;If you want to learn the process of removing a background in Photoshop, this tutorial will show you the most universal method for achieving this goal.&lt;/p&gt;
  4813. &lt;p&gt;I'll teach you how to isolate the object and how to keep its edges smooth in the process. So open &lt;a href="https://design.tutsplus.com/compatible-with/adobe-photoshop" target="_self" rel=""&gt;Adobe Photoshop&lt;/a&gt;, and let's get to it!&lt;/p&gt;
  4814. &lt;h2 id="toc-b1jx-how-to-remove-a-background-in-photoshop"&gt;How to remove a background in Photoshop&lt;/h2&gt;
  4815. &lt;h3&gt;Step 1&lt;/h3&gt;
  4816. &lt;p&gt;How do you remove a background in Photoshop? First, we need to tell Photoshop where the object ends and the background starts.&lt;/p&gt;
  4817. &lt;p&gt;There are many selection tools available, but if you want to be precise, it’s best to use the &lt;strong&gt;Pen Tool (P).&lt;/strong&gt; Try to imagine the selection outline. Zoom in and click somewhere on this imaginary outline.&lt;/p&gt;
  4818. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/108/posts/34464/image/remove-background-photoshop-1.jpg" alt="Removing a background in Photoshop: use the Pen Tool." loading="lazy" width="870px" height="386px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/108/posts/34464/image/remove-background-photoshop-1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/108/posts/34464/image/remove-background-photoshop-1.jpg" alt="Removing a background in Photoshop: use the Pen Tool." loading="lazy" width="650px" height="291px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/108/posts/34464/image/remove-background-photoshop-1.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/108/posts/34464/image/remove-background-photoshop-1.jpg" alt="Removing a background in Photoshop: use the Pen Tool." loading="lazy" width="380px" height="175px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/108/posts/34464/image/remove-background-photoshop-1.jpg 2x"&gt;
  4819. &lt;figcaption&gt;We're using this image of a &lt;a href="https://elements.envato.com/white-coffee-cappuccino-mug-mockup-with-magenta-PT8NDQX" target="_self" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;white coffee mug&lt;/a&gt; from Envato.&lt;/figcaption&gt;
  4820. &lt;/figure&gt;
  4821. &lt;h3 id="toc-ck0n-step-2"&gt;Step 2&lt;/h3&gt;
  4822. &lt;p&gt;Find another place to click—this time, click and hold. You'll &lt;a href="https://design.tutsplus.com/tutorials/how-to-draw-a-line-in-photoshop--cms-35289" target="_self"&gt;draw a line&lt;/a&gt; between the two points. If you move your cursor now, you’ll have a chance to control the shape of the curve.&lt;/p&gt;
  4823. &lt;div class="callout-block"&gt;
  4824. &lt;span class="callout-icon callout-tip"&gt;&lt;/span&gt;
  4825. &lt;div class="callout-message"&gt;When removing a background in Photoshop, try to make the line fit the imaginary selection outline.&lt;/div&gt;
  4826. &lt;/div&gt;
  4827. &lt;p&gt;Remember not to drag too far—the handle you're dragging should land on the outline. The curvier the area, the closer you should place your points. Don't be afraid to &lt;strong&gt;Undo &lt;/strong&gt;and try again if you placed a point too far away.&lt;/p&gt;
  4828. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/108/posts/34464/image/remove-background-photoshop-2.jpg" alt="How do you remove a background on Photoshop: create the first line." loading="lazy" width="870px" height="432px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/108/posts/34464/image/remove-background-photoshop-2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/108/posts/34464/image/remove-background-photoshop-2.jpg" alt="How do you remove a background on Photoshop: create the first line." loading="lazy" width="650px" height="325px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/108/posts/34464/image/remove-background-photoshop-2.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/108/posts/34464/image/remove-background-photoshop-2.jpg" alt="How do you remove a background on Photoshop: create the first line." loading="lazy" width="380px" height="194px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/108/posts/34464/image/remove-background-photoshop-2.jpg 2x"&gt;&lt;/figure&gt;
  4829. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/108/posts/34464/image/remove-background-photoshop-3.jpg" alt="How do you remove a background on Photoshop: create a curve." loading="lazy" width="870px" height="451px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/108/posts/34464/image/remove-background-photoshop-3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/108/posts/34464/image/remove-background-photoshop-3.jpg" alt="How do you remove a background on Photoshop: create a curve." loading="lazy" width="650px" height="339px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/108/posts/34464/image/remove-background-photoshop-3.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/108/posts/34464/image/remove-background-photoshop-3.jpg" alt="How do you remove a background on Photoshop: create a curve." loading="lazy" width="380px" height="203px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/108/posts/34464/image/remove-background-photoshop-3.jpg 2x"&gt;&lt;/figure&gt;
  4830. &lt;h3&gt;Step 3&lt;/h3&gt;
  4831. &lt;p&gt;Once you've gone around the whole object, simply click the first point to close the outline.&lt;/p&gt;
  4832. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/108/posts/34464/image/remove-background-photoshop-4.jpg" alt="Photoshop background removal: close the path." loading="lazy" width="870px" height="324px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/108/posts/34464/image/remove-background-photoshop-4.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/108/posts/34464/image/remove-background-photoshop-4.jpg" alt="Photoshop background removal: close the path." loading="lazy" width="650px" height="245px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/108/posts/34464/image/remove-background-photoshop-4.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/108/posts/34464/image/remove-background-photoshop-4.jpg" alt="Photoshop background removal: close the path." loading="lazy" width="380px" height="149px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/108/posts/34464/image/remove-background-photoshop-4.jpg 2x"&gt;&lt;/figure&gt;
  4833. &lt;h3&gt;Step 4&lt;/h3&gt;
  4834. &lt;p&gt;Sometimes, objects have an inner outline as well. Select it the same way.&lt;/p&gt;
  4835. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/108/posts/34464/image/remove-background-photoshop-5.jpg" alt="Photoshop background removal: cut the inner path." loading="lazy" width="870px" height="586px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/108/posts/34464/image/remove-background-photoshop-5.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/108/posts/34464/image/remove-background-photoshop-5.jpg" alt="Photoshop background removal: cut the inner path." loading="lazy" width="650px" height="440px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/108/posts/34464/image/remove-background-photoshop-5.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/108/posts/34464/image/remove-background-photoshop-5.jpg" alt="Photoshop background removal: cut the inner path." loading="lazy" width="380px" height="260px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/108/posts/34464/image/remove-background-photoshop-5.jpg 2x"&gt;&lt;/figure&gt;
  4836. &lt;h3&gt;Step 5&lt;/h3&gt;
  4837. &lt;p&gt;Press &lt;strong&gt;Control-Enter&lt;/strong&gt; to turn the path into a selection.&lt;/p&gt;
  4838. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/108/posts/34464/image/remove-background-photoshop-6.jpg" alt="Removing a background in Photoshop: turn path into selection." loading="lazy" width="870px" height="419px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/108/posts/34464/image/remove-background-photoshop-6.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/108/posts/34464/image/remove-background-photoshop-6.jpg" alt="Removing a background in Photoshop: turn path into selection." loading="lazy" width="650px" height="316px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/108/posts/34464/image/remove-background-photoshop-6.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/108/posts/34464/image/remove-background-photoshop-6.jpg" alt="Removing a background in Photoshop: turn path into selection." loading="lazy" width="380px" height="189px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/108/posts/34464/image/remove-background-photoshop-6.jpg 2x"&gt;&lt;/figure&gt;
  4839. &lt;h3&gt;Step 6&lt;/h3&gt;
  4840. &lt;p&gt;You could remove the background now, but we can do one more thing to make the effect more convincing.&lt;/p&gt;
  4841. &lt;p&gt;Press &lt;strong&gt;Control-Alt-R&lt;/strong&gt; to refine the edge of the selection. Change the &lt;strong&gt;View Mode&lt;/strong&gt; to &lt;strong&gt;On Black&lt;/strong&gt;, and check &lt;strong&gt;Smart Radius&lt;/strong&gt;.&lt;/p&gt;
  4842. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/108/posts/34464/image/remove-background-photoshop-7.jpg" alt="How do you remove a background on Photoshop: check the smart radius." loading="lazy" width="870px" height="580px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/108/posts/34464/image/remove-background-photoshop-7.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/108/posts/34464/image/remove-background-photoshop-7.jpg" alt="How do you remove a background on Photoshop: check the smart radius." loading="lazy" width="650px" height="435px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/108/posts/34464/image/remove-background-photoshop-7.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/108/posts/34464/image/remove-background-photoshop-7.jpg" alt="How do you remove a background on Photoshop: check the smart radius." loading="lazy" width="380px" height="257px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/108/posts/34464/image/remove-background-photoshop-7.jpg 2x"&gt;&lt;/figure&gt;
  4843. &lt;h3&gt;Step 7&lt;/h3&gt;
  4844. &lt;p&gt;Experiment with the &lt;strong&gt;Radius&lt;/strong&gt; and&lt;strong&gt; Adjust Edge &lt;/strong&gt;settings&lt;strong&gt; &lt;/strong&gt;to make the edge of the selection smoother and more natural. If the background was blurry, the object should have slightly blurry edges as well.&lt;/p&gt;
  4845. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/108/posts/34464/image/remove-background-photoshop-8.jpg" alt="Make the selection smoother." loading="lazy" width="870px" height="580px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/108/posts/34464/image/remove-background-photoshop-8.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/108/posts/34464/image/remove-background-photoshop-8.jpg" alt="Make the selection smoother." loading="lazy" width="650px" height="435px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/108/posts/34464/image/remove-background-photoshop-8.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/108/posts/34464/image/remove-background-photoshop-8.jpg" alt="Make the selection smoother." loading="lazy" width="380px" height="257px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/108/posts/34464/image/remove-background-photoshop-8.jpg 2x"&gt;&lt;/figure&gt;
  4846. &lt;h3&gt;Step 8&lt;/h3&gt;
  4847. &lt;p&gt;When you’re done, set&lt;strong&gt; &lt;/strong&gt;the&lt;strong&gt; Output&lt;/strong&gt; to &lt;strong&gt;Layer Mask &lt;/strong&gt;and press &lt;strong&gt;OK&lt;/strong&gt;.&lt;/p&gt;
  4848. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/108/posts/34464/image/remove-background-photoshop-9.jpg" alt="Change the output." loading="lazy" width="870px" height="611px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/108/posts/34464/image/remove-background-photoshop-9.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/108/posts/34464/image/remove-background-photoshop-9.jpg" alt="Change the output." loading="lazy" width="650px" height="458px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/108/posts/34464/image/remove-background-photoshop-9.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/108/posts/34464/image/remove-background-photoshop-9.jpg" alt="Change the output." loading="lazy" width="380px" height="270px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/108/posts/34464/image/remove-background-photoshop-9.jpg 2x"&gt;&lt;/figure&gt;
  4849. &lt;h3&gt;Step 9&lt;/h3&gt;
  4850. &lt;p&gt;The background has disappeared.&lt;/p&gt;
  4851. &lt;p&gt;Sometimes, after removing the background, you'll notice a flaw in the selection. It’s not a problem at all—just click the &lt;strong&gt;Layer Mask &lt;/strong&gt;to select it, and then paint carefully with black and white.&lt;/p&gt;
  4852. &lt;p&gt;Black will remove the area, and white will bring it back. You can also use various shades of gray to create a semi-&lt;a href="https://design.tutsplus.com/tutorials/how-to-make-a-background-transparent-in-photoshop--cms-40653" target="_self"&gt;transparent background&lt;/a&gt; effect.&lt;/p&gt;
  4853. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/108/posts/34464/image/remove-background-photoshop-11.jpg" alt="Edit the Layer Mask." loading="lazy" width="870px" height="508px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/108/posts/34464/image/remove-background-photoshop-11.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/108/posts/34464/image/remove-background-photoshop-11.jpg" alt="Edit the Layer Mask." loading="lazy" width="650px" height="382px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/108/posts/34464/image/remove-background-photoshop-11.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/108/posts/34464/image/remove-background-photoshop-11.jpg" alt="Edit the Layer Mask." loading="lazy" width="380px" height="227px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/108/posts/34464/image/remove-background-photoshop-11.jpg 2x"&gt;&lt;/figure&gt;
  4854. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/108/posts/34464/image/remove-background-photoshop-12.jpg" alt="Photoshop background removal: Paint on the Layer Mask." loading="lazy" width="870px" height="503px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/108/posts/34464/image/remove-background-photoshop-12.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/108/posts/34464/image/remove-background-photoshop-12.jpg" alt="Photoshop background removal: Paint on the Layer Mask." loading="lazy" width="650px" height="378px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/108/posts/34464/image/remove-background-photoshop-12.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/108/posts/34464/image/remove-background-photoshop-12.jpg" alt="Photoshop background removal: Paint on the Layer Mask." loading="lazy" width="380px" height="225px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/108/posts/34464/image/remove-background-photoshop-12.jpg 2x"&gt;&lt;/figure&gt;
  4855. &lt;h3&gt;Step 10&lt;/h3&gt;
  4856. &lt;p&gt;Additionally, you can use this technique to bring back the shadow that belongs to the object, not the background. This will make the isolated object look more complete.&lt;/p&gt;
  4857. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/108/posts/34464/image/remove-background-photoshop-13.jpg" alt="Photoshop background removal: Add a shadow to the selection." loading="lazy" width="870px" height="278px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/108/posts/34464/image/remove-background-photoshop-13.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/108/posts/34464/image/remove-background-photoshop-13.jpg" alt="Photoshop background removal: Add a shadow to the selection." loading="lazy" width="650px" height="211px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/108/posts/34464/image/remove-background-photoshop-13.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/108/posts/34464/image/remove-background-photoshop-13.jpg" alt="Photoshop background removal: Add a shadow to the selection." loading="lazy" width="380px" height="129px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/108/posts/34464/image/remove-background-photoshop-13.jpg 2x"&gt;&lt;/figure&gt;
  4858. &lt;h3&gt;Step 11&lt;/h3&gt;
  4859. &lt;p&gt;If you’re happy with the selection, &lt;strong&gt;right-click&lt;/strong&gt; the &lt;strong&gt;Layer Mask&lt;/strong&gt; and select &lt;strong&gt;Apply Layer Mask&lt;/strong&gt;. The background will be permanently removed.&lt;/p&gt;
  4860. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/108/posts/34464/image/remove-background-photoshop-14.jpg" alt="How do you remove a background on Photoshop: Apply a Layer Mask." loading="lazy" width="870px" height="510px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/108/posts/34464/image/remove-background-photoshop-14.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/108/posts/34464/image/remove-background-photoshop-14.jpg" alt="How do you remove a background on Photoshop: Apply a Layer Mask." loading="lazy" width="650px" height="383px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/108/posts/34464/image/remove-background-photoshop-14.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/108/posts/34464/image/remove-background-photoshop-14.jpg" alt="How do you remove a background on Photoshop: Apply a Layer Mask." loading="lazy" width="380px" height="228px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/108/posts/34464/image/remove-background-photoshop-14.jpg 2x"&gt;&lt;/figure&gt;
  4861. &lt;p&gt;If you ever wanted to know how to change the background color in Photoshop, now you're able to do it—use the &lt;strong&gt;Paint Bucket Tool (G)&lt;/strong&gt; on a layer below, or place a photo, or &lt;a href="https://design.tutsplus.com/articles/identifying-geometric-patterns-in-graphic-design--cms-108536" target="_self"&gt;fill it with a pattern&lt;/a&gt;.&lt;/p&gt;
  4862. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/108/posts/34464/image/remove-background-photoshop-15.jpg" alt="How to change background color in Photoshop." loading="lazy" width="870px" height="362px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/108/posts/34464/image/remove-background-photoshop-15.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/108/posts/34464/image/remove-background-photoshop-15.jpg" alt="How to change background color in Photoshop." loading="lazy" width="650px" height="273px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/108/posts/34464/image/remove-background-photoshop-15.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/108/posts/34464/image/remove-background-photoshop-15.jpg" alt="How to change background color in Photoshop." loading="lazy" width="380px" height="165px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/108/posts/34464/image/remove-background-photoshop-15.jpg 2x"&gt;&lt;/figure&gt;
  4863. &lt;h2&gt;Good job!&lt;/h2&gt;
  4864. &lt;p&gt;Good job! Now you're ready to apply your new Photoshop background removal skills to your other projects.&lt;/p&gt;
  4865. &lt;p&gt;If you're in a hurry, you can also save time and get quick results by using the Photoshop AI Remove Background tool. It can be less precise than the technique you just learned, but it's always a good idea to have different options.&lt;/p&gt;
  4866. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/108/posts/34464/image/remove-background-photoshop-final.jpg" alt="Removing background in Photoshop." loading="lazy" width="870px" height="584px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/108/posts/34464/image/remove-background-photoshop-final.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/108/posts/34464/image/remove-background-photoshop-final.jpg" alt="Removing background in Photoshop." loading="lazy" width="650px" height="438px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/108/posts/34464/image/remove-background-photoshop-final.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/108/posts/34464/image/remove-background-photoshop-final.jpg" alt="Removing background in Photoshop." loading="lazy" width="380px" height="259px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/108/posts/34464/image/remove-background-photoshop-final.jpg 2x"&gt;&lt;/figure&gt;
  4867. &lt;p&gt;If you'd like to try using AI to remove a background, you can also &lt;a href="https://labs.envato.com/image-edit" target="_blank" rel="noopener"&gt;check out ImageEdit&lt;/a&gt;. Along with the other &lt;a href="https://elements.envato.com/lp/ai-stack/" target="_blank" rel="noopener" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;Envato AI tools&lt;/a&gt;, ImageEdit is easy to use, so forget about having to come up with complicated prompts.&lt;/p&gt;
  4868. &lt;p&gt;The tools are all included with your Envato subscription*, so you don't need to create new accounts, buy credits, or install anything. Keep up with the &lt;a href="https://elements.envato.com/learn/ai-trends" target="_self" data-action="click-&amp;gt;ga-analytics#sendElementsClickEvent"&gt;latest AI trends&lt;/a&gt; and enjoy unlimited use, for unlimited possibilities.&lt;/p&gt;
  4869. &lt;p&gt;&lt;em&gt;*Not available on Enterprise Plans&lt;/em&gt;&lt;/p&gt;
  4870. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2815/posts/34464/image-upload/imageedit.jpg" alt="Try Envato's ImageEdit for the best AI background remover." loading="lazy" width="870px" height="454px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2815/posts/34464/image-upload/imageedit.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2815/posts/34464/image-upload/imageedit.jpg" alt="Try Envato's ImageEdit for the best AI background remover." loading="lazy" width="650px" height="342px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2815/posts/34464/image-upload/imageedit.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2815/posts/34464/image-upload/imageedit.jpg" alt="Try Envato's ImageEdit for the best AI background remover." loading="lazy" width="380px" height="204px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2815/posts/34464/image-upload/imageedit.jpg 2x"&gt;
  4871. &lt;figcaption&gt;Try Envato's ImageEdit for the best AI background remover.&lt;/figcaption&gt;
  4872. &lt;/figure&gt;
  4873. &lt;p&gt;If you prefer &lt;a href="https://www.youtube.com/user/TutsPremium" target="_self"&gt;video tutorials&lt;/a&gt;, check out the Envato Tuts+ YouTube channel. You can also learn all about Photoshop background removal over there:&lt;/p&gt;
  4874. &lt;figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=WKRfsmAnQB8&amp;amp;t=0"&gt;
  4875.            &lt;iframe src="https://www.youtube.com/embed/WKRfsmAnQB8?rel=0&amp;amp;start=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy" style="border-radius: 15px;"&gt;&lt;/iframe&gt;
  4876.          &lt;/figure&gt;
  4877. &lt;p&gt;Do you want to learn more about creating photo effects, or maybe even Photoshop actions? Try these tutorials as well:&lt;/p&gt;
  4878. &lt;ul class="roundup-block__contents posts--half-width roundup-block--list"&gt;
  4879. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-create-a-glitch-effect--cms-27681"&gt;&lt;div class="roundup-block__content-container"&gt;
  4880. &lt;div class="roundup-block__preview"&gt;
  4881. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2659/posts/27681/preview_image/glitch_Photoshop_thumb.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2659/posts/27681/preview_image/glitch_Photoshop_thumb.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2659/posts/27681/preview_image/glitch_Photoshop_thumb.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2659/posts/27681/preview_image/glitch_Photoshop_thumb.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2659/posts/27681/preview_image/glitch_Photoshop_thumb.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2659/posts/27681/preview_image/glitch_Photoshop_thumb.jpg 2x"&gt;
  4882. &lt;/div&gt;
  4883. &lt;div class="roundup-block__content-meta"&gt;
  4884. &lt;div class="roundup-block__content-title"&gt;How to Create a Cool Glitch Photo Effect in Adobe Photoshop&lt;/div&gt;
  4885. &lt;div class="roundup-block__author-info"&gt;
  4886. &lt;div class="roundup-block__author-profile-image"&gt;
  4887. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/346/profiles/2218/profileImage/tutprotest.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/346/profiles/2218/profileImage/tutprotest.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/346/profiles/2218/profileImage/tutprotest.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/346/profiles/2218/profileImage/tutprotest.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/346/profiles/2218/profileImage/tutprotest.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/346/profiles/2218/profileImage/tutprotest.jpg 2x"&gt;
  4888. &lt;/div&gt;
  4889. &lt;div class="roundup-block__author-meta"&gt;
  4890. &lt;div class="roundup-block__author-name"&gt;Melody Nieves&lt;/div&gt;
  4891. &lt;div class="roundup-block__published-date"&gt;20 Sep 2023&lt;/div&gt;
  4892. &lt;/div&gt;
  4893. &lt;/div&gt;
  4894. &lt;/div&gt;
  4895. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  4896. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-create-a-cut-up-photo-effect-in-photoshop--cms-33008"&gt;&lt;div class="roundup-block__content-container"&gt;
  4897. &lt;div class="roundup-block__preview"&gt;
  4898. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1451/posts/33008/preview_image/cut-up-photo-thumbnail.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1451/posts/33008/preview_image/cut-up-photo-thumbnail.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1451/posts/33008/preview_image/cut-up-photo-thumbnail.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1451/posts/33008/preview_image/cut-up-photo-thumbnail.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1451/posts/33008/preview_image/cut-up-photo-thumbnail.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1451/posts/33008/preview_image/cut-up-photo-thumbnail.jpg 2x"&gt;
  4899. &lt;/div&gt;
  4900. &lt;div class="roundup-block__content-meta"&gt;
  4901. &lt;div class="roundup-block__content-title"&gt;How to Create a Cut-Up Photo Effect in Photoshop&lt;/div&gt;
  4902. &lt;div class="roundup-block__author-info"&gt;
  4903. &lt;div class="roundup-block__author-profile-image"&gt;
  4904. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1451/profiles/19961/profileImage/john-avatar.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1451/profiles/19961/profileImage/john-avatar.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1451/profiles/19961/profileImage/john-avatar.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1451/profiles/19961/profileImage/john-avatar.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1451/profiles/19961/profileImage/john-avatar.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1451/profiles/19961/profileImage/john-avatar.jpg 2x"&gt;
  4905. &lt;/div&gt;
  4906. &lt;div class="roundup-block__author-meta"&gt;
  4907. &lt;div class="roundup-block__author-name"&gt;John Negoita&lt;/div&gt;
  4908. &lt;div class="roundup-block__published-date"&gt;13 May 2019&lt;/div&gt;
  4909. &lt;/div&gt;
  4910. &lt;/div&gt;
  4911. &lt;/div&gt;
  4912. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  4913. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-make-a-glowing-photo-effect-to-a-portrait-in-photoshop--cms-32833"&gt;&lt;div class="roundup-block__content-container"&gt;
  4914. &lt;div class="roundup-block__preview"&gt;
  4915. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/108/posts/32833/preview_image/glow-action-photoshop-preview.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/108/posts/32833/preview_image/glow-action-photoshop-preview.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/108/posts/32833/preview_image/glow-action-photoshop-preview.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/108/posts/32833/preview_image/glow-action-photoshop-preview.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/108/posts/32833/preview_image/glow-action-photoshop-preview.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/108/posts/32833/preview_image/glow-action-photoshop-preview.jpg 2x"&gt;
  4916. &lt;/div&gt;
  4917. &lt;div class="roundup-block__content-meta"&gt;
  4918. &lt;div class="roundup-block__content-title"&gt;How to Add a Glowing Photo Effect to a Portrait in Photoshop&lt;/div&gt;
  4919. &lt;div class="roundup-block__author-info"&gt;
  4920. &lt;div class="roundup-block__author-profile-image"&gt;
  4921. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/108/profiles/18550/profileImage/profil-envato.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/108/profiles/18550/profileImage/profil-envato.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/108/profiles/18550/profileImage/profil-envato.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/108/profiles/18550/profileImage/profil-envato.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/108/profiles/18550/profileImage/profil-envato.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/108/profiles/18550/profileImage/profil-envato.jpg 2x"&gt;
  4922. &lt;/div&gt;
  4923. &lt;div class="roundup-block__author-meta"&gt;
  4924. &lt;div class="roundup-block__author-name"&gt;Monika Zagrobelna&lt;/div&gt;
  4925. &lt;div class="roundup-block__published-date"&gt;29 Apr 2019&lt;/div&gt;
  4926. &lt;/div&gt;
  4927. &lt;/div&gt;
  4928. &lt;/div&gt;
  4929. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  4930. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/photoshop-in-60-seconds-photoshop-actions-and-how-to-use-them--cms-27119"&gt;&lt;div class="roundup-block__content-container"&gt;
  4931. &lt;div class="roundup-block__preview"&gt;
  4932. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/254/posts/27119/preview_image/previewImage.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/254/posts/27119/preview_image/previewImage.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/254/posts/27119/preview_image/previewImage.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/254/posts/27119/preview_image/previewImage.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/254/posts/27119/preview_image/previewImage.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/254/posts/27119/preview_image/previewImage.jpg 2x"&gt;
  4933. &lt;/div&gt;
  4934. &lt;div class="roundup-block__content-meta"&gt;
  4935. &lt;div class="roundup-block__content-title"&gt;What Are Photoshop Actions and How to Install Photoshop Actions&lt;/div&gt;
  4936. &lt;div class="roundup-block__author-info"&gt;
  4937. &lt;div class="roundup-block__author-profile-image"&gt;
  4938. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/8/profiles/18494/profileImage/KirkHeadShot.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/8/profiles/18494/profileImage/KirkHeadShot.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/8/profiles/18494/profileImage/KirkHeadShot.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/8/profiles/18494/profileImage/KirkHeadShot.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/8/profiles/18494/profileImage/KirkHeadShot.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/8/profiles/18494/profileImage/KirkHeadShot.jpg 2x"&gt;
  4939. &lt;/div&gt;
  4940. &lt;div class="roundup-block__author-meta"&gt;
  4941. &lt;div class="roundup-block__author-name"&gt;Kirk Nelson&lt;/div&gt;
  4942. &lt;div class="roundup-block__published-date"&gt;20 Jan 2021&lt;/div&gt;
  4943. &lt;/div&gt;
  4944. &lt;/div&gt;
  4945. &lt;/div&gt;
  4946. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  4947. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-create-cyberpunk-photoshop-effect-action--cms-34235"&gt;&lt;div class="roundup-block__content-container"&gt;
  4948. &lt;div class="roundup-block__preview"&gt;
  4949. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1437/posts/34235/preview_image/preview.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1437/posts/34235/preview_image/preview.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1437/posts/34235/preview_image/preview.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1437/posts/34235/preview_image/preview.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1437/posts/34235/preview_image/preview.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1437/posts/34235/preview_image/preview.jpg 2x"&gt;
  4950. &lt;/div&gt;
  4951. &lt;div class="roundup-block__content-meta"&gt;
  4952. &lt;div class="roundup-block__content-title"&gt;How to Create a Cyberpunk Photoshop Effect Action&lt;/div&gt;
  4953. &lt;div class="roundup-block__author-info"&gt;
  4954. &lt;div class="roundup-block__author-profile-image"&gt;
  4955. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1437/profiles/19947/profileImage/0_6.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1437/profiles/19947/profileImage/0_6.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1437/profiles/19947/profileImage/0_6.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1437/profiles/19947/profileImage/0_6.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1437/profiles/19947/profileImage/0_6.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1437/profiles/19947/profileImage/0_6.jpg 2x"&gt;
  4956. &lt;/div&gt;
  4957. &lt;div class="roundup-block__author-meta"&gt;
  4958. &lt;div class="roundup-block__author-name"&gt;Marko Kožokar&lt;/div&gt;
  4959. &lt;div class="roundup-block__published-date"&gt;15 May 2023&lt;/div&gt;
  4960. &lt;/div&gt;
  4961. &lt;/div&gt;
  4962. &lt;/div&gt;
  4963. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  4964. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/articles/how-to-make-your-photoshop-file-size-smaller-best-tips-and-tricks--cms-34844"&gt;&lt;div class="roundup-block__content-container"&gt;
  4965. &lt;div class="roundup-block__preview"&gt;
  4966. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1381/posts/34844/preview_image/mini%20preview-min.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1381/posts/34844/preview_image/mini%20preview-min.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1381/posts/34844/preview_image/mini%20preview-min.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1381/posts/34844/preview_image/mini%20preview-min.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1381/posts/34844/preview_image/mini%20preview-min.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1381/posts/34844/preview_image/mini%20preview-min.jpg 2x"&gt;
  4967. &lt;/div&gt;
  4968. &lt;div class="roundup-block__content-meta"&gt;
  4969. &lt;div class="roundup-block__content-title"&gt;How to Make a File Smaller in Photoshop (Best Tips and Tricks!)&lt;/div&gt;
  4970. &lt;div class="roundup-block__author-info"&gt;
  4971. &lt;div class="roundup-block__author-profile-image"&gt;
  4972. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1381/profiles/19892/profileImage/avatar.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1381/profiles/19892/profileImage/avatar.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1381/profiles/19892/profileImage/avatar.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1381/profiles/19892/profileImage/avatar.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1381/profiles/19892/profileImage/avatar.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1381/profiles/19892/profileImage/avatar.jpg 2x"&gt;
  4973. &lt;/div&gt;
  4974. &lt;div class="roundup-block__author-meta"&gt;
  4975. &lt;div class="roundup-block__author-name"&gt;Ivan Gromov&lt;/div&gt;
  4976. &lt;div class="roundup-block__published-date"&gt;13 Apr 2024&lt;/div&gt;
  4977. &lt;/div&gt;
  4978. &lt;/div&gt;
  4979. &lt;/div&gt;
  4980. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  4981. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/how-to-extend-background-in-photoshop--cms-37366"&gt;&lt;div class="roundup-block__content-container"&gt;
  4982. &lt;div class="roundup-block__preview"&gt;
  4983. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2659/posts/37366/preview_image/IMG_07BA345D3162_thumb.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2659/posts/37366/preview_image/IMG_07BA345D3162_thumb.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2659/posts/37366/preview_image/IMG_07BA345D3162_thumb.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2659/posts/37366/preview_image/IMG_07BA345D3162_thumb.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2659/posts/37366/preview_image/IMG_07BA345D3162_thumb.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2659/posts/37366/preview_image/IMG_07BA345D3162_thumb.jpg 2x"&gt;
  4984. &lt;/div&gt;
  4985. &lt;div class="roundup-block__content-meta"&gt;
  4986. &lt;div class="roundup-block__content-title"&gt;How to extend a background in Photoshop&lt;/div&gt;
  4987. &lt;div class="roundup-block__author-info"&gt;
  4988. &lt;div class="roundup-block__author-profile-image"&gt;
  4989. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1381/profiles/19892/profileImage/avatar.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1381/profiles/19892/profileImage/avatar.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1381/profiles/19892/profileImage/avatar.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1381/profiles/19892/profileImage/avatar.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1381/profiles/19892/profileImage/avatar.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1381/profiles/19892/profileImage/avatar.jpg 2x"&gt;
  4990. &lt;/div&gt;
  4991. &lt;div class="roundup-block__author-meta"&gt;
  4992. &lt;div class="roundup-block__author-name"&gt;Ivan Gromov&lt;/div&gt;
  4993. &lt;div class="roundup-block__published-date"&gt;08 Jun 2025&lt;/div&gt;
  4994. &lt;/div&gt;
  4995. &lt;/div&gt;
  4996. &lt;/div&gt;
  4997. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  4998. &lt;li class="roundup-block__content"&gt;&lt;a class="roundup-block__content-link" href="https://design.tutsplus.com/tutorials/video-tip-remove-the-white-background-from-line-art-in-adobe-photoshop--cms-24361"&gt;&lt;div class="roundup-block__content-container"&gt;
  4999. &lt;div class="roundup-block__preview"&gt;
  5000. &lt;img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/108/posts/24361/preview_image/quick-lineart-prev.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/108/posts/24361/preview_image/quick-lineart-prev.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/108/posts/24361/preview_image/quick-lineart-prev.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/108/posts/24361/preview_image/quick-lineart-prev.jpg 2x"&gt;&lt;img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/108/posts/24361/preview_image/quick-lineart-prev.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/108/posts/24361/preview_image/quick-lineart-prev.jpg 2x"&gt;
  5001. &lt;/div&gt;
  5002. &lt;div class="roundup-block__content-meta"&gt;
  5003. &lt;div class="roundup-block__content-title"&gt;How to Remove a White Background in Photoshop&lt;/div&gt;
  5004. &lt;div class="roundup-block__author-info"&gt;
  5005. &lt;div class="roundup-block__author-profile-image"&gt;
  5006. &lt;img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/108/profiles/18550/profileImage/profil-envato.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/108/profiles/18550/profileImage/profil-envato.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/108/profiles/18550/profileImage/profil-envato.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/108/profiles/18550/profileImage/profil-envato.jpg 2x"&gt;&lt;img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/108/profiles/18550/profileImage/profil-envato.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/108/profiles/18550/profileImage/profil-envato.jpg 2x"&gt;
  5007. &lt;/div&gt;
  5008. &lt;div class="roundup-block__author-meta"&gt;
  5009. &lt;div class="roundup-block__author-name"&gt;Monika Zagrobelna&lt;/div&gt;
  5010. &lt;div class="roundup-block__published-date"&gt;12 May 2024&lt;/div&gt;
  5011. &lt;/div&gt;
  5012. &lt;/div&gt;
  5013. &lt;/div&gt;
  5014. &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  5015. &lt;/ul&gt;
  5016. &lt;/div&gt;&lt;div class="mediafed_ad"&gt;&lt;img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/669438/s/34464/sc/4/mf.gif" width="1" /&gt;&lt;a href="http://da.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/34464/a2.htm"&gt;&lt;img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/34464/a2.img" /&gt;&lt;/a&gt;&lt;img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/34464/a2t.img" width="1" /&gt;&lt;/div&gt;</content>
  5017.    <published>2025-06-21 16:42:00 UTC</published>
  5018.    <updated>2025-06-21 16:42:00 UTC</updated>
  5019.    <author>
  5020.      <name>Monika Zagrobelna</name>
  5021.    </author>
  5022.  </entry>
  5023.  <entry>
  5024.    <id>tag:tutsplus.com,2005:PostPresenter/cms-109199</id>
  5025.    <published>2025-06-20T10:32:58+00:00</published>
  5026.    <link rel="alternate" type="text/html" href="https://photography.tutsplus.com/tutorials/after-effects-timeline--cms-109199"/>
  5027.    <title>After Effects timeline tips every designer should know</title>
  5028.    <content type="html">&lt;style&gt;* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}&lt;/style&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iobv"&gt;&lt;p&gt;For many, the After Effects timeline can appear quite odd the first time you see it. It doesn’t appear like a traditional editing timeline you might see in Premiere Pro or Final Cut. And it isn’t a node-based editor either, like you see in Davinci Resolve. Instead, After Effects treats everything on the composition timeline like a layer. Almost like a blend between Photoshop and a traditional video editing app. This can create some unique challenges when you are navigating the After Effects timeline.&lt;/p&gt;&lt;/div&gt;&lt;div data-content-block-type="TableOfContents" class="content-block content-block-tableofcontents" id="itrj"&gt;
  5029. &lt;div data-content-block-type="ContentTextBlock" class="content-block content-block-contenttextblock" id="ivk6"&gt;&lt;p&gt;Skip to my favorite After Effects timeline tips:&lt;/p&gt;&lt;/div&gt;
  5030. &lt;ul class="visual-toc-list toc-ordered-list visual-toc__regular-theme div-container visual-toc-list__overflow visual-toc-list__equal-split" start="0"&gt;
  5031.  
  5032.  
  5033. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-x7yk-move-frame-by-frame"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;Move frame by frame&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  5034. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-j2rk-toggle-switches-modes"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;Toggle Switches / Modes&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  5035. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-7t7i-cycle-blending-modes"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;Cycle Blending Modes&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  5036. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-21jk-audio-waveform"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;Audio waveform&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  5037. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-xh1t-duplicate-a-layer"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;Duplicate a layer&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  5038. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-uuoh-move-trim-and-split-layers"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;Move, trim, and split layers&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  5039. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-nbhw-work-area"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;Work Area&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  5040. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-ph5x-keyframes"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;Keyframes&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  5041. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-9e5g-markers"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;Markers&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  5042. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-am8a-labels"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;Labels&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  5043. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-95gh-reveal-layer-source"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;Reveal layer source&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  5044. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-4g4v-how-to-copy-and-paste-layers-in-the-same-order"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;How to Copy and Paste layers in the same order&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  5045. &lt;li class="toc-item-title"&gt;&lt;a href="#toc-p8tz-cache-frames-when-idle"&gt;&lt;span class="visual-toc__heading-title content-container"&gt;Cache frames when idle&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  5046. &lt;/ul&gt;
  5047. &lt;/div&gt;&lt;div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i0iv"&gt;
  5048. &lt;h2 id="toc-zaqg-shortcuts"&gt;Shortcuts&lt;/h2&gt;
  5049. &lt;h3 id="toc-x7yk-move-frame-by-frame"&gt;Move frame by frame&lt;/h3&gt;
  5050. &lt;p&gt;Need to move down the After Effects timeline one frame at a time? This is simple, just push &lt;strong&gt;Page Up&lt;/strong&gt; or &lt;strong&gt;Page Down&lt;/strong&gt; to move forward or backwards one frame at a time. You can also move in 10-frame segments by holding &lt;strong&gt;Shift+Page Up&lt;/strong&gt; (or &lt;strong&gt;Page Down&lt;/strong&gt;).&lt;/p&gt;
  5051. &lt;h3 id="toc-j2rk-toggle-switches-modes"&gt;Toggle Switches / Modes&lt;/h3&gt;
  5052. &lt;p&gt;There are several different ways you can toggle between Switches and Modes in After Effects. The Switches column contains options for layers like turning on motion blur or making a layer 3D.&lt;/p&gt;
  5053. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Switches.jpg" alt="timeline switches" loading="lazy" width="870px" height="270px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Switches.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Switches.jpg" alt="timeline switches" loading="lazy" width="650px" height="205px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Switches.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Switches.jpg" alt="timeline switches" loading="lazy" width="380px" height="126px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Switches.jpg 2x"&gt;&lt;/figure&gt;
  5054. &lt;p&gt;The Modes column has options for setting layers to different blending modes and using Track Mattes.&lt;/p&gt;
  5055. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Modes.jpg" alt="timeline modes" loading="lazy" width="870px" height="270px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Modes.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Modes.jpg" alt="timeline modes" loading="lazy" width="650px" height="205px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Modes.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Modes.jpg" alt="timeline modes" loading="lazy" width="380px" height="126px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Modes.jpg 2x"&gt;&lt;/figure&gt;
  5056. &lt;p&gt;You can quickly cycle between them using the shortcut &lt;strong&gt;F4&lt;/strong&gt;. You can also switch between them manually using the &lt;strong&gt;Toggle&lt;/strong&gt; Button at the bottom of the timeline panel.&lt;/p&gt;
  5057. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Toggle_Button.jpg" alt="timeline toggle mode" loading="lazy" width="870px" height="270px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Toggle_Button.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Toggle_Button.jpg" alt="timeline toggle mode" loading="lazy" width="650px" height="205px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Toggle_Button.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Toggle_Button.jpg" alt="timeline toggle mode" loading="lazy" width="380px" height="126px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Toggle_Button.jpg 2x"&gt;&lt;/figure&gt;
  5058. &lt;p&gt;If you would like to turn them both on at the same time (or off), you have another option at the bottom-left corner of the timeline panel. You will see two small boxes. You can check them on or off to toggle their visibility together as well.&lt;/p&gt;
  5059. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Corner_Buttons.jpg" alt="timeline corner buttons" loading="lazy" width="870px" height="270px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Corner_Buttons.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Corner_Buttons.jpg" alt="timeline corner buttons" loading="lazy" width="650px" height="205px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Corner_Buttons.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Corner_Buttons.jpg" alt="timeline corner buttons" loading="lazy" width="380px" height="126px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Corner_Buttons.jpg 2x"&gt;&lt;/figure&gt;
  5060. &lt;h3 id="toc-7t7i-cycle-blending-modes"&gt;Cycle Blending Modes&lt;/h3&gt;
  5061. &lt;p&gt;Speaking of Blending Modes, if you ever need to quickly cycle through them, there is a much faster way than individually selecting each blending mode in the Modes column. Simply select your layer on the timeline, then press &lt;strong&gt;Shift&lt;/strong&gt;+&lt;strong&gt;+&lt;/strong&gt; or &lt;strong&gt;Shift&lt;/strong&gt;+&lt;strong&gt;-&lt;/strong&gt; and you will now be able to cycle through all of the different Modes.&lt;/p&gt;
  5062. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Cycle_Blending_Modes.gif" alt="blend modes" loading="lazy" width="870px" height="120px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Cycle_Blending_Modes.gif 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Cycle_Blending_Modes.gif" alt="blend modes" loading="lazy" width="650px" height="94px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Cycle_Blending_Modes.gif 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Cycle_Blending_Modes.gif" alt="blend modes" loading="lazy" width="380px" height="62px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Cycle_Blending_Modes.gif 2x"&gt;&lt;/figure&gt;
  5063. &lt;div class="callout-block"&gt;
  5064. &lt;span class="callout-icon callout-warn"&gt;&lt;/span&gt;
  5065. &lt;div class="callout-message"&gt;Make sure you use the plus and minus keys located at the top of your keyboard and not the ones on the numeric keypad (if you have one), as the ones on the numeric keypad will not work for this.&lt;/div&gt;
  5066. &lt;/div&gt;
  5067. &lt;h3 id="toc-21jk-audio-waveform"&gt;Audio waveform&lt;/h3&gt;
  5068. &lt;p&gt;If you ever need to edit something to the beat of music in After Effects, I highly suggest editing to the audio waveform and not what you “hear” from your speakers. (This is due to After Effects notoriously being a little out of sync at times with audio.) So it is better to play it safe and make sure your animations align with the audio waves. To toggle an audio track’s waveform, select it in the timeline and press the shortcut &lt;strong&gt;L&lt;/strong&gt;, &lt;strong&gt;L&lt;/strong&gt; in quick succession. This will reveal the audio waveform for the layer in the composition timeline.&lt;/p&gt;
  5069. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Waveform.jpg" alt="audio waveform" loading="lazy" width="870px" height="270px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Waveform.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Waveform.jpg" alt="audio waveform" loading="lazy" width="650px" height="205px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Waveform.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Waveform.jpg" alt="audio waveform" loading="lazy" width="380px" height="126px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Waveform.jpg 2x"&gt;&lt;/figure&gt;
  5070. &lt;h3 id="toc-xh1t-duplicate-a-layer"&gt;Duplicate a layer&lt;/h3&gt;
  5071. &lt;p&gt;To duplicate a layer (or anything you've selected in After Effects), select it and press &lt;strong&gt;Ctrl&lt;/strong&gt;+&lt;strong&gt;D&lt;/strong&gt;. This shortcut works for layers, compositions, and even things like effects in the Effects panel or footage selected in the &lt;strong&gt;Project&lt;/strong&gt; panel.&lt;/p&gt;
  5072. &lt;h3 id="toc-uuoh-move-trim-and-split-layers"&gt;Move, trim, and split layers&lt;/h3&gt;
  5073. &lt;p&gt;You can speed up the basics of how you edit layers using these layer shortcuts. To quickly move a layer to start at your current time in the timeline, select the layer and press the left square brace &lt;strong&gt;[&lt;/strong&gt;. Alternatively you can press &lt;strong&gt;]&lt;/strong&gt; to move the end of your selected layer to the current time. These will move your layer to begin or end wherever your Current Time Indicator (&lt;strong&gt;CTI&lt;/strong&gt;) is in the timeline.&lt;/p&gt;
  5074. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Move_Layer.gif" alt="move layer" loading="lazy" width="870px" height="270px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Move_Layer.gif 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Move_Layer.gif" alt="move layer" loading="lazy" width="650px" height="205px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Move_Layer.gif 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Move_Layer.gif" alt="move layer" loading="lazy" width="380px" height="126px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Move_Layer.gif 2x"&gt;&lt;/figure&gt;
  5075. &lt;p&gt;To trim a layer to your current time, select it and press &lt;strong&gt;Alt&lt;/strong&gt;+&lt;strong&gt;[&lt;/strong&gt;. To trim the layer backwards press &lt;strong&gt;Alt&lt;/strong&gt;+&lt;strong&gt;]&lt;/strong&gt;. These won’t move your layer down in the timeline, they’ll just trim them to that point in time.&lt;/p&gt;
  5076. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Trim.jpg" alt="trim layer" loading="lazy" width="870px" height="270px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Trim.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Trim.jpg" alt="trim layer" loading="lazy" width="650px" height="205px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Trim.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Trim.jpg" alt="trim layer" loading="lazy" width="380px" height="126px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Trim.jpg 2x"&gt;&lt;/figure&gt;
  5077. &lt;p&gt;To split a layer, select it and press &lt;strong&gt;Ctrl&lt;/strong&gt;+&lt;strong&gt;Shift&lt;/strong&gt;+&lt;strong&gt;D&lt;/strong&gt;. This will split the layer into two layers at the point in time you have it selected.&lt;/p&gt;
  5078. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Split.jpg" alt="timeline split" loading="lazy" width="870px" height="270px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Split.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Split.jpg" alt="timeline split" loading="lazy" width="650px" height="205px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Split.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Split.jpg" alt="timeline split" loading="lazy" width="380px" height="126px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Split.jpg 2x"&gt;&lt;/figure&gt;
  5079. &lt;h3 id="toc-nbhw-work-area"&gt;Work Area&lt;/h3&gt;
  5080. &lt;p&gt;The Work Area on your composition timeline is important, because it allows you to narrow in and select a specific section to preview. (This is helpful so you don’t have to render the entire length of your composition everytime you want to preview something back.) You can set the beginning and the end of the Work Area with the shortcuts &lt;strong&gt;B&lt;/strong&gt; and &lt;strong&gt;N&lt;/strong&gt;.&lt;/p&gt;
  5081. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Workarea.jpg" alt="timeline workarea" loading="lazy" width="870px" height="270px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Workarea.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Workarea.jpg" alt="timeline workarea" loading="lazy" width="650px" height="205px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Workarea.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Workarea.jpg" alt="timeline workarea" loading="lazy" width="380px" height="126px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Workarea.jpg 2x"&gt;&lt;/figure&gt;
  5082. &lt;p&gt;Another valuable thing you can do with the Work Area is trim the composition to the Work Area length. This is much faster than jumping into the composition settings and setting the length manually. &lt;strong&gt;Right-click&lt;/strong&gt; in the Work Area on the timeline and select &lt;strong&gt;Trim Comp to Work Area&lt;/strong&gt;.&lt;/p&gt;
  5083. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Trim_Comp_Workarea.jpg" alt="trim comp to work area" loading="lazy" width="870px" height="270px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Trim_Comp_Workarea.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Trim_Comp_Workarea.jpg" alt="trim comp to work area" loading="lazy" width="650px" height="205px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Trim_Comp_Workarea.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Trim_Comp_Workarea.jpg" alt="trim comp to work area" loading="lazy" width="380px" height="126px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Trim_Comp_Workarea.jpg 2x"&gt;&lt;/figure&gt;
  5084. &lt;h3 id="toc-ph5x-keyframes"&gt;Keyframes&lt;/h3&gt;
  5085. &lt;p&gt;There are plenty of keyframe shortcuts in After Effects, but the two I use the most are Easy Ease and Reveal Modified Properties. To convert a standard linear keyframe into an Easy Ease one, select it and press &lt;strong&gt;F9&lt;/strong&gt;. This will help smooth out the movement in your animation. (You can then refine it more in the Spee Graph.)&lt;/p&gt;
  5086. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Easy_Ease.jpg" alt="easy ease" loading="lazy" width="870px" height="270px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Easy_Ease.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Easy_Ease.jpg" alt="easy ease" loading="lazy" width="650px" height="205px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Easy_Ease.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Easy_Ease.jpg" alt="easy ease" loading="lazy" width="380px" height="126px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Easy_Ease.jpg 2x"&gt;&lt;/figure&gt;
  5087. &lt;p&gt;Next, to reveal all of the keyframes in your composition (and all properties that have been modified from their default settings) press &lt;strong&gt;U&lt;/strong&gt;, &lt;strong&gt;U&lt;/strong&gt; in quick succession. This is an easy way to reveal all of your keyframes at once and make timing changes as needed.&lt;/p&gt;
  5088. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Keyframes.jpg" alt="keyframes" loading="lazy" width="870px" height="270px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Keyframes.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Keyframes.jpg" alt="keyframes" loading="lazy" width="650px" height="205px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Keyframes.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Keyframes.jpg" alt="keyframes" loading="lazy" width="380px" height="126px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Keyframes.jpg 2x"&gt;&lt;/figure&gt;
  5089. &lt;h2 id="toc-nryz-timeline-organization"&gt;Timeline Organization&lt;/h2&gt;
  5090. &lt;p&gt;Now let’s look at some workflow tips that will help with organization in your After Effects timeline.&lt;/p&gt;
  5091. &lt;h3 id="toc-9e5g-markers"&gt;Markers&lt;/h3&gt;
  5092. &lt;p&gt;Sometimes you may want to mark certain areas on your timeline or on your layers for timing purposes. Markers work perfectly for this. To add a Marker, press the asterisk key &lt;strong&gt;*&lt;/strong&gt; on the numeric keypad. If you have a layer selected, this will add a marker on that layer. If no layer is selected, this will add a marker to the composition timeline.&lt;/p&gt;
  5093. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Marker.jpg" alt="markers" loading="lazy" width="870px" height="120px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Marker.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Marker.jpg" alt="markers" loading="lazy" width="650px" height="94px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Marker.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Marker.jpg" alt="markers" loading="lazy" width="380px" height="62px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Marker.jpg 2x"&gt;&lt;/figure&gt;
  5094. &lt;p&gt;You can also drag markers onto the composition timeline from the Marker Bin located on the far-right of the timeline.&lt;/p&gt;
  5095. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Marker_Bin.jpg" alt="marker bin" loading="lazy" width="870px" height="270px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Marker_Bin.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Marker_Bin.jpg" alt="marker bin" loading="lazy" width="650px" height="205px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Marker_Bin.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Marker_Bin.jpg" alt="marker bin" loading="lazy" width="380px" height="126px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Marker_Bin.jpg 2x"&gt;&lt;/figure&gt;
  5096. &lt;p&gt;To delete a marker, &lt;strong&gt;right-click&lt;/strong&gt; on it and select &lt;strong&gt;Delete this Marker&lt;/strong&gt;. If you &lt;strong&gt;double-click&lt;/strong&gt; on a Marker, you will open up the Composition Marker settings. You can then add text labels to the marker, customize the color, length, and more. This can make it really easy to identify different areas on your After Effects timeline.&lt;/p&gt;
  5097. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Marker_Labels.jpg" alt="marker labels" loading="lazy" width="870px" height="270px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Marker_Labels.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Marker_Labels.jpg" alt="marker labels" loading="lazy" width="650px" height="205px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Marker_Labels.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Marker_Labels.jpg" alt="marker labels" loading="lazy" width="380px" height="126px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Marker_Labels.jpg 2x"&gt;&lt;/figure&gt;
  5098. &lt;h3 id="toc-am8a-labels"&gt;Labels&lt;/h3&gt;
  5099. &lt;p&gt;It may seem obvious, but you can easily change the color of different layers on your timeline. This can make it a lot easier to “visually” group things together. &lt;strong&gt;Right-click&lt;/strong&gt; the label color box of your layer on the timeline.&lt;/p&gt;
  5100. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Labels.jpg" alt="labels" loading="lazy" width="870px" height="498px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Labels.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Labels.jpg" alt="labels" loading="lazy" width="650px" height="374px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Labels.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Labels.jpg" alt="labels" loading="lazy" width="380px" height="222px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Labels.jpg 2x"&gt;&lt;/figure&gt;
  5101. &lt;p&gt;You will then see a list of colors you can quickly change the label to, or you can select &lt;strong&gt;Edit Label Colors&lt;/strong&gt; if you would like to fully customize the look of all of the label options.&lt;/p&gt;
  5102. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Label_Colors.jpg" alt="label colors" loading="lazy" width="870px" height="498px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Label_Colors.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Label_Colors.jpg" alt="label colors" loading="lazy" width="650px" height="374px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Label_Colors.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Label_Colors.jpg" alt="label colors" loading="lazy" width="380px" height="222px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Label_Colors.jpg 2x"&gt;&lt;/figure&gt;
  5103. &lt;h3 id="toc-95gh-reveal-layer-source"&gt;Reveal layer source&lt;/h3&gt;
  5104. &lt;p&gt;Sometimes when you are working in your timeline, you may want to know where a file is in your project, or to open the folder on your computer where the original file is saved at. Luckily, After Effects makes this really easy to do. Just &lt;strong&gt;left-click&lt;/strong&gt; on the layer in your timeline and navigate to &lt;strong&gt;Reveal&amp;gt;Reveal Layer Source in Project&lt;/strong&gt;. This will highlight the original footage file in your project.&lt;/p&gt;
  5105. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Reveal_Layer_Source.jpg" alt="reveal label source" loading="lazy" width="870px" height="270px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Reveal_Layer_Source.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Reveal_Layer_Source.jpg" alt="reveal label source" loading="lazy" width="650px" height="205px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Reveal_Layer_Source.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Reveal_Layer_Source.jpg" alt="reveal label source" loading="lazy" width="380px" height="126px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Reveal_Layer_Source.jpg 2x"&gt;&lt;/figure&gt;
  5106. &lt;p&gt;Alternatively, to reveal where the footage is saved on your computer, navigate to&lt;strong&gt; Reveal&amp;gt;Reveal in Explorer&lt;/strong&gt;. This is really handy when you may want to quickly navigate footage folders and find a specific shot.&lt;/p&gt;
  5107. &lt;h3 id="toc-4g4v-how-to-copy-and-paste-layers-in-the-same-order"&gt;How to Copy and Paste layers in the same order&lt;/h3&gt;
  5108. &lt;p&gt;Have you ever copied and pasted layers in After Effects, only to have them paste in a different order? This is because After Effects takes into account which layers you select first when you copy and paste. To make sure your copied layers paste in the same order, always select your layers from the &lt;strong&gt;top down&lt;/strong&gt;, then copy and paste them.&lt;/p&gt;
  5109. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Copy_Paste.jpg" alt="copy paste" loading="lazy" width="870px" height="220px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Copy_Paste.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Copy_Paste.jpg" alt="copy paste" loading="lazy" width="650px" height="168px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Copy_Paste.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Copy_Paste.jpg" alt="copy paste" loading="lazy" width="380px" height="105px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Copy_Paste.jpg 2x"&gt;&lt;/figure&gt;
  5110. &lt;h3 id="toc-p8tz-cache-frames-when-idle"&gt;Cache frames when idle&lt;/h3&gt;
  5111. &lt;p&gt;Another timeline tip for After Effects that can really speed up your previews and renders is to turn on Cache Frames when Idle. To do this, navigate to&lt;strong&gt; Composition&amp;gt;Preview&amp;gt;Cache Frames When Idle&lt;/strong&gt;. With this turned on, After Effects will start caching previews automatically whenever you aren’t actively working in it. (Perfect if you leave for a short coffee break!)&lt;/p&gt;
  5112. &lt;figure class="post_image"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Cache_Frames.jpg" alt="cache frames" loading="lazy" width="870px" height="270px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Cache_Frames.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Cache_Frames.jpg" alt="cache frames" loading="lazy" width="650px" height="205px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Cache_Frames.jpg 2x"&gt;&lt;img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Cache_Frames.jpg" alt="cache frames" loading="lazy" width="380px" height="126px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/109199/image-upload/After_Effects_timeline_tips_Cache_Frames.jpg 2x"&gt;&lt;/figure&gt;
  5113. &lt;h2 id="toc-6tso-conclusion"&gt;Conclusion&lt;/h2&gt;
  5114. &lt;p&gt;Hopefully this list of timeline tips will help you speed up your workflow and give you a better user experience in After Effects. These are the ones that I’ve utilized the most over the years using After Effects. Be sure to check out some of our other &lt;a href="https://photography.tutsplus.com/video/c/post-production/compatible-with/adobe-after-effects"&gt;After Effects tutorials on Envato Tuts+!&lt;/a&gt;&lt;/p&gt;
  5115. &lt;/div&gt;&lt;div class="mediafed_ad"&gt;&lt;img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/669438/s/109199/sc/4/mf.gif" width="1" /&gt;&lt;a href="http://da.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/109199/a2.htm"&gt;&lt;img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/109199/a2.img" /&gt;&lt;/a&gt;&lt;img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/669438/c/35227/s/109199/a2t.img" width="1" /&gt;&lt;/div&gt;</content>
  5116.    <published>2025-06-20 10:33:01 UTC</published>
  5117.    <updated>2025-06-20 10:33:01 UTC</updated>
  5118.    <author>
  5119.      <name>Charles Yeager</name>
  5120.    </author>
  5121.  </entry>
  5122. </feed>
  5123.  

Home · About · News · Docs · Terms

 
Copyright © 2002-9 Sam Ruby, Mark Pilgrim, Joseph Walton, and Phil Ringnalda