• JOIN US ON SNS
  • 株式会社monomode
    私たちは札幌・東京を拠点に活動するWEB制作、ホームページ制作会社です。WEB制作やネットショップ制作など、ウェブデザインの提案を主に、ポスターやパンフレットなど印刷物の制作も行っています。

IllustratorでWEBデザインをする為の設定をしてみる&トライしてみる。

IllustratorでWEBデザインをする為の設定をしてみる&トライしてみる。

今までWEBデザインをする際には、Photoshopを利用されている方々がほとんどだったかと思います。

そう、WEBはPhotoshopで紙はIllustrator。みたいなイメージでした。

Illustratorをチラシやポスターなどの製作のみに使っている方が多いですよね。

まれにずっとIllustratorですが。みたいな方もいるようですが。

 

今、WEBデザインのトレンドは影やディティールを簡略化して表現するフラットデザインが主流です。そんな流れもあって、かなりIllustratorでのWEBデザインをする方が増えているらしい。

 

そこで今回は、まずIllustratorでWEBデザインをどんな風にやるのか。

どんな設定がいるのか。

 

実際にやってみました。

 

 

まずWEBデザインをするにあたって確認したいこと!

 

・単位はピクセル(px)で。

・カラーはRGBで。(紙媒体ではCMYKを使いますよね)

 

じゃあ、この条件でまず作ればいいと!そんで次は・・・

 

 

WEB制作用に実際に設定してみる!

そのままでは紙媒体を製作する為の設定になっているかと思いますので、設定を変えていきます。

まずページを作るために・・・

 

新規ドキュメントで設定

Illustrator

 

単位、カラーモード、ラスタライズ効果、プレビューモードを上記の画像の設定にします。

「新規オブジェクトをピクセルグリッドに整合」にチェックを入れるのもお忘れずに。

 

ワークスペースをWEB用にするのもOK

ここは自由にカスタマイズしてもいいかと思いますが、一応WEB用のワークスペースも用意されています。

Webデザインをするために使う頻度の多い、パネルのセットが表示されます。

右上の角の方にあるプルダウンですね。

 

2

 

環境設定もWEB用にしよう!

3

 

左上のメニューの一番左上にある、Illustratorをクリック。

そこから環境設定>一般へと進みます。するとウィンドウが立ち上がるので左側に並ぶ項目を幾つか設定します。

 

・一般:キー入力→1px

・単位:すべて1pxに設定(一般、線、文字、東アジア言語のオプション)

・ガイド・グリッド:グリッドを1pxと、分割数を1

 

 

こんな感じで、まず上記の内容を設定するところから製作をはじめればOK、Illustratorの方がフラットデザインでWEBサイトを作りやすいかと思いますので、是非是非お試しあれ。

 

ちなみにAdobeのサイト上でもIllustratorでWEBサイトをデザインするためのチュートリアルが公開されています。

細かいトコロまで説明があって、オススメです。

 

http://www.adobe.com/jp/jos/pinchin/start.html#ai

この記事が気に入ったら
いいね ! しよう

Twitter で
The following two tabs change content below.
五十嵐翔太

五十嵐翔太

代表の五十嵐です。 デザイナー、フロントエンドエンジニアを得て創業しました。 好きなことは食べることと人間観察、猫とあそぶこと。

関連記事

  • RSS rss
  • feedly FEEDLY Feedlyで追加する
mautic is open source marketing automation
ページトップへ戻る