Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-07 23:08:24 -05:00
Code Issues Activity

Merge pull request #5461 from penpot/andy-docs-blending

Browse source 
📚 Info about layers blend and opacity
This commit is contained in:
andrés gonzález 2024-12-12 08:29:41 +01:00 • committed by GitHub
commit a5084c35b5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 27 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
docs/img/styling/blend-opacity.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.6 KiB

28
docs/user-guide/styling/index.njk
View file

@ -155,4 +155,30 @@ title: 06· Styling
<video title="Apply blur to a layer" muted="" playsinline="" controls="" width="100%" poster="/img/styling/blur.webp" height="auto">
<source src="/img/styling/blur.mp4" type="video/mp4">
</video>
</figure>
</figure>
<h2 id="blend">Opacity and blend</h2>
<p>Set the overal opacity for layers and their blend mode.</p>
<p>Blend allows you to control how a layer interacts with the layers beneath it, determining how pixels from the current layer are combined with pixels in the underlying layers. Use blend to achive various effects, such as shading, highlights, or creative visual styles.</p>
<figure>
<img alt="Layer blend and opacity" src="/img/styling/blend-opacity.webp"/>
</figure>
<p>Blend options available:</p>
<ul>
<li><strong>Normal</strong></li>
<li><strong>Darken</strong></li>
<li><strong>Multiply</strong></li>
<li><strong>Color burn</strong></li>
<li><strong>Lighten</strong></li>
<li><strong>Screen</strong></li>
<li><strong>Color dodge</strong></li>
<li><strong>Overlay</strong></li>
<li><strong>Soft light</strong></li>
<li><strong>Hard light</strong></li>
<li><strong>Difference</strong></li>
<li><strong>Exclusion</strong></li>
<li><strong>Hue</strong></li>
<li><strong>Saturation</strong></li>
<li><strong>Color</strong></li>
<li><strong>Luminosity</strong></li>
</ul>