先日紹介したPixelmator
【mac】半額セール中のPixelmatorはとってもmacらしくて良い画像ソフト
ですが、最近「WEB画面のイメージ作って」と言われまして、とりあえず時間がないので、ありもののパーツをちょっと変えたりしていくつかパターン作ろうと。
で、本当はページのパーツを一個づつ切り出して、それをゴニョゴニョ切り貼りできると一番いいんだけどなぁなどと思ってちょっと調べましたら、できるじゃないですか。
Pixelmatorでスライス。
参考にさせて頂いたのが、ここ。
Pixelmatorの「スライス」ツール | Pixelmator入門
とにかく丁寧にPixelmatorのことを書いてくれています。
たぶん、ご自身で使っていただければできると思いますが、僕がやった手順を簡単に説明します。
１．WEBの画面をキャプチャを撮る
なんでもいいのですが、最近Chromeを使い始めているので、Chrome ウェブストア - Awesome Screenshot: キャプチャーと注釈あたりで、WEB画面全体をキャプチャして保存します。
２．Pixelmatorでスライス
Pixelmatorでたちあげてズーム。
ズームは左のツールから虫眼鏡を選択。上のバーに表示されるパーセンテージを上げていきます。
良い感じの見た目になったら、スライスツールを選択します。
スライスツールは左側のカッターのマーク。
ヘッダー部分やタイトル部分、コンテンツ部分など好きな箇所をドラッグアンドドロップするとどんどん選択していけます。
選択した時に自動で番号がふられますがこの番号で後ほど保存されます。
良い感じでスライス出来たら、最後に右上にある、「WEB用に書き出す」ボタンでスライスした画像の書き出し。
これでWEB画面の要素を好きなようにスライスして画像として書き出せます。
あとは、PowerPointでもKeynoteでもお好きなように画像をポチポチつけて資料が出来上がりです。
簡単です。
使い込めばいろいろ出来そうです。
以上です。
