スライド（PDF、47ページ、4.6MB）

2011年3月6日日曜日
自己紹介
山口有由希
長崎県出身、福岡県在住
フロッグマンオフィスで
Webデザイナーをしています
@yuki930
2011年3月6日日曜日
福岡からきました
Fireworksマニア
http://fw.v-colors.com
FireworksでのデザインTipsを紹介
2011年3月6日日曜日
本日の流れ
1.私の制作フローとFireworks
2.トップページデザイン作業デモ
3.まとめ
2011年3月6日日曜日
基本的なワークフロー
ラフスケッチ
ワイヤーフレーム
デザインカンプ
下層デザイン
書き出し・コーディング
2011年3月6日日曜日
ラフスケッチ
2011年3月6日日曜日
2011年3月6日日曜日
Fireworksで
ワイヤーフレーム
2011年3月6日日曜日
2011年3月6日日曜日
2011年3月6日日曜日
作りやすい
•
ガイドに吸着させて描けるので書きやすい
•
オブジェクトのサイズの修正もカンタン
•
スタイル機能を使って書式合わせがラクラク
•
ブラウザですぐプレビューできる
2011年3月6日日曜日
DEMO
2011年3月6日日曜日
デザイン作業がラクに
•
デザイン時、ガイドラインなどを
そのまま利用できる
•
ダミーテキストを再利用できるので
作業時間が短縮できる
•
実際の大きさの感覚を保持しながら作れる
（PowerPointなどで作ると、実際の画面に
落とし込むと小さすぎ／大きすぎが出てくる）
2011年3月6日日曜日
Fireworksで
デザインカンプ
2011年3月6日日曜日
完成イメージ
2011年3月6日日曜日
DEMO
2011年3月6日日曜日
1
デザインを
はじめるための
下準備
2011年3月6日日曜日
2
スタイル機能で
書式一発設定
2011年3月6日日曜日
3
シンボル化して
写真の劣化対策
2011年3月6日日曜日
4
パターンを使って作る
質感のある背景
2011年3月6日日曜日
5
整列を使いこなして
カンタン切手
2011年3月6日日曜日
6
選択範囲をパスに変換
お手軽コラージュ風
パーツ
2011年3月6日日曜日
7
ストロークを選ぶだけ！
超カンタン
ふわふわ雲
2011年3月6日日曜日
8
ストロークを塗りに
変換して作る
使い勝手のいい矢印
2011年3月6日日曜日
9
点線いろいろ
2011年3月6日日曜日
10
角丸長方形ツールを
使った看板ベース
2011年3月6日日曜日
11
星ツールで作る
星以外のいろいろ
2011年3月6日日曜日
12
かんたん！
ボタンバリエーション
2011年3月6日日曜日
13
ベクター素材の
活用
2011年3月6日日曜日
14
Photoshop
ライブフィルタの
活用
2011年3月6日日曜日
ウッドフレーム
2011年3月6日日曜日
リアルな
マスキングテープ
2011年3月6日日曜日
重なった紙の表現
＆
ウッドクリップ
2011年3月6日日曜日
パールのオーナメント
2011年3月6日日曜日
テクスチャで
カンタン飾り
2011年3月6日日曜日
SILHOUETTE DESIGN
http://kage-design.com/wp/
2011年3月6日日曜日
Fireworksマニア
http://fw.v-colors.com/
2011年3月6日日曜日
Fireworksで
下層デザイン
2011年3月6日日曜日
2011年3月6日日曜日
Fireworksで
スライス
2011年3月6日日曜日
まとめ
2011年3月6日日曜日
ワイヤーフレームも作りやすい
素材の再利用で、
作業もスピーディー！
2011年3月6日日曜日
Fireworksでも
多彩な表現ができる!
しかもカンタン。
PhotoshopのカスタムブラシをFireworksで利用する
Fireworksでテクスチャを使ってみよう！作ってみよう！
2011年3月6日日曜日
もちろんIllustratorや
Photoshopにしかできないことも。
データの読み込みや書き出しを
マスターしてそれぞれの強みを
上手く使い分けよう！
PSD取り込み、PSD書き出しのコツ
デザイン制作工程におけるPhotoshopとFireworksの使い分けについて
賢く使い分けよう! WebのレイアウトにはやっぱりFireworks
2011年3月6日日曜日
Fireworksには、他にはない
便利な機能や使い方が
盛りだくさん！
Fireworks PNGの特性を活かした、"書き出し"をしない効率的ワークフロー
複数ページのカンプ制作に効く！Fireworksのページ機能の使いどころ
パワーユーザー必携の海外の拡張機能20選+α
FireworksにおけるスライスのTips & Tricks
モバイルサイト制作におけるFireworksの活用
フォーム系の共有ライブラリの活用
コーダーさんはまずここをおさえておこう！
2011年3月6日日曜日
ソフトごとの強みを知って
適所で使い分け
自分にあった環境で
快適デザイン生活
2011年3月6日日曜日
ご清聴ありがとうございました！
フィードバックはこちらまで
Fireworksマニア
http://fw.v-colors.com
@yuki930
↓こんなサイトも運営しています↓
2011年3月6日日曜日