<div align=center><span style='font-size:17pt;line-height:100%'>HOW TO SAVE YOUR GRAPHICS</span> <span style='font-size:13pt;line-height:100%'>Although it may seem self-explanatory, oftentimes people don't save their graphics correctly and end up with distorted pictures. I'm not an expert at this, but I thought I'd shed some light. I am open to suggestions to improve this documentation if you have any.</span></div> Righteo. Let's begin. I thought about giving you different definitions on different file types--ie, how you can save your file--but when I looked it up, they didn't have clear definitions and then they progressed to a bunch of math that made my poor eyes bleed. Thus you're going to get my explanations as I go. <span style='font-size:12pt;line-height:100%'>BASIC PHOTO</span> I decided I would start with a clear photograph of one of my favorite subjects. Please excuse the randomness of it all. You can find the original photograph here. Please use it to compare with the different save files. <span style='font-size:12pt;line-height:100%'>.JPEG</span> I began first with saving the above file as a .jpeg, which is a compression method for photographs and other images. This is by far one of the most popular--if not the most popular--type of saving images. The problem? It doesn't always turn out so spectacularly. Look at the following pictures: .jpeg -- low See all of the random pixeled areas that look all scraggly? This is what happens when you save a file as a low-compressed .jpeg. Try to stay away from this type of saving because it doesn't look very professional. .jpeg -- high You can ignore much of the issues by saving it as a "high" .jpeg, but please keep in mind that this will not always work. For example, text does not always come out that well on a .jpeg file. <span style='font-size:12pt;line-height:100%'>.GIF</span> Ah, .gif. That's a different story. While .jpegs make pictures pixely, .gif tends to make things grainy. See how it seems to divide the picture into a bunch of little random dots like that? Isn't my explanation totally technical? Anyhow, this is what happens when you save as an (un-dithered) .gif. For the record, the dithered .gifs were even grainier. However, that's not to say that .gifs are totally worthless. Check out the same text image as above: Aha! No distorted edges. It works miracles, doesn't it? <span style='font-size:12pt;line-height:100%'>.PNG</span> I really don't know much about this option, but I do know that it's the best available I have on my computer. It may be a photoshop exclusive sort of thing--*needs confirmation about that*--but if you have the option and neither .gif or .jpeg are working out, choose this. <span style='font-size:12pt;line-height:100%'>.BMP</span> Because I'm writing such a fantastic documentation, I thought I'd throw in something else that I really don't know too much about: .bmp.However, if you plan on going back and editing your graphic later, choose this because the layers don't compress (in photoshop). <span style='font-size:12pt;line-height:100%'>SUMMARY</span> .jpeg high -- good for pictures with a wider color palate .jpeg low -- lol .gif -- good for pictures with fewer colors and no gradiant .png -- my favorite, but pretty hefty in file size .bmp -- editable And there's my half-assed, not-really-knowledgeable lecture. Welcome to college. :D Code: Select [align=center][b][SIZE=10]HOW TO SAVE YOUR GRAPHICS[/SIZE][/b] [SIZE=6]Although it may seem self-explanatory, oftentimes people don't save their graphics correctly and end up with distorted pictures. Â I'm not an expert at this, but I thought I'd shed some light. Â I am open to suggestions to improve this documentation if you have any.[/SIZE][/align] [align=right](c) December, Esq[/align] Righteo. Â Let's begin. I thought about giving you different definitions on different file types--ie, how you can save your file--but when I looked it up, they didn't have clear definitions and then they progressed to a bunch of math that made my poor eyes bleed. Â Thus you're going to get my explanations as I go. [b][SIZE=5]BASIC PHOTO[/SIZE][/b] I decided I would start with a clear photograph of one of my favorite subjects. Â Please excuse the randomness of it all. Â You can find the original photograph [URL=http://www.flickr.com/photos/leman/285044475/in/set-72157594354204126/]here[/URL]. Â Please use it to compare with the different save files. [b][SIZE=5].JPEG[/SIZE][/b] I began first with saving the above file as a .jpeg, which is a compression method for photographs and other images. Â This is by far one of the most popular--if not [i]the[/i] most popular--type of saving images. The problem? Â It doesn't always turn out so spectacularly. Â Look at the following pictures: [b].jpeg -- low[/b] [IMG]http://i464.photobucket.com/albums/rr7/DecemberMagnum/Tutorials/Test1--jpeglow.jpg[/IMG] See all of the random pixeled areas that look all scraggly? Â This is what happens when you save a file as a low-compressed .jpeg. Â Try to stay away from this type of saving because it doesn't look very professional. [b].jpeg -- high[/b] [IMG]http://i464.photobucket.com/albums/rr7/DecemberMagnum/Tutorials/Test1--jpeghigh.jpg[/IMG] You can ignore much of the issues by saving it as a "high" .jpeg, but please keep in mind that this will not always work. Â For example, text does not always come out that well on a .jpeg file. [IMG]http://i464.photobucket.com/albums/rr7/DecemberMagnum/Tutorials/Test2--jpeg.jpg[/IMG] [b][SIZE=5].GIF[/SIZE][/b] Ah, .gif. Â That's a different story. Â While .jpegs make pictures pixely, .gif tends to make things grainy. [IMG]http://i464.photobucket.com/albums/rr7/DecemberMagnum/Tutorials/Test1.gif[/IMG] See how it seems to divide the picture into a bunch of little random dots like that? Â Isn't my explanation totally technical? Â Anyhow, this is what happens when you save as an (un-dithered) .gif. Â For the record, the dithered .gifs were even grainier. However, that's not to say that .gifs are totally worthless. Â Check out the same text image as above: [IMG]http://i464.photobucket.com/albums/rr7/DecemberMagnum/Tutorials/Test2--gif.gif[/IMG] Aha! Â No distorted edges. Â It works miracles, doesn't it? [b][SIZE=5].PNG[/SIZE][/b] I really don't know much about this option, but I do know that it's the best available I have on my computer. Â It may be a photoshop exclusive sort of thing--*needs confirmation about that*--but if you have the option and neither .gif or .jpeg are working out, choose this. [IMG]http://i464.photobucket.com/albums/rr7/DecemberMagnum/Tutorials/Test1--png.png[/IMG] [b][SIZE=5].BMP[/SIZE][/b] Because I'm writing such a fantastic documentation, I thought I'd throw in something else that I really don't know too much about: .bmp.However, if you plan on going back and editing your graphic later, choose this because the layers don't compress (in photoshop). [IMG]http://i464.photobucket.com/albums/rr7/DecemberMagnum/Tutorials/Test1--bmp.jpg[/IMG] [b][SIZE=5]SUMMARY[/SIZE][/b] [b].jpeg high[/b] -- good for pictures with a wider color palate [b].jpeg low[/b] -- lol [b].gif[/b] -- good for pictures with fewer colors and no gradiant [b].png[/b] -- my favorite, but pretty hefty in file size [b].bmp[/b] -- editable And there's my half-assed, not-really-knowledgeable lecture. Â Welcome to college. :D
Of course, low quality has its upsides as well. People are less likely to steal low quality graphic. It loads faster. And since none of us know how well anyone else's screen is configured, it's likely your graphic isn't going to look like it does on your screen once you put it up on the internet in any case. The differences between each file type are basically how they save the file, which results in how lossy they are. PNGs are usually less lossy than other file types, but take longer to load. Only GIF and PNGs will preserve transparency in an image background.
Well, there you have it, kids. Some sort of reason to the insanity of saving files. And I made a typo in the title. *considers fixing it*
Which type of documentation do you wish this to be? It seems like it could be a repostable one, and if so, then it needs a code posted.
Your documentation has been approved and moved to the RPG Creation Documentations board. Thanks for submitting!
A useful tool for quick graphic cropping and resaving as a different type would be IrfanView (http://irfanview.com). You can resave and set compression rates with this, often times it can resave and save you a lot of kilobytes in file size. I find this handy for jpegs, or large images I need to resize and save as a .gif or .png.
