Group & Organize

Group and organize images

By grouping individual images together, you can speed up and simplify your workflow. Grouped images can be moved, adjusted, styled, and duplicated as a single unit.

As you add and group objects, your page will become an intricate mosaic of images, stencils and icons. To refine and edit your design effectively, you’ll need to identify and locate both individual objects, and objects nested deep within larger groups.

You can do that quickly and easily, right on the page. But, as your project becomes more complex, you’ll probably want to use the Outline Panel.

The Outline Panel helps you manage your page – and streamline your workflow – by keeping all your objects organized within a single, searchable list.

In this article, you’ll learn how to group, lock, arrange, and align images on the page. We’ll also show you how to navigate and use the Outline Panel to rename, search, reorganize, lock, toggle visibility, and delete objects.

Group and Ungroup Images

When objects are grouped, they can be moved, adjusted, styled, and duplicated as a single unit. Grouping works for all objects: images, stencils, icons and templates.

To group or ungroup objects, use the Group button located in the Contextual Toolbar.

To group objects:

1. Select objects:
   • Mouse drag over multiple objects
     or
   • Use Ctrl/Cmd to select objects one at a time
2. Group objects:
   • Navigate to the Contextual Toolbar and click the Group button
     or
   • Right-click on one of the objects and choose Group Selection

To ungroup objects:

• Select the group of objects that you want to ungroup
  
• Navigate to the Contextual Toolbar and click the Ungroup button
  
                                                 or
• Right-click on one of the objects and choose Ungroup Selection

Edit Groups of Images

Once objects are grouped, you can move, format and style them as a single element. But, you might still want to edit an individual element separately from its group.

To access a single object within a group, double-click on that object. Now, you can format, style or delete that individual element.

Enter Group on Click

To quickly select an object nested anywhere within a group, hold down Cmd/Ctrl and click on that object.

If you want to enable access to elements within a particular group, you can also use the Enter group on click option. 

When you click on a group, you’ll see the Enter group on click checkbox in the Format Panel, right underneath the group’s coordinates. Enabling this option will allow you to select any element of the group with a single click.

To make the Enter group on click option visible again, or to turn it off:

Lock and Unlock Images

Once an object is locked, it is fixed in place – and can no longer be moved or styled. This allows you to continue editing the rest of the objects on the page without disturbing the completed parts of your design.

In order to work with a locked object, you must first click on it intentionally. To prevent the accidental selection of locked objects, they do not respond to selection by mouse-drag.

To lock an image:

When locked, the image will display a red frame on hover and, once the image is selected, a lock button will show in the upper-left corner of the red frame. That button can be used to unlock the image.

To unlock an image:

To lock or unlock a selection of images:

To unlock all objects when there’s a mix of locked and unlocked objects on the page:

1. Use Ctrl/Cmd + A to select all unlocked objects on the page
2. Use Ctrl/Cmd  + L to lock all the objects
3. Use Ctrl/Cmd + L once more to unlock all the objects

Arrange and Align Images

The Arrange Dropdown in the Top Toolbar allows you to overlay, align and distribute objects to create a clean and balanced design.

Arranging Objects

Aligning Objects

Using the Outline Panel

The Outline Panel keeps all your objects organized within a single, searchable list.

Browse objects and their hierarchies in the Outline Tree, or use the search input to quickly locate a specific object. The Outline icons in front of object names make it easy to distinguish between stencil types.

Use the Outline Tree to rename, search, reorganize, lock, toggle visibility and delete objects.

To open the Outline Panel:

1. Navigate to the Left Sidebar
2. Click on the Outline Tab. The tab will turn blue and open the Outline Panel

To select an object in the Outline Panel:

• Click on its name. If you select a Group, click on the Left Arrow icon to quickly view the Group’s content and hierarchy.

To rename an object or group of objects in the Outline Panel:

1. The Outline Panel lists all objects on the page: Images, Stencils, Icons and Templates
2. Hover over an item in the Outline Tree and, on the page, a blue border will simultaneously highlight the corresponding object
3. After you’ve located the object, double click on its name to change it

To search for an object in the Outline Panel:

1. Select the Search Input at the top of the Outline Panel
2. Type in the name of the item you wish to find

To reorder an object or group of objects in the Outline Panel:

1. Select the object you want to move
2. Drag and drop that object either up or down in the Outline Tree
3. Note that moving an object higher or lower within a group hierarchy, or up and down the Outline Tree, will affect its layering-arrangement on the page as well

To delete an object or group of objects from the Outline Panel:

1. Select the object you want to delete
2. Use the Delete key to remove that object

To hide an object, just toggle the object’s visibility by clicking the Visibility Eye icon to the right of the object’s name in the Outline Tree.