役立つかも!便利な画像加工(アイキャッチ編)

  ブログ内の画像編集この3つのツールでやってます!

 

 

・ペイント(Windows標準アクセサリ)

・Cals(オフィススイートOfficeLibreの表計算ソフト)

・FireShot(GoogleChromeの拡張機能)

 

 これらを使い画像加工のちょっとしたテクニックをご紹介します!(備忘録レベルです)

 

 

アイキャッチづくり

 

完成図

便利な画像加工(アイキャッチ編)

 

手探りです、アイキャッチ作りの方針を決めようと思います!

 

①サイズ決定

ツイッターに投稿されるサイズを基準に横幅503ピクセル、縦幅253ピクセルにしてみます。

 

②構図決定

構図全体の指針としては短時間で悩まず作れる事!

それを踏まえて次の3つがアイキャッチの構成です。括弧内にその狙い

記事ごとの背景(記事ごとの差別化)

記事ごとの文字(シンプル、絵と被らない)

共通キャラクター絵(個性出し)

 

 

③その他

フォントは柔らかめ

 

 

実際の作業

①作業用アプリケーションの起動

Calsを開きます。画像加工はここで行っています。

※使いやすくするため初期画面とは表示が異なる部分があります(バージョン: 6.2.7.1 (x64)を使用)

Calc

 

 

②下地の画像を作成

 ペイント(Windows標準アクセサリ)を開きます

横幅253ピクセル、縦幅253ピクセルの画像を作成します。(目標横幅サイズの半分)

 

ペイント

 

③画像配置

下地の画像を2つ、好きなキャラクター画像を起動したCalc上にドラッグアンドドロップすると、以下のように3つのブロックができます。

下地貼り付け


④下地(文字エリア)の編集

 エリアを選択してF2を押すと文字入力の編集モードになります

アイキャッチとして表示したい文字、背景、フォントを決めます

 

f:id:ruruthian:20191017174349p:plain

 

フォントは「いろはマル」様のものをお借りしました。

modi.jpn.org

 

 

⑤下地(文字エリア)、下地(キャラエリア)の透過

 

2つのエリアを透過させます。

設定は以下の画像を参照

透過設定方法

 

⑥組み合わせ+結合作業

3つの絵を重ね合わせてそれぞれの微調整 

  • キャラクター図:トリミング
  • 下地(文字エリア):前面出し 横幅サイズアップ、
  • 下地(キャラエリア):前面出し 横幅サイズダウン

 

調整前

調整前のアイキャッチ

調整後

調整後のアイキャッチ



 

⑦画像の保存

選択ツール(標準では表示されてません)で3つの絵を選択し

ペイント等に貼り付けます

 

※選択ツールの出し方

選択ツールの出し方

 

⑧今後は

次回以降はこのシートを保存しておき手順の⑤~を行う!

 

 

今日はここまで!

画像加工記事は今後統合する予定