HOW TO: Create your own overlays and backgrounds

Hi! Hope this thread is helpful, I’ve used Pixlr to edit for about 7 years, I used to make edits and custom poses for another game I used to play. So I can answer any questions you may have.

This is going to be a very simple explanation of how to make your own overlays and backgrounds. This is meant for non-editors. However, I can do a more a detailed process of how I make other things for editors if that’s something people would want.

Places to find already made overlays:
Go to pixabay and type in what you need, look under ‘vector graphics’, this is where the PNG images will be.

To find backgrounds:
For this I would recommend searching ‘3D render’ or ‘3D model’ into Pixabay or pexels, these rooms look more cartoon like? but not as unrealistic as episode, they look great and not out of place in stories.

How to make overlays

OVERLAYS FROM BACKGROUNDS OPTION 1:
Step 1: Open the editor Pixlr (https://pixlr.com/)

Step 2: - Go to Pixlr E and press ‘create new’
- Set the dimensions to the correct episode background that you are using
(1 zone: 640x1136) (2 zone: 1280x1136) (3 zone: 1920x1136)
- Press create

Step 3: - Go to the episode Art Catalog and find the image you want the overlay from, either one you have uploaded or an episode background.

  • Click on the image, then right click, and copy the image.
  • Go back to pixlr, and paste the image into your created page.

Step 4: Use the eraser tool from the task bar (shown in picture) to roughly erase around the thing you want as an overlay.

Step 5: Change the size and shape of the erased using the brush, in the top left corner.

  • Make sure to select a square brush for tables for example, so they are as straight as possible.
  • Change the softness to 2, because its an overlay you dont want it to look fuzzy.
    1

Step 6: Zoom in on the overlay, using the ‘navigate’ box on the right hand size, a red box will show where you are zoomed, this box can be dragged to the correct place.
2

Step 7: Cut out the remaining overlay, using the different shaped brushes.
If you mess up, press Ctrl Z, and it with undo the last action.

Save the overlay by pressing file and save, this will automatically make sure your overlay is the correct size and position when you place it into the script.

OVERLAYS FROM BACKGROUNDS OPTION 2:
Step 1: Open the editor Pixlr (https://pixlr.com/)

Step 2: - Go to Pixlr E and press ‘create new’
- Set the dimensions to the correct episode background that you are using
(1 zone: 640x1136) (2 zone: 1280x1136) (3 zone: 1920x1136)
- Press create

Step 3: - Go to the episode Art Catalog and find the image you want the overlay from, either one you have uploaded or an episode background.

  • Click on the image, then right click, and copy the image.
  • Go back to pixlr, and paste the image into your created page.

Step 4: Use the magic erased tool. This tool works by clicking on the part of the image you want to remove, the tool will highlight this area, and then you press backspace.
Sometimes if the colours are similar it will take away too much, in which case decrease the tolerance at the top left of the screen.
Note, the mode of this tool can be left alone, i never change it.

Step 5: Use the eraser tool, explained in option 1, to remove any leftover pixels that should not be there.

Step 6: Press file and save, and make sure it is saved as PNG.

NOTE: The magic eraser has a tendency to leave a coloured outline around the overlay, I would always recommend using the first option for this reason, I think it always comes out looking better.

OVERLAYS FROM OTHER SOURCES:
If you have a picture from a copyright free website, but it has a background this is the tutorial for you.

Step 1: Open remove.bg
Step 2: Upload the photo and it will do everything for you lol

How to re-size backgrounds

HOW TO RE-SIZE BACKGROUNDS:

Step 1: Open Pixlr (https://pixlr.com/)

Step 2: Click Pixlr E and press ‘create new’

  • Set the dimensions to the correct episode background size
    (1 zone 640x1136) (2 zone 1280x1136) (3 zone: 1920x1136)

Step 3: Click layer, in the bar at the top, and then press ‘add image as layer’ and select your background that is the wrong size.

Step 4: Drag the image to fit the correct size, and click, file and save.

How to make your own backgrounds

HOW TO MAKE YOUR OWN BACKGROUND:

There are lots of ways to do this, but for editors who are new or those who are not familiar with difital art this is the best way to go about it. This involves using already made overlays and backgrounds, to create your own background.

I’m going to use this sky background as a simple example

Step 1: Open Pixlr (https://pixlr.com/)

Step 2: Click Pixlr E and press ‘create new’

  • Set the dimensions to the correct episode background size
    (1 zone 640x1136) (2 zone 1280x1136) (3 zone: 1920x1136)

Step 3: Go to the episode art catalogue, or pixabay, and download the overlays or images that will fit.
I downloaded a sky without a moon, and one with a moon, to edit them together into the perfect background.

Step 4: Go to Layer, in the top bar, click open image as layer, and add your images.
Scale your background to fit the background size.
Then scale the overlays to the place you want the.
If these need to be cut out into PNG overlays, look at the how to make overlays section above.

You can click on each layer in the layer box, on the right hand side.


Make sure you are always clicked on a layer, or some tools will not work.

Step 5: Add shadows to objects in the background, to make them less flat.
To do this, go to ‘Filter’ at the top, and press drop shadow. Here you can change the opacity, blur, and direction of the shadow. Note the box with these controls can be moved around, incase its covering the thing you are adding the shadow to.

Step 6: Click ‘file’ and then ‘save’ to save the background.

Additional tools to use

ADDITIONAL TOOLS:

  • If you accidentally erase something, you can use the pen tool to quickly draw it back in.

Select the colour you want by clicking the circle under the task bar, if you hover your mouse over the image you’re editing, you can select a certain colour.

  • Blur tool
    This tool is very easy, click it, and change the brush and size. Do this using the brush in the top left corner, when you click it, it brings up brushes, circular, square and different shaped.
    Then click on whatever you want to blur.

Colour change tool:

This tool is great if you have the perfect background or overlay, but its the wrong colour.
Click the tool, and the layer you want to change.

Select the new colour you want using the circles in the bottom of the tools bar.

Leave the mode alone. Change the tolerance to a lower one, if you want to change one colour in the background, or move it up if you want to change the whole thing.

If things look too saturated, lower the opacity, and add the new colour in layers.

If you have any questions about any of this please feel free to ask me :))

25 Likes

I love you :sob:

1 Like

hahaha you’re welcome x

1 Like

bump

Bump!

bump!

1 Like

bump

Bump!

1 Like

does anyone know where to find some backgrounds.

theres a section in this thread about that :slight_smile:

could i use the sky and moon background you made?

1 Like

SO HELPFUL. Bookmarked at first sight :heart: :100:

1 Like

yes! pls credit me using @willow.writesss

will do! tysm

1 Like

How would I do that? Honestly, it would be a pleasure!
Like, when using that background/overlay I made using your tutorial as a reference?

do you mean how to credit me?

Yeah, sorry, I wasn’t clear enough :melting_face:

1 Like

you dont have to credit me for using this thread but if you want to you can just add bg by or bg help by @willow.writesss to the end of the chapter with either my bg or the one u made from this thread :))

bump!

Thank you so much for this!! It’s really helpful!!

1 Like