Editor Interface
In this chapter you can learn about the editor interface
Menu Bar
File:
New – Open a new empty project.
Open – Open the modal, where you can look for your previously saved projects. Just click the
thumbnail image to open that project, or click the trash icon to delete it permanently.
Save Project – You can save your work as project so you can continue later, before exporting as
image file to media library.
Save Project As – Make a copy of this project, and save as a new one. If you click this option,
you can see a small modal. Enter the name of the new project in the input field, and click the
“Save Project” button
Import From Media – Open modal, where you can search for media images.
1. First step: select an image you want to import.
2. Second step: select one of the image sizes. Turn on “Resize Canvas to Image Size” to crop
the canvas to the selected image, and turn on “Set This Image as Original” if you want to
compare your modifications with this image, or replace this media image later. These two
options are only available when the canvas is still empty.
Upload Image – Open modal to upload image file from your computer.
1. First step: click “Select File” button and search for an image.
2. Second step: when you have selected an image, you can see its preview. Turn on “Resize
Canvas to Image Size” to crop the canvas to the image, and click “Import Image” button.
Upload SVG – Open modal to upload SVG file from your computer.
1. First step: click “Select File” button and search for an SVG.
2. Second step: when you have selected an SVG, you can see its preview. Turn on “Resize
Canvas to SVG Size” to crop the canvas to the SVG, turn on “Group Layers” to add SVG
image as one layer instead of add it as a lot of separated elements, and click “Import
SVG” button.
Upload PSD – Open modal to upload PSD file from your computer.
1. First step: click “Select File” button and search for a PSD file.
2. Second step: when you have selected a PSD, you can see its preview. Turn on “Resize
Canvas to PSD Size” to crop the canvas to the PSD, and turn on “Import PSD With
Layers” option if you want to import layers.
Export Image – This option is only available, when you have an original image in the editor.
There are two ways to have an original image:
1. When you open the editor from your media library by clicking “Edit With WPRembrant”
button, or link.
2. When you import the first image using “Import From Media” option, and check “Set This
Image as Original” switch.
Export Image As – You can create a whole new media attachment, using this option. Click this
to open the modal.
File Name: Enter a file name. If you leave it blank, the file name will be “wprembrant”.
File Format: Select a file format. To keep image transparency, choose “PNG”, or choose
“JPEG” for smaller file size.
Title Of Image: Title of attachment image.
Alternative Text: For HTML “alt” attribute.
Caption: Write a caption.
Description: Write a description.
Restore Image – This option is only available if you have already edited, and replaced an original
attachment image. See above, when there is an original image in the editor.
Download Image – Open modal to export your graphic as image file, and download it to your
computer.
File Name: Enter a file name without extension. If you do not set this, the file name will
be the project name, or “wprembrant”.
File Format: Choose a file format. Select “PNG” if you want to keep alpha channel, or
select “JPEG” for smaller file size.
Download as SVG – Open modal to export your graphic as an SVG file, and download it to your
computer.
File Name: Enter a file name without extension. If you do not set this, the file name will
be the project name, or “wprembrant”.
Download as PSD – Open modal to export your graphic as a PSD file, and download it to your
computer.
File Name: Enter a file name without extension. If you do not set this, the file name will
be the project name, or “wprembrant”.
Edit:
Undo – If you have made any changes that you don’t want to do, you can restore the previous
state of your project with this option.
Redo – Just like above, but with the next state.
Clear Canvas – Remove all layers from the canvas.
View:
Full Screen Mode – You can enter full screen mode, that means hide menu bars in admin
dashboard for more comfortable work.
Show/Hide Rulers – If you don’t need rulers just click this.
Show/Hide Ruler Helpers – Ruler helpers help you snap objects to an appropriate place.
Show/Hide Grid – You can display a grid on the canvas to help you positioning items.
Turn On/Off Snap To Grid – When you turn it on, the layer will snap to the closest intersection
of the grid, when you moving that.
Set Grid Size – Open a modal, where you can set grid size.
Help:
Keyboard Shortcuts – You can learn about various keyboard shortcuts that are supported by the
editor.
Toolbar
The toolbar is located on the left side, and the tools are represented by little icons.
Select Mode – In select mode, you can select layer, and move its position, or change its scale, and
rotation.
Pencil Tool – You can draw anything using this tool.
Eraser Tool – You can erase from an image, or shape, or even a text. This is only available, if
you have selected a layer.
Flood Fill Tool – You can change color of parts of images, or even remove backgrounds with this
tool. This is only available, if you have selected a layer.
Color Picker – Pick up a color from a photo, and use it to draw, and fill anything else.
Add Text Mode – With this tool, you can create a text, and add it to the canvas.
Draw Shape Tool – The editor provides you a lot of pre-drawn shapes to make your work easier.
Just select a shape and drag the cursor on the canvas to draw that. Don’t forget: if you want to
keep the aspect ratio just press the ‘Ctrl’, or ‘CMD’ key while drawing the shape.
Draw Path Tool – You can create Bezier curves using this tool.
Draw Polyline Tool –This tool allows you to draw continuous lines.
Edit Path Tool – You can modify position of points of an existing path, or polyline. Note: to
enable this tool you must select a path or polyline type object on the canvas.
Image Filters – Open the filters list, and apply one or multiple filters to your image layer. This
tool is only available if you have selected an image layer type.
Cut Tool – Cut a rectangular, circular, or free hand drawn area from the selected layer.
Crop Tool – This tool lets you crop the entire canvas to some most common aspect ratio.
Contextmenu
The contextmenu opens when you right-click on a layer on canvas. Note that the context menu
can only be appeared, when you are in select mode.
Set Visible – You can hide the layer from canvas while you don’t delete it.
Lock Layer – You can make layer static (disable selection) to keep its position safe while
working with many other layers.
Move Up – Move layer up the stack.
Move Down – Move layer down the stack.
Duplicate Layer – Make a copy of layer, and add it to the canvas.
Delete Layer – Remove selected layer permanently.
Settings Bar
The settings bar is located on the right side.
Minimap – At the top panel you can find the minimap which helps you zooming and panning the
main canvas, or lets you see the whole image even if you zoomed the canvas to a specific place.
Project – Here you can set the canvas size, and add a name for your project to can be find easily
later.
Compare – If you have an original image in your project, you can compare your changes with it.
Layers – This panel lists the current layers of the canvas. Click the grip button to select layer. To
show/hide layer click the eye button. You can add name to layer to can be find an item easily
from many layers. Click the lock icon to lock the layer on the canvas.
Under the list you can find some additional buttons. Click up button to move layer up the stack,
click down to move layer down, you can also duplicate the selected layer here by clicking copy
icon, or remove permanently by clicking “X ” button.
Layer – Under the layers list panel you can find the settings panel of the currently selected layer.
On the first tab, you can set exact values of transformation such as position, scale, skew, or
rotate
The following tabs are depend on what type of layer is selected.
Image layers – If you select an image, or photo layer on the canvas, you can see that the next tab
is a magic icon. Click on that to apply filters to the photo. If the image has no filters applied yet,
you find an “Apply Filters” button here. Click that to open filters list at the toolbar. (You can also
open this list choosing “Image Filters” tool in the toolbar. See more above, in the Toolbar
chapter.)
If you select a filter, the filter item will appear here. Some of the filters have additional options,
while some filters cannot be modified. You can select one, but you can apply multiple filters to
an image as well.
Shape layers – if you select a simple shape, or a path you drawn with pencil tool you will see two
additional tab icons: brush, and fill.
Under the brush icon you can modify the outline, or stroke of the shape. Change the stroke
width, or color as you want.
Clicking the fill icon, you can fill the shape, just pick a color for that.
Text layers – when you select a text on the canvas you can also see the brush, and fill icons that
can be used for the same reason as detailed above. But you can see an additional tab, an ‘A’ icon.
Click that to change text attributes such as font size, line height, character spacing, font family,
text style, and text align. You can also enter, or change the text using textarea field, or by double
clicking the text layer on the canvas.
The last tab is also belongs to each layer type just like the first: transform tab. Here you can
choose blend mode, set shadow offset, blur, and color for the selected layer, or set opacity
(transparency).
Import Images From Pixabay
Pixabay is a free service with over 2 millions of royalty free stock photos you can use or modify
for any purpose.
Here you can learn about how to use Pixabay importer.
Navigate to the WPRembrant -> Pixabay, in your WordPress admin dashboard. Here you can see
the recently published images from Pixabay. You can search for specific images using image
filters located at the top. Search by keywords, type, orientation, and category.
Select an image by clicking a thumbnail. Then a modal window will appears, where you can see
the selected image in large size. Under the preview, you can find an input field. Enter a filename
there, if you want. If you don’t add filename, the default filename will be the tag list in filename
format. You can’t set extension here. The file extension will be the original. Usually, the file
extensions are JPEG, or PNG. Then click the “Save And Edit” button to redirect to editor after
downloading, or click the “Just Save” button, if you just want to save to media library, and
continue looking for other images.
Clicking the external link button at the top-right of the thumbnails, you can open the page of the
image on Pixabay.