主婦、時々フリーランス

2児の子育て中のワーママが、育児、節約、仕事について記録。

【初心者向け】矢印や赤枠の挿入など。ひと手間加工した画像をブログに投稿してみよう!|ペイント編

f:id:yumekuro789:20180604001655j:plain

最近、ブログを始めた知人からブログに載せる画像についてこんな質問をもらいました。

 

画像に赤枠とか矢印を付けたり、よく見かけるけどどうやってやるの?」

「フリーソフト?有料ソフト?どれ使えばいいの?

ファイルサイズの圧縮って、ドーユーこと?」

 

などなど。

そこで今回は、簡単に画像を加工する方法のひとつとして、Windowsパソコンなら必ず入っているペイントで行うやり方をまとめてみました。Macユーザーの方は参考程度に流し読みしてくださいね。

ちなみに私は、仕事上で用いるAdobeのFireworksという有料ソフトを普段使っており、ペイントはほとんど使った事がありません。

今回は、そんなペイント初心者の私が、実際にペイントを使って画像を加工してみた方法と感想を紹介します。

 

フリーソフトは色々あるけど、ペイントで十分!

画像の編集・加工フリーソフトは巷にたくさんあると思います。どんな加工がしたいかによって選ぶのでもいいですが、「最低限のことができればいい!」という方は、ペイントで十分かと思います。

今回はこんな画像を作ってみます。

f:id:yumekuro789:20180603232927j:plain

【紹介する機能】

  1. 使いたい画像を切り抜く(トリミング)
  2. 赤枠や矢印、イラストなどを挿入する
  3. テキストを挿入する
  4. 縦・横のサイズを変更する
  5. 圧縮してファイルサイズを小さくする

ペイントでブログ用に画像を加工する方法

1.ブログに載せたい画像を決める

まず、記事に載せたい写真や画像を決めます。

例えば、自分で撮った写真、画面のスクリーンショット、ダウンロードしてきた無料素材などがあると思います。

無料素材は、私は写真AC、イラストACをよく使っています。 

【参考】

イラストAC:無料イラストなら「イラストAC」

写真AC:写真素材なら「写真AC」無料(フリー)ダウンロードOK

2.ペイントで画像を開く(貼り付ける)

ペイントで選んだ画像を開きます。

既に画面のスクリーンショットをとっていたり、画像を「コピー」している場合は、ペイント開いてから「貼り付け」をします。

f:id:yumekuro789:20180531141711j:plain

また、貼り付けた瞬間は画像がでーーんと大きく出てきて、見にくい場合があります。

そんな時はCtrキー+マウスホイールを下にスクロールさせると縮小されます。(拡大なら同様にして上へスクロール)

3.必要な部分だけトリミングする(切り抜く)

最初に画像に使いたい部分だけを切り抜きます。

ホーム>トリミングで範囲選択し、再度「トリミング」を押下すると切り抜けます。

画像の不要な部分は切り取り、できるだけ必要最低限の部分だけを使うのがおすすめ。
画像は後ほどサイズを小さくしたり画質を落としたりして、適正なファイルにします。その際元々大きい画像を小さくすると画質が粗くなってしまいます。
(もちろん、最初から適正サイズ・容量の画像だったら切り抜く必要はないです)

 

4.画像に図形や文字を付ける

強調したい部分を枠で囲みたい時

f:id:yumekuro789:20180531142144j:plain

ホーム>図形から、四角形または角丸四角形を選びます。この時、「塗りつぶしなし」を選ぶと枠にできます。

線の幅(太さ)や色を変更できます。

テキスト(コメント)を入れたい時

f:id:yumekuro789:20180531142217j:plain

ホーム>「A」マーク(テキスト)で挿入できます。

自分が思っているよりも気持ち大きめのフォントサイズがおすすめです。(スマホで見た時そちらの方が目を引きます)  

★おまけ★ 個性的なフォントを使ってみよう

標準搭載されている「明朝体」「Mゴシック」などのフォントではなく、無料フォントをダウンロードして使うと個性的なテキストを入れることができ、オリジナリティが出せます。

フォントはインストールしておけば、ペイントに限らず他のソフトでもそ使用できます。

参考:フォントフリー - 無料の日本語フリーフォント投稿サイト

矢印をつけたい時

f:id:yumekuro789:20180531142154j:plain

こちらもホーム>図形から矢印を選びます。

先ほどの赤枠の用に使いたい場合は「塗りつぶしなし」を選択、枠線と違う色で塗りつぶしたい時は「色2」で色を選択します。

矢印の向きは90度ずつであれば回転できます。斜めなどの角度の微調整はできなそうですね。 

★おまけ★自分の好きな矢印を探してみよう

フリー素材で「矢印」と検索すると個性的な矢印などの図形がダウンロードできます。矢印は結構利用することが多いので、気に入った物をキープしておくのもいいですね。 

人物などのイラストを張り付けたい(挿入したい)時

f:id:yumekuro789:20180531143745j:plain

イラストはフリー素材からダウンロードしておきます。

ペイントの、選択>貼り付け(ファイルから貼り付けで画像を選択)で、ダウンロードしておいた画像を挿入できます。

画像周りの背景を切り取りたい場合は、選択>透明の選択 でできます。

※初めて私も別のファイルを挿入するというこの作業をしましたが、最初思う様にいかず手こずりました。何度か試すと慣れてきますのでトライしてみてください。 

5.サイズ変更をする

f:id:yumekuro789:20180531142253j:plain

画像の編集が終わったら、ブログに貼り付ける最適なサイズに変更します。

ホーム>サイズ変更「ピクセル」を選択。「縦横比を維持する」にチェックを入れ、水平方向が500px~600pxくらいに設定します。

※幅500px~600pxというのはあくまで私個人の意見です。サイズは小さければ小さいほどファイル容量を抑えることができますが、プレビューなどで確認しながら任意のサイズにしてください。

ちなみにはてな側に貼り付けた後でもサイズ変更できますので、ここでのサイズ変更は必須ではありませんよ。

 

最後に「名前を付けて保存」で終了です。

 

6.圧縮サイトで画像ファイルを圧縮する

ペイントで加工した画像ファイルのサイズ(容量)を圧縮させます。容量が大き過ぎるとページ読込速度が落ち、SEO的に良くないからです。

他の記事でも紹介していますが、私はこちらのパンダのサイトを利用しています。

tinypng.com

 

この記事で使った画像をいくつか圧縮した時の状況です。圧縮率はまちまちですね。

圧縮後の画像をさらに圧縮するとより小さくなる時もあります。

画像の圧縮

圧縮後、右側の「download」をクリックし、ファイルをダウンロードしてそれをブログに貼り付けます。

記事投稿後にスマホで必ず表示確認をして、画像のサイズや画質の粗さが気になる場合は修正しましょう。

※私はよくやっちゃいますが画質が粗すぎるとせっかくの画像が台無しになります。

まとめ

いかがでしたか?自分自身、ペイントをまともに使ったのが多分今回が初めてなので説明不足な部分もありますがご了承ください (;´Д`)

しかし!「とりあえず画像に加工を入れてブログに載せてみたい!」という方には、ペイントは十分使えるソフトだと分かりました。フリーソフトを0から探して、その知らないソフトの使い方をまた0から調べるのも結構時間費やしてしまいますしね。

ペイントはその点、機能がシンプルなので簡易的な編集・加工には向いています。

最初は思うようにいかず時間を取られるかもしれませんが、慣れるとさくさくっと簡単にできます。

 

それにしても、画像に文字やイラストなどを加えるだけで、それらしいブログになると思いませんか??

是非ちょっとひと手間かけた画像を投稿してみてください☆私もまだまだ勉強中です!

 

【紹介したサイト】

イラストAC:無料イラストなら「イラストAC」

写真AC:写真素材なら「写真AC」無料(フリー)ダウンロードOK

フォントフリー:フォントフリー - 無料の日本語フリーフォント投稿サイト

画像圧縮サイト:TinyPNG – Compress PNG images while preserving transparency