A useful sale badge tells a shopper something precise: “20% off,” “Sale ends Friday,” or “New price.” Decide which claim belongs in the badge before drawing it. Check that the advertised price or discount matches the product page and any applicable promotion terms.
Set the size before designing
Find the largest size at which the badge will appear and create the working file at or above those pixel dimensions. A “high resolution” label alone says little; the required dimensions depend on placement. Test the badge at its smallest use, such as a mobile product card. If the text disappears there, shorten the copy or enlarge the type.
Create the shape and type
- In Photoshop, draw a circle or rounded rectangle with a shape tool. Adobe’s shape guide explains the fill and stroke controls.
- Choose one strong fill color and place the offer on a separate text layer. Leave space around the letters so the badge does not feel cramped.
- Use a simple outline if the badge will cross both light and dark areas of a product photograph. Avoid a thick shadow that obscures the product beneath it.
- Check the full composition. The badge should remain legible without covering the product feature a shopper needs to inspect.
Export and check the claim
Keep a layered PSD as the source. Hide the background and export a PNG with transparency for use over product photos; Adobe documents the PNG transparency option. Inspect the exported badge on both a pale and a dark image. If a sale date, percentage or price changes, update every placement using the badge; the graphic should never outlive the offer it describes.
Write the offer before drawing the shape
A badge is a claim made in a small space. “20% off” requires a real discount and may need dates or exclusions nearby. “New price” is less precise but can be accurate when the reduction varies by product. Decide exactly what the shopper should learn from the badge and where the full terms will appear. If the promotion expires, record where every badge file is used so the image can be removed or replaced promptly.
| Placement | Design question | Check |
|---|---|---|
| Product grid thumbnail | Can the offer be read at the smallest mobile size? | Shorten wording before shrinking the type further. |
| Product detail image | Does the badge cover material, size or another buying detail? | Move it into unused space or use a separate label outside the photograph. |
| Social graphic | Is the claim still true when the image is shared without its original caption? | Include the essential condition or avoid a time-sensitive number in the image. |
Build one reusable master
Create the badge on separate shape and text layers. A circle can work for a short percentage, while a rounded rectangle gives a longer phrase more room. Use a fill that contrasts with both light and dark product photos; a thin outline can help when the badge crosses mixed backgrounds. Leave padding around the text, and check the design at the smallest actual placement rather than only on a large Photoshop canvas.
Save the layered master with an obvious name for the offer and date. Export a PNG with transparency for use over photographs, then place that export over a pale image and a dark image to spot weak contrast or a clipped edge. Reopen the PNG to confirm that the background is actually transparent. If the badge will be printed, ask the print provider for dimensions, color and file specifications instead of assuming the web export is suitable.
Keep the graphic synchronized with the store
Before publication, compare the badge with the product page, cart price and promotion terms. A badge showing “20% off” beside a different calculated discount can mislead even if the artwork is polished. When the offer changes, update the master and every exported placement, including old social or email templates still used by the team.
Frequently asked questions
How do I make a sale badge for a product photo?
Use a short accurate offer, a readable shape and enough contrast against the product image. Test it at the smallest display size.
What file format works for a transparent sale badge?
Export a PNG with transparency and keep an editable layered source file for later changes.
How large should a sale badge image be?
Design at or above its largest intended pixel size, then check that text is still readable on a mobile product card.
What should a sale badge say?
State a verifiable offer such as a percentage, current price or end date, and match it to the product page and promotion terms.
Is the old sale badge download still offered here?
The former $1 download offer is no longer presented on this page.
