Blog2019.07.08hoshida【Photoshop】筆や水彩で描いた画像を質感を残したまま透過させる方法Web制作デザインHTML・CSSPhotoshopシェアTweet筆で描いた写真素材の色のついた部分をくり抜くように透過させる方法です。色が薄くなっている部分もちゃんと透明度が薄くなります。完成形つまりはこのような画像をこのようにします。透過しているので背面レイヤーに色を敷けばこの通り。キャンバスというか周囲に残っている白い部分の色も変更可能です。方法それでは丁寧に解説してまいりましょう。素材となるファイルを開きます。レイヤーは複製しておきます。加工するレイヤーを選択し、レイヤーウィンドウ下部の「調整レイヤー新規作成」ボタンをクリックします。「色相・彩度」を選択します。色相・彩度のコントローラーが表示されるので、再度を一番左まで動かして無彩色にします。「調整レイヤー新規作成」をクリックし、今度は「レベル補正」を選択します。レベル補正のコントローラーが表示されるので調整します。調性方法は、グラフの左右にあるつまみを真ん中寄りに移動します。このとき、左の黒いつまみよりも左側の領域が、最終的には透明度100%に、右側の白いつまみよりも右側の領域が透明度0%になります。このレベル補正によって最終的にどの程度タッチや質感を残すかを調整することになるので、いろいろと試しながら良い位置を探ってください。素材によっても適切な位置は変わってきます。グラフ上の右側の山は残すと紙の質感が残ってしまうので、なるべくカットするようにしましょう。レベル補正ができたら、加工したレイヤーと二つの調整レイヤーをグループ化します。グループを複製します。「グループを結合」を選択して1つのレイヤーにします。オリジナルのグループは非表示にしておきます。先ほど説明した通りレベル補正が最終的な仕上がりを左右するので、最後まで作成した後で再度調整したくなった場合のために結合前の状態でバックアップを取っておくのです。(Macユーザーは「Command」です)新しくレイヤーを追加します。塗りつぶしツールでレイヤーを白く塗ります。この色は任意の色でOKです。レイヤーを選択したまま、下部の「レイヤーマスクを追加」をクリックします。追加されたレイヤーマスクサムネールを「Alt」キーを押しながらクリックします。V」でペーストします。レイヤーウィンドウの適当な場所をクリックしてマスクの編集画面から離脱すると、完成です!透過させたレイヤーの下部に新たにレイヤーを追加して塗りつぶせばこの通り。グラデーションでぬればこの通りです。マスクをかけたレイヤーの色を変えることもできます。手順はありましたがやっていることは実に単純で、元の写真でマスクを作成して、その形に応じて透過の領域を作っているということです。このテクニックを使うとこちらの画像はこのようにこの画像はこのようにこんな画像もこんな風にできます。透過してるのでテキストをいれたりしてもいい感じになりますね。用途ただ色を変えるだけであれば、元画像に対して色相を変えたりするだけでも済みます。透過画像にすることの最大のメリットは、Photoshop以外で色をコントロールすることができるということです。Webサイトにおいて、色の部分はCSSで実装することにより、水彩画風のタッチを保持しつつ、動的に色を変える仕掛けを作ることができます。してうまいことやればきれいに仕上げられます。してうまいことやればきれいに仕上げられます。他にもCSSアニメーションで色味を変えたり、動画を仕込んでみたりと色々と応用が利くと思います。Webサイトでの使用に限らず、PowerPointなどでテンプレートに使用したり、これで透過画像を作ってクリアファイルなどの透明な素材に印刷したりと色々と使いどころがありそうですね。postsよく読まれている記事です。1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。Transformの基本をおさらいしよう~translate、scale編~2018.08.20Webデザインで使用できるフォント徹底解説。posts1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。XDイラストお知らせ運用Fireworksクリエーターフォントまとめ初心者サーバ用語PHPスマホアプリjQuery息抜きDreamWeaverWebディレクターJavaScriptプログラミング仕事効率PhotoshopAdobeWordPress作業効率コーディング便利ツールHTML・CSSWEB制作現場デザイン。