こんばんは！昨日に続き、本日もSketchのお話をしたいと思いますっ！というか昨日は中途半端すぎたので、その続きということで…
Sketchを使ってみよう！
昨日Sketchを導入したことと、Sketchとはこんな感じのアプリだよーって話を書いたのですが、本日からは使い方の説明を始めたいと思いますっ！
まずはインストールしたSketchを開くとこんな感じでしたっ！！
うん、なんじゃこりゃ(笑)
全くわからないですね。
ということでまずはこの画面の意味を学びました！！簡単に言うと、こんな感じっ！
画面の左側が「レイヤーリスト」というらしい…ふむふむ。
画面の右側は「インスペクタパネル」と…ふむふむ。
画面の真ん中は「アートボード」…ふむふむ。
そして画面の上に「ツールバー」と…ふむふむ。
Sketchの画面
レイヤーリストというのはIllustratorなどで言う、レイヤーパネルってヤツと同じですね。使い方もほとんど同じでした！グループオブジェクトや、パスファインダー的合流などを行ったオブジェクトを個別編集できるあたりも同じだったので、その辺はありがたいですねっ！
インスペクタパネルという部分は実際の操作部分。
基本的な項目としては
・Position (位置)
・Size (サイズ)
・Transform (変形)
・Opacity (不透明度)
・Blending (絵画モード)
・Fills (塗り色)
・Borders (線)
・Shadows (ドロップシャドウ)
・Inner Shadows (内側のシャドウ)
・Blur (ぼかし)
というのが並んでいます。
中でも便利だなぁーと思ったのが、シャドウ系！Illustratorとかだと、内側にシャドウつけたりするのがちょいと手間がかかってしまうのが、簡単にできちゃいますっ！
まぁ、あんまり内側にシャドウを入れることもないので、どっちでもいいと言えばどっちでもいーんだけどね…でも地味に便利。
そして、塗りやボーダー(線)をチェックボックスでオンオフする感じが個人的に好きでした。なんか直感的でわかりやすいなぁーって。色の選択に関しても、Illustratorとかで言う所のスポイトツールもあるのですが、スポイトってる部分が拡大表示されるので、1pxの細かーーーい所でもピンポイントで色を引っ張ってこれます！！
何故Adobeはこれを採用しなかったんだ？って思った…
その他はIllustratorやPhotoshopと同じ感じの印象でしたね。
次にツールパネル！！
色んな補助操作を行ってくれる部分ですねっ！これもIllustratorとかで例えると、パスファインダー的な部分があったり、変形ツール的なのがあったり、レイヤーの前後を入れ替えるスイッチがあったりという感じです。
自分好みにカスタマイズも出来ます！よく使うものを入れたり、いらないものを出したり。操作がドラッグドロップなので、かなり直感的にカスタマイズが可能だと思いました！
その他、というか、このツールパネルに関しては特に目新しいものはないのです…アイコンがカワイイ…ってことくらいでしょうか。
最後にアートボード！！
まぁただのキャンバスでしょ？って思っていたのですが、コイツがなかなかの優れもの。
Sketchのアートボードはすげぇ
正直こんな所に期待はしていなかったのですが、流石Webデザインやアプリデザインなどに特化しているだけあるな。と感じさせられました…
小さくて全然見えんとは思うのですが、Sketchのアートボードにはデフォルトでテンプレートが用意されています。(画像でいうと右側)
とりあえずSketchを開いた時点では画面は真っ白なので、アートボードを作る所から始めます。
ショートカットは〜
A
アルファベットも日本語も全てはAから始まる…何か意味深な感じを漂わすショートカット…A。
まぁ多分ArtboardのAなんでしょうけどね…
とりあえずAを押すとアートボードモード？みたいなのに入りますっ！ここで、任意の大きさをドラッグドロップでも作成できるのですが、上で述べたように、なかなか便利なテンプレがあります！
一応何もせずにあるテンプレが
・iOS Devices
・Responsive Web Design
・Material Design
・iOS Icons
・Mac Icons
・Paper Sizes
ってのがありました。
これ見ただけで、なんかWebとかアプリデザインに特化してる感メチャメチャ出てるなぁーって感じました…
iPhoneやiPadの縦、横サイズやApple Watchのサイズとかもありましたね〜。Apple製品を完全網羅してる辺りとかは流石Mac専用アプリ！っていう印象でした。
色々ある中でもボク的にはResponsive Web Designってのがすごーく感動しました。このボタンを押すだけで、デカ画面PC、普通画面PC、タブレット、スマホの4アートボードを作成してくれます。
今まで自作テンプレを用意してたのが、バカなんじゃないかと思うくらいでした…これは便利！！
もう一つアートボード関連で感動したのが、ガイド！！
Photoshopではプラグインを入れて、ガイドを一気に引いていたのですが、Sketchはもっと簡単でした…
ツールバーにViewという所があるので、それを押してShow Layoutってのを選択するだけ…デフォルトでは幅960pxの12カラムグリッドでガイドが出てきます。当然、幅やカラム数、両端の幅の余白の有無などもカスタム可能です。
ちなみにこのShow Layoutのショートカットは〜
Control + L
なんて便利なんだ…最初の画面を見ただけでも何回か感動ポイントがありました(笑)
まだまだ勉強が必要ですが、ちょっとづつ覚えていこうと思いますっ！
ってな感じで本日はSketchの初期画面プラスアートボードについてでしたっ！
ありがとうございました！