You are here:
Print

Frame Basics

In the Page Editor, frames can be added to your canvas to design your yearbook. Below you will learn what frames are and the basics on how to use them. For more uses of frames, check out the Shapes, Text & Image Frames article.

What is a Frame?

All objects on your canvas exist inside a frame. There are three types of frames:

Image: Container used to hold and manipulate photos, decorative backgrounds, or clipart.

Text: Container used to hold and manipulate any quantity of words, all styled with the same font attributes.

Shape: Container used to hold and manipulate color block elements.

Adding a Frame to a Page

Add an Image Frame to a page in one of three different ways:

  • Add image directly to page
    1. Choose an image from the left-side menu in Photos, Elements, or Backgrounds
    2. Drag and drop the image onto the page
  • Add an empty image frame
    1. Click the Image Icon on the top right canvas menu
    2. Add an image to the empty frame by dragging an image from an album on the left-side menu
    3. Drop the image on the empty frame when the frame glows red
      • The image will auto-size to the frame to expose as much of the image as possible
  • Add image to the canvas background
    1. Choose an image from the left-side menu in Backgrounds
    2. Click the image preview in the album pane
      • The image will automatically fill the background of your page

To add a Shape or Text Frame to a page:

Click the Shape or Text Icon on the top right canvas menu.

Tip: Rather than adding images directly to the page, create your own template by adding empty frames first.

Selecting

To select a single frame:

Click on the image, shape, or text you want to select. The frame will highlight, and handles will appear around its edges.


To select a multiple frames individually:

  1. Hold the Control Key (Windows) or Command Key (Mac)
  2. Click each frame with your mouse

To select all frames in an area of your canvas:

  1. Click and Hold the left mouse button
  2. Drag down across the area with the frames

Tip: A multi-selection of frames can be resized together. If the selected frames are the same type, you can apply new attributes to them all at the same time.

Grouping

Grouping enables multiple frames to be resized and repositioned proportionately.

To group multiple frames:

  1. Select multiple frames, as described above
  2. Click Group in the top canvas menu
  3. Click Group Frames

The grouped frames will now display a single set of handles.

To ungroup frames:

  1. Select the grouped frames
  2. Click Group on the top canvas menu
  3. Choose Ungroup Frames 

The frames will display their individual handle controls once again.

Moving

After selecting one or more frames, they may be moved by dragging them to a new position.

Magnetic Snap Guidelines

When moving an object on your page, Purple Guidelines will appear to help you align frames relative to other objects on your page.

These guidelines are magnetic, snapping frames together along their edges, to the safe margins, and to the page edge.

To adjust the snap guidelines:

  1. Click Settings on the left-side menu
  2. Click the Show Grid Toggle to turn on the grid (optional)
  3. Click the Snap to Grid Toggle to turn on the snap guidelines
  4. Click Spacing to fine tune the amount an item moves to snap to the grid
  5. Click the Color Chip to change the color of grid if you choose to have it visible

Nudging with Arrow Keys

To move a selection in small increments:

Tap the keyboard arrow keys in the direction you want to move the frame.

To adjust the nudge distance:

  1. Select Settings on the left-side menu
  2. Choose the preferred Measurement

Note: A larger distance increases the amount the selected frame moves when the arrow key is tapped.

Resizing

Handles on the frames are used for resizing. Image and shape frames display eight handles (four corner, four midpoint). Text frames display only two handles.

Resize frames in the following ways:

  • Click and drag a Text Frame Handle to resize the width; the height will adjust to accommodate the text within the frame 
  • Click and drag a Corner Handle of an image or shape frame to adjust the length and width simulataneously
  • Click and drag a Midpoint Handle of an image or shape frame to adjust the width or height independently

Note: The image is not being cropped itself during resizing, the frame is only changing its shape around the image.

Tip: Hold the Shift Key on the keyboard while resizing to lock the image’s proportions. This technique is ideal for clipart to avoid clipped edges.

Rotating

To rotate a frame:

  1. Select the frame
  2. Drag the Rotation Handle to pivot the frame

To rotate a frame in 15 degree increments:

  1. Select the frame
  2. Hold the Alt Key (Windows) or Option Key (Mac) 
  3. Drag the Rotation Handle to pivot the frame

Tip: Double-click the Rotation Handle to reset the frame to the original position.

Aligning

To align frames relative to each other and the canvas:

  1. Select the Frames to be aligned
  2. Click Alignment in the top canvas menu
  3. Select the desired alignment 
    • Horizontal Alignment to reposition frames relative to the canvas edge
    • Vertical Alignment to reposition frames relative to each other
    • Distribute to reposition frames equal distance from each other across the canvas

Changing Frame Order

Every frame on your page is placed in a layered order as it is added to the canvas. The last added frame will be in the front.

Note: Smaller frames can become hidden as larger frames are moved in front of them.

To move a frame forward or backward in the layered order:

  1. Select the frame
  2. Click Order on the top canvas menu
  3. Choose a desired order
    • Bring Forward to move the frame one layer at a time closer to the front
    • Bring To Front to move the frame all the way to the front
    • Send Backward to move the frame one layer at a time further to the back
    • Send To Back to move the frame all the way to the back

The Color Picker

The color picker is used by many different design elements – borders, shadows, shape fill, and text fill.

To use the color picker:

  1. Select Fill
  2. Click the Color Chip
  3. Slide the Rainbow Slider to choose a color
  4. Click the Gradient above the rainbow slider to choose a shade
  5. Slide the Opacity Slider to change the selected item from 100% opaque to 100% translucent

Beneath the sliders is a precise color code for your current selection. Use the arrows next to the code to move between HEX, RGB, and HSL color codes. RGB & HSL include an alpha channel value for the level of transparency.

Tip: For ease of use, use the HEX code to copy/paste an exact color match between items.

Want to get pure values without using the shade gradient? Use any one of these values in the appropriate color code box for these basic shades:

Studio Source Yearbooks unofficially recommends the following non-affiliated website to help you with exact color matches, useful for matching your school colors, as well as palette inspirations: Color-Hex.com

Table of Contents