Author: Mdp4life

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.

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.

In this tutorial, I’ll be showing you how to create three dramatically different backgrounds from photos using resources from Envato Elements. These resources are a combination of Photoshop Actions and Photoshop Brushes that, when combined, save you countless hours you would otherwise use to create these backgrounds from scratch. So let’s get started!

What You’ll Need

Here are the following assets you’ll need for this tutorial:

• Charcoal Action
• Artist Action
• Paint Splatter Action
• Handcrafted Watercolor Brushes
• Eiffel Tower
• Woman Portrait
• Tiger Stock

1. How to Create a Charcoal-Inspired Background

Step 1

First up is the charcoal background. I’ll be using this amazing Charcoal Photoshop Action to help achieve the final result. Start by opening this Eiffel Tower reference into Photoshop, making sure that you select the 1920×999 pixels size.

Step 2

Now let’s set up the action. Go to Window > Actions and load your charcoal action into the Actions palette.

Because there’s a brush set included with this action, you’ll need to load it as well. So hit B on your keyboard to bring up the Brush Tool. Select Replace Brushes from the drop down menu then select the .abr file to replace your current brushes with the new charcoal ones. 

Here is a look at the charcoal brushes you should now have in the Preset Manager.

Step 3

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.

Now create a New Layer and name it “brush.” With the Brush Tool (B) 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.

When you’re ready, select Style 1 under the Charcoal Action, then hit the Play button on the Actions palette.

Step 4

Here is the initial result after you play the action.

Since it looks quite messy, let’s tweak some of the Adjustment Layers found within the new Group created by the action.

First Hide the Visibility of the Sketch Lines 2 Group. Then select all three photo layers and set their Layer Blend Modes to Pin Light and their Opacity to 100%. Follow up by select the Contrast layer and changing the Opacity to 100%. This will allow your subject to show through the smudges more.

To add more texture to the background, create a New Layer above the second photo layer. Select the Brush Tool (B) and use one of the charcoal brushes from the set to paint a large smudge of gray on the layer. Right-click to go to Blending Options and apply a Gradient Overlay with the following settings:

Step 5

For a tint of color, add a New Adjustment Layer for Color Lookup at the top of your layers. Go to Layer > New Adjustment Layer > Color Lookup. Then set the 3DLUT File to FoggyNight.

Here is the final charcoal background below. See how simple that was?

2. How to Create a Watercolor-Inspired Background

Step 1

Next up, we’ll create a lovely watercolor background from a photo. This time, I’ll be using this Artist Photoshop Action and this set of Handcrafted Watercolor Brushes to make the process much easier.

Open your photo into Photoshop. Here I’ll be using this Woman Portrait at 1920×1079 pixels.

Step 2

Now go to Window > Action and load the artist action into the Actions palette.

Just like before, we’ll need to also load all of the brushes attached to this action. So select the Brush Tool (B), Right-click to bring up your brushes, then select Replace Brushes from the drop down options. Choose the artist brush file located from the same folder as the action.

Here is the new set you should have.

Step 3

To run the action, create a New Layer and name it “brush.” Select the Brush Tool (B) at 100% Hardness, and use the brush to Fill in the areas with black where you’d like the effect to take place. Here I painted the woman and the bars behind her.

With the brush layer still selected, hit the Play button on the Actions palette to run your artist action. Here is the initial result.

Step 4

Even though we’re going for a watercolor effect, let’s clean up the result a bit. First, Hide the Visibility of the Watercolor Edge Splatter Group. Then go into the Watercolor and Watercolor Texture Groups and Hide some of the layers to allow the portrait to breathe. Feel free to experiment with this for the result you prefer.

Step 5

To create a better color palette, add a Gradient Map Adjustment Layer. Go to Layer > New Adjustment Layer > Gradient Map. Create a gradient that transitions from a deep red color #491802 to white.

Step 6

Finish this background with a little more texture. Load the Handcrafted Watercolor Brushes we mentioned earlier into the Brush Tool (B).

Create a New Layer and use the Brush Tool (B) to paint white watercolor splashes all around the canvas. I used brushes 1,15, and 17 for the right side, and brushes 15, 26, and 72 for the left side.

Here is the final watercolor background when you’re done.

3. How to Create a Paint Splatter-Inspired Background

Step 1

For this last background, we’ll be creating another traditional art effect using this Paint Splatter Action.

Here I’ll be using this Tiger Stock, downloaded at 1920×1280 pixels. Open this photo into Photoshop.

Step 2

Load your paint splatter action. Go to Window > Actions, and load the action from the drop down menu.

Just like the previous actions, you’ll need to load the brush set that comes along with it. So select the Brush Tool (B), then Right-click to bring up your brushes. Select Replace Brushes from the options and replace them with the paint splatter brushes found within the same folder.

Step 2

Now create a New Layer and name it “mask.” Select the Brush Tool (B) and use a Soft Round Brush with 0% Hardness to fill your subject with black.

When you’re ready, select the mask layer then hit the Play button on the Actions palette. Here is the initial result after you play the action.

Step 3

To adjust this background even further, Hide the Group for CC Option 1, and Unhide the Group for CC Option 2 instead.

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. Unhide the Visibility of the background splash layers as well as the contour fill layers in order to achieve a more dynamic result.

Finish with a New Photo Filter Adjustment Layer. Set the filter to Cooling Filter (80) and raise the Density to 91%. Change the Layer Blend Mode to Soft Light and you’re done!

Here is the final paint splatter background.

Conclusion

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.

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:

• 

  How to Apply a Halftone Effect to Your Images With a Photoshop Action

  

  Melody Nieves

  17 Mar 2017

• 

  Adobe Photoshop in 60 Seconds: Create an Easy Watercolor Effect With Actions

  

  Melody Nieves

When you get stuck in a video game, you might head to GameFAQs to find a walkthrough to help you get through it. When you get stuck making your first video game, what can you do? That’s where this article comes in: think of this as a walkthrough for developing your first game.

My First Game

Before we get to the video game development walkthrough, I want to tell you about my first game. It was a simple text based adventure inspired by a MUD called Divine Blood:

I first programmed it as just a simple room using the TI-83+ Calculator, and later made into a full-fledged town using Java in my last year of high school. I never finished that game (it didn’t go beyond the first town) and I don’t even think I have the code any more.

Unfortunately, my experience isn’t uncommon for game developers. Many developers start a game but never finish it. So how can you increase your chances of finishing your first game? Enter this video game development walkthrough.

The Four Levels of Game Development

If developing a game is a game in itself, then it consists of four levels: Plan, Prototype, Develop, and Release.

Just like in a video game, each level is more difficult than the last. Each level also has its own encounters (the problems and difficulties you are likely to come up against) and its own end level boss (which signifies when you are ready to move on to the next level).

This walkthrough will guide you through the process of successfully creating your first game. It will incorporate resources and quotes from other game professionals, as well as insights about how implementing the walkthrough for my own first game would have helped me to finish it.

Level 1: Plan

Remember, the first 90% of your game takes 90% of the time; the last 10% takes the remaining 90% of the time. Plan accordingly.
— Ian Schreiber

The first level, and arguably the most important level, is planning — planning out every aspect of the game before you even begin coding. The goal of this level is to consider everything about your game up front so that you don’t have to improvise later.

When you first start making your game, the best thing to do is write down all the details. Think about everything you want in your game, and then write it down. Usually this is pretty easy at first, as your mind races with lots of neat ideas that you will want to incorporate into your game. However, as time goes by, this level becomes increasingly harder to complete.

As you jot down your ideas, also jot down the details of these ideas: how they will work, how they will affect the player experience, and how they will affect the gameplay. You don’t want to leave any big holes in your design that will cause you to struggle later. It becomes more difficult to finish a game as the problems you encounter increases. Thus, the secret to finishing a game is to deal with problems in small amounts and without letting them pile up all at once. 

Take a look at these tutorials for more advice on planning a gamedev project:

• 

  The Dynamic Priority List: How I Manage My Gamedev Projects

  

  Ian Richard

  08 Dec 2014

• 

  How (And Why) to Write a Great Game Design Document

  

  Alex Sayenko

  24 Apr 2015

Game development is about the trade-offs — great games don’t have to do everything, they just have to a limited number of things well.
— Patrick Wyatt

Because of this, it is extremely important that you do not skip this level and head straight into development (Level 3). If you did, you would encounter hard problems that would cause you to quickly become demotivated and stop. If you’ve played the Halo series, just think about how hard the game would have been if you encountered a Hunter pair during the first level of your first playthrough. You would have been hard pressed to continue playing if you kept dying over and over again to these massive obstacles.

This is why the main encounter for this level is a desire to stop planning and begin coding. Again, it is important that you plan out as much as you can before you begin coding. For you to have the greatest chance of finishing your first game, you must resist this urge and stick to Level 1.

The boss fight for this level is questions. If you review all your notes and you can’t think of any more questions, then you are ready to move on to the next level. If, however, you read over your notes and you still have a couple of questions about how things will work, you should probably work those out before moving on.

There are times when you can’t answer a question because it deals more with balancing issues rather than functional issues. In this case you are also probably ready to move on to the next level.

If I had planned out my text based adventure game properly, I would have mapped out the entire game, decided what all the items the player could purchase would be and where they could purchase them from, designed all the monsters and dungeons, and even figured out which loot would be dropped where and when. That’s a lot of detail that should be planned out before coding! For this reason, I don’t recommend making a text adventure game as your first game. Start small.

Related Posts

• The CAKE Design Process
• Game Design Concepts

Level 2: Prototype

Design is a process, not an outcome.
— Christopher Simmons

The second level of game development is prototyping. In this level, you test out the core mechanics and features of the game to work out any balancing issues. You want to flesh out your ideas quickly by using low fidelity prototyping so that you can know before you start coding what will and will not work.

If a game is fun to play at this level, you know it will be fun to play when it is finished. Remember that you will be playing this game a lot as you code it, so you’d better make sure it’s fun!

No matter what your score is, you’ll enjoy it, and want to play it again.
— Stan Jarocki

Even though this is Level 2, it is very common to prototype ideas as you are writing them down in the planning level. Now you are probably thinking: “hold on – you just told me that I shouldn’t skip levels, but here you are telling me that I can skip to this level!”

Think of it like level skipping using the secret warp pipes in Super Mario Bros. The first time you play the game, you’re probably going to play each level in order. It isn’t until the second or third playthroughs that you use the warp pipes to finish the game faster. The same thing applies with Levels 1 and 2, except that going back and forth between planning and prototyping helps you flesh out your ideas faster.

Levels 1 and 2 are interchangeable, as long as you don’t progress to Level 3 before you are ready. Maybe you want to test out your core mechanic before you spend more time on details. Perhaps you want to test out a new feature of your game to ensure that it will work as intended. These are all good reasons to want to prototype while you plan; just ensure that each prototype only focuses on one thing at a time, and that each time you prototype the gameplay it’s still fun.

Great gameplay is a stream of interesting decisions the player must resolve.
— Bruce Shelley

There are two encounters that you will most likely face in this level. The first is again the desire to just skip to the next level and start coding. The second encounter will be a desire to create higher fidelity prototypes. As good as high fidelity prototypes are, they are a dangerous path as they will increase your desire to start coding when you are not ready. To fight this battle, stick to quick rapid throwaway prototypes.

You can build prototypes without any code at all if you use a beginner-friendly gamedev tool like GameSalad or Construct 2. Here are a few tutorials to help you get started with those:

• 

  Danger Droids: Create a Platformer in GameSalad, Step by Step

  

  Jamie Cross

  07 Nov 2013

• 

  Design and Build a First-Person Shooter Game With FPS Creator

  

  Kent Wheeless

  21 Jul 2013

• 

  Create a Bomberman-Inspired Game in Construct 2: The Player and the Level

  

  Kyatric

  06 Jun 2013

• 

  Build a Canabalt-Style Infinite Runner From Scratch

  

  Matt Luard

  31 Jul 2012

• 

  Angry Snowman: Build an “Angry Birds” Game From Scratch – Setup and Shooting

  

  Jamie Cross

The boss for this level is completeness. When you practically have the entire game planned out and fleshed out using prototypes, you are ready to move on to the next level. You want to have a good idea of how the game will play out from start to finish so that you are not dealing with these problems while coding. Again, the less problems you have while coding, the more likely you are to finish your game.

Prototyping my first game would have involved balancing the game. This includes the combat system, how much items should be worth and how much bonus they should give the player, all the stats for both the player and the monsters, and even details such as story and quests. Again, there are a lot of details that go into making an RPG that need to be worked out before coding.

Related Posts

• Tips for a One Man Gamedev Team: What to Do Before Even Touching a Computer
• Game Balance Concepts
• Game Design Workshops

Level 3: Develop

Before you start the programming part, cut 90% of your intended features.
— Ian Schreiber

The third level, developing, is the most difficult level to complete. It is here that many developers lose their motivation and their desire to keep going. But fear not! With the first two levels successfully completed, you should be well on your way to finishing your game.

To begin this level, you will want to figure out what platform you want to release your game on. Will you release it for the Xbox, as a mobile app, or as a web game? After you have chosen your platform, choose a development engine or programming language that will work for this platform.

This can also be done in the reverse order, if you are comfortable with a development engine or programming language. Your platform will then be determined by the capabilities of your chosen engine or language.

To help finish this level, look for “power-ups” like free code libraries, free game assets, and free online resources. Don’t try to reinvent the wheel; instead, use what is freely available to help you finish this difficult level.

‘I can’t draw’ — use clipart. ‘I can’t make sound’ — Google MIDI files. ‘I can’t code well’ — no-one cares, you don’t need to.
— Rob

The main encounter for this level will be problems and discouragement. There will be times where you encounter a problem to which you don’t know how to solve. You will also become discouraged the more you work on your game as it doesn’t live up to your high expectations.

To fight this encounter, you must press on! If you have to, take a few days off from your game when you get stuck. This will allow your mind to clear and fresh new ideas to enter. Usually just sleeping on the problem helps you to find a solution the next morning. Don’t work yourself to death; pace yourself so that you don’t become too stressed or discouraged.

If you are trying to solve a really hard problem, stop. Solve a simpler problem that accomplishes the same things.
— Daniel Cook

The boss for this level is a game. The game doesn’t have to be perfect or even fully finished, but it should be something that you could release and would want people to play. Once you have that done, you are nearly finished with your game.

If I had planned and prototyped before I started coding, I could easily have done more than just a single town. I would have know exactly what to code and how to code it beforehand, making it really easy to get more things completed quicker. I wouldn’t have struggled as I tried to figure out the layout to my town, deciding where to put the shops and quests, and so on. As it was, I tried to do all of this while simultaneously trying to learn how to code and make a game. Work within your limits. 

Christer Kaitila has some great advice on building games quickly, thanks to his experience building one game a month:

• 

  #1GAM: How to Succeed at Making One Game a Month

  

  Christer Kaitila

  24 Jan 2013

Level 4: Release

Never give up.
— Alice Taylor

The final level of game development is release. This level is not nearly as hard as Level 3, but it is still challenging. For this level you need to get people to play your game and to give you feedback. Based on this feedback (taken with a grain of salt), make changes that you feel will make the game more fun.

• 

  5 Important Ways to Add Polish to Your Game

  

  Paul Suddaby

  07 May 2013

• 

  Bringing Your Game to Life in 10 Simple Steps

  

  Sonny Bone

  17 Mar 2015

The main encounter for this level is dealing with criticism. There will be people that just don’t like your game. This is fine. Don’t let those people tear you down just because they feel the need to voice their opinion. What you will need to do is learn to focus on the people that do like your game and encourage them to keep playing, asking for their help to make it better.

The point of making games isn’t to see who is better at making games, it’s to make what you want to make.
— Rob

The final boss for game development is a game that you are proud of. It doesn’t have to be any good (and, honestly, as it’s your first game it probably won’t be), but you made it! You made a complete game from start to finish, which is not something a lot of people can say.

Every game developer will have a ‘bad’ game. If not yet, at some point. All of us. Things happen.
— Brenda Romero

I may not have finished my first attempted game, but I am still proud of it to this day. It taught me a lot about game development and I was doing what I loved. Remember, success is paved by a road of failures. Don’t give up!

Related Posts

• What They Don’t Tell You About Being a Game Developer
• Finishing a Game

Conclusion

Making your first game is an exciting and fulfilling experience. And yet, it is very common for game developers to not make it through their first game, abandoning it for another game they also may never finish.

By following these four levels of game development, you help increase your chances of finishing your first game by knowing what the road ahead looks like and knowing how to deal with them. Now go out there and make your game!

Related Posts

• The rest of our Making Your First Game learning guide
• From Zero to Pitch: A Walkthrough for Game Designers

References

• Preview image: TI-83 by Brothers Le