Photoshop使いたいけど、月額契約だからやめておこう…
私は数回だけPhotoshopでWebデザインデータを作った事がありますが、数回程度だったので契約していません。
ある日のクライアントワークで.psdファイルが共有され、「これはやばい..」と思いましたが、なんとMacに入ってたPixelmator Proで.psdファイルを開く事ができました。
いじっていたところ、Pixelmator ProでWebデザインデータを作成し.psdファイルで書き出すこともできたので衝撃を受けました。
今回はPixelmator ProでWebデザインデータを作成し、.psdファイルで書き出す方法を紹介します。
この記事の担当者
目次
Pixelmator ProでWebデザインデータの作成
Pixelmator Proは1回買い切りで、Mac App Storeから4,900円で購入できます。
私が購入した時は8,000円近くしていました…
早速Pixelmator ProでWebデザインデータを作成していきましょう。
新規作成
始めにPixelmator Proを開き、Webの項目から好きなサイズを選択してください。
画面下の数値を設定することで、画面の大きさを変更することができます。
ボックス作成
始めにサイトのバランス調節するために四角を追加し、バランスをとるための基準となるものを追加しましょう。
画面右下のメニューから丸と四角のマークが重なっているアイコンをクリックしてください。
べた塗りの項目だけにチェックを入れ、編集画面に四角を追加してみましょう。
色は白以外の色にしておくことをお勧めします。
ルーラー作成
編集画面に四角を追加した後、編集画面の上部に定規のようなものが表示されているのでそこにマウスを合わせてください。
定規にマウスを合わせながらクリックし、左側の定規をクリックした場合は右側に。上の定規なら下側にクリックしながら移動させます。
すると下記画像のように細くて青い線が表示されます。
ルーラーを使用してWebデザインのバランスをとっていきます。
色を付ける
色を塗る場合は画面右側のブラシマークをクリックし、べた塗り項目をONにしてからカラーの項目から色を選択してください。
色を付けたものと違うものが色変更された場合は、画面左側の選択しているレイヤーが正しいかを確認してください。
背景を水色にしてみました。
Webデザインデータの完成
デザインを作成していると、デザイン量が増え下に伸ばしたい場合があります。
そこで、画面右側の四角のボタンをクリックしてください。
デザイン画面に枠が表示されるので、下に伸ばしましょう。
次に画面右側の矢印をクリックし、背景（今回は水色）を下に伸ばしてください。
今回は適当ですが、とりあえず下記画像のような感じにデザインデータを作成しました。
早速.psdファイルを書き出してみます。
Photoshopで使用可能な.psdファイルとして書き出す
Pixelmator Proで作成したWebデザインをPhotoshopで使用可能な.psdファイルに書き出してみましょう。
Webデザインデータを.psdファイルとして書き出す
Webデザインが完成したら画面右上の共有マークをクリックし、共有方法が複数表示されるので一番下の「書き出す」をクリックしてください。
デフォルトだとJPEG設定です。
形式の項目をクリックしてください。
保存形式が複数出てくるので、「Photoshop」を選択してください。
Photoshopを選択した後、ファイルの名前を変更して保存先を選んでください。
最後に書き出すをクリックすると.psdファイルで書き出されます。
Photoshopで開いてみる
先ほど書き出した.psdファイルをPhotoshopで開いてみました。
ルーラーも残されている
.psdファイルをダブルクリックしてPhotoshop経由で開いたら、Pixelmator Proで作成したWebデザインがそのまま開けました。
なんとルーラーまで保存されています。
コメントを残す