Pages Navigation Menu

For Creative Communication

[メモ]サムネイル画像作成で最も重要なのは《縦横比》の仕様理解だ

無料の画像加工アプリFotorを使ったサムネイル画像加工が捗っています。Mac, iOS, Android, そしてWindowsにも対応。ごく簡単に手順をご紹介します。

コラージュにする手順(Collage/複数枚)

fotor.png

  1. 組み合わせる画像を「Add」で読み込む
  2. 縦横比を決める
  3. 組み枚数を選ぶ
  4. テンプレート集から組みパターンを選ぶ
  5. ドラッグ&ドロップで配置する。配置後、位置を調整したり拡大したり回転・反転ができる
  6. 横幅を指定してJPGエクスポート(普段は1000pxにしちゃってます)

単品で加工する手順 (Edit)

fotor2_crop

  1. “Crop”メニューでトリミング。縦横比を決めて、四隅をつかんでトリミングする範囲を決め、Done
  2. “Scenes” メニューでInstagram風のフィルタをかける
  3. 横幅を指定してJPGエクスポート(普段は1000pxにしちゃってます)

サムネイル画像を作る前に

この手順で重要なのは「縦横比をいくつにするか」を明確に把握しておくことだ。16:9なのか、黄金比なのか、正方形1:1なのか。1:1は、Instagramの写真をそのまま流用できたりして意外に便利だし、OG:imageの小さい方は正方形にトリミングされるから、大きさが足りない場合は正方形トリミングがベターだ。

当ブログのFeatured(トップスライダー)は960×340(2.8:1)なんだけど、こういうイレギュラー比はFotorの単品編集ではうまくいかないので、16:9でいいことにしちゃっている(これがデフォルトではいちばん横長。コラージュの場合は任意の比率を指定できる)。FacebookのOG:imageは1200*630(1.91:1)なので、16:9だと上下22.5pxずつが切れることになる(このくらいだとあんまり気にならないと思う)。普通の一覧テンプレートで出すサムネイル画像は、たぶん何かしら綺麗な縦横比でデザインされているだろうから、それに合わせればスムーズな加工ができる。

CMSの機能で縮小すると画質が粗くなるし、CSSで自動トリミングするとどうしても意図しないところで切り取られていまいちな感じになる。Fotorはフリーウェアなのに高機能で、Web運営には最高のツールだ。スムーズなサムネイル画像づくりを。

> Fotor

コメントを残す