Web制作効率的ワークフローとは
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 4,907 views

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

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

Statistics

Views

Total Views
4,907
Views on SlideShare
4,163
Embed Views
744

Actions

Likes
3
Downloads
19
Comments
0

8 Embeds 744

http://blog.woopsdez.jp 700
http://s.deeeki.com 23
http://www.geocities.jp 12
http://www.slideshare.net 3
http://a0.twimg.com 2
https://twitter.com 2
resource://brief-content 1
http://www.geocities.co.jp 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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日火曜日
  • デモ 2010年2月16日火曜日
  • まとめ • psdをコピーペーストでDreamweaverに 貼り付けられるようになった。 • psdファイルを直接挿入すると、今後の psdファイルのアップーデートも認 識。Dreamweaver側で更新してくれるよ うになった。 psdファイルはhtmlと同様に階層にフォルダを作成し、 管理するとよりスムーズです。 2010年2月16日火曜日
  • Fireworksなら とってもカンタン • でもやっぱりガイド引くのめんどうで すよね… 2010年2月16日火曜日
  • デモ 2010年2月16日火曜日
  • まとめ • Fireworksでは書き出しが3クリック程度 で一括でできる! • htmlも書き出せばリンク情報やテキス トデータもそのまま利用できる! • さらに先程のPhotoshopと同様にコピー ペーストで貼り付けも可能です。 ※元ファイルからの自動更新には対応しておりません。 2010年2月16日火曜日
  • ここまでの総括 • Photoshop,FireworksとDreamweaverは相 性最高! CS4ではコピーペーストで快適 作業が可能に • Fireworksでは かな操作で書き出しを 設定可能。さらにテキストデータも一 緒にhtml上に載せてくれるので手打ち やコピペの手間も省けます。 2010年2月16日火曜日
  • まだまだこれだけ じゃない 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日火曜日