38 選択範囲からアウトラインを作成する - WEBの作業が楽になるテクニック総まとめ 第5回 | デザインってオモシロイ -MdN Design Interactive-

38 選択範囲からアウトラインを作成する - WEBの作業が楽になるテクニック総まとめ 第5回

2024.5.4 SAT

【サイトリニューアル!】新サイトはこちらMdNについて

WEBの作業が楽になるテクニック総まとめ 第5回



Tips 38

選択範囲から
アウトラインを
作成する

文=新谷剛史((株)セカンドファクトリー)



任意の画像で指定した選択範囲に対して、選択範囲を調整しながら影やぼかしなどの加工を施したい場合があるだろう。このような場合は、選択範囲をパスに変換すると効率的に作業できる。たとえば、人物に影をつける際に下に楕円などのオブジェクトを配置したい場合は、選択範囲をパス変換して調整しよう【1】。なお、選択範囲をパスに変換する場合は、できるだけ大きめの状態で作業するのが望ましい。なぜなら、形状のトレースが甘くなりやすいからだ。画像範囲のパス変換を利用し、さまざまな効果を適用しよう【2】。

任意の画像の選択範囲を指定したら、選択メニュー→“選択範囲をパスに変換”を選ぶ
【1】任意の画像の選択範囲を指定したら、選択メニュー→“選択範囲をパスに変換”を選ぶ

作成したパスを変形し、プロパティインスペクタの[エッジ:エッジをぼかす]にし、任意の数値を設定した状態
【2】作成したパスを変形し、プロパティインスペクタの[エッジ:エッジをぼかす]にし、任意の数値を設定した状態


POINT パスの正確さより大きさを優先する


[INDEX]
>>> 36 キーボードのショートカットでツールを切り替える
>>> 37 登録したスニペットに個別のショートカットキーを割り当てる
>>> 38 選択範囲からアウトラインを作成する
>>> 39 作成するラインを線の内側に表示させCSSや画像の指定位置と合わせる
>>> 40 「SuperPreview」でブラウザチェックを効率よく実行する
>>> 41 新規レイヤーと効果適用したレイヤーを統合して処理を行う

【バックナンバー】WEBの作業が楽になるテクニック総まとめ
[第1回を見る] [第2回を見る] [第3回を見る][第4回を見る]
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在