Making Large Background ImagesMany 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 1Go 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 2Press 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 3Capture 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 4Open 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 5Paste the image into the new document by pressing Ctrl + V or by clicking Edit - Paste.
Step 6There 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.
Step 8At 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 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 9I 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.
Step 10Paste 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.
Wheeee now I'm over here!'' - BG image
Step 11We 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.
Step 12Press 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.
Step 13Now, 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!