OIE: Online Image Editor Version 3.0 - User Manual

General Concepts

InDis' Online Image Editor (OIE) is a special enhancement for any Content or Website Management System. The user only once downloads the special component and from that moment on he can edit images directly from within his browser.

Supported file types include gif, jpg, png, tiff and bmp. A vast number of professional image manipulation functions are built in to make it a useful tool for both novice users and for those demanding advanced functionality and sophisticated results.

Screen layout: usually the screen consists of the following parts:

Tool Bar Reference

New image - allows you to create a new image. After clicking a dialog box will appear where you can set the height and width of the image as well as choose the background color. If an image exists in your clipboard it will default to the height and width of that image.
Open image - allows you to open an existing image from your local PC.
Scan - allows you to get an image from your scanner directly to OIE.
Save image - saves the current image to your local PC. You can choose the file format which will be used to save the image. Depending on your selected file type, an options dialog box can pop up upon saving and you will be able to specify options for that specific format.
JPEG options:
  • Compression quality - allows you to set a balance between the quality and file size. The higher the quality, the bigger the file size and vice versa.
  • Color format - you can specify whether the image will be saved in full color or only the grayscale will be used.
  • Progressive encoding - images, encoded with progressive encoding can be downloaded and displayed gradually (line by line) by the browser.
GIF options:
  • Number of colors - you can specify how many colors will be used to store the image. Less colors allow for smaller image sizes, but image quality is decreased.
  • Compression - you can specify the compression method which will be used to compress the image. LZW generally performs better.
  • Dithering - sets the color approximation method, which is used when you save an image, which initially has more colors than you specify when saving. Floyd steinberg uses error diffusion and provides more natural results.
  • Save transparency information - if you tick this checkbox, areas of the image, which are more than 50% transparent will be filled with "color for transparency" (see below) and marked as transparent in the output file.
  • Color for transparency - this color will be used as the background for semi transparent and fully transparent image areas. If "Save transparency information" is checked, then this color will also become the transparent color of the ouput image.
Copy selection - allows you to specify an area on the image, which is afterwards copied to clipboard.
Paste - pastes the image, currently available on the clipboard. The image is pasted as a separate layer.
Undo - cancels the last performed operation. Number of available undo levels can be limited.
Redo - allows you to repeat the operation, which was cancelled using the "Undo" command.
Image - Rotate Left.../Rotate Right... - rotates the image or selected layer by the given number of degrees. If during rotation, empty areas appear, they are filled with the specified color.
Image - Flip/Mirror - flips or mirrors the image or selected layer.
Image - Crop - allows you to specify an area, to which the image is then cropped.
Image - Resample - allows you to smoothly resize an image. You can specify the target width and height as well as resampling filter which will be used. Different filters are better suited for different situations. Optionally a sharpening effect can be automatically applied after resampling.
Image - Resize canvas - allows to resize image working area, without scaling the image. You can specify the target width and height as well as anchoring position. If empty borders appear as a result of canvas transformations, they will be filled with the color you provide.
Color - Grayscale - converts a color image (layer) into grayscale. You can specify how many different shades of gray should be used.
Color - Brightness/Contrast - adjusts the contrast and brightness of the image (selected layer). Click "Preview" to see the preview of adjustments and perform any corrections if necessary.
Sharpen/Blur - applies sharpening or blurring effect to the image or selected layer. 3 intensities of each effect are available.
Filters: Emboss, Oil Paint, Lens flare, Sepia Tint, Watercolor, Mosaic, Patchwork and bricktexture.
Insert - Image - loads an image from your local PC and inserts it as an image layer.
Insert - Rectangle/Ellipse/Line/Arrow - inserts a specified geometric shape as a shape layer. The shape can be further customized using the "Shape properties" panel in the properties bar.
Insert - Rich Text - allows you to type in rich text, which is then inserted as text layer. It can be further customized using the "Text properties" panel in the properties bar.
Insert - Text along Path - allows you to type in rich text and place it along a path. It is then inserted as a text along path layer. It can be further customized using the "Text along Path properties" panel in the properties bar.
Brush - turns on/off the brush drawing mode. Use the "Tool properties" panel in the properties bar to specify the options for the tool. Then click the mouse and drag to paint over the background image or image layers.
Eraser - turns on/off the erasing mode. Use the "Tool properties" panel in the properties bar to specify the options for the tool. Then click the mouse and drag to erase some parts of the background image or image layers.
Red eye removal tool - helps removing red eyes from photos. A dotted rectangle will appear that can be dragged over red eyes (and ajusted in height/width). When satisfied with the selection, click on the approve button that will appear in the properties bar to remove the red eye.
Grid - enables or disables the grid. A dialog box allows you to specify, whether the grid should be shown, whether layers should be snapped to it and horizontal/vertical grid dimensions.
Help - shows these pages in a seperate browser window. You can also review your license.

Properties Bar Reference

Layer Properties - allows you to change the properties of selected layer.
  • Opacity - specifies the overall transparency of the layer. 100 means fully opaque, while 0 means fully transparent.
  • Bring forward - this layer is brought forward in the layer stack.
  • Send backwards - this layer is sent backwards in the layer stack.
  • Duplicate layer - creates an exact copy of selected layer.
  • Delete layer - deletes the selected layer. You can alternatively press "Delete" key on your keyboard.
  • Make original size - (applicable to image layers only) resets the image layer size to dimensions of the image it contains.
  • Center horizontally - centers the selected layer horizontally
  • Center vertically - centers the selected layer vertically
  • Lock layer - when locked is pressed users will not be able to change properties of that layer. Useful when creating .oie templates.
  • Align to Left - aligns the selected layer to the left
  • Align to Right - aligns the selected layer to the right
  • Align to Top - aligns the selected layer to the top
  • Align to bottom - aligns the selected layer to the bottom
Shape Properties - allows you to change the properties of selected shape layer.
  • Line color - specifies the shape's line color. You can use the color picker to pick a color from anywhere on the screen.
  • Fill color - specifies the shape's fill color. You can use the color picker to pick a color from anywhere on the screen. Select "None" for transparent fill.
  • Line width - select the appropriate line width for the shape.
  • Line style - select a desired line style for the shape.
Richt Text Properties - allows you to change the properties of selected text layer.
  • Edit text - allows you to edit the text and change its alignment as well as to change font style, size and color
  • Outline color - change the outline color, especially handy when using anti-aliased to ensure blending of the text with the image.
  • Pick color - use the color picker to pick a color from anywhere on the screen.
  • Anti-aliased - smoothens the edges of font characters. Best results are achieved when using bigger font sizes.
path Properties - allows you to change the properties of selected text along path layer.
  • Edit path - allows you to define the path along which the text should be displayed.
  • Edit text - allows you to edit the text and change its alignment as well as to change font style, size and color
  • Pick color - use the color picker to pick a color from anywhere on the screen and change the color of the text.
  • Outline color - change the outline color, especially handy when using anti-aliased to ensure blending of the text with the image.
  • Preserve X scale - preserve the x scale of the text along the path
Tool Properties - allows you to change the properties of brush or eraser.
  • Color - allows you to set the color, which is used when drawing with the brush. Use the color picker to pick a color from anywhere on the screen.
  • Shape - select the shape of the brush/eraser tip.
  • Size - specifies the size of the brush/eraser tip.