![Fireworksでテキスト調整をする
文字サイズ指定
カーニングで字詰
文字サイズ [Ctrl(Command)]＋[Shift]＋[,]で-10
[Ctrl(Command)]＋[Shift]＋[.]で＋10
カーニング [Ctrl(Command)]＋[←]で-10
[Ctrl(Command)]＋[→]で＋10](https://image.slidesharecdn.com/fireworks3-130404223552-phpapp01/85/Fireworks-Web-13-320.jpg)
![Fireworksのカラーパレット
[セレクター]を選んで
[HSV]モードに変更すると
現在の色をベースに
H・・・色相
S・・・彩度 数字で調節できる！
V・・・明度
を個別に調整できる](https://image.slidesharecdn.com/fireworks3-130404223552-phpapp01/85/Fireworks-Web-17-320.jpg)
Uploaded byMori Kazue
デザイナー未満のためのFireworksで作るWebバナー広告のポイント
リクリ × 俺聞け vol.01「非エンジニアのための Git + GitHub 入門 × デザイナー未満のためのFireworksで作るWebバナー広告のポイント」で使用したスライドです。 [フォローアップページ] http://r360studio.com/fireworks/recre-orekike1.html
![広研塾（山村）[1]](https://cdn.slidesharecdn.com/ss_thumbnails/1-111019031442-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![Dreamweaver & Fireworksで 時間短縮テクニック [m-schoolセミナー]](https://cdn.slidesharecdn.com/ss_thumbnails/dreamweaver-130528183516-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
デザイナー未満のためのFireworksで作るWebバナー広告のポイント
- 1. vol.01 デザイナー未満のための Fireworksで作る Webバナー広告のポイント r360studio 森 和 恵
- 3. 今日の内容 • 文字の取り扱い • カラーを合わせる •写真をまわりになじませる • レイアウトの４原則 • ターゲットを主役にした広告
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13. Fireworksでテキスト調整をする 文字サイズ指定 カーニングで字詰 文字サイズ [Ctrl(Command)]＋[Shift]＋[,]で-10 [Ctrl(Command)]＋[Shift]＋[.]で＋10 カーニング [Ctrl(Command)]＋[←]で-10 [Ctrl(Command)]＋[→]で＋10
- 14.
- 15.
- 16. 色の３つの要素 明度 色相 彩度 （明るさ/暗さ） （色味の違い) （鮮やかさ) (濃い/薄い)
- 17. Fireworksのカラーパレット [セレクター]を選んで [HSV]モードに変更すると 現在の色をベースに H・・・色相 S・・・彩度 数字で調節できる！ V・・・明度 を個別に調整できる
- 18. 選ぶ基本カラーは、3色 • ベースカラー：使用する面積の広い色 • サブカラー：次に面積の広い色 •アクセントカラー：ワンポイントで使う色
- 19.
- 20. 同トーンで選ぶ • トーンとは、「明暗・彩度」が同じ色 色相だけが異なる色 • 「トーン＝調子」が同じ色
- 21.
- 22.
- 23.
- 24. レベル補正でコントラスト調整 ハイライト（入力） シャドウ（入力） 光の部分を増やす 影の部分を増やす ハイライト（出力） シャドウ（出力） 光の部分を減らす 影の部分を減らす 中間調 全体の明るさ調整
- 25.
- 26.
- 27.
- 28.
- 29. 近接 • 関連する項目を近づけ、まとめる • 逆に、違う項目は離す •項目ごとにグループ化
- 30.
- 31. 整列 • グループ化した中で揃える • 左・右・上・下に揃える • ガイド線を引くとわかりやすい • 中央揃えは避ける（わかりにくい）
- 32.
- 33. 繰り返し • デザイン要素を加える場合は、 同じグループで繰り返して使う • 繰り返すことで、グループ化を強調
- 34.
- 35. コントラスト • 大きさ、太さ、色などで 画面に強弱をつける • 文字のジャンプ率もコントラスト • メリハリとリズムが生まれる
- 36.
- 37.
- 38. 参考書籍 ノンデザイナーズ・ デザインブック 出版： 毎日コミュニケーションズ
- 39.
- 40. ターゲット 広告の主役は、見る人 • 提供側の言葉ばかりを押しつけては、× • 「誰に？」のターゲットを明確に • 主語はいつも、ターゲット側 • ターゲットのトーンに合わせる • 手に入れたら後の「結果」をアピール
- 41. ターゲットの違うバナーを比較 セッション当日は、 ニッセンのコーナートップバナーを比較しました。 「ミセス」「ヤング」「メンズ」 製品の直接的な宣伝ではなく、 ターゲットが主役の共感できる内容だと推測しました。
- 42.
- 43.
- 44. 先日書いた書店POPの例 長く使える教科書 すみずみまで教えます 「現場でちゃんと役立つ テクをゲット！」 「Web制作の流れが よくわかる！」
- 45.
- 46. Ａ案…わかりやすいが男性的 •文言もレイアウトも読みやすい • 女性らしい、やわらかさに欠ける • コントラストが高すぎる
- 47. Ｂ案…雰囲気は○わかりにくい • 女性らしい、やわらかさがある • 低年齢層むけにレイアウトもアレンジ • ななめにして写真を大きく • コントラストも低くやわらかい • 「バーゲン」という目的がわかりにくい
- 48. 基本がわかったら、次は実践 • いろんなものを見て、意図を分析 • 日頃から、レイアウトを集めておく •説明できない「何となく」デザインは× • いろんなパターンを試し、 よい結果のものを継続して採用する
- 49. 今日のポイント • 文字をなじませるために徹底的に微調整 サイズ・字詰め・フォント • カラーは、トーンで合わせる •写真は、コントラストで調子を合わせる • レイアウトの４原則 近接・整列・繰り返し・コントラスト • 訴えかける相手の目線でデザインする
- 50. r360studio 森和恵 今後の予定 情報は、r360studyで発信 Eラーニング教材 メールマガジンに寄稿 セミナー
- 51. よくわかる Fireworks の 教科書 Fireworksの教科書 https://www.facebook.com/ FireworksBook/
- 52.