BLOGスタッフブログ

2016.03.18 デザイン

Adobe Capture CC:手書き風アイコンの作り方

こんにちはデザイナーの小島です。
ぼちぼち釣りに行きたい季節になってきましたが
公私ともに忙しくて全然行けません。

以前、Adobeが提供するスマホアプリのAdobe Brush CCを紹介しました。
枯れた盆栽と花を咲かせるアプリ

今回は姉妹アプリ(?)のAdobe Shapeを紹介しようと思ったのですがいろいろと統合されてAdobe Capture CCに生まれ変わっていました。

20160317_01

ちなみに統合されたのはこちら
・Adobe Color
・Adobe Brush
・Adobe Shape
・Adobe Hue ※looksに変わったっぽい

統合はされたけど使い方は同じなので、改めてAdobe Capture CCのSHAPES機能をご紹介します。

みなさん

Webデザインをしていて手書き風アイコンを使いたくて素材を探すけど、「この形が見つからない!」って時や、いっそ手書きでスキャンしようと思ったけど、トレースめんどい!って時、ありませんか?

私はありません。

20160317_00

それはAdobe Capture CCのSHAPES機能を使えば簡単に出来るからです!
※ここだけの話し、手書き風アイコンをあまり使おうとしないからというのもあります。

それでは実際に作り方をご説明いたします。

絵を描く

20160317_02

とりあえず必要なアイコンを描きます。
失敗しても大丈夫です。
多少間隔を空けて描いてください。

Adobe Capture CCに取り込む

20160317_03

Adobe Capture CCを開いてSHAPESをタップすると、こんな画面になります。
イラストを縁取るように色がついているところが読み込まれる部分です。
下のスライダーを動かして濃すぎず薄すぎず良い感じのところで、下の●をタップすると写真が撮られます。

調整

20160317_04

するとこんな感じの画面になるので、いらない所をなぞると…

いらないところをなぞる

20160317_05

薄くなります。
薄くなったところは読み込まれなくなります。

プレビューで確認

20160317_06

次へをタップしてプレビューで確認します。
※ちゃんとウンチも消えてます。
大丈夫なら次へ

SHAPEを保存

20160317_07

わかりやすい名前を付けたらSHAPEを保存をタップします。

ライブラリに追加

20160317_08

ライブラリに追加されるので、Creative Cloudの同期設定が出来ていれば、Illustrator上に保存されます。

Illustrator上で編集

20160317_09

ライブラリからドラッグすると使えます。
シェイプになっているので微調整もここで出来ます。

このようにかなり簡単に手書きアイコンが作れるので、是非使ってみてください。

小島 和剛が書いた他の記事

見積もり・ご依頼など、
お気軽にご相談ください

本サイトはユーザーエクスペリエンスの向上などを目的に、Cookieを使用しています。
右記のバナーで「同意する」をクリックする、または本サイトを利用することにより、
お客様は弊社のCookieポリシーに同意したことになります。

同意します