UI/UXデザインツール『Sketch』入門

4-7. オブジェクトやパスを合成・結合する

  • UIデザイン
  • UXデザイン
  • プロトタイピング

複雑な形をしたオブジェクトを作成するには、複数の異なるオブジェクトを結合したり合成すると効率よく作成することができます。結合の種類もさまざまでそれぞれの特徴を捉えながら操作を覚えておきましょう。

公開日:2019/07/04最終更新日:2019/07/04

1.オブジェクトやパスの結合について

Combine(オブジェクトの結合)はAdobe Illustratorなど他のアプリでも同等の機能が存在しますが、これは複数のパスを結合し単一のオブジェクトを生成する機能です。Sketchでは結合したあとでも再編集が可能で、適用する結合バリエーションも後から自由に変更ができます。 

図:複数オブジェクトにCombineの適用する様子

Union:[Command]+[Option]+[U]
パス全体を連結

Subtract:Command+Option+S
背面のパスを前面のパスで型抜き

Intersect:Command+Option+I
パスが交差していない部分を残す

Difference:Command+Option+X
背面と前面のパスが交差する部分を残す

図:レイヤーリストで見たCombineオブジェクトの表示

2.結合したパスを1つのパスに変換する

Combineで合成したオブジェクトを一つのシェイプに変換する機能がFlattenです。ツールバーのアイコンをクリックすることでCombineで結合したパスを合成刷ることができます。

メニューから[Edit]→[Paths]にある「Flatten」を選択しても同様の操作ができます。

図:Flattenによるオブジェクトを一つのシェイプに変換

理解度チェック





UI/UXデザインツール『Sketch』入門

1. Sketchの概要とインストール

2. Sketchの基本操作

3. レイヤーリストの操作

4. ツールバーの操作

5. インスペクタの操作

6. シンボル・オーバーライド・ライブラリーの使い方

7. プロトタイプの作り方

8. Sketchをチームで使う

9. 料理写真投稿アプリを作ってみよう



このレッスンの著者