4

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.

enter image description here

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?

3
  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

enter image description here

  1. 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.

enter image description here

  1. 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

enter image description here

  1. 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

enter image description here

1

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) -

enter image description here

Whereas this one is with the shading -

enter image description here

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.enter image description here

  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.enter image description here

  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.enter image description here

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

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

  6. All Done.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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