1

Background

I manage an e-commerce app where we expect merchants to submit their own images, these images appear on our mobile app.

In order to maintain proportions, I send the merchants this instruction: enter image description here

The idea is to have avoid this situation where the merchant sends us something like this enter image description here

and it appears on the app like this enter image description here

Question

In the case the merchant sends something like this (with a white background with shadows): enter image description here

simply expanding the image and copying the color won't work, as it will look like this: enter image description here

is there a plugin/way to address this shadow issue to make the background blend in? I use sketch primarily, but open to using photoshop etc.

Improve this question
2
  • I don't think there is an automatic way to fix this. The image needs to have a larger "safe zone" to begin with. A larger margin without important content. Or it must be manually cut out/manipulated in an editing application to have the same color around the edge.
    – Wolff
    Commented Dec 23, 2019 at 12:05
  • 1
    Sketch app is a vector application - it can't edit photos. You'd need to edit it in a raster image editor such as Photoshop/GIMP, but there's nothing that will fix it automatically. It would take considerable manual editing.
    – Billy Kerr
    Commented Dec 23, 2019 at 12:52

1 Answer 1

Reset to default
1

I do not know of any app that can invent shadows for now.

I am understanding that you are the one reframing the image, not them. But in my opinion, your solution of adding that gray "passe-partout" framing, and then blending the shadow is not a viable solution at all.

Your initial diagram needs improvement. You need to teach about safe framing and safe zone.

This is better. You are NOT telling your clients they can do things WRONG, and you are explaining a bit better why you need a zone.

enter image description here

But it still is not right. And that is because of the fork and spoon. What you need to be in the safe zone is the dish, not the additional elements on a photo. Not the table, not glass, not a spoon.

So, let us modify your image again

"Please keep the main dish inside the safe zone"

enter image description here

But we have a problem. Take a look at some food photos:

https://duckduckgo.com/?q=food&t=h_&ia=images&iax=images and some more

https://pixabay.com/es/images/search/food/

The vast majority of food photos have already a tight frame and no extra space at all. And are not even photos with a white background.

This is something you probably need to fix in your app. If your app needs that extra space because you use some kind of zoom effect, reduce the ratio of the final versus the initial zoom.

If you use a photo at 100% initial size and 120% as the final size reduce it to 110%.

Or even leave a white space reducing the initial zoom at let's say 95% and the final zoom at 100%.

You can also use a parallax effect so all the photo is shown when scrolling across the screen.

Let's hope your app is a success, and you now have thousands of clients. You can not add shadows to the photos, can you?

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.