How do I put a before photo and an after photo side by side for my cleaning or salon service?
Load both photos into the collage maker with the before shot first, set 2 columns and a fixed cell shape such as 1:1, and make the gap 10 px in a color that stands out as a divider. Both halves then come out exactly the same size, even when the original photos do not match.
The steps, with the settings that matter
- Open the Image collage maker maker, add the two photos, and use the move buttons until the before shot is number 1 in the list.
- Under “Layout” pick “Grid” and set “Columns” to 2, so the photos sit in one row.
- Change “Cell shape (width:height)” from “Same as the first image” to 1:1 or 3:4, so one photo's shape does not dictate both halves.
- Set “Gap between images (px)” to 10 and “Outer margin (px)” to 0, then pick the background color that will show as the divider.
- Enter the output width, check the dimensions shown above the preview, and download as JPEG.
Two photos at a 1080 px output width, a 10 px gap, 0 margin and a 1:1 cell shape.
The output is 1080 × 535 px, each half is 535 × 535, and the divider is a 10 px strip in the background color. With a portrait 3:4 cell the output becomes 1080 × 713 and each half 535 × 713.
Mind the reading direction
The tool always places the first photo on the left and fills toward the right. An English reader starts on the left and sees before, then after. Many of your Gulf customers read Arabic first and their eye starts on the right, so they may read the comparison backwards and take the dirty carpet for the result. The clearest fix is to label each photo before combining them: add the words Before and After, or their Arabic equivalents, with the Image watermark editor tool, then build the collage. The collage maker itself does not add text.
Crop or contain for a comparison?
The default “Crop to fill” fills each half completely and trims the edges around the center. A 1600 × 1200 landscape photo in a 1:1 cell keeps its middle 1200 px and loses 200 px on each side. That is fine when the stain or the haircut sits in the middle of the frame, but the crop area cannot be moved.
If part of the result is near an edge, such as the arm of a sofa or the ends of long hair, switch to “Contain whole image”. A 1200 × 1600 portrait photo inside a 535 × 535 cell is drawn at about 401 × 535, with roughly 67 px of background showing on each side. Nothing is cut, but the background becomes part of the design, so choose its color with care.
Shooting tips that make the difference
- Take the before and after shots from the same spot, angle and distance. The comparison only convinces when the framing matches.
- Similar lighting matters more than a good camera; an after shot under brighter light can look like an exaggeration.
- It does not matter if the two photos have different dimensions, because the fixed cell shape evens out the halves.
- Everything happens in your browser, so photos of clients' homes or faces are never uploaded to a server.
Common questions
Can I put before above after instead of side by side?
Yes. Set “Columns” to 1 and the photos stack in one column, the first on top. That avoids the reading direction problem and suits a tall phone screen.
Can the divider be a different color from the outer frame?
No, the gap and the margin share the background color. If you want a divider without a frame, set the margin to 0.
Will the photos lose quality?
Each half is drawn from the original file at full resolution. A small photo stretched to fill a large cell does get softer, so use the original phone photos rather than screenshots.