デザイナーで稼ぐ

超簡単ヘッダー作成方法!無料でおしゃれなCanvaの使い方

超簡単ヘッダー
アオキ
アオキ
こんにちは、イタリアで15年デザイナーのアオキです。コネもなく フツーだったの私のお話はプロフィールへ。デザイナーで独立したいあなたはこちらへ

私はテキスタイル、衣装、ファッションデザイナーという、アナログ手作業が多い分野の人。

でも自分の世界観を即!表現したいのでヘッダー画像デザインは自分でやってます。

アオキ
アオキ
だってアプリを使えばスキルはいらなかった

そしてこの後さらにカッコイイものにしたいとプロに外注するとしても!

「こんなのやってください」と具体的に言えると誤解なくすいすい進みますよね~

プロに頼む側として抽象的な要望はNG!

 

まずは自分の世界観をさっと表現してみよう

無料のCanvaでブログ初心者さんがおしゃれなヘッダー画像を作る!

早速グラッフィックデザインを無料で簡単作成するツールCanvaを使って自作しちゃいましょう!

Canvaへ

 

パソコンだと仕上がりがダンゼン早いのでここではパソコンでの使い方を。

まずは上のボタンから無料アカウント登録。

超簡単ヘッダー

そして上のメニューバーのホームにいくとこのような画面に。

ヘッダ―画像のサイズ選択!

まずはヘッダー画像サイズを選択。

画像サイズは媒体によって違うので、あったものを選ぼう。

例えばTwitterヘッダー画像作成の場合。

超簡単ヘッダー
  1. デザインの作成をクリック
  2. 「Twitterヘッダー」など一覧から選択
  3. または検索します

ワードプレステーマJinでヘッダー画像を作成する方法

超簡単ヘッダー
アオキ
アオキ
こちらが私のブログのヘッダー画像

ワードプレステーマは『JIN』。

では一緒に作り方をみてみましょう。

既存の画像サイズではないのでカスタムサイズを設定。

 

JinのPC表示用ヘッダー画像サイズは2400横幅×800縦幅px

超簡単ヘッダー
  1. 「デザインを作成」をクリック
  2. 横縦幅を入力
  3. 「新しいデザインを作成」をクリック

 

超簡単ヘッダー

そうすると新しいデザイン作成画面に

ヘッダー画像のベースの色を決めよう

まずはベースの色をきめよう。

ブログのテーマカラーがいいでしょう。

私はグレーとピンクにしてます。

黒だとそれぞれのスマホやPCの設定でいろいろな黒に見えてしまう。

ただの穴にも見えてしまうので一段あげてグレーに。

アオキ
アオキ
グレーはいろいろなグレーにみえていいのか~!?

いいです(笑)

 

アクセントカラーはピンク。

ベースが紫でアクセントに黄色もいいけど‥

公の場だからここはみんなが落ち着く色の方がいいよね。

アオキ
アオキ
色で迷う人はベースにグレー、アクセントカラーは好きな一色のグラデーションで決めてください!

他にベースが白だときれいに決まって好感度アップ。

 

 

超簡単ヘッダー

テーマカラーきめたら『にじにじ』をクリック。

カラーははじめに決めておかないと迷って迷って仕上がりが超遅くなるよ!

超簡単ヘッダー
  1. 「新しい色」の◎を動かして好きな色に設定
  2. デフォルトカラーにあればそれを選んで

 

超簡単ヘッダー
  1. 好きな色をつくったらこの欄がその色になります
  2. 使用中のカラーをクリック
  3. 画面全体がベースカラーになるよ

 

画像をいれてみよう!

ここでテキスト分のスペースをあけておくのが肝心!

超簡単ヘッダー
  1. 左のメニューは何もしなくても「アップロード」になります
  2. デスクトップなどにある画像をヘッダーにドラッグ&ドロップ
  3. 画像の大きさ・位置決定
超簡単ヘッダー

画像をドラッグ&ドロップで位置を変更。

画像を⇒の方にひっぱって大きさを変更。

 

超簡単ヘッダー

同じように画像を3ついれました~!

画像はハンドメイド作家さんなら自分の作品で。

画像の著作権が心配なら左メニューのCanvaテンプレートをつかってね!

テキスト分の余白を取って画像を設置

さきほど空けておいたテキスト分のスペースを使ってテキストを挿入。

私はピンクのアクセントカラーをいれるよ。

テキストを入れるための四角形を挿入。

超簡単ヘッダー
  1. 左メニュー素材をクリック
  2. 図形を選択

 

超簡単ヘッダー
  1. 図形を選択したら欄が図形になってますよ~
  2. 四角形をクリック
  3. 画面に四角形が!
  4. 拡大縮小できない四角形もあるのでこのマークがついてるか注意

 

超簡単ヘッダー
  1. ドラッグ&ドロップで位置を決め四隅をあやつって好きな大きさに
  2. 四角形をはみださせても抜け感あり。これはまったくのお好みだけどわたしはきっちり枠にはまっていないデザインがすきなので

 

超簡単ヘッダー
  1. カラーをクリック
  2. 新しい色をクリック
  3. カーソルをうごかして好きな色に決定
  4. 色の名前とカラーコードがひと目でわかるWEB色見本原色大辞典を使う場合はカラーコードを選んでココにコピペ
  5. 色が変わった!

テキストをいれてみよう

超簡単ヘッダー
  1. メニューからテキストをクリック
  2. 3つの大きさから一つクリック。これは字の大きさが違うだけであとから縮小拡大できます。下のテンプレートから選んでもカッコイイよ!
  3. 『見出しを追加』がでたよ~!

 

超簡単ヘッダー

自分のテキストに置き換えよう

でも‥このままだと読みずらい。

こなれてない。

 

超簡単ヘッダー
  1. テキストを全選択して
  2. 左揃えに
  3. 文字の色をかえよう。フォントを変えたいときはこのタイミングでかえよう
  4. 白にしてみるよ!

 

超簡単ヘッダー

イイ感じ!

 

サブテキストを追加

超簡単ヘッダー
  1. 左メニューから『小見出しを追加』か『本文を追加』を選択。字の大きさがちがうだけ
  2. サブテキストを書き込みます

このままだとのっぺりしてつまんない‥

アオキ
アオキ
アクセントつけたいけどもう混みあってる

文字を回転させよう!

超簡単ヘッダー

「15年」「ファッション史専門学校!」と言う部分を消してスペースをいれておくよ

超簡単ヘッダー
  1. テキストボックス追加して太字で「15年」といれる
  2. テキストボックスを回転させる
超簡単ヘッダー

「ファッション史専門学校!」も追加。

今度はフォントサイズを大きくして見よう。

シンプルにリズムがついた!

アオキ
アオキ
これでヘッダー画像完成!

ヘッダー画像にボタンを追加!

私は後で自作のボタンを追加しています。

っていってもハコだけ。

超簡単ヘッダー

っていうか番号とを黄緑にしたよ。

ピンクは好きだけど全面ピンクで見えなかったね‥

最初から黄緑にすればよかったんだけどポリシーに反するから(笑)

  1. 左メニュー『図形』から
  2. 矢印を選択
  3. すると矢印が挿入
  4. カラーパレットで色を変えて
  5. 透明度もかえてオシャレにするよ~
  6. カーソルを左右に動かしてスケスケにしてみよう。ここではチョット下の絵が透けるくらいに

 

ここにテキストをいれるよ。

超簡単ヘッダー
  1. 左メニューのテキストから挿入できました!
  2. 今度は『素材』を選んで
  3. 「手」を検索
  4. 一つ選んでクリック
超簡単ヘッダー
アオキ
アオキ
おてて印が入ってほら、クリックしてね~みたいな

完成したヘッダー画像をダウンロードする

超簡単ヘッダー

デザインできたらデスクトップなどへダウンロードしよう。

  1. 「ダウンロード」をクリック
  2. 「ファイルの種類」から今回は軽いJPGを選択
  3. 「ページを選択」をクリック
  4. ダウンロードしたい1ページのみクリック
  5. 「完了」をクリックすると任意の場所にダウンロードされるよ!
アオキ
アオキ

ここまででデザインとダウンロードは完成!

お疲れ様でした~

 

Jinのヘッダー画像にリンクを貼って(なんちゃって)ホームページっぽく

続いてワードプレスそれぞれのテンプレートのマニュアルを見ながらヘッダー画像のリンク先設定します。

このブログはワードプレステーマJINのブログテンプレート。

オシャレでよみやすいブログを書いているTwitterのフォロワーさんにテーマを聞いたら「JIN」だったからマネ。

JINマニュアルの中のヘッダー画像を設定するを参考に。

これで作業はおしまい。

ヘッダー画像をどこでもクリックしたら任意のページに飛ぶようになってます。

なんか本格的になっちゃった!

アオキ
アオキ
超お疲れ様でした~

「順番に描くだけでプロに!ファッションデザイン画完全マスター教本」

期間限定無料プレゼント中!

  • 今までの私がプロになったデザイン画の描き方ノウハウを全部つぎ込んで
  • しかも100ページ以上の大ボリューム!

ご希望のかたは プレゼント配布ページへ。

目次の【デザイン画教本プレゼント】にご案内があります!

デザイン画教本

ぜひあなたがデザイナーで稼ぐのに役立ててください!

 

 

 

こちらの記事もおすすめ!