【Photoshop】0からTwitterヘッダーを作成する方法

皆さまこんにちは！おのだK（@halushiroi）です。
最近まで進路を色々と悩んでいましたが、Web制作とWebデザインの学習をしております。

最近の目標は「1日1作品」としてバナーやヘッダー、名刺などをデザインしています。
自分が元々、プラモデルやコスプレ道具作成をやっていたおかげか、やっていることが似ていて毎日楽しく継続できています。
ようやく自分の方向性がはっきりしてきたと思い、こちらの方向で走り始めました。

今回は作成したモノをどう作ったか？を書いていきます。

今回作成したTwitterヘッダー

まずは、今回作成したTwitterヘッダーです。
Twitterのヘッダー（1500px*500px）を作成いたしました。

使用したソフトはPhotoshop。画像はいらすとやのものを切り抜き。
QRコードはコード作成のサイトを利用。
記号や文字、装飾はPhotoshopの機能。
長方形ツール、レイヤー効果、切り抜き、テキスト横書きツール。
使用している機能は少ないので、始めたての私でもこれくらいなら可能です。

注意点としては、左下の部分にはTwitterのアイコンが入るので空けないといけないところですね。

Twitterヘッダー作成の前準備（ターゲッティング）

実際に手を動かしてヘッダーを作成する前に、具体的にやっていることは

など、まずターゲッティングを決めます。
同時に、どんなレイアウトにするか、イメージ色をつけるか、フォントはどうするか、注意点はどこか…設計図も決めておきます。

今回のターゲットは

プラモデルの作成でも、特にオリジナル作品を作るときは

設計図をまとめて、必要な道具を買い足しに行ったりしてから取り掛かります。
ゴールが決まっていないと、途中で方向性がブレブレになって、どこをどう触っていくべきか、順番も目標も分からなくなってしまい、作業修正にものすごく時間がかかります。

逆に言うと、そこを設定しておけばそれに従えば良いため、何をしたら良いか？と迷うことが無くなります。

Web制作、デザインの場合は、PhotoshopやIllustratorなどの決まったソフトがあれば良いので道具を買い足したりする必要もありません。

ヘッダー作成の設計図を作るには？

参考にしたWebサイト

誰をターゲットに？伝えたいことは？など、伝えたいこと自体はあらかじめメモにまとめておけます。
では、実際のデザイン自体はどうしたらいいか？

ゼロから作り出すのはほぼ無理です。
なので、色んなデザインを見られるサイトや実際の広告などから着想を得て、自分なりにカスタマイズしていって作るのが良いです。

Webサイトで言えばこんなところです。
特にピンタレストは良く使います。「名刺　デザイン」などとワードを入れて検索すればGoogleの画像検索のようにズラズラっと出てきて、フォルダを作って保存しておくことができます。

参考にした書籍

Webサイトだけでなく、書籍でも参考にできるものがあります。
今回は知り合いのイラストレーター 北川さん(@tk_illustration)が以前にツイートしていた「３色だけでセンスのいい色」と言う書籍を見てカラーリングを参考にしました。

今回は「スポーツ選手からエンジニアに転職した」と言う設定なので、同書の「鮮やかなスポーティーカラー」を使用しました。
また、ポップな色使いなので「その人への近づきやすさ」も高められるようにしています。

ターゲット設定を「初心者」「未経験者」としているので、その方々がクライアント本人に近づきやすいように、色遣いでも配慮しています。

フォントを柔らかくすることも考えましたが、そうすると可愛さが先に立ってしまい、ターゲッティングがズレてしまうと思いましたので。

実際の作業と使ったPhotoshopのツール

先ほどの手書きレイアウトでどのようにするかはほぼ決めたので、あとはPhotoshopで実際に作業をしていきます。

使った機能はこのくらいです。5個程度ですね。
色は先ほど述べた3色＋白で4色。

位置の微調整が必要となりますが、移動ツールを使えばレイアウトの位置がどこに沿っているか、何px空いているかなど、ガイドラインを自動で表示してくれるのでテキストごとにズレるということは無いです。

お手軽にヘッダーは作れる

ざっくりと、作り方を述べてみました。
やることをまとめると

特に「設計図の作成」は重要です。ここで方向性を決めておかないとゴールが分からなくなってしまいますので。

これからも、作品制作しながらブログへアップしていきたいと思います。
それではまた！