1. 指カーソル
   ロールオーバー時のデザインの上に乗せると、説明しやすい。
   

   指カーソル

2. ちっこい矢印
   自分の気に入った大きさ＆角度のものをイン。サブ扱いのメニュー（例：プライバシーポリシーなど）に使用。
   

   ちっこい矢印

3. 細ライン
   タテを区切る罫線のほか、hr的な使用することも。ハイライトをつけて凹みっぽくみせてます。これを描くのと、ライブラリから探してドラッグ＆ドロップするのとどちらが早いかというと、すごく微妙なライン・・・。汎用性が欲しいこのパーツについては後述！
   
   

   細ライン

4. マルCマーク
   みんなの必須パーツ、著作権を表わすマルCマークです。個人的に(c)とするのがなんとなく好きじゃないので、円とCのアンチエイリアス具合が気に入った物をイン。
   

   マルCマーク

5. ダミーです
   アタリで入れてる画像やバナーの上に乗せてます。デザインの邪魔せずさりげなく主張してほしい一品。
   

   ダミーです

6. FLVPlayback
   flashで動画を見せたいページに。うちでは「FLVPlayback使いますよー」ということが多いので、共有ライブラリに入れちゃってます。9スライス＆グレースケールにすると、汎用性もばっちり（後述）
   

   FLVPlayback

ささっと作るつもりがエッジやアンチエイリアス具合にこだわり始めると、時間とられちゃうんですよね。
地味だけど、これらを毎回作ってた時間をトータルで考えるときっと恐ろしいことに・・・！

共有ライブラリのありがた〜いメリットというと、
たとえば汎用性がほしい「細ライン」なんかでも、基本になるベースを共有ライブラリに入れとくと、カンバスに取り込んだ時点でドキュメントライブラリにコピーされるので、気にせず好きにいじりまくれちゃいます。
「FLVPlayback」は9スライスにすることで横幅自由に、グレースケールで保存することで彩色しやすくしています。

他にも、音量アイコンや虫眼鏡カーソルなど、
自分のお気に入りのよく使うアイテムを、共有ライブラリに入れとくとスマートかもです。

追記：今後加筆していくかも。

机の上も絶賛散乱中、典型的ダメなデザイナーの宇都宮頼子です。
今回から始まった【ダメデザイナー救済！】は、基本ズボラな私が、いつかみんなに「こいつデキる・・・！」と言わせたい、そんな思いを胸にコツコツ溜まってきた小技をご紹介していくコーナーです。

twitterのタイムラインで流れてくる「ココとココの頭位置が微妙に違うのは意図的！？」「この端数は何だ？？」などなど、コーダー＆プログラマさん達の深夜のつぶやきは耳が痛い、耳が痛いよぅ。

今回はFireworksのシンボルをつかって、コーダー＆プログラマさんもニッコリ間違いなしのステキな素材作りを学びましょう！

●汎用性の高いブロックを作る

よく使うサイズのブロックを作ります。重ねても使えるので最低限でOK

こんな感じで汎用性の高そうなサイズのシンボルを作っておきます。（※以降ブロックと呼びます）ここでは5px,10px,20px,30pxと作ってみました。これらは共有ライブラリで保存しておくといつでも取り出せて便利！

※ワンポイントアドバイス： 矩形、線、テキストは保存の前にビットマップに変換しておきましょう。ベクターデータのままで回転させるとサイズが狂ってしまうようです。

基礎編は以上！さて実践編です。

●伸縮自在のパーツをつくる

中身によってタテヨコサイズが変わってしまうような素材の場合でも、9スライスとブロックを使って、paddingが再現できます。

9スライス内の四隅にブロックを配置します

まず枠オブジェクトをシンボル化させる際に、9スライスも有効にしておきます。
9スライスのガイド設定で四隅箇所にブロックを配置しましょう。この四隅だといくら伸縮してもブロックも崩れません。

伸縮させてもpaddingが可視化できて便利！

中身によって縦横が変わっても、ホラpaddingも崩れない！

●見出しをつくる

見出しの左脇と下辺にブロックを使用してみました

さっき作ったブロックを使って見出しシンボルを作ってみます。ブロックのよいところは、スナップで吸着してくれるところ。 配置もらくちんです。（※ブロックは目玉マークをオフにしてもスナップだけは効いてくれるところもシビれます。）

こんな感じでリストや区切り線などパーツをどんどん作っていきます。
「このルールにはまらない場合はどうすればいいの？ここだけは100pxの余白にしたいの。」 そういうときは別名でそういうパーツをつくっちゃえばいいだけのことです。
何度も登場するパーツであればシンボルの中にブロックを入れるといいですし、ロゴのような単体パーツだったら直接ブロックを配置してもOK。
そうこうやるとこんな感じでできあがり！

oh!デザインしてたら指示書も一緒にできちゃった・・・！

この方法のステキなところは

• 素材ファイルが兼指示書になる！
• ブロックというシンボルを作っておく事でスナップが効いて配置もラクラク！
• ルールを整理しながらデザインするので自然とcssコーディングを意識したデザインに！

これで「＃デザイナーあるある」つぶやきも、他人事のように笑える日も近いはず。是非おためしあれー。

線幅「1」では細すぎて「2」だと太すぎる・・・、そんなお悩みを抱えた方はいらっしゃいませんか？塗りがあるならまだしも*1、線だけで構成したい場合にはちょっと困りものですよね。

まずはサンプルを。ちょうど線幅「1」と「2」の中間の線をひきたい、というのが今回のお題目です。

線幅「１」では細すぎて「２」だと太すぎる・・・

そしてどん！こちらがその完成品。どうでしょう、中間といえば中間の太さじゃないでしょうか。

中間といえば中間な仕上がり。

さて続いてやり方です。まず線幅を「1」にし、フィルターのPhotoshopライブエフェクト「ストローク」を選択。サイズを「1」、位置を「縦書きの中央揃え」にします。

ポイントは「ストローク中央揃え」と、位置「縦書きの中央揃え」。

ただしこの方法ではピクセルが整数値ではなくなる為、線がにじむのはご愛嬌。。。
線のにじみに目をつぶるか、線の太さに目をつぶるか、という葛藤の末に前者を選んだ貴方様にだけおすすめできるチップスとなっております。

ここで気になるのが、Photoshopでは位置は「中央」なのに、Fireworksでは「縦書きの中央揃え」となっている点。・・・縦書きって何!?どこから来たん?!

とこんな感じの歯切れの悪い記事ですが、にじみの気になりにくいイラストなどでわりと活躍してくれてます。

*1 対象物に塗りのある場合は、ストロークを中央に整列＆塗りをストロークに重ねる、でキレイにできますよ。この場合、前者の方法よりにじみは少ないです。（あぁぁ、ますます需要なさそうな締め方・・・）

塗りがあるなら、この方法の方がキレイです・・・

Fwだけでここまでできちゃうよ！完成品

紙がビリビリに破れた感じをつくろう。

これ、Photoshopでのチュートリアルは数あれど、実はFireworksだけでも作ることができるんです。しかもお絵かき感覚で簡単に、エッジの質感もなかなか良い具合に仕上げる事ができます。
具体的な作り方は以下から。

1. 画像を用意します。
   

   元画像

   
   　
   　
2. 適当に切り取ります。隠れる部分なんでざっくりで大丈夫。ここではマスクを使いました。
   

   ここは神経質にならなくて大丈夫

   
   　
   　
3. 新規ビットマップ画像を追加したら、ブラシツール「油彩」＜「ブリストル」に設定。後で色を変えるので、輪郭が分かりやすい色にしておきます。こんな感じでお絵かきを楽しむように、輪郭を塗り塗りしてください。
   

   お絵かき感覚で思うままにぬりぬりして下さい

   
   　
   　
4. 塗り上がったところ。輪郭だけの一枚のビットマップになっているはずです。
   

   塗り上がりました。

   
   　
   　
5. このビットマップに対して「フィルター」＜「カラーを調整」＜「色相・彩度」のパラメータをこんな感じに変更。
   

   赤色だったのを「色相・彩度」をつかって自然な色に変更

   
   　
   　
6. さらにシャドウを追加すればあら簡単。ビリビリレイヤーの完成です。
   

   最後にドロップシャドウ

   
   　
   　

【応用】ブラシストロークやフィルターの微調整や追加で冒頭でも紹介したサンプル位の質感まで高めることができますよ。

ブラシストロークやフィルターを微調整するとこんな感じ

このＦｗスタイルライブラリを用意しました。こちらからダウンロードどぞ。→[ biribiri_paper.zip ]
※シャドウ部分はライブラリに含まれてませんが、サンプルではシャドウ用の別レイヤーを作ってゆがみなどの変形をさせてます。

Photoshopチュートリアルでは、投げ縄ツールを使ってエッジを作る方法が多いようなんですが、これがなかなか自然な輪郭をなぞれず、四苦八苦しちゃうんですよね。
今回紹介したFwの方法だと微妙なエッジもブラシで書くだけなので、「もうちょいココは下地の白を出したい」「ココあたりで破くことに迷いが生じて線が揺れる」等お絵かき感覚で自分の思うままにできちゃいますよ。

泣く泣く強制終了コマンドを押しながら、
今までの作業よ永遠にさらば…！FW子の性格は分かってたはず…！と自分を咎める前に、最後の頼みの綱。うまく行けば万々歳のファイル救済方法です。

レイヤーの目玉マークをオフにする。
それだけで保存できる場合があります。

たったこれだけで、あっさり保存できたりします。

何度も消えては現れる不死身のエラーダイアログ現象や、メモリ不足と伝えるのがやっとの全面グレー画面現象でも、レイヤーが操作できるまでは我慢！みたいな感じで、あとちょっと踏ん張ってみて下さい。
描画に負担かかりそうだなあと思われるレイヤーをフォルダごとオフにするのがコツです。

FWで画像のシルエットをパス化したんだよ

画像にリアルめな影を付ける際など、その画像のシルエットをベクター化させたい時がありますよね。それをFW（FireWorks）上で簡単に制作する方法をお届けします。地味ですが知ってるととっても便利です。

まず透過画像を用意します。

画像のあるレイヤーを選択後、そのレイヤーの上でAltキー（Macでは［option］キー）を押してみましょう。するとカーソルが□の付いたものに変わるはずです。そのままもう一度レイヤーをクリック。

画像のアウトラインが点線で囲まれ選択されます。つぎにメニューの「選択」＜「選択範囲をパスに変換」を選びます。

見事シルエットをベクターになっちゃいます！秒殺！！

ベクターがあれば、ちょっと複雑なシャドウを落としたり、テクスチャをそれだけにかけることも可能ですよね。コラージュし放題うはうは。

同様の事がphotoshopでもできるんですが、今までわざわざphotoshopに移動してたので。パッとしないTIPSですが、透過画像のシルエットを選択範囲に変換できるというのが何気に便利で重宝してます。

ただ選択範囲からパスに変換する際、細かい部分のディティールがどうしても甘くなっちゃうので、パス変換の際は大きめの画像で変換するのがベターです。

ほら、みて。こんなに違う

私はデザインする時、もっぱらFireWorksなんですが、今更ながら発見した便利tips。
FireWorks（以下 FW）で写真などの画像を拡大縮小するためには、「拡大・縮小ツール」を選ぶなどして変形ハンドルを出現させ、調整後Enter押すとそのサイズで確定するわけですが、
よくよくあるのが、後から「サイズをもっと大きめにして」などと修正が入っちゃうケース。

FWのイヤーな癖で、一旦Enterを押して確定させてしまうと、そのサイズで100％の画像に変換されてしまうため、少しでも大きくや小さくしようものなら画像がボケて使えたもんじゃありません。その度にデカい画像を再配置し、マスクの場合は解除してエフェクトもかけ直さなきゃ…と工程が多くてめんどくさいですよね。

で、そんなときに便利なのが「シンボル」。
予め（コレ後から微調整したいなーor入りそうだなー）という場合は、大きいサイズのままで画像選択した後に右クリックから「シンボルに変換」。
大きいままでサイズ100％としてシンボル化されるため、小さくするのもその後大きくするのも画質は綺麗なまま！もちろんシンボル元の大きさよりも大きくしてしまってはダメですが、かなり使える！！

※とはいえ、どんなに小さい画像でもそれだけ大きい画質の情報を持ってるってことなんで、あんまり一度に使いすぎるとPCが固まってしまうかもです。