画像をブログにアップするまでの流れ【PCスクリーンショット編】

apple-691282_1280

どうも。ノッツです(^o^)/

前回、私がiPhoneの画像をブログにアップするまでの流れを紹介しました。

画像をブログにアップするまでの流れ【iPhone・iPad編】
どうも。ノッツです(^o^)/ ブロガーの皆さん、ブログに画像を載せるのにどのような手順で行っていますか? 人それぞれだと思いますが、何かの参考になればと私がブログに画像をアップするまでの流れを...

今回は、パソコン(特にMac)で作成したスクリーンショットをブログにアップするまでの流れを紹介しようと思います。

主に、Macのデフォルトのアプリケーション、Adobe製品であるPhotoshopを利用します。

Photoshopは、Creative Cloudに申し込むことで、使うことができます

追記:カメラの写真をブログにアップするまでの流れの記事を書きました。

画像をブログにアップするまでの流れ【カメラ写真編】
どうも。ノッツです(^o^)/ 先日、私がiPhoneやパソコンのスクリーンショットの画像をブログにアップするまでの流れを紹介しました。 食べ物などを紹介するときに、カメラで撮影...
スポンサーリンク

スクリーンショットの作成

Macで作成したスクリーンショットは、デフォルトではデスクトップに保存されます。

スクリーンショットは、command +shift + 4 などで作成することができます。

Finderに移動

スクリーンショットを管理しやすいようにFinderに移動します。

取り込み先のFinderの名前は、「日付@分かりやすい名前」にしています。今回は「2015-08-01@スクリーンショットをUPする方法」です。

この方が過去にブログにUPした画像を後から探しやすいためです。

screenshot_photo_up_blog1

ファイル名の変更

ファイル名がデフォルトの状態では日付と時間になっているので、このファイル名を分かりやすいように変更します。

分かりやすいファイル名に変更したほうがSEO的に良いと思っているからです。

以下の記事のように一括で変更したほうが効率的です。

ファイル名を一括で変更する方法[Mac、AdobeCreativeCloudユーザー向け]
こんにちは。ノッツです(^o^)/ パソコンを使っていて一括でファイル名を変更したいことがよくあります。 たとえば、たくさんスクリーンショットを撮って、ファイル名を変更してからブログにアップした...

ファイル名を変更して以下のようにしました。

screenshot_photo_up_blog2

スポンサーリンク

Photoshopで編集

Photoshopを使って画像を簡単に編集します。基本的にはiPhone・iPad編と同じです。

ブログに載せる画像を一旦全て開きます(Web用に最適な画像として保存も行うので)。

基本的にやることは、説明をしている箇所を示すために赤色などで囲んだり、見せたくない箇所をモザイクをかける2通りです。

編集する必要のない画像は、ここの編集作業を飛ばします。

screenshot_photo_up_blog3

説明をしている箇所を示す

赤色で囲む場合は以下のようにします。

「角丸長方形ツール」を選択します。このとき「シェイプ」になっていることを確認します。

あとは色や線の太さなどを設定し、説明したい箇所をドラッグ&ドロップすればできます。

screenshot_photo_up_blog4

見せたくない箇所にモザイクをかける

モザイクをかける場合は以下のようにします。

「長方形選択ツール」を選択し、モザイクをかけたい箇所をドラッグ&ドロップで選択します。

メニューの【フィルター】から【ピクセレート】の「モザイク」をクリックします。

screenshot_photo_up_blog5

モザイクのセルの大きさを選び、「OK」をクリックします。

画面上でモザイクのかかり具合を確認できるので便利です。

screenshot_photo_up_blog6

これでモザイクをかけることができます。

2回目以降、同じフィルターをかける場合は、command + F でできるので便利です。

screenshot_photo_up_blog7

PhotoshopでWEB用に書き出し

編集が終わると、Web用に最適な画像として書き出しを行います。

アクション機能を使って予め登録しているのでワンタップで終わらせしますが、まだアクション機能を設定していないとして説明します。

アクション機能については以下の記事で説明しています。アクションとして以下の操作を登録して使うことで、効率よくWeb用に最適な画像を作成できます。

Photoshopでよく使う作業をアクションに登録して効率よく利用する方法
どうも。ノッツです(^o^)/ 言わずと知れた画像編集ソフトとして「Photoshop」があります。 私はブログに写真を載せるときの編集やWeb用に書き出すときなどに使っています。 昔は数...

メニューの【ファイル】から【書き出し】の「書き出し形式」をクリックします。

screenshot_photo_up_blog8

《書き出し形式》画面となるので、保存形式や画像サイズを設定します。

screenshot_photo_up_blog9

私は以下のように設定しています。

  • 保存形式:JPG
  • 画質:30%
  • 画像サイズ拡大・縮小:50%

アクション機能を使ってこの流れを登録して使う場合、書き出し後の画像サイズは同じ幅高さにはならず、拡大・縮小で指定したパーセントに応じて書き出されます。

そのため、幅高さで画像をサイズを指定せずに、拡大・縮小で画像サイズを指定して、元の画像サイズの50%の画像サイズで作成されるようにしています。

画像サイズを変更すると、そのときのファイルサイズが確認できます。

あまり大きいサイズにするとSEO的やユーザービリティ的によくないのでなるべく小さいサイズに設定します。

screenshot_photo_up_blog10

拡大縮小機能を使って、変更後の画質も確認できます。

screenshot_photo_up_blog11

設定が終われば、「書き出し」をクリックします。

書き出し専用のFinderに書き出した画像を保存するようにしています。

screenshot_photo_up_blog12

「書き出し」をクリックすることでWeb用に最適な画像が作成され保存されます。

上記で説明してきたことをアクションで登録することで、次からはワンクリックで書き出しが実行されます。

普通サイズと大きいサイズに分けてアクションに登録しています(作成後のファイルサイズの兼ね合いで)。

screenshot_photo_up_blog13

ブログ(WordPress)にアップ

最後に、作成した画像をブログにアップします。

WordPressの場合は、ドラッグ&ドロップでブログ内に選択した画像を一気に取り込めるので簡単です。

screenshot_photo_up_blog14

さいごに

私がパソコンで作成したスクリーンショットを、Photoshopで編集をしてからブログに取り込むまでの流れを紹介しました。

Photoshopを利用する場合、アクション機能を使って登録してしまえば、簡単にWeb用に最適な画像が作成できるので便利です。