How to Add a Text Layer to an Image in Your Browser
Published
Adding words to a picture is one of the oldest, most common editing jobs there is. You don't need to install anything or upload your image to a server to do it. This guide shows how to add text to a photo directly in your browser with Online PS, a free online photo editor that processes everything locally on your device.
Why People Add Text to Photos
A picture rarely travels alone — most of the time it needs a few words to do its job:
Captions: a date, a place or a short note burned into a holiday photo so it still makes sense years later.
Memes: the classic top-and-bottom punchline that turns any snapshot into a joke.
Watermarks: your name or handle in a corner, marking work as yours before posting it publicly.
Covers and thumbnails: a title on a blog header, YouTube thumbnail or social card, where the text carries most of the message.
All four follow the same basic recipe, and all four work better when the text is kept separate from the photo underneath.
Why the Text Should Live on Its Own Layer
The cheapest way to add text is to paint it straight onto the image pixels, like a basic drawing app does. The problem appears the moment you change your mind: the letters are now part of the photo, and moving or rewording them means erasing and patching the background by hand.
A proper editor works differently. In Online PS, every piece of text you add is placed on its own layer, stacked above the photo. That makes the whole process non-destructive:
You can move the text anywhere with the move tool, as often as you like.
You can restyle it — wording, size, font, color or line height — at any time via Layer → Edit Text, which reopens the original dialog.
You can lower its opacity, change its blend mode, duplicate it, or simply delete it, all without touching a single pixel of the photo below.
As long as you keep the layer structure intact, nothing is baked in until you export.
Step by Step: Adding Your First Text Layer
Open Online PS and load your photo with File → Open (or just drag the file into the page).
Pick the text tool from the toolbar on the left.
Click on the canvas where you want the text to start. A dialog appears.
Type your content, then set the look: size from 8 to 400 px, a font from the preset list, optional bold or italic, and line height for multi-line text.
Choose a color — the text uses your current foreground color by default, so set that first if you want something specific.
Confirm the dialog. The text appears on the canvas as a brand-new layer in the layers panel.
Wording not quite right? Don't delete anything — select the text layer and use Layer → Edit Text to reopen the dialog and adjust it.
Styling the Text Layer
Once the text exists as a layer, the whole layers toolbox applies to it:
Reposition freely: switch to the move tool and drag the text into place; zoom in first for precise placement.
Layer opacity: drop the opacity from 100% toward 30–60% to make text sit back into the image — the standard trick for watermarks and subtle captions.
Blend modes: the layer panel offers 12. Overlay and Soft Light are the most useful for text: they let the letters interact with the photo's tones instead of sitting flatly on top — a gentle, photographic watermark.
A hand-made shadow: to lift text off a busy background, duplicate the text layer with Layer → Duplicate Layer, recolor the copy dark via Layer → Edit Text, nudge it a few pixels down and to the side beneath the original, and lower its opacity — a minute of work that looks surprisingly clean.
One honest limitation: Online PS has no built-in stroke, outline or drop-shadow effects for text — the duplicate-and-offset trick above is the manual stand-in. It gives you full control over direction and distance, but it's still a workaround; if you need polished one-click effects, this editor isn't that.
A Quick Watermark Workflow
Watermarking is the most common text job, so here's the short version:
Open your photo, then add a text layer with your name or handle — something short, at a small size like 16–24 px.
Pick white or black as the color, whichever contrasts with the corner you'll use.
Drag the text into a corner with the move tool, leaving a comfortable margin from the edges.
Lower the layer opacity to around 40%, or set the blend mode to Soft Light for an even subtler look.
Export with File → Export as JPG for a normal photo, or PNG if the image also needs transparency.
The result marks the image as yours without shouting over it — and since everything runs locally, you can watermark unpublished client work without it ever touching a server.
Practical Tips
Protect readability first. Text lives or dies on contrast: light text on a busy or bright area is unreadable. Darken the area behind it, use the fake shadow trick, or pick a calmer spot.
Don't merge down until you're happy. Merging the text layer into the photo (Layer → Merge Down) is a one-way door — keep layers separate while there's any chance you'll tweak the wording.
Export the right format. Use PNG for graphics where text must stay razor-sharp or sit on transparency; use JPG for finished photos where file size matters more — JPG can't store transparency, and its compression slightly blurs sharp letter edges.
Size for the destination. A 400 px headline suits a cover image; a 14 px signature is plenty for a watermark — match the text size to how the image will actually be viewed.
Try It Yourself
Open Online PS, load any photo, and add a caption on its own layer — then reopen it with Layer → Edit Text to feel how forgiving a non-destructive workflow is. Free, no account, no watermark, and your image never leaves your device.