weblovelog

ウェブ業界人のためのウェブ情報サイト。

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

      2014/12/05

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

tes

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

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


Adobe pinch inでもイラレでサイト制作入門講座をやっていたそうです。
基本的にイラストレーターで制作活動を行っているそうですよぉ〜(寿司ゆきのデザインがとっても可愛かったです)

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

ラインスタンプについて

● つくる画像は42個

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

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

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

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

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

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

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

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

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

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

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

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スライス 参照)角丸を維持したまま、変形させる方法
• 文字タッチツール
• モザイクオブジェクト
• 画像トレース

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

 

 - DESIGN, Illustrator, WEBで副業, セミナー

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事