フォローアップ

2015年7月11日に開催したCSS Nite in KOFU, Vol.5のフォローアップです。

最終更新日: 2015年07月16日

ご参加ありがとうございました。

ダウンロード

Illustrator

Photoshop

その他

Illustratorセッション

Webで使うIllustrator

断片化

CSS3

SVG

Illustrator

シンボルフォント(アイコンフォント)

Web Fonts

その他

スクリプト

フォント

対応バージョン

それぞれの機能のバージョンごとの対応表です。

パッケージ Creative Cloud版
CS3 CS4 CS5 CS6 CC CC
2014
CC
2015
ボタン [形状に変換]効果
ライブカラー
9スライス ×
文字タッチ   × × × ×
サイズやフォントなどの記入 Specctr × × ×
specify.jsx
トレース モザイクオブジェクト
ライブトレース × - - -
画像トレース × - - -
Canvas Ai->Canvas
ワイヤーフレーム 段組設定
アクション

アピアランスで作る座席表

ちょっと話題に出た「アピアランスで作る座席表」について解説します。このようなものを作りたい場合、1セットだけ作り、

アピアランスで[変形]効果の[移動]と[コピー](複製数)の繰り返しを二度がけすることで実現できます。

アウトラインモードにすると、ひとつしかありません。

ちなみに、元になるセットはシンボルで作成しています。アピアランスを分割を行うと、シンボル(インスタンス)の集合になります。たとえば、部分的に“2人がけ”にしたい場合、グループ化を解除してから、 コントロールパネルの[置換]でシンボルを入れ替えることで対応できるのです。

サンプルデータ(Illustrator CS4形式)

Photoshopセッション

Photoshopセッションでは、次のような内容を行いました。

切り抜きと塗り足し

切り抜きや合成を行わずに、横長の画像を正方形で使えるようにする(5秒)

 

(撮影していない)写真の余白を伸ばす(5秒)

 

ふさふさ感を保持しながら切り抜き(10秒)、ラクダの首の位置を変更する

 

変数を使ったバナー作成とスライスいらずの書き出し

異なる大きさのバナーをスピーディに作成する(2分)

  

コピーなどを瞬時に変更する(10秒)

それぞれのバナーをスライスを使わずに書き出す(10秒)

リンクされたスマートオブジェクトとレイヤーカンプを使ったコンポーネント管理

共通パーツを修正しやすいように一元管理する(カテゴリによって異なるグローバルナビゲーションのカレント表示(You are here)にも対応できるように)(2分)

対応バージョン

それぞれの機能のバージョンごとの対応表です。

パッケージ Creative Cloud版
CS3 CS4 CS5 CS6 CC CC
2014
CC
2015
コンじる コンテンツに応じて拡大・縮小 ×
コンテンツに応じて塗りつぶし × ×
カンバスの拡張 カンバスサイズ(数値指定)
切り抜きツール(ドラッグ操作)
選択 透明部分以外を選択
(サムネールをcommand+クリック)
クイック選択ツール
クイックマスク
切り抜き 境界線を調整
バナー作成 変数
スマートオブジェクト
レイヤーボックス
(レイヤーグループへのレイヤーマスク)
複数ページの
管理
リンク配置 × × × ×
レイヤーカンプ

リンクされたスマートオブジェクトの
レイヤーカンプの変更

× × × × ×
[リンクされたアイテムに変換]
([属性]パネル)
× × × × ×
アートボード × × × × × ×

質問への回答

アンケートやセミナー終了後にいただいた質問をこちらに記載します。

『Webデザインの現場ですぐに役立つ Photoshop仕事術』

2015年3月に発売。

書名の通り、Web向けの内容です。

『10倍ラクするPhotoshop仕事術』

『10倍ラクするIllustrator仕事術』の兄弟本として、2015年秋に発売予定。

『10倍ラクするIllustrator仕事術』(増強改訂版)

『10倍ラクするIllustrator仕事術(増強改訂版)』のサポートサイトがありますのでご利用ください。読者登録というシステムがあるのでご利用いただければ幸いです。

コリスにてご紹介いただきました。

コンタクト

Facebookで友達申請をお送りくださるときには、ひとことメッセージをお願いします。

Web制作に関わる方のためのEL-J(エル・ジェイ)というメールマガジンを発行しています。