Community Interface Image Editor

Controls

Add Image Upload File

Preview Window

Your image will download and appear exactly as it appears on the canvas. Once downloaded, you can then upload the image to the appropriate location within your OPS Community Interface Editor.

Layers

    How to Use the Editor

    1. Upload Images: Click "Add Image" to upload images, or "Upload File" to upload a previously saved layers file.
    2. Select Template: Choose "Main Page Hero" (1900x650), "Inner Page Header" (1200x300), "Preview Image" (300x300), or "Executive Officer Profile" (500x500).
    3. Overlay Guide (Main Page Hero): For the "Main Page Hero" template, toggle "View Overlay on Canvas" to display a 50% transparent guide image over the canvas to assist with positioning. This overlay does not appear in downloaded images.
    4. Background Color: Pick a color for the canvas background.
    5. Add Text (Inner Page Header): Enter Agency Name and Page Title, adjust size, style (normal, bold, italic), line height, color, and drag to position.
    6. Add Shapes: Use "SHAPE TOOLS" to add rectangles, circles, or triangles. Adjust their color, width, height (up to 1000px), opacity (0 to 1), rotation, and drag to position.
    7. Main Page Hero Guide: When using "Main Page Hero," click the "Click here to view a Main Hero Image Guide" button to view a guide for positioning elements in a modal.
    8. Manage Layers: In the "Layers" section, click a layer (image or shape) to edit; the selected layer will be highlighted with a marker (▶). Click "Rename" to give the layer a custom name, "Duplicate" to copy it, or use "Move Up" and "Move Down" buttons to adjust layer order (top of list = foreground; text on top for Inner Page Header). Use "Hide" to toggle layer visibility, and "Undo" to revert the last deletion.
    9. Edit Images: Use "IMAGE EDITING TOOLS" to adjust brightness, opacity, scale, or click "Crop for Shaded Background" to open a modal. In the modal, preview the selected image, click "Crop" to cut the entire left side at a -159-degree angle from the upper-left corner to the bottom, then click "Add to Canvas" to add the cropped image back to the canvas for further editing. Click "Preview Canvas" to view the entire project in a modal. Delete or drag images to move.
    10. Reset Layer: Restore selected layer to defaults.
    11. Reset Editor: Clear all content for a fresh template (confirms first).
    12. Save Your Work: Use "Download Image" to save the image as a PNG at full resolution, or "Download Layers" to save a JSON file with all layers for later editing (you'll be prompted to name the file). Layers will maintain their original order when uploaded later.