Making Large Background Images

Many people have asked me how to make a large, high-quality background image of any Neopian background as I do in several of my pet and use lookup styles. Here's how!

Things to note before/after doing this tutorial:
  • I wrote this as simply as I could and took as many screenshots as I could in order to help those who needed a little more than a mini tutorial, but it may still be a little confusing for anyone who has little to no image-editing experience. I recommend you feel at least a little bit comfortable with image editing software terms (like crop, paste, etc).
  • The bigger your monitor, the larger the background image you can create. I have a large-ish (27") computer monitor so am able to create very large background images. If you complete this tutorial using a small monitor, your background will possibly be cut off for anyone using a larger sized screen than you.

Step 1

Go to Background Bonanza. Sarika kindly archives and links to every neopian background source .swf that exists - it's wonderful! Choose the one you would like to work with and click on it to bring up the source image.


This is what I see after I clicked on the background I want to enlarge.

Step 2

Press F11 in your browser. This will make your browser go full screen and display the image as large as possible. (Sometimes this doesn't work in my browser and I need to click into the address bar to "activate" the window before pressing F11).


This is what I see after I press F11.

Step 3

Capture the image by pressing Print Screen on your keyboard. I can't really show you what this looks like because it is different on all keyboards. Sometimes this is a stand alone button and on some keyboards you may need to press Ctrl + Print Screen or FN - Print Screen.

Once you've pressed Print Screen, you have essentially just captured an image of your entire screen and it is now "copied". Now we need to paste it somewhere!

Step 4

Open your image editing software. I use Adobe Photoshop CS4 so that is what the screenshots in this tutorial will be of. (The commands and terms, however, are fairly universal, so with a little poking around you should be able to do identical things in your own software.)

We need to paste the image into a new file. Most image editing software will automatically detect the size of an image copied to your clipboard and auto-complete the settings when you select File - New. If yours does not, simply create a new document with the size of the resulution of your computer's screen (ie: 1024x768, 1280x960, 1920x1080, etc).


Remember: the width and height of the new document need to be the size of YOUR monitor's resolution, so it will not necessarily be the same dimensions as mine. Don't worry about the resolution - I generally leave it at 72 for Neopian graphics as to not destroy bandwith/loading times.


Click "OK" and voila! Our new document all ready to be pasted into.

Step 5

Paste the image into the new document by pressing Ctrl + V or by clicking Edit - Paste.


Bam!

Step 6

There are arguably a few different ways to proceed from this point. The method I am about to show you is not actually how I do this, but it is (I believe) the easiest way to show/explain it.

What we need to do now is crop the image to just the background since we don't need all the white space.

The crop icon will generally looks like this or something similar: .

Click it to activate, and then click and drag a box around just the background boundaries. Make sure to crop out any border lines or "sticky-out" items as many NC Backgrounds tend to have.


This is what I have selected in my crop. I have cropped out the dark vertical border lines as well as some odd parts of the drawing that went outside the borders.

Now press Enter or double click the square you drew to crop the image. Some image editing software may require you to right click on the square you drew to get an option to crop.

Step 8

At this point, we have a nice, high-resolution image of a Neopian background. Great! It is not, however, large enough to fill up the entire background of a layout since we have cropped it from our maximum screen resolution size to about half of it.


Too small :(

To fix this problem, many people's first reaction is to force-stretch the current image. While this would indeed make the image large enough, it would make it distorted and icky. What we will do takes a little time to figure out, but once you get the hang of it you can do this in no time flat :)

To start, press Ctrl - A to select the entire image. Then press Ctrl - C to copy it.


Pressing Ctrl + A should make the "marching ants" (dotted lines) go around your square to indicate the entirety is selected. Then press Ctrl + C to copy the entire square.

Step 9

I hope you remember your monitor size from Step 4! Because we need it again. Create another new document by clicking File - New.


Remember: the width and height of the new document need to be the size of YOUR monitor's resolution, so it will not necessarily be the same dimensions as mine.

Click okay to create the new file.

Step 10

Paste the image we copied into the new document by pressing Ctrl + V or clicking Edit - Paste.


If you are using Photoshop, your copied image should paste itself into a new layer automatically (see my purple circle in the above screenshot). If you are not using photo shop and it does not automatically paste in a new layer, create a new layer before pasting.

Select the move tool (should look something like this: no matter what software you are using) and click and drag your cropped background image all the way to the left so that it is aligned flush with the left side.


Wheeee now I'm over here!'' - BG image

Step 11

We need to paste the same square one more time into our document, on another new layer. Press Ctrl + V or click Edit - Paste again to paste the square a second time.

Don't forget - if your image editing software does not automatically paste into a new layer, create one first before pasting.

Select the move tool again () and click and drag your new layer over to the right so that it touches the edge of our first layer and fills in all the rest of the white space it's okay if it gets cut off a bit.


Well this looks... interesting.

Don't worry we aren't done.

Step 12

Press Ctrl + T to bring up a box around our new 2nd layer (it will look just like the crop box we drew earlier). Right click inside the box and select Flip Horizontal.


Almost. There.

This will flip our second layer, creating a mirror effect and a somewhat seamless transition.


Yay!

Step 13

Now, to save! Press Ctrl + S or click File - Save As. I like to save images as a .png, as that will retain the highest quality. If you are using a free image host or have limited bandwidth space, however, you may prefer a .jpg. If you save it at the maximum quality (which is 12 in Photoshop), it generally loses very little quality.

Uploading: if you have your own webspace to host your completed image on, great! You can upload as large a file/image size as you like. If you need to use a free image host, however, several of them limit the physical dimesions of the images you upload. Take care to find a free image host that allows you to select an option of "do not resize" or you are in for a world of frustration!





Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions