DEV Community

Cover image for How the osFoundry Photo Editor handles layers, retouching and compositing on your own computer
tauchiii
tauchiii

Posted on

How the osFoundry Photo Editor handles layers, retouching and compositing on your own computer

It is Thursday evening, and the photo for tomorrow's post looks flat. The light was grey, the background is busy, and the headline still has to go on top. Opening a paid editor for twenty minutes of work feels like too much, and an online tool means uploading the picture somewhere first. This is the kind of job the Photo Editor in osFoundry is for.

A layered photo editor inside the desktop app

osFoundry is a desktop app that puts chat, agents, files and creative tools in one window. The Photo Editor is its raster image editor: you open a photo, work on it in layers with masks, apply adjustments such as Curves and Levels, and export the result. It also works with PSD files. It sits in the sidebar as Photo Editor, next to the Vector Editor, the Video Editor and the RAW Editor, and you can also start one from Canvas, in the New Canvas project dialog under Editors. If you have used a classic desktop photo editor, the layout will be familiar on sight: tools down the left, menus across the top, color, properties and layers on the right. The difference from osFoundry's Image Generator is simple. The generator makes a new picture from a prompt. The Photo Editor is where you change the pixels of a picture by hand, and nothing is redrawn for you.

A look at the editor

The osFoundry Photo Editor with a street photo of a cat open, tools on the left and the Layers panel on the right

What you see here, with a photo just dragged in:

  • The menu bar. File, Edit, Image, Layer, Type, Select, Filter, View, Window and Help. Image holds the adjustments and canvas size, Select holds the selection commands, and Filter holds blur, sharpen, noise, distort and Liquify.
  • The tool column on the left. Move, marquee, lasso, crop, eyedropper, brush, healing and clone tools, eraser, gradient, pen, type and shapes. The bar under the menus changes to the settings of the tool you picked: here the brush's mode, opacity, flow and smoothing.
  • The canvas in the middle, with the document tab above it (cat-street.jpg @ 86.2% (RGB/8)) and the zoom and pixel size in the status bar below.
  • The panels on the right. Color, Swatches, Gradients and Patterns at the top. Properties and Adjustments in the middle, showing the canvas size of the document. Layers, Channels and Paths at the bottom, with blend mode, opacity, lock and fill controls.
  • The buttons under the Layers panel. Link, layer effects (fx), add a mask, new fill or adjustment layer, group, new layer and delete.

Use case: fixing flat light on a product photo

Ken sells handmade bags online and shoots them on his balcony. On overcast days the photos come out grey: no deep shadows, no bright highlights, colors that look washed out next to his competitors' listings.

He drags the photo into the Photo Editor and opens Image › Adjustments. The menu is the full set he would expect: Brightness/Contrast, Levels, Curves, Exposure, Vibrance, Hue/Saturation, Color Balance, Black & White, Photo Filter, Channel Mixer, Color Lookup, Shadows/Highlights, HDR Toning and more.

The Image menu in the osFoundry Photo Editor with the Adjustments submenu open, listing Levels, Curves, Hue/Saturation and others

He picks Curves. The dialog shows the photo's histogram behind the curve, with eyedroppers for black, gray and white points and a Preview checkbox so he can compare as he drags. He pulls one point down in the shadows and lifts one in the highlights, an S-curve, and the bag gets its depth back.

The Curves dialog in the osFoundry Photo Editor with an S-curve drawn over the histogram

If he wants to keep the change editable, he adds the same adjustment as an adjustment layer from the Layer menu or the button under the Layers panel, so it sits on top of the photo instead of being baked into it. He ends up with a photo that matches the rest of his shop, and he can reuse the same curve on the next batch.

Use case: a cut-out, a new background and a headline

Mia runs the social accounts for a small animal shelter and needs a poster image for an adoption day, built from a phone photo of a cat on a cobblestone street.

She starts with Select › Subject. One click, and a selection outline runs around the cat. Then Select › Inverse Selection, so everything except the cat is selected.

Select Subject in the osFoundry Photo Editor drawing a selection outline around the cat

With the background selected, she adds a new fill layer from Layer › New Fill Layer › Gradient and picks two shades of teal. Because a selection was active, the fill layer comes with a layer mask already made from it: the gradient covers the street and leaves the cat untouched. The original photo is still there, unchanged, as the Background layer underneath. If the edge needs work, she can paint on the mask or use Select and Mask instead of erasing pixels.

A gradient fill layer with a mask in the osFoundry Photo Editor replacing the street behind the cat

Last comes the text. She picks the Type tool, clicks on the canvas and types the headline. The tool bar shows font, weight and size, and the Properties panel shows the type layer's position and width. Then File › Export › Quick Export as PNG writes out the whole picture.

A Street Cat headline as a type layer above the gradient and the photo in the osFoundry Photo Editor

Her Layers panel now has three layers: the type, the gradient fill with its mask, and the untouched photo. Next week she can change the text or the colors without starting again.

Use case: retouching a portrait or a PSD from someone else

Sam is a freelance designer. A client sends a layered PSD for a banner, and also asks for a stray sign to be removed from the background of a team photo.

The PSD opens in the Photo Editor with its layers, so Sam can change one layer, move a group or adjust a single element without flattening the file. For the photo, the tool column has the Healing Brush and the clone tools, and Edit has Content-Aware fill: select the sign, fill the area from the pixels around it, then clean up with the brush. For skin and shapes, Filter › Liquify offers forward warp, pucker, bloat, twirl and freeze/thaw masks. Layers can also be turned into Smart Objects (Layer › Smart Objects), so a resize or a filter can be undone later instead of being permanent. Sam ends up with an edited PSD that still opens as layers, and a clean photo exported from the same window.

Where it fits in the rest of osFoundry

The Photo Editor is one of the editors in Canvas, so the neighbors are close. Photos from a camera can go through the RAW Editor first for exposure, white balance and batch export, then come into the Photo Editor for layered work. Logos and icons belong in the Vector Editor, which exports SVG and PDF, and multi-page layouts in the Design Editor. When you need a picture that doesn't exist yet, the Image Generator makes one from a prompt, and you can export it and finish it here by hand. Use the editor's own File menu to save and export; that is the reliable way to keep your work.

Questions people ask first

Does it run on my computer?
Yes. The editor runs inside the osFoundry desktop app, and a photo you drag in is edited on your machine. osFoundry is free to use on your own device.

Can I open my existing PSD files?
Yes. PSD is a supported format, with layers, so you can keep working on files made elsewhere.

Is this the same as the Image Generator?
No. The Image Generator creates new images from a prompt. The Photo Editor is for editing existing images by hand: layers, masks, adjustments, selections and type.

How do I get the finished picture out?
File › Export. Quick Export as PNG writes the whole picture in one step, and Export As opens a dialog with a preview before you save.

The desktop app is free to download at osfoundry.io/download.

Top comments (0)