読者です 読者をやめる 読者になる 読者になる

幸せあふれる小さなおうち

シンプルでお気に入りに囲まれた、豊かな暮らし。家族みんなが幸せになれるおうちづくり、頑張ります♪

ブログデザインやプレゼンに。Adobe Color CCで写真から配色を作る

ブログ ブログデザイン

Sponsored Link

ブログカスタマイズに欠かせない色選び。
以前、簡単操作で自分好みのカラーパレット(配色)を提案してくれるツール「Palettable」をご紹介しました。

www.makeahappyhome.com

今回は、お好みの画像から自動で5色の色を抽出してくれるツールの紹介です。
例えば、ブログのヘッダーに写真をお使いで、それに合わせた配色にカスタマイズしたい方におススメです。
プレゼン資料のデザインにお困りの方にもおススメできます。

色選びでお悩みの方のヒントになれば幸いです。

Adobe Color CC(旧Adobe Kuler)

color.adobe.com

サイトを開きます。
この画面だけでも、マウスで動かすだけでたくさんの配色パターンが作成できます。
が、今回は右上の「カメラ」ボタンに注目。

f:id:charmy2016:20170302212737j:plain

ボタンをクリックすると画像を選択する画面が表示されます。
お好みの画像を選択すると、画像から色を抽出し、瞬時に5色のカラーパレットを作成してくれます。

f:id:charmy2016:20170302212738j:plain

ここから簡単に色を変更したい場合、
左にある「カラームード」で、ムードにあった配色に変更することができます。
明るい風景写真などの場合、“ ディープ ”や“ダーク”を選択してみるとだいぶ変わった印象になるのではないでしょうか。

f:id:charmy2016:20170302212744j:plain

さらに、画像の上に表示されているを動かすことによって、
指定した部分の色に変更することも可能です。

ダークの配色を、ちょっと明るくしてみましょう。
○を動かして、薄いピンクの部分を選んでみました。

f:id:charmy2016:20170302212745j:plain

出来上がった配色のコードを参照するときは、もう一度右上のボタンをクリックします。
そうすると、16進法(HEX)のコードが表示された画面に移ります。
あとはこのコードをコピーして、ブログのデザインに活かしていきます。

f:id:charmy2016:20170302212736j:plain

※Adobe IDをお持ちの場合は保存ボタンで保存することもでき、マイテーマ画面で確認できます。Adobe IDは無料で作成できます。

スマホアプリ版も

Adobe Capture CC
Adobe Capture CC | 写真を編集、シェイプをベクター画像に変換

スマホで撮影した写真から、すぐにカラーパレットを生成してくれます。
本来はAdobe CCと連携する前提のアプリなのですが、
配色のアイディアづくりに役立てられそうです。
Adobe IDがないと使用できないのでご注意ください。

余談・デザインテーマを適用したらすること

デザインテーマをテーマストアからインストールした後に行いたいのは、
「テーマ作者のブログを読んでみること」です。
なぜかといえば、作者自身がテーマについてのカスタマイズ方法やコツを公開していることがあるからです。

例えばこちら。
デザインテーマ「Spirea」を作成された、shun(id:shun_prog0929)さん。

www.ituore.com

たくさんのカスタマイズ方法を解説されています。

ここまでは詳細に解説されていない場合も多々あるかとは思いますが、
なんらかのヒントは得られると思います。
テーマへの理解が進むと、自然とやりたいことができるようになるはずです。

ブログ村のコミュニティも参考になります。
にほんブログ村テーマ ブログの記事、ブログの話題へ
ブログの記事、ブログの話題
ホームページ制作全般

ブログランキングに参加しております。クリックで応援いただけると嬉しいです^^
にほんブログ村 ライフスタイルブログ シンプルライフへ