Beauty Brand Hero Banners: A First-Time Operator’s Photo-Cropping Workflow

A wide banner for a beauty brand can quickly show a product’s texture or how it is used. But fitting a photo into a wide area can crop out a container, label, or other important detail. If this is your first time editing one, do not start by zooming into the photo. First decide what the banner needs to communicate and how the image should be cropped, then inspect it in the actual page layout.

1. Decide the banner’s purpose and the photo it needs

Write down the banner’s purpose in one sentence: introducing a new product, promoting a seasonal campaign, or directing visitors to a product category. The image’s focal point depends on that purpose. For a new-product banner, the container and label may be most important. For a product-use banner, the application gesture or the product’s texture may matter more.

• Note where the banner will appear and what it should do. Example: introduce a new serum on the homepage.
• Draft the headline and button text that will appear on it.
• Check that you have the rights needed to edit and publish the chosen photo.

**Hypothetical example:** For a banner about a new serum, shortlist a photo in which the bottle label is visible. Treat a hand or floral decoration as a supporting element. This illustrates an editing choice; it does not imply anything about a real product’s performance.

2. Check the original and the display area before editing

Keep a separate copy of the original photo, then check the banner area’s width-to-height proportions in your editor. If the image is displayed differently on different screens, the same source can be cropped in different places. Rather than guessing a fixed dimension, use the banner area shown in the editor as your reference and inspect the result on the published page. If the product edge or label is already missing from the original, zooming in or out cannot restore it.

• Duplicate the original file to create a working copy.
• Decide how large the product should appear and where you need open space for text.
• Check the image frame available in the editor and compare it with the result on the live page.

TalkTalkMySite supports searches for licensed stock images and videos. Even when choosing a search result, check whether its subject and composition suit your banner. Review the applicable usage terms through the relevant service; do not assume that every result has identical conditions.

3. Place the photo and set its focal point first

Add the photo to the editor and adjust its size and position so the important parts of the product remain inside the banner area. The subject does not have to sit in the exact center. If the headline and button will be on the left, you can move the product to the right to make room and keep the copy from covering the image’s main subject.

• Identify details that must remain visible, such as the label, cap, or product texture.
• Leave some breathing room around the edges in case the display crops them.
• Temporarily place the headline and button in the open area to check for overlap.
• If a decorative element or model’s face draws more attention than the product, reconsider its position or size.

Review the crop and text placement together. If you add the text only after finalizing the crop, the product and copy may collide, forcing you to reposition the subject.

4. Review the banner on desktop and mobile

A composition that looks right on a wide screen is not guaranteed to look the same on mobile. Check how the banner is cropped in each preview and make sure the product’s identifying details and the copy remain visible. Do not assume the editor guarantees an identical crop on every device; inspect the actual published page as well.

• In desktop and mobile previews, check that the product, label, headline, and button are not cut off.
• Check whether the text becomes hard to read against a bright or visually busy background.
• If the problem appears on only one screen size, adjust the image position and review both views again.
• After publishing, check the banner’s appearance and button behavior on the live site.

TalkTalkMySite offers visual editing for reviewing the banner layout, and AI chat can help generate ideas for copy or placement. However, AI suggestions are not guaranteed to reflect your brand voice or product details accurately, so review them yourself before publishing.

5. Save the crop and record what you checked

Before saving the final crop, make a brief note of the banner’s purpose, the source file, text placement, and which screen sizes you reviewed. That record makes it easier to reuse your decisions for the next campaign. TalkTalkMySite supports hero sliders with up to five images. If you use multiple slides, check that the focal point and copy on each one work together rather than compete.

• Keep the final version separate from the original.
• Record when you checked desktop and mobile and what crop adjustments you made.
• If the banner has multiple slides, review each image’s order and copy together.

Cropping a wide banner is not a one-time task that ends as soon as the image fits. You need to review the focal point, text, and display on different devices together. For your next step, duplicate the photo you plan to use, write down the banner’s purpose and the details that must stay visible, then inspect both desktop and mobile previews.