Frames and Overlays

Getting Started

Open Frames.
Upload a Base photo.
Upload a Frame image.
Adjust the frame size and placement.
Configure opacity and optional color modifications.
Review the live preview.
Click Download.

Required Images

Input	Purpose
Base photo	Background image
Frame	Foreground overlay image

Transparent PNG images are particularly useful for overlays.

Placement Controls

Control	Description	Initial Value
S	Frame scaling percentage	100
W	Frame width input	0
H	Height displayed for the frame	0
X	Horizontal offset	0
Y	Vertical offset	0

Scale

Adjusts the overlay size relative to its configured dimensions.

Width and Height

The implementation uses the frame's natural aspect ratio to derive its rendered height from the entered width.

This helps preserve the overlay's proportions.

X and Y

Controls the overlay's position relative to the center of the preview.

Positive and negative offsets move the frame from its default centered placement.

Frame Opacity

The opacity control ranges from 0 to 100.

Value	Appearance
0	Fully transparent
25	Mostly transparent
50	Half opacity
75	Mostly opaque
100	Fully opaque

The interface initializes opacity to 0 by design.

If the frame is not visible after uploading it, increase the opacity.

Recolor Near-White Areas

The Recolor near-white to RGB option changes nearly white pixels in the overlay image to a selected color.

Usage

Enable Recolor near-white to RGB.
Enter the desired red, green, and blue values.
Review the live preview.

RGB Settings

Channel	Range
Red	0–255
Green	0–255
Blue	0–255

The initial target color is:

RGB(255, 0, 128)

The code targets pixels whose channels are all above 220 and sufficiently close to one another.

This makes the feature useful for light-colored decorative frames.

Make Color Transparent

The tool also provides a base-image color-key option.

Enter a target RGB color under:

Make Color Transparent (base)

The implementation compares base image pixels against the specified RGB values.

Pixels matching that color exactly can have their alpha set to zero.

Example

R: 255
G: 255
B: 255

This targets pure white.

Important Limitation

The current implementation only applies the base color-key operation when at least one target channel is nonzero.

Therefore, entering:

R: 0
G: 0
B: 0

does not activate black removal in the supplied code.

There is also no tolerance control for near-matching base pixels.

Live Preview

The tool displays a canvas preview of the combined image.

Changes to the controls update the composition.

The preview canvas scales to fit the available display area and maintains the base image's aspect ratio.

Reset

Click Reset to image to restore the frame placement and related controls to their initial state.

Export

Click Download to save the generated composition.

Property	Value
Format	PNG
Filename	`Framed.png`
Source	Current composition canvas

The exported dimensions follow the rendering canvas, which may be smaller than the original uploaded photograph.

Recommended Uses

Photo borders
Social media overlays
Decorative frames
Watermark-like elements
Themed image compositions
Color-customized frame graphics

Tips

Use a transparent PNG for the overlay.
Increase opacity if the frame appears missing.
Preserve the frame's natural aspect ratio.
Use the RGB recoloring feature on mostly white frame artwork.
Inspect downloaded resolution before using the result for high-resolution printing.

Important: The Frames tool is a canvas-based compositor. It does not provide a multi-layer project editor or non-destructive layered file export.