フォローアップ(参照リンク)

2014年12月3日に開催のCSS Nite in KOBE, Vol.4での『10倍ラクするIllustrator、Webで使うIllustrator』セッションのフォローアップです。

最終更新日: 2014年12月05日

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

ダウンロード

お知らせ

質問への回答

アンケートでいただいた質問への回答。ほかにあれば、こちらからご連絡ください。

Fireworksのデータを(Illustratorで)引継ぎできますか?
残念ながらできません。Fireworksから「別名で保存」で「Illustrator 8.0」を選択できますが、配置画像は抜け落ちてしまいます。なお、「FXG」というフォーマットが存在し(まだFireworksにあります)、Illustratorとの互換性が取れたのですが、現在のIllustratorではきちんと動きません。
「Web系の人がFireworksで作った図版が来ちゃった」ときの対処法 - DTP Transit(Illustrator, Web制作, イラレ)
縦中横で使いやすいOpenTypeフォントを教えて欲しい
何をもって「使いやすい」のか、逆をいうと、現在の問題点を具体的に教えてください(どのフォントで、どのような状況になってしまうのか)。
PostScriptの一番のメリットは?
質問の意味がわからないです。
取説で表の中に文字をど真ん中にハメるのに良い方法がわからず苦労しています。
Illustratorで、ということでしょうか? Illustratorでの行はポイント、表の行間はmmで指定することが多いのですが、ポイントとmmは割り切れないため誤差が生じます。これに起因する問題でしたら、こちらのエントリーをご覧ください。
Illustratorの作業では電卓を使ってはならない(たとえば行送りの計算) - DTP Transit(Illustrator, イラレ)
いま、スマホ最適化サイトをつくるとき、Fireworksで640pxの画面設定で作成していますが、イラレの場合は320px 画像アセットx2で作成していればOKと考えて良いのでしょうか?
画像アセットx2は、Photoshopの話ですので、Illustratorでピクセルベースで制作されるのでしたら、Fireworksと同様に640pxで指定します。ただし、本日「断片化」で触れましたように、幅320pxを想定して作業すると「余る/足りない」が出てしまうと思うのですが…
PhotoshopとIllustratorをどのように使っていくか、具体的なところを知りたい。
サイトデザインをするとき、AiかPsのどちらで作られますか?  Psだとスライスがラクだという話でしたが、ボタン等はAiとのことでした。Aiでパーツを作り、Psでレイアウトしていく感じでしょうか?
非常に悩ましいですね… いわゆるリッチな作り込みの部分でPhotoshopの方にアドバンテージがありますが、本日ご紹介した中では「1文字ごとに遊ばせる(文字タッチ)」「英数字やカナに異なるフォントを組み合わせてコピーの表情を変える(合成フォント)」「スピーディにワイヤーフレームを作成する」あたりは、Illustratorならではです。そこで[A]パーツによってはIllustratorで制作し、Photoshopに貼り込む。[B]フラットデザインを前提にIllustratorをメインのツールにする[C]そもそも、IllustratorやPhotoshopで作り込まない(ワイヤーフレーム程度は作成しつつ、インブラウザーで作っていく)、の3つのシナリオが考えられます。
1ピクセルのにじみの話がついていけなかった
改めてビデオをご覧いただきながら手を動かしてみてください。Web向けにIllustratorを使う上でのコロンブスの卵的なアプローチ - DTP Transit(CC, CS6, Illustrator, Web制作, Web制作で使うIllustrator, dot-ai, セミナー, イベント, 展示会, イラレ)も参照してみてください。
なお、改めてまとめますと「Illustratorを適切に使えば、ピクセルベースの作業も可能。しかし、ちょっと面倒だし、わかっていない方との共同作業は悪夢。そもそも、ピクセルベースでの作業が、今後も必要なのかを見直すタイミングですよね」というのが本日のセミナーの趣旨です。

参照リンク

Webで使うIllustrator

Photoshop

断片化

CSS3

SVG

Illustrator

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

Web Fonts

その他

ビデオ

パスワードは「yrgxNx32orDVgU」です。

パート1

パート2

パート3

ご参考

2013年6月に開催されたdot-ai, Vol.1「超絶アピアランス祭り」の『アピアランスとグラフィックスタイル、総復習』セッションのビデオです。

アピアランスとグラフィックスタイル、総復習/鷹野 雅弘、石嶋未来 from indd-jp on Vimeo.

 

2013年11月のCSS Niteでのスライドです。

「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」鷹野 雅弘(スイッチ) from swwwitch, inc.

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

『10倍ラクするIllustrator仕事術(増強改訂版)』という書籍を執筆しました。

「ベテランほど知らずに損してる効率化の新常識」というサブタイトルがついていますが、中級者を対象に、基本操作はバッサリと掲載しない、というユニークな切り口です。

書店で見かけたら、ぜひめくってみてください。

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

コンタクト

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

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