Using the Image Manipulation Functions




You can resize and convert images in your account very easily. To the right of all your images, you will notice the height and width of the image is actually a link. Click the link, and you will go to another page, there are a few different functions in this area.

Codes Resize Rotate Convert Crop Decorate Composite

Image Source Codes

You will see a text area that shows you the code for using that image on a webpage or in your sig box for e-mail. Just put your cursor in that box, hold your "cmd" key down and hit the "a" key.. this will highlight all the text in the box. While still holding your "cmd" key, hit the "x" or the "c" key and you will have a copy of the code to paste wherever you want to put the image. Just use the "cmd" key and hit the "v" key when you want to paste the code into position in the edit box for your webpage or in your sig box for your e-mail.

Below that you will see the Image Manipulation section. Here you can convert gifs to jpgs or vice versa, you can resize an image either smaller or larger than the original, crop, rotate, or decorate an image, and you can rename the image all in a few clicks of the buttons.


Resizing an Image

You will notice a dropdown button that says "no size change". When you click this dropdown menu, you will see a list of percentages. You can choose what percentage by which you want to increase or decrease the size of the image. For example, if an image is 100H x 100W .. you can make it half that size, or 50H x 50W, by clicking "50%" in the dropdown. By the same token, you can take an image that is 100H x 100W and make it half again as big, or 150H x 150W, by clicking on the "150%" in the dropdown.

Once you've chosen the proper percentage for what you want to make the image, you then have an option to rename it. This is important if you want to keep the original image as is. If your original image is "cute" and you are making a smaller version for e-mail, but want to keep the original, you would add a 2 to the filename in the text window making it cute2 (or whatever you want to use as a name). Do not put the extension (.gif or .jpg) in this text area. Then you have the option of overwriting the original image or keeping the original and making the resized version another image.

If you have not changed the name as noted above, the original image will automatically be overwritten, regardless as to whether or not you've chosen to keep it.

Next, click the "manipulate" button. You will get a popup asking you if you're sure you want to do this. Click "ok" and you're done.

NOTE: Do NOT resize a animated gifs! We do not have gif compression and it will split the image into multiple jpg images (for however many frames the gif is comprised of).

Now you will be back in the directory listing, and the image you modified or created will be highlighted in pink.


Rotating an Image

Just below the dropdown menu with the percentages in it, you will see an area that says Rotate ________ degrees. The blank is a text area that you can type in the number of degrees you want to rotate an image. This function will rotate an image to the right. For example, if you have a horizontal image that you want vertical, you will specify 90 as the number of degrees, and your horizontal image will now be vertical, with whatever was on the left side now at the top. You can experiment with the amount of rotation to get the desired effect.

Once you click the "manipulate" button, you will get a popup asking you if you're sure you want to do this. Click "ok" and you're done.

Now you will be back in the directory listing, and the image you modified or created will be highlighted in pink.


Converting an Image

You can convert just about any type of image to JPG, or PNG format. Use the .png for .gif compatibility, or your gifs will be HUGE! Both jpg and png formats offer the best compression ratio.

Once you click the "manipulate" button, you will get a popup asking you if you're sure you want to do this. Click "ok" and you're done.

Now you will be back in the directory listing, and the image you modified or created will be highlighted in pink.


Cropping an Image

To crop an image, once you've gotten to the Image Manipulation page, sroll down and you will see a "crop image" button next to the "manipulate image" button. Click the "crop image" button, and you will be taken to a screen showing you the image you want to crop.

This is a "point and click" function. To activate it, move your cursor down so that it surrounds the image, and click it. An arrow will appear that you can move with your arrow keys. Move the arrow to the top left corner of the area you wish to keep and hit return. The arrow will "smack" the area you've chosen. Now you will go to another screen to choose the bottom right corner of the area you wish to keep. Click to make the arrow appear, move the arrow to where you want it, and "smack" the area chosen.

You will now be taken to a screen that will give you an area to rename the image. Do NOT put the extension (.jpg or .png) in that area, just the filename you want, choose the extension you wish to save the image as using the dropdown menu. You will see a text area with parameters in it, do not alter these in any way, unless you know the correct parameters you wish to use for cropping. Click the "Modify Image" button.

Once you click the "Modify image" button, you will get a popup asking you if you're sure you want to do this. Click "ok" and you're done.

Now you will be back in the directory listing, and the image you modified or created will be highlighted in pink.


Decorating an Image

This feature allows you to put a "frame" around an image. You can use hex numbers (ie., 000000 for black, FFFFFF for white, etc.) There are 3 options to choose from for the "frame". One is "frame" which will put a 3D frame around the image. "Border" will put a flat bgcolor frame around the image. "Raise" will buttonize your image.

You can choose the size of the "frame". The default size is 15x15 but you can change that number to whatever you want, smaller or larger. Click the "Modify Image" button.

Once you click the "Modify image" button, you will get a popup asking you if you're sure you want to do this. Click "ok" and you're done.

Now you will be back in the directory listing, and the image you modified or created will be highlighted in pink.


Compositing Images

This feature allows you to composite images. Until the gif compression issue is resolved, it's advisable to convert your composited image as either a .jpg or .png .. or your file size will be extremely inflated.

The composite feature is very similar to that of Image Magick, however we suggest that you do not overwrite the original images until you're sure your finished product is the way you want it.

Click HERE for the most comprehensive tutorial on the various attributes for the composite feature. I could try to rewrite the original Image Magick tutorial, but it would be an exercise in frustration. :-)

In positioning your composited image, just keep in mind that the +2+4 numbers you put in are moving the image you want to composite by the number of pixels you specify. Take note of the size of your base image and you can estimate how far in and over you want to composite your second image. The first number is how many pixels in from the left you want to place the image, and the second number is how many pixels down from the top you want to place the image. It may take a few tries to get the image the way you want it. As I already mentioned, it would be wise to keep the original images intact (don't overwrite them) until you get the composited image the way you want it.




Need HELP ??


Back to the Tutorials


Back to the Tip Zone