How to Posting Images & Avatars

Simulation · 11-03-06, 17:20

How To : Prepare Images to Post on the Forum

Introduction
Resouces
Avatar
Posting A WEB Image
Hot Linking (A word of warning)
Prepare an Image for Posting using IrFanview
Crop an Image
Resize an Image
Brightness, Contrast and Gamma Correction
File Formats
Uploading Image to the Internet
Batch Conversion

Introduction
Within this tutorial we will explain how to post an image onto the forums. This will include converting an image into the correct format, uploading the image onto a file server and posting the image in a thread on TombRaiderForums.com.
Images can come from various sources such as Digital cameras, Scanners, your own creations or from the Web. In all cases the image may be in the wrong format, too large in either pixels size or disk size.

Resources
IrFanView Picture Editor\Viewer
PhotoBucket.com (Image File Server)
ImageShack (Image File Server)
How Web Servers Work?

Avatars
You can create your own avatar, but it must be within these limits

128x128 pixels
.jpg or .gif format
15Kb MAX

You can change it if a two weeks period has passed.
Once you have created your image post it in this THREAD
Don't you have a paint program to re-size the image you want and make it an avatar? No problem. Post the image and we'll do it for you

Posting A WEB Image
Most images that are posted on our forum are from other Web Sites. You will first need to find the location and name of the file. Figure 1 below is a sample image. Place your mouse over the image and click the right mouse button. Select the Properties option from the context menu. The Properties (Figure 2) shows the URL (full Web address) for the image. Highlight the URL text and press Ctrl+C to copy to the clipboard.

To add the image to a post on the forum either start a new topic or reply to an existing topic. Press the image button (Fig 3) and Paste the URL into the dialog (Fig 4) and press OK. The URL is displayed in the post with [IMG] at the start and [/IMG] at the end. This tells the forum software that the URL represents an image file and that it should be displayed.

Figure 3

Hot Linking (A word of warning)
Many Web Sites do not allow you to directly link their images (Hot Linking). This is considered by many as sites as bad practice as the image will be downloaded from their site, which uses their bandwidth. There are several free online image servers that can be used to host your pictures and we would advise you to use these sites. Please read below for further details.

Prepare an image for posting using IrFanView

IrFanView is a free image editor/viewer (Fig 6). See RESOURSES at the top of the page to download and install a copy from the offical website. If you already have image editing software you may still find the information below relevant.

We will discuss some of the basic editing options and advise as to which format the files should be saved as.
First of all lets save an image from the Web to our PC. Click on this link SAMPLE.JPG. The Web Browser will display a large version of Figure 1. We will now save this image to our PC by pressing the right mouse when over the image. Select Save Picture As and choose a folder and filename for the file.

Start IrFanView and open the image you have just saved (Open, File menu). Figure 5

Figure 5

CROP AN IMAGE

Quite often you are only interested in an area of the picture. Place the mouse at the top corner of area of interest and hold the left mouse button down. While holding the button down move the mouse diagonally to the bottom left. As your mose moves the title bar will display the size of the window in pixels. Relase the mouse button and a rectangle will be displayed. Select Crop Selection from the Edit menu (Ctrl + Y). The image outside the window is discarded (Fig 7). Save the image by either overwritting the original or as a new name (recommended).

RESIZE AN IMAGE

Open the original saved SAMPLE image in IrFanView. Select Resize/Resample (Ctrl+R) from the Image menu. The dialog offers several ways of changing the image size. Try each method in turn to see the effect of making the image smaller and larger. Use Edit Undo (Ctrl+Z) after each attempt. When you are happy with the resized image save the file with a new name.

Brightness, Contrast and Gamma Correction
Often, a screen shot can appear dark. Use the Enhance Colours (Edit menu) to adjust the image.

SAVE FILE FORMATS

There are many different file formats available and each one has it's own advantages and disadvantages. For images that are to be displayed on the forum you should select either JPEG or GIF. Both formats offer small file sizes and can be displayed in all browsers. Generally JPEG is used for photographs and screen shots while GIF is used for button images on web pages.

When saving a file set the Save as type to JPEG or GIF. An additional dialog will appear which allows further control over the saved file. In the case of a JPEG the Save quality slider bar can be used to control the quality of the image against the file size it will use.

UPLOADING IMAGE TO THE INTERNET

The image is now ready to be uploaded onto the Internet. You can either use your own webspace or one of the free Image File Servers (See Resources at top of page). Just register and follow their instruction on how to upload your images. Once uploaded you will be given a URL that can be used to post your image.

BATCH CONVERSION

Batch Conversion in Irfanview (the easiest way to resize a complete collection of images to websize):
You put a series of printscreen images into one folder. Name: MyPrintscreensOriginal. Whatever.
In IrfanView, choose File / Batch Conversion/Rename...
In the searchfield choose that folder. If your printscreens are jpeg files, choose jpeg files in file types.
Next to the left pane are buttons, choose "select all".
Choose an 'Output directory'.
Work as: radiobutton the Batch conversion - Rename result files.
Output format: JPG - JPEG Format. Click the Options button. Set save quality to 60. Click OK.
Check ON 'Use advanced options'. Click button 'Set advanced options'. Now check ON 'RESIZE'. Radiobutton 'Set new size as percentage of original:' and choose 35%. Be sure 'Preserve aspect ratio (propertional) is checked ON, so you only have to fill in 35% in width to see that Height is automatically 35% too. Check on 'Use Resample function (better quality)'. Click OK to close submenu.
Back on Batch conversion menu. Click Start button.
Admire the result in your Output directory. I resized fullscreen images that were 1.2 MB, to perfect smaller ones of 50 Kb average. But you don't really see what you will get , beforehand. So, you could start with the 'normal way': resize only one picture.

11-03-06, 17:20	#1
Simulation Member Joined: Jul 2003 Posts: 5,870	How to Posting Images & Avatars How To : Prepare Images to Post on the Forum Introduction Resouces Avatar Posting A WEB Image Hot Linking (A word of warning) Prepare an Image for Posting using IrFanview Crop an Image Resize an Image Brightness, Contrast and Gamma Correction File Formats Uploading Image to the Internet Batch Conversion Introduction Within this tutorial we will explain how to post an image onto the forums. This will include converting an image into the correct format, uploading the image onto a file server and posting the image in a thread on TombRaiderForums.com. Images can come from various sources such as Digital cameras, Scanners, your own creations or from the Web. In all cases the image may be in the wrong format, too large in either pixels size or disk size. Resources IrFanView Picture Editor\Viewer PhotoBucket.com (Image File Server) ImageShack (Image File Server) How Web Servers Work? Avatars You can create your own avatar, but it must be within these limits 128x128 pixels .jpg or .gif format 15Kb MAX You can change it if a two weeks period has passed. Once you have created your image post it in this THREAD Don't you have a paint program to re-size the image you want and make it an avatar? No problem. Post the image and we'll do it for you Posting A WEB Image Most images that are posted on our forum are from other Web Sites. You will first need to find the location and name of the file. Figure 1 below is a sample image. Place your mouse over the image and click the right mouse button. Select the Properties option from the context menu. The Properties *(Figure 2)* shows the URL (full Web address) for the image. Highlight the URL text and press Ctrl+C to copy to the clipboard. To add the image to a post on the forum either start a new topic or reply to an existing topic. Press the image button (Fig 3) and Paste the URL into the dialog (Fig 4) and press OK. The URL is displayed in the post with [IMG] at the start and [/IMG] at the end. This tells the forum software that the URL represents an image file and that it should be displayed. Figure 3 Hot Linking (A word of warning) Many Web Sites do not allow you to directly link their images (Hot Linking). This is considered by many as sites as bad practice as the image will be downloaded from their site, which uses their bandwidth. There are several free online image servers that can be used to host your pictures and we would advise you to use these sites. Please read below for further details. Prepare an image for posting using IrFanView IrFanView is a free image editor/viewer (Fig 6). See RESOURSES at the top of the page to download and install a copy from the offical website. If you already have image editing software you may still find the information below relevant. We will discuss some of the basic editing options and advise as to which format the files should be saved as. First of all lets save an image from the Web to our PC. Click on this link SAMPLE.JPG. The Web Browser will display a large version of *Figure 1. We will now save this image to our PC by pressing the right mouse when over the image. Select Save Picture As and choose a folder and filename for the file. Start IrFanView and open the image you have just saved (Open, File menu). Figure 5 Figure 5* CROP AN IMAGE Quite often you are only interested in an area of the picture. Place the mouse at the top corner of area of interest and hold the left mouse button down. While holding the button down move the mouse diagonally to the bottom left. As your mose moves the title bar will display the size of the window in pixels. Relase the mouse button and a rectangle will be displayed. Select Crop Selection from the Edit menu (Ctrl + Y). The image outside the window is discarded (*Fig 7). Save the image by either overwritting the original or as a new name (recommended). RESIZE AN IMAGE* Open the original saved SAMPLE image in IrFanView. Select Resize/Resample (Ctrl+R) from the Image menu. The dialog offers several ways of changing the image size. Try each method in turn to see the effect of making the image smaller and larger. Use Edit Undo (Ctrl+Z) after each attempt. When you are happy with the resized image save the file with a new name. Brightness, Contrast and Gamma Correction Often, a screen shot can appear dark. Use the Enhance Colours (Edit menu) to adjust the image. SAVE FILE FORMATS There are many different file formats available and each one has it's own advantages and disadvantages. For images that are to be displayed on the forum you should select either JPEG or GIF. Both formats offer small file sizes and can be displayed in all browsers. Generally JPEG is used for photographs and screen shots while GIF is used for button images on web pages. When saving a file set the Save as type to JPEG or GIF. An additional dialog will appear which allows further control over the saved file. In the case of a JPEG the Save quality slider bar can be used to control the quality of the image against the file size it will use. UPLOADING IMAGE TO THE INTERNET The image is now ready to be uploaded onto the Internet. You can either use your own webspace or one of the free Image File Servers (See Resources at top of page). Just register and follow their instruction on how to upload your images. Once uploaded you will be given a URL that can be used to post your image. BATCH CONVERSION Batch Conversion in Irfanview (the easiest way to resize a complete collection of images to websize): You put a series of printscreen images into one folder. Name: MyPrintscreensOriginal. Whatever. In IrfanView, choose File / Batch Conversion/Rename... In the searchfield choose that folder. If your printscreens are jpeg files, choose jpeg files in file types. Next to the left pane are buttons, choose "select all". Choose an 'Output directory'. Work as: radiobutton the Batch conversion - Rename result files. Output format: JPG - JPEG Format. Click the Options button. Set save quality to 60. Click OK. Check ON 'Use advanced options'. Click button 'Set advanced options'. Now check ON 'RESIZE'. Radiobutton 'Set new size as percentage of original:' and choose 35%. Be sure 'Preserve aspect ratio (propertional) is checked ON, so you only have to fill in 35% in width to see that Height is automatically 35% too. Check on 'Use Resample function (better quality)'. Click OK to close submenu. Back on Batch conversion menu. Click Start button. Admire the result in your Output directory. I resized fullscreen images that were 1.2 MB, to perfect smaller ones of 50 Kb average. But you don't really see what you will get , beforehand. So, you could start with the 'normal way': resize only one picture. Last edited by Joseph; 24-07-06 at 04:06.