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.
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).
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 (%): Slid 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.
