PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • Overview
  • General features
  • Ribbon features
  • General operations: opening, saving...
  • Zoom
  • Tools
  • Selection
  • Transformation
  • Effects and settings
  • Layers
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Image editor: Features
Overview
The image editor proposes several features. These features can be accessed via the specific editor ribbon ("Image" pane).
Ribbon of image editor
This page presents the available features.
General features

Ribbon features

The options found in the "General" group of "Image" ribbon are used to handle the image currently displayed in the editor:
General group
You can:
  • Resize the image: In the window that is displayed, specify the new size or the percentage of enlargement/reduction.
    Resizing

    Notes:
    • The resizing is performed for the current layer. If you select the "Entire image" layer, the resizing will be performed for all layers.
    • A click on the string is used to perform a non-proportional resizing.
  • Enlarge the workspace: In the window that is displayed, specify:
    Enlarging
    • The new size of workspace.
    • The mode for enlarging the image.
  • Clip the image: This option changes the mouse cursor into a specific tool, used to select the area to store. The image is automatically clipped.
  • Rotation: Used to perform a rotation of current layer (preset or custom rotation).
    Rotation
  • Symmetry: Used to perform a symmetry of current layer (horizontal and/or vertical).
    Symmetry

General operations: opening, saving...

The image editor also proposes all standard features:
  • via the quick access buttons (open, save, etc.).
  • via the "Home" pane of ribbon (open, save, save as, close, etc.).
Versions 23 and later
To print the image displayed in the editor:
  1. Use:
    • the Print button found in the "Home" pane.
    • the Ctrl P shortcut.
  2. Specify the print characteristics in the window that is displayed and validate.
New in version 23
To print the image displayed in the editor:
  1. Use:
    • the Print button found in the "Home" pane.
    • the Ctrl P shortcut.
  2. Specify the print characteristics in the window that is displayed and validate.
To print the image displayed in the editor:
  1. Use:
    • the Print button found in the "Home" pane.
    • the Ctrl P shortcut.
  2. Specify the print characteristics in the window that is displayed and validate.
Zoom
You have the ability to perform a zoom on the image via the zoom options:
  1. On the "Image" pane, in the "Zoom" group, click "Zoom".
  2. Select the requested option:
    Zoom options
It is also possible to press Ctrl++ to zoom in and Ctrl-- to zoom out.
The "Images" pane can also be used to perform a zoom via the setting slider.
Images pane
Tools
The image editor proposes several tools for handling the image.
Tools
  • Pen: Used to draw a continuous curve on the current layer. The drawing starts as soon as the left mouse button is pressed then it follows the mouse movement. The thickness and the color can be defined in the settings of "Images" pane, "Colors" section.
  • Line: Used to draw a line with the mouse on the current layer. The start point is defined by the left click. The line follows the mouse movement. The end point is defined by releasing the left mouse button. The line thickness and color can be defined in the settings of the "Images" pane, "Colors" section.
    Note: to get a perfectly horizontal or vertical line, press Shift while drawing the line.
  • Eraser: Used to erase an image section on the current layer. The eraser thickness is defined in the settings of "Images" pane, "Colors" section.
  • Text: Used to define a text area on the image. The text area is defined by the left mouse click. The text font, size, alignment, color and attributes can be defined in the menu bar found above the text area.
    Text attributes
  • Fill: Used to fill an area of current layer. This area can be the entire layer, an area defined by a selection, ... The fill color can be defined in the settings of "Images" pane, "Colors" section.
  • Versions 24 and later
    Ellipse: Used to draw an ellipse on the current layer. With a click, you can define the starting point of the area in which the ellipse will be drawn. The ellipse will be drawn as you move the mouse. The end point is defined by releasing the left mouse button. The line thickness and color, as well as the background color can be defined in the "Images" pane, "Color and line" section.
    Note: to obtain a perfect circle, press Shift while drawing an ellipse.
    New in version 24
    Ellipse: Used to draw an ellipse on the current layer. With a click, you can define the starting point of the area in which the ellipse will be drawn. The ellipse will be drawn as you move the mouse. The end point is defined by releasing the left mouse button. The line thickness and color, as well as the background color can be defined in the "Images" pane, "Color and line" section.
    Note: to obtain a perfect circle, press Shift while drawing an ellipse.
    Ellipse: Used to draw an ellipse on the current layer. With a click, you can define the starting point of the area in which the ellipse will be drawn. The ellipse will be drawn as you move the mouse. The end point is defined by releasing the left mouse button. The line thickness and color, as well as the background color can be defined in the "Images" pane, "Color and line" section.
    Note: to obtain a perfect circle, press Shift while drawing an ellipse.
  • Versions 24 and later
    Rectangle: Used to draw a rectangle on the current layer. With a click, you can define the starting point of the rectangle. The rectangle will be drawn as you move the mouse. The end point is defined by releasing the left mouse button. The line thickness and color, as well as the background color can be defined in the "Images" pane, "Color and line" section.
    Note: to obtain a perfect square, press Shift while drawing a rectangle.
    New in version 24
    Rectangle: Used to draw a rectangle on the current layer. With a click, you can define the starting point of the rectangle. The rectangle will be drawn as you move the mouse. The end point is defined by releasing the left mouse button. The line thickness and color, as well as the background color can be defined in the "Images" pane, "Color and line" section.
    Note: to obtain a perfect square, press Shift while drawing a rectangle.
    Rectangle: Used to draw a rectangle on the current layer. With a click, you can define the starting point of the rectangle. The rectangle will be drawn as you move the mouse. The end point is defined by releasing the left mouse button. The line thickness and color, as well as the background color can be defined in the "Images" pane, "Color and line" section.
    Note: to obtain a perfect square, press Shift while drawing a rectangle.
  • Versions 24 and later
    Arrow: Used to draw an arrow with the mouse on the current layer. The start point is defined by the left click. The line follows the mouse movement. The end point (arrowhead) is defined by releasing the mouse button. The line thickness and color and the characteristics of the arrow can be defined in the "Images" pane, "Colors" section.
    Note: to get a perfectly horizontal or vertical arrow, press Shift while drawing the arrow.
    New in version 24
    Arrow: Used to draw an arrow with the mouse on the current layer. The start point is defined by the left click. The line follows the mouse movement. The end point (arrowhead) is defined by releasing the mouse button. The line thickness and color and the characteristics of the arrow can be defined in the "Images" pane, "Colors" section.
    Note: to get a perfectly horizontal or vertical arrow, press Shift while drawing the arrow.
    Arrow: Used to draw an arrow with the mouse on the current layer. The start point is defined by the left click. The line follows the mouse movement. The end point (arrowhead) is defined by releasing the mouse button. The line thickness and color and the characteristics of the arrow can be defined in the "Images" pane, "Colors" section.
    Note: to get a perfectly horizontal or vertical arrow, press Shift while drawing the arrow.
  • Move: Used to move the content of layer or selected area with the mouse. The move is performed with the mouse by keeping the left button down. Releasing the left mouse button validates the move.
Selection
The image editor proposes several tools for performing a selection:
Selection options
  • Rectangle: Used to select a rectangular area in the current layer with the mouse. The move used to represent the area is performed by keeping the left button down. Releasing the left mouse button ends the selection area. The area is represented by a rectangle in dotted line.
  • Lasso: Used to select any area in the current layer with the mouse. The start point is defined by the left mouse click. The move used to represent the area is performed by keeping the left button down. Releasing the left mouse button ends the selection area. The area is represented by a colored outline. Then, this area can be moved with the move tool.
  • Versions 23 and later
    Wand: Used to select a colored area without having to draw its outline. All you have to do is specify the tolerance for the selections performed with this tool.
    Configuring the tolerance
    A low tolerance means that the wand will select less colors while a high tolerance means that the wand will cover a wide range of colors.
    New in version 23
    Wand: Used to select a colored area without having to draw its outline. All you have to do is specify the tolerance for the selections performed with this tool.
    Configuring the tolerance
    A low tolerance means that the wand will select less colors while a high tolerance means that the wand will cover a wide range of colors.
    Wand: Used to select a colored area without having to draw its outline. All you have to do is specify the tolerance for the selections performed with this tool.
    Configuring the tolerance
    A low tolerance means that the wand will select less colors while a high tolerance means that the wand will cover a wide range of colors.
  • Versions 23 and later
    Move and resize (Ctrl T): Used to:
    • move the content of layer or selected area with the mouse. The move is performed with the mouse by keeping the left button down. Releasing the left mouse button validates the move.
    • resize the content of layer or selected area with the mouse. The resizing is performed with the mouse, by using the area handles. If the Shift key is held down during resizing, the proportions are retained.
    • perform a rotation of layer or selected area with the mouse. All you have to do is move the mouse away from the area handles to display a rotation cursor (double curved arrow). Then, keep the left mouse button down during the move in the requested rotation direction. Releasing the left mouse button validates the rotation.
    New in version 23
    Move and resize (Ctrl T): Used to:
    • move the content of layer or selected area with the mouse. The move is performed with the mouse by keeping the left button down. Releasing the left mouse button validates the move.
    • resize the content of layer or selected area with the mouse. The resizing is performed with the mouse, by using the area handles. If the Shift key is held down during resizing, the proportions are retained.
    • perform a rotation of layer or selected area with the mouse. All you have to do is move the mouse away from the area handles to display a rotation cursor (double curved arrow). Then, keep the left mouse button down during the move in the requested rotation direction. Releasing the left mouse button validates the rotation.
    Move and resize (Ctrl T): Used to:
    • move the content of layer or selected area with the mouse. The move is performed with the mouse by keeping the left button down. Releasing the left mouse button validates the move.
    • resize the content of layer or selected area with the mouse. The resizing is performed with the mouse, by using the area handles. If the Shift key is held down during resizing, the proportions are retained.
    • perform a rotation of layer or selected area with the mouse. All you have to do is move the mouse away from the area handles to display a rotation cursor (double curved arrow). Then, keep the left mouse button down during the move in the requested rotation direction. Releasing the left mouse button validates the rotation.
Transformation
The image editor allows you to perform several transformations on the current image:
Transformation
  • Icon: Used to change the current image into icon. The different icon formats proposed by default are displayed on the left of editor. You have the ability to add specific formats ("+" button), to delete useless formats, to regenerate the icons by modifying the size of source image.
  • Versions 23 and later
    Multi DPI: Used to create a set of images corresponding to the different DPIs . The different DPIs proposed by default are displayed on the left of editor. You have the ability to add specific DPIs ("+" button), to delete useless DPIs, to regenerate the images by modifying the size of source image. The option "Export DPI" present in the ribbon allows to generate the corresponding files. The name of these images is formatted as follows:
    omImage@dpi99x.Extension
    Where 99x corresponds to the multiplier coefficient in relation to the editor DPI.
    The editor operates in 160 DPI. For example, for a "Logo.png" image, the set of images will be:
    • "Logo@dpi1x.png" for the 160 DPI.
    • "Logo@dpi1_5x.png" for the 240 DPI.
    • "Logo@dpi2x.png" for the 320 DPI.
    • "Logo@dpi3x.png" for the 480 DPI.
    • "Logo@dpi4x.png" for the 640 DPI.
    New in version 23
    Multi DPI: Used to create a set of images corresponding to the different DPIs . The different DPIs proposed by default are displayed on the left of editor. You have the ability to add specific DPIs ("+" button), to delete useless DPIs, to regenerate the images by modifying the size of source image. The option "Export DPI" present in the ribbon allows to generate the corresponding files. The name of these images is formatted as follows:
    omImage@dpi99x.Extension
    Where 99x corresponds to the multiplier coefficient in relation to the editor DPI.
    The editor operates in 160 DPI. For example, for a "Logo.png" image, the set of images will be:
    • "Logo@dpi1x.png" for the 160 DPI.
    • "Logo@dpi1_5x.png" for the 240 DPI.
    • "Logo@dpi2x.png" for the 320 DPI.
    • "Logo@dpi3x.png" for the 480 DPI.
    • "Logo@dpi4x.png" for the 640 DPI.
    Multi DPI: Used to create a set of images corresponding to the different DPIs . The different DPIs proposed by default are displayed on the left of editor. You have the ability to add specific DPIs ("+" button), to delete useless DPIs, to regenerate the images by modifying the size of source image. The option "Export DPI" present in the ribbon allows to generate the corresponding files. The name of these images is formatted as follows:
    omImage@dpi99x.Extension
    Where 99x corresponds to the multiplier coefficient in relation to the editor DPI.
    The editor operates in 160 DPI. For example, for a "Logo.png" image, the set of images will be:
    • "Logo@dpi1x.png" for the 160 DPI.
    • "Logo@dpi1_5x.png" for the 240 DPI.
    • "Logo@dpi2x.png" for the 320 DPI.
    • "Logo@dpi3x.png" for the 480 DPI.
    • "Logo@dpi4x.png" for the 640 DPI.
  • Border: Used to add a border around the image. You can:
    • use a preset border: simple black, round (Android), etc.
    • customize a preset border.
    • use a custom border.
  • 5 states: Used to automatically generate (or regenerate) a 5-state image from a simple image. The image size is multiplied by 5 in width. The 5 states correspond to: Normal, Pressed, Grayed, Selected and Rollover.
Effects and settings
The image editor allows you to perform several settings on the current image via the options found in the "Effects and settings" group:
Effects and settings
  • Contrast: Allows you to define the contrast and lightness of image. The contrast is included between -100 and +100. The lightness is included between -255 and +255. These settings can be viewed in real time on the image ("Preview on image" option).Contrast Lightness: Allows you to define the contrast and lightness of image. The contrast is included between -100 and +100. The lightness is included between -255 and +255. These settings can be viewed in real time on the image ("Preview on image" option).
  • Transparent color: Used to select the color that will become transparent in the image. This setting can be viewed in real time on the image ("Preview on image" option). The pipette is used to directly select a color in your image.
  • HSL settings: Used to modify the Hue, Saturation and Lightness options of image. The hue is included between -180 and +180. The saturation is included between -100 and +100. The lightness is included between -255 and +255. These settings can be viewed in real time on the image ("Preview on image" option).
  • Transforming colors: Used to replace a color by another one in the image. This setting can be viewed in real time on the image ("Preview on image" option).
  • Shadow: Used to apply a shadow effect on the image elements in relation to the image background. The shadow effects are increased whenever a click is performed on the "Shadow" option. The source of light used to generate the shadow comes from the top left corner.
  • Halo: Used to define a shadow around the image elements (equivalent to a shadow on all sides). You can define the thickness of the halo. This setting can be viewed in real time on the image ("Preview on image" option).
  • Black and white: Used to convert the image in color into black and white (grayscale).
Layers
The image editor allows you to manage layers, which means different levels on the image.
These layers can be managed:
  • via the ribbon.
  • via the "Images" pane.
In the ribbon, the options are as follows:
Layers
  • New layer: Used to create a layer on the image. This layer can be created:
    • blank,
    • from an image loaded from a directory,
    • from an image loaded from an image catalog.
    The created layer can be handled in the "Images" pane, "Layers" section.
  • Duplicate: Duplicates the layers selected in the "Images" pane, "Layers" section.
  • Flatten: Merges all the selected layers. It is possible to select a list of layers to merge by using the multiselection in the list of layers. If one of the selected layers is not visible (grayed eye symbol), an error message is displayed, indicating that the non-visible layers cannot be merged.
The following operations can be performed in the "Layers" section of "Images" pane:
Layers
  • Make a layer visible or invisible ( Visible ),
  • Add a new layer ( New ),
  • Delete the selected layer ( Delete ),
  • Duplicate the selected layer ( Duplicate ),
  • Move the selected layer ( Move ),
  • Flatten the image ( Flatten ).
Each layer includes a popup menu allowing you to handle it (duplicate, merge, move, etc.).
Versions 24 and later
Note: Ctrl + click allows you to select the most appropriate layer, i.e. the layer that has image content under the mouse cursor.
New in version 24
Note: Ctrl + click allows you to select the most appropriate layer, i.e. the layer that has image content under the mouse cursor.
Note: Ctrl + click allows you to select the most appropriate layer, i.e. the layer that has image content under the mouse cursor.
The option "Visible/Invisible by programming" allows you to handle the layer by programming: This allows you to display the image in an Image control while specifying the layer to be made visible or invisible (ImageLayerVisible).
Caution: As soon as the option "Visible/Invisible by programming" is enabled for the layers, the ".wdpic" file must be handled via an WDPic variable.
This option is available from version 230042.
See also
Minimum version required
  • Version 23
This page is also available for…
Comments
Click [Add] to post a comment