画像編集

ブログ運営だけに特化した、「画像編集」の完全初心者向けテクニックTOP【超実用】

image-edit-top-202001-ec



今回は、ブログ運営で今日から使える…

「画像編集」の超実践テクニック

を、完全初心者の方向けにまとめてみました

まずブログって、「記事を書くこと」は当然なんですけど、そのほかにも…

ブログで使う画像に、ちょっと手を加えたい!

こういったシーンって、けっこ~~~多いんですね

よくある例としては…

  • アイキャッチ画像に、タイトル文を入れたりデザインを加えたい!
  • 解説用の画像に、説明を入れたり矢印を加えたい!

とか

このブログでもめっちゃ使ってる

image-edit-top-20200322_top-01

アイキャッチ画像の一例

image-edit-top-20200322_top-02

解説画像の一例

ただその道のプロでもなければ、普通はこういう「ちょっとした加工」ですらも…

どうすればいいのか、まじサッパリ(^O^)

これが本音じゃないかなと思います(←経験談)

なにを隠そう僕自身も「完全なるど素人」だったので、最初のうちは…

  • 「サイズ」を統一してなかったせいで、画像ごとで文字サイズがバラバラ
  • jpgとpngの違いも知らないまま編集してたら、いつのまにか画質が劣化

こんなトラブルで、何回やり直したか覚えてないほどですw

大変だった

ぶっちゃけ最初のうちって、知らないことだらけなので…

なにがわからないのか、まずわからない

という状態ですよね

なので、今回の「画像編集」ガイドでは…

  • 「ブログ運営」で使う画像の編集

というシーンだけに絞ったうえで、今日から使える「超実践テクニック」を、1から体系的にご紹介していきます

画像の編集が楽しくなるよ!

それではさっそく見ていきましょー🐥

\ 当ブログのテーマ AFFINGER5

WING AFFINGER5 バナー01

洗練された美しいデザイン

面倒なカスタマイズもクリック1つ

今なら、タグ管理プラグイン(4,980円)の無料配布キャンペーン中!!!

【超時短】ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで

著者

azuki_01

あずき@ブロガー

ブログを愛してます

フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

プロフィール

Twitter

ブログ運営における、「画像編集」の超実践テクニック【完全初心者向け】

大きく、「4つ」のステップにわけて見ていきます

  1. まず最初に、これだけは覚えよう!【リサイズ&ファイル形式】 ←超重要!
  2. テキストを入れよう!【縁取り・影付き・座標・透過】
  3. デザインを加えよう!【網掛け・枠線・矢印】
  4. 加工を加えよう!【モザイク・透過処理】

順に見ていきますね🐥

【ステップ①】まず最初に、これだけは覚えよう!【リサイズ&ファイル形式】

pc-work-202001_01

まず【ステップ①】は、ブログ用の画像を編集するなら「絶対」に知っておくべきポイント…

  • リサイズ
  • ファイル形式

この2点です

この2つをテキトーにしたまま編集を進めると、僕の経験上「あとから全部やり直し」になる可能性がめちゃめちゃ高いんですね

2年前の自分に伝えたい…(^O^)

と言っても、まったくむずかしいことはありませんのでご安心を

まずは「リサイズ」からです🐥

リサイズ

画像には、「サイズ」というものが存在します

ここで言うサイズとは、ファイル容量のことではなく、縦・横の大きさのこと

正確にはピクセル数のことだけど、この言葉自体はスルーでOK!

そして「リサイズ」とは、そんな「画像のサイズを変更すること」です

で、なんでこの「リサイズ」が大切なのかと言うと…

  • サイズの大きい画像をブログに貼ると、容量を食って「ページ読み込み」も重くなるから
  • 画像サイズがバラバラだと、文字などのサイズを毎回揃えて描いても、バラバラの大きさで表示されるから

ですね

後者については、例えば…

「同じフォントサイズのテキスト」を、
「大小2枚の画像」にそれぞれ描き加える

とします

描き加える文字の、「フォントサイズ」そのものは同じでも…

  • 「1000px」という大きいサイズの画像に、文字を描く
  • 「500px」という小さいサイズの画像に、文字を描く

この2つでは、実際のブログ上に映るそのテキストの大きさは、まるで変わってしまうということ

実例です ↓

image-edit-top-20200322_1-1-01

1000pxの画像

image-edit-top-20200322_1-1-02

500pxの画像

「ランニングスタート!」という文字の、「フォントサイズ」自体は一緒でも、「500px」の方が実際にはかなり大きく映ってます

ぜんぜん違う…

なので!

画像を編集するときには、いきなり文字やデザインを描き加えるのではなく…

  • まず最初に、ベースとなる画像を「リサイズ」することで、サイズを揃えておく

ことが大切です

僕がいつも愛用してる、「PhotoScape」という無料編集ソフトを使った「リサイズ」の手順は ↓ から♪

photoscape-resize-ec-20191224
無料ソフトPhotoScapeで、画像編集に必須な「リサイズ」する方法を画像つきで優しく解説【一瞬】

続きを見る

ファイル形式

お次は、画像の「ファイル形式」です

まずファイル形式とは、

  • jpg
  • png

と言った、「ファイル名の末尾」に必ず付くもののことですね

ファイル拡張子とも言うよ!

このファイル形式は、画像を保存するときに選ぶことができます

ただ、完全初心者のころは…

よくわからないから、とりあえず「jpg」のままでいっか!

みたいに、適当な感じで選んでしまいがち(←経験談)

でもこの「jpg」とか「png」の使い分けって、実は超大切なんです

例えば…

  • 「jpg」で画像の保存を繰り返したら、画質が劣化して色がくすんできたり
  • 高画質な写真を「png」でブログに貼ったら、ページの読み込みが重たくなったり

といった問題につながります

とはいえ、ファイル形式を使い分けるポイントは「超簡単」です

詳細は ↓ から♪

file-extension-201912
jpg(jpeg)とpngの違い!ファイル形式の「超実践的な使い分け」を初心者向けに解説【拡張子】

続きを見る

【ステップ②】テキストを入れよう!【縁取り・影付き・座標・透過】

pc-work-202001_02

つづいて【ステップ②】は、「ブログの画像編集」において中核となる…

テキスト編

です

特に「解説用の画像」をブログに貼ったりするときに、この「文字入れ」はよく使います

まずは基本的なテクニックから🐥

縁取り・影付き・座標

ブログ画像に描き加えるテキストは、なんのアレンジもしないままだと、かなりあか抜けない印象になりかねません(経験談)

初心者の場合、まず「3つ」のポイントを知っておくだけで、”それっぽい印象" がぐっと演出できます

  • 縁取り
  • 影付き
  • 座標

具体的なやり方は ↓ から♪

photoscape-text-ec-20191225
無料ソフトPhotoScapeで、ブログのサムネ画像に便利な「テキスト編集」する方法を画像つきで解説【縁取り/影/座標】

続きを見る

透過(ウォーターマーク)

上記3つの基本を覚えたら、もう1つ押さえておきたいアレンジが…

  • テキストの透過処理

つまり、「文字を透明化すること」ですね

この「透過」は、アイキャッチ画像とかにも便利なテクニックですが、もう1つブログで役立つのが…

「ウォーターマーク」を作れること

ウォーターマークとは、画像の転載防止のための「透かし」のこと

テキストの「透過処理」を覚えておけば、このウォーターマークも簡単に入れられるようになります

具体的なやり方は ↓ から♪

photoscape-watermark-20191227-ec
【透かし】無料ソフトPhotoScapeで画像に「ウォーターマーク」を入れる方法を優しく解説【転載対策】

続きを見る

【ステップ③】デザインを加えよう!【網掛け・枠線・矢印】

pc-work-202001_03

つづいて3つ目のステップは…

デザイン編

です

ブログで使う画像は「テキスト」だけでなく「デザインパーツ」を描き加えることで、一層プロっぽい印象になったり、わかりやすい解説画像が作れたりします

まず覚えておきたい超便利なデザインは、この2つです

  • 網掛け&枠線
  • 矢印

まずは「網掛け&枠線」から🐥

網掛けと枠線

ブログ運営において、特にアイキャッチ画像に極めて便利なデザインが…

網掛け&枠線

です

これができるようになるだけで、”タイトル感” がぐっと際立たせられます

具体的なやり方は ↓ から♪

photoscape-shade-frame-ec-20191226
無料ソフトPhotoScapeで、ブログのサムネ画像に便利な「網掛け・枠線」を作る方法を画像つきで解説

続きを見る

矢印

もう1つ、ブログ画像で地味にめちゃめちゃ使えるデザインが…

矢印

です

こちらはサムネというよりは、記事内の解説画像とかに便利なテクニック

具体的なやり方は ↓ から♪

gimp-arrow
【Arrow Brushes】GIMPで綺麗な「矢印」を描く方法を、画像つきで優しく解説【プラグイン】

続きを見る

【ステップ④】加工編「モザイク処理・背景の透過処理」

pc-work-202001_04

最後の4つ目のステップは、ズバリ…

加工編

です

といっても、まず覚えておきたいのはこの2つだけ

  • モザイク処理
  • 背景の透過処理

まずは「モザイク処理」から🐥

モザイク処理

屋外で撮った写真など、他人が映りこんでしまってるような画像には「モザイク処理」がほぼ必須となります

むずかしい印象かもしれないですが、実はやり方は超簡単。「GIMP」を使えば、プロっぽい印象のモザイク処理をサクサクかけられます

具体的なやり方は ↓ から♪

gimp-blur-20191221
GIMPで画像にモザイク処理をかける方法を、初心者向けに優しく解説【ぼかし】

続きを見る

背景の透過処理

もう1つの加工アレンジは、「背景などの透過処理」です

こちらは今回のなかでは唯一 ”やや応用” 的なテクニックで、例えば「2つの画像を上手く重ね合わせたいとき」なんかに便利です

具体的なやり方は ↓ から♪

gimp-transparent
GIMPで画像の背景を透明化させる方法を、初心者向けに優しく解説【透過処理】

続きを見る

今回の「ブログやるなら知っておきたい画像編集の実践テクニック」については、これで以上です

大変お疲れさまでした♪

あずき🐥

リクナビNEXT

著者

azuki_01

あずき@ブロガー

ブログを愛してます

フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

プロフィール

Twitter

-画像編集

Copyright© あずきのぶろぐ。 , 2020 All Rights Reserved.