Text Behind Image

this tool puts text behind the image.

Comment

Inspiration

The idea sparked from a simple but powerful problem: a close friend of ours was diving into content creation and wanted to recreate the viral “Text Behind Subject” look that’s become a visual staple on YouTube thumbnails and X/Twitter creatives. However, every time he tried to make it, he had to go through a tedious process manually masking layers in complex editing tools just to achieve this single effect.

We realized this wasn't just his problem ,it’s a pain point for thousands of creators trying to stand out in the fast-paced world of social media. Visuals matter, and this style consistently drives higher engagement and clicks. But the barrier to entry is high unless you're a designer.

So we built a tool that makes it as easy as one click.

What it does

Text Behind Image is an Adobe Express add-on that creates stunning text-behind-object effects using AI-powered background removal. Users can upload any image, and the app automatically removes the background using the @imgly/background-removal library. They can then add customizable text that appears behind the foreground object, creating a professional-looking composite effect. The app provides real-time preview, extensive text customization options (size, color, position, rotation), and seamless integration with Adobe Express for immediate use in creative projects.

How we built it

We built this as a React-based Adobe Express add-on using TypeScript for type safety. The core technology stack includes:

  • Frontend: React 18 with TypeScript for the user interface
  • Adobe Integration: Adobe Express Add-on SDK for seamless canvas integration
  • UI Components: Spectrum Web Components for consistent Adobe design language
  • Background Removal: @imgly/background-removal library for AI-powered image processing
  • Canvas Manipulation: HTML5 Canvas API for real-time image composition
  • Build System: Webpack with Adobe's CCWeb Add-on Scripts for packaging

The app uses a three-layer composition approach: original image as background, customizable text in the middle, and the transparent foreground object on top, creating the text-behind-object illusion.

Challenges we ran into

The biggest challenge was implementing real-time canvas composition with proper layer ordering and coordinate systems. We had to carefully manage the canvas context state, handle image loading asynchronously, and ensure the text positioning worked correctly across different image dimensions. Another significant challenge was integrating the background removal API, which required handling network requests, error states, and providing user feedback during processing. We also faced challenges with the Adobe Express SDK integration, particularly in converting canvas data to the correct format for adding images to the Express canvas.

Accomplishments that we're proud of

We're particularly proud of creating a seamless user experience that makes a complex visual effect accessible to non-designers. The real-time preview feature allows users to see their changes instantly, and the intuitive controls make text customization straightforward. We successfully integrated AI-powered background removal with a professional UI that follows Adobe's design guidelines. The app works reliably across different image types and sizes, and the direct integration with Adobe Express means users can immediately use their creations in their projects without additional steps.

What we learned

We learned a great deal about the Adobe Express Add-on ecosystem and how to build professional-grade creative tools. Working with the HTML5 Canvas API taught us about efficient image processing and real-time rendering techniques. We gained experience with AI-powered image processing APIs and how to handle asynchronous operations gracefully. The project also taught us about building intuitive user interfaces for creative applications and the importance of providing immediate visual feedback to users.

What's next for Text Behind Image

We plan to expand the app with additional features like multiple text layers, different text effects (shadows, outlines, gradients), support for video backgrounds, and more advanced positioning tools. We're also considering adding preset templates for popular social media formats and integrating with more AI-powered image enhancement features. Additionally, we want to add collaboration features that allow teams to work together on text effects and share templates.

Built With

Share this project:

Updates