Foopets | Real Virtual Pets Online

Member Login

☆ • ☆ Need Help With Graphics? Graphics Guide By -Queso for Paint and Paint.Net! ☆ • ☆ (locked)

Medium
Useful 2,554

Welcome!

I am going to take out my time to write out a guide for Paint and the program I use for graphics. If you are going to use this guide to create your own graphics, please credit me. I’m not going to go around and monitor that every graphic made by following my guide has credit, but really, if I’m taking hours of my time to help you understand how to create graphics, please do me a favor and link me, credit me, do something. I’d appreciate it. (:

No matter what program you are able to use, you will need to know this: UNDO is your new best friend! If you insert something you didn’t mean to, don’t like the way something looks, or just need to get back to a certain point, UNDO. You can undo your action by going to Edit → Undo or just Ctrl + Z. Use this! However, Paint will only let you undo the last two or three actions, so if you do too many things, you will not be able to back track. Paint.Net allows you to undo as far back as the beginning of the image (unlimited times).

Paint

I really don’t recommend using Paint. There is a free upgrade that you can download that is a hundred times better. However, I understand that some cannot download programs etc., etc. Now, I don’t know much, if anything, about Macs. I don’t know if they have Paint or any sort of the problem. If you don’t have Paint, or can’t download the upgrade, I’m sorry ): I don’t know what else I can do for you.

Alright. First thing in Paint is you need to set your canvas size. Keep in mind that all profiles on Foo only have a width of about 540px. For this guide, we’re going to make a banner that would go across the profile top. So a good size would be about 540 by 100 pixels. To set your canvas size, go to Image → Attributes and put in the size.

Now, let’s say you want to create a welcome banner for your profile. Most graphics look nicer with an image. So lets’ use the FooPets’ logo. (Go to whatever image you would like, copy it, and paste it into your canvas.) If you would like the banner to match your image, use the color dropper to pick a color(s) you would like to use. Once you have your colors, select your image, copy it (right click → copy or Ctrl + C) and hit delete. You have your image, your colors, and now you may have to reset your canvas size. You’re ready to begin!

Now you’re ready to begin your banner! For Paint, I think banners such as these look best with rounded edges.


You have three options for rounded banners. You can have: 1.) A color border with white inside, 2.) A color border with a color inside, or 3.) No border and colored inside. For this guide, I picked the second option with my colors of light green and blue (if you wanted to do a blue border and a green background, right click and drag to create your box with switched colors). Now, you can change how thick the border is. With the default settings, my green border is very small and you can hardly notice it. Click this icon to change the thickness of the line:

I picked the second to thickest line. Here is what my banner looks like thus far:

Now, you can add your image! Check to make sure your banner has a white background, unless it has a background you are happy with. If your image is not good quality, this will not turn out well! This is another reason I don’t like Paint. But, anyhow, paste your picture onto your banner (Ctrl+V or Edit → Paste). Make sure your image will fit, otherwise your entire canvas will be resized! Now, if your banner has a white background, you need to make your image transparent so it goes nicely on there:

In this screenshot, you can see that I have the transparent option selected on the left (it’s the second yellow box at the bottom of the toolbar — one shows a transparent image, the other shows the white box). If I had the other option selected, my image would appear over my banner with a white background!

Now, you are ready to add text. Select the black “A” in the toolbar and select the area where you want your text to go. A toolbar should appear that will allow you to pick your font size and face. Keep in mind that the text will be the color you have selected at the bottom of your screen. For my text, I am going to use black text with a white shadow. So I will make my text white to start with:

Again, make sure that transparent box is checked! Otherwise you will have a white box around your text. This is so you can type right onto your banner (or any image, for that matter). Here is how my text looks with the white (keep in mind that the “Welcome to my” is one size of font. Then, I made a second text box of a larger font for the “Profile!” part):

Now, once you have your text how you want it, it’s time to make a second layer of text. I will use black. What you do is type over the text you have just created in another color. Move your box around using the corner resize squares to lay one color over another. Both layers of your text must be the same size and font for this to work! If you did it correctly, it should look something like this:

This will work with any color of shadow or text! Consider simpler colors though, so your graphic is more readable. When you’re happy with your shadow, you have a completed banner! You should now to go File → Save and save your image. Be careful when saving with Paint! Change your file type to “.JPEG” or “.PNG”, though I recommend .PNG as… that’s just how I do it ;P Congrats!

One Step Further

Another cool feature Paint has is the “eraser” tool. For my banner, my text colors were black and white. Here is how to fix up your font further:

Make sure your main text color is the primary color at the bottom and the effect color is the secondary. For my text, I want white on my black text. Now, select the size you want to be erased from your text. I picked the maximum. I then held down my right click and went back and forth over my black text. This effect will only show up where there is black text. So don’t worry about it doing anything to the rest of your banner, so long as it is not the same color of your text. What this effect does to my banner text looks like this:

Not bad for a free program, eh? Of course, if you don’t want your text to look like this, you can always leave it. And of course, you an always add a second color like so:

But most importantly, experiment! You will never be able to create the graphics you are imagining if you don’t think outside the box and explore around the program yourself! I hope this helped though, and you are able to create results you’re happy with. Message me if you are having any kind of issues or if you have questions (:

Paint.Net

Yay! Hopefully you’re here because you are able to use this program. I find it a wonderful way to make decent quality graphics. I hope you will enjoy it as well. This does require an off-site download, so keep that in mind! However, I have used this program for well over a year and have not once had a problem with it. It’s not some crazy program that will ruin your computer or anything. :]

To begin using this program, visit this site and download the program. You should have no issues getting it on your computer… if you do, I’m sorry D: Now, assuming you got that taken care of, let me familiarize you with the program:

Click here to see the full image. It’s too big to post (: ( you may want to hold down Ctrl when you click the link — it will open a new tab so you can continue reading this and reference the image at the same time by switching tabs.)

It seems overwhelming, but just reference back to that throughout this guide. Here is a quick guide to the “Tools” tab:

1: Select Use this when you are selecting a large area of your image. Unlike in Paint, you can start your selection in the grey area and select your entire image by dragging your click over your full image.
2: Lasso Use this when your selection is not a perfect geometric shape. Drag your mouse around the area you want to select.
3: Ellipse Use this when you are selecting a circle/oval area.
4: Magic Wand You won’t need this for any of my guides. You can mess with this on your own (:
5: Paint Bucket Use this to fill in parts of your graphic. A handy thing that I love about Paint.Net is when you select the bucket, a “Tolerance” bar appears at the top. This is so if you just want to lightly fill in an area, or if you want it to fill in the scraggly pixels as well. More on this later!
6: Paintbrush Use this for freehand drawing onto your picture.
7: Pencil See above. But I suggest using Paintbrush, not Pencil.
8: Stamp You won’t need this for any of my guides. You can mess with this on your own (:
9: Text Use this when you want to insert text. It automatically makes your text transparent so you can type right onto your picture. Once selected, the text toolbar appears at the top of the screen.
10: Rectangle Use this when you want to create a rectangle (with a border and no fill, with fill and no border, or with dual color fill and border).
11: Circle Use this when you want to create a circle (wit ha border and no fill, with fill and no border, or with dial color fill and border).
12: Move Selected Pixels After you have used #1, you can use this to move that entire selection. Use this option also if you would just like to move your entire canvas.
13: Move Selection You won’t need this for any of my guides. You can mess with this on your own (:
14: Zoom Use this to zoom in or out of your picture. Press this (or Z) and left click to zoom in, right click to zoom out.
15: Pan If you’re zoomed in really close, use this to move the image around without having to zoom back out.
16: Gradient You won’t need this for any of my guides. You can mess with this on your own (:
17: Eraser Use this to erase parts of your image.
18: Color Dropper Use this to pick out single colors from an image.
19: Recolor Use this when you want to change one color to another (both colors should be in your primary/secondary color box).
20: Line/Curve Use this when you want to create a straight or curved line. It will start out straight and you can drag the squares on the line to make it curved.
21: Rounded Rectangle See #10. The edges are just rounded this time.
22: Freedom Shape See #10, #11, or #21. This time you just create your own shape.

Phew, now that that’s over with, let’s begin! I will teach you how to make a welcome banner (like I did with Paint), and then teach you how to make an animated banner. So, lets’ go!

I am going to teach you how to make one of my banners. Keep in mind that you can take this and twist it any way you want to make it whatever you like. Change the sizes, the colors, the fonts, the words!

First, let’s make a banner that stretches across the entire top of my profile. Press Ctrl + N and set the width to 540 and the height to 110 in the window that pops up. Yay, you have a rectangle! Now, you need to go and find the colors you would like to use. If you are not taking them from an image using the color dropper (#18), drag the little dot in the center of the color wheel of your color box until you find one you like. Here’s a quick tip about multiple colors in one graphic (click the “More>>” in your color box):

This is what my pink color looks like. If I want to select another color, you should keep the same “S” and “V”. What you should change is the “H”, or the hue, but dragging the ? around the rainbow bar next to the H:. That way, you will create a color scheme that can be diverse, but nice looking. Let me show you what I mean:

Now, they don’t look bad, but I think we can all agree that the left side looks better and more professional, no? Well, this is done by picking one color and dragging the Hue triangle to pick other colors. The right was created by just clicking around the color wheel and picking random colors. But hey, it’s your banner. If you’re using more than two colors, it’s a good idea to lave open an image that has all the colors you want to use so you can easily get back to them. I am going to use pink, blue, and white for my banner, so my color reference looks like this:

For now, go to your banner. There are many ways to go about this. I will show you one way. I will use the rounded rectangle tool (#20). Here is how I set my options with the rounded rectangle. Set your options a the top of the screen underneath the “File” and “Edit” drop down lists.

This means my banner will have a white inside, 7 thickness, and a wide backward diagonal pattern. Keep in mind that when you make the rectangle, the two colors you have set as your Primary and Secondary will be the colors that show up. If you want to switch the Primary and Secondary, either use the right click instead of left, of click the arrow right above the color squares in the color box. Here is how my border looks:

Now, I am going to fill in the inside. Here is where you can use opacity! >:D Go down to your color box. Click the “More >>” if it is not already clicked. Ever wonder how to make your text partially see-through? Down at the bottom right of the box, you will see the “Transparency – Alpha” bar. For my banner, I clicked on the my Primary color and set the transparency to 100 (the max is 225) and my primary to 100 as well.

Then, using the same pattern as my banner border, I used the paint bucket tool (#5) to fill in my banner. This will create lighter versions of my color. Here’s how it looks:

You could also change the pattern back to solid, or just leave the inside white! Now, I am ready to add text to my banner. I am creating a shadow, so I need a new layer. This is probably the weirdest concept of graphic programs. If you add a new layer, you have basically added a new image on top of what you already have. Let’s say your image has two layers. While you are working on the second layer, you cannot edit anything on the first layer. However, once you are done working on the second layer, you can “flatten” the image and it will all become one! Why do you need this? Well, lets say you want to blur part of your image, but not the entire image. You need a new layer. Continue on to see what I mean.

Add a new layer by going to Layer → Add New Layer or Ctrl + Shift + N. Click the text tool (#9). Use the little white box with a cross in it to move your text around. At the top, once again, you can set the size and font face of your text. Here is what mine looks like for my text:

I want my text to say “Queso’s Graphic Guide!” So I need to type it out and make sure it fits. Here is what it looks like:

Now, it’s time for the shadow. At the top of the window, click “Effects” then go to Blurs → Gaussian Blur (should be second from the top). A window like this should pop up:

Now, you will have to experiment here. For a shadow on a normal sized graphic, you won’t want your blur to be much more than 20, and not less than about 7. I set mine for 15 and hit enter. Now, if only your text blurred, good job! If you entire image blurred, undo, and try again. You did not add a new layer correctly. It should look like this:

Once you have it, you need to flatten your image. Go to Image → Flatten or Ctrl + Shift + F. Nothing changed! Good! Now, it’s time to add your final text. My text will be pink with small blue polka dots (so my primary and secondary colors should be my pink and my blue I want to use). When I insert my text, I will change the colors (as I no longer need black – that was for the shadow) but I do NOT change the font face or size! This is so it all turns out. I also change my fill to “Percent 10” for the polka dots. When I type out my text and position it, this is how it looks:

And there you go! A basic, yet nice looking banner for you to use anywhere. If you ask me, it looks ten times better than the paint banner, and you can do so many more things with it. You can also add images to these banners, and do all kinds of cool effects with the other “Adjustments” and “Effects”. Take some time to try them out with other images. You can also Google Paint.Net guides to see other things you can do with the program. Congrats, you’re done with your banner! Continue on to see how I do my animated banners, using Paint.Net.

A note on animated banners: they take time. You have to make sure all your image line up because if something is just slightly off, you will be able to notice! Make sure that if you skipped over the guide above, you read about adding new layers and how to flatten an image; you will need to understand how to do this!

A default banner image that I do is 320 by 240 pixels. Create one image like this. What I do from here is create a “color guide” (just like with the banner above) that has all the colors I want to use. This is so I do not have to worry about losing any of the colors I want to use. It can be a mess. :P Mine looks like:

I then create 5-10 blank images of this exact size. Don’t mess yourself up! If you want the banner to have a background color, go ahead and fill it in on each image. I want to use white for my banner, so I leave it as is. Now, usually these banners go word by word. You can change it however you like but I want my banner to be like this: -Queso’s | Graphic | Guide! (new slide) Click here! I also want an image of my cat Tawney. What you need to do if you are including the same image on each slide is create on exactly how you want it and use that as a template for each of your other slides. If you want to include an image, you need to add a new layer and paste the image you want. If your image is too big, you will have the option to expand or keep your canvas size. For this guide, you should keep the canvas size. (If you need to resize your image, hit Ctrl + N and paste your image. Press Crtl + R and change the width to 320 if you’re using the banner size of 320 by 240. Make sure the “Maintain aspect ratio” is checked above. Try to paste your image again and see if it fits better). Once you have your image positioned, press F4. This will help you edit your layer properties. Keep in mind that your text will have to go on top of your image. So if you have a dark image, you should lighten it up a bit. If you have a colored background, try some of the layer effects. “Darken” and “Multiply” (sometimes “Overlay”) will get rid of the white background around your image and, depending on the color of your background, will lay your image nicely over your background. (If you are getting weird pixels around your image and it isn’t laying nicely over your background, especially if you have an image on a solid background color, you can use the fill option #5 to fill in white around your image. Set the “tolerance” at the top to around 40 and fill in the white space. You will have to adjust this. It should take out most of the weird pixels around your image. If you have a light image, set your tolerance low. It may take out parts or your image. If this happens, just undo, fix the tolerance, and try again. Mess with it until you have it right.) Here is how I edit mine:

I have my image, set to a 150 opacity. All it does it lighten my image. Flatten your image (Ctrl + Shift + F) and use this base for each of your frames. It should paste into the same exact spot on each image. Now, it’s time to start text. Take a deep breath………. Alright. Go to the first slide. Add a new layer (Crtl + Shift + N). Pick your shadow color – - I am going to use a black shadow since I have a white background. Make sure you are only doing the first part of your animation for this slide. For mine, I am only doing “-Queso’s”. Once you have your text, read in the above section to learn how to use the Gaussian Blur. Once you have blurred your text, retype your text over the top. You should have a nice shadow. Once you have the first frame of your banner, flatten your image (Ctrl + Shift + F). Now, select all (Ctrl + A), copy (Ctrl + C), and paste into your next frame (Ctrl + V). You should now have two identical images, yes? Here is my first frame:

Now, for your second frame, you need to add a new layer (Ctrl + Shift + N). Add your second word (or part of text) with your shadow color, blur it, type over with your text color, flatten, copy, and paste into your next frame. What you should end up with is a first image that has been built on until you reach your final product.

If your text is too long, or you want to start on a new slide, make sure you still have the same background color or image (or both) and start over just the same. Take a look below to see each of my frames for my graphic (in order):




Make sure you flatten each image and save them all individually as .PNG files. If you don’t they will save in a .PDN format that will not upload! I have each banner’s slides saved in a folder with the title of the banner so I can keep them all organized. For my banner, I save each slide individually and end up with 4 individual images. It’s now time to upload them and put them all together! Again, you will have to venture off site. This site is the one I use. It is a safe, Myspace image editor. You can also try Lunapic but I don’t find it as useful.

At the first site, you go down to the “add” button and add all parts of your banner. Click upload (if you made your banner a size other than 320 by 240, under the “Choose Dimensions” step #1, select “Leave Custom Size” so it will not resize your banner). You may need to reorder your images to make sure they come up correctly.

You can now set the time you want each frame to stay up. I set slides 1 and 2 of mine (-Queso’s and -Queso’s banner) to .7 of a second and the full thought (-Queso’s banner guide!) to one second. I also set the “Click here!” slide to 1 second. You don’t want your reader to not be able to keep up with your banner, but you also want them to not get bored. Once you have set all the times, hit “submit” and you will see your banner as it would appear on your page. If you are not satisfied with the timing or the order of the images, click the “Edit Picture” link above the image. If you are satisfied, right click and select “Save Image As” and save it to your computer. You cannot leave your banner on this site – - it won’t save it for you! Your computer will download the image and you can then use a hosting site to upload your banner. (Tinypic, ImageShack, etc. I use PhotoBucket, I think it’s the best C:) You will then copy the link and paste it into your profile or pet’s page between two !s (! URL ! with no spaces). Here is how my banner looks completed:

And there you go! Remember that you can make your banner any size with anything on it. You can do text effects and the whole lot on here. Just keep in mind that each frame must build on itself. If you’re feeling adventurous, I suppose you could make each word a new slide, or use only pictures! Mess with the times for the slides. Here are some of the possibilities you can create with a little creativity:








As always, be creative! Nice looking banners are made by using simplicity, forwardness, nice color, and readable font. Think outside the box… but don’t go crazy (: Also, you can use Paint to create animated banners as well. Follow the same guidelines: keep the same canvas size, create each slide, save them, upload them, and be creative! If you have another graphics program that you use, go for it!

Chances are, you will run into many problems along the way. PLEASE, don’t hesitate to message me or post on the forum and ask questions. If something does not make sense, I’d love to clarify. Either way, thanks for reading my guide! I hope you’re well on your way to making lovely graphics for yourself and others. Thanks! -Kayla

Also, please note… I am not claiming to be, and I am not, a great graphics maker. I know the basics. I know there are tons of other possibilities with these programs, and I’m sure many of you have much greater knowledge than I do, and I’m happy for you! But, this really is just a basics guide, so, please, it’s not necessary to flaunt your own knowledge here. If you would like to create your own advanced guide, I’ll be happy to link to you, but please don’t come in and tell me how I could have made my example graphics better or differently etc. Other than that, I appreciate any feedback and questions you might have!

Link Back?

And, as always, perhaps you’d like to leave me a bit of credit. Well, that’s awfully kind of you! Here are some graphics you are more than welcome to use wherever you like. Just click on whichever you want and copy the URL at the top of the page. Place the URL between two !s, put a : after and then the forum link:

foopets.com/topics/show/1064078?forum_id=1

It should look like:

!(Image URL)!:Link to thread

Other Helpful References

Thanks for reading!

Medium
Useful 120

Amazing. I work in my own graphics program. I love your step by step instructions.

Medium

I use GIMP but am still getting accustomed to everything in the program. I almost got Paint.NET but decided not to last minute, now I wish I did. :D
And I have a different version of Paint. XD
Besides that, beautiful guide -Queso! You never disappoint!

Medium

Nice post!

Medium

Wow this is an awesome post!! Another GREAT post by -Queso! :) :)

Medium

I orderd the “SAY ‘NO’ TO BETA!” :D XD


But anyways, good job! claps

Medium

This is really helpful if I ever wanted to do something like this in the future. Fantastic work. =)

Medium

Is Gimp kinda similar to paint.net?

Medium

I looked at your screen shots and looked on the gimp thing I was using, it kinda was similar.

Medium

can someone tell me how to report people ? i wanna report someone >:{

Medium

Thanks for posting this!

Medium

Look what I made! :D

Image and video hosting by TinyPic

Medium
Useful 8

How do you make a pic the profile pic?

Check this link out! She makes some. Click here

Medium
Useful 5

-queso how do u take screen shots with pc? i read the how to take screen shots thing but u only kinka posted for macs and computers i think bc the keyboard is different.on my pc it says insert then under it says prt sc im guessing thats print screen so i press that and go to paint.press ctrl+v together but it doesnt show.i did everything u said and its not workin.

Medium

Wow,Great Queso,I might try it out with my FREE Mini-Photoshop :3

I did ti with paint aswell,it’s cute! :3

Medium

My Computer is “too old” for Paint.NET