Main Work Area

Crop2Size's Main Work Area is shown below:

Back to Top

Loading a Stored Image into Crop2Size

Crop2Size allows you to edit stored images. The first step in a Crop2Size session requires you to load a stored image into the Image Editor.

to open an image:

1. On the menubar, click Open. The Open New Image panel opens to the right of the toolbar.
   
   

   

2. Select the location of the image file that you want to open. There are four options for specifying where the image file is located:
   • Open from web address — the image file is located in a directory on a remote web server location.
   • Open from gallery — the file is located on the server where the Crop2Size plugin is located.
   • Open from My Computer — the file is located on a local or network drive to which the computer has access.
   • Snap from Webcam — preview and capture an image from your webcam.
3. Click OK. If you selected "Open from My Computer", a Browse Files dialog box opens. Select the image you want and click Open. If you made a different selection, you will be prompted to input a web address, select an image from a gallery browser, or take a photo with your webcam.
   
   

   

4. The selected image appears in Crop2Size's Main Work Area.
   
   

   

Back to Top

Image Editing Functions

Crop2Size includes a suite of basic image-editing tools that are grouped in a menu located above the Main Work Area. The menu is shown below.

These tools activate the following functions:

• Open — Opens a digital image file from a location that you specify.
• Save — Saves the image in the location of your choice.
• Crop — Allows you to specify preset and custom image size values for displaying and saving the image.
• Center — Lets you center the image vertically or horizontally within the Work Area. For locating the image in the display area.
• Rotate — Rotates the image either 90 or 180 degrees.
• Flip — Flips the image horizontally, vertically, or both.
• Tint — Converts the image to grayscale or monochrome and lets you adjust the hue and contrast.
• Add Tint — Adds a tint to a monochrome image and lets you adjust the hue.
• Background — Specifies a color for the frame surrounding an image.
• Align to Text — (Editor-Embedded version only) specifies the alignment of the image relative to surrounding text.

Back to Top

Operating Modes

Crop2Size operates in one of two modes:

1. Move Mode — Using this mode, you can use the mouse to move the image to any position you wish within the frame of the Main Work Area, and crop and save the image according to how you have positioned it.
   
   

   When you are editing in Move Mode, Crop2Size displays a cursor in the shape of a four sided arrow with an open palm in the center.

   

   to position the image in the Main Work Area, click the image. The hand within the four sided arrow cursor changes, indicating that you can now drag the image to the position of your choice.

   

2. Free Rotate Mode — Using Free Rotate Mode, you can rotate an image around its central axis point. In Free Rotate Mode, Crop2Size displays a special Free Rotating cursor with the following shape:
   
   

   

   to rotate the image in this mode, click Free Rotate button at the bottom of the image. The hand within the four sided arrow cursor changes, indicating that you can now drag the image to the position of your choice.

   

Back to Top

Save

At any point in the image-editing process, you can save the edited image.

⇒ To save your work:

1. From the menu, choose Save. The Save Image panel opens to the right of the Work Area.
   
   

   

2. Select a target location:.
3. Editor-Embedded version only: select an "alt" text for your image, to be displayed if the viewer has images disabled. If the image does show, this text will show as a hover tool-tip. Note: for cross-browser compatibility, the same text is used for "alt" and "title" values.
4. Click OK. The Select Location for Download panel opens.
5. Assign a name to the image file.
   (Note: It is a "best practice" to assign a name other than the original filename in order to preserve both the original image file and the edited version. By default, Crop2Size assigns a name like pic1202831457.jpg or pic1202831457.gif, which you can overwrite with a name that you specify. Do not change the .jpg or .gif extension.)
6. Select a save location for the image file.
7. Click Save. Crop2Size saves the edited image to the selected location. The name assigned to the new file is the one you assigned here.

Back to Top

Undo, Redo, Reset

Crop2Size makes it easy to test and undo changes, with the Undo, Redo and Reset buttons

1. See these buttons on the lower toolbar:
   .
2. Crop2Size keeps track of your 5 last changes and the original state from when the image was first loaded. Use these buttons to go back and forth between states. Note: these have no effect on saved images; they only modify the image which is currently being edited.

Back to Top

Cropping the Image

Crop2Size allows you to crop the image loaded into the Main Work Area.

⇒ To crop an image:

1. From the menu, choose Crop. The Crop Size panel opens to the right of the Work Area.
   
   

   

2. In the Frame pull down menu, select the frame option you wish to use:
   • Adjustable Size - allows you to adjust the width and height of the image frame in pixels.
   • Presets - the developer can create preset frame sizes for the website user.
3. Maintain Aspect Ratio - when this is selected, the ratio of width to height is maintained when then either width or height are adjusted.
4. Infinite Height - if the image extends above the top of the Work Area and/or below the bottom of the Work Area, selecting Infinite Height allows the full height of the image to be preserved. When selected, this is indicated by translucent bars with arrows at the top and/or bottom of the Work Area.
   
5. When cropping, the part of the image that will be saved is shown, while the part that will be cropped away is indicated by a wire mesh.

⇒ When you are satisfied, you may save the image or make further modifications with the other tools.
⇒ You can always click Undo to rollback the last changes you made to the image, or click Reset to go back to the original state of the image.

Back to Top

Centering the Image Onscreen

Crop2Size provides two preset functions for centering the image onscreen.

Note: The preset functions described here simplify the free moving functionality that is enabled when you set Crop2Size in Move mode.

⇒ To center an image onscreen:

1. From the menu, choose Center. The Center Image panel opens to the right of the Work Area.
   
   

   

2. Click to center the image horizontally in the Work Area.
3. Click to center the image vertically in the Work Area.
4. When you are satisfied with your work, you may save the image or make further modifications with the other tools.

⇒ When you are satisfied, you may save the image or make further modifications with the other tools.
⇒ You can always click Undo to rollback the last changes you made to the image, or click Reset to go back to the original state of the image.

Back to Top

Rotating the Image

Crop2Size provides three preset functions for rotating the image onscreen.

Note: The preset functions described here simplify the free rotation functionality that is enabled when you set Crop2Size in Free Rotate mode.

⇒ To rotate an image:

1. From the menu, choose Rotate. The Rotate Image panel opens to the right of the Work Area.
   
   

   

2. Click to rotate the image 90° to the left.
3. Click to rotate the image 90° to the right.
4. Click to rotate the image 180°.
5. When you are satisfied with your work, you may save the image or make further modifications with the other tools.

⇒ When you are satisfied, you may save the image or make further modifications with the other tools.
⇒ You can always click Undo to rollback the last changes you made to the image, or click Reset to go back to the original state of the image.

Back to Top

Flipping the Image

Crop2Size provides the ability to flip the image either vertically or horizontally.

⇒ To flip an image:

1. From the menu, choose Flip. The Flip Image panel opens to the right of the Work Area.
   
   

   

⇒ When you are satisfied, you may save the image or make further modifications with the other tools.
⇒ You can always click Undo to rollback the last changes you made to the image, or click Reset to go back to the original state of the image.

Back to Top

Converting to Grayscale or Monotone

Crop2Size lets you convert images to grayscale or monotone, and adjust hue and contrast.

⇒ To convert an image:

1. From the menu, choose Tint. The Tint panel opens to the right of the Work Area.
   
   

   

2. Select the tint or grayscale radiobutton. If you select tint, the image becomes monotone. If you select grayscale, it becomes grayscale.
3. Use your mouse to move the sliders to set the Contrast value (continuous from -100 —> +100), or (in tint mode) the Hue (continuous from 1 —> 120). The adjusted image appears immediately in the Work Area.

⇒ When you are satisfied, you may save the image or make further modifications with the other tools.
⇒ You can always click Undo to rollback the last changes you made to the image, or click Reset to go back to the original state of the image.

Back to Top

Adjusting the Background Color

Crop2Size allows you to adjust the color of the background. This is the area that is not occupied by the image and that has not been cropped tight against the image border.

to adjust the color of the background:

1. From the menu, choose Background. The Background Color panel opens to the right of the Work Area.
   
   

   

2. Click the Pick color checkbox to enable the background color selection tool. Your mouse cursor becomes an eyedropper whenever it passes over the swatch selector or image.
3. Use the eyedropper-mouse to select a color for the background. The selected color appears in the Current Background Color display, along with its Pantone identifier code. In real-time, the background changes in the Work Area as well.
   
   
   
   

⇒ When you are satisfied, you may save the image or make further modifications with the other tools.
⇒ You can always click Undo to rollback the last changes you made to the image, or click Reset to go back to the original state of the image.

Back to Top

Aligning the Image in your HTML

When Crop2Size is embedded in an online HTML editor such as FCK Editor, you can also adjust image alignment and spacing relative to the surrounding text.

⇒ To adjust an image's alignment or spacing:

1. From the menu, choose Align to Text. The Align to Text panel opens to the right of the Work Area.
   
   

   

2. Click the Left/Right/Top/Middle/Bottom buttons to align your image. The default is bottom.
3. Use the keyboard or up/down arrows to adjust the image's horizontal or vertical spacing.
4. See your changes in the sample HTML window above.

⇒ When you are satisfied, you may save the image or make further modifications with the other tools.
⇒ You can always click Undo to rollback the last changes you made to the image, or click Reset to go back to the original state of the image.

Back to Top

The Help Panel

Crop2Size's Help Panel provides basic guidance, links to the Crop2Size website and the latest update of this document, and information about the current version of the program.

1. From the menu, choose Help. The Help panel opens to the right of the Work Area. In addition, the work area is covered by tips on getting started.

   

2. Selecting another menu item will hide the help tips and restore the Work Area.

Back to Top

Using the Zoom Tool

Crop2Size provides a Zoom Tool for enlarging or shrinking the online image. The Zoom tool is always visible to the bottom-left of the Work Area, beside the Move and Free Rotate buttons.

⇒ To use the Zoom tool:

1. On the toolbar lower toolbar, click the + and - buttons to enlarge or shrink the onscreen image. In real-time, the size of the image changes in the Main Work Area to reflect your changes.
   
   

   Note: You can change the size of the image incrementally, one click at time, or continuously, by clicking and holding the + or - button.

   

⇒ When you are satisfied, you may save the image or make further modifications with the other tools.
⇒ You can always click Undo to rollback the last changes you made to the image, or click Reset to go back to the original state of the image.

Back to Top