0

色面積で印象を強くする

色の面積を大きくして形をよりはっきりと見せることで、力強い印象になります。

 

色面積を大きくして、力強い印象にする

 

ホームページ制作のデザインにおいて、デザインにメリハリをつけるために
ある箇所を強調したいときがあります。
そういったときは、色ベタの面積を多くすると力強い印象になります。

 

注目させたい部分には大きな面積を配置することも効果的です。
例えば、タイトル部分に大きな色面積を使用すれば、そこに視線が集まり
目立ちやすくなります。

 

また、少し話がそれますが、
そこの近くに同じ色の小さな色面積を配置すると、大きなものと比べて
色の濃淡が異なって見えます。
大きな色面積は本来の色よりも「薄く」見えます。
小さな色面積は本来の色よりも「濃く」見えます。
これを「面積対比」と言います。

 

※色ベタとは
指定した範囲に濃淡をつけずに、色をおくこと

 

0

photoshopでフォトレタッチ(肌の修復)

20130610135458mae

写真の修復は、絵画の修復のようなイメージで取り掛かっています。

使うのは主にphotoshopのスタンプツールです。

人の肌の修復はもっとも難易度が高いです。グラデーションが細かいので、

丁寧に少しずつしないとキレイに消せません。

簡単なのは、草や柄の無い布、ですね。ホームページ制作ではこのような作業が意外に多いです。

まず、やりやすいほっぺたや背中はパッチツールかスタンプツールで肌をコピーし

傷を消していきます。↓大体消した所

?スタンプのみ

 

さらに目立たなくするために、

指先ツールでぼかします。

ぼかし

目の所はエアブラシの不透明度:例えば20%にしたもので描いていきました。

pixcelレベルにズームアップし、修復したら→ズームアウトして観察をマメに繰り返していきます。

目じりの影の紫色やまぶたの肌色をピクセルの■一個一個がら取ってきて、周りの色と同じ色になるように塗ります。

め

できました。

20130610135458

0

共通色を使った表現

■ホームページ制作時のデザインにおける配色について説明します

 

共通色を上手く使った表現方法

 

コンテンツの内容が豊富で要素が多く、全体がごちゃごちゃしてしまった・・・
そんなときは離れた場所に同じ色や同系色・類似色を配置することで全体が
まとまりやすくなります。

 

ここでポイントなのは、近い場所ではなく、離れた場所かつ
大きな色面積と、小さい色面積を組み合わせた方が効果が
出るということです。

 

これらを上手く活用することで、全体がまとまり、
引き締まった印象を与えることが出来ます。
また、色面積を大きくすると力強く活気のある印象を与えることも出来ます。
こちらに関しては、また次回に説明させていただきます。

 

0

コンセプトから配色用カラーパレットを自作する

Web制作のカラーリングの方向性を決める時に、無限の色の中からでは迷うことがあります。

CSS niteの勉強会で習ってきたオリジナルのカラーチャートの作り方です。

Kularのパレットは便利で有名ですが5色くらいなのでもう2、3足りないことがあります。これならカバーできます。

 

クライアントから寺をテーマにしたサイト依頼があったとします。

寺から落ち着き、緑の豊かさ、静謐、伝統などのキーワードを派生させ、イメージを膨らませます。

写真を集めてphotoshopで切り張りします。

tera

photoshopフィルタのモザイクをかける。細かすぎず

大きすぎずの所で調整するのがポイント

parette

必要に応じて、トーンカーブでコントラストを付けて明るさだけ調整してください。

地味な中に、差し色が入った結果となりました。

これを知る前まではただ茶色や緑の重みのある色をそれらしく並べていたと思いますが、

全体を引き締める差し色の役割が大事だと学びました。

 

0

中性色でまとめる配色

 

ホームページ制作における
緑や紫などの中性色で配色をした際のポイントや効果について

説明します。

 

中性色で独特な雰囲気を出す配色方法

 

●ポイント
中性色は寒暖や男女らしさのイメージがつきにくく、不思議なイメージを
与えます。
明度の高い組み合わせだと、軽さが出るので比較的他の色にも合わせやすい
ところがあります。
また、彩度が高いとミステリアスなイメージを与えます。

 

紫でまとめると優雅で上品、大人の女性をイメージさせます。
緑でまとめると癒しや、落ち着いたイメージになります。

 

最後に紫と無彩色(黒、白、グレー)を合わせるとクールに見せたり、
モダンに見せることも出来ます。

 

ホームページ制作で中々こういった色を使うことは少ないかも
知れませんが、こういった配色もあります。

0

室内写真の画像補正をする

室内写真の画像補正をする

ホームページ制作やDTPで、撮影した写真をそのまま使用できる時もありますが
下準備が必要なこともあります。今日はインテリアの補正についてです。

 

まず、全体を見て見栄えが良くないもの(ゴミや段ボールなど)が写っていたらチェック。スタンプツールで消します。

次に…室内は暗くなりがちです。
いらない物が消せたらトーンカーブで全体を明るくします。

さらに印象を明るくするために、小物の色彩だけを選択し、鮮やさを強調すると
全体の印象まであかるく見えます。

例として植木の緑をイキイキとさせる方法です。

先輩から聞いた早いやり方を紹介します。

名称未設定-1

補正したい所を長方形選択ツールで適当に選びトーンカーブをクリック。

上に引っ張って全体を明るくします。

名称未設定-6

Rだけを減らすと緑が強くなります。

名称未設定-8

Bをこの方向に引いて黄色を足すと黄緑っぽくなります。

名称未設定-7

マスクしてある所を消しゴムのブラシで葉っぱのカタチに合わせて消します。

名称未設定-9

丁寧に作業していくと、、、全部葉っぱのカタチが鮮やかな緑になりました。

名称未設定-10

0

モノクロにして色を強調する方法

 

ホームページを制作するときのデザインについて、
目立たせたい箇所をカラーにし、他の箇所をモノクロにすることで
そこのカラー部分が強調される法則について説明します。

 

モノクロにして色を強調する方法

●モノクロ画像の特徴について
モノクロの画像は彩度よりも明度で表現する分、カラーよりも
情報量が少なく、やや抽象的な印象になります。
モノクロの一般的な特徴としては
時代感を出したり、まるで時が止まっているような感覚を
見る人に与えます。
また、被写体によっては知的で芸術的な印象を与えます。

 

●一部分のみカラーを残して、モノクロにする
色を強調するうちの一つとして、一部分のみカラーを残し
ほかをモノクロに加工することで、カラー部分が浮き上がり
ドラマチックな印象になります。

 

色を多く使用すると、悪い言い方ではありますが雑な印象に見えることがあります。
そういったときに、上記の方法を行うことで印象が落ち着き、
文字や素材が配置しやすくなります。

ホームページ制作をしていく中で、配置について悩んだりした際は
この方法もぜひ、視野に入れてみてください。

0

描画をパスにするか ビットマップにするか

 

このような吹き出しをつくる時にどんな手順がふさわしいでしょうか。
光が左上に丸くかかっているので、
直線のグラデーションツールでは塗れません。
下の階層の矩形をマットな青にしておいて、
もう1レイヤー上から重ねるようにエアブラシで描くことにしました。

上が完成例、下はギザギザしている失敗例です。

path

 

両者の違いは上はパスで描いたこと、
下は選択ツールで楕円形を選択し、中を塗って吹き出しにしたことです。

まず、楕円形ツールで楕円形を作ります。

 

名称未設定-3

 

次に、ペンツールに持ち替え、シェイプを選びます。塗りを青にします。

?名称未設定-2

しっぽを描いて用意します。角度を切り替える時はALTを押しながらするとできます。

名称未設定-4

 

二つを選んでから、レイヤー→シェイプを結合、で合体します。

名称未設定-5

 

効果レイヤーでドロップシャドウをかけ、境界線の外側【または光彩(外側)サイズを9px、スプレッド77%】にすると完成です。

ラスタライズをすると、ペイントのように矩形を塗れるので、扱いの自由さが好きですが

このようなきちんとしたカタチをかく時は、単純な選択範囲ではダメで、きちんと描かねば…と学びました。

0

ドロップシャドウの法則

itaku_03

これはあるホームページの一部なのですが、いくつの影が使われているでしょうか

 

矢印の所など、ホームページの中にたくさんありますね。

itaku_04

 

 

左からです。厚みのあるシールに見せる光です。

下のはがれているところは下に少し広く、ふんわりした影にします。

メールアイコンの影は、シールの影と少し役割が異なります。下地のオレンジから視認性を高めるために、濃い色を「光彩」で2pxくらいかけました。

ホームページ制作における視認性について書いてある投稿へ

不自然にならないよう、オレンジ系の光彩にするのがポイントです。

 

ホームページで読ませたい赤い電話番号の光。これは、レタープレスエフェクト風に制作しました。

スマホの方はタッチでコールの噴出しの影、これは他の箇所が上から光が当たっているので、「べベルとエンボス」はもちろん下にかけます。

影の方向が、バナー内でこっちの文字は上から、こっちの文字は下から、あるいは横から…とバラバラにならないように。さらに、ホームページ内でも、方向は統一した方がいいです。

最後に、このプレート自体の下側にもさりげなく、影が付いています。

プレートも、真ん中の方が少し薄い色になっていて、金属みたいな質感にしています。

影を繊細に付けてホームページ制作をすると、品質が良く見えます。

 

0

デザインのチェック方法(コンテンツの評価について)

デザインの内容の評価について

●テイストの統一感はあるか?
※クール、モダン、フェミニン…例えばレトロなバナーが一個でも混在してたら、不安定です。

●行間、文字間は十分か?

●ジャンプ率は十分か?

●ロゴマークは使用許可のあるものだけになっているか?

●英文のつづりは正しいか?

●日本語の住所などもチェック。

●リンクのある所はクリックできそうに見えてるか?

●デザインの重さのバランスチェック。

●メインイメージのバランス
※写真は、ど真ん中ではなくすこしはずすとかっこよく見えます。

●フッターが間延びしてないか。

●テキストシャドウのかけ方が、統一されているか。

——————————-表から見えない所の注意———————————–

●ユーザビリティのため、sitemap.psdも用意しているか。お問合せフォームがあるサイトは

コーダーさん用にthanks.psdも作っておく。

●コーダーさんが分るように隠しレイヤーに” roll-over”と名前をつけ、

マウスオーバーしたときのgnavの色の変化したデザインも作っておく。