タグ ブレンドモード
人気順 10 users 50 users 100 users 500 users 1000 usersFigmaの基本機能で簡単につくる、テキスト&あしらい表現TIPS - ICS MEDIA
リリース以来数多くのアップデートが行われ、多機能になっていくFigma。今回はそんなFigmaの基本機能を使用した、簡単なデザイン作成やあしらいづくりに活かせる表現TIPSを紹介します。 テキストの表現 マスク機能やエフェクト、そしてレイヤーのブレンドモードを使用したテキストの表現をいくつか紹介します。 TIPS:画... 続きを読む
CSSのブレンドモードを美しいデモでインタラクティブに学べる -Brad Woods' Digital Garden
CSSのブランドモードは、知っているけどあまり使用したことがないという人もいると思います。そんなCSSのブレンドモードを使用して、さまざまな美しいデモでインタラクティブに学べるサイトを紹介します。 CSSのブレンドモードは、IEを除くデスクトップ・スマホのすべてのブラウザでサポートされています。 CSS Blend Mo... 続きを読む
画像編集ソフトの覆い焼きやソフトライトといった「レイヤー合成モード」は一体何をしているのか?
Photoshopなどのデジタル画像編集ソフトウェアでは、「覆い焼き」や「ソフトライト」といったさまざまなブレンドモード(レイヤー合成モード)を用いて画像を編集することが可能です。このレイヤー合成モードは一体何をしているのかを、プロダクトデザイナーのダン・ホリック氏が解説しています。 Blending Modes | Dan Ho... 続きを読む
CSS3のブレンドモードを使えば、簡単にオーバーレイ等の描画モードを指定できる–[FIT BLOG-フィットブログ]
PhotoshopやIllustratorなどのグラフィックツールに搭載されている、ブレンドモード(描画モード)と呼ばれる機能をご存知でしょうか。要素と要素を重ねあわせることで、様々な効果を作り出すことのできる機能なのですが、実はこのブレンドモード機能、CSSの...コーディング 内藤 康太 / 2017.07.20 CSS3のブレンドモードを使えば、簡単にオーバーレイ等の描画モードを指定できる... 続きを読む
驚きのクオリティで画像にエフェクトが適用できる、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
こんにちは、ICS池田です。 mix-blend-modeというCSS3のプロパティ。これはDOMエレメントを重ねた時の見え方を指定するCSSプロパティです。今まではChrome CanaryやFirefox Aurora、WebKit Nightly Builds等の開発用ブラウザでしか使えず、実験的な印象が強かったmix-blend-mode。しかし最近(2015年5月)になってIEを除く主要... 続きを読む
CSSブレンドモードで画像を彩ろう | Webクリエイターボックス
Photoshopをはじめとしたグラフィックツールに搭載されている「ブレンドモード(描画モード)」機能。複数の画像や色を様々な手法で重ね合わせ、独特の効果をうみだします。そんなブレンドモード、実はCSSでも実装できるんです!今回はそんなCSSブレンドモードにフォーカスしてみようと思います! 対応ブラウザー Can I use…によると、IE以外のモダンブラウザーに対応しています。ただしSafari... 続きを読む
知っておいてよかった!Web制作時に効率上げる「便利」なCSSテクニック | コムテブログ
少し前にサイト制作でさりげなく使われているCSSテクニックをまとめましたが、今回はそれを補足する形で、これから増えそうなもの、使っていきたいものを今後忘れないようにメモしておきます。 もくじ 画像 1.ブレンドモード 2.表示範囲 3.透過+合成 4.半透明 エフェクト 5.マウスオーバーアイデア一覧 6.CSSのみでメニューアイコン 段組み 7.マルチカラム 8.段の表示順 9.コンテンツ流し込... 続きを読む
「加算」と「スクリーン」を正しく使い分けて綺麗な光を描くヒント - コンポジター地獄行き!
多くのグラフィックソフトには「加算」と「スクリーン」というよく似た2つのブレンドモードがあります。これらは合成結果が明るくなるので、レンズフレアやレーザービーム、グローなどの光を描写するときに便利です。この2つを正しく使い分けることは、綺麗な光を描く上でとても重要です。そこで今回は、加算とスクリーンがどんな計算処理をし、どんな働きをするのか、解説してみたいと思います。きっと魅力的な画づくりをするヒ... 続きを読む
『Photoshopのブレンドモード徹底解説』がすごく勉強になった | IDEA*IDEA
こ、こういうのが知りたかった。PhotoBlogStopのブログにて「Photoshop Blend Modes Explained」が紹介されています。 「暗めの写真はScreenでブレンドするといい感じ♪」ぐらいにしか知らなかったブレンドモードの解説です。デザイナーの方には常識かもしれませんが、個人的にすっごく勉強になりました。 ↑ そうそう、このグルーピングもわからなかった・・・。 ↑ よく... 続きを読む
Photoshop初心者さんが写真のレタッチ(色調補正)などをするために覚えたい機能
Photoshop初心者のころ分かりにくいなーと思った写真の補正に関する機能についてまとめてみました。レベル補正、トーンカーブはもちろん、オーバーレイ、乗算、スクリーンなどのブレンドモードについてもできるだけ分かりやすく書いてみました。WebテクニックbeginnerPhotoshop Share私は毎日使っているAdobe Photoshopですが、まだまだ使いこなせてません ... 初心者だっ... 続きを読む
Photoshop ブレンドモードを使いこなしてワンランク上の画像合成 | DesignWalker
Photoshopを使って複数の画像を合成する際に利用するブレンドモード。 Photoshop初心者の方々は、あまり使われない機能かもしれませんが・・・。 ブレンドモードは、上図のように、Photoshopにあるレイヤーウインドウにある設定の部分の事です。 このブレンドモードを効果的に使いこなすことでワンランクアップした画像合成が出来るようになるのではないでしょうか。 今回は、Photoshopの... 続きを読む
髪の毛などが込み入った背景を削除する方法 / ウェブデザインライブラリー
投稿日:2008年2月19日 レベル:上級者 ソフトウェア: 対象を背景から引き出す3つの手法についてご紹介します。この中から気に入った方法を使って作業できます。 Step1 : 抽出ツールを使用する Step2 : ブレンドモードを使用する Step3 : チャンネルの使用 画像を開きます。「フィルタ」−「抽出」を選択するか「Alt」+「Ctrl」+「X」キーを押してください。 パレット... 続きを読む