世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書
https://gyazo.com/550113213dcf15ee5f5c85a47ad5baa7
各ツールの使い方やTipsが書かれていて、デザインのやり方はそこまで載っていなかった。
/icons/hr.icon
Lesson 01: Webデザインにおける各アプリの使い分け
Lesson 02: ワイヤーフレームからレイアウトへのスムーズな進行
Lesson 03: Illustratorでアイコンやロゴマークなどのパーツを制作しよう
wintyo.icon アイコンの作り方を勉強するには良さそう
複合パスはOptionを押しながらにするとレイヤーは結合されずに残る
パス変形効果で複製すると修正が楽
Lesson 04: Photoshopで写真の編集をしよう
Lesson 05: Photoshopで写真・パーツ加工をしよう
レイヤー効果でボタンを作る
Lesson 06: Creative Cloudライブラリへのパーツの登録と活用
Lesson 07: PhotoshopでのWebページ制作テクニック
繰り返し使うパーツの共通化
スマートオブジェクト
リンク
CCライブラリ
Lesson 08: XDを利用したレイアウトをしよう
Lesson 09: XDを利用したプロトタイプ作成を学ぼう
プロトタイプのツール
Prott
Sketch + Craft
InVision Studio
Figma
ProtoPie
Lesson 10: 各アプリで効率的にテキストをデザインする
アウトラインするとテキストにデザインを入れるのは簡単だが、テキストの編集ができなくなる。
そのため、テキスト情報を保持したまま装飾できるとよい
Photoshop: レイヤースタイル
Illustrator: アピアランス
Lesson 11: Photoshopから画像を書き出そう
Lesson 12: Illustratorから画像を書き出そう
全体がモザイク状に表示され、徐々に鮮明に表示される設定
PNG: インタレース
JPG: プログレッシブ
Illustratorでマスクした写真の書き出しは難しい
そのため、元の写真をPhotoshopで適切な大きさに縮小やトリミングしてJPEGに書き出し、それを使用する
Lesson 13: XDからの画像書き出しとコーダーとのデータ共有
デザインスペックでCSS情報を取得する
Lesson 14: PSD・AIファイルからCSSやテキストを抜き出そう
Adobe Dreamweaver CCを利用すると、「Extract」パネルからCSSコードを抜き出せる
Creative Cloudエクストラクトでも抜き出せる
Lesson 15: 他のアプリとの連携について知ろう
Skecth
Figma
InVision
Zeplin
Photoshop、Sketch、XD、Figmaに対応
InVistion
Photoshop、Sketchに対応