diff --git a/docs/images.md b/docs/images.md index ede9ed86e..12ad08e63 100644 --- a/docs/images.md +++ b/docs/images.md @@ -6,7 +6,7 @@ comments: false # Hero section title: Images -description: Learn how to work with images in Lunacy +description: Optimize your work with images in Lunacy icon: 'full-image' # Micro navigation @@ -22,163 +22,173 @@ page_nav: url: '/libraries' --- +This section covers how to work with raster images. -This chapter details how to work with raster images. Lunacy supports all the popular image formats like PNG, JPG, JPEG, WEBP, BMP, ICO, GIF, SVG. The TIFF format is not supported. +Lunacy supports these image formats: `PNG`, `JPG`, `JPEG`, `WEBP`, `BMP`, `ICO`, `GIF`, `SVG`. The `TIFF` format is not supported. -## Adding images +## [Adding images to the canvas](#adding-images-to-the-canvas) -You can: +There are several ways to **add images to the canvas**: -* Add photos from the Lunacy library. -* Use the Image tool to add images from your computer. -* Copy image files from your desktop or the Explorer and then paste them onto the canvas. -* Drag image files from your desktop or the Explorer and then drop them onto the canvas. -* Import images from the internet. +- Using the **Image tool** to add images from your computer +- Importing images from Lunacy’s **Photos** library +- **Drag-and-dropping** images from the file explorer +- **Copying images** from your desktop or browser and paste it onto the canvas +- **Importing images** from your web browser via link -There are several ways of adding images from the internet. +### Using the Image tool -**Way 1** +To add images via the **Image tool**: -That is the most reliable method. +1. Press `M` or select the **Image tool** on the toolbar. +2. In the **Open** dialog box, choose one or multiple image files. +3. Click on the canvas to place the image to add the image in its original size or click and drag to adjust the image size before placing it on the canvas. -1. In your web browser, right-click over the image. The context menu appears. -2. On the displayed menu, click **Copy image address** or similar command. -3. Switch to Lunacy and click the Image tool. The **Open** dialog box appears. -4. Paste the image URL into the **File name** field. -5. Click **Open**. + - ![Importing images from the internet](public/images-import.png) +### The drag-and-drop method -6. Click over the area where you want to put the image (this will add the image in its original size) or click and drag to get the required size of the image. +You can always simply **drag and drop images** from your files into Lunacy. -**Way 2** + -This method works only when a web site provides direct links to images with an image extension at the end (.jpg, .png, .etc.). +Alternatively, you can right-click on an image in your file explorer or browser and select **Copy image**, then simply paste it onto the canvas. -1. In your web browser, right-click over the image. The context menu appears. -2. On the displayed menu, click **Copy image address** or similar command. -3. Switch to Lunacy and right-click over the canvas. -4. Click **Paste here** on the context menu. The **Paste as image** dialog box appears. -5. Click **OK** to paste the image. If you click **Cancel**, Lunacy will paste the image address as text. +### The Photos library -**Way 3** +To use **images from the Lunacy Photos library**: -When using this method you should understand that you are importing an image displayed in your web browser rather than the original file, so the quality of such an image will be lower. +1. Open the **Photos** tab in the left panel. +2. Choose an image, then **drag and drop** it onto the canvas. -1. In your web browser, right-click over the image. The context menu appears. -2. On the displayed menu, click **Copy image** or similar command. -3. Switch to Lunacy and right-click over the canvas. -4. Click **Paste here** on the context menu. + -The demo below shows methods 2 and 3. +
+

Tip: Use low-res photos, PNG icons, and illustrations for free as long as you include a link to icons8.com in your final work.

To access high-res photos and editable SVGs without mandatory attribution use our graphics without mandatory attribution, consider our graphics subscription. By subscribing, you'll be supporting our artists and contributing to Lunacy's further development.

+
- +### Importing images from the browser +There are two ways to **import an image from your browser** via link: -## Replacing images +**Method 1.** Right-click the image in your web browser and select **Copy image address** from the context menu. Switch to Lunacy, press `M` for the **Image tool**, then paste the image URL in the file name input field. Finally, click **Open**. -There are two ways to replace images. +OR -**Way 1** +**Method 2.** Right-click the image in your web browser and select **Copy image address** from the context menu. Switch to Lunacy, right click over the canvas, and select **Paste here** from the context menu. Click **OK** in the Paste as image dialog box. If you click **Cancel**, Lunacy will paste the text of the image address. -1. Select an image on the canvas. -2. In the **Image** section of the Inspector, click the **Replace image** button. The **Open** dialog box appears. +
+

Note: This method works only when a web site provides direct links to images with an image extension at the end (.jpg, .png, etc.)

+
- ![Replacing images](public/images-replace.png) +### Using image fills -3. Browse to the new image file, select it and click **Open**. +You can also **add images directly to your layers** (including shapes, frames, and text layers). They will act as a layer background you can replace or modify anytime. -
-

Tip: You can also use this method, when you need to replace your current image with an image from the internet. In such a case, just paste the URL of the new image into the File name field of the Open dialog box and click Open.

-

For more tips and tricks, click here.

-
+To **add an Image fill**: + +1. Make sure your layer has a fill. If it doesn’t, click `+` next to the **Fill** section of the right panel with a layer selected. +2. Click on the color swatch in the **Fill** section to open up the color picker. +3. In the top bar of the color picker, click . +4. Select an image from on your computer and click **Open**. + + +Use the drop-down list below the **Choose image** button to select the fill method: - +The first is to select an image and click the **Replace image** button in the **Image** section in the right panel. This only works for images [added directly to the canvas](#adding-images-to-the-canvas). -**Way 2** + -1. Drag an image from the library, desktop or Explorer and hover it somewhere near the center of the current image. -2. Wait a moment until the green mask appears, then release the mouse button. +To **replace an image fill**, select the layer with the fill, click the swatch in the **Fill** section, then **Choose image**.
-

Tip: If the green mask does not appear, try to zoom in a bit.

-

For more tips and tricks, click here.

+

Tip: You can also use these methods when you need to replace your current image with an image from the internet. Just paste the URL of the new image into the File name field of the Open dialog box and click Open.

- + - +Read the full list of Lunacy’s tips and tricks. +## Editing images -## Cropping images +### Cropping images -To crop an image: +To **crop an image**: 1. Select the image. -2. Press `Enter` or click ![Image crop button](public/images-cropbtn.png) on the context toolbar to enable the edit mode. -3. Drag the borders of the frame to select the required area. -4. Press `Enter` or click the **Apply editing** button in the Inspector. +2. Press `Enter` or click on the context toolbar to enable **Edit mode**. +3. Crop the image, then press `Enter` again or click the Apply editing button in the right panel. - + +### Image upscaler -## Cutting out a part of an image +Whenever you need to enhance the resolution and quality of an image, use the AI-powered Icons8 Image Upscaler built into Lunacy. -To cut out a part of an image: + -1. Select the image. -2. Press `Enter` to enable the edit mode. -3. Click one of the selection tools that will show up below the image: +When you add an image to your document, the **Upscale image** prompt appears above it. Click it and wait a few seconds as the Upscaler enhances the image. - * ![Scissors tool](public/images-scissorstool.png) - **Scissors**. When using the scissors tool, you can change the shape of the selection border (rectangle, ellipse, triangle, etc.) For this, with the scissors enabled, click the required shape tool on the toolbar (see the figure below). + - ![Scissors tool](public/images-scissorsdemo.png) +
+

Note: The feature only is available to users with any paid subscription to Icons8 graphic assets.

+
- * ![Freehand lasso tool](public/images-lassofreehand.png) - **Freeform Lasso**. Enables you to make freeform selections. Works similarly to the Pencil tool. To close the selection border, just release the mouse button. - * ![Polygonal lasso tool](public/images-lassopolygon.png) - **Polygon Lasso**. Enables you to make straight-edged selections. Works similarly to the Pen tool. To disable snapping while drawing a selection border, hold down `Ctrl`. +### Background remover -4. Select the area you want to cut out. -5. Press `Delete` or move the selection to where you want it. In the latter case, Lunacy creates a vector shape with an image fill that corresponds to your selection. Also, Lunacy automatically fills the emptied area with the color prevailing along the selection border. +
+

Note: The background remover only works with pictures that feature humans.

+
-![Freehand lasso tool](public/images-cutoutresult.png) +To **remove a background** from an image: -## Adjusting image colors +1. Select the image. +2. In the right panel, click **Remove background**. -You can make color adjustments to your images using the controls in the **Adjust image** section of the Inspector. The section appears only when an image is selected. Just click the `+` button to unfold the panel and move the sliders to adjust hue, saturation, brightness, and contrast. + -These adjustments are non-destructive. You can discard all changes and restore the original image by clicking the **Reset values** (![Reset values button](public/resetvaluesicon.png)) button next to the section header (see the demo below). +### Cutting out a part of an image - +You can cut out part of an image so it becomes a new image layer that you can adjust as you like. -Also, you can adjust color settings of several images at the same time. +To **cut out a part of an image**: -## Background removal +1. Select the image. +2. Press `Enter` to enable **Edit mode**. +3. Choose one of the selection tools that show up below the image: + - **Scissors**. With scissors, you can make a selection with any shape (rectangle, ellipse, triangle, etc.) by selecting the shape on the toolbar or pressing the corresponding shape shortcut. + - **Freeform lasso**. With the freeform lasso, draw freehand selections on parts of the image, just like with the Pencil tool. To close the selection border, just release the mouse button. + - **Polygon lasso**. Use the polygonal lasso to make selections using paths, similar to using the Pen tool. To disable snapping while drawing the selection, hold down `Ctrl` / `⌘`. +4. Once you have an area selected: + - Press `Delete` to remove it completely. + - Move the selection to where you want it to be. In this case, Lunacy creates a vector shape with an image fill that corresponds to your selection and automatically fills the emptied area with the color that’s prevalent along the selection border. -**Note:** This feature works fine only with images that feature humans. + -To remove background from an image: -1. Select the image. -2. In the inspector, click the **Remove background** button. +### Image adjustment - +Change the hue, saturation, contrast, and other properties of your images. -## Image upscaler +To do this: -Lunacy is integrated with the Icons8 Image Upscaler. When you add an image to your document, Lunacy will offer you to enhance the image using our state-of-the-art AI. +1. Select one or several image layers. +2. Click `+` next to **Image adjust** in the right panel. -![Lunacy Image upscaler by Icons8](/public/rn-upscaler.png) + + +These adjustments are all reversible. You can discard all changes and restore the original image by clicking the Reset values () button next to the section header. -
-

Note: The feature is available only to users with any paid subscription for Icons8 graphic assets.

-
diff --git a/docs/public/images_adjustments.mp4 b/docs/public/images_adjustments.mp4 new file mode 100644 index 000000000..d255830d2 Binary files /dev/null and b/docs/public/images_adjustments.mp4 differ diff --git a/docs/public/images_adjustments.png b/docs/public/images_adjustments.png new file mode 100644 index 000000000..43e5d796c Binary files /dev/null and b/docs/public/images_adjustments.png differ diff --git a/docs/public/images_background_remover.mp4 b/docs/public/images_background_remover.mp4 new file mode 100644 index 000000000..04b42e953 Binary files /dev/null and b/docs/public/images_background_remover.mp4 differ diff --git a/docs/public/images_background_remover.png b/docs/public/images_background_remover.png new file mode 100644 index 000000000..9ad88f936 Binary files /dev/null and b/docs/public/images_background_remover.png differ diff --git a/docs/public/images_crop.mp4 b/docs/public/images_crop.mp4 new file mode 100644 index 000000000..675703f2d Binary files /dev/null and b/docs/public/images_crop.mp4 differ diff --git a/docs/public/images_crop.png b/docs/public/images_crop.png new file mode 100644 index 000000000..08575b465 Binary files /dev/null and b/docs/public/images_crop.png differ diff --git a/docs/public/images_cutout_tool.mp4 b/docs/public/images_cutout_tool.mp4 new file mode 100644 index 000000000..d5a435a87 Binary files /dev/null and b/docs/public/images_cutout_tool.mp4 differ diff --git a/docs/public/images_cutout_tool.png b/docs/public/images_cutout_tool.png new file mode 100644 index 000000000..50be17022 Binary files /dev/null and b/docs/public/images_cutout_tool.png differ diff --git a/docs/public/images_drag_and_drop.mp4 b/docs/public/images_drag_and_drop.mp4 new file mode 100644 index 000000000..2c15c263d Binary files /dev/null and b/docs/public/images_drag_and_drop.mp4 differ diff --git a/docs/public/images_drag_and_drop.png b/docs/public/images_drag_and_drop.png new file mode 100644 index 000000000..a497ac693 Binary files /dev/null and b/docs/public/images_drag_and_drop.png differ diff --git a/docs/public/images_image_upscaler.mp4 b/docs/public/images_image_upscaler.mp4 new file mode 100644 index 000000000..6b48b098f Binary files /dev/null and b/docs/public/images_image_upscaler.mp4 differ diff --git a/docs/public/images_image_upscaler.png b/docs/public/images_image_upscaler.png new file mode 100644 index 000000000..90739a943 Binary files /dev/null and b/docs/public/images_image_upscaler.png differ diff --git a/docs/public/images_photo_library.mp4 b/docs/public/images_photo_library.mp4 new file mode 100644 index 000000000..87b11d157 Binary files /dev/null and b/docs/public/images_photo_library.mp4 differ diff --git a/docs/public/images_photo_library.png b/docs/public/images_photo_library.png new file mode 100644 index 000000000..0f33f0d6b Binary files /dev/null and b/docs/public/images_photo_library.png differ