【mac】Pixelmatorのスライス(切り抜き)機能がWEB企画職には便利

Pixelmator説明6

先日紹介したPixelmator

【mac】半額セール中のPixelmatorはとってもmacらしくて良い画像ソフト

ですが、最近「WEB画面のイメージ作って」と言われまして、とりあえず時間がないので、ありもののパーツをちょっと変えたりしていくつかパターン作ろうと。

で、本当はページのパーツを一個づつ切り出して、それをゴニョゴニョ切り貼りできると一番いいんだけどなぁなどと思ってちょっと調べましたら、できるじゃないですか。

Pixelmatorでスライス。

参考にさせて頂いたのが、ここ。
Pixelmatorの「スライス」ツール | Pixelmator入門
とにかく丁寧にPixelmatorのことを書いてくれています。


たぶん、ご自身で使っていただければできると思いますが、僕がやった手順を簡単に説明します。

1.WEBの画面をキャプチャを撮る


なんでもいいのですが、最近Chromeを使い始めているので、Chrome ウェブストア - Awesome Screenshot: キャプチャーと注釈あたりで、WEB画面全体をキャプチャして保存します。

Pixelmator説明1

2.Pixelmatorでスライス


Pixelmatorでたちあげてズーム。

Pixelmator説明2
ズームは左のツールから虫眼鏡を選択。上のバーに表示されるパーセンテージを上げていきます。
Pixelmator説明3
Pixelmator説明4
良い感じの見た目になったら、スライスツールを選択します。
スライスツールは左側のカッターのマーク。

Pixelmator説明5

ヘッダー部分やタイトル部分、コンテンツ部分など好きな箇所をドラッグアンドドロップするとどんどん選択していけます。
選択した時に自動で番号がふられますがこの番号で後ほど保存されます。

Pixelmator説明6

良い感じでスライス出来たら、最後に右上にある、「WEB用に書き出す」ボタンでスライスした画像の書き出し。


Pixelmator説明7

これでWEB画面の要素を好きなようにスライスして画像として書き出せます。

あとは、PowerPointでもKeynoteでもお好きなように画像をポチポチつけて資料が出来上がりです。

簡単です。
使い込めばいろいろ出来そうです。


Pixelmator(Version 2.2)

価格:¥1,300(最新価格はStoreで確認してください)

カテゴリ:グラフィック&デザイン

評価: (4 / 395件の評価)

App Store


以上です。

0 件のコメント:

このページをブックマーク