annotation-image_ec

ワードプレス

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

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

screenpresso-initial-setting_linkcard

 

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

screenpresso-capture_cardlink

 

ここでは、【画像に矢印や枠線、文字を追加する】方法を説明します。

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

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

 

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

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

 

動画の作り方はこちら 

description-video_linkcard

 

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

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

 

Edit_19

 

 

画像をトリミング

「切り取り」→範囲選択→「OK」

Edit_20

Edit_21

 

 

画像のサイズ変更

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

 それぞれクリックで拡大

Edit_22

Edit_23

 

以上です。

 

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

私も『スクリーンショットを撮る』『手軽に注釈を加える』ことに特化したツールとして、Photoshopと併用しています。

 

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

『Photoshopがないから、うまく画像で説明できない、、』と試行錯誤している人も、一度覚えたら作業がスムーズになります。ぜひ取り入れてみてください!

 

次は、【パソコンの画面操作を録画する】方法を説明します 

description-video_linkcard

『伝わりやすいブログ』を作るには? 1. まずやっておきたい初期設定
 valuable-content-from-image  screenpresso-initial-setting
2. スクリーンショットを撮る 4. パソコンの画面操作を録画する
   description-video
 合わせて読みたい記事

【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個のツール

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

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク
WordPressテーマ「MAG(TCD036)」

ピックアップ記事

  1. 知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケ…
  2. 【基本編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  3. あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方…
  4. もっとストレスフリーに・・Todoistの連携ワザで高速タスク登録!
  5. 便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cac…

関連記事

  1. analytics-ip-filter_ecmg

    マーケティング

    自分のアクセス痕は残さない。アナリティクスのフィルタで自宅のIPアドレスを除外する方法

    自分の足あとを、残してはならない。サイト運営をしているなら、Goo…

  2. description-video_ec
  3. pushbullet_ec

    マネジメント

    瞬間転送。写真もURLもポンっ!スマホとパソコン間のデータ移動が捗るPushbulletの使い方

    メールで送るより、ずっとお手軽。スマートフォンとパソコン間でデータ…

  4. quicktag_ecmg

    ワードプレス

    WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機能の使い方

    反則ギリギリな、簡単さ。小見出しのデザインを美しくしたい?ああ、例…

  5. display-speed_ec

    ワードプレス

    目指せ軽量化!今から始める、WordPressサイトの表示スピード改善計画

    あなたの●●●、ちょっと重すぎない? いえ、すみません。あなた…

  6. retina-weight-saving_ecmg
スポンサーリンク
魅力的なブログを、今すぐ作る。
tcd-mag

Requ.Sound Lab. | レク.サウンドラボ

レク.サウンドラボ

音に、景色と”振る舞い”を。

特集記事

  1. business-books_ecmg
  2. retina_ecmg
  3. tcd-theme-selection_ecmg
  4. todoist-extension_ecmg
  5. adjust-the-button_ecmg
  6. display-speed_ec
  7. todoist_ec
  8. tcd-theme-user-review_ecmg
  9. theme-change_ecrt
  10. improvement-flow_ecmg

ピックアップ記事

  1. reset-button_ecrt
  2. restriction_ecmg
  3. original-share-button_ecmg
  4. sns-count-cache_ecmg
  5. tcd-theme-options_ecmg
  6. blog-contents_ecrt
  7. todoist-basic_ec
  8. dash_ecmg
  9. todoist-productivity_ecmg
  10. jpg-gif-png_ecmg

強みを見つけて、活かしていくために。

business-books

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

todoist

おすすめ記事

  1. ”WEBサイズマスター”へ。Chrome拡張「Page Ru…
  2. 小規模チーム、家族間の疎通に。Todoistで始める気軽なタ…
  3. 【Retinaディスプレイ対応2】スリムで美しいブログを実現…
  4. 基本的なSEOチェックに。DescriptionやOGPを確…
  5. きれいにしっかり画像圧縮。WordPressプラグインCom…

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

tcd-mag

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

retina-os-solution

最近の記事

  1. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  2. タスクに、日時や曜日が勝手に反映される・・!?Todoist…
  3. 魅力的なブログを今すぐ作れる。ワードプレステーマTCD【MA…
  4. MAGのデザインをフル活用。PCとスマホの広告設置枠を自由に…
  5. 移動したいデスカ?TCDテーマMAGでダブルレクタングル広告…

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

特集記事

  1. 【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底…
  2. 【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分…
  3. いつでもどこでも即タスク化。Todoistの便利すぎる拡張機…
  4. 魅力的なブログを今すぐ作れる。ワードプレステーマTCD【MA…
  5. 最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くし…

Requ.log | おすすめビジネス書

コンテンツの秘密-ぼくがジブリで考えたこと 「言葉にできる」は武器になる。
プロフェッショナルは「ストーリー」で伝える 日本人の知らなかったフリーエージェント起業術

Requ.log | おすすめ物語

モモ マリコ/マリキータ
なんくるない たったひとつの冴えたやりかた

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー目線レビュー
  2. theme-change_ecrt

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点…
  3. display-speed_ec

    ワードプレス

    目指せ軽量化!今から始める、WordPressサイトの表示スピード改善計画
  4. extension-tools-for-bloggers_ec

    ブログ

    【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個の…
  5. improvement-flow_ecmg

    マネジメント

    最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くしておく生活改善フロー…
PAGE TOP