みなさん、こんにちは。
あなたの探していたアイデアが見つかる
アイデア図鑑「Aiz」です！
この記事に出会えた人に朗報です！
「アイデア図鑑」完全独自のアイデア
「どんな写真にでも使えちゃう」
表現方法を編み出しちゃいました。
デザインを考えている上で大変なのは、
使う素材によって、
表現方法を変えなければいけない点。
情報量が多い写真に
安易にテキストを載せても
見えにくくなっちゃったり。。。
素材に合わせて、
さらにひと手間加えないといけませんし、
正直、めんどくさい気持ちわかります。
そこで、
どんな写真でも使えて、
1発でオシャレにできて、
しかも、テキストも入れやすくなる。
夢のような表現方法を
この記事を見てくれたあなただけに
伝授しちゃいたいと思います。
またひとつ、
他の人と差をつける引き出しを
手に入れて、センスを鍛えちゃいましょう！
可読性を意識してこそ、素材は輝く。
実は、、、
この「アイデア図鑑 Aiz」を書く時に
ちょっと工夫していることがあります。
以前、コチラの記事でも紹介したのですが、
1行が「13〜15文字」程度になるように
改行して調整してあります。
その理由としては、
人が瞬時に読める文字数が
「13〜15文字」程度だから。
画面は、まだまだ余白がある。
スペースがあるからといって、
文字を敷き詰めても
読みにくさに拍車がかかるだけ。
こまめに途中で改行するのは、
読み手が読みやすくなるように
「可読性」を高める狙いがあるんです！
このサイトで、何回も言っていますが
情報は絞ってこそ、相手に伝わりやすく
素材を輝かせられます。
その手助けをしてくれるアイデアが
今回のテーマでもある
「ストライプ」を使ったデザインです。
なんと、ストライプを入れるだけで
3つもメリットが生まれるので、
一緒に見ていきましょうか！
ストライプが作り出す、3つのメリット
メリットをお話しする前に、
この記事で言うストライプとは…
「透過されたストライプ」ですので、
間違えないでくださいね。
メリット① ハッキリ見える部分が強調される
ここで一度、みなさんに
見ていただきたいんですが、
コレって、どちらが見やすいですか？
パターン① ハッキリ見える部分が強調される
パターン② ハッキリ見える部分が強調される
多くの方は、
②の方が見やすく感じますよね。
実はこれは、「文字の太さ」という
明暗をハッキリつけたことで、
キーワードを見つけやすくなっているから。
ストライプを入れることで、
簡単に明暗を付けられるので、
実際に、写真を使って検証していきます。
ストライプなしの場合は、
すべてが均等に見えているので
主張したい箇所がわからず、目が泳ぎます。
それに比べて、ストライプを入れると
ハッキリと見える場所、見えない場所ができるので
ストライプのない場所に目が行きやすく
元の写真がより一層、引き立ちます。
ストライプのない場所に、
目が誘導される。
もう、お分かりの方もいるハズ。
そう！主張したい部分に
ストライプを被せないように配置すれば
狙った部分に、目線を誘導できちゃいます！
メリット② 強制的にスペースが作れる
綺麗で、高画質な写真でも
全面に色が付いていて
ゴチャゴチャしてるから
文字が入れにくい…
そんなスペース問題にも、
「ストライプ」は実力を発揮します！
ストライプを上から重ねることで
ストライプの部分が「余白」となって、
情報を入れ込めるスペースになります！
どんなにゴチャゴチャした写真でも
上から被せちゃえば、
スペース問題は1発解決ですよね！
メリット③ 雰囲気をガラッと変えられる
ストライプの色を変えることで、
画面の雰囲気を
ガラッと変えることもできます。
対照的な配色で、頭に残るインパクト
例えば、
対照的な「赤×青」の配色にすれば
ガツンと画面が映えるインパクトに。
元画像に使われている色味に合うように
ストライプの色味を決めていくと
色を決めやすいです！
色合いを合わせれば、落ち着いたエレガントに
元画像の色味に合わせて
ストライプも同じ色味にすると
統一感が生まれて、大人な雰囲気に。
今回は、ブロンド髪の色味に合わせて
落ち着きのあるゴールドを採用。
エレガントさが違和感なく追加できてます。
黒いストライプで、ミステリアスに
黒色のストライプにすれば、
画面全体が締まって、
元画像の色味がより強調されます。
どんな画像にも合わせやすい
万能ストライプ素材で、
ミステリアスな雰囲気を演出可能です。
ストライプの作り方
これまで、ストライプの魅力について
お話してきましたが、
そもそも、、、
「ストライプってどうやって作るの？」
と思っている方もいると思いますので
ここで、ストライプの作り方も解説します。
1度作っておくと、今後も繰り返し使えるので
ぜひ、手を動かしてみてくださいね！
①縦ストライプの作り方
最初は、
「縦ストライプ」の作り方からです。
まず、はじめは
編集サイズの設定をしていきます。
○幅…100px
○高さ…100px
○解像度…72
サイズの設定ができたら、
「ガイド」を表示させていきます。
上の「表示」メニューから、
「ガイド」→「新規ガイド」です。
新規ガイドのポップアップが出るので、
方向の部分を「垂直方向」にして、
位置は「25」「50」「75」の
3種類を設定してください。
問題なく設定ができたら、
画面には、垂直に伸びる
3本のガイド線が表示されます。
ガイドの設定ができたら、
長方形ツールを使って、
図形を入れていきます。
さっき引いた、ガイドに沿って
2箇所に、長方形を追加します。
図形が入れ込めたら、
レイヤータブの一番下にある
白い背景レイヤーを削除します。
削除すると、白い背景部分が
市松模様になって、透過されます。
最後に、パターンの登録です。
パターンタブの右上の角にある
4本の横棒アイコンをクリック。
「新規パターンプリセット」を選んでください。
「パターン名」のポップアップには
「縦ストライプ」と入力。OKを押すと、
パターンのところに、先ほどまでなかった
新しいパターンが追加されています！
これで、完成です！
②横ストライプの作り方
作り方は基本的に同じなので、
繰り返して、覚えていきましょう！
お次は、「横ストライプ」です。
横線を引いていくので、
ガイドも横方向に設定していきます。
方向は、「水平方向」にしてから、
位置は同じく「25」「50」「75」の
3種類を設定です。
無事にガイドが設定されれば、
横に3本の線が引かれます。
長方形を作る時にも、
ガイドに沿って、
横長の図形を入れ込みます。
ここでも、忘れずに
白背景の削除をしていきます。
削除して、白背景から、
市松模様になりましたか？
最後に、
パターンの登録です。
パターン名を「横ストライプ」にしてOK。
すると、さらに下に追加されます。
③斜めストライプの作り方
最後３つ目に、
「斜めストライプ」を作っていきましょう。
これまでと、少しだけ
やり方が違うので、説明していきますね。
まず、ガイド線は、
縦・横に、1本ずつ
真ん中に配置していきます。
正方形を、4分割する
2本の線が引けていればOK！
ガイドが引きおわたら、
長方形ツールではなく、
「パス」ツールを使っていきます。
ガイドにしたがって、
左上の角に
三角形を作ってください。
パスを閉じたら、
上メニューの「シェイプ」をクリック。
すると、
パスだった線が、三角形になりました！
同様にして、もう1カ所にも
パスで描いていきます。
次は、下の図のような
台形を型取ってください。
パスが引き終わったら、
先ほどと同じく、
「シェイプ」をクリック。
パスが、台形になったらOKです！
パターンを登録する前に、
白背景の削除を忘れずに！
無事に、透過されたら
パターンを登録していきましょう。
最後に、パターン名を
「斜めストライプ」にしてOK。
パターンが追加されたら、完了です！
お疲れ様でした！
パターンの使い方
今作ったパターンは、
「パターンオーバーレイ」から使えます。
レイヤーをダブルクリックすると、
レイヤースタイルを設定できますよ！
Canvaでストライプを使う
Canvaでストライプを使う時は
もっと簡単にできちゃいます！
「素材」の検索バーに、
「ストライプ」と検索すると…
様々なバージョンの素材が使えますよ！
ストライプを使ってみました！
今回も私が実際に手を動かして
「ストライプ」を使ったデザインを
3種類作りましたので、
ご紹介させてください！
① ブロンド色で、大人なリッチな印象に
素材選びの時に出会ったのが、
ブロンド髪が美しい女性の写真。
さらに、大人の落ち着きが
ストライプで出せればと考えてました。
落ち着き＝統一感を高める
なので、ブロンド髪から色を取って
大人でリッチな雰囲気にしてます。
ここで、大切になってくるのが、
「特徴的な色を判断する」こと。
この時の、私の頭の中は…
▲セーターの「黒」…もっと色味が欲しい
✖️背景の「グレー」…強さが足りない
✖️肌の「肌色」…差別化できない誰でもある色
●「ブロンド」髪…画面に映える色、コレだ！
このように、
なるべく他と被らない、
この写真だから出せる色味を
探すのがポイントですね！
② 黒ストライプで、ミステリアスに強調
スウェットを着たダンサー。
暗い背景と、イエローの服との
対比がいいなと思ってダウンロード。
動きのある服のシワが気に入りました。
けど、ここで気づいたんですが、
影が強すぎて、顔が見えない。
だったら、、、いっそ
服だけ切り抜いちゃえ！と思い切った選択に
結果的に、
「服だけが踊っている」
不思議なインパクトを持たせることに成功！
そこで、
さらに「黒ストライプ」で
ミステリアスな強調を加えてみました。
ストライプを配置する時は、
スウェットの角度と合わせてあげると
調和がとれるポイントになります。
③ 赤×青、情熱と冷静さを感じる対極カラー
スケートボードをかかえる
鮮やかな赤背景が印象的な男性写真です。
赤で統一するだけじゃなく、
さらに別のアプローチを考えてました。
ここで、逆転の配色！
逆に、対極的なカラーを持ってくれば
引き立つのでは？とアイデアが浮かび、
ボードにも使われている「青色」をチョイス！
さらに、情熱と冷静な色味なので
「頭は、冷静に。心は、熱く。」
というコピー文が降ってきて、
対極カラーをさらにアピールできました！
何度も言いますが、統一感だけじゃなく、
元画像に使われているカラーを生かした
奇抜な配色の組み合わせもオシャレです。
配色の発想は、これまでに、
どれだけデザインを見てきたか、に
比例して、鍛えられていきます。
ぜひ、日頃からデザインをググって見てくださいね！
実際に作ってみよう！
先ほど、「ストライプの作り方」を
解説していきましたので、
今回は作業工程をサッと紹介していきます！
STEP① 画面全体に、パターンをかける
まず、写真を入れ込んだあと
全面が隠れるように
図形を配置していきます。
次に、レイヤースタイルから
「パターンオーバーレイ」を設定。
先ほど、作って登録した
「縦ストライプ」を選択します。
しかし、パターンを設定しても
まだ、ベタ塗りの状態？！
大丈夫、落ち着いてください！
「プロパティ」にある
「塗り」「線」を、なしに設定すれば
縦のストライプが表示されますよ。
パターンを適用できたら、
ストライプの「比率」を調整します。
調整のポイントは、
目と髪が、ほどよく見えるくらいです。
STEP② ストライプの、色を変える
STEP②は、ストライプの色変更です。
その前に、ストライプのレイヤーを
右クリックして、
「スマートオブジェクトに変換」。
その後に、
「カラーオーバーレイ」から、
「#9c8a62」にカラーを変更。
STEP③ 不透明度を調整して、半透明に
最後に、
不透明度を調整すれば、完成です！
不透明度を「100％」から
「70％」に変更してあげましょう。
合成した感じがでて、
女性の表情も見えるようになりましたね！
私個人の感覚ですが、
だいたいは、70％前後にしておけば
ほど良い、色付きと
ほど良い、透明感ができると思います。
Canva① ストライプを検索して、入れ込む
Canvaでは、素材の検索から
ストライプ柄を
カンタンに入れ込めます！
今回は、ピンク色の横ストライプを選択。
Canva② 大きさと色の調整
お次は、サイズの調整です。
先ほどと、同様に
目と髪がほどよく見える
ようになるまで大きさを調整します。
ストライプのカラーを
「#9c8a62」に変更。
Canva③ 透明度を調整して、半透明に
最後に、透明度の調整。
こちらも、「100％」から、
「70％」に変更すると、
背景の写真と馴染んできます。
お疲れ様でした！
今回も完走されたあなたは、
マジですごい！自信持ってくださいね！
なんせ、今回も書きすぎなくらい
ボリューム満点だったので、
正直、腕が痛いです。笑
先日書いた記事の中で、
「目」を強調させるイケてるテクを
紹介させてもらいました！
これも私のイチオシなので、ぜひ↓
デザインの無料アドバイス、やってます。
ここまで詳しく解説してきましたが、
実践するのはあなた自身。
時には、つまずいたり、
分からなくなる事もありますよね。
でも、デザイン詳しい人なんて
周りにいないし、どうしたら…
そんなあなたに吉報です！
現在、自分は「公式LINE」を運営し、
このたび、LINEの友達登録者限定で、
デザインの無料相談を開始しました！
現役デザイナーに直接相談できるチャンス！
ぜひ、活用してみてくださいね↓
コメント