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

SESSION 2

秋葉 秀樹HIDEKI AKIBAtuqulore Co., Ltd. CEO / 筑波大学非常勤講師

最近の実績Ikesu（iPhone, Androidアプリ） ~ピンポン THE ANIMATION~超高速！スマッシュパズル（ゲーム） ノイタミナ公式Webサイト TNGパトレイバー公式（iPhone, Androidアプリ）

Illustrator ペンツール周り

Illustrator Webへの書き出し

Photoshop あれこれ

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

• ライブ長方形（角丸） • CSSの抽出 • SVG書き出し（レスポンシブSVG書き出し）

• 画像アセット（Generator） • HTML5 Video作成（H.264） • Generatorの可能性（会場参加デモンストレーション）

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

このようなパスを描きたいと思っても…

経験者

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

初心者の声

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

CC 2014

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

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

従来 CC 2014

セグメントへの直接操作

隣接するセグメントが連動するようになった

従来 CC 2014

ハンドルの先端はグリッドに吸着しなくなった

CS6 / CC 2014

これ、どう書く？

ビギナー

本来のアプリケーションの価値とは？ビギナーにもスキルを要する、そんな時代なのか？

「ペンツール」「ベジェ曲線」できないと使っちゃダメ…？

鉛筆ツールでキレイな曲線

パスの閉じ方がCS6と全然違う（良い） 直感性は好印象で、イラストにはむしろこっちがいいかも

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

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

オリジナル

効果→ラスタライズ→ 角を丸くする...

ライブコーナー

効果→ラスタライズ→ 角を丸くする...

ライブコーナー

ライブコーナーの方がきれい

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

2003 2013

UIのパーツづくり、行程の変化

UIもシンプルになってきている

画像スライスせずともCSSによる描画が可能な装飾

角丸 border-raduis

グラデーション塗り background-image（グラデーション）

画像文字 Webフォント

ドロップシャドウ ベベルとエンボス

box-shadow（ボックスに対して） text-shadow（文字に対して、IE10以降）

（数年前と違い）

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

CSS関連機能の実際の使いどころ• 色コードや角丸半径の値などの取得に便利

• ベンダープリフィックス対応が最新ではないので注意

• グラデーションには要注意（最新ブラウザでは角丸にプリフィックスは必要ない）

そのまま使わず部分的に使う方がよさそう

（線形と円形でベンダープリフィックス対応が違ったり、表示結果が異なったり）

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

Responsive SVG

要素のサイズに準ずるFluid Imageを実現したい場合、チェックを有効にすれば使いやすい

Responsive SVG 書き出しsvg要素のwidthとheight属性を削除する機能

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

画像アセット

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

HTML5 Videoの作成（H.264）

• Photoshop慣れしている人 • Illustratorとの連携に慣れている人 • ちょっとしたテロップやBGMを加えるだけでOKな場合 • 複数のビデオクリップをクロスフェードしたい場合

• HTML5 VideoコーデックとしてはH.264のみ

Photoshopのビデオ編集の使いどころ

【注意】

HTML5 Videoコーデック対応の注意

• Windows IEではH.264でも.movを認識しない（拡張子を.mp4に書き換えるだけで動いた）

• H.264に対応していないメジャーブラウザはMac版Firefoxくらい

.mov H.264

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

興梠 敬典TAKANORI KOROKI

ゲスト・エンジニア

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

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

DEMO START

Thanks!