どうもです。iOSアプリを作るときはデザインもコードも自分でやっている@mo_to_44です。

コードは書けるんだけどPhotoshopとかのデザインが、、、という方にオススメしているのがPixelmator。Photoshopを使おうとするとAdobe Creative Cloudというものに加入して月5000円ほどかかってしまいます。安くはないですよね。

ところがPixelmatorは買いきり! 維持費が必要ないのでとってもオトクなんです!

操作もPhotoshopと似ているので、将来的にPhotoshopを使うことになってAdobe Creative Cloudに移っても大きな違和感なく使えると思います。

そんなわけでオススメのPixelmator。今回はシェイプツールについて簡単に解説してみようと思います。

画像サイズを決める

まずはcommand+nを押して新規イメージを作成しましょう。
新規イメージを作成

新しいファイルを作る際には画面のサイズを決めなければいけません。とは言っても「いや〜画像のサイズって言われても、、、」なんて思うかもしれません。そういう時は”プリセット”を使いましょう。
プリセットの選択
赤枠の部分をクリックします。

PixelmatorやPhotoshopにはデフォルトで色々な元となる画像サイズが入っています。
iPhoneのデスクトップを検索
iPadやらiPhoneの画面サイズも入っています。なんでもいいんですが、今回はiPhoneでも選択しておきましょう。

シェイプツールを使う

そうするとiPhoneの画面と同じサイズの白いキャンバスが表示されると思います。
左側にある”ツールバー”右側の下から2番目のハートのアイコンの”シェイプツール”を選択しましょう(”ツールバー”なんてねぇぞっ!?って人はcommand+1を押しましょう)。
シェイプツール
ツールバーを押すといろんな形のアイコンがあらわれますが、選択したアイコンを作成できるわけです。今回は四角を選択します。

“シェイプツール”からアイコンを選択した後でキャンバスにカーソルを持っていくとこんな感じになります。
クリックしてシェイプを追加

ドラッグして引っ張ると四角形を作ることができます。
レクタングル描画
あとからサイズを変更することもできますよ。

シェイプのデザインを簡単に変更できます

色も”シェイプツール”で変更することができます。
キャンバスの上の方に色々と表示されていると思うのですが、ここをいじれば塗りつぶしの色やら線の色やら幅やら変更することができます。コレは便利だと思います。

“塗りつぶし”の横にあるプルダウンから”カラー”、”グラデーション”などを選択することがえきます。”カラー”だと単一色で、”グラデーション”だと階調をつけることができます。
塗りつぶし選択

例えばカラーの場合だとこのようにたくさん色が表示されるので、基本はこの中から選択します(下の方にある”カラーを表示…”から自由に色を選択することができます)。
塗りつぶしの色の選択

“シェイプ”の周りに”線”を引くこともできます。これも”キャンバス”上部にあります。”塗りつぶし”と同様、”線”も”カラー”と”グラデーション”から選択することができます。
線の選択
“線”は幅も調整することができます。”カラー”、”グラデーション”を選択するプルダウンの横にある数字をいじれば調整できます。

まとめ

以上のように簡単に”シェイプ”のデザインを変更できるので、”シェイプツール”の中にあらかじめ用意されているものであればそれなりのものは作ることができます。

四角以外の形を選択して色々と遊んでみてください。例えば角丸のシェイプでグラデーションをかけてボタン風の画像を作ってみたりすると良い練習になると思います。

以前、「Pixelmatorがレイヤースタイル機能を追加! かなりイイ!」という記事を書きましたが、今回の応用編のような内容になっているので是非読んでみてください!

普段はPhotoshopを使っているのですが、初期費用、Photoshopとインターフェースが似ていることなどからアプリ制作を始めた方などにPixelmatorをオススメしています。

オススメしちゃっているので自分でもある程度使いこなせるようになろうと思っているので今後も記事を追加していこうと思います!