ブログのアイキャッチ画像作成を「Sketch」で効率化。

こんにチワ!ネストです。

突然ですが、あなたはブログのアイキャッチ画像をどうやって作成していますか?

illustratorや無料のツールを使っている人が多いのでしょうか。

私はおもに「Sketch」というアプリを使っています。

この「Sketch」というアプリ、モバイルアプリ用のUIデザインツールなのですが、ブログ用の画像作成にもとても便利なんです。アイキャッチ画像を作成するときや、同じようなパターンの画像を作成するときにはとても便利なんです。

もともと私はこの「Sketch」をスマホアプリを開発するときのデザイン用に使用していました。

ためしにブログの画像作成にも使ってみたところ、作業効率アップにつながったのでご紹介したいと思います。

 

Sketchとは

「Sketch」は2008年に設立された、オランダのハーグを拠点としているBohemian coding社によって運営されています。

Bohemian coding社のチームのほとんどは遠隔地にあるらしいです。リモートワークってやつですね。

そしてこの「Sketch」というアプリ、2012年には優れたアプリケーションやゲームデザインを発表する「Apple Design Award」も受賞しています。

実際使ってみると操作がでとてもわかりやすいんです。簡単なコマンドを覚えるだけで作業効率が格段にアップします。

フリートライアル版が使用できますので気になる方はつかってみてはいかがでしたでしょうか。

こちらのSketch公式ホームページhttps://www.sketchapp.com/からダウンロードできます。

 

Sketchの便利な機能

私がSketchを利用している際に、よく使う機能をご紹介します。

トライアル版を入手した方はぜひ試してみてくださいね。

①Sketchを開く

まずはSketchアプリを開きます。このような画面がでますので、プラスマーク(New Document)の部分をクリックしてください。

 

このような画面が表示されればOK

 

②アートボードの作成

ArtBoardとは作りたい画像のサイズに合わせたデザインスペースのことを指します。

WordPressのテーマであるSANGOのアイキャッチ画像は680x390pxが推奨サイズです。今回はこれに合わせたアートボードを作ってみます。

まずはキーボードの「A」キーを押します。画面右側にいろんなサイズのアートボードを選択する画面が表示されます。画面右下のプラスボタンを押してみてください。

右下の表示がこのようになります。名前とサイズを指定してOKを押します。これで次回からはアイキャッチ画像用のアートボードをすぐに作成することができます

 

作成したアートボードはCustomタブに入っているのでクリックしてみます。アートボードが作成されました。

 

③図形やテキストを作成する方法

図形やテキストの作成も簡単です。よく使うキーボードコマンドの一覧を載せておきます。

  1. 四角形:キーボードのRを一度押します。四角形を描画するモードになるので左クリックしたままドラッグします。
  2. 角丸の四角形:キーボードのU
  3. 円:キーボードのO
  4. テキスト:キーボードのT

正方形や正円を描きたい場合は「Shiftキー」を押しながらドラッグします。

図形とテキストの作り方はこんな感じです。

 

④アイキャッチ画像の作成

それではさいごに実際にアイキャッチ画像を作ってみます。

背景画像はpixabayから探してきました。おしゃれな写真が多いのでよく使わせてもらっています。

finderからアートボードへ画像をドラッグアンドドロップすれば画像が表示されます。

白い部分が見えなくなるように画像サイズを調整しました。こちらの調整も「Shiftキー」を押しながら行えば、縦横比が崩れることなくサイズ調整できます。

 

最後に、簡単にテキストをいれてみました。キーボードの「T」を押せば、テキストモードに切り替わります。

テキストを入れてサイズを調整した状態です。

 

⑤画像の書き出し

作成した画像を書き出します。はじめにアートボード自体を選択します。

画像サイズ、保存形式を確認して、書き出しボタンを押します。

サイズの「x1」は等倍を表しています。x2ならば2倍のサイズです。複数サイズをまとめて書き出すことも可能です。

 

おまけ

似たような画像をまとめて作成したいときは、アートボードを複製することでまとめて管理できちゃいます

ベースになるアートボードをコピーして貼り付けるだけです。

まとめて選択すれば一括で書き出すこともできます。

 

まとめて画像を作った例としてこちらの記事を載せておきます。見出しごとに画像を使っています。

 

 

まとめ

いかがでしたでしょうか。

他にもまだまだ便利な機能がありますが、長くなってしまいそうなのでこの辺にしておきます。

Sketchの気になる料金ですが、年額$99を払うことで2年間無料でアップグレードを受けられるシステムとなっています。

一年経過後にアップデートをしたければ再度支払う、支払わない場合はアップデートはできないけどその時点までのバージョンのSketchは利用できるようになっています。

私は最初に一度支払って、特に問題ないのでそのまま古いバージョンを使っています。

以上、ブログのアイキャッチ画像作成を「Sketch」で効率化する方法についての記事でした!

最後までお読みいただきありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です