第21回リクリセミナー「Illustratorで作ろう！10倍ラクするWebデザイン」に行ってきた

第21回リクリセミナー「Illustratorで作ろう！10倍ラクするWebデザイン」に行ってきました。
イラレに苦手意識があるのと、「これからのサイトデザイン制作には（ベクター画像関連で）イラレを使うと便利なのかなぁ？」と思っていたところだったので、ベストタイミングでした！！

地味に効くillustratorのテンプレート

あわゆきさん。
ラインスタンプ寿司ゆきの人です。

相方さんがイラストを書くので、ラインスタンプ作ると張り切っていますw　本も買います♪

ラインスタンプについて

● つくる画像は42個

● 1ファイルで１セットつくる（あわゆきさん流）
→　販売・使用時を想定したレイアウトにできる
→　アイテムの見比べ、テイストの統一ができる

● アートボードを活用する
→　アートボードごとの全選択ができる。
メニューの[選択] → [作業アートボードのすべてを選択]、ショートカットは⌘ + option +A（Ctrl + Alt + A）
→　アートボードごとに定規を設定できる。
→　書き出し機能を使ってそれぞれを別々に書き出せる。

イラレの書き出し主に二つある。
【選択１ 】
スライス・ウェブ用に書き出し・・フォトショップと同じように書き出し。でも…スライスが使いづらいという難点。
【選択２ 】
アートボード・・ファイル名に一癖ある…けど、そこさえクリアすればOK!

● しょーもないミスでリジェクトは嫌だ（ラインスタンプ規定をクリアしよう！）
→ 規定を確認⇒  補助的なテンプレートレイヤーで対応
→ 四辺の余白確保
→ 透過処理のミス回避など　物理的な制約はクリアする工夫。

● 登録データの準備
毎回準備するのは面倒→　テンプレートファイルをつくっておくと便利！

① テンプレートを作ろう！
•「新規オブジェクトをピクセルグリッドに整合」のチェックは外す
• いらないプリセット素材は捨てる（ファイル容量のダイエット）、シンボル、グラフィックスタイル、ブラシ、スウォッチの中でいらないものは捨てる
• 長方形ツールを水平方向にコピー水平方向にコピーの方法
• 垂直方向にもコピー
• だーっとコピーしていって４４個の長方形ができる。一番上の行右二つを消す
• 全部選んでオブジェクトメニュー⇒ アートボードに変換

→ 42個のアートボードができる。

• これをテンプレートして保存する
（ファイルメニュー⇒テンプレートとして保存）

→ これで、新規で作成する際は、「ファイルメニュー → テンプレートで開く」で、とっても簡単。

② スクリプトで書き出し
• 使える言語　javascriptなど３種。
• コードを書くと、仕様に適した書き出しを行える。
つまり、アートボードの書き出し時の一癖を解決することが出来る。

あわゆきさんのサイトを偶然見つけました。
テンプレートもダウンロード出来るようですよ。ありがたいですねぇ
参照：はてゆき

WEBで使うillustrator

鷹野雅弘さん
webでイラストレーター

「Illustratorで作ろう！10倍ラクするWebデザイン」を本屋で見て、Amazonでチェックして、もともと買おうと思っていたのですが、今回セミナーに参加して「あぁ、これは絶対に買いだな」と決心しました。

マルチデバイス時代のためのイラストレーター活用

★ウェブ向けにイラストレータを使うときに必ず設定
•　カラーモード・・RGB
•　プロファイル・・web
•　新規オブジェクト・・オフ
•　ドキュメントのラスタライズ設定・・72dpi
•　ピクセルプレビュー・・オン
•　ポイントからピクセルに変える
補足：1pxの線を引く場合、線のフチを内側・外側にすることができない。
線幅ツールでダブルクリック操作。
線の変形を使う。

聞いたままのメモ書きなので、しっかりした情報を検索しました。

参照）IllustratorでWeb向け、ピクセルベースの作業を行う上での設定（完全版）

本を買ったら確実だと思いますが、上記のサイト様に設定が掲載されていました。

★マルチデバイス対応で押さえておきたい。
① phablet
② スマホといっても10000以上の種類がある
③ HiDPI高密度化　高密度ディスプレイ（retina display）

今までの作り方＝ ピクセルパーフェクトでつくるのは無理がある。
ビットマップ画像 ＝ jpg、png、gif

[脱ビットマップ]
CSS3
SVG
webfont

① SVG（拡張子）・・ベクター形式で書き出せる
拡大・縮小しても画像が粗くならない！
しかぁ〜し！　IE6、7、8 未対応　→　フォールバック 設定をする必要がある！

②大抵のものは、CSS3で表現できる⇒ フォトショップでやる必要ない。
•　角丸
•　不透明度
•　ドロップシャドウ
•　グラデーション
等

③アイコンフォント
Font awesome
prefectly
stackicons
等

●　イラストレーターの使いどころがたっくさん！（とりあえず自分用の本気メモ書きです。すんまそん）
•　文字に対して形状変換
•　カラーバリエーションの変更
•　9スライス　参照）角丸を維持したまま、変形させる方法
•　文字タッチツール
•　モザイクオブジェクト
•　画像トレース

●　イラレでワイヤーフレーム
段組み設定とアクションを使って、楽にワイヤーフレームを作成