annotation-image-ecmg

ワードプレス

”ブログにおいしい”、注釈画像の作り方。Screenpressoで矢印や枠線、文字を追加しよう

前回までの記事では、Windows用の万能ツール「Screenpresso(スクリーンプレッソ)」をインストールし、初期設定を行いました。

続いて、Screenpressoで画面のスクリーンショットを撮る方法を説明しました。

ここでは、画像に矢印や枠線、文字を追加する方法を紹介します

画像に矢印や枠線、文字を追加する

Screenpressoで出来るどのスクリーンショット機能を使っても、すぐにワークスペースに切り替わり、保存されていることが確認できます。ワークスペースにはスクリーンショットしたものだけでなく、外部からの画像を取り込むこともできます。

Edit_24

サムネイル画像をダブルクリックするとエディターが開き、その画像編集が可能になります。

Edit_01

画像エディター

Edit_03

画像エディターには、ブログに使える機能がたくさんつまっています。

Edit_02

画像エディターは直感的に使ってみる

上の画像にある注釈は、全てScreenpressoで追加したものです。これを見るだけでも、だいたいどんなことが出来るのかが伝わるかと思います。

これらの注釈はひとつずつやり方を覚える必要はありません。画像エディターの上部にある「描画ツール」で、全て直感的に使えるようになっています。

Edit_05

各アイコンをマウスオーバーすれば、『それが何のツールなのか』の説明も現れます。

Edit_06

作成後は「別名で保存」で任意のフォルダーへ保存できます。

Edit_04

画像エディターの使用例

直感的に使えると言っても、わかりやすい例を挙げておきます。
矢印、テキスト、枠線を画像に追加してみましょう。

画像に矢印を追加

まず矢印を描いてみます。
矢印マークをクリックして、出てきた選択肢の中からイメージに近いものを選びます。

Edit_07

ドラッグして矢印を描きます。

Edit_08

矢印に付いている点をドラッグして、長さや角度を変えることが出来ます。

Edit_09

赤い点をマウスオーバーすると、描画オプションが現れます。このオプション内だけで、イメージに近づけるために必要なカスタマイズは、ほぼ完了できるようになっています。

Edit_10

Edit_11

少し変えてみました。
当然、「この設定をもう一度使いたい!」と思うことも頻繁にあるでしょう。そんな時は描画オプションの「基本設定」を選択→「新規」をクリックすると、プリセットに追加されます。

Edit_12

Edit_13

簡単ですね。無事、プリセットに登録されました。

画像にテキストを追加

続いてテキストを追加します。

Edit_14

同様に変更を加えることが出来ます。

Edit_15

Edit_16

もちろん、プリセットへの登録も可能です。

画像に枠線を追加

枠線も頻繁に使う注釈です。プリセットには、選択範囲外を暗転してくれるものもあります。

Edit_17

Edit_18

これは使えますね!

なお、Ctrl+マウスのスクロールホイールでプレビューの拡大・縮小が可能。まあひとつずつ説明するほどのものでもないので、あとは実際に使って覚えることをお勧めします。

【動画】Screenpressoで画像注釈

・・・とは言いながらも、作業をイメージしやすいように簡単な操作動画を用意しました。2分半ほどの短いものなので気軽にご覧ください。この動画もScreenpressoで作ったものです。

無料版は最後に「Screenpresso」のロゴが現れる仕様になっています。

動画の作り方はこちら

画像をトリミングする・サイズを変更する

Photoshopを使わない人には、意外と重宝するのがこれらの機能ではないでしょうか。「メイン」タブを「画像」タブへ切り替えるとその機能が現れます。

Edit_19

画像をトリミング

「切り取り」→範囲選択→「OK」を順番に選択すればOK。

Edit_20

Edit_21

画像のサイズ変更

「サイズ変更」をクリックするとオプションが現れるので、「幅」などで設定します。

それぞれクリックで拡大

Edit_22

Edit_23

以上です。

なおワークスペース内のファイルは、初期設定で指定したフォルダへ保存されているので、Photoshopなどの別のアプリケーションで編集したい時などにも問題なく流用できます

『スクリーンショットを撮る』『手軽に注釈を加える』ことに特化したツールとして、Photoshopと併用できるのも魅力のひとつと言えるでしょう。


段階を踏んでの説明を試みたので、なかなかの記事ボリュームになってしまいましたが、操作自体は簡単で、直感的なことがお伝え出来たかと思います。

Photoshopがないから、うまく画像で説明できない・・・

と試行錯誤している方も、一度覚えたら作業がスムーズになります。
ぜひ取り入れてみてください。

次は、パソコンの画面操作を録画する方法を紹介します

画面操作の録画方法

関連記事

スポンサーリンク

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. WordPressで子テーマを作る際に知っておくべき仕組みと注意点
  2. ポチッ、でビョイーン。クリックで画像を拡大表示させるワードプレスプラグイン「Ea…
  3. Todoistとも連携。複数のメールアカウントを一括管理するMac・iPhone…
  4. 魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「Phrase…
  5. あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方…

関連記事

  1. backup-all-in-auto_ec

    ワードプレス

    WordPressサイトを丸ごとバックアップ!BackWPupプラグインで自動保存のタイマー設定

    一度設定したら、後はおまかせ!せっかく作った自分のWEBサイトが、…

  2. analytics-ip-filter-ecmg
  3. gif-animation_ec

    WEBデザイン

    ゆっくりじわじわ、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方

    色が変わるサイトロゴを簡単に。休むことなく働き続ける、一生懸命な画…

  4. blog-theme-mag_ecmg-ps

    ワードプレス

    【使用者レビュー】WordPress初心者にこそおすすめのブログテーマ、TCD「MAG」のデフォルト…

    本当のことを話します。ワードプレスのブログテーマ【MAG】。このサ…

  5. sns-count-cache_ecmg2

    ワードプレス

    便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cacheの設定方法と有効…

    必要な設定だけにフォーカス。「ページを表示するたびに、今のシェア数…

  6. simple-image-sizes_ec-ps

    ワードプレス

    メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simple Image Si…

    挿入画像サイズ、もっと自由に選びたい。お悩み相談室のコーナーです。…

【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. theme-change_ecrt
  2. improvement-flow_ecmg
  3. tcd-theme-selection_ecmg-ps
  4. tcd-mag_ecmg-ps
  5. display-speed_ec
  6. todoist-extension_ecmg

タスク管理で、自己管理。

todoist

人気記事

  1. child-theme-mechanism_ecmg-ps
  2. child-theme_ecmg
  3. todoist-basic_ec-ps
  4. compress-jpeg-png-images-ecmg
  5. chrome-font_ecmg-1
  6. media-setting_ec

魅力的なブログを、今すぐ作る。

tcd-mag

ピックアップ記事

  1. widgetoon-js-count-jsoon_ecmg
  2. todoist-constitution_ec
  3. compress-jpeg-png-images-ecmg
  4. intuitive-custom-post-order_ec
  5. sns-count-cache_ecmg2
  6. phrase-express_ecmg

ブログのRetina対応、始めませんか?

retina-os-solution

掘り出し記事

  1. mailbox-goodbye-newapp_ec
  2. meta-seo-inspector_ecmg
  3. screenpresso-capture-ecmg
  4. retina-weight-saving_ecmg
  5. LightShot-Screenpresso_ecmg
  6. insert-card-link_ecmg

ゆっくり、フシギなGIFアニメ。

gif-animation

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg

とっておきのWordPressテーマ。

tcd-theme-selection

ピックアップ記事

  1. child-theme_ecmg
  2. media-setting_ec
  3. todoist-productivity_ecmg
  4. lightshot_ecmg
  5. original-share-button_ecmg-ps
  6. blog-theme-mag_ecmg-ps

CATEGORIES

Requ.log | Recommend

WordPressテーマ「MAG(TCD036)」
WordPressテーマ「Bloom(TCD053)」

特集記事

  1. adjust-the-button_ecmg
  2. tcd-theme-user-review_ecmg
  3. theme-change_ecrt
  4. todoist-extension_ecmg
  5. improvement-flow_ecmg
  6. tcd-mag_ecmg-ps

人気記事

  1. child-theme-mechanism_ecmg-ps
  2. child-theme_ecmg
  3. todoist-basic_ec-ps
  4. chrome-full-screen-capture-ecmg
  5. media-setting_ec
  6. chrome-font_ecmg-1
  7. screenpresso-initial-setting_ec

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg
  1. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマの強みとは?他テーマとの違いと基本機能をユーザー目線でレビュー
  2. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  3. display-speed_ec

    ワードプレス

    目指せ軽量化!今からでも始めるべき、WordPressサイトの表示スピード改善計…
  4. todoist-extension_ecmg

    マネジメント

    いつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選
  5. improvement-flow_ecmg

    マネジメント

    ”セルフマネジメント”の第一歩。忙しくても頭と心は軽くしておく、自己管理術と生活…
PAGE TOP