Successfully reported this slideshow.
Your SlideShare is downloading. ×

Photoshop & illustrator はここがスゴイ!

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 39 Ad

More Related Content

Slideshows for you (14)

Similar to Photoshop & illustrator はここがスゴイ! (20)

Advertisement

More from Mori Kazue (20)

Recently uploaded (20)

Advertisement

Photoshop & illustrator はここがスゴイ!

  1. 1. 最近のWebデザイン事情と Photoshop & Illustrator はここがスゴイ! r360studio 森和恵
  2. 2. このスライドについて iMedio主催セミナー 『最近のWebデザイン事情と Photoshop & Illustrator はここがスゴイ!』 http://www.sansokan.jp/events/eve_detail.san?H_A_NO=18630 の資料として作り、参加された方へのフォローアップ 目的で公開しています。 スライドだけではわかりにくい部分もありますがご了 承ください。
  3. 3. 本日の内容 •Adobe Creative Cloudについて •Illustrator CC 2014 の新機能 •Adobe Creative Cloudからの素材提供 •Photoshop CC 2014 の新機能 •最近のWebサイトのデザインの傾向
  4. 4. @r360studio 森和恵 • Web系のセミナー講師(iMedio) • 書籍執筆「よくわかるFireworksの教科書」など • http://r360studio.com/
  5. 5. Adobe Creative Cloudとは? •おなじみのデスクトップアプリ •増えているモバイルアプリ http://www.adobe.com/jp/creativecl oud.html •いろいろな申し込みプランについて •よくある誤解 Adobe Creative Cloudのホント!
  6. 6. Adobe Creative Cloudとは? •常駐ソフト Adobe Creative Cloud •ブラウザからアクセスする http://www.adobe.com/jp •ヘルプはこちらから https://helpx.adobe.com/jp/contact.html ブラウザメニュー→ラーニングサポート→ サポートに問い合わせ
  7. 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. 8. Illustratorのいまどきの機能 •Web向けの設定 •ライブコーナーとライブシェイプ •ペンツールの改良 •関連ファイルの“パッケージ” •画像のリンク貼り付けとリンクパネル
  9. 9. Illustratorのいまどきの機能 •SVG形式ファイルの出力 •複数アートボードからの書き出し •ライブラリパネル •文字パネルの文字タッチツール
  10. 10. Web向けの設定 環境設定のWeb向け設定: 単位とユーザーインターフェース
  11. 11. Web向けの設定 新規ドキュメントの設定: Webを選択し、「ピクセルグリッド」をOFF プレビューモードを 「ピクセル」に
  12. 12. Web向けの設定 線がぼやけてしまう時は、変形パネルの 「ピクセルグリッドに適合」 [参考] http://www.dtp-transit.jp/adobe/illustrator/post_1896.html
  13. 13. ライブコーナー 描いたパスの角丸をダイレクト選択ツールで 角丸に変更
  14. 14. ライブシェイプ 四角形・角丸四角形の角丸をコーナーポイントで指 定したり、変形パネルで数値指定したりが可能
  15. 15. ペンツールの改良 ペンツールの操作が改良 https://helpx.adobe.com/jp/illustrator/how-to/new- pen-tool.html?set=illustrator--whats-new--2014-06 ●ペンを描く予定線が表示 ●方向線を決める前に[Ctrl] で短く
  16. 16. ペンツールの改良 ●直線を[Alt]ドラッグで 曲線に変更できる ●方向線が両方ある終点で [Alt]を押すと方向線をき りはなせる
  17. 17. ペンツールの改良 ●コーナーポイントの端の方向点を アンカーポイントツールで[Alt]クリックすると スムーズポイントになる
  18. 18. パッケージ [ファイル]-[パッケージ]メニュー:リンクされた画 像やフォントがある場合に、それらすべてをひとつ のフォルダへまとめることができる
  19. 19. リンクパネル [ファイル]-[配置]メニューで、「リンク」をつけて 保存するとリンク貼り付けになる リンク元の管理は、[リンク]パネルでおこなう
  20. 20. SVG形式で保存 [ファイル]-[別名で保存]から SVG画像形式の保存ができる ※アートボードのサイズで 画像が作成される
  21. 21. 複数アートボードから書き出し [ファイル]-[書き出し]メニューで、 [アートボードごとに作成]にチェック ファイル名は、Aiファイル+アートボード名 (※アートボードパネルで名前を指定)
  22. 22. ライブラリパネル [ライブラリ]パネルに テキストスタイルやグラフィックを 登録し、クラウド経由で 他のソフトと連携できる
  23. 23. 文字タッチツール [文字]パネルの文字タッチツールでは、 テキストオブジェクトのままで文字単位の編集可能
  24. 24. Adobe Creative Cloud で素材をゲット •TypeKitのフォントをダウンロード •Marketの素材をダウンロード
  25. 25. Photoshopのいまどきの機能 •Web用の設定 •焦点距離 •ぼかしギャラリーとMarketの素材 •写真のリンク読み込みとスマートオブジェクト •スマートガイド
  26. 26. Photoshopのいまどきの機能 •ライブラリパネルから、 テキストスタイルとロゴの活用 •アセット抽出 •Extract
  27. 27. Web用の設定 環境設定のWeb向け設定: 単位とユーザーインターフェース
  28. 28. 焦点距離で選択範囲を作成 [選択範囲]-[焦点距離]メニューで、焦点距離の同じ部分だけ に自動で選択範囲を作成できる
  29. 29. ぼかしギャラリーとMarketの素材 • Marketよりダウンロードした素材は、 ライブラリパネルに配置 • [フィルター]-[ぼかしギャラリー]-[…]に効果が追加
  30. 30. ライブシェイプと属性パネル 図形オブジェクトが、属性パネルで再指定可能に
  31. 31. 画像をリンク配置 [ファイル]-[リンクを配置]で画像データを リンク配置に
  32. 32. スマートオブジェクト ビットマップをスマートオブジェクトに変換し 複数の同じオブジェクトを一括管理
  33. 33. レイヤー効果(レイヤースタイル) レイヤーに[レイヤー効果]を付加できる
  34. 34. ライブラリパネル Illustratorでライブラリに登録した グラフィックやテキストスタイルをPhotoshopでも使える
  35. 35. アセット抽出 レイヤーごとに画像として出力する機能。レイヤーを右ク リック-[アセットを抽出]から、各レイヤーの出力設定を行 い、[ファイル]-[アセット抽出]メニューで出力
  36. 36. Extract Adobe Creative Cloud(ブラウザー)の機能のひとつ。 PSDファイルをアップロードしておくと、ブラウザ越しに さまざまなデータを確認できる
  37. 37. 「 CCの恩恵は、 なんといっても操作の効率アップ 」 「知らなくてもいい」のではなく、「知って利用する」ためのツール 多数あるソフトをうまく生かしたフローができれば、十分元が取れる
  38. 38. 最近のWebサイトのデザインの傾向と対策 最近のWebサイトは、シンプル&スマートなデザイン ・カード型、シングルカラム ・フラットデザイン ・アイコン [GoogleMaterialDesign ] http://www.google.com/design/spec/material-design/introduction.html [FontAwesome]http://fontawesome.io/ http://fontawesome.io/cheatsheet/
  39. 39. ご清聴ありがとうございました

×