Smile Blog

スマイルヴィジョンスタッフが運営する広報ブログ

【作ってみた】KeynoteとSkitchを使用した画像加工方法(macユーザー向け)

tsukutte11

開発部のおいぬです(▽・x・▽)
今回はMacで使えるプレゼンテーションソフトの「Keynote」と、画像加工アプリの「Skitch」を使って画像加工する方法を紹介します。

私は普段Macを使って開発をしているのですが、たまに仕様書や操作説明書などの書類作成も行っています。
書類には挿絵を入れることが多いのですが、フリー素材で自分が思い描く画像を探すのが大変…
なので、私はしばしば挿絵やこのブログのメインビジュアルなどを、フリー素材同士をKeynoteやSkitchを使って組み合わせて作っています。
いわゆるコラ画像ですね。

本来のプレゼンテーションという用途とは別ですが、備忘録として画像の加工方法を紹介します。

基本的な加工方法

ちなみによく使う画像は、パソコンのモニターの画像です。
画像は「いらすとや(https://www.irasutoya.com/)」さんからです。
(いつもたいへんお世話になってます、ありがとうございますm(_ _)m)
モニター_いらすとや
このモニターの画像に、ブラウザで表示したウェブページのスクリーンショットを合わせます。

まずKeynoteを新規作成で開きます。
PCに画像が保存されているのであれば、「メニュー」→「挿入」→「選択…」から保存されている画像を選択し挿入することができます。
また、ブラウザでフリー素材集サイトを開き、マウスでドラックする方法でも挿入できます。
ブラウザからkeynoteに画像をペースト

次にウェブページのスクリーンショットを取得します。スクリーンショットを撮りたいウェブページを開いた状態で、Skitchを開き「画像キャプチャ」のボタンをクリックします。
するとマウスのポインターが十字になりますので、スクリーンショットしたい範囲をドラッグで選択するか、ブラウザ上のどこか一カ所をクリックしてください。
Skitchでスクリーンショットを撮る方法

スクリーンショットが取得できましたら、Skitchの下部にある「PNG」のマークをマウスでドラッグしてデスクトップに保存し、Keynoteのメニューから選択挿入、もしくは開いているKeynoteにそのままペーストしてください。
スクリーンショットをKeynoteにペースト

Keynoteでモニターの画像とウェブページの画像のサイズを合わせます。画像がはみ出る場合は、トリミングで必要な部分だけ切り抜きます。画像をダブルクリックするとトリミングの機能が出てくるので、サイズを調節してください。トリミング

最後に、画像の背景を加えます。加工前のフリー画像は、作成者によっては背景色が透明のものがあるので、白い四角形の図を背景として使います。メニューの「図形」から四角形をスライドにドラッグし、Keynote右側の「スタイル」から塗りつぶしの色を「白」、枠線を「枠線なし」に設定します。加工したモニターの画像が収まる大きさにサイズ変更し、その四角形を「配置」の「最背面」に設定します。(画像は説明で見やすくするため、塗りつぶし色を灰色に設定しています。)
加工画像の背景を白にする

モニター、ウェブページ、背景(四角形)全ての画像をドラッグで選択し、画像の上で右クリックしてグループ化を行います。グループ化を行うと3枚の画像がひとまとめになるので、サイズ変更や移動が便利になります。

※今回テキストは挿入していませんが、もしテキストもグループ化に含めてサイズ変更した場合、画像のサイズは変更されますが、文字サイズは変更されません。文字サイズはKeynote右側の「テキスト」から変更できます。
グループ化

グループ化した画像を[control]+[C]または右クリックでコピーし、Skitchにペーストします。左下をクリックして加工した画像に名前をつけ、「PNG」マークをドラッグしてデスクトップに保存したらできあがりです。加工画像の保存

完成!
加工後

基本的にこれらの操作を繰り返して画像を加工しています。

その他ちょっとした加工技

例えばこのような、人でモニターの一部が隠れている場合、ウェブページの四角いスクリーンショットを貼ってしまうと不自然になりますよね。
隠れたモニター_いらすとや

こういう場合は、フリーハンドで描いた図形にウェブページのスクリーンショットをあてはめて作成します。
Keynoteのメニュー「図形」から「ペンで描画」を選択し、モニターの縁をなぞっていきます。はじめと終わりの点が結ばれると、塗りつぶし「なし」・枠線が「点線」の図形ができあがります。
ペンで描画

描いた図形を塗りつぶし「白」、枠線「枠線無し」に設定し、Skitchで取得したウェブページのスクリーンショットを、フリーハンドで描画した図形の上にドラッグでペーストします。
フリーハンドの図形にペースト

ペーストしたスクリーンショットを、描いた画像に合うようにサイズ変更し、「終了」ボタンをクリックします。
描いた画像とスクショを合わせる

完成!
圧倒的な不自然さは避けられた加工ができました。
フリーハンド加工後

他にも、図形を重ねることで色を変えたり
地球温暖化

画像を反転させて左右対称にしたり
さんすう
(反転した方は全員左利きになるけど気にしない)

画像の一部を透明にしてみたり(空気椅子)
空気椅子

画像の拡大・縮小するときに、「配置」→「サイズ」で縦横比の固定のチェックを外して画像を縦横に引き伸ばすことで、地面に描かれている風にできたりします。
縦横比

お気に入りの「中二病のイラスト(女性)」でいろいろいじってみました。
中二病

いかがでしょうか?
Keynoteめちゃ楽しくないですか?笑
本来の用途とは違う使い方ですが、触っていくうちにいろいろ見つけたので、みなさんもぜひ触って機能を発見してください!

ただ普段から画像編集を頻繁にしている人はふつうに画像編集ソフトを使うことをおすすめします笑

※フリー素材は提供してくださるサイトによって規約がありますのでよく読んで使いましょう!

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

おいぬ

おいぬ

■部署
開発部

■スペック(Level、身長、座高、属性、資格)
闇属性

■入社年
2016年

■趣味
音楽、工作、踊ってみた、たべる

■座右の銘
百敗不屈

■ひとこと
おなかすいた

関連記事

  1. ひょうご就職サミット2018

    今年も開催!! 集まれ!未来の幹部候補! 合同企業説明会迫る!

  2. Photoelly039_TP_V

    Webエンジニア初心者が知っておきたいこと

  3. FullSizeRender-9-1-1024x768

    コワーキングスペースで働く3つのメリット

  4. tukutte7

    【作ってみた】画像の上に文字を表示させる方法

  5. mv_tsukatte02

    【使ってみた】プログラミングが練習できるサイトを集めてみた

  6. 超音速のハリネズミさん

    【作ってみた】入力ダイアログで謎解きゲーム

  7. 66efd8d312710c14e1e7656010bc60bd_m

    【WordPress】Contact Form 7を使ったお問い合わせフォームを作ってみよう!

  8. 四則編

    【作ってみた】Googleスプレッドシートで100マス計算表(四則編)

人気記事

  1. クリアボタン
  2. mv
  3. 9f803b3532fa44bcb3001cac6734d898_m
  4. 安い!美味い! 【大阪天満・天神橋筋商店街の食レポ】
  5. 新入社員研修「伝える+伝わるセミナー」
  6. tukutte08
  7. タイ料理「天満3パクチー」
  8. 2017年スタートアップトレンド (アメリカ版)
  9. 大阪天満天神橋筋商店街がっつりBEEF_KINGOFSTEAK

最近の記事

  1. tsukutte11 【作ってみた】KeynoteとSkitchを使用した画像加工方法(macユーザー…
  2. gatag-00014199 中小企業でも増えている「自社独自の採用サイト」
  3. mv_ssl01 「常時SSL対策」セットアップサービスについて
  4. mv_tsukatte02 【使ってみた】プログラミングが練習できるサイトを集めてみた
  5. c48549e5450e30d62215e30331440f8e_m 【WordPress】記事の順番を直感的に並べ替える!Intuitive Cus…
2018年6月
« 5月    
 123
45678910
11121314151617
18192021222324
252627282930  
PAGE TOP