Macなブロガー必見!「Skitch」でブログ用画像を作る方法

skitch for mac blogger Macなブロガー必見!「Skitch」でブログ用画像を作る方法

ここ数ヶ月やっとMacでブログで書くのに慣れてきたかなぁという感じなのですが、Macは便利なAppが色々あっていいですね!

なかでも今回紹介する「Skitch」は、Macなブロガーなら絶対使うべきAppです。効率が格段にあがります!
かなり有名なAppなので、既に使っていらっしゃる方も多いでしょう。

今回は、この「Skitch」で私がブログ用画像を作る一連の流れを紹介します!


Skitchって?

まずはSkitchをご存じない方のためにどんなAppか簡単に説明します。

skitch for mac blogger 1 tm Macなブロガー必見!「Skitch」でブログ用画像を作る方法

Skitchはスクリーンショットが簡単に撮れて、それをシームレスに編集できる優れものです。編集もリサイズ、トリミング、文字・図形の挿入などブログ用画像に必要な加工がほとんどできてしまうのです。使ってみると、これがないとブログにスクリーンショットを貼る作業なんかできたもんじゃないってなります。絶対。

まだSkitchをダウンロードしていない方は、MacAppStoreかSkicthの公式ページからダウンロードしましょう。Skitchの公式ページには機能が少し制限された無料版もあります。この記事で紹介する方法は無料版Skitchを使って書いていますので、無料版でも無問題ですよ!

mzi.rbknylxa.60x60 50 Macなブロガー必見!「Skitch」でブログ用画像を作る方法Skitch badge appstore sm Macなブロガー必見!「Skitch」でブログ用画像を作る方法
カテゴリ: 仕事効率化
価格: ¥1,200

スクリーンショットを撮る

まず、Skitchを起動します。そして画面右上にある「Snap」をクリックしましょう。

skitch for mac blogger 2 Macなブロガー必見!「Skitch」でブログ用画像を作る方法

すると、Skitchが隠れてカーソルが十字線になるのでドラッグして撮りたい範囲を決定します。

マウスボタンを放すと「カシャッ」という音と共にSkitchが出てきて、指定した範囲のスクリーンショットがSkitchのキャンバス内に撮られています。簡単ー!

skitch for mac blogger 3 tm Macなブロガー必見!「Skitch」でブログ用画像を作る方法

Snapモードはドラッグで範囲指定以外にも以下のような操作で様々な形でスクリーンショットが撮れます。

  • ウィンドウをクリックでそのウィンドウ全体
  • デスクトップをクリックでデスクトップ全体
  • デスクトップアイコンをクリックでアイコンのみ
  • メニューバーをクリックでメニューバーのみ
  • メニューバーアイコンをクリックでメニューバーアイコンのみ
  • ドックバーをクリックでドックバーのみ

どんだけ高機能!Mac標準のスクリーンショット(Shift+command+4+Space)でできることは一通りできます。

Snapモード以外のモードもありますが今回は割愛。

トリミングする

これから説明する画像の加工は、先ほど撮ってキャンパスにあるスクリーンショットをそのまま編集できちゃいます。簡単ー!

早速、スクリーンショットをトリミングしてみましょう。

Skitchのキャンパスの端にカーソルを持って行き、カーソルが変わったらドラッグしてトリミングします。

skitch for mac blogger 4 tm Macなブロガー必見!「Skitch」でブログ用画像を作る方法

これだけでトリミング完了です!

skitch for mac blogger 5 tm Macなブロガー必見!「Skitch」でブログ用画像を作る方法

トリミングを一旦終わっても、消えた部分はまたキャンパスの端をドラッグすれば現れます。また、元の画像以上にキャンパスを広げると白い余白が作れます。細かいところまで気が利くいい奴ですw

リサイズする

必要な範囲をSnapしたけど画像が大きすぎるときもSkitchで簡単にリサイズできます。

右下をドラッグするとスクリーンショットをリサイズできます。

skitch for mac blogger 6 tm Macなブロガー必見!「Skitch」でブログ用画像を作る方法

現在のサイズが左下に表示されているので、それを確認しながらリサイズしたいpxに合わせることもできますよ。

マスキングする

注目して欲しいところにスポットライトを当てているようなマスキングを行います。

まず左の「□」ボタンを選択し、右の「Color」で灰色のチェックのようなカラー(黒の半透明)を選びます。

skitch for mac blogger 7 tm Macなブロガー必見!「Skitch」でブログ用画像を作る方法

そして、スポットライトを当てたいところを四角で囲むようにドラッグします。

skitch for mac blogger 8 tm Macなブロガー必見!「Skitch」でブログ用画像を作る方法

最後に左のペンキバケツを選んで、囲んだ場所の外をクリックすれば完成。

skitch for mac blogger 9 tm Macなブロガー必見!「Skitch」でブログ用画像を作る方法

逆に、四角で囲んだ場所を塗りつぶしたいときはペンキバケツで囲んだ場所の中をクリックすればOK!

矢印と文字を入れる

次はスクリーンショットに矢印と文字を入れてより分かりやすいものに加工します。

左の「矢印」を選択して右の色とサイズ(3レベル目がオススメ)を適当に選びます。

skitch for mac blogger 10 tm Macなブロガー必見!「Skitch」でブログ用画像を作る方法

あとはドラッグすれば、はい、矢印が書けました。

skitch for mac blogger 11 tm Macなブロガー必見!「Skitch」でブログ用画像を作る方法

文字も同様に左の「a」を選択して右の色とサイズ(2レベル目がオススメ)を適当に選びます。そして文字を挿入したい場所をクリックして、タイプすれば完了です。

skitch for mac blogger 12 tm Macなブロガー必見!「Skitch」でブログ用画像を作る方法

矢印はドロップシャドウが付きますし、文字もアウトラインとドロップシャドウが付いてくれます。簡単に矢印と文字が挿入できる上、デザイン的にもなかなかスタイリッシュなので本当にSkitchがあれば十分です!

リネームして保存する

最後に編集したスクリーンショットに名前を付けて任意の場所に保存します。

skitch for mac blogger 13 tm Macなブロガー必見!「Skitch」でブログ用画像を作る方法

画面中央下部の入力欄がファイル名です。ここを編集すればそのファイル名で保存ができます。そして「DragMe」をドラッグして任意の場所(今回はデスクトップ)にドロップすればファイルの保存が完了です。

skitch for mac blogger 14 Macなブロガー必見!「Skitch」でブログ用画像を作る方法

デスクトップに編集したファイルが保存されました。

最終的にできた画像がこちら。

skitch free tm Macなブロガー必見!「Skitch」でブログ用画像を作る方法

説明するとかなり長くなってしまいましたが、この画像を作るのには1分とかかりません。あーすっごい便利。

Macなブロガーの方でまだ使ってない方がいらっしゃったら、是非使うことをオススメします!僕はもうSkitchなしではブログを書けません!

Skitchは今回紹介しきれなかった様々な便利機能を備えてます。興味がある方は調べてみてください。そして僕にもっと便利な方法とか機能を教えてください!w

mzi.rbknylxa.60x60 50 Macなブロガー必見!「Skitch」でブログ用画像を作る方法Skitch badge appstore sm Macなブロガー必見!「Skitch」でブログ用画像を作る方法
カテゴリ: 仕事効率化
価格: ¥1,200

Skicth公式サイト

pixel Macなブロガー必見!「Skitch」でブログ用画像を作る方法