PhotoshopやIllustratorでweb制作をする際に使える小技を集めました。
動画のみではわからなかった点などはTwitterなどで質問をいただければできる限り対応します。たぶん。
この記事はAdobe MAX Japan – BREAKOUT SESSIONS -「もっと楽するweb制作！Illustrator & PhotoshopのCreative Cloud神ワザ集」で行ったDEMOに関する内容をポイントごとに動画で切り分け解説したものです。
再確認用なので、内容自体は当日行われたものと大きく変わりません。
なお動画のソーシャルでの共有や拡散に制限はありません。
1-Ai)グリッド作成のTips
- 長方形ツールでアートボードいっぱいの長方形を作成
- 塗り赤や緑などで少しわかりやすい色に、線は黒でOK
- アピアランスで塗りに形状に変換→長方形→幅に追加「-15」、高さに追加「0」
- オブジェクト→アピアランスを分割で分解しておく
2-Ai)余白を入れたレイアウトのTips
- 長方形を配置
- アピアランス形状に変換→長方形→幅に追加「-10」、高さに追加「-10」などで余白に合わせた数値を設定
- テキストエリアを作成
- エリア内文字オプション→外枠からの間隔に10pxなど余白に合わせた数値を設定
- エリア内文字オプション→一列目のベースラインでCSSコーディングに合わせた見た目のラインの設定
3-Ai)アイコンの作成のTips
- ボタンやハンバーガーメニューのベースをダイナミックシンボルに登録
- ダイレクト選択でオブジェクトをピンポイントで選択
- 色を変更
- アピアランスでシャドウ加工なども可能
4-Ai)ロゴやイラストのTips
- 線でイラストのアウトラインを描く
- 連結ツールではみ出したり届かない2つのアンカーポイントを綺麗に連結する
- シェイプ形成ツールではみ出た線やいらない部分を削除
- ライブペイントツールを選び、十字キーでスウォッチを選択して色をつける
- 複数のオブジェクトの一部を抜く
- 複数のオブジェクトの一部を不透明度0にする
- 不透明度0を含むオブジェクトをグループ化する
- 透明パネルのグループの抜きにチェックを入れて一部を透過する
- テキストの場合も有効なので編集が可能
5-Ps)スマートオブジェクトを使った際のTips
- あらかじめレイアウトのベースになる長方形などを配置
- レイヤーから右クリック（副クリック）などでスマートオブジェクトに変換
- スマートオブジェクトを選び、オプションキーを押してから他のアートボードにドラッグしてコピー
- 同じスマートオブジェクトは属性パネルの「コンテンツを編集」から編集、またはダブルクリックで編集すれば同期したオブジェクトを一括管理できる
6-Ps)画像編集のTips
- 暗い写真の補正
- 暗い画像は色調補正→シャドウ・ハイライトが便利
- 編集したいレイヤーをメインメニューのフィルター→スマートフィルターに変換
- Camera Rawフィルターで編集してもフマートフィルターであれば再編集が可能
- 切り抜きやマスク
- クイック選択ツールで大まかな選択範囲を決定
- 選択とマスクで選択範囲の再調整とぼかしなどの細かな設定が可能
- 出力先をレイヤーマスクに指定してそのままマスク状態で完了できる
7-Ps)トリミングとコンテンツに応じた編集のTips
- 画像のポイントになる要素を変形させずに全体の幅や高さを調整する
- 編集→コンテンツに応じて拡大縮小を選択
- パターンの近い部分以外はできるだけ比率を維持して変形してくれる
- サイズが足らない画像の空白部分を埋める
- 切り抜きツールで全体の幅を大きくする
- オプションバー内の「コンテンツに応じる」にチェックを入れる
- 画像を解析して空白部分を自動で埋めてくれる
- 画像の中の一部を移動、変形させたい場合
- コンテンツに応じた移動ツールを選択
- 画像の一部をエリア指定
- 画像内で移動、拡大縮小、回転などをかける
- 選択元の位置は画像に応じて塗りつぶされ、移動先の部分のみが残るように編集される
8-Ps)フォント周りのTips
- 元のフォントのわからない画像を開く
- 元の画像に合わせて、同じ内容のテキストを適当なフォントで配置しておく
- 2のテキストを選択ツールで選択している状態で、書式→マッチフォントを選び、調べたいフォントをエリアで指定する
- フォント解析後にフォントの候補を選択すると、2のテキストのフォントが変更される
9-Ps)スマートオブジェクトに配置する
- バリアブルフォントの紹介
- フォントを選択する際、種別に「VAR」と書かれたフォントは「線の太さ」、「幅」などが感覚的に変更できる
- 各スマートオブジェクトを、属性パネルの「コンテンツを編集」で開き、これまで作成した画像を配置して保存
- ライブラリパネルからロゴマークを配置
- ライブラリの変更したいグラフィックをダブルクリックし、色や形などIllustrator上でオブジェクトを編集すれば、リンク配置されたPhotoshopのオブジェクトも差し代わる
- レイヤーやアートボードを選択する。複数の場合はコマンドを押しながら書き出したいものだけを選んでおく
- 右クリック（副クリック）し、「PNGとしてクイック書き出し」や、「書き出し形式」で開くと、選択しておいたものだけが書き出し候補に表示される
10-Ai)配色や書き出しのTips
- ファイル内で色を差し替える
- 変更したいオブジェクトやテキストを含む状態で選択する。エリアや全選択でも良い
- プロパティパネルの「カラー変更」をクリックし、「オブジェクトを再配色」のダイアログで「現在のカラー」と「新規」いある色を好みでドラッグして指定すれば、スウォッチの指定など色が丸ごと入れ替わる
- スマホのメニューを開いた状態やモーダルウィンドウのレイアウト
- 背景に同じデザインを入れる場合、元となるオブジェクトを全て選んでグループ化
- グループ全体にアピアランス→パスの変形→変形で「水平方向」に移動させ、「コピー」に必要な数を指定して複製する
- アセットの書き出し
- アセット書き出しパネルに複数のオブジェクトをドラッグすると、グループごとにアセットを登録してくれる
- マスクされたオブジェクトは余白が入ってしまうため、一度ライブラリに登録する
- ライブラリからファイル上に配置したものを、改めてアセット書き出しパネルに登録すると余白のない状態で書き出せる
