procreate レイヤーのブレンドモードによる違い

# 何
- procreateでレイヤーのブレンドモードによる違いを調べました

## 情報源
https://procreate.art/support
Artists' Handbook

## 用語について
- 下位レイヤーの色を「ベース」、上位レイヤーの色を「ブレンドカラー」とした
- 色相(Hue),彩度(Saturation),輝度(Brightness)

## ベースとなるレイヤー
![IMG_0040.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/a347a776-f6fa-718a-53a3-c1d29e6bf9f9.png)

## ブレンドカラーとなるレイヤー
![IMG_0041.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/613ef8bc-2362-f022-8478-0723edaaa15d.png)

## 調査方法
- ベースとなるレイヤーで、横方向は同じ色を追いている。そこにいくつかのブレンドカラーを置き、ブレンドモードによる結果の違いをみる。
- 情報源では全てのブレンドモードの解説がなかった。ない場所は説明に「マニュアル記載なし」とした。photoshopのブレンドモードからきているらしいので、それで調べれば良さそう。
- 背景色もベースとして機能してしまうので、背景色は非表示とした。
- マニュアルに書いていない補足はカッコ書きにした。(xxxはyyy) 

## 標準
- (ブレンドカラーで上書きする)

![IMG_0052.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/f901325a-8a15-4538-7220-ec400ea0efab.png)

## Darken [比較(暗く)]

### Multiply [乗算]
　影をつける
　明るい場所を取り除く
　（重なった場所が暗くなる）

![IMG_0053.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/ae0297e1-f642-08fb-608d-b1444ef75864.png)


### Linear Burn [焼き込み(リニア)]
　Multiply[乗算]より暗い
　Color Burn[焼き込み]より彩度が低い

![IMG_0054.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/ffbea887-e22a-ff4d-cc0f-9c495087548c.png)


### Color Burn [焼き込み]
　Multiply[乗算]より暗い
　中間トーンの彩度は残す
　ハイライトを少し減らす

![IMG_0055.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/c16e2795-b13e-7f5c-5028-cd95c8c63cbd.png)


### Darken [暗く]
　ベースとブレンドカラーで暗い方を選択する

![IMG_0056.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/5bc184f4-9f5c-3db0-c1c0-9f97a44ad1c5.png)


### カラー比較(暗)
　*マニュアル記載なし
　(Darken[暗く]と似ているが、こちらはベースカラーと重ならなかったブレンドカラーを残す？)

![IMG_0057.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/f2be2a37-9381-bc24-62dc-7e07bd48a592.png)


## Lighten [比較(明)]

### Lighten [明るく]
 ベースとブレンドカラーで明るい方を選択する
![IMG_0058.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/64521a29-469f-a08e-23a2-78597bfd8373.png)

### Screen [スクリーン]
　Multiply[乗算]の逆
　（重なった場所が明るくなる）
![IMG_0059.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/82936da2-aae1-e06e-00c7-0f88eb3205f7.png)

### Add [追加]
　Screen[スクリーン]と似ているが、明るくする効果が大きい

![IMG_0060.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/dac7fd3a-02ca-3199-da48-404ef032c4bb.png)

### Color Dodge [覆い焼きカラー]
　Screen[スクリーン]より明るい。中間トーンが鮮やかに。ハイライトが白く

![IMG_0061.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/a5a4d769-db21-5aa6-554b-aa84a825fa5d.png)


### カラー比較(明)
　*マニュアル記載なし
　(Lighten [明るく]との差がよくわからず)
![IMG_0062.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/ab8efafc-bd69-9771-fb57-79b5d7f7613a.png)


## Contrast [コントラスト]

### Overlay [オーバーレイ]
　明るい場所はScreen [スクリーン],暗い場所はMultiply [乗算]
![IMG_0063.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/381e2e07-800d-bdaa-b6e2-7511c1e8d323.png)


### Hard Light [ハードライト]
　Overlay[オーバーレイ]と似ているが、ブレンドカラーの方の強度を使用する。
　（？　よくわからず）
![IMG_0064.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/9bfc6131-a269-dd11-0e95-84c174ba5df5.png)

### Soft Light [ソフトライト]
 Overlay[オーバーレイ]の半分の効果
![IMG_0065.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/5548769f-679b-b649-5704-dafcd11f4ff9.png)

### ビビッドライト
　*マニュアル記載なし
![IMG_0066.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/61b2a719-bf7e-2ae2-dec5-615f124dde4a.png)

### リニアライト
　*マニュアル記載なし
![IMG_0067.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/25966dad-c13f-4fbd-2af6-8d573c383277.png)

### ピンライト
　*マニュアル記載なし
![IMG_0068.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/f20f6238-4db1-4358-fdb9-0c7761665eee.png)

### ハードミックス
　*マニュアル記載なし
![IMG_0069.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/05b45c34-d256-bec3-8cfb-38adbc5db7d4.png)


## Difference [差の絶対値]

### Exclusion [除外]
　写真のネガのような効果。Difference[差の絶対値]よりもコントラストが弱い
![IMG_0070.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/23682b10-18ad-1d37-7b81-20c49690af3d.png)

### Difference [差の絶対値]
　写真のネガのような効果。
![IMG_0071.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/6c7086f2-e5ef-e45b-d0e5-4161e8afcb4e.png)

### Subtract [減算]
　ベースの色からブレンドカラーの色を引く
![IMG_0072.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/91fb76fe-38f3-3b86-f5c0-73f2e339704c.png)

### 分割
　*マニュアル記載なし
![IMG_0073.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/f1745059-3229-72ba-a664-e588323fe177.png)


## Color [カラー]

### Hue [色相]
　ベースの輝度と彩度を固定し、色相をブレンドカラーのものを使用する
![IMG_0074.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/ae8b4cb2-a560-76ea-b070-f9ae0330416e.png)


### Saturation [彩度]
　ベースの輝度と色相を固定し、彩度をブレンドカラーのものを使用する
![IMG_0075.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/cfab9ab9-0a8d-4d48-fe7e-fc3327c5d917.png)


### Color [カラー]
　ベースの輝度を固定し、色相と彩度をブレンドカラーのものを使用する
![IMG_0076.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/05156b34-bf3e-0c26-13bc-b999ddf08f9b.png)

### Luminosity [輝度]
　ベースの色相と彩度を固定し、輝度をブレンドカラーのものを使用する
![IMG_0077.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/93575e9a-44ee-355f-b87e-139b8b5ce06b.png)

## その他
- SwiftのCGBlendModeの方にも説明がある。procreateがこれを使っているかは不明。  https://developer.apple.com/documentation/coregraphics/cgblendmode