YouTubeにVR動画を公開中!スマホやVRゴーグルで体験できます!

【Pixelmator】Photoshop代用?Webデザインデータをpsdで出力(Mac専用)

Photoshop使いたいけど、月額契約だからやめておこう…

私は数回だけPhotoshopでWebデザインデータを作った事がありますが、数回程度だったので契約していません。

ある日のクライアントワークで.psdファイルが共有され、「これはやばい..」と思いましたが、なんとMacに入ってたPixelmator Proで.psdファイルを開く事ができました

いじっていたところ、Pixelmator ProでWebデザインデータを作成し.psdファイルで書き出すこともできたので衝撃を受けました。

今回はPixelmator ProでWebデザインデータを作成し、.psdファイルで書き出す方法を紹介します。

この記事の担当者

Yusuke Goto360° Videographer
19歳の時にYouTubeで星のタイムラプス映像を見たのをきっかけに、自然の写真を撮影。23歳のドローン映像や、4K60fps映像を見たのをきっかけに、動画撮影も開始。日本の自然をメインに撮影し、写真や動画などをSNSに投稿中。25歳からは360°カメラを購入し、YouTubeにVR動画を公開。今後は360°カメラをメインに様々なVR動画を撮影する予定。

Pixelmator ProでWebデザインデータの作成

Pixelmator Proは1回買い切りで、Mac App Storeから4,900円で購入できます。
私が購入した時は8,000円近くしていました…

早速Pixelmator ProでWebデザインデータを作成していきましょう。

新規作成

始めにPixelmator Proを開き、Webの項目から好きなサイズを選択してください。

PixelmatorでWebデザインデータを作成 .psdファイル

画面下の数値を設定することで、画面の大きさを変更することができます。

ボックス作成

始めにサイトのバランス調節するために四角を追加し、バランスをとるための基準となるものを追加しましょう。

画面右下のメニューから丸と四角のマークが重なっているアイコンをクリックしてください。

べた塗りの項目だけにチェックを入れ、編集画面に四角を追加してみましょう。

PixelmatorでWebデザインデータを作成 .psdファイル

色は白以外の色にしておくことをお勧めします。

ルーラー作成

編集画面に四角を追加した後、編集画面の上部に定規のようなものが表示されているのでそこにマウスを合わせてください。

定規にマウスを合わせながらクリックし、左側の定規をクリックした場合は右側に。上の定規なら下側にクリックしながら移動させます。

PixelmatorでWebデザインデータを作成 .psdファイル

すると下記画像のように細くて青い線が表示されます。

ルーラーを使用してWebデザインのバランスをとっていきます。

PixelmatorでWebデザインデータを作成 .psdファイル

色を付ける

色を塗る場合は画面右側のブラシマークをクリックし、べた塗り項目をONにしてからカラーの項目から色を選択してください。

PixelmatorでWebデザインデータを作成 .psdファイル

色を付けたものと違うものが色変更された場合は、画面左側の選択しているレイヤーが正しいかを確認してください。

PixelmatorでWebデザインデータを作成 .psdファイル

背景を水色にしてみました。

Webデザインデータの完成

デザインを作成していると、デザイン量が増え下に伸ばしたい場合があります。

そこで、画面右側の四角のボタンをクリックしてください。

PixelmatorでWebデザインデータを作成 .psdファイル

デザイン画面に枠が表示されるので、下に伸ばしましょう。

PixelmatorでWebデザインデータを作成 .psdファイル

次に画面右側の矢印をクリックし、背景(今回は水色)を下に伸ばしてください。

PixelmatorでWebデザインデータを作成 .psdファイル

今回は適当ですが、とりあえず下記画像のような感じにデザインデータを作成しました。

PixelmatorでWebデザインデータを作成 .psdファイル

早速.psdファイルを書き出してみます。

Photoshopで使用可能な.psdファイルとして書き出す

Pixelmator Proで作成したWebデザインをPhotoshopで使用可能な.psdファイルに書き出してみましょう。

Webデザインデータを.psdファイルとして書き出す

Webデザインが完成したら画面右上の共有マークをクリックし、共有方法が複数表示されるので一番下の「書き出す」をクリックしてください。

PixelmatorでWebデザインデータを作成 .psdファイル

デフォルトだとJPEG設定です。

PixelmatorでWebデザインデータを作成 .psdファイル

形式の項目をクリックしてください。

PixelmatorでWebデザインデータを作成 .psdファイル

保存形式が複数出てくるので、「Photoshop」を選択してください。

PixelmatorでWebデザインデータを作成 .psdファイル

Photoshopを選択した後、ファイルの名前を変更して保存先を選んでください。

PixelmatorでWebデザインデータを作成 .psdファイル

最後に書き出すをクリックすると.psdファイルで書き出されます。

Photoshopで開いてみる

先ほど書き出した.psdファイルをPhotoshopで開いてみました。

PixelmatorでWebデザインデータを作成 .psdファイル

ルーラーも残されている

.psdファイルをダブルクリックしてPhotoshop経由で開いたら、Pixelmator Proで作成したWebデザインがそのまま開けました。

PixelmatorでWebデザインデータを作成 .psdファイル

なんとルーラーまで保存されています。