When designing templates in Abyssale, you aren't just placing static elements; you are defining rules for dynamic content.
Every layer you add (Text, Image, Shape, or Button) has a defined Bounding Box, this is the blue rectangular zone you see when selecting a layer. During generation, your content will strictly inhabit this zone. It will not expand outside of it.
Alignment Properties allow you to dictate exactly where your content sits inside this box, ensuring your generated images look professional regardless of the text length or image aspect ratio.
General Alignment (Text, Buttons, Logos)
For Text, Button, and Logo layers, alignment works on a simple grid system. You can anchor your content to 9 specific points within the bounding box.
Horizontal Alignment: Left, Center, or Right. Text layers can also be justified (see Justified text below).
Vertical Alignment: Top, Middle, or Bottom.
Why is this important?
For Text: If you align text to the Bottom-Left, it will grow upwards and to the right as you add more sentences, keeping the bottom-left corner fixed.
For Buttons: Anchoring a button to the Right ensures it stays flush against the margin, even if the button text changes from "Buy Now" (short) to "Subscribe for Updates" (long).
Justified text
On Text layers, you can also justify your text. Justified text stretches every line to the full width of the bounding box, except the last line of each paragraph. This gives long paragraphs clean edges on both the left and the right, like a printed column.
Because the last line of a paragraph is not stretched, you choose where it sits. Abyssale offers three options:
Justify, last line left: the last line of each paragraph is aligned to the left.
Justify, last line centered: the last line of each paragraph is centered.
Justify, last line right: the last line of each paragraph is aligned to the right.
How to justify a text layer
Select your Text layer on the canvas.
In the right-hand panel, open the Styles section and find Text alignment.
Click the fourth icon (Justify) to open its dropdown.
Choose Justify, last line left, Justify, last line centered, or Justify, last line right.
Note: Justify works best on text that wraps over several lines. A single short line is also the last line of its paragraph, so it keeps the position you chose for the last line.
Using the API? Set text_align to justify-left, justify-center, or justify-right on a text layer. These values are accepted in design import and in the alignment override at generation.
Image Alignment & Fitting
Images require a bit more control because the photo you send might not match the shape of your bounding box (e.g., putting a square photo into a rectangular banner).
Contain (Default): The image scales to show the full picture within the box. No cropping occurs, but empty space (transparent or background color) may appear on the sides.
Cover: The image scales up to fill the entire bounding box. No empty space remains, but some parts of the image may be cropped out.
Advanced Image Controls: Zoom & Offset
When using the Cover mode, the automatic centering might not always highlight the most important part of your photo.
Abyssale provides advanced Image Alignment tools that allow you to manually override the default positioning. This is perfect for fine-tuning how specific images appear in your design.
How to manually position an image:
There are two ways to adjust the position of an image inside its bounding box when in "Cover" mode:
Method 1: Using the Properties Panel Select your image layer and use the sliders in the Image Alignment section on the right panel:
Zoom (%): Increase this value to zoom in closer on a detail. (100% is the minimum to cover the box).
Offset X (%): Slide left or right to move the image horizontally within the frame.
Offset Y (%): Slide up or down to move the image vertically within the frame.
Method 2: Direct Canvas Interaction (Double-Click) For a more hands-on approach, you can manipulate the image directly on the design canvas.
Double-click the image layer on the canvas.
You will enter "manual positioning mode," indicated by a toast message at the top right and a blue outline around the actual image itself.
Simply click and drag the image to reposition it perfectly within its Red bounding box. This achieves the same result as using the Offset X/Y sliders.
Click anywhere outside the image to exit this mode.
