2010年2月16日火曜日
自己紹介
DTP歴 7年 / Web制作歴 3年
2010年2月16日火曜日
ウープスデザイン:石嶋未来
• 1982年生まれ(27歳)
• 栃木県でデザイナし
てました。
• デザイン事務所、印
刷所の制作、IT関連
企業を経て2009年7
月に独立
2010年2月16日火曜日
ターゲット
• webはときどき担当する
• これからweb制作をもっとやっていき
たい
• 各ソフトを上手く使っていきたい
制作業務に携わっているデザイナーさん向けです
2010年2月16日火曜日
こんな事話します
•DTPとWebでのソフトの使い方の違い
•webならではの作業を少しでも楽にで
きるソフトの機能紹介
•その他ちょっとしたTipsを
2010年2月16日火曜日
今回取り上げるソフト
•Adobe Photoshop CS4
•Adobe Fireworks CS4
•Adobe Dreamweaver CS4
2010年2月16日火曜日
DTPとWebのソフトの違い
【DTP】 【Web】
2010年2月16日火曜日
DTP
部品制作
レイアウト
2010年2月16日火曜日
Web
部品制作
レイアウト
画像書き出し
オーサリング
2010年2月16日火曜日
デモ
2010年2月16日火曜日
Photoshopは多機能なので単体でも
使いやすいですが他のソフト機能を併用
するとさらに効率化できます。
2010年2月16日火曜日
めんどうな手作業なら
ソフトにやらせて
しまいましょう!
2010年2月16日火曜日
web制作でめんどうと感
じるのはどんな時?
• スライス作業
• 複数に渡るページを作る時のベースデ
ザインの管理
これらを効率化しましょう!
2010年2月16日火曜日
スライスをより簡単に
• スライスとは
• ざっくり言うと画像を細かく最適化し
て書き出すことで、表示を軽くしたり
など容量を節約するために必要な作業
のことです。
2010年2月16日火曜日
これが以外にめんどくさい
• 画像の幅や高さを合わせてピッタリ切
り出す
• コーディングの段階に入ってから調整
が必要になったり
• DTPでは無かったような煩雑な作業で
ソフト間の無駄な行き来が増えたりし
ます
2010年2月16日火曜日
Photoshopでカンタン
スライス編
0.ガイドを作成
1.スライスを作成
2.スライスに名前を付ける
3.各スライスの最適化を行う(jpg,gif)など
4.書き出し
5.Dreamweaverに貼り付け
6.修正があれば3からやり直し
...
デモ
2010年2月16日火曜日
まとめ
• psdをコピーペーストでDreamweaverに
貼り付けられるようになった。
• psdファイルを直接挿入すると、今後の
psdファイルのアップーデートも認
識。Dreamweaver側で更新してくれるよ
うになった。
psdファ...
Fireworksなら
とってもカンタン
• でもやっぱりガイド引くのめんどうで
すよね…
2010年2月16日火曜日
デモ
2010年2月16日火曜日
まとめ
• Fireworksでは書き出しが3クリック程度
で一括でできる!
• htmlも書き出せばリンク情報やテキス
トデータもそのまま利用できる!
• さらに先程のPhotoshopと同様にコピー
ペーストで貼り付けも可能です。
※元ファ...
ここまでの総括
• Photoshop,FireworksとDreamweaverは相
性最高! CS4ではコピーペーストで快適
作業が可能に
• Fireworksでは かな操作で書き出しを
設定可能。さらにテキストデータも一
緒にhtml上...
まだまだこれだけ
じゃない
2010年2月16日火曜日
複数ページの作成
• PhotoshopやIllustratorにはIndesignのよう
にマスターページ機能はありません。
ではweb制作ではどのようにサイトの
ベースデザインを管理しているのでしょ
うか。
2010年2月16日火曜日
Ans. 手作業
1. ベースデザインを制作する
2. 統合する
3. 別ファイルとして保存
4. 統合したレイヤーロック
5. 本文のデザインに着手
2010年2月16日火曜日
ここも効率化!
• Fireworksの機能を利用すれば
さくっといけちゃいます。
2010年2月16日火曜日
デモ
2010年2月16日火曜日
全体に及ぶ変更を
一括で対応できる!
クライアントにカンプ提出する時に
「他のページのヘッダーも
同じようになりますんで…」
と言えたら楽ですけど…
2010年2月16日火曜日
デモ
2010年2月16日火曜日
まとめ
• 複数ページはFireworksが便利
• Photoshopでベースを作った後Fireworks
でパーツをシンボル化
• リンクも付与できるのでクライアント
とページ遷移も共有できます。
2010年2月16日火曜日
ちょっとしたTIPS
2010年2月16日火曜日
Photoshopのテキストデータを抽出し
てくれるスクリプトがあります。
• http://
blog.summerwind.j
p/archives/1074/
2010年2月16日火曜日
Fireworksの共有ライブラリ
で楽をしよう
良く使いそうなアイ
コンなどがいくつも
入っていて便利!
特にwin,mac両方の
フォーム関連パーツ
も っているので活
用してみましょう。
2010年2月16日火曜日
以上でセッションは
終了です。
2010年2月16日火曜日
ご静聴ありがとうございました
• ウープスデザイン 石嶋未来
• info@woopsdez.jp
ブログもあります
http://blog.woopsdez.jp
2010年2月16日火曜日
Upcoming SlideShare
Loading in …5
×

Web制作効率的ワークフローとは

4,400 views
4,336 views

Published on

DTPデザイナーさんに向けた作業を効率化できる各ソフトの機能紹介です。

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,400
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
21
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Web制作効率的ワークフローとは

  1. 1. 2010年2月16日火曜日
  2. 2. 自己紹介 DTP歴 7年 / Web制作歴 3年 2010年2月16日火曜日
  3. 3. ウープスデザイン:石嶋未来 • 1982年生まれ(27歳) • 栃木県でデザイナし てました。 • デザイン事務所、印 刷所の制作、IT関連 企業を経て2009年7 月に独立 2010年2月16日火曜日
  4. 4. ターゲット • webはときどき担当する • これからweb制作をもっとやっていき たい • 各ソフトを上手く使っていきたい 制作業務に携わっているデザイナーさん向けです 2010年2月16日火曜日
  5. 5. こんな事話します •DTPとWebでのソフトの使い方の違い •webならではの作業を少しでも楽にで きるソフトの機能紹介 •その他ちょっとしたTipsを 2010年2月16日火曜日
  6. 6. 今回取り上げるソフト •Adobe Photoshop CS4 •Adobe Fireworks CS4 •Adobe Dreamweaver CS4 2010年2月16日火曜日
  7. 7. DTPとWebのソフトの違い 【DTP】 【Web】 2010年2月16日火曜日
  8. 8. DTP 部品制作 レイアウト 2010年2月16日火曜日
  9. 9. Web 部品制作 レイアウト 画像書き出し オーサリング 2010年2月16日火曜日
  10. 10. デモ 2010年2月16日火曜日
  11. 11. Photoshopは多機能なので単体でも 使いやすいですが他のソフト機能を併用 するとさらに効率化できます。 2010年2月16日火曜日
  12. 12. めんどうな手作業なら ソフトにやらせて しまいましょう! 2010年2月16日火曜日
  13. 13. web制作でめんどうと感 じるのはどんな時? • スライス作業 • 複数に渡るページを作る時のベースデ ザインの管理 これらを効率化しましょう! 2010年2月16日火曜日
  14. 14. スライスをより簡単に • スライスとは • ざっくり言うと画像を細かく最適化し て書き出すことで、表示を軽くしたり など容量を節約するために必要な作業 のことです。 2010年2月16日火曜日
  15. 15. これが以外にめんどくさい • 画像の幅や高さを合わせてピッタリ切 り出す • コーディングの段階に入ってから調整 が必要になったり • DTPでは無かったような煩雑な作業で ソフト間の無駄な行き来が増えたりし ます 2010年2月16日火曜日
  16. 16. Photoshopでカンタン スライス編 0.ガイドを作成 1.スライスを作成 2.スライスに名前を付ける 3.各スライスの最適化を行う(jpg,gif)など 4.書き出し 5.Dreamweaverに貼り付け 6.修正があれば3からやり直し 今までの工程 2010年2月16日火曜日
  17. 17. デモ 2010年2月16日火曜日
  18. 18. まとめ • psdをコピーペーストでDreamweaverに 貼り付けられるようになった。 • psdファイルを直接挿入すると、今後の psdファイルのアップーデートも認 識。Dreamweaver側で更新してくれるよ うになった。 psdファイルはhtmlと同様に階層にフォルダを作成し、 管理するとよりスムーズです。 2010年2月16日火曜日
  19. 19. Fireworksなら とってもカンタン • でもやっぱりガイド引くのめんどうで すよね… 2010年2月16日火曜日
  20. 20. デモ 2010年2月16日火曜日
  21. 21. まとめ • Fireworksでは書き出しが3クリック程度 で一括でできる! • htmlも書き出せばリンク情報やテキス トデータもそのまま利用できる! • さらに先程のPhotoshopと同様にコピー ペーストで貼り付けも可能です。 ※元ファイルからの自動更新には対応しておりません。 2010年2月16日火曜日
  22. 22. ここまでの総括 • Photoshop,FireworksとDreamweaverは相 性最高! CS4ではコピーペーストで快適 作業が可能に • Fireworksでは かな操作で書き出しを 設定可能。さらにテキストデータも一 緒にhtml上に載せてくれるので手打ち やコピペの手間も省けます。 2010年2月16日火曜日
  23. 23. まだまだこれだけ じゃない 2010年2月16日火曜日
  24. 24. 複数ページの作成 • PhotoshopやIllustratorにはIndesignのよう にマスターページ機能はありません。 ではweb制作ではどのようにサイトの ベースデザインを管理しているのでしょ うか。 2010年2月16日火曜日
  25. 25. Ans. 手作業 1. ベースデザインを制作する 2. 統合する 3. 別ファイルとして保存 4. 統合したレイヤーロック 5. 本文のデザインに着手 2010年2月16日火曜日
  26. 26. ここも効率化! • Fireworksの機能を利用すれば さくっといけちゃいます。 2010年2月16日火曜日
  27. 27. デモ 2010年2月16日火曜日
  28. 28. 全体に及ぶ変更を 一括で対応できる! クライアントにカンプ提出する時に 「他のページのヘッダーも 同じようになりますんで…」 と言えたら楽ですけど… 2010年2月16日火曜日
  29. 29. デモ 2010年2月16日火曜日
  30. 30. まとめ • 複数ページはFireworksが便利 • Photoshopでベースを作った後Fireworks でパーツをシンボル化 • リンクも付与できるのでクライアント とページ遷移も共有できます。 2010年2月16日火曜日
  31. 31. ちょっとしたTIPS 2010年2月16日火曜日
  32. 32. Photoshopのテキストデータを抽出し てくれるスクリプトがあります。 • http:// blog.summerwind.j p/archives/1074/ 2010年2月16日火曜日
  33. 33. Fireworksの共有ライブラリ で楽をしよう 良く使いそうなアイ コンなどがいくつも 入っていて便利! 特にwin,mac両方の フォーム関連パーツ も っているので活 用してみましょう。 2010年2月16日火曜日
  34. 34. 以上でセッションは 終了です。 2010年2月16日火曜日
  35. 35. ご静聴ありがとうございました • ウープスデザイン 石嶋未来 • info@woopsdez.jp ブログもあります http://blog.woopsdez.jp 2010年2月16日火曜日

×