CSSのブレンドモードを美しいデモでインタラクティブに学べる -Brad Woods' Digital Garden

2023/05/17 52 users インタラクティブ CSS ブラウザ デスクトップ・スマホ

CSSのブランドモードは、知っているけどあまり使用したことがないという人もいると思います。そんなCSSのブレンドモードを使用して、さまざまな美しいデモでインタラクティブに学べるサイトを紹介します。 CSSのブレンドモードは、IEを除くデスクトップ・スマホのすべてのブラウザでサポートされています。 CSS Blend Mo... 続きを読む

画像編集ソフトの覆い焼きやソフトライトといった「レイヤー合成モード」は一体何をしているのか？

2022/10/24 292 users Photoshop 一体何 画像編集 プロダクトデザイナー

Photoshopなどのデジタル画像編集ソフトウェアでは、「覆い焼き」や「ソフトライト」といったさまざまなブレンドモード(レイヤー合成モード)を用いて画像を編集することが可能です。このレイヤー合成モードは一体何をしているのかを、プロダクトデザイナーのダン・ホリック氏が解説しています。 Blending Modes | Dan Ho... 続きを読む

CSS3のブレンドモードを使えば、簡単にオーバーレイ等の描画モードを指定できる–[FIT BLOG-フィットブログ]

2017/07/20 34 users 描画モード オーバーレイ Illustrator 内藤 CSS

PhotoshopやIllustratorなどのグラフィックツールに搭載されている、ブレンドモード(描画モード)と呼ばれる機能をご存知でしょうか。要素と要素を重ねあわせることで、様々な効果を作り出すことのできる機能なのですが、実はこのブレンドモード機能、CSSの...コーディング 　内藤 康太 / 2017.07.20 CSS3のブレンドモードを使えば、簡単にオーバーレイ等の描画モードを指定できる... 続きを読む

驚きのクオリティで画像にエフェクトが適用できる、CSSのブレンドモードを使った実装テクニックのまとめ | コリス

2016/11/29 25 users コリス エフェクト CSS クオリティ 実装テクニック

.pencil-effect { background-image: url(photo.jpg); background-size: cover; background-position: center; } @supports (filter: invert(1)) and (background-blend-mode: difference) { .pencil-effect { backg... 続きを読む

CSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう – ICS LAB

2015/07/07 351 users mix-blend-mode ICS LAB ICS池田

こんにちは、ICS池田です。 mix-blend-modeというCSS3のプロパティ。これはDOMエレメントを重ねた時の見え方を指定するCSSプロパティです。今まではChrome CanaryやFirefox Aurora、WebKit Nightly Builds等の開発用ブラウザでしか使えず、実験的な印象が強かったmix-blend-mode。しかし最近(2015年5月)になってIEを除く主要... 続きを読む

CSSブレンドモードで画像を彩ろう | Webクリエイターボックス

2015/05/19 186 users Webクリエイターボックス Photoshop CSS 手法

Photoshopをはじめとしたグラフィックツールに搭載されている「ブレンドモード（描画モード）」機能。複数の画像や色を様々な手法で重ね合わせ、独特の効果をうみだします。そんなブレンドモード、実はCSSでも実装できるんです！今回はそんなCSSブレンドモードにフォーカスしてみようと思います！ 対応ブラウザー Can I use…によると、IE以外のモダンブラウザーに対応しています。ただしSafari... 続きを読む

知っておいてよかった！Web制作時に効率上げる「便利」なCSSテクニック | コムテブログ

2014/07/14 553 users CSSテクニック コムテブログ Web制作時 マルチカラム

少し前にサイト制作でさりげなく使われているCSSテクニックをまとめましたが、今回はそれを補足する形で、これから増えそうなもの、使っていきたいものを今後忘れないようにメモしておきます。 もくじ 画像 １．ブレンドモード ２．表示範囲 ３．透過＋合成 ４．半透明 エフェクト ５．マウスオーバーアイデア一覧 ６．CSSのみでメニューアイコン 段組み ７．マルチカラム ８．段の表示順 ９．コンテンツ流し込... 続きを読む

「加算」と「スクリーン」を正しく使い分けて綺麗な光を描くヒント - コンポジター地獄行き！

2014/05/18 258 users コンポジター地獄行き 加算 スクリーン ヒント レンズフレア

多くのグラフィックソフトには「加算」と「スクリーン」というよく似た2つのブレンドモードがあります。これらは合成結果が明るくなるので、レンズフレアやレーザービーム、グローなどの光を描写するときに便利です。この2つを正しく使い分けることは、綺麗な光を描く上でとても重要です。そこで今回は、加算とスクリーンがどんな計算処理をし、どんな働きをするのか、解説してみたいと思います。きっと魅力的な画づくりをするヒ... 続きを読む

『Photoshopのブレンドモード徹底解説』がすごく勉強になった | IDEA*IDEA

2013/04/12 95 users IDEA グルーピング screen Photoshop 常識

こ、こういうのが知りたかった。PhotoBlogStopのブログにて「Photoshop Blend Modes Explained」が紹介されています。 「暗めの写真はScreenでブレンドするといい感じ♪」ぐらいにしか知らなかったブレンドモードの解説です。デザイナーの方には常識かもしれませんが、個人的にすっごく勉強になりました。 ↑ そうそう、このグルーピングもわからなかった・・・。 ↑ よく... 続きを読む

Photoshop初心者さんが写真のレタッチ（色調補正）などをするために覚えたい機能

2011/01/27 1776 users 乗算 トーンカーブ 補正 スクリーン レタッチ

Photoshop初心者のころ分かりにくいなーと思った写真の補正に関する機能についてまとめてみました。レベル補正、トーンカーブはもちろん、オーバーレイ、乗算、スクリーンなどのブレンドモードについてもできるだけ分かりやすく書いてみました。WebテクニックbeginnerPhotoshop Share私は毎日使っているAdobe Photoshopですが、まだまだ使いこなせてません ... 初心者だっ... 続きを読む

Photoshop ブレンドモードを使いこなしてワンランク上の画像合成 | DesignWalker

2009/07/28 457 users DesignWalker Photoshop 方々 画像合成

Photoshopを使って複数の画像を合成する際に利用するブレンドモード。 Photoshop初心者の方々は、あまり使われない機能かもしれませんが･･･。 ブレンドモードは、上図のように、Photoshopにあるレイヤーウインドウにある設定の部分の事です。 このブレンドモードを効果的に使いこなすことでワンランクアップした画像合成が出来るようになるのではないでしょうか。 今回は、Photoshopの... 続きを読む

髪の毛などが込み入った背景を削除する方法 / ウェブデザインライブラリー

2008/02/19 574 users ウェブデザインライブラリー Alt Ctrl フィルタ 背景

投稿日：2008年2月19日　　　レベル：上級者　　　ソフトウェア： 対象を背景から引き出す3つの手法についてご紹介します。この中から気に入った方法を使って作業できます。 Step1 ： 抽出ツールを使用する Step2 ： ブレンドモードを使用する Step3 ： チャンネルの使用 画像を開きます。「フィルタ」−「抽出」を選択するか「Alt」＋「Ctrl」＋「X」キーを押してください。 パレット... 続きを読む