Creative Cloud デザインツールの便利な8つの機能 - ADC MEETUP ROUND 08 SESSION2 -

1,005 views

Published on

2014年7月30日に行われたAdobe Developer Connectionイベント(ADC MEETUP ROUND 08)のスライド。

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

No Downloads
Views
Total views
1,005
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
3
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Creative Cloud デザインツールの便利な8つの機能 - ADC MEETUP ROUND 08 SESSION2 -

  1. 1. Creative Cloud デザインツールの 便利な8の機能 SESSION 2
  2. 2. 秋葉 秀樹 HIDEKI AKIBA tuqulore Co., Ltd. CEO / 筑波大学非常勤講師 最近の実績 Ikesu(iPhone, Androidアプリ) ピンポン THE ANIMATION 超高速!スマッシュパズル(ゲーム) ノイタミナ公式Webサイト TNGパトレイバー公式(iPhone, Androidアプリ)
  3. 3. Illustrator ペンツール周り Illustrator Webへの書き出し Photoshop あれこれ • アンカーポイントツールとラバーバンド • その他パス関連の新機能 • 鉛筆ツールでキレイな曲線 • ライブ長方形(角丸) • CSSの抽出 • SVG書き出し(レスポンシブSVG書き出し) • 画像アセット(Generator) • HTML5 Video作成(H.264) • Generatorの可能性(会場参加デモンストレーション)
  4. 4. Illustrator ペンツール周り • アンカーポイントツールとラバーバンド • その他パス関連の新機能 • 鉛筆ツールでキレイな曲線
  5. 5. このようなパスを描きたいと思っても… 経験者
  6. 6. ビギナーにとって「アンカーポイント」と「ハンドルの先端」 を区別しようとすると混乱しそう 初心者の声
  7. 7. ラバーバンド ベテランユーザーは設定でOFFでいいだろう CC 2014
  8. 8. パスを閉じる直前にスペースキーで移動
  9. 9. アンカーポイントツールでハンドルを連動
  10. 10. 従来 CC 2014 セグメントへの直接操作
  11. 11. 隣接するセグメントが連動するようになった 従来 CC 2014
  12. 12. ハンドルの先端はグリッドに吸着しなくなった CS6 / CC 2014
  13. 13. これ、どう書く?
  14. 14. ビギナー 本来のアプリケーションの価値とは? ビギナーにもスキルを要する、そんな時代なのか? 「ペンツール」「ベジェ曲線」できないと使っちゃダメ…?
  15. 15. 鉛筆ツールでキレイな曲線 パスの閉じ方がCS6と全然違う(良い) 直感性は好印象で、イラストにはむしろこっちがいいかも
  16. 16. Illustrator Webへの書き出し • ライブ長方形 • CSSの抽出 • SVG書き出し(レスポンシブSVG書き出し)
  17. 17. ライブ長方形 長方形は様々なパラメータを持つようになった、角丸はすぐつくれて便利
  18. 18. オリジナル 効果→ラスタライズ→ 角を丸くする... ライブコーナー 効果→ラスタライズ→ 角を丸くする... ライブコーナー ライブコーナーの方がきれい
  19. 19. CSS書き出し機能 最近スライス、減ってきてませんか?
  20. 20. 2003 2013 UIのパーツづくり、行程の変化 UIもシンプルになってきている
  21. 21. 画像スライスせずともCSSによる描画が可能な装飾 角丸 border-raduis グラデーション塗り background-image(グラデーション) 画像文字 Webフォント ドロップシャドウ ベベルとエンボス box-shadow(ボックスに対して) text-shadow(文字に対して、IE10以降) (数年前と違い)
  22. 22. 画像スライスからCSSへ CSS書き出し機能
  23. 23. CSS関連機能の実際の使いどころ • 色コードや角丸半径の値などの取得に便利 • ベンダープリフィックス対応が最新ではないので注意 • グラデーションには要注意 (最新ブラウザでは角丸にプリフィックスは必要ない) そのまま使わず部分的に使う方がよさそう (線形と円形でベンダープリフィックス対応が違ったり、表示結果が異なったり)
  24. 24. でも、スライスも必要なときがあるので
  25. 25. Responsive SVG
  26. 26. 要素のサイズに準ずるFluid Imageを実現したい場合、チェック を有効にすれば使いやすい Responsive SVG 書き出し svg要素のwidthとheight属性を削除する機能
  27. 27. Photoshop あれこれ • 画像アセット(Generator) • HTML5 Video作成(H.264) • Generatorとは?(デモンストレーション)
  28. 28. 画像アセット レイヤーに拡張子付きファイル名を記述。 例)red.jpg5, 200% red.png だと、画質50%のJPEGと2倍サイズのPNGができあがる
  29. 29. HTML5 Videoの作成(H.264)
  30. 30. • Photoshop慣れしている人 • Illustratorとの連携に慣れている人 • ちょっとしたテロップやBGMを加えるだけでOKな場合 • 複数のビデオクリップをクロスフェードしたい場合 • HTML5 VideoコーデックとしてはH.264のみ Photoshopのビデオ編集の使いどころ 【注意】
  31. 31. HTML5 Videoコーデック対応の注意 • Windows IEではH.264でも.movを認識しない(拡張子を.mp4に書 き換えるだけで動いた) • H.264に対応していないメジャーブラウザはMac版Firefoxくらい .mov H.264
  32. 32. Generatorとは? (デモンストレーション)
  33. 33. 興梠 敬典 TAKANORI KOROKI ゲスト・エンジニア 株式会社アイセルにて金融系SI案件の設計/開発、Webアプリのフロントエンド開発等に携わる。 業務外では、Webサービスのスタートアップにサービス設計やアプリケーション開発担当で参画したり、 各種コミュニティ主催の勉強会で発表する等、野良プログラマとして活動。 言語はRuby, Java, JavaScript等が得意。
  34. 34. https://github.com/rockymanobi/photoshop-sv/issues/21
  35. 35. DEMO START
  36. 36. Thanks!

×