Advanced Search
Keywords

How to Create the Robot Battle Scene from the Battle Bots Template

This entry was posted By Cubert on Saturday, January 30th, 2010 at 6:09 pm and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

There’s more to these battling bots than meets the eye! Today we’ll take some robot illustrations (source: bigstockphoto), and create a battle scene by adding in laser beams, glowing lights, and little sparks. This epic cybernetic battle was fought on our Battle Bots template as seen below:

You can download the Battle Bots Template with full PSD source files and sliced table free HTML pages for this template in BoxedArt’s members section, as well as thousands of other website templates and web design products. Get a membership here.

Step 1 – Set Up a Fresh Canvas for your Bots

Let’s start with creating a new canvas size that is 1000 pixels x 900 pixels and filling it in with a gradient using foreground color #112c63, and background #000000. Here is how it’s going to look:

Step 2 – Perfect Robot Placement

Now you can start placing the robots within the website template header. The best position is near the top, but low enough so that there is still space for the top navigation, and centered directly in the middle so that they remain the main focus of the design.

Step 3 – Making the Fire Fight!

We can now start drawing laser beams and other battle effects. Start by creating a new layer and use the Pen Tool (P) to draw the fighting lines you desire. Good placement on these bots would be the hands and antennas. You have some freedom with the types of lines you would like to draw, depending on the types of energy weapons you’ve chosen to arm your bots with.

Step 4 – Select Your Brush and Adjust the Settings

Next, select the Brush Tool (B), change the brush diameter to 6px, adjust the Capacity and Flow to 100%, and change the foreground color to white.

Step 5 – Enhancing the Energy Lines


Then select Brush in the Tools and click stimulate pressure to give a slight pressure to the beginning and the end of your path.

Here is how it looks:

Step 6 – Making the Energy Lines Glow

Now, let’s add some glow to it. Right click on your stroke layer and select Blending Options from the popup menu, and use the below settings:


Next, let’s add the inner glow to it:

This is how it looks now:

As a third glow effect, let’s add a light outer glow to the robots. Right click on the robots layer and select blending options, and use the settings below:

Step 7 – The Laser’s Final Effect

Now let’s the final effect to the laser beams; just duplicate the laser layer and drag it below the original layer, and choose soft light with the capacity of 30% shown as below:


For a smoother look, let’s add a glow to the background layer. Select the Dodge tool and use the settings below to create the glow:

Step 8 – Final Touch on the Background

Now, let’s add a final touch to the background using a special brush named Stars Designus, which can be downloaded from http://dezignus.com. Click on a new layer, and select the Brush tool (B), with the capacity and flow set to 100%. Then pick your desired brush effect and change the layer to “overlay” as shown below:


We are done with the tutorial, this is how it looks like with the content area added in, and you can just place your content in.

Here is the scene as it appeared in the final Battle Bots template design:

Thanks, and we hope you enjoyed this tutorial.

You can download the Battle Bots Template with full PSD source files and sliced table free HTML pages for this template in BoxedArt’s members section, as well as thousands of other website templates and web design products. Get a membership here.

('DiggThis') StumbleDelicious

Comments

[...] 93. How to Create the Robot Battle Scene from the Battle Bots Template [...]

[...] 93. How to Create the Robot Battle Scene from the Battle Bots Template [...]

Leave a Reply


  • Built2Go
  • ThemeStock
  • Stockedphotos
  • Bravenet
  • Bluehost