tag:gamedevelopment.tutsplus.com,2005:/categories/visual-novelEnvato Tuts+ Game Development - Visual Novel2017-03-27T22:58:39Ztag:gamedevelopment.tutsplus.com,2005:PostPresenter/cms-28519How to Create Artistic Backgrounds From Photos With These 3 Photoshop Actions<figure class="final-product final-product--image"><img data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/final_image/ArtisticBG.jpg" alt="Final product image"><!--googleoff: index--><figcaption>What You'll Be Creating</figcaption><!--googleon: index--></figure><p>Backgrounds are an important—if sometimes underappreciated—element for many designers. Whether you're creating a game, visual novel, or website, the backgrounds you choose play a huge part in setting the mood and scene for your work. <br></p><p>Part of the reasons backgrounds don't always get the love they deserve is that, despite their importance, backgrounds are sometimes slow and tedious work. Luckily, there's always a faster way to get the job done.<br></p><p>In this tutorial, I'll be showing you how to create three dramatically different backgrounds from photos using resources from <a href="https://elements.envato.com/" target="_self">Envato Elements</a>. These resources are a combination of <a href="https://elements.envato.com/all-items/photoshop+action" target="_self">Photoshop Actions</a> and <a href="https://elements.envato.com/all-items/photoshop+brushes" target="_self">Photoshop Brushes</a> that, when combined, save you countless hours you would otherwise use to create these backgrounds from scratch. So let's get started!<br></p><h2>What You'll Need</h2><p>Here are the following assets you'll need for this tutorial:</p><ul>
<li><a href="https://elements.envato.com/charcoal-photoshop-action-TUMNZM" target="_self">Charcoal Action</a></li>
<li><a href="https://elements.envato.com/artist-photoshop-action-4MR2WS" target="_self">Artist Action</a></li>
<li><a href="https://elements.envato.com/paint-splatter-photoshop-actions-TLJPEZ" target="_self">Paint Splatter Action</a></li>
<li>
<a href="https://elements.envato.com/118-handcrafted-watercolor-brushes-METPCK" target="_self">Handcrafted Watercolor Brushes</a><br>
</li>
<li><a href="https://pixabay.com/en/eiffel-tower-paris-city-history-1784212/" target="_self">Eiffel Tower</a></li>
<li><a href="https://pixabay.com/en/girl-mystic-portrait-person-witch-1725255/" target="_self">Woman Portrait</a></li>
<li>
<a href="https://pixabay.com/en/tiger-white-tiger-cat-fur-wildlife-559389/" target="_self">Tiger Stock</a><br>
</li>
</ul><h2>
<span class="sectionnum">1.</span> How to Create a Charcoal-Inspired Background</h2><h3>Step 1<br>
</h3><p>First up is the charcoal background. I'll be using this amazing <a href="https://elements.envato.com/charcoal-photoshop-action-TUMNZM" target="_self">Charcoal Photoshop Action</a> to help achieve the final result. Start by opening this <a href="https://pixabay.com/en/eiffel-tower-paris-city-history-1784212/" target="_self">Eiffel Tower</a> reference into Photoshop, making sure that you select the <strong>1920x999 pixels</strong> size.<br></p><figure class="post_image"><img alt="Charcoal Pixabay Reference" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/charcoal1.jpg"><figcaption><a href="https://pixabay.com/en/eiffel-tower-paris-city-history-1784212/" target="_self">Eiffel Tower Stock</a><br></figcaption></figure><h3>Step 2</h3><p>Now let's set up the action. Go to <strong>Window &gt; Actions</strong> and load your charcoal action into the <strong>Actions </strong>palette. <br></p><figure class="post_image"><img alt="Charcoal Photoshop Action" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/charcoal2a.jpg"></figure><p>Because there's a brush set included with this action, you'll need to load it as well. So hit <strong>B</strong> on your keyboard to bring up the <strong>Brush Tool. </strong>Select<strong> Replace Brushes </strong>from the drop down menu then select the <strong>.abr</strong> file to replace your current brushes with the new charcoal ones. <br></p><p>Here is a look at the charcoal brushes you should now have in the <strong>Preset Manager.</strong> <br></p><figure class="post_image"><img alt="Charcoal Photoshop Brushes" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/charcoal2b.jpg"></figure><h3>Step 3</h3><p>Many Photoshop actions come with a set of instructions you'll need to follow exactly in order to avoid any program errors. So make sure you pay attention to the attached "Readme" file before you begin.</p><p>Now create a <strong>New Layer</strong> and name it "<strong>brush</strong>." With the <strong>Brush Tool (B)</strong> selected, paint black all over the Eiffel Tower since it's where I would like to apply the charcoal effect. It's important to keep the brush part as clean as possible, otherwise it will affect how this action plays out.<br></p><figure class="post_image"><img alt="Applying the Charcoal Action" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/charcoal3a.jpg"></figure><p>When you're ready, select <strong>Style 1</strong> under the <strong>Charcoal Action</strong>, then hit the<strong> Play</strong> button on the <strong>Actions</strong> palette.<br></p><figure class="post_image"><img alt="Playing the Charcoal Action" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/charcoal3b.jpg"></figure><h3>Step 4</h3><p>Here is the initial result after you play the action.<br></p><figure class="post_image"><img alt="Charcoal Action Initial Result" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/charcoal4a.jpg"></figure><p>Since it looks quite messy, let's tweak some of the <strong>Adjustment Layers</strong> found within the new <strong>Group</strong> created by the action.</p><p>First <strong>Hide the Visibility</strong> of the <strong>Sketch Lines 2 Group</strong>. Then select all three photo layers and set their <strong>Layer Blend Modes </strong>to <strong>Pin Light </strong>and their <strong>Opacity</strong> to <strong>100%. </strong>Follow up by select the Contrast layer and changing the <strong>Opacity </strong>to <strong>100%. </strong>This will allow your subject to show through the smudges more.<strong><br></strong></p><figure class="post_image"><img alt="Adjust the Photo Layers" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/charcoal4b.jpg"></figure><p>To add more texture to the background, create a <strong>New Layer </strong>above the second photo layer.<strong> </strong>Select the <strong>Brush Tool (B)</strong> and use one of the charcoal brushes from the set to paint a large smudge of gray on the layer. <strong>Right-click </strong>to go to <strong>Blending Options</strong> and apply a <strong>Gradient Overlay</strong> with the following settings:<strong><br></strong></p><figure class="post_image"><img alt="Apply a Gradient Overlay" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/charcoal4c.jpg"></figure><h3>Step 5</h3><p>For a tint of color, add a <strong>New Adjustment Layer </strong>for <strong>Color Lookup</strong> at the top of your layers. Go to <strong>Layer &gt; New Adjustment Layer &gt; Color Lookup</strong>. Then set the <strong>3DLUT</strong> <strong>File</strong> to <strong>FoggyNight. </strong><br></p><figure class="post_image"><img alt="Add a Color Lookup Adjustment Layer" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/charcoal5a.jpg"></figure><p>Here is the final charcoal background below. See how simple that was?<br></p><figure class="post_image"><img alt="Charcoal Background Photoshop Tutorial" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/charcoalfinal.jpg"></figure><h2>
<span class="sectionnum">2.</span> How to Create a Watercolor-Inspired Background</h2><h3>Step 1</h3><p>Next up, we'll create a lovely watercolor background from a photo. This time, I'll be using this <a href="https://elements.envato.com/artist-photoshop-action-4MR2WS" target="_self">Artist Photoshop Action</a> and this set of <a href="https://elements.envato.com/118-handcrafted-watercolor-brushes-METPCK" target="_self">Handcrafted Watercolor Brushes</a> to make the process much easier.</p><p>Open your photo into Photoshop. Here I'll be using this <a href="https://pixabay.com/en/girl-mystic-portrait-person-witch-1725255/" target="_self">Woman Portrait</a> at <strong>1920x1079 </strong>pixels.<br></p><figure class="post_image"><img alt="Woman Portrait Pixabay Stock" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/watercolor1.jpg"><figcaption><a href="https://pixabay.com/en/girl-mystic-portrait-person-witch-1725255/" target="_self">Woman Portrait</a><br></figcaption></figure><h3>Step 2<br>
</h3><p>Now go to<strong> Window &gt; Action</strong> and load the artist action into the <strong>Actions</strong> palette.</p><figure class="post_image"><img alt="Artist Photoshop Action" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/watercolor1a.jpg"></figure><p>Just like before, we'll need to also load all of the brushes attached to this action. So select the <strong>Brush Tool (B)</strong>, <strong>Right-click </strong>to bring up your brushes, then select <strong>Replace Brushes</strong> from the drop down options. Choose the artist brush file located from the same folder as the action.<br></p><p>Here is the new set you should have.</p><figure class="post_image"><img alt="Artist Action Brushes" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/watercolor2b.jpg"></figure><h3>Step 3</h3><p>To run the action, create a <strong>New Layer</strong> and name it "brush." Select the <strong>Brush Tool (B) </strong>at <strong>100% Hardness</strong>, and use the brush to <strong>Fill </strong>in the areas with black where you'd like the effect to take place. Here I painted the woman and the bars behind her.<br></p><figure class="post_image"><img alt="Paint the Woman to Apply the Action" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/watercolor3a.jpg"></figure><p>With the brush layer still selected, hit the<strong> Play</strong> button on the <strong>Actions</strong> palette to run your artist action. Here is the initial result.<br></p><figure class="post_image"><img alt="Initial Watercolor Action Result" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/watercolor3.jpg"></figure><h3>Step 4<br>
</h3><p>Even though we're going for a watercolor effect, let's clean up the result a bit. First, <strong>Hide the Visibility</strong> of the <strong>Watercolor Edge Splatter Group</strong>. <strong></strong>Then go into the <strong>Watercolor</strong> and <strong>Watercolor Texture Groups</strong> and<strong> Hide </strong>some of the layers to allow the portrait to breathe. Feel free to experiment with this for the result you prefer.<br></p><figure class="post_image"><img alt="Hide Some Texture Layers" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/watercolor4a.jpg"></figure><h3>Step 5</h3><p>To create a better color palette, add a <strong>Gradient Map Adjustment Layer</strong>. Go to <strong>Layer &gt; New Adjustment Layer &gt; Gradient Map.</strong> Create a gradient that transitions from a deep red color <code class="inline">#491802</code> to white.</p><figure class="post_image"><img alt="Add a Gradient Map" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/watercolor5a.jpg"></figure><h3>Step 6</h3><p>Finish this background with a little more texture. Load the <a href="https://elements.envato.com/118-handcrafted-watercolor-brushes-METPCK" target="_self">Handcrafted Watercolor Brushes</a> we mentioned earlier into the <strong>Brush Tool (B).</strong></p><figure class="post_image"><img alt="Handcrafted Watercolor Brushes" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/watercolor5b.jpg"></figure><p><strong></strong> Create a <strong>New Layer</strong> and use the <strong>Brush Tool (B) </strong>to paint white watercolor splashes all around the canvas. I used brushes <strong>1,15,</strong> and <strong>17</strong> for the right side, and brushes <strong>15, 26</strong>, and <strong>72</strong> for the left side.</p><p>Here is the final watercolor background when you're done.</p><figure class="post_image"><img alt="Final Watercolor Background Photoshop Tutorial" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/watercolorfinal.jpg"></figure><h2>
<span class="sectionnum">3.</span> How to Create a Paint Splatter-Inspired Background</h2><h3>Step 1<br>
</h3><p>For this last background, we'll be creating another traditional art effect using this <a href="https://elements.envato.com/paint-splatter-photoshop-actions-TLJPEZ" target="_self">Paint Splatter Action. </a><br></p><p>Here I'll be using this <a href="https://pixabay.com/en/tiger-white-tiger-cat-fur-wildlife-559389/" target="_self">Tiger Stock</a>, downloaded at <strong>1920x1280 pixels. </strong>Open this photo into Photoshop.<strong><br></strong></p><figure class="post_image"><img alt="Tiger Stock Via Pixabay" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/tigerstock.jpg"><figcaption><a href="https://pixabay.com/en/tiger-white-tiger-cat-fur-wildlife-559389/" target="_self">Tiger Stock</a><br></figcaption></figure><h3>Step 2</h3><p>Load your paint splatter action. Go to <strong>Window &gt; Actions</strong>, and load the action from the drop down menu. <br></p><figure class="post_image"><img alt="Paint Splatter Photoshop Action" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/splatter1a.jpg"></figure><p>Just like the previous actions, you'll need to load the brush set that comes along with it. So select the <strong>Brush Tool (B)</strong>, then <strong>Right-click</strong> to bring up your brushes. Select <strong>Replace</strong> <strong>Brushes</strong> from the options and replace them with the paint splatter brushes found within the same folder.<br></p><figure class="post_image"><img alt="Paint Splatter Photoshop Brushes" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/splatter1b.jpg"></figure><h3>Step 2</h3><p>Now create a <strong>New Layer</strong> and name it "mask." Select the <strong>Brush Tool (B)</strong> and use a <strong>Soft</strong> <strong>Round Brush</strong> with <strong>0% Hardness</strong> to fill your subject with black.</p><figure class="post_image"><img alt="Mask the Tiger with Black" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/splatter2a.jpg"></figure><p>When you're ready, select the mask layer then hit the <strong>Play </strong>button on the <strong>Actions</strong> palette. Here is the initial result after you play the action.<br></p><figure class="post_image"><img alt="Paint Splatter Initial Background" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/splatter2b.jpg"></figure><h3>Step 3</h3><p>To adjust this background even further, <strong>Hide</strong> the <strong>Group</strong> for <strong>CC Option 1</strong>, and <strong>Unhide</strong> the <strong>Group</strong> for <strong>CC Option 2</strong> instead.<br></p><figure class="post_image"><img alt="Change the Group Visibility" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/splatter3a.jpg"></figure><p>Now we have a color scheme that suits this photo better. Scroll down to the bottom of the action list to find the layers for the background elements.<strong> Unhide the Visibility </strong>of the background splash layers as well as the contour fill layers in order to achieve a more dynamic result.<br></p><figure class="post_image"><img alt="Result with Background Splashes" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/splatter3b.jpg"></figure><p>Finish with a <strong>New Photo Filter Adjustment Layer. </strong>Set the filter to<strong> Cooling Filter (80) </strong>and raise the <strong>Density </strong>to <strong>91%.</strong> <strong></strong>Change the <strong>Layer Blend Mode</strong> to <strong>Soft Light</strong> and you're done! <br></p><figure class="post_image"><img alt="Add a Cooling Photo Filter" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/splatter3c.jpg"></figure><p>Here is the final paint splatter background.<br></p><figure class="post_image"><img alt="Final Paint Splatter Background" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28519/image/splatterfinal.jpg"></figure><h2>Conclusion<br>
</h2><p>Let Photoshop actions do all the heavy lifting for your designs. You'll be impressed with the incredible diversity in the effects you can achieve, all while saving countless work hours.<br></p><p>I hope you enjoyed this tutorial, feel free to leave any questions in the comments below. And for more tutorials on photo effects, check out the following links:<br></p><ul class="roundup-block__contents posts--half-width roundup-block--list">
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://photography.tutsplus.com/articles/how-to-apply-a-halftone-effect-to-your-photos--cms-28401"><img class="roundup-block__preview-image" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28401/preview_image/halftone_pre.jpg"><div class="roundup-block__primary-category topic-photography">Adobe Photoshop</div>
<div class="roundup-block__content-title">How to Apply a Halftone Effect to Your Images With a Photoshop Action</div>
<div class="roundup-block__author">Melody Nieves</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://photography.tutsplus.com/articles/adobe-photoshop-in-60-seconds-create-an-easy-watercolor-effect--cms-28252"><img class="roundup-block__preview-image" data-src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28252/preview_image/watercolor_pre.jpg"><div class="roundup-block__primary-category topic-photography">Photo Effects</div>
<div class="roundup-block__content-title">Adobe Photoshop in 60 Seconds: Create an Easy Watercolor Effect With Actions</div>
<div class="roundup-block__author">Melody Nieves</div></a></li>
</ul>2017-03-27T22:58:39.968Z2017-03-27T22:58:39.968ZMelody Nieves