Photoshop Question posted in
The official user guide can be found here.

How to change colors of an image using RGBA and more channels independently of their color – Photoshop

Since it is hard to me to explain what I’m trying to do, I’m gonna show you this page to show you what I’m trying to reproduce and understand:

https://optifine.net/showCape?colTop=FF0000&colBottom=00FF00&colText=0000FF&colShadow=FD0000

which outputs this:

and this one https://optifine.net/showCape?colTop=FF00FF&colBottom=0034EE&colText=000000&colShadow=FF00E2 outputs this:

You can modify the hexadecimal colors, basically I’m trying to reproduce something like that. Basically you modify the colors and it gives you an image at the end with the colors you used.

I’ve tried to make the “possible” template that could be used on the page on Photoshop which can be downloaded here, it is a .psd file, that’s because of the Alpha Channel, which I’m not even sure if done correctly. But based of these RGBA channels it should be possible to change the color. Can be downloaded here: https://workupload.com/file/4xYkgQMk

 

So what I know so far is that there is a template with RGBA channel. Each channel is indepedent so it apperantly doesn’t matter if it’s RGBA and at the end R channel is used to turn into another color other than red, where I’m not sure about that.

I’ve asked the developer he told me that these channels get interpolated with the real color after that, probably the one you choose.

Basically what is happening at showCape? and its URL parameters is that, lets assume colTop got assigned to the red channel then when you put a color in colTop it will get a fixed color that it will encode or something.

So the template has 4 Channels RGBA that can be made in Photoshop, the white color 255,255,255 means basically full and the black 0,0,0 means complete black. Like that you can setup brightness scales for the template.

I just don’t know how to modify the channels and I don’t understand how to use the Alpha channels properly or set them up.

I’m also not sure in which programming languages it is possible to peform and if you can test the template directly in something like Photoshop. Is it possible to do it in JavaScript or something to easy setup and if not on what then, to test it fast?

Tags:

2

Answers


  1. 0

    this sounds like indexed colors / palette effect from the VGA days (like plasma, water and fire) Where you change the palette (in a specific way) and image changes with it.

    The idea is that Your image/sprite does not contain RGB colors directly but color indexes from palette instead. Where part of the palette for your image/sprite contains a color gradient so gradients on image are also gradients on index (neighboring shades have also neighboring indexes). Many old pixelart sprites and images from the old days are done this way (sorted palette).

    Now you can simply chose few colors in that part of palette and interpolate the rest of the gradient (linearly or better).

    To mimic this your need:

    1. have a indexed color pixel art with sorted palette

      For example You can convert your image into BMP or GIF with palette and sort the colors.

    2. detect the part of palette with color gradient

    3. change/update the gradient

    4. re-render or recolor image.

    Login or Signup to reply.
  2. 0

    Ok, so here’s how you can generate that sort of thing with ImageMagick, which is included in most Linux distros and is available for macOS and Windows. Note that there are Python, PHP, node.js and other bindings available.

    First, generate a red rectangle:

    magick -size 200x150 xc:red red.png

    enter image description here

    Now see how to do the same thing with hex codes:

    magick -size 200x150 xc:"#ff0000" red.png

    enter image description here

    Now, draw a red rectangle with a blue one on top:

    magick -size 200x150 xc:red -fill blue -draw "rectangle 10,10 80,140" redandblue.png

    enter image description here

    Now make the blue transparent:

    magick -size 200x150 xc:red -fill blue -draw "rectangle 10,10 80,140" -transparent blue redandtrans.png

    enter image description here

    Now make a gradient from lime green to magenta:

    magick -size 200x150 gradient:lime-magenta gradient.png

    enter image description here

    Now overlay the red rectangle with transparent window onto the gradient:

    magick gradient.png redandtrans.png -composite overlay.png

    enter image description here

    Now add text:

    magick overlay.png -fill "#0000ff" -pointsize 16 -draw "text 90,40 'Coloured text'" result.png

    enter image description here

    And now do the whole thing again, in one go:

    magick -size 200x150 gradient:lime-magenta                                    
    ( xc:red -fill blue -draw "rectangle 10,10 80,140" -transparent blue )  
    -composite                                                                
    -fill "#0000ff" -pointsize 16 -draw "text 90,40 'Coloured text'" result.png

    Now you have provided a template, I can separate out the channels with ImageMagick like this and append them side-by-side with Red channel on the left, then Green, then Blue then the alpha/transparency channel on the right. I also added a red box around each one so you can see the extent on StackOverflow’s white background.

    magick template.png -separate -scale 100x +append channels.png

    enter image description here

    Keywords: ImageMagick, absolute basics, tutorial, transparency, compose, overlay, command line, image processing.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search