【Windows】簡単!ペイントでヘッダー画像を作成する方法

Windows
ヘッダー画像って、どうやって作ればいいの?

ブログを始めると、こんな疑問が出ると思います。

 

デザインソフトは、どれを使えばいいんだろう?

本格的なソフト(Photoshop等)までは必要ないけど、フリーのデザインソフトは難しくて分からない……。

 

こんな悩みをお持ちのあなた!

Windowsなら必ず用意されている「ペイント」で、ヘッダー画像を作ってみませんか?

 

スポンサーリンク
スポンサーリンク

ペイントを使うメリット

ペイントには、こんなに色々なメリットがあります!

必要に応じて、業務にも役立てることができますよー。

【ペイントを使うメリット】
① Windowsにデフォルトで用意されているので、手軽に使える

② とってもシンプルな操作性

③ 使いこなせば、意外と便利

④ デザインソフトが用意されていないPCでも応用できる

⑤ Opentypeフォントが使用できる

ペイントの起動方法

デスクトップ画面左下「スタートメニュー」→「Windowsアクセサリ」→「ペイント」

 

ペイントでヘッダーロゴを作成する

あなたが作ってみたいヘッダー画像は、次のうちどのタイプですか?

 

■背景あり(デザイン)+シンプルロゴ

 

■背景あり(写真)+シンプルロゴ

 

■背景なし+シンプルロゴ+イラスト

 

■背景なし+デザインロゴ+イラスト

 

以上の画像は、すべてペイントで作成しています。
パソコンが苦手でも、この程度なら簡単に作れちゃいますよ!

 

必要なのは、背景とフォントとイラストだけ!

 

 

FURIO
FURIO

じゃあ、一緒に作ってみよう!

 

【とっても大切なこと】
・失敗したときは「Ctrl」+「Z」で戻る
・戻したけど、やっぱりさっきのままで良かったときは「Ctrl」+「Y」で進む

画像をつくるときに絶対役に立つので、これだけは覚えておいてください!

 



ヘッダー画像の推奨サイズ

今回記事を書くにあたって色々と調べてみましたが、お使いのテーマによっても推奨サイズは変わってくるようです。

 

そこで目安として、以下のサイズをオススメします。

幅:1500~2000px

高さ:~250px

 

ちなみにこのブログで使用している

PCWEBFUN!

▲この画像は、1400×200pxです。

もうちょっと幅があっても良かったですね。

 

背景あり+シンプルロゴを作ろう

今回は、上記で推奨した「1500x200px」の画像を作ります。こだわりがある方は、サイズ調整の時に必要ヵ所を変更して下さい。

 

背景画像を準備する

まず、背景用の画像をダウンロードします。

見本デザインは、以下のフリー素材様より使用させて頂いております。

 

▼デザイン(イラストAC様:検索「背景 サイバー」)

無料イラスト・フリー素材なら「イラストAC」
イラストACは、無料でおしゃれなかわいい季節のイベント・人物・動物・フレーム・子供などのイラストがAI・JPEG・PNGでダウンロードできる素材サイトです。

 

▼写真(Pixabay様:検索「PC」)

Just a moment...



フリーフォントを準備する

続いて、フリーフォントを用意します。
フォントには「TrueType」と「OpenType」の2種類がありますが、ペイントはどちらも利用できます。

 

▼フリーフォント(FONT FREE様)

フォントフリー - 無料の日本語フリーフォント投稿サイト
日本語フリーフォント/ダウンロードなら「フォントフリー」。漢字やカタカナ、ひらがなをはじめとした日本語の無料フォントを、明朝やゴシック体、手書きなどのカテゴリーから探すことができます。
・フォントのダウンロードの方法は、各リンク先に従ってください。
・必ず規約をよく読んで使用してください。(たとえば商用利用不可なのに、商用利用してはいけません)

 

ダウンロード & インストール方法

ためしに「リフレッシュ」というフォントをダウンロード&インストールする方法をご説明します。

 

上記サイトから「リフレッシュ」を選択すると、下記画像のページが開きます。

矢印の「配布サイトでダウンロード」をクリック

 

このサイト様では、画像のすぐ下にダウンロードを用意してくれています。

MacかWindowsかをよく見て、クリック

 

DLされたフォントは、おそらく「ダウンロードフォルダ」にあると思います。

右クリック「すべて展開」を選択。

もしくは、別のフォルダに中身をコピペでも大丈夫です。

 

TTFファイルをダブルクリックして開きます。

 

左上に「インストール」がありますので、これをクリックします。

 

 

FURIO
FURIO

これでフォントが使えるようになったよ!



ペイントでヘッダー画像を作成する

お気に入りの背景とフォントが用意出来たら、ペイントを開きます。

開いた画面に、背景画像をドラッグ&ドロップ

この時点ではまだ、画像がものすごく大きいと思います。

 

上メニューの「サイズ変更」を選択。

「単位:ピクセル」「水平方向:1550」と入力 → OK。

 

 では、画像の切り取りを行います。

(上メニューの「選択」が切り取りにあたります。何もしなければ、すでに選ばれている状態です)

 

ここで大事なのは、切り取りたいと思う範囲の「左上角」を起点とすること!

 

下記画像をご覧ください。

・黄色い線が、切り取った画像の一番上の部分です。

・この画像は、高さ200pxに調整します(画像の下の部分が消されます)

以上を考慮した上で、左上角となる部分を決め、右下へむけて範囲選択してください。

 

範囲を選択したら、そのまま「Ctrl」+「X」のキーを押します。

すると、切り抜かれた部分が白くなるはずです。

 

左上「ファイル」タブ→「新規」を選択。

保存しますか?と聞かれますが、しなくて大丈夫です。

 

右下角のあたりで両矢印のマークになったら、左上へ向けて小さい四角にします。

 

下記画像のような状態になったら、「Ctrl」+「V」で貼り付け。

 

こんな感じで貼り付けできればOKです!

なぜ白い部分を小さくするかというと、最後保存するときに、その白い部分まで画像とみなされてしまうからです。

つづけて「ファイル」タブ →「プロパティ」を選択

幅を「1500」「200」と入力。これで画像の大きさが自動的に調整されます。

上メニューからテキスト(Aの文字)選択

 

 いよいよ、ブログタイトルの入力です。

入力カーソルが点滅している状態なら、いくらでも編集できます。

周りの点線上にマウスカーソルを置けば、位置も動かせます。

 

では、フォント大きさを変えてみましょう!(ピンクの枠の部分です)

 

FURIO
FURIO

フォントや大きさは、先に選んでおくと便利だよ

後から変更するときは、まず入力した文字を選択してね!

 

 

【POINT!】
上図のように文字が欠けているときは、紫色のマークのように両矢印になる場所で伸ばせます。
伸ばせる矢印が表示される場所は、中央や両端です。

 

 

最終的に、こんな感じになりました。

 

完成したら、「ファイル」タブ →「名前を付けて保存」です。

保存形式は、とくに選ばなければpng(ピング)になります。

gif → jpg → png の順に画質がよくなります。pngファイルが一番きれいな画像ですが、容量も大きくなります。

 

FURIO
FURIO

お疲れさまでした!
写真背景も同じ方法で出来るので、いろいろ試してお気に入り画像をつくってね!

 

▼ 画像の設定方法はこちら

【Cocoon】ヘッダー画像・ヘッダーロゴを変更する方法
【Cocoon】ブログのヘッダー画像・ヘッダーロゴを変更する方法を紹介します。

 



背景なし+シンプルロゴ+イラストを作ろう

まず、イラストを準備します。

 

▼シルエット(シルエットAC様)

シルエット イラストの無料ダウンロードサイト「シルエットAC」
無料でシルエットイラスト・アイコンやピクトグラムのフリー素材がダウンロードできるサイト - シルエットAC

 

▼イラスト(イラストAC様)

無料イラスト・フリー素材なら「イラストAC」
イラストACは、無料でおしゃれなかわいい季節のイベント・人物・動物・フレーム・子供などのイラストがAI・JPEG・PNGでダウンロードできる素材サイトです。

 

 

フォントも準備します

やり方は、上記の「フォントのダウンロード&インストール方法」をご覧下さい。

 

シルエットを使う方は、そのまま読み進めて下さい。
デザインイラストを使う方はこちら



シルエットイラストの場合

ペイントを開き、ダウンロードした画像をドラッグ&ドロップ。

大きすぎる画像が表示されたと思います。

 

上メニュー「サイズ変更」を選択

「単位:パーセント」「水平方向:30」→ OK

 

画像が小さくなったので、範囲を選択 →「Ctrl」+「X」で切り取り

 

そのまま、白い部分を大きく広げます。

 

 真ん中あたりに、ブログタイトルを入力します。

 

「Ctrl」+「V」で画像を貼り付け。

点線が表示されているときはマウスで動かせるので、ロゴの右側に移動させます。

 

ロゴに合うように、さらに画像のサイズ調整

 

ちょうどいい感じで切り抜きます。

 

今度は白い部分を小さくします。

 

 「Ctrl」+「V」で画像貼り付け。

 

 完成したら、「ファイル」タブ →「名前を付けて保存」です。

保存形式は、とくに選ばなければpng(ピング)になります。

ロゴ+イラストの場合にサイズ設定しないのは、「ロゴ」として使えるからです。背景は、ロゴの色と同じ(今回なら単色・白)にすればOKです。

 

▼ 画像の設定方法はこちら

【Cocoon】ヘッダー画像・ヘッダーロゴを変更する方法
【Cocoon】ブログのヘッダー画像・ヘッダーロゴを変更する方法を紹介します。



デザインイラストの場合

ペイントを開き、ダウンロードした画像をドラッグ&ドロップ。

今回は背景を黒にしますので、画像は大きいまま背景を黒く塗ります。

 

上のペイントを選択。

 

背景をクリック……すると、白い部分が残っています。

 

それほど大した量じゃないので、消しゴムで消しましょう!

左クリックを押したまま、上からなぞればOKです。

 

白くなってしまった部分を、ふたたびペイントで塗ります。

 

サイズ変更します。

 

画像を「Ctrl」+「X」で切り取ります。

 

黒い部分を広げます。白が見えたところは、またペイントで黒く塗ります。

 

画像を「Ctrl」+「V」で貼り付けたら、上メニューの「回転」→「左右反転」を選択

 

画像のサイズを微調整して、白い四角をつくります。

「図形:四角」、「輪郭:アウトラインなし」「塗りつぶし:単色」「色2:白」

 

イラストの横に、白い四角を描きます。

 

テキストで文字を入力し、配置していきます。

下図のようにフォントの大きさは手入力で変更できるので、どんどんテキストを追加します。

黒い字を使いたいときは「色1:黒」、赤い字を書きたいときは「色1:赤」です。

 

こんな感じでできたら完成!範囲を「Ctrl」+「V」で切り抜こう。

 

黒い部分(画像は白だけど)を小さくします。 

 

「Ctrl」+「V」で貼り付け

 

 完成したら、「ファイル」タブ →「名前を付けて保存」です。

保存形式は、とくに選ばなければpng(ピング)になります。

 

▼ 画像の設定方法はこちら

【Cocoon】ヘッダー画像・ヘッダーロゴを変更する方法
【Cocoon】ブログのヘッダー画像・ヘッダーロゴを変更する方法を紹介します。

 

作業は以上で終わりです。

本当にお疲れさまでした!

 

FURIO
FURIO

これで全部の画像が完成したよ!

ペイントもそう悪くないでしょ?

 

 

▼次回:じつはもっと便利!

ペイント3Dでヘッダー画像を作る方法

コメント