どうも。ノッツです(^o^)/
前回、私がiPhoneの画像をブログにアップするまでの流れを紹介しました。
今回は、パソコン（特にMac）で作成したスクリーンショットをブログにアップするまでの流れを紹介しようと思います。
主に、Macのデフォルトのアプリケーション、Adobe製品であるPhotoshop CCを利用します。
Photoshop CCは、Creative Cloudに申し込むことで、使うことができますよ。
追記：カメラの写真をブログにアップするまでの流れの記事を書きました。
スクリーンショットの作成
Macで作成したスクリーンショットは、デフォルトではデスクトップに保存されます。
スクリーンショットは、command +shift + 4 などで作成することができます。
Finderに移動
スクリーンショットを管理しやすいようにFinderに移動します。
取り込み先のFinderの名前は、「日付@分かりやすい名前」にしています。今回は「2015-08-01@スクリーンショットをUPする方法」です。
この方が過去にブログにUPした画像を後から探しやすいためです。
ファイル名の変更
ファイル名がデフォルトの状態では日付と時間になっているので、このファイル名を分かりやすいように変更します。
分かりやすいファイル名に変更したほうがSEO的に良いと思っているからです。
以下の記事のように一括で変更したほうが効率的です。
ファイル名を変更して以下のようにしました。
Photoshop CCで編集
Photoshop CCを使って画像を簡単に編集します。基本的にはiPhone・iPad編と同じです。
ブログに載せる画像を一旦全て開きます（Web用に最適な画像として保存も行うので）。
基本的にやることは、説明をしている箇所を示すために赤色などで囲んだり、見せたくない箇所をモザイクをかける2通りです。
編集する必要のない画像は、ここの編集作業を飛ばします。
説明をしている箇所を示す
赤色で囲む場合は以下のようにします。
「角丸長方形ツール」を選択します。このとき「シェイプ」になっていることを確認します。
あとは色や線の太さなどを設定し、説明したい箇所をドラッグ&ドロップすればできます。
見せたくない箇所にモザイクをかける
モザイクをかける場合は以下のようにします。
「長方形選択ツール」を選択し、モザイクをかけたい箇所をドラッグ&ドロップで選択します。
メニューの【フィルター】から【ピクセレート】の「モザイク」をクリックします。
モザイクのセルの大きさを選び、「OK」をクリックします。
画面上でモザイクのかかり具合を確認できるので便利です。
これでモザイクをかけることができます。
2回目以降、同じフィルターをかける場合は、command +control+ F でできるので便利です。
Photoshop CCでWEB用に書き出し
編集が終わると、Web用に最適な画像として書き出しを行います。
アクション機能を使って予め登録しているのでワンタップで終わらせしますが、まだアクション機能を設定していないとして説明します。
アクション機能については以下の記事で説明しています。アクションとして以下の操作を登録して使うことで、効率よくWeb用に最適な画像を作成できます。
メニューの【ファイル】から【書き出し】の「書き出し形式」をクリックします。
《書き出し形式》画面となるので、保存形式や画像サイズを設定します。
私は以下のように設定しています。
- 保存形式：JPG
- 画質：30%
- 画像サイズ拡大・縮小：50%
アクション機能を使ってこの流れを登録して使う場合、書き出し後の画像サイズは同じ幅高さにはならず、拡大・縮小で指定したパーセントに応じて書き出されます。
そのため、幅高さで画像をサイズを指定せずに、拡大・縮小で画像サイズを指定して、元の画像サイズの50%の画像サイズで作成されるようにしています。
画像サイズを変更すると、そのときのファイルサイズが確認できます。
あまり大きいサイズにするとSEO的やユーザービリティ的によくないのでなるべく小さいサイズに設定します。
拡大縮小機能を使って、変更後の画質も確認できます。
設定が終われば、「書き出し」をクリックします。
書き出し専用のFinderに書き出した画像を保存するようにしています。
「書き出し」をクリックすることでWeb用に最適な画像が作成され保存されます。
上記で説明してきたことをアクションで登録することで、次からはワンクリックで書き出しが実行されます。
普通サイズと大きいサイズに分けてアクションに登録しています（作成後のファイルサイズの兼ね合いで）。
ブログ（WordPress）にアップ
最後に、作成した画像をブログにアップします。
WordPressの場合は、ドラッグ&ドロップでブログ内に選択した画像を一気に取り込めるので簡単です。
さいごに
私がパソコンで作成したスクリーンショットを、Photoshop CCで編集をしてからブログに取り込むまでの流れを紹介しました。
Photoshop CCを利用する場合、アクション機能を使って登録してしまえば、簡単にWeb用に最適な画像が作成できるので便利です。
今回の流れを参考にしていただければ幸いです。
Photoshop CCは、体験期間を利用することで一定期間無料で使うことができます。
Photoshop CCの体験版はこちら。
Photoshop CCについてはこちらから。
⇒ Photoshop CC
Photoshop CCを一つ利用したい場合はCreative Cloudの単体プランとなり月額2,180円かかります。
Photoshop CCの他に、Lightroom CCやLightroom Classic
CCを利用したい場合は、Creative Cloudのフォトプラン
というPhotoshop CCとLightroom CC、Lightroom Classic CCがセットに使える月額980円のプランもありますので、3つ使いたい場合はこちらのプランを使うといいと思います。こっちのほうが安いです。
フォトプランの体験版はこちらから。
フォトプランについてはこちらから。
⇒ フォトプラン
フォトプランは単体プランと比べると、オンラインストレージが20GB（単体プランは100GB）となったり、Typekitが使えないなどといったことがありますが、安く使えるのでそれほど気にすることではないでしょう。
Photoshop CCやLightroom CC、Lightroom Classic CCの他に、Illustrator CCやInDesign
CCなども使いたい場合は、Creative Cloudのコンプリートプランという月額4,980円のたくさんのソフトが使用できるプランを使うといいでしょう。
プラン違いは、Creative Cloudのプラン比較表に書かれているのでこちらを御覧ください。
コメント