Hyperlinked Text
Users now have the ability to hyperlink text within a text box to allow the viewer to scroll to a destination in the same experience, jump to a new page, or external URL.
Hyperlinked text was previously achieved using hotspots which proved unintuitive and complicated for some users. We also observed some instances where text positions would render incorrectly on some browsers when trying to link text in this old method. The hyperlinks feature not only improves the usability of the Ceros Studio, but also improves the accessibility of Ceros content by allowing hyperlinked text to be identified by screen readers.
How It Works:
- In the Studio, Select the text to hyperlink
- Right-click your selection and click Create Link
- Choose your Link Type: Go to URL, Go to Page, or Scroll to Position
- Enter the URL, Select the Page, or Select Anchor
- To edit or remove the hyperlink, double click on the hyperlinked text in the text box, and select the action you would like to achieve.
Note: The style will default to the standard hyperlink format (blue underlined text). You have the ability to change the style of the text as you please.
Accessibility
With hyperlinked text, these inline links are now discoverable by screen readers and can be navigated to using accessibility keyboard navigation shortcuts.
Resize from Center
Users now have the ability to resize objects to scale from center, which will keep maintain the original center point of the object. This improvement eliminates the need to realign the scaled asset.
Previously, users only had the option to resize images from the side, where dragging an edge would alter one single side. While resizing images while holding shift will still function the same way, users will now have the ability to also resize from the center of an object.
Why
This is a small feature improvement that will make a large impact in helping designers become more efficient in the Ceros platform.
How It Works
- To Scale from the Center while keeping the aspect ratio:
- Select the object(s) you would like to resize
- On Mac: Hold option
- On PC: Hold Alt
- Drag object from the corner to resize image
Copy/Paste External Content
Studio Users can now copy and paste visual assets from an external source into Ceros using Keyboard shortcuts.
Why
We’ve made it faster and more convenient for Studio Users to add assets from another platform or location to a Ceros canvas with Copy/Paste. We are excited to add this capability to make the design process more efficient for Ceros Users.
Copy/Paste is supported with: Desktop, Browser, Photoshop*, Adobe XD, Adobe Illustrator, Invision, Sketch, Keynote, and PDF.
How It Works
- On PC: Press Ctrl + C to copy an asset and Ctrl + V to paste it.
- On Mac: Press Command + C to copy an asset and Command + V to paste it.
*Please Note: When copying assets from Photoshop, users must use a keyboard shortcut to ensure the asset is selected prior to Copy/Paste.
- On PC: Press Ctrl + A to select the asset, Ctrl + C to copy, and Ctrl + V to paste.
- On Mac: Press Command + A to select the asset, Command + C to copy, and Command + V to paste.
There are some limitations and your mileage may vary depending on the location of the external asset.
Previewer URL Change
What
The URL for Previewer has changed to a new scheme. When using the Preview, Users will now see their Preview URLs read out as “account-name.preview.ceros.com”. No functionality has changed with the Live Preview. Existing Preview URLs will simply re-direct to the new URL.
Why
Ceros is dedicated to ensuring that our customer’s content is secure and private. This is a proactive change creating a secure foundation for future improvements to our Admin permissions systems.
Blending Modes
Introducing Blending Modes to the Ceros Studio. Blending Modes change the way a blend layer reacts with a base layer beneath it.
How it works:
Blending Modes work with JPG, PNG, and GIF files. They do not currently work with SVGs and shapes and are not supported by IE11. The “Blending Mode” dropdown is in the inspector panel above the image effects and has the following options:
- Darken: Checks the luminance values in each RGB channel and selects either the blend or base color (whichever is darker) as the output color. Pixels that are darker than the blend color are unchanged, while lighter pixels are replaced.
- Multiply: Checks the color information for each RGB channel and multiplies the base color by the blend color, always resulting in a darker color.
- Color Burn: Checks the color information for each RGB channel, darkening the base color by increasing the contrast between the base and blend color.
- Lighten: Checks the color information for each RGB channel and selects either the blend or base color, whichever is lighter, as the output color. Pixels that are lighter than the blend color are unchanged, while darker pixels are replaced.
- Screen: Checks the color information for each RGB channel and multiplies the inverse of the blend and base colors, always resulting in a lighter color.
- Color Dodge: Checks the color information for each RGB channel and brightens the base color to reflect the blend color by decreasing contrast between the two.
- Overlay: Screens or multiplies the color, depending on the base color. Colors will overlay existing pixels and preserve the highlights and shadows of the image’s base color. Overlay does not replace the base color, but instead mixes the base with the blend color to reflect the lightness or darkness of the base color.
- Soft Light: Darkens or lightens the base layer’s colors, depending on the selected blend color, similar to applying a diffused spotlight on the asset.
- Hard Light: Screens or multiplies the base layer’s colors, depending on the selected blend color, similar to applying a direct spotlight on the asset.
- Difference: Checks the color information in each RGB channel and will subtract either the base color from the blend color or the blend color from the base color, depending on which color’s brightness is higher; Difference cannot result in negative values.
- Exclusion: Similar to Difference mode, but with a lower contrast. Lighter blending inverts the base color values whereas darker blending produces no change.
Pen Tool
Draw your own shapes! Give them colors and shadows! Make a gradient-colored cat entirely within Ceros! You are now able to draw your own custom shapes using the new pen tool and are not limited to the four shapes and lines that Ceros offers today.
The Pen Tool now takes the place of the Line Tool in the toolbar, and the Line Tool is now located in the Shape Toolbar dropdown.
Creating and editing the control points of a custom shape behaves exactly the same as creating and editing the control points of a custom hotspot does today.
When a custom shape's path is closed, the designer can set the following properties on it and see them reflected on the canvas and in Preview mode:
- Color/Gradient
- Stroke
- Opacity
- Shadow
Custom shapes otherwise support all properties that other shapes do and creators have the ability to apply interactions and animations on custom shapes.