Skip to main content

Slices

 

Slices

Slices define rectangular areas on top of our document. We can export such document with a single click, and each slice becomes a separate image file, such as PNG or JPG.

Multiple slices (rectangles) can be present in a document. With at least one slice, Photopea will display slices on top of the document (just like guides or the grid are displayed). We can hide them by pressing View - Slices.

Photopea automatically adds auto slices (displayed in grey), to make sure each part of the document belongs to exactly one slice. Auto slices are updated while we create or move our own slices (displayed in blue).

Here is a document with two slices (labeled as 3 and 4). Three auto slices were added by Photopea.

Slice Tool

New slices can be added with a Slice tool. Simply press the mouse at any point in the document, drag the mouse, and release it, to draw a rectangle. The mouse is usually snapped to document boundaries, guides, grid, or to other slices, depending on the current settings.

Slice Select Tool

Slice Select Tool allows us select a slice by clicking on it (or select multiple by holding Shift). Then, we can move selected slices with a mouse or cursor keys, or delete them with a Delete key.

Selected slices have little squares on their corners and edges. We can click them to resize slices. The mouse also snaps to guides or other slices while resizing.

Export Slices

When there is at least one slice in a document, and we try to expor it as PNG, JPG or GIF (File - Export As - PNG ...), Photopea will export a ZIP archive. The archive contains an image for each slice in the document. It also contains a HTML file, which can be used as a website for our project.

Comments

Post a Comment

Please do not post irrelevant comments on the forum

Popular posts from this blog

Introduction To Photopea

  Introduction Photopea is an advanced image editor, which can work with both raster and vector graphics. You can use it for simple tasks, such as resizing images, as well as complex tasks, such as designing webpages, creating illustrations, processing photographs and more. This website will teach you how to use Photopea  step by step . We will start with basic tasks and gradually progress to more complex features. The chapters (on the left) have been organized, such that each chapter uses only the knowledge from previous chapters, so you can learn effectively and efficiently. Colors Right now, Photopea works with the sRGB color space (the basic color space for the web), with the 8-bit color depth. All exported files use sRGB, too. Starting and using Photopea Photopea editor works in a web browser. It can be started by going to  www.Photopea.com . Photopea can run on any device (desktop, laptop, tablet, phone or any other computer), but for the best comfort, we recommend having a big s
16 comments
Read more

Guides, Grid and Snapping

  Guides, Grid and Snapping Precise position of image elements can be very important. The basic tool, which can help us align image elements, are  rulers . Rulers can be enabled in View - Rulers. But there are several other ways how to align elements precisely. Guides There can be multiple guides in a PSD document. A guide is a horizontal or a vertical line, which is displayed over the document and can help you align elements. To add or delete a guide, select the Move tool and enable rulers. To add a guide, click on the ruler and drag the mouse into the document. To delete a guide, click on it and drag it onto the ruler. To move existing guides, click on them with a Move tool and drag them to a new location. Grid Designers often need to place some elements regularly, with an equal distance between them. Instead of adding many guides with the same spaces between them, we can use the  grid . A regular grid will be displayed over your document, which can help you align other elements. Pix
Post a Comment
Read more

Text

  Text P utting text into images is an essential operation of image editing. Photopea offers a rich set of tools for working with text. Text is stored in PSD documents inside   Type Layers , which have a thumbnail with a capital letter T on it. There are three kinds of Type layers: Point text  - defined by the point of origin. The text starts at that point and continues on a single line until the line break (Enter). Paragraph text  - defined by the rectangle. Paragraphs are broken automatically into multiple lines to fill the rectangle. Text on a curve  - defined by a curve, letters are arranged along the curve. Creating a Type layer The  Type tool  is used for working with Type layers:  . To create a  Point text , choose a Type tool and click (press and release) the mouse at some place, which will become the origin. To create a  Paragraph text , press the mouse and drag it to draw a rectangle, then release the mouse. After creating the new Type layer, you can start typing. If you clic
Post a Comment
Read more