How To Make Graphics

This page is all about how to make your own web graphics, almost entirely online (no apps or downloading programs needed)!! There are other ways to make these, namely Adobe Photoshop, but no one's paying for that just to make some pngs.

Let's get started with the basics- FILE TYPES!

PNG, GIF, and JPEG are the most common image file types you'll run into when making graphics. All of them are good for different things.
PNGs are lossless, meaning their quality will stay nice and sharp no matter how many times the image is shared around, and they have an alpha channel so you can make them transparent or semi-transparent parts of the image. When making still images, I usually stick to PNGs.
JPEG is the other primary still image file type and is currently the most common one. It's best for realistic images and digital photography because it can contain a lot of color and data in a relitivly small file size, but unlike PNG it is lossy (will decrease in quality when transfered or copied between servers) and cannot be transparent.(Note- JPG and JPEG are the same thing)
Finally, GIFS can be used for still images as well, but their primary use is for short animations. They also contain an alpha channel, so they can be transparent, but they can only hold 256 colors at a time. If you convert a detailed JPEG or PNG into a GIF, some of its more nuanced colors will probably be lost, since JPEGS and PNGS can hold up to 16 million colors!

if you have this,	use This!
Photograph	JPEG
Anything animated	GIF
Still image with transparent areas	PNG
Digital painting	JPEG
Digital cartoon, clipart, or pretty much anything	PNG

MS PAINT

I use MS Paint a Lot in my graphics making. I'm primarily an artist, including MS Paint art, so I'm very familiar with the program. It comes with Windows, but if you don't have Windows, JS Paint is a pretty good online alternative.
I've used MS Paint to make banners, blinkies, buttons, and pixel art, usually in combination with some other tools I'll be talking about here.
When I make a graphic for my website using MS Paint, I start with a pretty small canvas size. For banners, I do 950x150-ish pixels, buttons anywhere from 200-70x200-70 pixels, and blinkies are typically 150 x 20 pixels.
When you use MS Paint, make sure you use the pencil tool rather than the brushes tool, because otherwise the bucket tool will not work correctly. As an example, let's make a banner for a blog about cats! I'm going to use MS Paint to create the base background for the banner.

This background was made with the line tool and the bucket tool. Looks pretty slick! But what if i want to add cats and text to it?
To do this completely in MS Paint, you'd have to open a new paint file, import an image of a cat, erase the background manually, resize it to fit on the banner, and copy it over. You can add the text too, but due to the small canvas size, it's not going to be very high quality (see the banner on this page, done entirely in ms paint). There's an better way!!
I'll save this image as a PNG file, and move onto our next tool!

ONLINE IMAGE EDITOR

Online Image Editor is a super awesome online image editing software. There are seperate tools online to remove backgrounds, add text, glitters and other things, but OIE puts it all in one place. Sometimes I use just OIE for a graphic, because it's so versitile. I usually start with an image, then add text, glitter, or sparkles to it. I beleive you can make/edit gifs on it too, but I haven't figured that out yet. For our banner, I'll use it to add some text!

OIE has hundreds of fonts and a nice range of options for making the text stand out. I chose to give it a slight arc and a drop shadow!