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

サンタさんへの手紙 2013年版 : クリスマスの夜に素敵なプレゼントがもらえる
OS10.6以上（Intel）、常時接続が可能なインターネット環境
フリーウェア、※期間限定ダウンロード


クリスマスの夜に STUDIO-蔵 さんから素敵なプレゼントがもらえる
「サンタさんへの手紙 2013年版」の紹介です。

使い方はクリスマス・イヴの夜（12月24日から25日にかけての夜）に同梱の
「くつした」フォルダをデスクトップに移動しておきます。



そして「サンタさんへの手紙」を起動して、表示された手紙にサンタさんへのメッセージを書きます。書き終わったら、アプリケーションを起動したままの状態でぐっすり眠ります。



（メッセージは Mail.app を通じて作者さんに送られます。複数のメールアカウントがあるときはリストの一番上のアカウントで。どうしても送りたくないって場合は環境設定で送らないように設定できます。）

※スリープさせたら駄目です。
眩しくて眠れないって人は、control+shift+eject⏏ でモニタのみスリープさせるといいでしょう。


これで朝起きてみたら、「くつした」フォルダの中に素敵なプレゼントが入ってるでしょう。




環境設定の ✓ を入れていれば、作者さんにメッセージを送ったり、あとでスリープできる仕様になっています。

さあ、期待して待ちましょう。






この記事では サンタさんへの手紙 3.4.0 を使用しています。

（ダウンロードリンク）
Site top page : STUDIO-蔵
Download page : STUDIO-蔵：サンタさんへの手紙









え？今年が最後なの？

『ReadMe!』より

以前の『Dockの背景を半透明にする』の記事に、Dockを「右」か「左」の縦表示の場合は元々半透明、とコメントを頂きました。

それで確か Dock の「下」表示の場合でも、縦表示と同じスモークガラスのような背景にする隠し設定があったはず！と思い返して調べてみました。

以下のコマンドを ターミナル.app などで実行すると、背景を変更できます。

defaults write com.apple.dock no-glass -bool true;killall Dock

（↓Dock の下表示で背景をスモークガラス風に変更したもの）







元の奥行きのある板みたいヤツに戻すには、以下のコマンドを実行します。

defaults write com.apple.dock no-glass -bool false;killall Dock

hetimaさんのTwitter で知った小ネタTipsです。

例えば QuickLook で画像ファイルを表示しているとき、ウインドウをリサイズするなどして表示されている画像が実際のサイズより大きく表示されているとします。


このとき optionキー を押している間は等倍表示されます。