読者です 読者をやめる 読者になる 読者になる

DIY家族と英語家族

diyと英語を楽しんでいる家族のまとめ

サムネイルやアイキャッチ画像に文字やテキストを簡単に入れる方法

スポンサーリンク

f:id:buchibuchi4647:20170317055404g:plain

ブログやサイトを運営している方にとってサムネイルやアイキャッチ画像はとても重要な意味を持ちますよね。読者はまず画像に着目してその後タイトルを読んでるいるからです。つまり読者に記事を読んでもらうには画像がとても大切ってことです。今回は少しでも画像を引き立てるために画像にテキストを入力する手順をまとめました。

 

 

なぜサムネイルにテキストをいれる必要があるの?

冒頭でも言いましたが読者はまずあなたの記事を読む前にタイトルとサムネイル画像を見ます。むしろサムネイル画像のほうが人間の心理的に先に脳裏に入ってくると思います。いかに読者を引きつけるサムネイルを見せることが重要になってきます。

ほかにもyoutubeなどの動画サイトでもサムネイルとタイトルだけが並んでいます。その中で勝負しようと思ったらサムネイルの工夫は必然的に必要になってきます。決して難しい作業ではありません。慣れてしまえば誰でもできます。まずは簡単はテキスト入力から覚えていきましょう。

 

今回使用するソフトはadobe社のphotoshopを使って説明しています。こちらは有料の画像編集ソフトですが、もちろん無料編集ソフトでも可能です。しかし、adobeのphotophopは使い勝手よく、初心者にも使いやすいモノですのでこちらをおすすめします。

 

有料版ですが実は無料で手に入れることもできます。無料で入手する方法に関しては以下にまとめていますので参考にしてください。

 

 

 

diy-english.hatenablog.com

photoshopの使い方

今回はphotoshopのCS6を使って解説しています。他のバージョンと多少レイアウトに違いはありますが大きく差異はありません。今回のサンプルは記事のサムネイルと同じもです。では解説していきます。

まずはphotoshopを開いたらファイル→新規をクリック

f:id:buchibuchi4647:20170317055543p:plain

1.ファイル名を決める。

.サムネイルの画像サイズを設定する。ほとんど1200×630と思うのでこれに合わせます。

3.プリセット保存。保存すると次回から新規→この設定した内容で編集可能になる。

f:id:buchibuchi4647:20170317055558p:plain

ファイル→開くで編集したい画像を読み込む。

f:id:buchibuchi4647:20170317055611p:plain

左右側にツールバーとボックス。中央に選択した画像が表示される。

1.左側のTを選択して文字を入力する。

2.右側のカラーを選択して文字の色を変える

f:id:buchibuchi4647:20170317055627p:plain

1.レイヤーをつける。文字に輪郭をつけることによって目立たせることができます。

2.左上のツールバーの選択ツールより、テキストの配置を調節する。

f:id:buchibuchi4647:20170317055658p:plain

最後に保存をします。保存の仕方はいろいろありますが、僕はwebで保存をすすめています。画像サイズを変えずにファイルを圧縮してくれるのでサイトに負荷がかからずにすみます。

f:id:buchibuchi4647:20170317055717p:plain

元の画像を選択して保存をすれば完成です。その他の細かい設定はお好みでどうぞ。おつかれさまでした。