変形させるとき、多くの方は「パス」パネルを使用すると思いますが、
アイコンだけ並んでいても、どれがどんな働きをするのかわからなくなることはありませんか？

アイコンの絵でなんとなく合体する…くりぬかれる…と、動きは予想できますが
どちらのパスが前面・背面にあるかで、またさらに形が変わってきます。

今回はそんなちょっと迷う「パス」パネル、
Fireworksでいう「パスを連結」部分の早見表をつくったのでご紹介します。

「パスを連結」パネル 機能一覧

まずはパネルのどこに機能が配置されているのか
確認しましょう♪

「パスを連結」パネル　早見表

私がよく使うのは「合体」と「型抜き」です。
パスで何かの形をつくるとき、ペンツールは使わず
長方形ツールや円ツールなどで複数のパスをつくり重ねて「合体」や「型抜き」を
するとキレイな形がつくれます。

その「合体」と「型抜き」を多用した実践編の記事
「Fireworksで立体的なアイコンを作る方法」
もよろしければご覧ください♪

2012年も、みなさまに便利な情報をお届けできるよう頑張ります！
どうぞこれからもデザインブログをよろしくお願いします。（＾＾）

• 効率的！Fireworks CS3ショートカットキーまとめをデスクトップ壁紙に！
• 効率的にサクサクスライス！Fireworks CS5スライス書き出しTips
• Fireworksを使いこなそう！整列でアウトラインがぼけない方法
• Fireworksのスタイル機能でデザイン作業効率化！
• FireworksとPhotoshopの書き出し画像を比べてみた！～ドットコーダーセッションまとめ

さて、今回は前回の「Fireworksで立体的なアイコンを作る方法」よりも
もっと簡単にできるアイコンの作り方です。

今回は5分で作れるアイコンのご紹介！！
…の予定でしたが、ブログ記事用に作り直したら7分ちょうどかかりました。
すみません…
操作自体は簡単なので、速い方は5分でできると思います。
ぜひ、5分に挑戦してみてください！

アイコンはこちら、建物アイコンです。

ページ下部で制作動画の紹介や、ベクトルデータのダウンロードも可能です。
会社概要の見出しなどに使ってみてくださいね。

速く作るポイントは2つ

• パスの変形「歪みツール」を使う
• フィルター効果「シャドウ（内側）」を2つ重ねて使う

たったこれだけです。

1.平面の形を作る

パースのあるアイコンですが、
まずは真正面から見た図（平面図）をつくります。

2.歪みツールで立体的にする

平面ができたら、１面全部を選択し「歪みツール」で立体的にします。

歪ませる時、中央をつかむと平行に動いてしまうので
角をつかんで動かしてください。

3.シャドウ内側で影と光をつける

歪ませたら、「シャドウ（内側）」を2つ重ねて影と光を作ります。

影の数値はこちら

光の数値はこちら

「シャドウ（内側）」を重ねた時、影と光の角度を対称にするのがポイントです。

番外.「属性をペースト」を活用する

窓ガラスが味気ないので、グラデーションを縦から斜めに変更します。

最初から斜めでつくれば良かったのに、完成間際で気づいた！
っという、うっかりミスをしてもFireworksなら大丈夫です。

まず、どれか1つのパスを斜めに変更し、クリックボードにコピーします。

そして、窓ガラス全部選択し、編集の「属性をペースト」を使うと
選択したパスが全部同じグラデーション（属性）に変わります。

この「属性をペースト」はフォントにも使えます。
これはとっても便利なのでぜひ使ってくださいね。

ショートカットキー：Shift＋Ctrl＋Alt＋V

4.シャドウ内側で影と光をつける

右側の面は、影になっているので「色相・彩度」で暗くします。

5.仕上げ

最後に地面との隣接部分に影の部分つくり、色を調整して完成！

6.完成

完成したのが、こちらになります。
今回もベクトルデータをご覧いただけるようにしましたので、
実際にPNGデータを開いてみるとフィルター効果などを見ることができます。

画像ファイル（ベクトルデータ）のダウンロード（67KB）

詳しい手順については、制作過程の動画をご覧ください。

最後に・・・

今回は「シャドウ（内側）」を使っていますが「ベベル（内側）」でも同じような見た目にすることが可能です。
ただ、「ベベル（内側）」だと斜めのラインがキレイにでない。
Photoshopライブ効果の「ベベル（内側）」を使えば斜めのラインはキレイになりますが、ファイルの容量が重たくなる、操作が直感的じゃない。
と言う点から「シャドウ（内側）」を使っています。

窓ガラスがへこんでるイメージのため「シャドウ（内側）」を使いましたが、
盛り上がったような立体感を出す場合は「ドロップシャドウ」で同じようなイメージを作ることができます。

Fireworksのメリットといえば、
フィルター効果を簡単に、直感的に使える所！
ぜひ、Fireworksを上手に使って、色々なアイコンを作ってみてくださいね。

• Fireworksで立体的なアイコンを作る方法
• 知ってるようで、実は知らない?！ Fireworksの小技　Part2
• 知ってるようで、実は知らない?！ Fireworksの小技
• Fireworksを使いこなそう！整列でアウトラインがぼけない方法
• Fireworksを使いこなそう！ワンクリックでパスをアウトライン化

サイトや広告バナーをつくる際に、イメージアイコンを使うことがよくあります。
ただ、配布されているイメージアイコンを使用する場合、
「形を少し変えたい！」
「複数のアイコンを組み合わせて使いたい！」
など、サイトなどの雰囲気に合うよう、手を加えたくなる時があります。

ただ、データの加工が不可だったり、加工するのに時間がかかったり…
時間短縮のために配布素材を使ったのに意味がなかった！なんてこともあります。

そんな時はイメージアイコンを
最初から自分で作る！ というのも1つの方法です。

今回は、Fireworksを使って簡単に立体的なアイコンを作る方法を
ご紹介したいと思います。

作業は単純。

• パスの合体
• パスの切り抜き
• 拡大縮小

の繰り返しです。

1.形をつくる

1. 楕円を2つ描きます
   
2. 楕円の上に四角を重ねて合体させます
   
3. 合体したパスの上にさらに四角を重ねて切り抜き、余分な部分をカットします
   
4. 合体パスを楕円パスの下に配置して濃い色をのせて立体感をだします
   

2.影とハイライトをつくる

1. 先に作った楕円をコピーして2つつくり、1つの楕円は少し縮小します
   
2. 楕円を並べて三日月の形になるよう切り抜きます
   
3. 三日月を重ねて影にします
   さらに複製して反転させればハイライトになります
   
4. 反転させ影とハイライト部分をつくります

3.円錐をつくる

1. 楕円を2つつくり、1つは横幅だけを小さくします
   
2. 楕円に重なるように四角をつくります
   
3. 楕円に重なるように四角をつくります
   
4. 四角の下の部分を変形ツールでゆがませます
   
5. 楕円と四角を合体させます
   
6. あとはひたすらそれの繰り返し、形をつくっていきます
   

4.色を付ける

形がある程度できたら、色をのっけていきます。
ポイントは、

• 右と左のどちらから光があたってることにするか
• 中にあるものは濃く、底になるほど濃くなる

これを意識しながら色をつけます。

そして、できたのがこちら！

画像ファイル（ベクトルデータ）のダウンロード（195KB）

細かい行程は省きましたが、アイコンができるまでを動画にとってみたので
詳しくはこちらをみていただければと思います！

動画撮り終えたあと、ちょっとハイライトをいれたので
制作時間は、トータル22分くらいです。

今回はサイズが大きいので、パスをつけてキレイな陰影をつけました。
もっと小さなサイズのアイコンであれば、パスではなくドロップシャドウなどを使って陰影をつける手法もあります。
これだと、もっと短時間にアイコンがつくれます。

次回は、↓これを５分で作る方法をご紹介します！

• Fireworksで立体的なアイコンを7分で作る方法
• 知ってるようで、実は知らない?！ Fireworksの小技　Part2
• 知ってるようで、実は知らない?！ Fireworksの小技
• Fireworksを使いこなそう！整列でアウトラインがぼけない方法
• Fireworksを使いこなそう！ワンクリックでパスをアウトライン化

過去のブログ記事からもわかるように、弊社のメインソフトはFireworks！
入社当時はPhotoshop派で触ったこともなかったのですが、
今ではすっかりFireworksなしでは生きていけない！

このFireworks特集、たしか去年の秋ぐらい？に
開催の話があがったけれど、延期になり…
本当に開催されるの？Fireworksってそんな人気ない？

…と、余計なことを考えていましたが、当日は満席！
会場全体がFireworksへの愛にあふれてて、とても充実した１日になりました。

どのお話も面白いし、スライドもキレイでわかりやすい。
その中でも特に個人的に面白かったものをご紹介。

FireworksマニアLIVE！

スピーカーは、山口 有由希さん

今回参加の決定打になったのがこちら。
Fireworksマニアというブログを運営されており、今回はそのブログの作り方を会場でしちゃうというもの。

ステートの活用

ワイヤーフレームをかいた後、「デザインする」と「ワイヤーフレームを残しておく」ステートに分けて使う。
デザインが完成になって、ワイヤーフレームが不要になったら削除する。

スタイル機能の活用

テキスト、罫線、サイトのテーマカラーを「スタイル」に保存。
同一classをあてると思うテキスト箇所を、あらかじめテキスト登録しておく。
（わたし今までシンボル化ボタンを使って似たようなことをしてましたが、スタイル機能使えば良かったんですね…恥ずかしい…）

ドロップシャドウはPhotoshopのライブ効果を使う

並べて比較するとびっくり。Fireworksデフォルトのドロップシャドウのグラデーションって荒い…
Fireworksは、オブジェクトのアウトラインの処理も汚い（特にテキスト）ので、
アウトラインはPhotoshopのライブ効果の「線」を使うようにしていますが
ドロップシャドウもここまで違うとはびっくりしました。

Fireworksでドロップシャドウとアウトラインを使うときは、Photoshopのライブ効果を使おうと思います。
（ただ、経験的にCS4以前でライブ効果を多用すると重たくて内部エラー出やすくなるので注意が必要）

Fireworksのページ機能の使いどころ

スピーカーは、柴田大樹さん

Fireworksのページ機能についてだったのですが、時間が短かったこともあり、もっと色々聞きたかったなぁ…
と思っていたところ、時間の都合上でカットされた内容がブログ記事で紹介されてました。

「Fireworksのページ機能の細かすぎて伝わりにくい使いどころ」

• ページ移動のショートカットキー
• PDFデータを軽くする方法

ショートカットキーしらなかった…
いつも違うアプリケーションの上下に動かすショートカットキーを
間違えて打ってしまい「あぁ、間違えた…いや、そもそもなんでショートカットないの？」
と思ってたので嬉しい！！

パワーユーザー必携の海外の拡張機能20選択＋

スピーカーは、丸山章さん

Fireworksの便利な拡張機能の紹介。
これが一番熱くなりました！
その中でも、とくに熱くなった機能をご紹介です。

Placeholder
オブジェクトの寸法を表示してくれる。
物差しツールの四角形版ですね。ワイヤー組むのにこれは便利…！！

gradient panel
グラデーションの色、位置を数字で指定できる！
細かい調整が可能になるので、他のグラデーションと統一とれるし嬉しいですね～

gradient direction editor
グラデーションの方向を数値で指定できる。
いままshift押しながら、45度ずつの調整…あとは目視…、とアバウトな設定だったので
数値でできるのは良いですね！

Smart Knife
ビットマップ画像もテキストもパスも好きなようにカットできてしまう。
ちゃんとカットした後もパスデータが残っているのがすごい！

Tables拡張機能
Fireworksで、簡単に表がつくれるようになる！！
これが一番熱かった！！

でも、近日公開でまだ使えないっていう！！
待ち遠しすぎる…

感想

今回、Fireworks特集ということではありましたが、
あらかじめ「PhotoshopユーザーにもFireworksの魅力を理解いただく」という説明があったとおり、
Fireworksのポピュラーな機能紹介もおりまぜつつ、マニアックなネタの紹介もあり
まんべんなく来場者皆様のお腹が満たされたのではないでしょうか。（本音を言えば、苦しくなるくらい満たされたかった…！）

そして、今回のセミナーって東京だけなんですよね…。
面白いセミナーはだいたい東京…。

大阪でも開催されるくらい、Fireworks人気が上がって欲しい！
そのためにも、微力ですがFireworks人気あげるべくサボりがちだった
ブログ記事（Fireworksネタ）もっと出して行こうと思います！
目指せ週１回、投稿…！

• FireworksとPhotoshopの書き出し画像を比べてみた！～ドットコーダーセッションまとめ
• 効率的にサクサクスライス！Fireworks CS5スライス書き出しTips
• Fireworksを使いこなそう！整列でアウトラインがぼけない方法
• Fireworksを使いこなそう！ワンクリックでパスをアウトライン化
• Fireworksのスタイル機能でデザイン作業効率化！

こんな現象がおこったことはありませんか？
しかも、一度ぼけるとCtrl+zでも元に戻らないという、やっかいなバグ。

今回は、
「整列つかってもアウトラインがぼけない！」
そんな方法をご紹介します。

アウトラインがぼけてしまうバグは、「中央揃え（センター寄せ）」を使うと
高確率でおこります。
そのため「中央揃え（センター寄せ）」の使い方を工夫するだけで
バグに遭遇しなくなります。

ぼけてしまう整列の方法

整列させたいオブジェクト達をいきなり
「中央揃え（センター寄せ）」すると高確率でぼけてしまいます。

ぼけない整列の方法

整列させたいオブジェクト達を、「下揃え」または「上揃え」に整列させます。
その後、オブジェクトを「中央揃え（センター寄せ）」にします。
するとアウトラインがぼけません！

アウトラインのやり方を少し工夫するだけで
ラインがぼけるのを防止できます。

もし、ぼやけてしまった場合は下記の記事をご参照くださいね。
【参照記事：知ってるようで、実は知らない?！ Fireworksの小技】

FireworksCS5では改善されることを祈りつつ、
改善されるその日まで、是非お試しください。

• 効率的！Fireworks CS3ショートカットキーまとめをデスクトップ壁紙に！
• 効率的にサクサクスライス！Fireworks CS5スライス書き出しTips
• Fireworksを使いこなそう！ワンクリックでパスをアウトライン化
• Fireworksのスタイル機能でデザイン作業効率化！
• FireworksとPhotoshopの書き出し画像を比べてみた！～ドットコーダーセッションまとめ

こんなとき、リアルタイムでWebページを編集できたら便利ですよね。

そこで紹介するのが今回の方法です。
ブラウザのアドオンやエクステンションのインストールは一切なし！
ブラウザに左右されない！（Firefox、IE8、Chrome、Opera共通）

そんな便利な方法をご紹介します。

お気に入りに追加してWebページを編集する方法

下記のテキストリンクを「ドラッグ」し、
ブラウザのツールバーに「ドロップ」します。
このページを編集する

ツールバーに入った「このページを編集する」のブックマークをクリック。

すると、開いているページが編集できるようになります。
テキストや画像を選択し、「Delete」や文字を入力してみてください。

なんということでしょう。
編集したとおりに、Webページが変わります。

アドレスバーに入力してWebページを編集する方法

もう一つの方法は、直接ブラウザのアドレスバーに上記の文字列を入力する方法です。

そして、入力後エンターを押してください。

すると、さきほどと同じように編集が可能になります。

機能は、Firefoxのアドオン「PageHacker」と同じです。
【参照記事：画面レビューにめちゃくちゃ便利なFireFoxプラグイン】
でも、「PageHacker」と違ってインストールが不要、
Firefox以外でも使えるので、さらに便利！
是非お試しあれ。

• 効率的！Fireworks CS3ショートカットキーまとめをデスクトップ壁紙に！
• 効率的にサクサクスライス！Fireworks CS5スライス書き出しTips
• Fireworksを使いこなそう！整列でアウトラインがぼけない方法
• Fireworksのスタイル機能でデザイン作業効率化！
• FireworksとPhotoshopの書き出し画像を比べてみた！～ドットコーダーセッションまとめ

そこで自分のマニュアルもかねて、デザインブログで
少しずつ使い切れてない機能を紹介していきたいと思います。

今回は、「ワンクリックでパスをアウトライン化」と
その応用として「オシャレな文字づくり（テキストの縁取り）」の方法を紹介します。

ワンクリックでパスをアウトライン化

オブジェクトをポイント無しの状態で選択。

そして「パス」ウィンドウの「ストロークを塗りに変換」をクリック。

たったこれだけ！
アウトラインをとる前に、パスの線をお好みの太さにしておきましょう。

【応用】オシャレな文字づくり（テキストの縁取り）

テキストを打ち込みます。

ツールバー「テキスト」→「パスに変換」を選択。

そのあと、線と塗りを逆転させ塗りを透明にします。

線の太さをお好みに調整して、「パス」→「ストロークを塗りに変換」を選択。

するとテキストの縁がとれます。
あとは縁にグラデーションや装飾をつければ完成！

まだまだ「パス」ウィンドウには、作業効率をあげる機能がたくさん！
今後も引き続きご紹介していきます。

• 自動化のすすめ（Fireworks CS4 コマンドでより効率化！）
• 知ってるようで、実は知らない?！ Fireworksの小技　Part2
• Fireworksを使いこなそう！整列でアウトラインがぼけない方法
• Fireworksで立体的なアイコンを作る方法
• Fireworksで立体的なアイコンを7分で作る方法

１つ１つをみると、普通の動物アイコン。

これをフォロワー同士でTwitterアイコンに設定し、
タイムラインがうまくつながると・・・

こんな風に絵がつながるという仕組み。

普通のアイコンにあきてしまった方や、
お友達同士の目印にいかがでしょう？

今回は、このオリジナルアイコンを無料配布いたします。
お気軽にお使いいただければ幸いです！

【5個セット：一括ダウンロード（約14 KB）】

フォロワーが多くて5つ揃えるのは難しい・・！
という方は2つでつながるこちらをどうぞ。

【2個セット：一括ダウンロード（約11 KB）】

• Fireworksで立体的なアイコンを作る方法
• 企業のTwitterページのデザインをまとめてみた
• ブラウザ上でWebページをリアルタイム編集できる簡単な方法
• Twitterフォローの第一歩！つぶやくweb業界の人々まとめ
• Fireworksで立体的なアイコンを7分で作る方法

スクリーンショットを撮る方法

みなさんはどんな方法でスクリーンショットを撮りますか？
｢PrtSc SysRq｣キーを使う。
撮影用のソフトやツールを使う。

という方法が多いと思います。
もし、FireworksCS4の方は下記の方法を
試してみるのはいかがでしょう？

(1) ツールバーから「コマンド」→「スクリーンショットを撮影」
(2) 撮影範囲を選択
(3) ペーストする

小さな画面を撮影する場合や、
ソフトを起動・常駐させるのがイヤな方にはオススメですよ。

特定のレイヤー以外を簡単にロックする方法

(1) ロックをしないレイヤーを選択
(2) ツールバーから「コマンド」→「ドキュメント」→「他のレイヤーをロック」

すると、選択していたレイヤー以外がすべてロックされます。

レイヤーの数が多いときに便利です。

特定のレイヤー以外を非表示にする方法

(1) 表示しておきたいレイヤーを選択
(2) ツールバーから「コマンド」→「ドキュメント」→「他のレイヤーを隠す」

すると、選択していたレイヤーがすべて非表示になります。

レイヤーの数が多いときはもちろん、
他のレイヤーに折り重なって隠れたときにも使えます。

ちょっとしたことですが、長時間作業していると
こういう地味な動作が作業がストレスになってくるもの…。
せっかくついてる機能ですから、どんどん活用していきたいですね。

• 自動化のすすめ（Fireworks CS4 コマンドでより効率化！）
• 知ってるようで、実は知らない?！ Fireworksの小技
• Fireworksを使いこなそう！ワンクリックでパスをアウトライン化
• Fireworksで立体的なアイコンを作る方法
• Fireworksで立体的なアイコンを7分で作る方法

Fireworksを使っていて、こんな経験はありませんか？
その原因、もしかすると[ ドキュメントライブラリ ] が原因かもしれません。

Fireworks CS4のツールバー [ ウィンドウ ] から
[ ドキュメントライブラリ ] を開いてみましょう。

この中に不要なライブラリが残っていませんか？？

新規で作ったシンボルや、コピー＆ペーストをしたシンボルは
[ ドキュメントライブラリ ] の中に保存されます。
たとえ、画面上でそのシンボルを削除して使用していなくても
[ ドキュメントライブラリ ] には保存されたままです。

不要なシンボルは [ ドキュメントライブラリ ] から削除して
ファイル容量もダイエットしてあげましょう。

不要ドキュメントの削除方法

[ ウィンドウ ] → [ ドキュメントライブラリ ]

オプションメニューを選択

[ 未使用項目を選択 ] をクリック

ページ内に使用されていないシンボルが選択されます

あとは選択されたシンボルをゴミ箱へ捨てて削除完了です。

※ここで選択されるのは、ページ内での未使用シンボルです。
別のページで使用している場合も選択されるため、
複数ページがある場合は確認してくださいね。

• 自動化のすすめ（FireworksCS3バッチ処理編）
• 自動化のすすめ（Fireworks CS4 コマンドでより効率化！）
• 知ってるようで、実は知らない?！ Fireworksの小技　Part2
• 知ってるようで、実は知らない?！ Fireworksの小技
• 困った時の強い味方！Fireworks「Kuler」の使い方