How can I blend this white dot into the fabric background layer?

Question

I'm working on an asset for a game mod, and I'm trying to put a custom logo on a banner texture. The banner behind the white dot/logo is a dark-red burlap texture, but I'm having issues with blending the dot into the fabric so it looks painted on or sewn into the banner.

I ran through all the layer mode options and none of them do the trick - they all make the dot disappear, turn bright pink, or turn flaming bright red.

I'm using Photoshop CS5, in case that matters. I assume there's some trick to this that I'm missing... maybe using the burlap pattern as a pattern overlay in blending options for the layer?

How can I realistically blend this white dot into the fabric layer behind it?

Answer 1

1. Using the texture you already have as the background layer, draw a filled white circle on a layer above

2. Duplicate the background layer, and drag it above the circle layer.

3. Alt+click between the two layers to clip the background layer copy to the white circle layer.

4. Set the layer blending mode of the background copy to Multiply

5. Add a Hue/Saturation adjustment layer to the circle layer, drag it above the background copy layer, and completely desaturate, and increase lightness a touch, as shown below

6. Add a Levels adjustment layer to the circle layer, drag it above the Hue/Saturation adjustment layer, and make adjustments to the levels sliders as shown below

7. To add a bit more realism, you could also select the background copy layer and apply Filter > Render > Lighting effects, with settings shown below. This will add more of a textured/embossed feel.

8. Further levels of realism are also possible, if you fill the entire circle layer with white, and save the image out as a displacement.psd file

9. Then, undo the changes to the circle layer, select the circle layer, and apply Filters > Distort > Displacement, set the horizontal and vertical scale to 2, and when prompted choose the displacement.psd you already saved as the source.

The result (shown below at 100% zoom) gives the illusion that edge of the circle is slightly distorted by the troughs and ridges of the texture

Answer 2

What I usually do is I find the shading that already exists in the background and simply brush it in onto the top layer, then add a few layers of textures to give it the painted effect.

The following is a quick example of what you can do. Don't mind the jank.

This one is with only the texture (without the shading) -

Whereas this one is with the shading -

PROCESS I USED TO GET THIS RESULT:

1. Find a desired texture. Desaturate it, change the levels (optional). Reduce the opacity to soften the sharp texture. Create a clipping mask to the white circle.

2. Go to Select > Color Range and click on the shades. Increase or decrease the fuzziness based on how much you want to select. Click OK.

3. Choose what color you want fill the selection with. It's usually the best to use the Eyedropper to choose a color that would be right beneath the paint.

4. Fill the selection with a paint bucket tool or brush it on. Then, deselect.

5. The edges will be quite sharp and jagged so a little bit of Gaussian blur doesn't hurt.

6. All Done.