- Pokémon Essentials Version
- Non-applicable
10 April 2017 Update! Check the Updates tab above for five backgrounds using this method!
What's this?
Ever gazed upon the Battlebacks folder in your Pokémon Essentials folder and sighed "How I wish I could make my own!"? Then this is your lucky day! Using Photoshop we're going to create our own from scratch!
This is not meant to be your very first Photoshop/GIMP experience, but if you have any questions I will try to tend to them in the Resource's discussion thread. You're also welcome to post your own backgrounds there! I'd love to check them out!
:blush:
Important Information:
Backgrounds and music (Pokémon Essentials Wikia)
For the basics on how to implement and thus use our brand new battle backgrounds.
GIMP download
A free alternative to Adobe Photoshop.
Diamond and Pearl Battle Backgrounds (Spriters Resource)
Use those as reference if you wish!
Step 1:
Create a 256px wide and 144px tall canvas.
Fill it with a solid colour using the Paint Bucket tool, or leave it white (but not transparent). For the purpose of this tutorial, I'll be making a blue-ish background, to be used on "Water" battles.
Example 1:
Simple as that!
Step 2:
Have fun, paint the canvas with a brush using many colours. I personally set my brush to 25% Flow and size 17, and often use the Eyedropper tool to pick a colour between the two I've mixed to blend them better. I recommend focusing on painting horizontally versus vertically to mimic the official sources.
Example 2:
After a short while of randomly painting different shades of blue, I got this result:
Step 3:
The filtering begins!
This isn't exactly science - you do what you think gets the best result, whether you want smoother backgrounds, or whether you want them to be more "noisy" and overall have less colours. Let us begin anyway!
The first thing we are going to do is apply a Motion Blur. In Photoshop, this is under the Filter -> Blur -> Motion Blur drop-down menus.
I prefer to set the "Distance" parameter to something between 120 and 200. Up to you, and the way you've been painting your background. Make sure the angle is set to 0º.
Example 3:
Looking good!
After this, you might want to call it a day and see how it looks ingame, but I recommend another one or two steps to make it have a more limited colour count, making it look closer to the official battle backgrounds, so it will blend better with the pixel art, too!
Step 4:
Filtering session two!
This time, we are applying a Posterize "filter". This option can be found under Image -> Adjustments -> Posterize.
I prefer to set the "Levels" parameter to something from 30 to 60, but I end up choosing a value close to 45 each time.
Example 4:
You can't notice without zooming in, but there are less colours already. The next step might feel redundant, but it gives us the ultimate control over the colour count.
Step 5:
We're going to index the image. Most of the graphics in Pokémon Essentials have an indexed colour palette, making them take up less space in your computer's memory, among other things. By indexing our picture we can save some space as well as limit the colour count a little further, in case you want to correct/improve on your step 4.
To index your image, select Image -> Mode -> Indexed Color. You might be asked to merge your layers if there's more than one. Accept. When choosing Palette, choose "Local (Perceptual)". Now you can choose how many different colours to use. Depending on the composition, anything from 40 to 70 will be perfect.
Example 5:
That's all! Make sure to double the size of the image before saving it, too.
Here are some more backgrounds. free to use provided you credit myself.
What's this?
Ever gazed upon the Battlebacks folder in your Pokémon Essentials folder and sighed "How I wish I could make my own!"? Then this is your lucky day! Using Photoshop we're going to create our own from scratch!
This is not meant to be your very first Photoshop/GIMP experience, but if you have any questions I will try to tend to them in the Resource's discussion thread. You're also welcome to post your own backgrounds there! I'd love to check them out!
:blush:
Important Information:
Backgrounds and music (Pokémon Essentials Wikia)
For the basics on how to implement and thus use our brand new battle backgrounds.
GIMP download
A free alternative to Adobe Photoshop.
Diamond and Pearl Battle Backgrounds (Spriters Resource)
Use those as reference if you wish!
Step 1:
Create a 256px wide and 144px tall canvas.
Fill it with a solid colour using the Paint Bucket tool, or leave it white (but not transparent). For the purpose of this tutorial, I'll be making a blue-ish background, to be used on "Water" battles.
Example 1:
Simple as that!
Step 2:
Have fun, paint the canvas with a brush using many colours. I personally set my brush to 25% Flow and size 17, and often use the Eyedropper tool to pick a colour between the two I've mixed to blend them better. I recommend focusing on painting horizontally versus vertically to mimic the official sources.
Example 2:
After a short while of randomly painting different shades of blue, I got this result:
Step 3:
The filtering begins!
This isn't exactly science - you do what you think gets the best result, whether you want smoother backgrounds, or whether you want them to be more "noisy" and overall have less colours. Let us begin anyway!
The first thing we are going to do is apply a Motion Blur. In Photoshop, this is under the Filter -> Blur -> Motion Blur drop-down menus.
I prefer to set the "Distance" parameter to something between 120 and 200. Up to you, and the way you've been painting your background. Make sure the angle is set to 0º.
Example 3:
Looking good!
After this, you might want to call it a day and see how it looks ingame, but I recommend another one or two steps to make it have a more limited colour count, making it look closer to the official battle backgrounds, so it will blend better with the pixel art, too!
Step 4:
Filtering session two!
This time, we are applying a Posterize "filter". This option can be found under Image -> Adjustments -> Posterize.
I prefer to set the "Levels" parameter to something from 30 to 60, but I end up choosing a value close to 45 each time.
Example 4:
You can't notice without zooming in, but there are less colours already. The next step might feel redundant, but it gives us the ultimate control over the colour count.
Step 5:
We're going to index the image. Most of the graphics in Pokémon Essentials have an indexed colour palette, making them take up less space in your computer's memory, among other things. By indexing our picture we can save some space as well as limit the colour count a little further, in case you want to correct/improve on your step 4.
To index your image, select Image -> Mode -> Indexed Color. You might be asked to merge your layers if there's more than one. Accept. When choosing Palette, choose "Local (Perceptual)". Now you can choose how many different colours to use. Depending on the composition, anything from 40 to 70 will be perfect.
Example 5:
That's all! Make sure to double the size of the image before saving it, too.
Here are some more backgrounds. free to use provided you credit myself.
- Credits
Credit for this tutorial is not needed, but always appreciated.
Credits required when using the sample backgrounds:
Mr. Gela
Please do not redistribute this anywhere resource anywhere else. If you wish to share this, link to this site.
Special Thanks:
Midnitez-REMIX
No requiero atribución por este tutorial, ¡pero siempre es bienvenido!
Créditos requreidos por utilizar los gráficos de ejemplo:
Mr. Gela
Por favor no redistribuyas este recurso en ningún otro lugar. Si quieres compartir esto, utiliza un enlace a este sitio.
Agradecimientos Especiales:
Midnitez-REMIX
