Webデザイナーにフル活用してもらいたいWeb制作ツール
•
9 gefällt mir•2,161 views
2014年11月8日に開催されたアドビイベント、Best of MAXで講演したセッション資料です。 デザインカンプからCSSや画像を簡単に取り出す方法やWebサイトにアニメーションを追加する方法など、Adobe Creative Cloudのツール群を使うとこんなことができる、という内容でデモ中心に紹介しました。
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Webデザイナーにフル活用してもらいたいWeb制作ツール
Ähnlich wie Webデザイナーにフル活用してもらいたいWeb制作ツール (20)
Mehr von Keisuke Todoroki
Mehr von Keisuke Todoroki (14)
Kürzlich hochgeladen
Kürzlich hochgeladen (10)
Webデザイナーにフル活用してもらいたいWeb制作ツール
- 1. 0Webデザイナーにフル活用して もらいたいWeb制作ツール 轟 啓介 | アドビ システムズ 株式会社
- 2. 本日の対象”Webデザイナー” グラフィックツールを主に使う。 HTMLやCSSコーディングもする、 もしくは、頑張ろうと思ってる。
- 3. 本日のテーマ 1. デザインからコードへ 2. HTMLアニメーション 3. 新しいCSSの表現
- 4. デザインからコードへ Design to Code 1
- 5. DESIGN CODE
- 6. DESIGN CODE デザインカンプ • ページ構成 • レイアウト • カラー • フォント • テキスト • 画像 HTML / CSS
- 7. DESIGN CODE • これまでは、デザインカンプから • デザイン要素を、「確認」して「知識」でCSS化 • 画像を、「スライス」して書き出し ! • これからは、デザインカンプから • デザイン要素を、ダイレクトにCSS化 • 画像を、ダイレクトに書き出し
- 8. デザインからCSSを コピーする5つの方法 5 easy ways of copying CSS from Design / Design to Code 1-1
- 9. ツール Fireworks Illustrator Photoshop Edge Reflow Extract
- 10. CSSのコピーと画像の切り出し □ 塗り、線、グラデーション □ フォント情報 □ サイズ □ 位置 □ 画像の切り出し
- 11. Fireworks
- 12. Fireworks □ 塗り、線、グラデーション □ フォント情報 □ サイズ □ 位置 □ 画像の切り出し
- 14. Illustrator
- 15. Illustrator □ 塗り、線、グラデーション □ フォント情報 □ サイズ □ 位置 □ 画像の切り出し
- 19. Photoshop
- 20. Photoshop □ 塗り、線、グラデーション □ フォント情報 □ サイズ □ 位置 □ 画像の切り出し
- 23. Edge Reflow
- 24. Edge Reflow □ 塗り、線、グラデーション □ フォント情報 □ サイズ □ 位置 □ 画像の切り出し
- 27. Extract
- 28. Extract □ 塗り、線、グラデーション □ フォント情報 □ サイズ □ 位置 □ 画像の切り出し
- 29. Extract CSSをコピー
- 31. CSSのコピーと画像切り出し Fireworks Illustrator Photoshop Edge Reflow Extract 線 / 塗り / グラデ○ ○ ○ ○ ○ フォント△ WebフォントNG ○ ○ ○ ○ サイズ○ ○ ○ ◎ ○ 位置情報× ○ ○ ◎ ○ 画像切出し× ○ ◎ × ◎
- 32. デザインからコードに 変換する3つの方法 3 easy ways of Code from Design / Design to Code 1-2
- 33. ツール & サービス Photoshop Edge Reflow Dreamweaver Brackets Extract
- 35. Photoshop + Reflow 2013/12 - PhotoshopとReflowのツール連携 デザインを一気にHTML/CSSコードに
- 38. Dreamweaver + Extract 2014/10 - DreamweaverとExtractのサービス連携 PSDからCSSコードや画像を取り出す
- 41. Brackets + Extract 2014/11 - BracketsとExtractのサービス連携 PSDからCSSコードや画像を取り出す
- 43. デザインからコードへ変換 Photoshop + Edge Reflow Dreamweaver + Extract Brackets + Extract HTMLへ変換○ × × CSSコードヒント- ○ ○ 画像コードヒント- ○ ○ 画像 Drag & Drop - ○ × 画像切出し- ○ ○
- 45. ツール Flash Professional Dreamweaver Brackets Edge Animate
- 47. Flash Professional 2013/12 - HTML Canvas と JavaScriptをサポート 既存のflaファイルを変換できる
- 49. Dreamweaver
- 50. Dreamweaver 2012/05 - CSS トランジションをサポート クリック操作でCSSアニメーション
- 53. Brackets
- 54. Brackets 2013/11 - CSS トランジションのタイミングを ベジエ曲線で編集可能
- 56. Edge Animate
- 57. Edge Animate 2012/09 - 直感的なタイムライン操作で HTMLアニメーションを作成
- 59. GUIによるHTMLアニメーション Flash Professional Dreamweaver Brackets Edge Animate GUIで作成する アニメーションCanvas CSS CSS DOM (+CSS) タイムライン○ × × ○ 既存ページへの アニメ追加× ○ ○ ○ 表現力◎ ○ △ ◎ 主な用途バナー / ゲームWebサイトの演出Webサイトの演出バナー / ゲーム / Webサイトの演出
- 60. CSSの新しい表現 New expressions with CSS 3
- 62. 1. デザインからコードへ 2. HTMLアニメーション 3. 新しいCSSの表現
- 63. Webで表現できること ツールで簡単にできること ! これらを知ることで制作の幅と 効率化が確実にできます