The Contrast group uses 50% gray as the base colour to recalculate the blended result. Contrastĭarken blend modes use pure white as the neutral point. The example below shows the “Lighten” blend mode. Lighten generates inverted effects to modes from the “Darken” category. Using this mode with pure black layers won’t generate any effect. Every pixel brighter than black results in a lightened output of blended pixels. LightenĪs the name suggests - the result will be lighter than the initial look of the blended layer. The example below shows the “Darken” blend mode. Darken generates inverted effects to modes from the “Lighten” category. Using this mode with pure white layers won’t generate any effect. Every pixel darker than white results in a darkened output of blended pixels. DarkenĪs the name suggests - the result will be darker than the initial look of the blended layer. The example below shows the “Normal” blend mode. If you are wondering why the very random looking “Dissolve” mode belongs to this group, you’ve just answered your own question - random. I’m not going to describe the algorithm behind each of them as there are plenty of detailed explanations out there - a brief summary of each group is enough to grasp the concept. Unfortunately Affinity Photo presents its options in a non-grouped manner (this would be worth adding in a future version). Photoshop and Sketch separate blending options into a few meaningful groups. A little bit of understanding helps and I will do my best to help you with that. It doesn’t take much time to juggle with some options in Photoshop but it can be very time consuming when the same needs to be done in CSS or JavaScript. Memorizing all the mathematical calculations isn’t required to use them effectively. However, as each pixel has a numerical representation, a large number of ways to blend two layers is possible.įor lots of designers and developers working with blend modes is a very experimental process. A-ha! Not anymore! I will show you how in a second but first let’s brush up on some theory courtesy of Wikipedia.īlend modes in digital image editing are used to determine how two layers are blended into each other. Yes - it is one of those features that designers love as it’s essentially a shortcut method for doing beautiful things but front-end developers hate them because they are laborious to implement. If you have ever used any image editing software like Adobe Photoshop, Affinity Photo or Sketch App you probably have some experience with blend modes. It is a really nice espresso but I’m going to brew more because today is the day to catch up on some CSS magic - blend modes. After reading the first three paragraphs of “Make magic with CSS” by Aga Naplocha I’ve realised that I had really fallen behind on my CSS skills. It is an ordinary Sunday morning, I’m enjoying my morning espresso shot on my sofa - time for some press. Pfff - I totally ignored it - I know everything about CSS, don’t I? It was a really nice espresso. I had a quick glance at the cover art that boldly stated “Make magic with CSS”. It was an ordinary Wednesday morning, I was enjoying my morning espresso shot at Engine Creative, when suddenly my lovely colleague Chloe put on my desk the latest issue of net magazine freshly delivered by the postman.
0 Comments
Leave a Reply. |