1) Select an image or a shape for Use As Background
2) Select your Use As Background object and change its border setting to whatever you want.
Use An Image As a Background
1) Select or load the image you want to use as a background. You can do this with other objects in the frame.
2) Click Use As Background. This does several things: a) flags the image as a Use As Background object. Use As Background objects have a dashed border around the "pip" in the upper left next to the upper left corner drag handle; b) expands the image to the size of the frame; c) sends the image to the back; d) excludes the image from the layout functions Fit 1, Fit Tiled, Fit by Rows, & Fit by Columns; e) locks the image from resize or delete - you can unlock it with the Lock button.
An image tagged as a Use As Background object resizes with the frame. In all other respects, a Use As Background object can be styled just like a regular image, and acts like a regular image in regards to Frame Lock and Frame Block. This means that if you make the frame wider, the Use As Background object will widen with it, but if you have Frame Blocked, you cannot make the frame smaller until you unblock it.
To restore an image to a regular image, click it and select Restore Image. The image will return to its regular state. BTW, there is nothing to stop you from having more than one Use As Background image if you want to stack them and then use styling for cool effects.
Use A Shape As a Background
Everything about using a shape as the background is almost identical to using an image.
Create your shape and click on Use As Background. To restore it, click on Restore Shape.
Adding Outer Gutters To Auto-Size
Keep Outer Gutters - When checked, Auto-Size will add the width of the Gutters to the size of the canvas.
π¨
π¨ Canvas Color Indicator Legend
Canvas Frame Handles
Corner & edge handles center green β Frame is unblocked ,which means it can be dragged over objects. (default)
Corner & edge handles center red β Frame is blocked, which means it cannot be dragged over objects.
Move bar red β Normal mode: drag to reposition the frame (objects move with it; default)
Move bar green β Pan mode: drag to slide the frame over objects (objects stay put)
Canvas Frame Border
Green β Frame Lock is on (objects cannot be dragged outside the frame - default)
Red β Frame Lock is off (objects can be dragged outside the frame)
Object Resize Handles (selected object)
Fill green β aspect ratio locked (image / shape)
Fill red β aspect ratio unlocked (image / shape)
Fill white β text object (no aspect ratios on text boxes)
Border green β object is unlocked. Can be resized and moved.
Border red β object is locked. Can't be resized or moved. (Shape & Image objects can still be resized using the size inputs.)
The Pip (small dot, top-left of selection)
Fill green β object respects canvas frame lock
Fill red β object ignores canvas frame lock
Border black - solid β images only: normal image
Border orange - solid β images only: image is in use as a watermark
Border orange or black - dashed β images and shapes only: image or shape is in use as a fill
Frame Overlay Line
Dashed black border β visible canvas frame overlay
Group Member Pips
Brown square on the top edge of the image β member of a selected group of objects
Light brown square on the top edge of the image β solo member of a selected group of objects, meaning no others have been selected yet, or all the others have been deselected. Toolbar unavailable for only one group object.
Default appearances of the Frame Lock, Frame Block, & Pan Buttons
π Frame Lockedβ Frame Unblockedπ Pan
k
β¨οΈ Keyboard Shortcuts
Ctrl/β + Z
Undo
Ctrl/β + Y
Redo (also Ctrl/β+Shift+Z)
Ctrl/β + D
Duplicate selected object
Ctrl/β + V
Paste image from clipboard
Ctrl/β + [WHEEL]
Zoom in & out (when cursor is over frame)
Ctrl/β + Shift + [WHEEL]
5x Zoom in & out (when cursor is over frame)
Arrow Keys
Move selected object 1px
Shift + Arrows
Move selected object 10px
Alt + β / β
Rotate selected object 1Β°
Alt+Shift + β / β
Rotate selected object 10Β°
Delete
Delete selected object
Escape
Deselect current object
Shift+[DRAG] (om frame corner drag handles)
Maintain frame aspect during resize
Ctrl/β + A
Select all objects
Shift+[DRAG] (on any blank space in or out of canvas)
UD Collage is a web based collage app designed to help you create simple image collages. You can use images, text, or simple shapes to create your collage. This was made mostly to work on PCs and larger screen sizes. It does work on smaller screen sizes, mobile, and touch devices with limited success and a lot of challenges.
This is a work in progress, so if you find bugs or things you think could be done better, let me know. I will fix the bugs, and possibly consider your suggestions. πππ(See comment below about things we will or can't do.)
* All data and images remain in your browser.
* No sign-in or registration required.
Things we cannot do or do not want to bother with: other shapes, a more robust text editing system, and almost every other feature you can think of. But please suggest because I am bound to miss one or two.
Button Colors
In general, there are three button colors: Blue buttons do something, open something, etc.; Green & Red buttons toggle something on or off. Green indicates that it is in the default state, meaning it is ON; Red means whatever it controls has been turned off. NOTE: the default state of the Frame Blocking feature is "Unblocked", so it is green in unblocked state and red when blocked.
Labels as Reset Buttons
Throughout the controls, most labels next to numeric inputs are clickable reset buttons β clicking the label returns that field to its default value. For example, clicking the Blur: label resets blur to its default, clicking X: resets the X offset, and so on. When in doubt, hover over the label β if it changes color, it is clickable.
For example, clicking the Blur: label resets blur to its default, clicking X: resets the X offset, and so on. When in doubt, hover over the label β if it changes color, it is clickable.
One difference - the Inner: and Outer: buttons in for the gutters are split. Inn and Out set their inputs to 0. The er: set their inputs to 16 and 32, respetively.
Hover Over Any Object on the Canvas for Details
Hover your mouse over any image on the canvas to see a details popup β display size, original size, output (export) size, position, and more. Handy for checking exact dimensions before you save.
Button & Control Tooltips on Hover
Hover over any button or control and wait a moment β nearly everything has a tooltip explaining what it does. The ! button at the end of each toolbar row opens a fuller set of tips for that row. The k button on the first row shows you keyboard shortcuts. The π€ button on the top row gives you a few How-To tips. The π¨button on the top row shows you the color codes on the frame and objects.
Display Size vs. Output Size
Everything on the canvas is shown at display size β but the exported image is always 3Γ larger. A canvas that looks 1024 Γ 768 on screen saves as 3072 Γ 2304. The actual output dimensions are always shown live in the Canvas row next to the W and H inputs.
ποΈ Preview opens a window that lets you see exactly what your collage will look like when Copied or Saved. This is useful when sometimes the display renders slightly different than the final product will. PRO TIP: The display canvas you are working on doesn't show a 100% perfect representation of the final result. Preview! Preview! PREVIEW!
πΎ Save allows you to save your collage as either PNG or JPG. If you choose to save the collage as a JPG file, you can choose the quality level. The higher the number, the better quality but the larger the file size.
π Copy copies the collage image to the clipboard as a PNG file.
π¨οΈ Print sends your collage to an attached printer.
π₯NEW clears out the current collage and resets everything to the default settings.
π Load & πΏ Save Projects
Saving a project saves everything about it, including all of the images, so you can work on it later. The file size is HUGE! I would use this sparingly if you are limited for space.
πΌοΈ Assets
Browse and load images from the online library. These behave like regular images once added to the canvas. This opens a picker to choose images that you can use as backgrounds and clipart from a directory I created. A work in progress. These are images like any other images added to UD Collage. A curated - hahaha - collection of things I think make great backgrounds.
The Bridge
The Bridge is a specialized way of copying images from one of my other apps, UD Image Sign & Watermark. If you have this app, and have sent images from it to the Bridge, click on the Check button. The Load button will then show you the number of images in the bridge. You can also Empty the bridge. NOTE: Bridge images are stored in your browser's cache. NOTE2: The Load button does not dynamically change, so if you go back to UDWM and add images to the bridge, you will need to click on Check to update the Load button.
π¨Tiny Gaps Alert!π¨
Tiny Gap Between Images On Working Canvas:
When using Fit Tiled, Fit by Rows, or Fit by Columns without any gutters, you may see a tiny sub-pixel gap between the images if your zoom is not set at 100%. This can also occur when you believe you have two images butted against each other. (See Example; Opens In A New Window) Before you try to adjust this gap manually, set your zoom to 100% or Preview the collage and see if the gap is still there. SPOILER ALERT: It won't be, but if it is, then it is a real gap and you need to nudge the images closer together.
!
π οΈToolbar Row 1 Tips
π Upload Image(s) & π Paste Image
Uploading images and pasting images do exactly what you would expect. You can also drag and drop images on the canvas.
βΆ Crop to Frame & Selected
βΆ Crop... to Frame will flatten all objects into a single image cropped to the canvas frame. When the new image is added to the canvas, it will look identical to the visible frame contents β so it may not appear to be there. Use Find Images and then the Order buttons to locate and surface it. Always a good idea to do a Preview before cropping.
βΆ Crop... to Selected will flatten all selected objects into a single image cropped to the canvas frame. When the new image is added to the canvas, it will look identical to the visible frame contents β so it may not appear to be there. Use Find Images and then the Order buttons to locate and surface it. Always a good idea to do a Preview before cropping.
Pro Tip 1: If you have an image that you want to crop, use the frame as a crop guide, select Crop to Frame, and then Add Layer. It will give you a new cropped image, exactly over the original. Delecte the original under it (if you don't want to keep it), and then use Auto-Size or one of the Fit buttons to continue working with your images.
Pro Tip 2: If your background is Transparent--use the checkbox next to the canvas background color--then the resulting image will be transparent in the same places.
Pro Tip 3: If you have two objects stacked, for example, and you want to make sure they are both selected, Shift+Drag the rubberband over them and look to see if the Selected counter says 2.
π€ Add Text & β¬ Add Shape
Adding text opens a text dialog box, and adding shapes puts a square shape on the canvas that you can then manipulate as you wish.
Zoom
There are several zoom controls. The first two allow you to increase or decrease the zoom level from 20% up to 200%. The default is 100%, but many functions will actually end by zooming to fit the screen. The next button is the Zoom to Fit button, which will zoom the frame and objects to fit your screen. The final button resets the zoom to the default of 100%. One of the most important things to know about the zoom is that you may see a tiny sub-pixel gap between images when viewing the collage on the canvas, especially if you are at any zoom level other than 100%. Before trying to adjust this, go to the Preview and see if the gap is still there. It most likely will not be. NOTE: Zoom has no impact on the actual frame or exported image size. NOTE 2: When cursor is over frame, Ctrl/Cmd+mouse wheel zooms in & out.
Grid
The Grid button toggles the visibility of the grid. The grid always starts from the upper left corner. You can enter a number directly or use the arrows to adjust the grid spacing anywhere from 8 to 100. Any numbers entered outside that range will correct to range. At some grid/zoom/canvas size combinations, some lines may look "thicker" than others, while other lines may be barely visible. That is a visual issue, and does not change the actual spacing.
Grid Snap
βΉ Grid Snap: When Grid Snap is on (green), objects will briefly snap to grid lines while dragging or resizing. An orange guide line appears to show where the snap is occurring. Grid Snap requires the grid to be visible β turning the grid off also turns Grid Snap off. When both Obj Snap and Grid Snap are on, whichever target is physically closer wins. TIP: At smaller grid spacings, it is sometimes easier to work with Grid Snap with Object Snap turned OFF.
βΉ Object Snap
When Object Snap is on (green), objects will briefly snap to the edges and centers of other objects while dragging or resizing. A purple guide line appears to show where the snap is occurring. The snap is transient β move far enough past it and the object releases naturally. Object Snap is on by default.
When using Fit Tiled, Fit by Rows, or Fit by Columns without any gutters, you may see a tiny sub-pixel gap between the images if your zoom is not set at 100%. This can also occur when you believe you have two images butted against each other. (See Example; Opens In A New Window) Before you try to adjust this gap manually, set your zoom to 100% or Preview the collage and see if the gap is still there. SPOILER ALERT: It won't be, but if it is, then it is a real gap and you need to nudge the images closer together.
!
The πImages, π€Text, β¬Shapes Tabs & Quick Layouts
πImages, π€Text, β¬Shapes Tabs
The Images, Text, & Shapes tabs open the corresponding toolbars in the next two rows. Uploading images, pasting images, adding text, or adding shapes will also open the corresponding toolbar.
Gutter Width: Inner, Lock, & Outer
These set the widths for Inner Gutters (between images) and Outer Gutters (the space between images and the frame.) When Locked, they change together. Pressing the lables Inner or Outer resets each to 0.
1οΈβ£ Fit 1, β Fit Tiled, π Fit by Rows, & ⬦ Fit by Columns
These four buttons and the Gutter input control how images are automatically laid out on the canvas. Of course, you can also arrange them manually. These ignore Text and Shape objects, so it is possible that using these might hide those objects depending on their order.
1οΈβ£ Fit 1: Only appears when there is one image. Adds an Outer Gutter if Outer Gutter is set to anything but 0.
β Fit Tiled: Only appears when there are more than one image and all images are the same size. Fit Tiled will arrange the images in a grid. In some cases, this may leave an empty space in the collage. You can try using Fit by Rows, or just fix it manually. When the gutter is set at 0, sub-pixel rendering artifacts can appear between images when zoom is set to anything other than 100%. Always check at 100% zoom β or use Preview β before deciding whether a gap is real or an artifact.
π Fit by Rows: Only appears when there are more than one image. Fit by Rows intelligently arranges the images in the frame, using the Gutter if it is set to anything but 0. In most cases, it will not leave any unfilled spaces, but occasionally it does. If this happens, run it again until you get what you want. When the gutter is set at 0, sub-pixel rendering artifacts can appear between images when zoom is set to anything other than 100%. Always check at 100% zoom β or use Preview β before deciding whether a gap is real or an artifact.
⬦ Fit by Columns: Only appears when there are more than one image. Fit by Columns intelligently arranges the images in the frame, using the Gutter if it is set to anything but 0. In most cases, it will not leave any unfilled spaces, but occasionally it does. If this happens, run it again until you get what you want. When the gutter is set at 0, sub-pixel rendering artifacts can appear between images when zoom is set to anything other than 100%. Always check at 100% zoom β or use Preview β before deciding whether a gap is real or an artifact.
Quick Layouts
Quick Layouts are a kind of pseudo-macro. Once you have one or more images on the canvas, you can select any one of the Quick Layouts from the dropdown menu to format those layouts. They run Fit by Rows, Fit by Columns, or Fit Tiled and apply gutter, a drop shadow, background color or transparency, and gutter/edge width, and two full-canvas border frames* to your canvas. You can also choose a canvas color (default is white) or make the canvas transparent. If you choose Fit Tiled for images that are not all the same size, it defaults to Fit by Rows. These only work on images. *The border frames are actually shape objects created as backgrounds, made transparent, and given borders. In order to have two borders, the bottom shape has to have a border wider than the top shape.
The Manager allows you to edit, add, delete, and even run layouts, and even import and export your collections.
Pro-Tip: I like to use a layout with Fit by Rows, 16px gutters inner and 32px outer, Drop Shadows, a white outer border, and a black inner border. Then I select another image and select Use as Background. While this is still selected, I change its opacity to 50%.
Checkbox, Tiny Gap Alert, & Special Warning
β οΈ Non-Image Warning Checkbox: When checked, this will alert you if you attempt to use a Quick-Layout or one of the Fit functions if you have text or shape objects. (See the β οΈ Non-Image Warning Below)
π¨Tiny Gaps Alert!π¨: This is a reminder about sub-pixel gaps between images.When using Fit Tiled, Fit by Rows, or Fit by Columns without any gutters, you may see a tiny sub-pixel gap between the images if your zoom is not set at 100%. This can also occur when you believe you have two images butted against each other. Hover over the button to learn more.
β οΈ Non-Image Warning: Quick Layouts and the Fit functions only apply to images. Text objects, shape objects, & captions do not move when a Fit or Quick Layout is selected.
r
βοΈ Radius
The 6 Options (dropdown)
Radius gives you 6 corner shape options: Round, Squircle, Bevel, Notch, Scoop, & Square. The Radius slider controls the size of the effect for all shapes except Square.
Browser Warning: As of this writing, only Chromium-based browsers--Chrome, Opera, Edge, etc.--will show the results on the working canvas; the other browsers like Safari and Firefox just show a rounded corner for everything. HOWEVER, because the actual exported collage uses a different process to create the corner shapes, they will appear correctly in Preview, Save, and Copy. Eventually all browsers will support this new CSS standard.
Radius Input (0% - 50%)
Controls how much impact the corner shape has. On smaller objects, the higher number may result in it looking weird or disappearing completely.
Round
Standard circular arc corners. The Radius input controls how large the curve is β at low values you get a subtle softened corner; at high values the shape approaches a pill or circle. This is the default shape.
Squircle
A superellipse-style corner where the straight edge holds longer before curving, then rounds off more abruptly than a standard circle. The result looks more "squarish" than Round but remains smooth β like the rounded rectangle shapes used in modern app icons.
Bevel
Replaces each corner with a straight diagonal cut, producing a flat-edged octagon effect β like clipping the corners off with scissors at a 45Β° angle. The Radius slider controls how large the cut is.
Notch
Removes each corner with a sharp right-angle rectangular step cut β like a square notch taken out of each corner. The Radius slider controls the depth and width of the notch.
Scoop
The inverse of Round β each corner curves inward with a concave quarter-ellipse, as if a scoop has been taken out of it. The Radius slider controls how deep and wide the scoop is.
Square
No corner shaping β produces a plain rectangle regardless of the Radius value. Use this to remove all corner effects and return the object to a standard sharp-cornered box.
!
πΌοΈ Some Image Drop Shadow Tips
Place a drop shadow on the image that is X=0 , Y=15, Blur=30. Then create a shape the same dimensions as the image, and place it behind the image. Give it a drop shadow of X=0, Y=5, Blur=10. I sometimes make this shape transparent, give it a black 1px border, and offset it down and right by 1px.
!
πΌοΈ Image Controls Row 1 Tips
π (The Lock)
Locks the selected image object so it cannot be moved or resized. (Image objects can still be resized using the panel inputs.). When an object is locked, the border around the drag handles is red. When it is unlocked, the border is green.
Border
Allows you to change the width and color of the border. The most important thing to know about adding a border is that borders grow from the edges inward, so it will block out anything on the edges of your images based on the border width.
βRadius
See special 'i' button for more on Radius & Corner Shapes
Rot.Β°
Great for rotating your images. NOTE: Due to a quirk in the system, drag arrows may point in the wrong direction on a rotated object.
Opacity
Opacity allows you to make the entire image the same opacity or create a gradient opacity.
To make the whole image the same opacity, leave the π between the two opacity levels locked. They will change together.
For a gradient opacity, unlock the πand set the two opacity levels differently. Different start and stop numbers create a radial opacity from the center (Start is higher) to the edge (End is lower) or from the edge (End is higher) to the center (Start is lower).
Drop Shdw
You can turn the drop shadow on or off. You can select the color of the drop shadow. Blur controls how soft and spread the shadow edges are β higher values create a softer, more diffuse shadow. The X and Y figures control the depth of the shadow. Positive is down and right; negative is up and left. NOTE: Always look at the drop shadow in Preview to make sure it is what you want.
!
πΌοΈ Image Control Row 2 Tips
Image Watermarks
π§ Use as Watermark: This takes the selected image, reduces it to a very small image (width is calculated at 8% of the canvas width) and places it in the lower right corner. It is moved to the top if it is not already on top. The system flags it as a watermark and turns the border on the pip in the upper left corner to orange. Watermarks are not included in Tile, Flexes, or Fit functions.
My Watermarks: Loads the manager for the image watermarks that allows you to use loaded watermarks and create new ones. This has its own guides and tips section.
Use As Background/Restore Image
Use As Background takes the selected image and stretches, crunches, does whatever it needs to do to make it fill the entire frame. It also sends the image to the back. And it marks the image as a Use As Background image so that it is not included in the image count, meaning it will not be included in any Fit 1, Fit Tiled, Fit by Rows, or Fit by Columns functions. Clicking Restore Image restores the image (although not necessarily to the exact same size) and brings it back to the front, and unflags it as a Use As Background object. NOTE: When an image is set as a Use As Background image, the border around the pip in the upper left corner will be dashed; kind of hard to see. NOTE 2: In theory, an image can be both a Use As Background image and a Watermark image (see below), in which case, the dashed border would be orange. NOTE 3: One quirk is that when the Frame is Blocked (red), it cannot be made smaller because it sees the Use As Background object as a blocking object.
βοΈ Flip/βοΈ Flip
Yeah! You got this!
π Obey Frame
When Obey Frame is green, you cannot drag or resize the image outside the frame boundary unless the global frame is unlocked. The center of the upper left pip will be green. When Obey Frame is red, you can drag and resize the image outside the frame; the upper left pip will have a red center when an object has Obey Frame off.
β§ Duplicate
Duplicates the selected image, places it slightly offset. All aspects of the image are duplicated, except its Lock state.
β Delete
I will let you guess what this does. Can be undone.
The default state of images is to have the aspect ratio locked. When this happens, the side drag handles are disabled. In locked state, the button is green and the middles of the drag handles are green. When the aspect is unlocked, the button and the drag handles turn red, and the side drag handles are enabled. When you reset aspect, the image is returned to original aspect ratio based on its current width. NOTE: When you reset aspect, aspect is locked again.
Image Size Inputs
Shows you the size of the selected image and allows you to manually change its size. When Aspect is Locked, when one number is changed the other changes also to maintain aspect ratio.
Reset Buttons
For many of the numeric entries, the labels double as reset buttons. In Images, these include Border Width; Radius; Rot.; Drop-Shadow Blur, X, & Y; Opacity Start and End.
!
π€Text Panel Tips
π (The Lock)
Locks the selected text object so it cannot be moved or resized. When an object is locked, the borders around the drag handles are red. When unlocked, the borders are green.
βοΈ Edit
Opens the text editor for the selected text box so you can change what it says. You can also use the βοΈ icon on a text box, or double-click any text box on the canvas to open the editor directly.
Bold & Italic
Toggle bold and italic formatting on the text in the selected text box. When a style is active, the button appears red. NOTE: Not all fonts support bold or italic, so results may vary depending on the font you have chosen.
Size, Color & Font
Size sets the font size for the text. Color sets the fill color of the text characters. Font selects from the available built-in typefaces.
β¬ ββ‘ Just.
The three justify buttons set the horizontal alignment of text within the text box: left, center, or right. This is independent of where the text box itself is positioned on the canvas.
Shadow (Text Characters)
This shadow is applied directly to the text characters, not the text box. Toggle it on or off, pick a color, and adjust Blur, X, and Y offsets. Positive X and Y values cast the shadow down and to the right; negative values go up and to the left. NOTE: This is separate from the Drop Shdw control in the Text Box row below, which applies a shadow to the whole text box.
Outline
Adds a colored stroke (outline) around the text characters. Toggle it on or off, pick a color, and set the width. Small values like 1 or 2 give a subtle outline; larger values like 5 or more make a bold graphic effect. NOTE: Very large outline widths can start to look unusual depending on the font.
Text Presets
Opens the Text Presets manager. You can save the current text box's formatting as a preset, apply saved presets to the selected text box, and import or export preset collections. If a text box is selected when you click Text Presets, you will be offered the option to save it as a new preset.
!
π€ Text Box Panel Tips
π Obey Frame
When Obey Frame is green, you cannot drag or resize the text box outside the frame boundary unless the global frame is unlocked. The center of the upper left pip will be green. When Obey Frame is red, you can drag and resize the text box outside the frame; the upper left pip will have a red center.
Drop Shdw (Text Box)
This shadow is applied to the entire text box, not just the text characters. Toggle it on or off, pick a color, and set Blur, X, and Y. Positive X and Y cast the shadow down and to the right; negative values go up and to the left. NOTE: This is separate from the Shadow control in the Text row above, which applies only to the text characters. Always check the result in Preview before exporting.
Background
Toggle the text box background on or off and set its color. When the background is off, the text box is transparent, so only the text characters (and any shadow or outline) are visible. This is useful when you want text to float over an image without a box behind it.
Border
Adds a border around the text box. Set the color and width. Like image borders, the text box border grows inward, so a thick border will eat into the area available for text. NOTE: A border width of 0 means no border.
Rot.Β°
Rotates the entire text box. Great for angled captions and creative layouts. NOTE: Due to a quirk in the system, the drag handles may point in the wrong direction on a rotated text box. You can use the Size controls in the Shared Controls row to resize a rotated text box accurately.
Opacity %
Controls the overall transparency of the text box. This affects the text characters, the background, and the border all together. 100 is fully opaque; 0 is invisible.
Duplicate
Duplicate the selected text box including the text within it, and places it slightly offset. All properties are copied except the Lock state. Can be undone.
Delete
Delete removes the selected text box and the text within it. Can be undone.
Reset Buttons
For many of the numeric entries, the labels double as reset buttons. In Text, these include Size; Text Shadow Blur, X, & Y; Outline Width; Drop-Shadow Blur, X, & Y; Border; Rot.; Opacity.
r
βοΈ Radius
The 6 Options (dropdown)
Radius gives you 6 corner shape options: Round, Squircle, Bevel, Notch, Scoop, & Square. The Radius slider controls the size of the effect for all shapes except Square.
Browser Warning: As of this writing, only Chromium-based browsers--Chrome, Opera, Edge, etc.--will show the results on the working canvas; the other browsers like Safari and Firefox just show a rounded corner for everything. HOWEVER, because the actual exported collage uses a different process to create the corner shapes, they will appear correctly in Preview, Save, and Copy. Eventually all browsers will support this new CSS standard.
Radius Input (0% - 50%)
Controls how much impact the corner shape has. On smaller objects, the higher number may result in it looking weird or disappearing completely.
Round
Standard circular arc corners. The Radius input controls how large the curve is β at low values you get a subtle softened corner; at high values the shape approaches a pill or circle. This is the default shape.
Squircle
A superellipse-style corner where the straight edge holds longer before curving, then rounds off more abruptly than a standard circle. The result looks more "squarish" than Round but remains smooth β like the rounded rectangle shapes used in modern app icons.
Bevel
Replaces each corner with a straight diagonal cut, producing a flat-edged octagon effect β like clipping the corners off with scissors at a 45Β° angle. The Radius slider controls how large the cut is.
Notch
Removes each corner with a sharp right-angle rectangular step cut β like a square notch taken out of each corner. The Radius slider controls the depth and width of the notch.
Scoop
The inverse of Round β each corner curves inward with a concave quarter-ellipse, as if a scoop has been taken out of it. The Radius slider controls how deep and wide the scoop is.
Square
No corner shaping β produces a plain rectangle regardless of the Radius value. Use this to remove all corner effects and return the object to a standard sharp-cornered box.
!
π Shape Panel Row 1 Tips
Lock
Locks the selected shape object so it cannot be moved or resized. (Shape objects can still be resized using the panel inputs.) When an object is locked, the border around the drag handles is red.
Border
Set the border color and width. Like images, borders grow inward from the edge of the shape. A width of 0 means no border. NOTE: When the background is transparent and the border is 0, the shape is effectively invisible β but it is still there on the canvas and can still cast a shadow if one is set.
β Radius
Rounds the corners of the shape. The value is a percentage of the shortest side. A radius of 50 on a square makes a perfect circle, and on a rectangle makes an oval. Values between 10 and 30 give you nicely rounded rectangles.
Rot.Β°
Rotates the shape. Combine with a transparent background to create interesting angled border effects. NOTE: Due to a quirk in the system, drag handles may point in the wrong direction on a rotated shape.
Opacity %
Controls the overall transparency of the shape, including its background, border, and any gradient. 100 is fully opaque; 0 is invisible. NOTE: Lowering opacity is a great way to create semi-transparent color overlay effects on top of your images.
Drop Shdw
Adds a drop shadow to the shape. Toggle it on or off, pick a color, and adjust Blur, X, and Y offsets. Positive X and Y values cast the shadow down and to the right; negative values go up and to the left. NOTE: Always check the result in Preview before exporting to make sure it looks the way you want.
Size (W & H)
Set the exact width and height of the shape in display pixels. Useful when you need precisely sized shapes. Remember, the exported size will be 3Γ these values. NOTE: If Aspect Locked is on (see Row 2), changing one dimension will change the other proportionally.
!
π Shape Panel Row 2 Tips
Background
Set the fill color of the shape and toggle between Opaque (solid fill) and transparent (no fill). When transparent, only the border and any shadow are visible, which is great for creating outline-only shapes or using a shape as an overlay frame.
Gradient
Toggle between a Solid background color and a two-color Gradient. When Gradient is active, you can set a second color and choose between Linear (straight across) or Radial (radiating from the center) gradient types. For Linear gradients, the AngleΒ° control sets the direction of the blend.
Aspect Locked / Unlocked
Unlike images, shapes default to having the aspect ratio unlocked (button is red), meaning you can freely resize width and height independently. When locked (button is green), the side drag handles are disabled and the shape resizes proportionally. You can also tell the state by the color of the midpoints of the drag handles.
Obey Frame
When Obey Frame is green, you cannot drag or resize the shape outside the frame boundary unless the global frame is unlocked. The center of the upper left pip will be green. When Obey Frame is red, you can drag and resize the shape outside the frame; the upper left pip will have a red center.
Duplicate
Duplicates the selected shape and places it slightly offset. All properties are copied except the Lock state. Can be undone.
Delete
Delete removes the selected shape. Can be undone.
β¬ Use As Background/β¬ Restore Shape
Saves the current state of the selected shape, then adjusts the shape to exactly fill the canvas dimensions and sends it to the back. Useful for a full-canvas background. The Pip in the upper left corner will have a dashed border (hard to see) when a shape object is set as a Use As Background object. This is handy for creating a full-canvas colored or gradient background in one click.
PRO TIP: Set the border to 0 and the background to transparent after fitting, and the shape becomes an invisible object that still exposes snap targets at the frame edges and center. This gives you precise alignment guides without any visual clutter.
Reset Buttons
For many of the numeric entries, the labels double as reset buttons. In Shapes, these include Linear Gradient Angle; Border; Radius; Rot.; Opacity; Drop-Shadow Blur, X, & Y.
!
π Shared Control Tips
Undo/Redo
Stores 50 undo steps. When you get past 50, the oldest one is removed.
All Lock/Unlock
Sometimes you may want to lock or unlock all objects. Locking them means that they cannot be moved or resized. (Image & Shape objects can still be resized using the panel inputs.)
All Aspect Lock/Unlock
The All Aspect Lock button locks and unlocks the aspect ratios of Image and Shape objects. (Text objects do not have changeable aspect ratios.)
Order
You can change the "stacking" order of objects using these buttons.
Align
This is the alignment of the selected object within the canvas. You can choose π― Center, β Centered Horizontally, β Centered Vertically, β¬ Align Top, β¬ Align Bottom, β¬ Align Left, β‘ Align Right.
To align objects with each other, use the Object Snap guidelines.
Finding Buried Objects
Sometimes you may have objects buried under other ones. Clicking on any of the Find Hidden buttons will cycle through all of the objects of the selected type, selecting them and flashing a dashed border around their location. You can then use the Order buttons to bring the found object to the front, or use other buttons as you would any visible object.
In Group 0
!
Group
Overview
The Group Controls will become enabled any time 2 or more objects are added to the group. Objects can be added by Ctrl/Cmd+A (select-all) or by Ctrl/Cmd+click. On PCs they can also be added with Shift+Click+Drag a rubber band around objects you wish to add. Objects can be removed in a number of ways: click either of the "Remove All" buttons or Ctrl+click on each of the group objects until only one is left.
The group objects will have a square brown pip near the middle of the upper edge of the image. The group object with the drag handles is the "boss" object. This is the object you will drag. When using the alignment features, he is the object you are aligning to. Clicking on a different object in the group will make it the new boss. Any object in the group can be the boss just by clicking on it. A boss object can have just about everything done to it that a non-group object can.
Some Tricks.
You Need To Move One Member of the Group - Select the object you want to move, then lock the group using the All (in group) Lock button. Next go up to the controls for the object you have selected and unlock it with its lock button, the little round lock icon, which should be red. It will turn green and you can now move your selected object anywhere without moving the rest of the group. When you have it where you want, unlock the entire group and they will all move together again.
Next Trick -
!
Group Controls Row 1
Select All/In Group [#]/Deselect All
The saddlebrown In Group Icon with the number in it shows the number of items that are part of the Group.
Objects can be added by using the Select All button, Ctrl/Cmd+A (select-all), by Ctrl/Cmd+click. or Shift+Click+Drag, which creates a rubber band around objects you wish to add.
Objects can be removed in a number of ways: click either of the "Deselect All" buttons or Ctrl+click on each of the group objects until only one is left. This only deselects images from the group; it does not delete them.
The group objects will have a square brown pip near the middle of the upper edge of the image. The group object with the drag handles is the "boss" object. This is the object you will drag. When using the alignment features, he is the object you are aligning to. Clicking on a different object in the group-select group will make it the new boss. Any object in the group can be the boss just by clicking on it. A boss object can have just about everything done to it that a non-group object can.
ποΈ Delete Grouped Objects, β§ Duplicate Group
ποΈ Delete Grouped Objects - deletes all of the objects in a group. You can also use Ctrl/Cmd+Delete to delete all of the objects in the group.
β§ Duplicate Group - duplicates all of the objects in a group and adds them to the group. You can also use Ctrl/Cmd+Shift+D to duplicate.
Distribute requires 3 or more objects to have been selected. It looks at the first and last object you selected, and then spreads the rest of the objects between them with equal spacing. The first and last objects do not move.
This does not space them using the centers. If for example, you have 500px between the left edge of the first object and the right edge of the last object, and you have two other objects that are 125px and 225px wide, you will have a space of 50px between each of the images.
βοΈ Pack H, βοΈ Pack V
βοΈ Pack H, βοΈ Pack V packs the objects in the group so that there is no gap between them. It does not adjust their position in the opposite dimension.
Flip All H & Flip All V
Flips each object in the group horizontally or vertically. Does not flip the group, just each individual object. Does not flip text objects.
β¬ Left, β‘ Right, β¬ Top, β¬ Bottom, β H.Ctr, β V.Ctr align all of the other selected objects with the boss object.
Quirks
In addition to some of the oddities shared above, there are a couple more to be aware of.
When an object in a group is selected, it become the boss object. You can change all of the characteristics of that object just as if it were not part of a group. For example, any of the Align buttons from the Shared row, will only move the boss object.
Since you can change the characteristics of objects in a group individually, you can do some interesting things. For example, if you lock the entire group from moving, you can then unlock an individual member, reposition it without the other members moving. When you unlock the rest of the group, they will all moved together again.
You can duplicate the boss object by itself, but the duplicate will not be part of the select group.
You can also delete the boss object with the delete key; if a new boss is not automatically selected, clicking on any object in the group will make it the boss.
Until a group modification is made using any of the group controls, group members retain their individual settings. For example, they could all have different drop shadows until you change the group drop shadow settings.
When moving the group of selected objects, individual objects still obey or ignore the frame boundary based on their individual settings.
r
βοΈ Radius
The 6 Options (dropdown)
Radius gives you 6 corner shape options: Round, Squircle, Bevel, Notch, Scoop, & Square. The Radius slider controls the size of the effect for all shapes except Square.
Browser Warning: As of this writing, only Chromium-based browsers--Chrome, Opera, Edge, etc.--will show the results on the working canvas; the other browsers like Safari and Firefox just show a rounded corner for everything. HOWEVER, because the actual exported collage uses a different process to create the corner shapes, they will appear correctly in Preview, Save, and Copy. Eventually all browsers will support this new CSS standard.
Radius Input (0% - 50%)
Controls how much impact the corner shape has. On smaller objects, the higher number may result in it looking weird or disappearing completely.
Round
Standard circular arc corners. The Radius input controls how large the curve is β at low values you get a subtle softened corner; at high values the shape approaches a pill or circle. This is the default shape.
Squircle
A superellipse-style corner where the straight edge holds longer before curving, then rounds off more abruptly than a standard circle. The result looks more "squarish" than Round but remains smooth β like the rounded rectangle shapes used in modern app icons.
Bevel
Replaces each corner with a straight diagonal cut, producing a flat-edged octagon effect β like clipping the corners off with scissors at a 45Β° angle. The Radius slider controls how large the cut is.
Notch
Removes each corner with a sharp right-angle rectangular step cut β like a square notch taken out of each corner. The Radius slider controls the depth and width of the notch.
Scoop
The inverse of Round β each corner curves inward with a concave quarter-ellipse, as if a scoop has been taken out of it. The Radius slider controls how deep and wide the scoop is.
Square
No corner shaping β produces a plain rectangle regardless of the Radius value. Use this to remove all corner effects and return the object to a standard sharp-cornered box.
!
Group Controls Row 2
The controls in the Group Controls Row 2 apply to each member of the group as individual objects. So if an object is rotated 45Β° as part of a group, that object remains rotated at 45Β° when it is removed from the group until you change it.
The Lock & Unlock Buttons
All (In Group) π Lock & π Unlock lock or unlock all of the selected objects. When locked, they cannot be moved or resized. (Image & Shape objects can still be resized using the panel inputs.).
Aspectπ Lock & π Unlock lock or unlock the aspect ratios of all of the selected objects. Handy when you have a lot of objects and you want to change the aspect ratio status of some of them at once.
The Obey & Ignore Frame Buttons
Frame π Obey means that none of the objects in the group can leave the canvas no matter what its state was before being part of the group. π Ignore means that all objects in the group can be dragged outside the boundary.
β Radius
See the 'r' button for more information.
Drop Shdw
The drop shadow control applies the same drop shadow to all objects in the group. For text, this is the box around the text, not the text itself. This overrides all previous drop shadow settings, and works like the individual drop shadow settings.
Border
Border applies a border of the chosen color and width (px) to all selected objects. The Border label resets the width to 0.
(3072 Γ 2304)
!
π Canvas Row
Auto-Size
Auto-Size finds the smallest size that encompasses all of the objects, taking drop shadows and Outer Gutter Width into consideration. NOTE: If you have Pan on, this button will turn Pan off and lock the frame before performing this function.
Keep Outer Gutter
Keep Outer Gutter - When checked, Auto-Size will add outer gutters to the calculated size of the canvas.
Collage Size
W & H show you the width and height of the display canvas. You can input new figures by entering them or using the Up & Down arrows. Next to them, you will see the actual output dimensions of the collage, in parentheses. These will always be 3 times the dimensions of the display sizes. Default is 1024 x 768 (3072 x 2304).
Next you will see a drop-down menu of the most popular preset sizes.
To the right of the presets are two buttons. The first is the reset button, which just sets the canvas back to the default size; this does not change the size of the objects. The second button is the Recenter button. This recenters the canvas in the window without resizing. When this is clicked, the frame is locked and Pan is turned off.
Any time one of the dimensions exceeds 2000px (6000px exported) the numbers will turn red. This is a warning that the resulting file size may be quite high!
Shift-Drag During Resize Maintains Frame Aspect Ratio
If you wish to maintain the aspect ratio of the frame itself when resizing, hold down the SHIFT key while dragging one of the four frame corner handles.
Collage Background
Here you can select the color of the collage background. The checkbox will make the background transparent.
Frame Lock, Frame Block, Pan and Center
By moving the frame borders and by working with Frame Lock, Frame Block, Pan and Center, you can select what parts of your collage appear in the final collage image. Use Preview (top row) to see what the image will look like. Use Crop to Frame (top row) to create a new image which you can add to the collage or use to replace the collage. NOTE: Remember that when you use Crop to Frame and add it as a new layer (image) it may not be immediately obvious. Use the Find Hidden buttons to find it and the Order buttons to bring it to the front. NOTE 2: Frame Lock and Frame Block are turned off when Pan is turned on. These DO NOT reset when Pan is turned off using the Pan button.
Default appearances of the Frame Lock, Frame Block, & Pan Buttons
π Frame Lockedβ Frame Unblockedπ Pan
π Canvas Size Okay; All dimensions are below 2000px. If either or both dimensions exceeds 2000px, a notice will appear and the background will turn yellow; the dimension numbers will turn red. The notice will tell you what to do to fix the problem if your are using Fit by Columns or Fit by Rows..
(This tips columns disappears under the canvas when the canvas is enlarged, or on narrow screens.)
π Canvas Size Okay; All dimensions are below 2000px.
Tiny Gap Between Images On Working Canvas: When using Fit Tiled, Fit by Rows, or Fit by Columns without any gutters, you may see a tiny sub-pixel gap between the images if your zoom is not set at 100%. This can also occur when you believe you have two images butted against each other. (See Example; Opens In A New Window) Before you try to adjust this gap manually, set your zoom to 100% or Preview the collage and see if the gap is still there. SPOILER ALERT: It won't be, but if it is, then it is a real gap and you need to nudge the images closer together.
(This tips columns disappears under the canvas when the canvas is enlarged, or on narrow screens.)
Add Text
!
π€ Text Entry Tips
How It Works
Type your text in the box below. Press CTRL+Enter (or click Add to Canvas) to place the text on the canvas. Press Enter or click β΅ NL to start a new line within the text. When you open this dialog by clicking βοΈ on an existing text box, the title changes to Edit Text and the existing text is loaded for editing.
Quick-Fill Buttons (Row 1)
MJ β inserts "Midjourney" at the cursor. GPT β inserts "ChatGPT". NB β inserts "NanoBanana". UDC β inserts a multi-line credit block with the UD Collage name and URL. All of these insert at the current cursor position, so you can combine them with your own text.
π Paste β pastes text from your clipboard at the cursor. β΅ NL β inserts a new line at the cursor (same as Enter). π β opens the emoji picker; click any emoji to insert it at the cursor.
Position Word Buttons (Row 2)
The second row of buttons β Left, Middle, Right, Top, Bottom, : (colon), - (dash) β are handy shortcuts for common caption words. They insert at the cursor, just like the Row 1 buttons.
The Text Box
The large text area below is resizable β drag its bottom edge to make it taller if you need more room. All formatting (font, size, color, bold, shadow, etc.) is controlled from the Text Panel in the main toolbar after the text is placed on the canvas.
β΅ NL or Enter for a new line | CTRL+Enter to Add Text to Canvas.
Long-press the image above, then tap Save to Photos
πΌοΈ Assets
!
πΌοΈ Assets Tips
What Are Assets?
Browse and load images from the online library. These behave like regular images once added to the canvas. This opens a picker to choose images that you can use as backgrounds and clipart from a directory I created. A work in progress. These are images like any other images added to UD Collage. A curated - hahaha - collection of things I think make great backgrounds.
How to Use
Click a category tab to browse that collection. Click a thumbnail to select it β its name appears at the bottom. Then click πΌοΈ Use to add it to your canvas. Once added, it behaves exactly like any other image you upload: you can resize, move, apply borders, shadows, and all other image controls to it.
Pro Tip
Background assets work great with Use As Background in the Image panel β select the asset after adding it to the canvas and click Use As Background to stretch it to fill the entire frame and send it to the back automatically.
Select a category above to browse assets.
π§ Watermark Manager
!
π§ Watermark Manager Tips
What Is the Watermark Collection?
This is a personal library of images you save here to use as watermarks. The collection is stored in your browser (IndexedDB) β nothing is uploaded to the internet. You can save up to 24 watermarks. They persist between sessions until you remove them or clear your browser data.
β¬ Upload vs. π§ Use as Watermark
β¬ Upload adds one or more images to your saved collection for future use β it does not place anything on the canvas. π§ Use as Watermark takes the currently selected watermark from the collection and places it on the canvas as a watermark object (small, lower-right corner, sent to front).
What Does "Use as Watermark" Do?
When a watermark is applied to the canvas, it is resized to 8% of the canvas width (height is proportional), placed in the lower-right corner, and moved to the front. It is flagged as a watermark so it is excluded from Fit 1, Fit Tiled, Fit by Rows, and Fit by Columns layout operations. The pip border in the upper-left of the object turns orange to indicate watermark status.
π Import / πΎ Export Collection
Export saves your entire watermark collection as a .iudw file that you can back up or share. Import loads a previously exported .iudw file, adding those watermarks to your collection.
π Remove All
Permanently removes all watermarks from the collection. This cannot be undone. Export your collection first if you want to keep a backup.
No watermarks saved yet. Upload one to get started.
π Add to Text Presets?
π Text Preset Manager
!
π Text Preset Manager Tips
What Is a Text Preset?
A text preset saves the full formatting of a text box β font, size, color, bold, italic, justification, shadow, outline, background, border, and opacity β so you can reuse that exact style on future text boxes without having to set everything again. The actual text content is not saved, only the style.
How to Save a Preset
Select a text box on the canvas, then click Text Presets in the toolbar. You will be asked if you want to save the selected text box as a new preset. Click Yes, give it a name, and it is added to your collection. You can also open this manager at any time without a text box selected β but you will not be offered the save option.
π Add to Canvas
Select a preset from the dropdown, then click π Add to Canvas to place a new text box on the canvas using that preset's formatting. The preview panel on the left shows a styled sample, and the property list on the right shows all saved settings.
π Import / πΎ Export Collection
Export saves your entire text preset collection as a .tudc file you can back up or share. Import loads a previously exported .tudc file, adding those presets to your collection.
π Delete Current / π Remove All
Delete Current removes only the selected preset. Remove All clears the entire collection. Neither can be undone β export first if you want a backup.
β
β
β‘ Quick Layout Manager
!
β‘ Quick Layout Manager Tips
What Is a Quick Layout?
A Quick Layout is a saved combination of fit method, gutter widths, drop shadow settings, border frame settings, and canvas background color. Selecting one from the β‘ Quick Layouts dropdown in the toolbar applies it to your canvas images instantly β no extra clicks. Quick Layouts only affect image objects; text and shape objects are not moved or resized.
βΆ Run
Applies the selected preset to the current canvas immediately. This is the same as choosing the preset from the Quick Layouts dropdown in the main toolbar. The canvas background color and transparency are also updated to match the preset.
The Two Shape Borders (Bottom & Top)
Quick Layouts can add up to two full-canvas border frames. These are actual shape objects β transparent backgrounds with a colored border β placed behind all images. The Bottom Shape has a wider border; the Top Shape sits on top with a thinner border, creating a double-frame effect. Set either width to 0 to skip that frame. Both shape objects are added to your canvas and can be edited or deleted like any other shape.
β Add New / βοΈ Edit / β§ Duplicate
β Add New opens the form below to create a preset from scratch. βοΈ Edit opens the form pre-filled with the selected preset's settings. β§ Duplicate creates a copy of the selected preset with "(1)" added to its name β useful as a starting point for a variation.
π Import / πΎ Export
Export saves your entire Quick Layout collection as a .udql file you can back up or share. Import loads a previously exported .udql file, adding those presets to your collection.
π Delete / π Remove All
Delete removes only the selected preset. Remove All clears the entire collection. Neither can be undone β export first if you want a backup.
No preset selected.
Add New Preset
Fit Method:Gutter:Drop Shadow:Bot Shape Border:Top Shape Border:Canvas: