タグ: Adobe

※引き続き、説明の図版イラストなどは権利関係問題で使えません。

<図形を使って考える配色>

◯配色とは2つ以上の色を組み合わせて新たな効果を生み出すこと

　●向かい合う2色(補色) /色相環で180度向かい合う2色

　●二等辺三角形(分割補色) /補色を両隣の色に置き換えた組み合わせ

　●三角形(トライアド) /色相環で正三角のバランスの取れた対照色　

　●正方形(テトラード) /正方形の組み合わせで2組の補色でもある

　●五角形(5色配列)・六角形(6色配列)などもある

※図形を使う配色は、いずれもコントラストが強くなり用途が限られるため、各色の彩度や明度の調整を行う。

<色相を軸にした配色>

◯配色を考える時は、まとまり感を出すのかメリハリ感を出すのか、方向性を決める

　●類似色相でまとまり感・対照色相でメリハリ感

<明度差で考える配色>

◯色相差があっても明度差がないと見えづらい

　●高齢者向けなど目的に応じた明度バランスを考える(ユニバーサルデザインにも通じる)

<トーンで印象を決める>

◯トーン図を使って配色を考える

　●類似トーン /隣り合う色は全て類似トーン /まとまり感

　●対照トーン /縦方向は明度・横方向は彩度の対照トーン /メリハリ感

◯それぞれのトーンごとに表現しやすいイメージがある

　●ごくうすい /軽い・優しい・柔らか・上品

　●つよい /情熱的・活動的・はっきりした

　●くすんだ /ぼんやり・鈍い・シックな

「アタチはうすい色でも強くて活動的だわっ!」「拙者はつよい色でもぼんやり鈍いのでござる」

◯トーンは印象を左右する

　●フレッシュで活動的な色使い(ライトトーンやストロングトーン)

　●円熟した落ち着きのある色使い(ライトグレイッシュトーンやダルトーン・ディープトーン)

<デザインの配色テクニック>

◯セパレーション /文字の縁取りなど

◯細かな柄で変化

◯遠景は明るく淡く

◯目の錯覚を応用

<色を効果的に使う表現例>

◯グラデーションの種類

　●色相・明度・彩度

　●色相の変化を大きく・小さく

　●トーンを全て変える

　●明るく淡いトーン→暗く濃いトーン

◯ベースカラーとアクセントカラー(差し色)のバランスを考える

※ベースとアクセントの間を取り持つ色はアソートカラーと呼ばれ、通常ベースと似たものを使うが、アクセントと似たものでも良い。

<Adobe Color>

◯Adobe ColorとはWeb上で使える配色ツール /基本はカラーホイール

　●カラーホイール左のカラーハーモニールールの中から、求めている色を選ぶと、自動的にバランスの取れた5つの色を提案

◯画像から配色やグラデーションを作る

　●画面上にドラッグ&ドロップした画像から自動的に色を抽出・手動で個々の丸を動かすとカラーパレットの色も連動

　●画像から自動的にグラデーションを抽出・スライダーで調節

　●作った色をライブラリに保存・呼び出し(ウィンドウ→CCライブラリ→ライブラリ)

※コントラストチェッカーで文字色・背景色を指定すると、読みやすさ判定される。(多様な色覚対応)

※AIさん画像を色覚別に加工して並べてみました。左上が元の色。

　↑Adobeを使っていなくてもGoogle Chromeを入れているなら、拡張機能で色覚別の見え方を確認できるものがあります(Colorblindly) このサイトも見え方を確認しながら作ったんですよ。

　人によっても年齢によっても、みんな違う色を見ているのを、忘れちゃいけないですよね。

2023-09-25

　※前回のフォントも同様でしたが、説明用の図解・イラスト・写真類は権利関係の問題で使えません。文章説明だけで分かりづらいと思います。

カラーモードの意味を知る

<光の色・インクの色>

◯光の三原色(RGB) /赤(R)緑(G)青(B)　

　混ぜるとあらゆる色ができる(テレビ・PCモニター・スマホ)

◯インクの三原色(CMY) /シアン(C)マゼンタ(M)イエロー(Y)

　黒インク(K)と白い紙であらゆる色を出す

<画面で見る色をプリンターで出力すると暗く濁って見えるのはなぜ?>

◯光の混色は混ぜるほど明るく白くなり、インクは混ぜるほど暗く黒くなる。RGBとCMYでは再現できる色の範囲が違う。

　※印刷で再現しづらい色は特色を使う(例・金 銀 蛍光色など)

<イメージが大きく変化する色域>

◯モニター上では明るく鮮やかな色が表現できるが、プリンターではイメージが大きく大きく変化する色がある。印刷が前提の作品では注意が必要。

<感覚的に色を探せるHSB>

◯Photoshopではウィンドウ(W)→カラー(C)でHSBスライダーを開く→スライダーを左右に動かして色調整

<Webカラー(カラーコード)とは>

◯16進数を使った色の表示法

　●数字とアルファベットを組み合わせた色表示(左の2桁/赤・中央の2桁/緑・右の2桁/青)　

　●PhotoshopではカラーピッカーやWebカラースライダーなどで扱う(カラーピッカーではさまざまな色表示が一覧できる)　　　　　

色の表記と心理効果

<色を表す時は3つのモノサシを使う>

◯色相 /色味の違い

　●色相が循環する円を色相環と呼ぶ。(Adobe Colorのカラーホイールなど)

◯明度 /明るさ

◯彩度 /鮮やかさ

　●色彩学では縦方向に明度・横方向にサイドの軸を取るのがルール。

　●色を表す3つのモノサシのうち明度・彩度を合わせたものをトーン(色調)と呼ぶ

　※色は立体(三次元)で表すのが本来だがトーンを使えば平面で表せる

　●日本の産業界ではマンセル色相環が使われる

<色の心理効果>

◯暖色(赤/オレンジ/黄)・寒色(青/青緑/青紫)それ以外は温度感のない中性色

◯進出色・後退色

　●等距離にある色は暖色ほど近づいて感じられ、寒色ほど遠くに感じられる

※AIさん画像を元に近付く球体と、遠ざかる球体を作ってみました。そのように見えますか?

◯背景色が変わると図色が変化する(色相対比)

　●図色は背景色によって影響を受け変化して感じられる

◯明度がもたらす心理効果

　●膨張色・収縮色

　●白いロゴは大きく、白文字は太く見える

　※白と黒の心理的な重さの比重は1対1.87 /荷物の運搬では軽く感じられる明るい色の箱、プレミアム感を出したいパッケージには暗い色が使われる。

　●安定感を出す /下の方に大きな面積で暗い色を配置

　●動きや躍動感を出す /上の方に暗い色を配置

◯彩度がもたらす心理効果

　●派手な色 /彩度の高い色は華やかで目立つ

　●地味な色 /彩度の低い色はシックで馴染みやすい

※AIさんの作った画像を加工しています。

「遊園地来たけど誰もいないよ?」もう閉園の時間でしょ。それにアンタいったい誰なのよ!?

2023-09-25

※この辺もうホントにつまらんのでざっと流します。勉強内容を知りたい方以外は、可愛い猫写真だけ見て行って下さい。

4つの基本原則

◯近接 /関連する要素は近づけてグループ化

◯整列 /全ての要素を整列させれば一体感が生まれ見やすい

◯反復 /デザインの特徴を全体で繰り返し統一感と一貫性を生む

◯コントラスト /要素に強弱をつけ優先順位や重要性を伝える

　●文字の大きさ・はっきりとした色の違いなど

文字の使い方

◯フォント(書体)とは /共通したデザインの一揃いの文字の集まり

<フォントの分類>

　●和文フォント /明朝体・ゴシック体・その他デザイン書体など

　●欧文フォント /セリフ体・サンセリフ体・その他

<フォントの使い分け>

　タイトル・見出し・ワンポイント・長い文章で使い分ける

　※長い文章は読みやすく、使うフォント数は少なく

文字組み

◯文字間調整(カーニングとトラッキング)

　●カーニング /選択した個別の文字間隔の調整

　●トラッキング /選択した文章の文字間隔を一律調整

◯行間調整(行送り) /1行目の文字の上から2行目の文字の上までの間隔

　※最適な行間は文字サイズの50~100%・行送り1.5~2倍

◯文字サイズ(ジャンプ率) /見出しと本文の文字サイズの差

　※ジャンプ率が高いと躍動的・低いと落ち着いた印象になる

　これでやっと2回目オンデマンド授業の分が終わりです。色々予定通りに行かないハプニングがあって、かなり遅れています。果たして今週追いつけるのでしょうか!?

2023-09-23

◯トリミング /いらないところを切り取り必要な部分だけ表示

　●どんな構図で使いたいか・水平垂直のラインは合っているか

　●サイズが小さくなりすぎないか・不自然に見える場所で切っていないか

　見せたいのはドンごろーの寝姿だけなので、ごちゃごちゃしたモノをなるべく切り取ってみます。その結果3024×4032だった画像が1500×2000まで下がってしまいました。横の線は水平になるように直しています。

デザインと写真

　◯写真を使えば見る人の目を引き、文字より早く情報を伝えられる。

　　●イメージに合っているか

　　●文字を入れる余白があるか

　　●人物の視線が見せたい方を向いているか

　◯写真の配置

　　●裁ち落とし /紙面いっぱいに写真を配置

　　●角版 /四角形の枠にはめて配置

　　●切り抜き /被写体に沿って切り抜いて配置

<メインとサブははっきりと>

　そういう意味じゃありません。何枚かの写真の中で見せたいものを大きく、サブ的なものは小さく配置するのよ。同じ重要度なら大きさを揃えてね。

　だから複数の写真の大きさの話だってば。

<写真の向きを意識する>

　上の2枚を並べると会話してるように見せられますが、下の2枚だと仲が悪くて顔を背けてるみたいになり、写真の向きで印象が変わります。

　※写真の縦横比を変更して、不自然に変形させない様にしましょう。

写真と文字

◯写真の上に置く文字は読みやすく /余白に配置する

<文字を見やすくするテクニック>

　太文字・縁取り・シャドウ・シェイプ・背景をぼかす など

　出た!また専門用語よ。シェイプはこの場合他の加工アプリで背景色と呼んでるヤツね。

 文字は写真との一体感・雰囲気合わせも大事です。

2023-09-23

◯写真構図 /写真の中の目立たせたいものを伝えやすくする。

　●日の丸構図

<被写体を真ん中に目立たせ強調>「オラはどこに居ても目立つだよ」「ぶんぶんキャッツはこの構図ばっかりじゃな。もう少し変化をつけたらどうじゃ」

　●シンメトリー構図

<上下や左右が対象で安定感がある>

　●三分割構図

「３匹で分けんのかよ」「何を分けるのじゃ」「拙者にもくだされ」「アタチにちょうだいっ」「オレにくれよー」意味が違いますっ。

<縦横を三分割した線の交点に被写体を配置して余白や空間を意識させる>「僕の場合は顔が右3分の1に寄ってるんすね」

　●対角線構図

<被写体を対角線上斜めに配置して動きや奥行きを出す>「オラななめずら〜」

　●三角形構図

「三角ってこんなポーズかしら」「拙者の顔も三角おにぎりみたいでござるよ」

<下が大きく上が小さくなるようにして安定感を出す>

　でもママの写真だと、安定感より不安感が出てない??

2023-09-22