超初心者向け「Sketch」の便利な使い方

• 作成：2015/10/20
• 更新：2016/07/03
• Webデザイン

ワイヤーやデザインカンプを作る時に、IllustratorからSketchに変更したら便利だったのでメモ。

Zoom Blur：画面平滑化（中心からぼかす）

普通のボカシではなく画像を中心からぼかします。「Zoom Blur」を選択すると中心から外側に向かって集中線が走っているかのようなボカシを入れることができます。ゲームで敵にエンカウントした時のようなイメージ。でも、外に広がってしまうので、次で切り抜いてみます。

Mask：選択範囲だけ表示

ブラーなどで画像をぼかしたりすると広がってしまう、余分な箇所を切り取りたい。そんな時は「Mask」を使うと簡単です。

画像の上に切り抜きたい図形（円や長方形）を配置し、画像と図形を選択後「Mask」を押せば切り抜き完了。先ほどのZoom Blurと組み合わせて、スタッフ紹介ページなんかで使えばインパクトを出せます。

Shared Style：オブジェクトを共有させる

複数のオブジェクトに共通のスタイルを適用させます。複数の要素の外観を一発で変更したい時に便利。あっちこっち移動しなくて済みます。

オブジェクトを選んで「No Shared Style」をクリック、「Create New Shared Style」を押し共有スタイル名をつけます。

その後、他の要素に先ほど作成した「Shared Style」を適用すればOK。

Symbol：オブジェクトを共有させる2

共有化させたいオブジェクトを選択し「Create Symbol」を押します。

そのまま「Make Grid」＞カラム数を指定します。

複製されました。左のボックスの色を変更すると右のボックスも変更されます。

• [参考] Learn Sketch 3 - Design+Code

Make Grid：任意のマージンを指定し整列させる

例えば内側10pxのマージンで3カラムのボックスを配置したい・・・。そんな時は「Make Grid」が便利。間隔を指定したいオブジェクトを複数選択し「Make Grid」をクリック後、Columnsでカラム数を入力。Boxedのチェックを外してArrangeを押します。

任意のマージンで整列されました。

Layout Settings：グリッドシステムを作成

最初から組み込まれているのでありがたいです。メニューバーの「Show Layout」を押せば960グリッドシステムを表示。View>Canvas>Layout Settingsでグリッド幅とカラム数を指定して新たなグリッドを作成することもできます。

デフォルトでは以下のように960pxの12カラム（カラム幅60px、マージン20px）で構成されています。このまま使えますね。Gutterは余白、Gutter on outsideは外側の余白のこと。

Text on Path：パスに文字をのせる

テキストと円などのパス両方を選択し「Text on Path」をクリックします。

テキストのオブジェクトをドラッグさせると、文字の位置を移動できるので任意の場所に動かし

Layer＞Paths＞Reverse Orderを選択すれば文字が反転します。

Scale：%で拡大縮小する

メニューバーの「Tools」＞「Scale」を選択すると「px」や「％」で拡大縮小が出来ます。

• 1

2015/09/7

綺麗なUIで、UNIXライクなCygwinの使い方

winのコマンドプロンプトはダサいし使いたくない、TeratermやPoderosaも少々飽きてきたし、綺麗なUIでLinuxコマンドが使えるターミナルはないのかと思ってバージ

2013/02/25

そうとう楽！WEB制作、ビジネスを助ける「テンプレート」まとめ

急に仕事をふられたけど いちから作っている時間はない だけど、素早く「それなり」に見せたい 見ているだけでデザインの参考になりそうなテンプレートや、無駄な作業

2016/12/19

PhotoshopやCSSを使い、背景だけを薄くしてデュオトーン加工する方法

デュオトーンを採用したアーティスティックなWebサイトも増えてきたことですし、今回は「写真全体をデュオトーンに加工するのではなく、人物と背景の透過度を変えてデュオトーン加工を施

2012/12/17

読むだけで配色センスがレベルアップ！５分程度で読める良記事まとめ

ある国で純白の白色は「死」、米国での緑色は「お金」をあらわす。経理財務に関係するサイトで「赤」を無意味に使用してはならない。 世界のさまざまな地域の人たちを対象にデザ