 |
| Home | Art | Store | FAQ | Me | Tutorials | Forum | Links | Misc |
| Tutorial -- Images |
|
Art galleries normally consist of collections of little thumbnails to preview your pictures. Clicked on, the full
pictures are shown. Be sure to create seperate, smaller, thumbnails images...or else your gallery will have
insanely long page load times! Also, most pictures are huge after being scanned / CGed. Resizing
them to smaller dimensions and file sizes is essential. Here, I show the thumbnail making steps first, followed
by the image resizing. These steps are shown using Photoshop 5.0. For the very similar Painter 7.0 steps click here. I have yet to find a good way of making even sized thumbnails using OC 1.1b. The best I can think of is to crop and resize the image manually as close as you can ^_^;; |
| Step-By-Step thumbnail making |
 Open the picture you want to make a banner with (obviously O_O;)  1. Choose the "Rectangular Marquee Tool" 2. Select the "Marquee Options" tab 3. Choose the "Constrained Aspect Ratio" style  Now, make the width and height to be whatever aspect you want your thumbnails to be. Choosing 1 and 1 will make little perfect square thumbnails like this (if you choose 50 pixels for height at the end):    However, there are other options. Choosing 2 width to 3 height will give little thumbnails like this (if you choose 50 pixels for height at the end):    Choosing 1 width to 2 height will give little thumbnails like this (if you choose 50 pixels for width at the end):    Experiment around for a size you like, if you want! Especially if you have a LOT of thumbnails / images to display O_O. The non-square sizes can both look better and take up less space (which = less loading time for visitors -_^)  Make sure you're on that Rectangular Marquee Tool, and now click and drag the mask around whatever you want in your thumbnail! The constrain aspect should make sure it stays proportional to whatever size you want your thumbnail at.  Now go to Image->Crop  Here's what it looked like after I cropped it.  Now go to Image->Image Size on the toolbar  Make sure "pixels" is selected, along with the "Constrain Proportions" checkbox. Then enter your the thumbnail size you wish! A good size range to keep in mind is 50 to 75 pixels for the longest side.  Sometimes, if you have had to shrink the thumbnail a lot, the picture will come out very blurry and unclear. Selecting the Filter->Sharpen->Sharpen tool can help get the thumbnail looking clearer ^_^.  And now you have your finished thumbnail! (The new thumbnail may suddenly appear very, very small...make sure your zoom is on 100% to see the true size.) I like to save the thumbnails in the same directory as my images...with the same image name, just with "_small" added to the back of the filename. So an image cloud.jpg would have its thumbnail saved as cloud_small.jpg |
| Image Resizing |
 First, open the image you wish to resize. Some images, e.g. oekakis or smaller art you drew directly onto the computer, may already be small enough that you do not have to resize them before displaying them online. If the image is smaller the guidelines below (image dimensions less than 750 on the longest side, and a filesize of less than 175kb), then you can go ahead and skip these resizing steps ^_^. Here, you can see the Shivera artwork I have open is gigantic. Just a small portion of the picture already fills the entire screen~. So I definitely need to resize this one before displaying!  Go to Image->Image Size on the toolbar  Make sure "pixels" is selected, along with the "Constrain Proportions" checkbox. Then enter your the image size you wish! Good size ranges to keep in mind: If your picture is square-ish, then ~600-650 pixels to the longest side. If your picture is narrow (long on one side, short on the other), ~700-750 pixels for the longest side. You might have to come back to these options and make the picture a bit smaller again if the filesize on the last step is too large. If you had to shrink your image a lot, it may now appear very blurred and unclear. Go to Filter->Sharpen->Sharpen to get the picture looking a bit sharper ^_^. Be careful not to oversharpen, though! (The edges will become jagged-looking, and take on a cut-out look O_O!)  Now it's time to save the image. Go to File->Save As  I normally just go with these options on the save menu. I might come back and re-save by changing them if the filesize on the last step (below) is too large.  Now to make sure the final image is ok! I open Windows Explorer (the file manager thingie) and find the file I just saved. Click on it and make sure the final filesize is 175kb or less! (Here my image is 81kb.) If it is too big, you might have to go back and either resize the picture to be smaller, or save with less quality~. Also, I like to double-click and view the final image a little to make sure that I did save with enough quality and there isn't too much distortion on the picture. (I have a bit more on quality saving here) |
| Navigation | |||
|