Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/mitogaku/mystyle-mist.com/public_html/wp-content/plugins/mailpoet/vendor/cerdic/css-tidy/class.csstidy.php on line 886
【3分で完成♪】おしゃれなヘッダーやバナー画像が簡単に作れちゃうのはこれ! | 高浜ゆみえオフィシャルサイト-魅せるWebプロデュース

【3分で完成♪】おしゃれなヘッダーやバナー画像が簡単に作れちゃうのはこれ!

スキルアップ

ホームページやブログやFacebookなどで、このサイズでバナーを作りたいんだよな・・・

ブログのヘッダー画像を自分で作ってみたくて調べたら、ピクセルってサイズで作るってあるけど、
どうやるんだろう?

ワードプレスのテーマを使ってホームページを作ってるんだけど、
ヘッダーやバナーの推奨サイズっていうのがある・・・
どうやればその指定サイズで画像を編集できるんだろう・・・・

 

Webを活用しようと思った時、写真を指定サイズでカットしたり、
または写真に文字入れするなどの「画像を加工する」スキルは、絶対に持っておきたいスキルです。

 

実は、私がWeb活用でサポートしているお客様にとっても必ずといっていいほどぶち当たる壁でもあります。

 

誰もが使いやすいもので、簡単に画像編集・加工が出来るものってないかな??と、
パソコンの中に入っている「ペイント」やPowerPoint(パワーポイント)、
インターネット上で無料で使える画像編集ソフトなど色んなアイテムを使って、

より簡単で、より素敵にヘッダー画像やバナー画像が作れるものを探し求めていた私が、
一押しのアプリを見つけました!!

これはかなりの優れものです♡

これならデザインセンスがなくても素敵なデザイン素材が作れちゃいます♪
しかも「無料」で、簡単に、直感操作で出来ちゃうので、
Webやパソコンが苦手という方でも使いやすいという、なんとも嬉しいアプリ♡
それは、

『Canva(キャンバ)』

【公式サイトはこちら】 グラフィックデザインを無料で簡単作成-Canva

すでに知っている方、すでに使っている方も多いとは思うのですが、
テンプレートそのままで使っている人が多いんじゃないかな?って思います。

ホームページやブログなどで、このサイズのこんな画像が欲しい!!というときの使い方を
ここではお伝えしていきますね。

ぜひぜひ一緒にやってみてください^^

*注意*
今回は、パソコンでの【Canva】使い方レクチャーとなります。

 

 

1.Canvaに登録する

早速登録してみましょう。

■Canvaサイトの右上の【登録】をクリックする

→CanvaサイトURLはこちら


「Facebookで登録」「Googleで登録」「メールアドレスで登録」いづれかを選択して、
指示に従って、アカウントを作成します。

「Facebook」「Google」のアカウントを使用する場合は、
認証(パスワードを入力)するだけで登録が完了します。

メールアドレスで登録する場合は、
「名前(ニックネーム可)」と「アドレス」「パスワード」を入力します。

*登録したメールアドレスに「Canvaへ登録のご案内」というメールが届きますので、
そのメールの中の「メールを確定→」をクリックすると、Canvaのダッシュボード画面が表示されます。

この画面が表示されればOK!
早速作ってみましょう♪

 

2.Canvaの使い方

テンプレートがずらっと並んでいますが、ここではテンプレートをそのまま使うのではなく、「指定サイズ」で作っていくやり方をレクチャーしていきますね。

「指定サイズの画像ってどんな時に必要なの?」ということですね。

例えば、アメブロのヘッダーをオリジナル画像にしたい!という場合、
アメブロのヘッダーサイズは、幅 1120px(ピクセル) × 高さ 任意サイズ となります。

私の現在のアメブロヘッダーはこちら↓

このヘッダーサイズは、幅1120 × 高さ500 px で制作してます。

ちなみに px(ピクセル)って何?って思われた方もいるかもしれませんね。
ピクセルとは、デジタル画像の最小単位のことで、紙ベースではcm(センチメートル)、mm(ミリメートル)などの単位を使うと思うのですが、Web上ではpx(ピクセル)という単位を使います。

また、ワードプレスでホームページを作る場合には、ワードプレスのテーマを使ってホームページを作っていく方が多いのではないかと思います。
その時にも、ヘッダーやコンテンツなどの画像サイズは「推奨画像サイズ 幅1450px × 高さ360px」として表示されています。
推奨サイズではない画像を挿入した場合、勝手にリサイズしてくれるようなテーマだったらいいのですが、そうでない場合、ホームページ全体のレイアウトが崩れてしまったりします。

なので、この推奨画像サイズに画像を編集するスキルは身につけていて損はない♪ということになります。

 

2-1サイズを決める

今回は、アメブロのヘッダーを作ってみましょう。

アメブロのヘッダーサイズは、横幅は1120px と定められています。縦幅は任意なので自由に設定できるのですが、
今回は400pxにしてみようと思います。

1120×400pxサイズの画像を作っていきますよ~。

Canvaのダッシュボードに戻りましょう。

画面右中央のあたりに【カスタムサイズ】という文字がありますね。
それをクリック

そうすると上記の画像のようにサイズを入力する画面が表示されますので、
幅のところに 「1120」
高さのところに「400」と入力して、【新しいデザインを作成】をクリックします。

そうすると以下の画面が表示されます。
↓↓

2-2テンプレートを選ぶ

上記画面が出たところで、「テンプレート」を選んでいきます。
左側に表示されていますね。ここをスクロールしていくとたくさんのテンプレートが見れますので、その中から
あなたのイメージに合うテンプレートを選択します。


【手順】
左側のテンプレートをクリックする
↓↓
右側の編集部分にテンプレートが表示されます

次は写真を差し替えます。
写真の選び方は2通りあります。

1.Canvaの中にある画像を使う
2.あなたのPCの中にある画像を使う です。

 

2-3写真を選ぶ(Canvaの中にある画像を使う)

「1.Canvaの中にある画像を選択する」の場合

ダッシュボード左側のアイコン、上から2番目のアイコンをクリックすると、
その隣に写真がずらっと出てきます。

そこから好きな画像を選んで、右側の編集部分の写真のところまでドラッグすると
選んだ写真に入れ替わります。

 

2-4写真を選ぶ(パソコンの中にある画像を使う)

「2.あなたのPCの中にある画像を使う」の場合


ダッシュボード左側のアイコン、上から6番目のアイコンをクリックすると、
その隣に、「画像をアップロード」と出ますので、それをクリック

パソコンの画像が入っているフォルダから画像をクリックして、右下の【開く】をクリック。
「画像をアップロード」の下に、画像は入ったら、その画像を右側の編集部分にドラック。

すると上記の画像のように、テンプレートに埋め込まれます。

 

2-5文字を入れる

次は文字を修正していきましょう。

テンプレートの文字の上でクリックすると、枠が表示されますね。
その中で文字を書き換えることが出来ます。

文字の書体やサイズ、色などを変更したい場合は、下記の画像を参考にして変更してみてください。

どんな修正が出来るのかを色々試してみるといいですよ。

色々と修正して私が作ったものはこちら
↓↓

私が修正をかけたものは、
書体、文字色、文字サイズ、文字の行間、文字位置
線の色、長さ、全体の配置
こんな感じです。

あなたのタイトルやキャッチフレーズのボリュームに合わせて、スペースや文字の大きさなどバランスを見て
修正してみてくださいね。

 

3.保存する

デザインが完成したら、保存しましょう。
今回はアメブロのヘッダー画像として使用するものという目的で制作していますね。
ですので、保存するときの出力ファイルは「PNG」にしましょう。

デザインを保存する場合、
画像のみ(文字やイラストなどの装飾を施していない場合)は、JPG
画像+文字装飾の場合は、PNG
と覚えておくといいでしょう。


右上の「ダウンロード」をクリック
【ファイルの種類】の「PNG」を選択
「ダウンロード」をクリックすると「デザインを準備中です・・・」という画面が表示され、
しばらくしてからパソコン内の「ダウンロード」フォルダに保存されます。

これでヘッダーデザインは完成です!

これが使えるとかなり幅が広がりますね♪
他のサイズでも色々デザインしてみて使い方をマスターしてみてください^^

関連記事一覧

  1. この記事へのコメントはありません。