先日実施したセミナー「Photoshop ＆ illustrator はここがスゴイ！」のスライド資料を公開します。 http://www.sansokan.jp/events/eve_detail.san?H_A_NO=18630

1. 最近のWebデザイン事情と
Photoshop ＆ Illustrator はここがスゴイ！
r360studio 森和恵

2. このスライドについて
iMedio主催セミナー
『最近のWebデザイン事情と
Photoshop ＆ Illustrator はここがスゴイ！』
http://www.sansokan.jp/events/eve_detail.san?H_A_NO=18630
の資料として作り、参加された方へのフォローアップ
目的で公開しています。
スライドだけではわかりにくい部分もありますがご了
承ください。

3. 本日の内容
•Adobe Creative Cloudについて
•Illustrator CC 2014 の新機能
•Adobe Creative Cloudからの素材提供
•Photoshop CC 2014 の新機能
•最近のWebサイトのデザインの傾向

4. @r360studio 森和恵
• Web系のセミナー講師（iMedio）
• 書籍執筆「よくわかるFireworksの教科書」など
• http://r360studio.com/

5. Adobe Creative Cloudとは？
•おなじみのデスクトップアプリ
•増えているモバイルアプリ
http://www.adobe.com/jp/creativecl
oud.html
•いろいろな申し込みプランについて
•よくある誤解
Adobe Creative Cloudのホント！

6. Adobe Creative Cloudとは？
•常駐ソフト Adobe Creative Cloud
•ブラウザからアクセスする
http://www.adobe.com/jp
•ヘルプはこちらから
https://helpx.adobe.com/jp/contact.html
ブラウザメニュー→ラーニングサポート→
サポートに問い合わせ

7. Adobe Creative Cloudとは？
•バージョンアップの頻度
Illustrator
http://www.adobe.com/jp/products/ill
ustrator/features.html
Photoshop
http://www.adobe.com/jp/products/p
hotoshop/features.html

8. Illustratorのいまどきの機能
•Web向けの設定
•ライブコーナーとライブシェイプ
•ペンツールの改良
•関連ファイルの“パッケージ”
•画像のリンク貼り付けとリンクパネル

9. Illustratorのいまどきの機能
•SVG形式ファイルの出力
•複数アートボードからの書き出し
•ライブラリパネル
•文字パネルの文字タッチツール

10. Web向けの設定
環境設定のWeb向け設定：
単位とユーザーインターフェース

11. Web向けの設定
新規ドキュメントの設定：
Webを選択し、「ピクセルグリッド」をOFF
プレビューモードを
「ピクセル」に

12. Web向けの設定
線がぼやけてしまう時は、変形パネルの
「ピクセルグリッドに適合」
[参考] http://www.dtp-transit.jp/adobe/illustrator/post_1896.html

13. ライブコーナー
描いたパスの角丸をダイレクト選択ツールで
角丸に変更

14. ライブシェイプ
四角形・角丸四角形の角丸をコーナーポイントで指
定したり、変形パネルで数値指定したりが可能

15. ペンツールの改良
ペンツールの操作が改良
https://helpx.adobe.com/jp/illustrator/how-to/new-
pen-tool.html?set=illustrator--whats-new--2014-06
●ペンを描く予定線が表示 ●方向線を決める前に[Ctrl]
で短く

16. ペンツールの改良
●直線を[Alt]ドラッグで
曲線に変更できる
●方向線が両方ある終点で
[Alt]を押すと方向線をき
りはなせる

17. ペンツールの改良
●コーナーポイントの端の方向点を
アンカーポイントツールで[Alt]クリックすると
スムーズポイントになる

18. パッケージ
[ファイル]-[パッケージ]メニュー：リンクされた画
像やフォントがある場合に、それらすべてをひとつ
のフォルダへまとめることができる

19. リンクパネル
[ファイル]-[配置]メニューで、「リンク」をつけて
保存するとリンク貼り付けになる
リンク元の管理は、[リンク]パネルでおこなう

20. SVG形式で保存
[ファイル]-[別名で保存]から
SVG画像形式の保存ができる
※アートボードのサイズで
画像が作成される

21. 複数アートボードから書き出し
[ファイル]-[書き出し]メニューで、
［アートボードごとに作成］にチェック
ファイル名は、Aiファイル＋アートボード名
（※アートボードパネルで名前を指定）

22. ライブラリパネル
[ライブラリ]パネルに
テキストスタイルやグラフィックを
登録し、クラウド経由で
他のソフトと連携できる

23. 文字タッチツール
[文字]パネルの文字タッチツールでは、
テキストオブジェクトのままで文字単位の編集可能

24. Adobe Creative Cloud で素材をゲット
•TypeKitのフォントをダウンロード
•Marketの素材をダウンロード

25. Photoshopのいまどきの機能
•Web用の設定
•焦点距離
•ぼかしギャラリーとMarketの素材
•写真のリンク読み込みとスマートオブジェクト
•スマートガイド

26. Photoshopのいまどきの機能
•ライブラリパネルから、
テキストスタイルとロゴの活用
•アセット抽出
•Extract

27. Web用の設定
環境設定のWeb向け設定：
単位とユーザーインターフェース

28. 焦点距離で選択範囲を作成
[選択範囲]-[焦点距離]メニューで、焦点距離の同じ部分だけ
に自動で選択範囲を作成できる

29. ぼかしギャラリーとMarketの素材
• Marketよりダウンロードした素材は、
ライブラリパネルに配置
• [フィルター]-[ぼかしギャラリー]-[…]に効果が追加

30. ライブシェイプと属性パネル
図形オブジェクトが、属性パネルで再指定可能に

31. 画像をリンク配置
[ファイル]-[リンクを配置]で画像データを
リンク配置に

32. スマートオブジェクト
ビットマップをスマートオブジェクトに変換し
複数の同じオブジェクトを一括管理

33. レイヤー効果（レイヤースタイル）
レイヤーに[レイヤー効果]を付加できる

34. ライブラリパネル
Illustratorでライブラリに登録した
グラフィックやテキストスタイルをPhotoshopでも使える

35. アセット抽出
レイヤーごとに画像として出力する機能。レイヤーを右ク
リック-[アセットを抽出]から、各レイヤーの出力設定を行
い、[ファイル]-[アセット抽出]メニューで出力

36. Extract
Adobe Creative Cloud（ブラウザー）の機能のひとつ。
PSDファイルをアップロードしておくと、ブラウザ越しに
さまざまなデータを確認できる

37. 「 CCの恩恵は、
なんといっても操作の効率アップ 」
「知らなくてもいい」のではなく、「知って利用する」ためのツール
多数あるソフトをうまく生かしたフローができれば、十分元が取れる

38. 最近のWebサイトのデザインの傾向と対策
最近のWebサイトは、シンプル&スマートなデザイン
・カード型、シングルカラム
・フラットデザイン
・アイコン
[GoogleMaterialDesign ]
http://www.google.com/design/spec/material-design/introduction.html
[FontAwesome]http://fontawesome.io/
http://fontawesome.io/cheatsheet/

39. ご清聴ありがとうございました