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

1. Creative Cloud デザインツールの
便利な8の機能
SESSION 2

2. 秋葉 秀樹
HIDEKI AKIBA
tuqulore Co., Ltd. CEO / 筑波大学非常勤講師
最近の実績
Ikesu（iPhone, Androidアプリ）
ピンポン THE ANIMATION 超高速！スマッシュパズル（ゲーム）
ノイタミナ公式Webサイト
TNGパトレイバー公式（iPhone, Androidアプリ）

3. Illustrator ペンツール周り
Illustrator Webへの書き出し
Photoshop あれこれ
• アンカーポイントツールとラバーバンド
• その他パス関連の新機能
• 鉛筆ツールでキレイな曲線
• ライブ長方形（角丸）
• CSSの抽出
• SVG書き出し（レスポンシブSVG書き出し）
• 画像アセット（Generator）
• HTML5 Video作成（H.264）
• Generatorの可能性（会場参加デモンストレーション）

4. Illustrator ペンツール周り
• アンカーポイントツールとラバーバンド
• その他パス関連の新機能
• 鉛筆ツールでキレイな曲線

5. このようなパスを描きたいと思っても…
経験者

6. ビギナーにとって「アンカーポイント」と「ハンドルの先端」
を区別しようとすると混乱しそう
初心者の声

7. ラバーバンド
ベテランユーザーは設定でOFFでいいだろう
CC 2014

8. パスを閉じる直前にスペースキーで移動

9. アンカーポイントツールでハンドルを連動

10. 従来 CC 2014
セグメントへの直接操作

11. 隣接するセグメントが連動するようになった
従来 CC 2014

12. ハンドルの先端はグリッドに吸着しなくなった
CS6 / CC 2014

13. これ、どう書く？

14. ビギナー
本来のアプリケーションの価値とは？
ビギナーにもスキルを要する、そんな時代なのか？
「ペンツール」「ベジェ曲線」できないと使っちゃダメ…？

15. 鉛筆ツールでキレイな曲線
パスの閉じ方がCS6と全然違う（良い）
直感性は好印象で、イラストにはむしろこっちがいいかも

16. Illustrator Webへの書き出し
• ライブ長方形
• CSSの抽出
• SVG書き出し（レスポンシブSVG書き出し）

17. ライブ長方形
長方形は様々なパラメータを持つようになった、角丸はすぐつくれて便利

18. オリジナル
効果→ラスタライズ→
角を丸くする...
ライブコーナー
効果→ラスタライズ→
角を丸くする...
ライブコーナー
ライブコーナーの方がきれい

19. CSS書き出し機能
最近スライス、減ってきてませんか？

20. 2003 2013
UIのパーツづくり、行程の変化
UIもシンプルになってきている

21. 画像スライスせずともCSSによる描画が可能な装飾
角丸 border-raduis
グラデーション塗り background-image（グラデーション）
画像文字 Webフォント
ドロップシャドウ
ベベルとエンボス
box-shadow（ボックスに対して）
text-shadow（文字に対して、IE10以降）
（数年前と違い）

22. 画像スライスからCSSへ
CSS書き出し機能

23. CSS関連機能の実際の使いどころ
• 色コードや角丸半径の値などの取得に便利
• ベンダープリフィックス対応が最新ではないので注意
• グラデーションには要注意
（最新ブラウザでは角丸にプリフィックスは必要ない）
そのまま使わず部分的に使う方がよさそう
（線形と円形でベンダープリフィックス対応が違ったり、表示結果が異なったり）

24. でも、スライスも必要なときがあるので

25. Responsive SVG

27. 要素のサイズに準ずるFluid Imageを実現したい場合、チェック
を有効にすれば使いやすい
Responsive SVG 書き出し
svg要素のwidthとheight属性を削除する機能

28. Photoshop あれこれ
• 画像アセット（Generator）
• HTML5 Video作成（H.264）
• Generatorとは？（デモンストレーション）

29. 画像アセット
レイヤーに拡張子付きファイル名を記述。
例）red.jpg5, 200% red.png だと、画質50%のJPEGと2倍サイズのPNGができあがる

30. HTML5 Videoの作成（H.264）

33. • Photoshop慣れしている人
• Illustratorとの連携に慣れている人
• ちょっとしたテロップやBGMを加えるだけでOKな場合
• 複数のビデオクリップをクロスフェードしたい場合
• HTML5 VideoコーデックとしてはH.264のみ
Photoshopのビデオ編集の使いどころ
【注意】

34. HTML5 Videoコーデック対応の注意
• Windows IEではH.264でも.movを認識しない（拡張子を.mp4に書
き換えるだけで動いた）
• H.264に対応していないメジャーブラウザはMac版Firefoxくらい
.mov H.264

35. Generatorとは？
（デモンストレーション）

36. 興梠 敬典
TAKANORI KOROKI
ゲスト・エンジニア
株式会社アイセルにて金融系SI案件の設計/開発、Webアプリのフロントエンド開発等に携わる。
業務外では、Webサービスのスタートアップにサービス設計やアプリケーション開発担当で参画したり、
各種コミュニティ主催の勉強会で発表する等、野良プログラマとして活動。
言語はRuby, Java, JavaScript等が得意。

37. https://github.com/rockymanobi/photoshop-sv/issues/21

39. DEMO START

40. Thanks!