画像のレタッチでコントラストを強くする際に気を付けないと「白とび」や「黒潰れ」が起こってしまいます。つまり諧調が失われてしまうわけです。意図してやっているなら問題はないのですが、そうでない場合は確認しながら慎重に作業をする必要があります。
じゃあどうやって確認するのかという事ですがちゃんと方法があります。
photoshopに限らず画像のレタッチをする際には「レベル補正」または「トーンカーブ」を使う方が多いようです。今回ご紹介するのはこの２つの調整レイヤー（調整レイヤーでなくても直接修正ができます。）を使う場合の諧調つぶれを確認する方法です。
&nbsp;
<a href="/uploads-archive/2016/08/c47d4b4d8e9ab61cd57208b1eced3f1f_s.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11731" src="/uploads-archive/2016/08/c47d4b4d8e9ab61cd57208b1eced3f1f_s.jpg" alt="c47d4b4d8e9ab61cd57208b1eced3f1f_s" width="640" height="424" srcset="/uploads-archive/2016/08/c47d4b4d8e9ab61cd57208b1eced3f1f_s.jpg 640w, /uploads-archive/2016/08/c47d4b4d8e9ab61cd57208b1eced3f1f_s-300x199.jpg 300w, /uploads-archive/2016/08/c47d4b4d8e9ab61cd57208b1eced3f1f_s-228x151.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a>
レベル補正でコントラストを上げてみます。
<a href="/uploads-archive/2016/08/1-1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11732" src="/uploads-archive/2016/08/1-1.jpg" alt="1" width="310" height="334" srcset="/uploads-archive/2016/08/1-1.jpg 310w, /uploads-archive/2016/08/1-1-278x300.jpg 278w, /uploads-archive/2016/08/1-1-228x246.jpg 228w" sizes="(max-width: 310px) 100vw, 310px" /></a>
<a href="/uploads-archive/2016/08/2-1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11733" src="/uploads-archive/2016/08/2-1.jpg" alt="2" width="640" height="424" srcset="/uploads-archive/2016/08/2-1.jpg 640w, /uploads-archive/2016/08/2-1-300x199.jpg 300w, /uploads-archive/2016/08/2-1-228x151.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a>
コントラストが強くなって若干ですが夏らしさが増しました。しかし、赤い矢印で示した白と黒のスライダーをAltキーを押しながらクリックしてみると、、、
<a href="/uploads-archive/2016/08/3.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11734" src="/uploads-archive/2016/08/3.jpg" alt="3" width="310" height="334" srcset="/uploads-archive/2016/08/3.jpg 310w, /uploads-archive/2016/08/3-278x300.jpg 278w, /uploads-archive/2016/08/3-228x246.jpg 228w" sizes="(max-width: 310px) 100vw, 310px" /></a>
Altを押しながら白のスライダーをクリックした時（白い部分が白とび）
<a href="/uploads-archive/2016/08/4.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11736" src="/uploads-archive/2016/08/4.jpg" alt="4" width="640" height="417" srcset="/uploads-archive/2016/08/4.jpg 640w, /uploads-archive/2016/08/4-300x195.jpg 300w, /uploads-archive/2016/08/4-228x149.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a>
Altを押しながら黒のスライダーをクリックした時（黒い部分が黒潰れ）
<a href="/uploads-archive/2016/08/5-1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11738" src="/uploads-archive/2016/08/5-1.jpg" alt="5" width="634" height="414" srcset="/uploads-archive/2016/08/5-1.jpg 634w, /uploads-archive/2016/08/5-1-300x196.jpg 300w, /uploads-archive/2016/08/5-1-228x149.jpg 228w" sizes="(max-width: 634px) 100vw, 634px" /></a>
それぞれが意味する所は、白・黒・R・G・Bで諧調が潰れている（とんでいる）部分にその色がついています。
&nbsp;
トーンカーブの時は同じようにAltを押しながらスライダーをクリックすると、RGBの潰れがわかります。（白と黒に関してはカーブが上枠・下枠に設置してしまうと潰れる。）
<a href="/uploads-archive/2016/08/6.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11739" src="/uploads-archive/2016/08/6.jpg" alt="6" width="318" height="402" srcset="/uploads-archive/2016/08/6.jpg 318w, /uploads-archive/2016/08/6-237x300.jpg 237w, /uploads-archive/2016/08/6-228x288.jpg 228w" sizes="(max-width: 318px) 100vw, 318px" /></a>
かなり簡単な説明になってしまいましたが、直接触ってみるのが一番わかり安いので試してみてください。
&nbsp;
&nbsp;

photoshop　白とび・黒潰れを確認する方法

I have gathered together some interesting tools, that i found out to be really useful when it comes to get an overview of the style guide of other great websites.
<a href="http://www.wirify.com">Wirify</a>
<a href="/uploads-archive/2014/08/Wirify.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5408" alt="Wirify" src="/uploads-archive/2014/08/Wirify-300x173.png" width="400" height="273" /></a>
The first tool will help you to see the internal structure of a website, to get inspired by the layouts of other well designed sites, turning any website you like to a wireframe, with just one click.
I would recommend to wait until the whole page is completely loaded before you attempt to “wirify” it. To return to the original page simply click anywhere on the wireframe.
The best way to keep the wireframe and use it afterwards is to save the whole page as an image, using a browser add-on or extension, like the following ones:
<ul>
<li><a title="Download Google Chrome Screen Capture extension by Google" href="https://chrome.google.com/webstore/detail/cpngackimfmofbokmjmljamhdncknpmg"> Screen Capture extension</a> for Google Chrome</li>
</ul>
&nbsp;
<ul>
<li><a title="Download Screengrab Firefox Add-on by Andy M" href="https://addons.mozilla.org/en-US/firefox/addon/1146/"> Screengrab add-on</a> for Firefox.</li>
</ul>
&nbsp;
Check how Wirify works in this video:
<iframe loading="lazy" width="500" height="375" src="http://www.youtube.com/embed/XgzPHFRx-xM?feature=oembed" frameborder="0" allowfullscreen></iframe>
 
<a href="http://stylifyme.com/">Stylifyme</a>
<a href="/uploads-archive/2014/08/Stylifyme.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5409" alt="Stylifyme" src="/uploads-archive/2014/08/Stylifyme-300x186.png" width="400" height="286" /></a>
Stylifyme was created to help designers gain an overview of the style guide of a site, including colours, fonts, sizing and spacing. Just copy the link of any particular site you like, and simply paste it in Stylifyme site and you will get the results in a couple of seconds.
 
<a href="http://lokeshdhakar.com/projects/color-thief/">Color Thief</a> 
<a href="/uploads-archive/2014/08/Color-thief.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5410" alt="Color thief" src="/uploads-archive/2014/08/Color-thief-300x221.png" width="400" height="321" /></a>
This simple tool helps you to grab the colour palette from an image.
Give it a try, scroll down the site and drag an image inside, Colour thief is going to reveal the dominant colour on top and the full colour palette.

Visual tools for web designers

<a class="link" title="Amazon.co.jpへ" href="http://www.amazon.co.jp/%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E2%80%95%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E5%9F%BA%E6%9C%AC%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB-%E5%B8%B8%E7%94%A8%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E5%8D%97%E9%9B%B2-%E6%B2%BB%E5%98%89/dp/4766120175/" target="_blank">「レイアウトデザイン -レイアウト基本マニュアル-」南雲 治嘉</a>
<a style="display:block;text-align:center;" title="Amazon.co.jpへ" href="http://www.amazon.co.jp/%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E2%80%95%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E5%9F%BA%E6%9C%AC%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB-%E5%B8%B8%E7%94%A8%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E5%8D%97%E9%9B%B2-%E6%B2%BB%E5%98%89/dp/4766120175/" target="_blank"><img decoding="async" loading="lazy" class="aligncenter" title="Amazon.co.jp" alt="レイアウト・デザイン" src="http://ecx.images-amazon.com/images/I/41bm80MhSQL._SL500_AA300_.jpg" width="150" height="150" /></a>
&nbsp;
WEB・印刷を問わず、デザインに必要なレイアウトの基礎が、
実例とともにわかりやすく説明されています。
これまで、それとなく使っていた基本的なことについても、それが必要とされる理由について、丁寧に説明してくれています。
これからデザインを勉強する方だけでなく、基礎を復習したい方にもとてもおすすめです。
&nbsp;
<a class="link" title="Amazon.co.jpへ" href="http://www.amazon.co.jp/%E3%82%AB%E3%83%A9%E3%83%BC%E3%83%BB%E3%83%AB%E3%83%BC%E3%83%AB%E3%82%BA-%E8%89%B2%E3%81%A8%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E7%9F%A5%E3%81%A3%E3%81%A6%E3%81%8A%E3%81%8D%E3%81%9F%E3%81%84%E3%81%93%E3%81%A8-%E4%BC%8A%E9%81%94-%E5%8D%83%E4%BB%A3/dp/4844358839/" target="_blank">「カラー・ルールズ」伊達 千代</a>
<a style="display:block;text-align:center;" title="Amazon.co.jpへ" href="http://www.amazon.co.jp/%E3%82%AB%E3%83%A9%E3%83%BC%E3%83%BB%E3%83%AB%E3%83%BC%E3%83%AB%E3%82%BA-%E8%89%B2%E3%81%A8%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E7%9F%A5%E3%81%A3%E3%81%A6%E3%81%8A%E3%81%8D%E3%81%9F%E3%81%84%E3%81%93%E3%81%A8-%E4%BC%8A%E9%81%94-%E5%8D%83%E4%BB%A3/dp/4844358839/" target="_blank"><img decoding="async" loading="lazy" class="aligncenter" title="Amazon.co.jp" alt="カラー・ルールズ" src="http://ecx.images-amazon.com/images/I/41DXbRrv52L._SL500_AA300_.jpg" width="150" height="150" /></a>
私は色の扱いが子供のころから苦手だったのですが、
こちらの本に出会ってから、色の使い方や他の色との合わせ方について理解することができました。
今は新品で手に入れるのは難しいようですが、
色の使い方についてこれから学習する方にはおすすめです。
&nbsp;
<a class="link" title="Amazon.co.jpへ" href="http://www.amazon.co.jp/%E3%83%95%E3%83%A9%E3%83%83%E3%83%88%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%83%AB%E3%83%BC%E3%83%AB-Web%E3%82%AF%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96-%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E6%96%B0%E3%81%97%E3%81%84%E8%80%83%E3%81%88%E6%96%B9%E3%80%82-%E4%BD%90%E8%97%A4-%E5%A5%BD%E5%BD%A6/dp/4844335057/" target="_blank">「フラットデザインの基本ルール」佐藤 好彦</a>
<a style="display:block;text-align:center;" title="Amazon.co.jpへ" href="http://www.amazon.co.jp/%E3%83%95%E3%83%A9%E3%83%83%E3%83%88%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%83%AB%E3%83%BC%E3%83%AB-Web%E3%82%AF%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96-%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E6%96%B0%E3%81%97%E3%81%84%E8%80%83%E3%81%88%E6%96%B9%E3%80%82-%E4%BD%90%E8%97%A4-%E5%A5%BD%E5%BD%A6/dp/4844335057/" target="_blank"><img decoding="async" loading="lazy" class="aligncenter" title="Amazon.co.jp" alt="フラットデザインの基本ルール" src="http://ecx.images-amazon.com/images/I/41BrJ-9F7UL._SL500_AA300_.jpg" width="150" height="150" /></a>
&nbsp;
今WEBで必要とされているフラットデザインについて、
フラットデザインが必要とされる背景も踏まえた上で、丁寧に説明されています。
一線で活躍されているデザイナーの方々のインタビューもあり、
いろんな角度からフラットデザインについて学ぶことができるので、おすすめです。

デザインの勉強におすすめの本(基礎編)

２週続けてcssniteに参加して参りました！
今回は『webデザイナーのための配色セオリー』ということで、 
最近悩まされているテーマ「配色」についてのセミナーでした。
講師は伊達千代さんという方で、 
<a href="http://www.amazon.co.jp/gp/product/4844361309/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=4844361309&amp;linkCode=as2&amp;tag=alantrigger-22" target="_blank">デザインのルール、レイアウトのセオリー。</a> 
<a href="http://www.amazon.co.jp/gp/product/4844358421/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=4844358421&amp;linkCode=as2&amp;tag=alantrigger-22" target="_blank">デザイン・ルールズ デザインをはじめる前に知っておきたいこと</a> 
<a href="http://www.amazon.co.jp/gp/product/4844360493/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=4844360493&amp;linkCode=as2&amp;tag=alantrigger-22" target="_blank">デザイン、現場の作法。デザイン力を鍛える仕事術</a>
といった著書があり、学校で講師をしていたりと素晴らしい方でした。
<h2>webデザイナーのための配色セオリー</h3>
内容としては、 
配色に関するセオリーや論理的に配色を組み立ていくための講義で、 
本でしか学んだことがなかったので、知っている内容であっても、 
人に教えてもらうのはまた違うなぁと感じました。
本記事で、どんなセオリーを学んだかは説明しませんが、 
(他に説明しているブログもいっぱいあるので・・・)
ちょっとした気づき、ハッとしたことを綴らさせてもらいます。
<h3>配色はセンスがいい、悪いではなく、セオリーや知識を知っているかどうか</h4>
→これは自分自身センスがいいとは思わないので、元気になるお話でした。 
先生自身もセンスはよくないとおっしゃっていたので、ホッとした記憶があります。
&nbsp;
<h3>配色を裏付ける言葉と説明の重要さ</h4>
→これはクライアントにデザインが「どうしたこうなったのか」を説明することは大事だということですが、 
認識はしていましたが、一つのデザインに対して２通りの説明をしてくれたことにより、 
その重要さを再認識しました。これは大事だな〜
&nbsp;
<h3>配色スキルは磨くほど高くなる</h4>
これはまとめでおっしゃっていたことですが、 
まぁ一朝一夕で身につくことではないですよね。。。 
まず、セオリーを把握、理解し、そこから実践し、 
いいものを研究することによって、どんどんスキルは高くなっていくということですね。
&nbsp;
<h3>イメージの言語化、イメージマップの作成</h4>
なにかのデザイン、配色をしようとしたら、まずそのイメージを言語化します。 
言語化することによって、相手に伝えやすくなりますし、自分の理解もすすみます。 
イメージマップとは、 
その言語化したものを元に見合った写真をたくさん集め、 
それをphotoshopに貼り、モザイクをかけることにより、 
イメージしたものの色のパレットが出来上がるというものです。 
今回これが一番タメになり、次の案件でぜひ試してみたいと思います。
&nbsp;
最後に
途中、スキルと言う言葉出てきたように、
配色は「センス」ではなく、『スキル』ということでしょうか。
頑張って磨いて、良い配色ができるよう精進したいと思います。

Css Nite @Coedo vol.13 webデザイナーのための配色セオリーに参加してきました！

海に周りを囲まれ、陸地の大半を野山が占める日本では、
青と緑は好まれ、デザインでも使われることが多い色です。
&nbsp;
青と緑は類似色で相性もいいので、共に使われることも多いですが、
サイトのデザインに使う場合、ほのぼのとした印象が強くなりがちなので、
スタイリッシュにまとめるのは難しい印象があります。
&nbsp;
今回は、この２色を使ったスタイリッシュなサイトを
青を多く使ったものを中心にまとめてみました。
&nbsp;
<h4>アクアシャボン</h6>
<a href="/uploads-archive/2013/06/ss_site01.jpg" target="_blank"><img decoding="async" loading="lazy" alt="site1" src="/uploads-archive/2013/06/ss_site01_thum.jpg" width="656" height="472" /></a> 
<a href="http://www.aquasavon.jp/" target="_blank">http://www.aquasavon.jp/</a>
メインビジュアルがグラデーションの効果で、きれいにまとめられています。
&nbsp;
<h4>株式会社田部</h6>
<a href="/uploads-archive/2013/06/ss_site02.jpg" target="_blank"><img decoding="async" loading="lazy" alt="site2" src="/uploads-archive/2013/06/ss_site02_thum.jpg" width="656" height="472" /></a> 
<a href="http://www.tanabeco.com/" target="_blank">http://www.tanabeco.com/</a>
サイト自体にはほとんど青が使われていませんが、
緑を中心とした写真を多く配置して、
緑を自然に感じることができます。
&nbsp;
<h4>アクアセレクト</h6>
<a href="/uploads-archive/2013/06/ss_site03.jpg" target="_blank"><img decoding="async" loading="lazy" alt="site3" src="/uploads-archive/2013/06/ss_site03_thum.jpg" width="656" height="472" /></a> 
<a href="http://www.aquaselect.jp/" target="_blank">http://www.aquaselect.jp/</a>
ロゴに軽く添えたり、写真に緑のあるものを使うことで、水と緑を感じられます。
&nbsp;
&nbsp;
<h4>住まいのGood News</h6>
<a href="/uploads-archive/2013/06/ss_site04.jpg" target="_blank"><img decoding="async" loading="lazy" alt="site4" src="/uploads-archive/2013/06/ss_site04_thum.jpg" width="656" height="472" /></a> 
<a href="http://sumai.goodnews.jp/" target="_blank">http://sumai.goodnews.jp/</a>
こちらも緑は写真メインといった感じです。
&nbsp;
<h4>特定医療法人清翠会</h6>
<a href="/uploads-archive/2013/06/ss_site05.jpg" target="_blank"><img decoding="async" loading="lazy" alt="site5" src="/uploads-archive/2013/06/ss_site05_thum.jpg" width="656" height="472" /></a> 
<a href="http://www.maki-group.jp/" target="_blank">http://www.maki-group.jp/</a>
写真や、アイコンで緑を感じられます。
&nbsp;
&nbsp;
青をメインにした場合、緑は写真で配置したり、軽く添えるくらいが
スタイリッシュにする方法としてよいようです。
&nbsp;

青と緑を使ったスタイリッシュなサイトまとめ

今回はデザイン関連のお話です。
webデザインをするとよく悩むのが配色についてですが、 
この配色を手助けをしてくれるサイト
<a href="http://kuler.adobe.com/#" target="_blank">kuler</a>
というのがありまして、たまに利用していたんですが、 
これがphotoshopやillustlater、fireworksでも利用できるということを最近知りました。
いつの間にかadobeのものになっていたようです。
csなにから使えるようになったのかはわかりませんが、 
cs6では使えました。
<h2>photoshop cs6での「kuler」の使用方法</h3>
photoshopを開きまして、下の画像の箇所からkulerがあるはずです。
ウィンドウ　＞　エクステンション　＞　kuler
<img decoding="async" loading="lazy" class="alignnone wp-image-254" title="kuler_01" src="http://blog.alan-trigger.info/wp-content/uploads/2012/09/kuler_01-1024x660.png" alt="" width="550" height="359" />
&nbsp;
kulerのパネルが出現しました！
<img decoding="async" loading="lazy" class="alignnone wp-image-255" title="スクリーンショット（2012-09-12 13.45.09）" src="http://blog.alan-trigger.info/wp-content/uploads/2012/09/スクリーンショット（2012-09-12-13.45.09）-1024x660.png" alt="" width="550" height="358" />
選択したテーマをダブルクリックすると、色をスウォッチに登録できます。
&nbsp;
上の３つのボタンの右側の作成を押すと、下のように自分で作成することもできます。
<img decoding="async" loading="lazy" class="alignnone wp-image-256" title="スクリーンショット（2012-09-12 13.46.11）" src="http://blog.alan-trigger.info/wp-content/uploads/2012/09/スクリーンショット（2012-09-12-13.46.11）-1024x660.png" alt="" width="550" height="359" />
いわゆる配色のルールが設定されているので、自分でも作成しやすいかと思います。
困った時はこれを参考にしたいですね！！
でも、こういうのに頼らずに配色できるようになりたいですね・・・
&nbsp;
&nbsp;
&nbsp;

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #配色について

2016/08/10

2014/08/05

2014/04/09

2013/06/13

2013/06/06

2012/09/13