calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

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

use_sketch

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

PR
IT/WEB業界への転職なら
Sponsored Link

Zoom Blur:画面平滑化(中心からぼかす)

zoom_blur

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

Mask:選択範囲だけ表示

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

mask_1

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

mask_2

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

shared_style_1

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

shared_style_2

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

shared_style_3

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

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

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

symbol_1

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

symbol_2

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

symbol_3

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

make_grid_1

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

make_grid_2

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

make_grid_3

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

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

layout_setting_1

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

layout_setting_2

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

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

text_1

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

text_2

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

text_3

Scale:%で拡大縮小する

scale

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

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする