2

I have a texture that I split up into layers so I can change the color of each part of the design, however, there seems to be a slight white outline around some of them. Is there a way to avoid that when layering my textures? It wasn't like that before I split it up.

I took my illustrator design and split it up into color layers: blue background, pink design, black design, and a transparent grey design. Then I used a UV map to apply the images as textures and layered them using MixRBG nodes. My material setup is below. I am pretty new at this so thanks for the help!

Also I'm trying to learn about "baking" textures, is this an instance where that would be helpful?

[enter image description here] [1]enter image description here

enter image description here

I tried masking my pink and black layers but that just resulted in this:

enter image description here

Here's what those black and pink layers look like in my uv editor:

enter image description here

enter image description here

Julia Kaiser
  • 75
  • 1
  • 6
  • 2
    Hello and welcome. Please don't post the same question more than once. If your previous question was closed, address raised the issues by editing it, otherwise see What should I do if no one answers my question? – Duarte Farrajota Ramos Mar 30 '21 at 22:01
  • Are there any white areas on these background images? To me, it looks like the Alpha mask has some "feather" (fades from white to black) and it lets the background shine through Baking the texture will not help you here. You could no longer change the colors. – Blunder Mar 31 '21 at 01:32
  • @Blunder No white in anything besides the backgrounds of png files but when I bring them into blender they changes to transparent. I tried adding a mask for the pink and black layers but that just left me with very faint outlines of the designs. All of the designs are vectors made in illustrator so I don't think there should be any feathering. – Julia Kaiser Mar 31 '21 at 16:59

2 Answers2

3

The white artifacts are from the white background of your pattern images and the way you mix them.

A transparent PNG file has 4 channels (RGBA). The red, green, blue channels (RGB) create the color image. It's the colored pattern on a white background in your case.
Note: There is no real foreground and background color, just an area of pixels.

The alpha channel (A) is a grey value image. It's automatically used as a mask by most image viewers. A black (0) means transparent, a white pixel (1) means the final image is opaque at this spot.

To avoid harsh edges the alpha mask is usually blurry and has grey values (between 0 and 1) at the edges for anti-aliasing.

You may have created the images as vectors but the PNG file format is a raster image format - unlike SVG which is a vector format. So there are grey pixels.

You can see these grey pixels of the alpha mask in Blender when you just use the Alpha output of the Image Texture node: grey values

This is original image: pattern image

Long story short, how to get rid of it?

You could use a Color Ramp node to map the grey values. But this also destroys the anti-alias effect and you will get blocky edges.

After a short consideration, you come to the conclusion that you don't really need the color information. You can take a B/W image, which separates the image into the foreground (pattern) and background color. That is, you simply colorize it in Blender.

coloring nodes With help of the Fac values, you can blend between the 2 foreground colors and 2 background colors.

After looking at it, you can move this all into a Node Group: colorizer node group

Now you have 2 foreground colors to choose from, 2 background colors, and 2 mix values to blend the colors 1 and 2. The mask image defines the pattern. I've used the Alpha slot here but all you need is a B/W (grey value) image. Of course, you can use another image for the color slots. And you can have it all without any artifacts.

usage of the node group

Example with 3 masks to replicate the given image in the question: 3 layered masks example

Blunder
  • 13,925
  • 4
  • 13
  • 36
  • Thank you!! Really helpful step by step, I appreciate it! I used that for the black design which worked at eliminating the white lines around that image. Will this method work for the next layer I need to add? I assume I need to do something a little different otherwise my colors won't be correct because of an overlay of backgrounds? – Julia Kaiser Apr 01 '21 at 17:34
  • 1
    You're welcome :) If you think of masks that get colored and layered (as you probably do in illustrator) you only need to mix them with mix nodes. I've created 3 mask images from your sample image in Gimp and used them in Blender (https://i.stack.imgur.com/Wglwa.jpg). You colorize the mask and use it as a background for the next layer. Then repeat this for the next mask, etc. – Blunder Apr 02 '21 at 19:26
  • Awesome! Thank you so much for taking the time to figure that out for me, I appreciate it!! :) – Julia Kaiser Apr 02 '21 at 19:55
  • Would you know how to get this set up to export as a .gltf? I am having a hard time getting my layers to show, I keep getting a black model instead. I've been going through this page to make sure my set up is correct but it seems like .gltf isn't able to translate those mix nodes? https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html trying to – Julia Kaiser May 17 '21 at 17:01
  • 1
    You need to bake the textures and export these with the mesh data. It's the Diffuse texture without lighting. Most other 3d software, game engines, and the import/export file formats don't support Blender's nodes such as the MixRGB node. They have their own nodes or something similar. But what is supported is the Principled BSDF and the related maps (diffuse/albedo, specular, roughness, metal, etc) for the textures. That's why you need the textures. Here is a short tutorial about baking https://youtu.be/MUTdHgif65g – Blunder May 18 '21 at 21:48
  • 1
    Texture baking creates a new image from your images. It's a static image. You can't change the color for animation this way. Of course, if the software/game engine supports something similar to the MixRGB node you can replicate the node setup. – Blunder May 18 '21 at 22:05
  • Ok sweet, thank you!! I am definitely going to give that a shot! I think the solution in order to change colors is to map all my images and export the uv maps and then export a model without the textures and apply them on the other side. Its going to a 3D configurator and I think the image texture can be layered and colored in there....we shall see but I am gonna try this as well, thanks for all the help!! – Julia Kaiser May 25 '21 at 16:24
-3

okay

i found a/the solution : i've made my PNG file with adobe flash this software have an export option ( "lissage" in french ) must be "smooth" i disabled it then my png file does not have white outline !

this was the png file !

JANSKI Beeeats
  • 1
  • 2