Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Illsutratorでのウェブデザインワークフロー例の紹介

No description
by

Masahiko Kawai

on 3 April 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Illsutratorでのウェブデザインワークフロー例の紹介

1997年開設(今年で19年目!)
Illsutratorでの
ウェブデザインワークフロー例
の紹介

第1回 D2D WEBグラフィックツール今昔
~デザインワークフローの転換~
2016-4-2
川井昌彦
川井昌彦(かわいまさひこ)
東京の制作会社で24年間勤めた後、
京都府舞鶴市に帰郷してフリーランスで活動中
Cherry Pie Web
http://www.cherrypieweb.com/
写真・画像加工
ロゴ・地図
レイアウト
図形
文字
写真・画像加工
ロゴ・地図
レイアウト
図形
文字
Aiは、HTML+CSSとの親和性が高い
画像が「リンク」で配置できる
(画像も、ドキュメントの解像度に依存しない)
スタイル機能は、外部CSSに考え方が近い
スウォッチ
段落スタイル
文字スタイル
グラフィックスタイル
アピアランスは、CSSで表現できる(画像書き出ししない)
画像の書き出しだけでなく、
HTMLで表現する部分のデザインもできる
Fireworks使用時
Fireworks開発中止
Ps、Aiも使用していた
Fwの代わりにAiを使用
Cherry Pie Web
ここからは、

 実案件のIllustrator制作データを

           お見せします!

大人の事情で、
公開スライドでは
実データは
お見せできません。
ご了承ください

なぜ、Illustratorを使うのか?
元々は、Fireworksを使っていた
2012年公開の
記事なのに、
今でもはてブが
増え続けています
昔話は、
懇親会で
自己紹介
 スタイルは、class に対応する

段落スタイル、文字スタイルで指定できるもの
  font-family, font-weight, font-size, color, font-style, letter-spacing、
  text-align, line-height, text-indent, margin

段落スタイル → ブロック要素(p など)
文字スタイル → インライン要素(span、strong、em など)
段落スタイルに文字スタイルを重ね掛けする

グラフィックスタイル
  background、border、border-radius
  グラデーションは、backgroundのgradient
スタイルとcssの関係
昔話は、
懇親会で
ご希望の方には、
 あとで、「Fireworksならでは」の、
  テーブルレイアウトデータをお見せします!
ご清聴、

ありがとうございました。
イラレの設定を、Webデザインに適した設定にしておく
  プロファイル:Web
  詳細設定:プレビューモード:ピクセル
       新規オブジェクトをピクセルグリッドに整合:「しない」

段落スタイルに、すべてのベースとなる基本のスタイルを設定し、
  その他の段落スタイルは、基本スタイルを複製して作っていく。
設定内容は、bodyタグに設定する文字関係のCSSと同じものを設定
font-family、font-size、font-weight、line-height、color など
文字変形、カーニング、トラッキングは設定しない
日本語組版機能は使わない
  禁則処理:「なし」、ぶらさがり:「なし」、文字組み:「なし」
  (おかしな詰めや空きが入らないようにするため)

・設定で、単位、キー入力など数値に関わるものは、すべて「1px」の単位に修正
制作前の注意点
アートボードはデバイスごと(PC、スマホなど)に用意し、
bootstrapのグリッドをガイドとして配置しておく

配置画像は、すべてPSD(編集可能データ)にしてリンク
埋め込み画像はドキュメントが重くなり、修正等が面倒
画像の修正は、すべてPhotoshopで行う
Retina対応を考えるなら、高解像度のものをリンクしておく

レイヤーはHTMLの入れ子を意識してまとめる
body、article、section、div(container、row、col)、p など

スライスは一つのレイヤーにまとめる(重なるスライスの前後面を操作しやすい)

HTMLにする部分には、すべての文字に何らかの「段落スタイル」を適用する
(bodyタグのcssが適用されているという考え)
制作のポイント(1)
CSSプロパティパネルから、コピー&ペーストでCSSが得られる
  (アピアランスは、CSSプロパティパネルからは得られない)
  (角丸は、アピアランスではなく「変形」を使う)

スライスが重なっている場合は、
  書き出したいスライスを最上位に移動してから、そのスライスを選択して書き出す

スライス時に書き出しサイズを変更できる
  (x2 を同時に書き出すことは、今のところできない)
書き出し、コーディング
スウォッチは、「グローバル」で使用する

デザインの統一と効率化や漏れ防止のために、スウォッチ、段落スタイル、
文字スタイル、グラフィックスタイルを積極的に使用する

CSSで表現できるなら、極力スライスで書き出さないことを考える

文字を画像で書き出す部分のスタイルには、
文字の変形、カーニング、トラッキング、日本語組版などを使用してもいい

※文字詰めを自動で行いたい場合は、次の設定を推奨します
使用フォント:OpenTypeフォント
カーニング:自動
OpenType機能-プロポーショナルメトリクス:ON
※イラレでは、カーニングに「オプティカル」は使わないほうがいいです
制作のポイント(2)
そのかわり、

実データを見ながらお話したこと、

質疑応答でお話したこと、

当日お話しできなかったこと

について、書き出しておきます。
Full transcript