Sketch : ベクタードローイング
シェアウェア ¥9800（現在の Sketch3 の MacAppStore での価格）


すご〜く、すご〜く、久しぶりのブログ更新です。
そんでもって何をするのかと言うと、『Sketch 3 Advent Calendar 2014 - Adventar』という、12月1日から25日まで1日に1つ、みんなで記事を投稿していくというイベントに参加してて、僕は21日目（12/21）の担当です。

「Sketch3」なのに、Sketch2 を未だ使用している分際で参加してます。ここで書いてる内容が現在の ver3 と違うこともあると思いますが、なにとぞご容赦を。



Sketch はベクタードローイング アプリケーションで、webデザインに使ったり、何かの絵を描いたりするものです。


僕の場合は趣味のアイコン描きに Sketch を使っています。
と言ってもまだ Sketch を使って描いた数が少なく、使いこなしてるとは言い難いですが、（自分の頭の中の整理を兼ねて）Mac OSX用のアイコンを描くときの「自分なり」の Sketch の使い方を紹介していきます。



尚、Sketch2 の使い方は、ここを見れば理解できます。
オレオレSketch.app Advent Calendar 2013やりますよ。 | creative tweet.

それと Sketch3 の使い方なら
Sketch 3の基本操作を解説した電子書籍「Sketchの基本。」
で電子書籍が発売されてます。
（頼まれもしないのにステマしときますよ、ステマ。）

（1）描くサイズ と Export

Mac用のアイコンを作るには 16px(72dpi)から1024px(144dpi)まで 所定の大きさの各画像ファイル（png形式）が必要で、Sketch を使ってそのアイコン用の図形を描き、Export で画像ファイルに書き出します。

（アイコンに必要な画像リソースの各サイズのリスト）
※各サイズの「@2x」は144dpi

OS X Human Interface Guidelines: Designing App Icons より


Sketch2 では pngファイルに書き出すと72dpiで書き出されます（Sketch3の場合は知らない）。なので、一番大きい1024px(144dpi)の画像用に、Sketch で2048px(72dpi)で書き出して、それをプレビュー.appなどで、1024px(144dpi)に変換します。

Sketch2 では書き出す時に、以下のように「✓」を入れておくと、2倍サイズで書き出してくれます（Sketch3 の場合はいろいろなサイズに一気に書き出せるらしい？）。なので Sketch上で1024pxで描いておけば、2048px(72dpi) に書き出せます。


ここでちょっと昔の愚痴を。
Sketch2 の初期のバージョンでは、Export で2倍サイズで書き出したものと Sketchのウインドウ上で見える「blur」（ぼかし）の具合が全く別物で、見た目が全く違う画像ファイルを書き出す問題がありました。なので、僕はこの2倍サイズ書き出し機能は使わず、Sketch上で2048pxで描いてました。
ところが、ある日 Sketch をアップデートすると突然「blur」の仕様？か何かがが変わってしまって、この2倍サイズExpotの問題は解決されてました。ただし、このアップデート以前に描いたsketchのファイルが使い物にならなくなりました。
ヽ(｀Д´#)ﾉ ﾑｷｰ!!
当時、この仕様変更で困った人を見たことないけど・・・
自分だけだったのかな？



話はそれたけど、要は Sketch上では1024pxで描いて、書き出す時には2倍サイズで 2048px で書き出して、それを プレビュー.app などで 1024px(144dpi)に変換する。


僕の場合は、その1024px(144dpi)の画像を縮小して128pxサイズ用まで適用することが多いです。そして、32px(32x32@2x も含む) と 16px(16x16@2x も含む) のサイズの画像は、全く別の絵柄にしたり、簡略するなど、とにかく別のファイルで描きます。



もう一つ大事なことで、Export で画像ファイルに書き出すということは、その作品が出来上がってからすることではなくて、描いてる途中に何度も何度も書き出してFinder上で見映えを確認し、修正していくことが重要です。

IconComporser的なアプリケーションがあると、Finder上でどう見えるか簡単に確認できて便利です。ちなみにアイコンをDock上にプレビュー表示しても、色の見え方が少し変わるので、（個人的な意見ですが）あまり意味はないと思う。

（2）Artboard は使わない

Sketch には Artboard という、描く「紙」の大きさを設定するような機能があります。


この Artboard を使うと書き出すときに便利とか、範囲外に描いたものは書き出す時に除外されるとか、いろいろ便利なのですが、僕は利用していません。

理由は、まあ小さなことなんですが、Artboardの範囲外の背景の色が「白」でなく淡いグレーであること。背景が真っ白でないと Sketch上で描いてるものがFinderウインドウ上にあるようにイメージしづらいです。
（かなり個人的な意見だと思いますが）




代わりに、レイヤーのグループを最初に「書き出すもの」と「書き出さないもの」作って、このグループの中にオブジェクトを描いていくようにしています。

1024px四方の四角を1pxの線で描いておくと、描く範囲の目安になります。

これで Export で画像ファイルとして書き出す時に、範囲の指定、グループの指定をやっておけばOKです。

（3）下描きは紙と鉛筆で

前置きが長くなって、さあいよいよ描き始めていく訳ですが、最初にアイコンの絵柄を考えながら描くには、紙に鉛筆で描いた方がいいでしょう（ペンタブレットとかでもいいと思う）。幾何学的な絵柄でない限り、いきなり「ベクター」で描くのは難しいと思います。

僕の場合は紙に鉛筆で下描きしたものを画像として Sketch上に配置し、それに沿ってベクターツールで描いていきます。


このとき主要な部分を描き終えるまでは、下描きが見えるように、すべて半透明のオブジェクトで描いていきます。

主要な部分が描けたら、だいたいの（仮の）色を付け、全体の影を付けて、1024pxの枠の中での位置とか大きさとかのバランスを調整します。それで Export で画像ファイルとして書き出し、見映えを確認しながら作業していきます。

（4）色と陰影の表現

マスクとして適用したレイヤーの上に陰影を描いていきます。陰影は基本的に「白」「グレー」「黒」で描いて、透明度・ブレンドモード・ぼかし を使って表現していきます。


マスクを適用したレイヤーを複製するときは注意が必要です。マスクを適用していることを忘れて「あれ？なんで？」ってなることが多いです。


そんなこんなで、完成です。


まあ、近頃はこんな感じに立体的に描いたものは流行ってないけど。いわゆる「フラットデザイン」的なものは難しすぎて、僕には描けないです。

（5）ショートカットキーなど

最初に書いたように、Sketch の使い方については
『オレオレSketch.app Advent Calendar 2013やりますよ。 | creative tweet.』
ここに網羅されているので採り上げなかったけど、一応よく使うショートカットキーなどを挙げておきます。

• command+＋ ズームイン
  
• command+－ スームアウト
  
• command+0(ゼロ) 等倍表示
  
• command+1 選択しているものをズーム
  
• command+2 選択しているものをウインドウの中心に
  
• space+ドラッグ 表示範囲の移動
  
  
• command+Z Undo
  
• shift+command+Z Redo
  
  
• V ベクターツール
  
• R 四角ツール（Rectangle）
  
• O 円形ツール（Oval）
  
  
• control+L レイヤガイドの表示/非表示
  
  
• 選択して return アンカーポイント編集モードをトグル
  
  
• 選択レイヤーの角を command+ドラッグ 回転
  （shift を併せると15°単位のスナップ）
  
  
• command+D レイヤ・グループを複製
  
• delete 選択しているものを消去
  
  
• option+command+↑ レイヤ・グループを前面に移動
  
• option+command+↓ レイヤ・グループを後面に移動
  
  
• shift+command+H レイヤ・グループを隠す/元に戻す
  
• shift+command+L レイヤ・グループをロック/アンロック
  

あと注意点をあげると、
レイヤー・グループを「ロック」した状態であってもメインのウインドウ上で選択されない状態になるだけです。
左側のレイヤーリストで選択して deleteキー を押すと削除できたり、returnキー でポイント編集モードに入って編集できたりするので注意が必要です（Sketch3の場合は知らない）。



それともう一つ注意点。
回転したレイヤーは元の角度？を記憶してます。
便利であると同時に、例えばこれのアンカーポイントを編集するときにポイントをカーソルキー移動しようとすると上下左右が逆転している場合があります。

回転や反転した後の状態を起点にしたいときは「Flatten」を実行してリセットします。

最後に

もうすぐクリスマスということで、最後まで読んで頂いた皆様に本当に本当にささやかなプレゼントです。昨年練習で描いたこの♥の .sketch ファイルを進呈いたします、わ〜い（棒）。


「ついついカレー作り過ぎちゃってさ〜、たいしてうまくないけど食べてく？ もう3日目のカレーなんだけどさ〜」的な、もらっても困る 本当に 本当に ささやかな プレゼントです。
さあ、もってけドロボー。
本当に 本当に ささやかな プレゼント
（12/24までの期間限定ダウンロード）

（'14/12/25追記）
上記のダウンロードは終了いたしました。
（追記おわり）

ここでちょっと豆知識を。
Sketch3で保存した .sketchファイル は Sketch2 では開けないんだよ。
逆はどうなんでしょうね？






この記事では Sketch ver2.4.4 を使用しています。

（ダウンロードリンク）
Site top page : Bohemian Coding - Sketch 3
Download page : Sketch 3 （← Mac App Store）


Sketch 3 Advent Calendar 2014
明日の担当は maepon さんです。
もうすぐ25日。

Intaglio : ベクター形式のドローイングツール
OS10.3.9以上（UB）
シェアウェア $89（日本のMacAppStoreでは¥7,800）


ベクタードローイングツールの「Intaglio」の紹介です。

僕がこのアプリケーションを買ったのはずいぶん前で、当時はもっと円安だったから1万円以上しましたが、もう元は取れるぐらい使い込みました。

よく使うショートカットキーや、主な操作方法を挙げていくと・・・



ショートカットキー など

• S 選択ツール
  
• X アンカーポイント・ハンドル選択ツール
  
• E スポイトツール
  
• G グラデーションツール
  
• C はさみツール（パスを切断）
  
• P パスツール
  
• L ラインツール
  
  
• command+Z Undo
  
• shift+command+Z Redo
  
  
• command+R リピート
  （複製などの操作をした後に、このショートカットキーでその操作を連続して実行できる）
  
  
• command+G 選択しているオブジェクト群をグループ化
  
• shift+command+G グループを解除
  
  
• option+command+G Unfocus Group
  選択しているグループのみをフォーカスして、そのグループ内の個別のオブジェクトを編集できるモードになる（けっこう便利）コンテキストメニューからも実行できる。
  
• control+command+G Focus Group
  グループ内の個別のオブジェクト編集モードから離脱。コンテキストメニューからも実行可。
  
  
• command+F 選択しているオブジェクトを最前面へ移動
  
• command+B 選択しているオブジェクトを最も後ろの面へ移動
  
  
• option+command+F 選択しているオブジェクトを1つ前の面に移動
  
• option+command+B 選択しているオブジェクトを1つ後ろの面に移動
  
  
• command+E 「効果」のON/OFF切り替え。「効果」の掛かったオブジェクトの細かな修正をするときなど見やすくするために使う。
  
  
• tab ツールなどの各種ウインドウの表示/非表示切り替え。
  
  
• マウスのスクロールホイール ズームアップ・ダウン（環境設定にて設定）
  
• command+* 選択しているものをズームアップ
  
• space+ドラッグ 表示範囲の移動
  

パスの描き方と編集

パスツールを使ってパスを描く時には、その図形の頂点でクリック、曲線を描く時はドラッグしてハンドルを出して描きます。


その図形を確定させるときには「始点」のところを option+クリック すると「Closed」（閉じた形状）なオブジェクトになります。

returnキー などで図形を確定すると「Open」（開いた形状）なオブジェクトになります。


パスの編集は白い矢印の「ポイント選択ツール」を使います。


円形ツールなどで描いたものは「円弧」になっているので、「カーブ」に変換させればハンドルで曲線を編集できるようになります。ただし、カーブに変換したときに同じ場所に複数のポイントが重なっていることがあります。


ポイントを追加する時は、その最寄りのポイントを選択して command+D で複製などをしてポイントを追加します。

この場所にピンポイントで形を変えずにアンカーポイントを追加したい、ってときは、面倒だけど「はさみツール」でパスを切断し、そこにできた2つのポイントを選択して、メニューの Object ＞ Paths ＞ Join を実行して、再びパスをつなげるという方法を使っています。
（もっといい方法ないかな？）






実際に何か描く例を挙げた方がいいので、簡単な黒板のiOSアイコンを描く過程で説明してきます。


Page Setup
とにもかくにも、最初に「紙」の大きさの設定をします。
アイコン用の画像をpngファイルとして書き出すのですが、「用紙」の印刷される範囲が画像データとして書き出されるので。

メニューの File ＞ Page Setup を実行し、紙の大きさをカスタム設定します。


pngファイルで 72dpi で 512px の画像として書き出すならば、181mm四方の大きさを指定します。ただ「余白」がたくさんあった方が「試し描きスペース」として便利に使えるので、上記のように設定しています。

僕の Mac は低スペックなので、このサイズに指定してしますが、細かいグラデーションやフィルタ効果が綺麗に画面に表示されないことがあります。もっと余裕のあるものならば、2倍の 362mm のサイズで描いて書き出し、後からpng画像を指定サイズに縮小するようにした方がいいです。
（グラデーションがつぶれるとかを防ぐために、書き出すときのdpiの数値を上げていますが、実際の画面に表示されるものと、ファイル出力されたもののギャップの調整に苦しむことになるので、最初から大きいサイズで描いた方がいい）


そして Layout ＞ Resolution… からウインドウを開き、書き出す際の dpi を 144dpi に設定します。


これで、画像データとしてファイルを書き出したときに1024pxサイズになります。






角丸四角を描く

次に角丸四角を描きます。半径90pxの円を4つ描いて四方に配置し、四角の図形と合成させて「角丸四角」を作ります。（Rounded Rectangul ツールも存在するけど数値指定できないので、ここでは使わない）


ガイドは定規もしくは右上・左下のガイドボタンから、ドラッグして描きます。
あとで Geometryウインドウで数値入力して正確に大きさ・位置を設定します。

これでメニューの Object ＞ Paths ＞ Unite を実行してそれぞれのパスを結合していきます。
（この辺の操作は頻繁に使うのに「メニュー」でしか実行できないので不便）

ちなみにその他参考（画像はマニュアルより拝借）

（Unite以外はオブジェクトの「前後」関係に気をつける）






角丸四角の「枠」を描く（単に縮小するのはダメ）

角丸四角ができたら、次に「黒板の枠」となる部分を描きます。

最初に描いた角丸四角をコピー＆ペーストして同じ場所に配置し（これを縮小してはダメ）、Stroke を有りにして太さを調整します。さらにメニューの Object ＞ Convert ＞ Stroke To Fill を実行して、「線」から「塗り」に変換します。


これを選択してまたメニューの Object ＞ Paths ＞ Separate を実行して、大きな角丸四角と一回り小さな角丸四角に分解します（使うのは後者のみ）。

一番最初に描いた角丸四角をまたコピペして、小さな方の角丸四角と前面に持ってきて Subtract で切り欠いて「枠」の形を作ります。
以下何度か同じ操作を繰り返してこんな風に。


これらは、あとでマスク用とかいろいろコピペして使うことが多く有るので、新しいレイヤーを作って同じものを複製してから、実際の色を付けたり影を付けたりとして行きます。

（こういう機能があれば一発で済むんだけど、ないから仕方ない。）






画像を使う

次に黒板の枠を「木目調」にしていきます。
枠全体が同じ木目調だと味気ないので「分割」された感じを出したいと思います。それで、まず前に描いた枠を下のように切り欠きます。



木目の画像素材は『Wood Pattern Background | Graphic Web Backgrounds | Pixeden』から頂きました。

これをオブジェクトに貼付けます。Textureウインドウを開き、左下の「＋」ボタンから「Image Texture...」を選択、その名前を設定します。そしてファイルボタンでダイアログを開き、先程の木目画像のファイルを選択します。

（今回は縦・横それぞれ別の画像ファイルを用意したけど、歯車メニューからオブジェクトの編集にテクスチャが追随するようにもできます。）

これでオブジェクトにこのテクスチャを適用させて木目の枠を作ります。



（ここではオブジェクトの「Fill」として画像を取り込む方法を採用したけど、別に普通に画像をメインのウインドウ上にドラッグ＆ドロップして貼付けて、形をマスクを使って整えるといったやり方でもできます。）






Blend モードを使う

次に陰影を表現していきます。
新しいレイヤーを作って、最初に作っておいた枠の内側部分をコピペしてきて白黒でグラデーションをかけます。


これを選択したままメニューの Object ＞ Blend ＞ Overlay を選択します。
（これもよく使うのにメニューでしか実行できないのが不便・・・）

こんな感じになります。


他にも単色やグラデーション、テクスチャを重ねるときなどに、よく「Blend」モードを使います。ここで挙げたのは一例です。






マスクを使う

いろいろ描いていったのは省いて・・・次は枠の「つなぎ目」の部分を描きます。
角の部分に向かって「線」を描きます。ハイライトと影となる線（←Blendモードでいろいろ調整する）も描き入れるとそれっぽくなります。
これら線をグループにします。そして最初に描いておいたマスク用のオブジェクト（ピンクのヤツ）を前面に配置します。


これら2つを選択してまたグループにします。

そして Groupウインドウを開き、「Mask」の Standardボタンを選択してマスクを適用させます。



これでピンクの部分からはみ出た線は隠れます。








効果を使う

またちょこちょこと描いたものは省いて、フリーハンドツールと文字ツールで黒板の中身を何か適当に描きます。


これらを選択して Effectsウインドウの右下「＋」ボタンから、オブジェクトに設定する「効果」を選択します。


効果を適用するとこんな感じ。まだまだ調整しないといけないけど。




Intaglio 独自の「効果」と、他のOSXアプリケーションでもお馴染みのCoreImageフィルタが使えるようになっています。後者の方は一部うまく機能しないものもあったり、CPUへの負荷が大きくなる（←たくさんフィルタ効果を使ったとき）ので、僕はできるだけ使わないようにしています。

例えば、Blur（ぼかし）機能はできるだけ Intaglioの「Gaussian Blur」を使うようにしています。Motion Blur とか、ぼかし範囲を広く広くしたいときなどはCoreImageの方を使います。

Effectのリスト↓

効果を適用すると、そのオブジェクトの境界が少しぼやけたりするので（もちろん「Blur」は関係ない）、マスクをかけてやるとメリハリが付きます。







そんなこんなで、途中を省いて完成です。


最後にメニューの File ＞ Save A Copy As... を実行。保存ダイアログでフォーマットを「png」に設定して書き出します。
（別に「最後」でなくても、途中の段階で何回か書き出し、出来を確認した方がいいです）


他にも Intaglio を使って描いたものをここにupしてますよっと。








この記事では Intaglio 3.2.1 を使用しています。

（ダウンロードリンク）
Site top page : Welcome To Purgatory Design
Project page : Intaglio — Macintosh Drawing & Illustration
Download page : Download & Purchase Intaglio

MacAppStoreのリンク : https://itunes.apple.com/jp/app/intaglio/id417852764?mt=12

VectorDesigner : ベクタードローイングツール
OS10.4以上（UB）※10.4では一部機能が使えないらしい？ので10.5以上推奨
シェアウェア $69.95


ベクタードローイングツール「VectorDesigner」の紹介です。


昔シェアウェアの詰め合わせ販売のときに、この VectorDesigner も含まれていたので、持ってる人も以外と多いじゃないかと思います。

僕はいくつかベクター系のアプリケーションを持っていて、それぞれ一長一短なところがあるけど、VectorDesigner は一番扱いやすいアプリケーションだと思います。
結構使い込んだアプリなので、僕が思う、いいところ、悪いところも含めてレビューを書いてみます。



最初にやること - Document Size の指定
まず最初に Document Size を指定します。
これを最初にやっておかないと、JPGやPNG形式に書き出すときに、枠からはみ出た部分を書き出してくれないので。また、後から拡大縮小したりする場合は複数のオブジェクトを1つのグループにしてやらないとできないし、グループにすると、レイヤ分けしてたのが1つのレイヤに集中してしまったりと、いろいろ面倒なので、とにかく最初に設定します。

File メニュー ＞ Page setup...
で印刷の紙のサイズ=ドキュメントサイズを指定します。

もしくはインスペクタの「Document」を開いて、そこで指定します。
（インスペクタはツールバーの i ボタンなどで開きます）





各描画ツール
ツールバーから各ツールを選択して描きます。

リストから選択するのは、余計な一手間が入るので使いづらいです。まあショートカットキーを使えということなんでしょうが。

• 選択ツール 1
  
• 四角ツール 2
  
• 円形ツール 3
  
• 角丸の四角ツール 4
  
• 多角形ツール 5
  
• 星形ツール 6
  
• パスツール 8
  
• フリーハンドツール 9
  
• パスの編集 0(ゼロ)
  

とりあえずは 選択ツール 1、パスツール 8、パスの編集 0(ゼロ)、この3つを覚えておけばOKだと思います。


描いたものを選択して「Graphic」インスペクタで、面の色、線の色・太さ・形状、影、テキスト、ブレンドモードなどを設定します。




インスペクタ
インスペクタはツールバーの i ボタンなどで開きます。

• Graphic
  
• Layers
  
• Filter
  
• Document
  

の4つがあり、インスペクタのタブで切替できるけど、4つのインスペクタウインドウを開いていた方が使いやすいです。




定規 と ガイド
command+R で「定規」の表示/非表示を切替、定規からドラッグ＆ドロップして「ガイド」を表示できます。
またコンテキストメニューからロックしたり、隠したり操作できます。


「New Guide ...」から角度指定して斜めのガイドを作ることもできます。





スナップ
VectorDesigner の特長として、スナップ機能がとても使いやすいです。ツールチップで各ポイントにスナップしているかもわかりやすく表示されます。


インスペクタで各スナップのON・OFFを設定します。

スナップ全体をトグルするには Sキー で行います（※半角英数で入力）。これはよく使います。




パスの編集
オブジェクトを選択して 0キー でパス編集モードになります。
（これに限ったことではないけど、ウインドウ下のステータスバーに操作のヒントが表示される）


パス上をダブルクリックしたら新規アンカーポイント追加、optionキーを押しながらダブルクリック（もしくはアンカーを選択して delete ）でアンカーポイントの削除。

アンカーポイントをダブルクリックすると、ハンドル有り/無しを切替。
commandキー を押しながらハンドルをドラッグすると、片方のハンドルのみ移動でき、アンカー上にハンドルを持って行くと片方のハンドルを削除できる。



ちなみにパス描画中に1つ前のアンカーポイントに戻る（Undo）には、deleteキーを使います。



レイヤ間のオブジェクト移動
レイヤ間でのオブジェクト移動は、移動したいものを選択してから「Layers」インスペクタのラジオボタンを目的のレイヤのボタンへドラッグ＆ドロップします。
複製したいのならば optionキー を押しながら操作します。

（AdobeのIllustratorと同じ）

複製ならば、オブジェクトを選択して目的のレイヤをアクティブにして command+D で複製をつくると、そのレイヤに複製されます。




グラデーション
VectorDesigner の短所としてはグラデーションが使いづらいです。
インスペクタの「Fill」で「Gradient」を選択して設定します。
斜めのオブジェクトに対してライナーのグラデーションをやろうとすると、インスペクタの小さなサンプル表示のところで角度を合わせなければならないので、苦労します。


垂直・水平の状態でグラデーションを施してから、オブジェクトを回転させるようにした方がいい。
コアイメージフィルターのグラデーション機能もあるけど、こっちも結構使いづらい。




コアイメージフィルター
オブジェクトを選択して、Filters メニューから各フィルタ効果を適用させることができます。


そして「Filters」インスペクタにて、詳細を設定して行きます。
VectorDesigner に限ったことではないけど、コアイメージフィルターを重ねて使用するときは、メモリをかなり消費して不安定になったりするので、やる前にファイル保存してから行った方がいいです。

それと、フィルタの「Blur」（ぼかし）機能があまり良くなく、オブジェクトの境界がうまくぼかしきれない。




よく使う操作やショートカットキー
僕の主観でよく使うものをまとめると・・・

• option+スクロールホイール ズームイン・スームアウト
  
• command+0(ゼロ) 実際の大きさで表示
  
  
• command+Z Undo
  パスツールで描画中は delete で1つ前のアンカーポイントへ戻る
  
• shift+command+Z Redo
  
  
• S スナップのON/OFF切替
  
• 0(ゼロ) パス編集モード
  
• 1 選択ツール
  
• 8 パスツール
  
  
• option+command+G 選択しているものをグループ化
  
• option+shift+command+G グループ解除
  
  
• shift+command+F 選択しているものを最前面へ
  
• shift+command+B 選択しているものを最背面へ
  
  
• commandキーを押しながらオブジェクトの角をドラッグして回転
  （選択表示の角のところでcommandキーを押すとポインタが変わる）
  
  
• option+command+I インスペクタを表示/非表示
  

簡単な制作例
例として、簡単な「木の箱」のようなものでも描いてみます。

最初にドキュメントサイズを指定して、ツールバーの「Flickr」ボタンをクリックして、「Flickr Browser」を開きます。
素材を Flickr から探すことができます。
ここではリストで「Texture」を選択、「wood」のキーワードで検索して、木の素材画像をドラッグ＆ドロップします。

Flickrブラウザの下のステータスバーに選択している画像の著作権やページへのリンクが貼ってあるので、素材を使用する前に権利関係を把握しておいた方がいいでしょう。


次にその画像のオブジェクトを適当な大きさの正方形にします。
「Graphic」インスペクタで数値入力すると簡単です。


オブジェクトに対して画像の表示についても、インスペクタの「Fill」項目のリストで設定します。



オブジェクトを選択して command+D で複製を作り、commandキーを押しながら選択表示の角部分をドラッグしてを回転させます。

（インスペクタで角度を数値入力する方法でもOK）


0(ゼロ)キー でパス編集モードにして、平行四辺形にします。あらかじめ斜めのガイドを作っておくと楽にできます。



もう1面を複製、変形させて作り、それから各面の色を調整します。
ツールバーの「Adjust」ボタンをクリックして「Image Edit」ウインドウを開き、適当に明るさ・コントラストなどを弄って調整します。



次に箱の影を付けます。
この3面を選択した状態で新規レイヤを作成。その新規レイヤをアクティブにして command+D で複製すると、そこに複製が作られます。
そのレイヤの順番を下側にして、3つのオブジェクトを統合します。

ツールバーの「Boolean」から「Unite」を選択して統合、1つのオブジェクトにします。

このオブジェクトのインスペクタで「Shadow」にチェックして、数値を適当に弄って影とします。




また新規のレイヤを作成し、そこにテキストツールで任意の文字を黒の色で入力します。
（りんごマーク は option+shift+K ）

command+T でフォントパネルが開くので、フォントや大きさを適当に設定。


このテキストを選択してインスペクタで「影」を付けて、ブレンドモードも弄ります。

影は「Shadow」に ✓ して有効にし、白っぽい色で Blur（ぼかし）は1～2ポイントぐらいにします。

文字自体の不透明度を90%ほど、ブレンドモードを「Overlay」にします。

ちょっとしょぼい表現だけど、彫り込んだ文字のように見えます。



これで出来上がり。


File メニュー ＞ Export...
でPNGとか、JPG などに書き出すことができます。



最後にもう1つ過去に VectorDesigner で描いたヤツ。

（「PowerSelect」のアイコン用に描いたやつです）







（ビデオチュートリアル）
Vector Designer Video Training


この記事では VectorDesigner 1.5.2 (2504) を使用しています。

（ダウンロードリンク）
Site top page : Home
Download page : VectorDesigner

Sketch : ベクターイメージのドローイングソフト
OS10.6以上（UB）
シェアウェア €42（今現在は期間限定で€32に割引中）


ベクターイメージのドローイングソフト「Sketch」の紹介です。



同じ作者さんが作った「Drawit」も似たようなベクターイメージを描くためのアプリケーションです。

「DrawIt」はコアイメージフィルタでビットマップ画像を加工できるなどの機能がありますが、それに対して「Sketch」はベクターオンリーの機能で、前者のアプリより「描く」機能が多いです。


「DrawIt」と同様、この手のアプリケーションの「レイヤ」の概念が独特で、1つのオブジェクト・グループが「レイヤ」となります。


長所は複数のオブジェクトが重なり合っているときなど、サイドのカラムから確実に選択できます。▼のところのリストで表示形式を選択できます。サムネイル表示してると使いやすい。
それと前後関係がわかりやすいです。


それと「ページ」というものが有り、これは1つのファイルに複数のドキュメントを保存するようなものです。ホームページの各ページのデザイン案などを「ページ」に分けておくなどすると便利かと思います。

また同じものを複数配置する、複数のページに同じ絵を配置するときなどは、その描いたオブジェクトやグループを「Symbol」として登録しておくと便利です。
「Symbol」を編集すると、「ページ」に配置した複数のシンボルが一気に編集できます。

例えば、作者さんのサンプル画像で「Man Symbol」をちょっと編集してみると・・・


「Main Page」に配置されているシンボルもそれに変わります。





操作はツールバーのアイコンやショートカットキーを使っていきます。
特にツールバーは自分の使いやすいようにカスタマイズした方がいいでしょう。いろいろなツール用のアイコンが用意されています。



基本的には「Shape」ツールで何かの形を配置して、拡大縮小したり、ダブルクリックしてアンカーポイントを編集するとかします。
すぐに形が配置しないように環境設定で選択できるようになってます。



レイヤを選択して I(アイ) キーを押すとインスペクタが表示されるので、ここで線の太さ・形状や面の色・グラデーション、影の有無などを設定できます。


インスペクタを常時表示するときは、このウインドウをドラッグ＆ドロップして場所を移動すると、選択を外しても常時表示されるようになります。

選択したレイヤが絵の上でどれかわからない状態になってるときは、Sキー で表示/非表示きりかえできます。
これは常に表示させておいた方がいいと思います。


よく使う操作として、上記のものを含めて箇条書きにすると・・・

• command+＋ ズームイン
  
• command+－ スームアウト
  
• command+0(ゼロ) 等倍表示
  
• command+1 選択しているものをズーム
  
  
• command+2 選択しているものをウインドウの中心に
  
• space+ドラッグ 表示範囲の移動
  
  
• command+Z Undo
  
• shift+command+Z Redo
  
  
• S 「選択」を表示/非表示
  （※1度表示させたら、ずっと表示させっ放しの方がいい）
  
  
• I(アイ) インスペクタの表示/非表示
  （インスペクタウインドウをドラッグ＆ドロップして移動してやると常時表示されるようになる）
  
  
• L レイヤガイドの表示/非表示
  （"ON" だとオブジェクトの移動のときなどに、他のレイヤのオブジェクトとの位置関係で頂点や辺が揃うようにスナップされる）
  
  
• 選択して return アンカーポイント編集モードをトグル
  （ダブルクリックでアンカーポイント編集モードへ、esc で戻る）
  
  
• command+D レイヤ・グループの複製する
  
• delete 選択しているものを消去
  
  
• shift+command+H レイヤ・グループを隠す/元に戻す
  
• shift+command+L レイヤ・グループをロック/アンロック
  
  
• option+マウスオーバー 選択してるレイヤとポインタ上のレイヤの距離を表示する
  
• option+リサイズ 形の中心を基準にリサイズする
  

実際に何かを描いていくと手っ取り早く使い方を覚えられるので、下のような旧iTuesnsアイコン風の音符を描いてみます。



現在のiTunesアイコンの音符を基準にしたいので、その512pxの画像を取り出して、Sketch のウインドウにドラッグ＆ドロップしてそれをトレースしていきます。

（トレースするときは、仮の色で半透明にして作業すると「ズレ」を修正しやすい）


トレースできたらそれぞれのレイヤをグループ化して、「Dynamic Shape」に✓し、「Union」を選択する。

こうすることによって、グループを1つのオブジェクトのように扱えます。
グループ化を解除したらまたバラバラにできるので、普通の「Union」よりも融通が効く。


このグループを複製し、その1つをグループ化解除してそれぞれのレイヤにグラデーションを付けていきます。（複製するのは形を誤って崩してしまったときの予備を作っておく意味もあるので）

まず「お玉」部分から。
インスペクタを開いて「Fill」＞「Radial Gradient」を実行。
グラデーションのガイドが表示されるので、中心・円周・楕円の具合を調整して、だいたい元の「お玉」の部分の形に合わせます。

半径にあたる部分のライン上をダブルクリックすると、その部分の色を設定できます。
（グラデーションの自由度はかなり高いと思う）


次に内側に半透明の楕円を描きます。楕円の形をアンカーポイントを弄ってちょっと崩した形にします。

インスペクタで白の透明で内側の影を付けます。
（Inner Shadow だと輪郭が強調されすぎなんだけど、見なかったことにしよう・・・）



もう一つ楕円を描いて、青白ぽいっ色から透明になるようにグラデーションを付けます。



これができたら「お玉」の部分をグループ化。複製してもう片方に合わせて傾きや形などを微調整します。



次に♫の上部に色を付けていきます。
縦方向にグラデーションを付けます。（お玉の部分との境はできるだけ近い色になるように調整します・・・と書いてるけど、ほとんど隠れてしまうのであまり意味はないので忘れて下さい。画像の方に書いた文を修正してないだけです。）



この上の部分を複製して、今度は横方向にグラデーションをかけます。真ん中の部分は透明にし、下のレイヤが見えるようにする。

（なんだか苦し紛れな表現方法だけど、バージョンアップでそのうちブレンドモードが使えるようになるらしいので、もっと楽になるかと思います。）



次にテカリ部分の Vectorツール で描きます（下のピンク部分）。はみ出すように描いて、あとではみ出した部分を統合して重なり合った部分を残すようにします。

予め下のレイヤを複製しておきます。Boolean ＞ Intersect を実行すると2つのレイヤの重なり合った部分が残り1つのレイヤになります。（元のレイヤは無くなるので複製を作ってから）

上記の方で書いたグループの「Dynamic Shape」を使った方法でもOKです。



この部分にもグラデーションをかけます。



その次に、また上部の部分の複製を作ります。（レイヤの順番に注意。「テカリ」部分のすぐ下のレイヤにします。）一番上部の「横棒」部分のみに色を付けて下の方は透明になるようにグラデーションを付けます。

レイヤの重なり具合で、ちょうどエンボスの段差がついたような感じにします。
（言ってることが通じるか自信がないけど、意味わかるかな？）

さらに、このレイヤのおかげで下のレイヤの縦の影の部分が見えなくなってしまうので、横方向に縮小します。





次に右側の縦棒部分の「テカリ」を表現します。
新規のレイヤで四角を描いてグラデーションを付けます。





次に横棒部分の上下に細い「テカリ」のラインをつけます。
Vectorツール で新規に描き、グラデーションで色を調整します。

Sketch に「ぼかし」機能のようなものがないので、「Shadow」で代用します。
オフセット（X,Y）は0にして、Blur でぼかし具合を設定します。色は水色で。

ちょっと苦しまぎれの方法だけど、それなりに「ぼかし」たように見える。





最後に一番最初に予備でとっておいたグループのレイヤをまた使って、♫全体に「影」を付けます。
このレイヤを最下層にして、青色にします。影を適当に付けて出来上がりです。




できたものはこんな感じ。※あまり拡大して見てはいけない。

同じ表現でも、人によっていろいろなやり方があるので、上記で書いた方法が一番いいとは限りません。



（'10/10/01追記）
上記で描いた「♫」を作者さんのサイトで作品例として採用してもらいました。
興味ある人はダウンロードしてみて下さい。
『Sketch | Examples』
Sketchの編集可能なサンプルファイルとしてダウンロードできます。
（追記おわり）





「Sketch」をいろいろ弄ってみて、ここでは触れていないけど、ストロークに太さを与えたり、回転しながら連続複製する機能があったり、いろいろおもしろそうな機能がたくさんあります。
version1.0.0 のころはバギーな点が多かったけど、バージョンアップを重ねるごとに安定してきています。
そのうちブレンドモードも付けるって作者さんがTwitterでつぶやいていたので、上記の苦し紛れの表現方法もずいぶんと楽になると思います。

あと「Sketch」はベクター機能に特化しているアプリケーションなので、コアイメージフィルターなどビットマップ編集機能はありません。最近のベクターアプリには大抵付いてたりするので、その辺りを期待しない方がいいでしょう。
購入を考えてる人は1ヶ月の試用期間があるので試してみるのがいいでしょう。







この記事では Sketch 1.0.4 を使用しています。

（ダウンロードリンク）
Site top page : Home | Bohemian Coding
Download page : Sketch | Vector drawing for OS X



（関連記事）
DrawIt Lite --- 同じ作者さんのベクターアプリ
（フリー版の「DrawIt Lite」は公開停止 → シェアウェアの「DrawIt」になっています）

DrawBerry : ベクターイメージのドローイングソフト
OS10.5以上（UB）
ドネーションウェア


ずいぶん前に『ベクター形式でお絵描き『DrawBerry』 | Macの手書き説明書』で知った、ベクターイメージのドローイングソフトの紹介です。



最初に書いておくと、この「DrawBerry」は開発途中のアプリケーション（version0.8.1）で、本格的にお絵描きや、図形なんかを描こうと思うと、ちょっと難のあることが多いです。

しかし、完成すれば？かなりいろんなことができるドローイングソフトになるかと思います。




ツールはごくシンプルな作りになっています。


下のインスペクタをクリックして、各種インスペクタウインドウを開きます。



基本的には丸や四角を描いて、「Forme」ウインドウでそのオブジェクトについての詳細を設定します。
Stroke（線）の太さ・色・形状、Fill で面の塗り潰し・グラデーションなど、インスペクタで設定します。まだバグが有るらしく？、複数のオブジェクトを選択して一気に同じ設定できないようです。

オブジェクトをダブルクリックすると、パスの編集モードになります。




描いたパスに対して、インスペクタのText欄にテキストを入力すると、そのパスに沿って文字を入力できます。




また Stroke（線）に、パターンを設定することも可能です。
Stroke のリストで「Pattern」を選択して画像をドラッグ＆ドロップして、各パラメータを設定すれば、下のような感じで線を描けます。

（バグなのかよくわからないけど、保存して再度開いたときにパラメータの数値がリセットされてしまうようです。）

• command+Z --- Undo
  
• shift+command+Z --- Redo

が使えます。

DrawBerry にはさらに使いやすい「Undo History」パネル機能（ option+command+Z ）があります。





レイヤごとのブレンドモードで、描画方法を設定できます。




またレイヤのインスペクタでは、レイヤことにコアイメージフィルターを掛けることができます。
歯車メニューの「Add a Core Image filter ...」もしくは、「Layer's informations ...」でドロワーを開いて「＋」ボタンから、フィルタ選択パネルを表示できます。


フィルタを追加すると、そのフィルタ効果のみの「CILayer」というレイヤが新たに作られます。ドロワーで各フィルタの数値を設定することができます。

（ただ、現段階では思ったようなフォルタ効果がだせないことが多いかと思います）




いろいろ触ってみて、まだ安定していないところも多いけど、理想が高いアプリケーションで、今実装されている機能が安定するだけでもすごいソフトになりそうです。
（開発はスローペースだけど・・・）






この記事では DrawBerry 0.8.1 を使用しています。

（ダウンロードリンク）
Site top page : Raphael Bost
Project page : DrawBerry in Launchpad
Download page : DrawBerry

作者さんのサイトが重いので、↓MacUpdate のページです。
Download DrawBerry for Mac - Simple vector drawing app. MacUpdate Mac Illustration Software Downloads