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コーディングを意識したデザインに！

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

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

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

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

1. 画像を用意します。
   

   元画像

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

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

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

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

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

   塗り上がりました。

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

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

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

   最後にドロップシャドウ

   
   　
   　

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

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

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

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

いつもあなたに寄り添います―― utweb

2枚1セットタイプです

UTWEB、2010年度の新作名刺のお知らせです。
今回は湿布型名刺、正しくは湿布型というより湿布そのものです。

他人様の肩をお借りして、勝手に広告媒体にしてしまうという画期的なアイテム。
そして、激務な方の多いこの業界、少しでもその大事な身体を労ってほしい―、utwebからのささやかで押しつけがましい想いが込められています。

※一部の方から、鞄にしまっておくと鞄全体が湿布臭くなる、これから手渡す予定の資料が全部湿布臭くなった、という有難いご意見をいただき、この度微香性に生まれ変わりました。

ところで、この湿布型○○。
デザインバーコードのように、この先未来があるんではないかと思っています。

例えば、

金属系のテクスチャを印刷

貼ればたちまちサイボーグ。

ざっくりと縫った、つぎはぎ風湿布

貼ればたちまち昔ながらの貧乏人。
などなど夢は膨らむばかり。
プロダクト関係でのご相談もUTWEBはお待ちしております。

寒中お見舞い申し上げます-2010年-

2010年もはや2月にさしかかろうとしているこの時期に、今更の年賀状a.k.a.寒中見舞いが刷り上がりました！
もともと年賀状として考えていたため、「天地人」「大河ドラマ」「寅（タイガー）」など、ピンと来にくい上に乗り遅れ感漂う題材ばかりになってしまいました・・・。

ちょいちょい暴走してしまうウザめな宇都宮ウエブ制作所をどうか今年もよろしくお願いいたします。

名刺-表面 左：宇都宮正宗　右：宇都宮(徳田)頼子

今回のコンセプトは「懐かしのゲームブック風」。
※ゲームブック―wikipediaより

表は、宇宙を背景にUTWEBメンバー勢揃い。個性的な面々はこれから起こるであろう大冒険を予感させます。
なお実質社員は２人だけですが、勢い余って勝手に社員を増やしてます。やる気のないくたびれた感じの警備員(アシカ)、そしてヒステリックな営業(クジャク)です。

名刺-裏面　門番と対峙する緊張のワンシーン！

裏面にはストーリーの分岐点があり、バタ臭い門番と対峙する緊張のシーン。
一方を選ぶとskypeのアカウント、もう一方を選ぶとtwitterのアカウントを入手することができます。

※今回から私にミドルネームが付きました。宇都宮(徳田)頼子です。ややこしいのでこれから呼ぶ時は「徳田」でよろしくお願いします。