Start a new topic

[Tool & Tutorial] Photoshop Custom Filter for RGB 565

======  Photoshop Custom Filter for RGB565  ======


A READY-TO-USE .PSD FILE WITH THE RGB565 FILTER IS ATTACHED AT THE BOTTOM OF THE TOPIC, FEEL FREE TO DOWNLOAD AND USE IT.


> Introduction


I've been working with Nextion Displays for a few months now (especially with the 4.3" model) among with the Nextion Editor and Photoshop to design the UI but with the latter I had some troubles with the RGB565 format.

Designing the UI of a product involves a phase when you must choose and design stuff with a precise color palette but, since Photoshop doesn't support the RGB565 mode, the final result on the display could be slightly different from the one you designed on the computer. 


image


To solve this issue I created a very simple filter (I don't know if it's the correct term to describe it) which simulates the RGB565 format in Photoshop.


(Yeah, I know that you can export BMP files with RGB565 natively from PS but that is a step further than the design phase itself)



> The RGB565 Image Format


That's easy. Every number in the "565" represents the number of bits assigned to every color channel:

  • Red: 5-bit - 32 levels
  • Green: 6-bit - 64 levels
  • Blue: 5-bit - 32 levels

image


The reason why the remainder bit is assigned to the green channel is because the photoreceptor cells in the eye are more sensitive to this particular wavelength of light and so are able to distinguish more levels of it.



> The SOLUTION : The Posterize Adjustment Layer


I'm not a Photoshop Guru and so I asked a designer friend of mine if it was possible to reduce the number of bits of an image by using any "trick" or something else. He came out with this "Posterize" filter wich is used to set the number of levels of colors of a particular image (see image below).


image


That fits perfect for our needs, now we just need to create 3 different posterize filters, one for each channel. 

..but since two channels have the same number of "levels" we are gonna create only two of them and with the "Blending Options" we will be able to choose which of the three channel will be affected.



> TUTORIAL : Creating the RGB565 Filter (with illustrated steps)


  • 1st Step: Open an image, a project or anything else you want to apply the filter to.

image


  • 2nd Step: Create the first Posterize Adjustment Layer  (Layer --> New Adjustment Layer --> Posterize...). This one will be used to filter the Green channel.

image


  • 3rd Step: Set the Posterize Layer that has just been created to 64 levels.

image


  • 4th Step: Right Click on the Layer  --> Blending Options... --> Untick R and B. (The right box should turn Magenta as shown in pictures)

image


image


  • 5th Step: Create another Posterize Layer (just like the first one) and set it to 32 levels.

image


image


  • 6th StepRight Click on the Layer  --> Blending Options... --> Untick G. (The right box should turn Green as shown in picture)

image


  • 7th Step: Group the two created layers. Now you have a togglable RGB656 Filter. Done!

image



> Conclusion

I hope this tutorial will be useful for you, if so don't forget to click on the "Do you like this idea?" link below, thanks!

- Davide Maggioni

psd

Thanks for the effort Davide.


The easiest means to 565 is rather simple

1) File -> Save As

2) Change Format to BMP (*.BMP;*.RLE;*.DIB) and click Save

3) When the BMP Options dialog pops up click "Advanced Modes"

4) Select R5 G6 B5 and click OK.


image


File is now ready to be imported into Nextion Editor as a picture Resource.

I know that you can directly export an RGB565 BMP using the procedure you pointed out. I also mentioned it right under the first picture:


(Yeah, I know that you can export BMP files with RGB565 natively from PS but that is a step further than the design phase itself)


The tutorial is intended for the people who want to design with Photoshop directly in RGB565 mode. As you can see from the images below, the former is without the filter while the latter is with the filter activated. 


image


image


There is a substantial difference between those images in terms of color-depth and that is reflected into the design phase. With the filter activated you can see how your design will actually look like on the Nextion display.

Login or Signup to post a comment