どうもです。iPhoneアプリを作ったりもしてる@mo_to_44です。
僕はAdobe Creative Cloudを契約しているのでPhotoshopを使っているのですが、これから始めようという人が毎月5000円ってちょっとしんどいですよね。

なので、僕はこれからiPhoneアプリを作りたいという方には Pixelmatorをオススメしています。

バージョン2まではPhotoshopでいうところのレイヤースタイルがなかったので、思ったことを実現するのにPhotoshopと比べて一手間かかってしまっていました。
しかし約1週間前の10月22日にバージョン3へのメジャーアップデートが行われて、レイヤースタイルをサポートしました。

個人的にはPhotoshopの代替ソフトとしての地位がかなり向上したのではないかと思っています。特にPixelmatorはMacらしいUIなので、Photoshopしか使わないしCreative Cloudに毎月お金払うほどいろんなソフト使わないというMacユーザーは乗り換えてもいいのではないかと思ってしまいます。

Pixelmator、ぶっちゃけ買いはしたもののほとんど使っていませんでした。

だってPhotoshopがあるんだもん。。。

ですが、レイヤースタイルが使えるようになったということで使ってみたところこんな画像が超簡単にできてしまいました。

Pixelamtor sample
レイヤースタイルがないときにこれをやろうとすると結構面倒だったんですよ。

というわけで、この画像の作り方を見ていきましょう。

まずは新規追加

とりあえず新規でファイルを作りましょう。ショートカットを覚えてしまいましょうcommand+nです。
newfile
今回はとりあえずプリセットに入っている”320×480, iPhone のデスクトップ”を使いましょう。

レイヤーを追加

次にレイヤーを追加します。レイヤーというパネルの一番左下に”+”ボタンがあるのでそれを押してください。
layer_add
透明なレイヤーが一番上に追加されます。ここからはこのレイヤーを色々と使っていこうと思います。

シェイプツールでプリセットの鍵マークを追加

先ほどの空のレイヤーを選択した状態で、画面左側のツールパネルを見てください。
色々とツールが並んでいますね。右側の縦列の下から2番目のアイコンを長めにクリックしてみてください。
8個ほど選択肢が出てくると思いますが、一番下にある”カスタム”を選択してください。
shape
すると上の図のように、さらにたくさんの選択肢が出てきます。ここでは矢印の場所の鍵マークを選んでください。
このように、シェイプツールのカスタムの中にはよく見かけるアイコンがいくつも入っています。
オリジナルのものを作りたい場合はイラストレーターで作ったりする必要がありますが、オリジナルにこだわる必要がなければ、ここから選んでいいと思います。

いよいよレイヤースタイルを追加!

それではレイヤースタイルを追加していこうと思います。
上部メニュー->表示–>シェイプのスタイルを表示でシェイプパネルを表示させることができます。
shape-style_location
この”シェイプのスタイルを表示”にはショートカットが用意されています。
たぶんとてもよく使うことになると思うので覚えてしまいましょう“command+7”です。

覚えてしまいましょう”command+7″です。
大事なことなので2回言いました。

さて、このようなパネルが表示されます。ここで色々といじっていくわけですねー。
layer-style_panel
上から”塗りつぶし”、”線”、”シャドウ”、”インナーシャドウ”、”リフレクション”、一番下にiPhoneアプリのアイコンみたいにズラッと並んでいるのはプリセットスタイルですね。
このパネルを駆使して鍵マークをブラッシュアップさせていきましょう。

まずは塗りつぶしを

塗りつぶしを選択して、どんなオプションがあるのか見てみましょう。
塗りつぶしオプション
なし、カラー、グラデーション。カラーは単色で塗りつぶす、グラデーションは階調で塗りつぶすって感じす。
ここからいちいち設定してもいいのですが、面倒なのでプリセットスタイルを使っちゃいましょう。 

一番下の矢印の場所にある、なんか黄色いやつを選びましょう。
Blog 131031 2 7
なんだろうコレ。星型のシェイプに適用したら結構キレイかもしれませんね。
でも鍵マークには不釣合ですね。なのでスタイルを変更していきましょう。

線のスタイルを変更

塗りつぶしのグラデーションに関してはこのままいきましょう。
線のスタイルを選択
線の設定を変更します。ピンクの枠で囲った部分。線も、なし、カラー、グラデーションと用意されています。
カラーを選択して、色をブラックにします。”幅”の横のスライダーを動かせば太さが調整できます。スライダーの横にある数字を調整してもOKです。
スタイルというのは線をシェイプの内側に描くか、 中央揃えで描くか、外側に描くかといったものです。

自分の目で確かめて色々と変更してください。”幅”を7px、”スタイル”を”内側”に設定しました。

ちょっと立体っぽくみせよう

ある程度できてきたので、少し立体的に見えるようにしてみましょう。
シャドウの設定
上の画像の枠で囲った部分、シャドウを調整します。先程のプリセットスタイルで明るめの黄色いシャドウがついていたかと思いますが、カラーをブラックにしてください。
そのままでもいいと思いますが、少し”ぼかし”の数値を小さくしたりして調整してみてください。もちろん画像の通り、僕が設定したとおりの数値でも構いません。
自分の納得のいくように設定してみてください。

さらに立体っぽく見せるために、もう一工夫します。
インナーシャドウの設定です。インナーシャドウについても薄い黄色のような色が設定されていたと思いますが、これも一度オフにしましょう。
“インナーシャドウ”と表示されてある横のチェックを外すと解除されます。すると下の画像のような見た目になります。
インナーシャドウの設定

再びチェックマークを入れ、色をブラックにしちゃいます。”オフセット”や”ぼかし”を調整しましょう。
下の画像のように少し立体的になったと思います。
インナーシャドウの設定後

仕上げ 

最後に仕上げです。パネルの一番下にあった”リフレクション”をオンにして、鏡面反射のような効果を入れてみました。
finish
背景のレイヤーにもプリセットスタイルから気に入ったものを選んで適用してみました。
これと同様のことをレイヤースタイルなしでやろうとすると大変なのですが、慣れの問題もありますがレイヤースタイルがあれば5分くらいでできてしまいます。

まとめ

正直、PixelmatorがPhotoshopに及ばないところってレイヤースタイルだと思っていたので、今回のアップデートはかな〜〜〜〜〜り大事件。
ただし、もちろんPhotoshopは長い年月をかけて開発・アップデートされているのでかゆいところに手が届く仕様になっています。
でもPhotoshopを買うよりもめちゃくちゃお得だし、手始めに触るならもうPixelmatorで間違いなしだと思います。