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日。

Play by Play : Dribbble好きのための専用ブラウザ
OS10.7以上, Growl対応, 要Dribbbleアカウント
シェアウェア ¥450


Dribbble好きのための専用ブラウザ「Play by Play」の紹介です。



初めての起動時には下のようなウインドウで、自分のDribbbleのユーザ名を入力・設定します。



説明の順番が逆になったけど Dribbble というのは、400×300（or 800×600）サイズの画像を投稿して、あーだこーだと語り合うSNSサイトのことです。気に入った人をフォローしたり、気に入った作品に「Like」を付けたりします。

アカウントは誰でも無料でつくることができます。3種類のアカウントがあります。

• Player --- 画像を投稿・コメントできる。招待が必要。
  
• Prospect --- 「Player」になりたい人のためのアカウント。画像投稿・コメント不可。「Like」は付けられる。
  
• Scout --- 見るだけのアカウント。「Like」は付けられる。
  

「Prospect」アカウントの人が「Player」になるには、Playerからの招待が必要です。この招待状はPlayerみんなが持っている訳ではなくて、（そのPlayerの活動状況をふまえて？）ときどき招待権を1個ないし、数個もらえるようです。

ちなみに「PRO」ってマークが付いてるアカウントの人は、年$20？ぐらいを払って、検索機能や添付ファイルのアップロードなどのオプション機能を使えるようにしてる人のことで、どの種類のアカウントでも「PRO」にできるはず？
（Dribbbleもときどき仕様変更するので、今現在の状況です）



Play by Play は3ペインのウインドウ構成になっていて、一番左で「Following」「Activity」「Popular」「Everyone」「Debuts」のカテゴリを選択し、それぞれのカテゴリのショットをサムネイルでリストに表示します。そのリストからどれかを選択すると、右のペインでWebブラウザで見るのと変わらない400×300の画像サイズで見られます。

「Suggestion」（自分がフォローしている人がLikeを付けたショット）のカテゴリはありません。



メニューバーでカテゴリのリストを表示するか、もしくはクリックで Play by Play を隠したり、表示したりトグルすることができます（環境設定にて選択）。




Growl や 通知センターに対応していて、新しいショットがアップロードされたりすると通知されます。





Play by Play の機能ではないけど、Dribbbleっていろいろ気の利いた作りになっていて、そのショットで使われている主な色をカラーパレットとして表示し、またカラーで作品を検索できるようになっていたりします。

カラーパレットの「しづく」のアイコンをクリックすると、そのカラーパレット（.acoファイル）をダウンロードできます。


（この acoファイルは Photoshop 用のカラーパレットファイル？のようで、僕は持っていないので意味が無いけど・・・）




ご存知の通り、Dribbble はバスケットボールをモチーフにしていて、随所にバスケットボールの用語を機能の名称にしていたりします。
僕はこの「Play by Play」のアイコンが好きで、まさにDribbbleの「コートサイドアナウンサー」のようなアプリケーションの機能をよく表していると思います。








この記事では Play by Play 1.3.1 を使用しています。

（ダウンロードリンク）
Site top page : Play by Play - Your courtside announcer for Dribbble!
Download page : Play by Play （←Mac App Store）

qlImageSize : QuickLook で画像のサイズ、ファイル容量をタイトルバーに追加表示
QuickLookプラグイン
OS10.7以上（Intel）
フリーウェア


『[Mac] QuickLookをもっと快適にする！僕が入れているお薦めプラグインまとめ « Appdrill』で知った、QuickLook で画像のサイズ、ファイル容量をタイトルバーに追加表示する QuickLookプラグイン「qlImageSize」の紹介です。


このプラグインを導入すると、画像を QuickLook で表示したときタイトルバーに、その画像のサイズ、ファイルの容量を追加表示してくれます。

↓通常の QuickLook での表示



↓qlImageSize.qlgenerator を導入後


小さなことだけど、画像のサイズが表示されるとかなり便利。




またさらに、Finder でのサムネイル表示に、その画像ファイルの種類名を付け加えて表示するようになります。






インストール方法はダウンロードした「qlImageSize.qlgenerator」ファイルを

（すべてのユーザアカウントで使用する場合）
/Library/QuickLook/

（個別ユーザアカウントのみで使用する場合）
/Users/登録アカウント名/Library/QuickLook/

のどちらかに保存します。
「QuickLook」フォルダがない場合は、この名前のフォルダを新たに作ります。
ダウンロードページにあるように QuickLook をリセットするコマンドを実行するなり、Finder を再起動するなり、再ログインすれば機能するようになります。






この記事では qlImageSize.qlgenerator 変更日2012/02/08 のバージョンのもの を使用しています。

（ダウンロードリンク）
Site top page : Cocoa in the Shell • iOS & Mac OS programming
Download page : Nyx0uf/qlImageSize · GitHub

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