• 締切済み

IllustratorをWebデザインに用に設定

IllustratorをWebデザインに用に設定したいと思います。カラー設定や環境設定等色々あると思いますが、一番困っているのは、定規やガイドがPhotoshopと異なり、10px単位でないことです。色々調べて環境設定の「ガイド・グリッド」の部分のグリッド10px、分割数10にしても、定規は72px単位、グリッドもずれています。何が原因でしょうか。設定してから新規ファイルを作成してみてもダメです。

  • CSS
  • 回答数3
  • ありがとう数3

みんなの回答

  • shockatz
  • ベストアンサー率80% (153/191)
回答No.3

No.1です。 こんなところで議論してもナニなんですが、あまりに見苦しいのでつい。 何か昔の常識話みたいな話が出てきましたが、Illustratorは、グリッドにあわせたラスタライズ＋スライスが可能になったCS4あたりから、Web制作では普通に使われていますよ。 CS5からはビットマップ吸着できるようになったので、Fireworksとほとんど差がなくなったし。今言っている話題はそのことですよ。 Canvas描画のことも。本当に何も知らないんだ（苦笑 Adobe CreativeCloudの内容くらいチェックしておいてください。 あと、SVGについても。Illustrator10には、SVG出力プラグインがついてましたし、CS2ぐらいまで普通に使えてます。当時、対応ブラウザがなかったですが、（プログラム開発で）帳票印刷するJavaアプレットやActiveXにSVGを扱うものがあり、けっこう使われてますよ。Illustrator使えば出来ないものはないんで当然です。 Inkscapeみたいな日本語もマトモに打てないフリーソフトを紹介するなんて、どうかしてません？

hpineh0913
質問者

お礼

自分で調べた時、たしかにバージョンアップしたときから機能が変わったみたいですね。あとは、DTPあがりの人はイラレ利用者が多いとも読みました。もっと色々勉強してデザインの幅を広げたいと思います！

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

＞Webデザイン用に 　の意味がいまひとつ分からないのですが、Illustratorは、ベクター画像を扱うソフトですが、Webで使用できるベクター画像はSVGかcanvasで、いずれもIllustratorでは？です。ベクター画像はpxではなく、自由に拡大縮小しても画像の縁がギャザーになることはありませんが・・。 　InkscapeというフリーソフトはSVGがファイル形式です。 　Illustratorで画像をweb用の作成するときは、保存する(書き出す)時にビットマップ(ラスター)画像ですこし大きめ(２倍程度--webで使用するとき200px幅なら、400px程度)にして保存するのが良いでしょう。(スマホなどは解像度が高いため、400pxの画像をwidth="200px"で貼り付けると良いです。印刷もきれいになります) 　また、もっと大きめにしてビットマップ(ラスタ)を専門にするPhotoshopなどで縮小するほうが効率的です。 　なお、ページ自体をIiiustratorで作成して切り分けてWebページを作成するのは、様々な理由でとてもまずいです。 　私は、Illustratorは、あくまでクライアントに完成イメージを伝えるためとイラストなどの画像を作成するために使用しています。 　

hpineh0913
質問者

お礼

したの方へのお礼と同じですが、今まではPhotoshopでデザインしてスライスしてきました。もっとグラフィックな要素を取り入れたようなサイトを作成したくて練習しようと思っていたのですが、フォトショと勝手が違うので戸惑ってしまいました。回答ありがとうございます！

  • shockatz
  • ベストアンサー率80% (153/191)
回答No.1

Adobe Illustrator CS6の話題ということでよろしいですか？ 自分もCS5.5から、AiをWeb制作ツールに使っています。 それ以前のAiではWeb制作を行ったことはありません。 ■ルーラ表示 ルーラ表示が10進でなくて困ったことは特にないです。前バージョンからずっとそうなので、こればかりは慣れるしかないかと。 ■グリッドのずれ ご指摘の内容が理解できません。自分のケースではぴったり合ってます。 描画オブジェクトの大きさが奇数ピクセルの場合、端点が0.5px単位でずれる、とかそういう内容であれば、ソフトの性格上いたしかたないと思います。 （Fireworksのように勝手に伸縮して合わせられる方が気持ちが悪いです） たしかPhotoshop CS6のシェイプ描画、「ビットマップに吸着」も同じではなかったですか?

hpineh0913
質問者

お礼

バージョンはCSです。バージョンによって機能は大きく異なると思いますので、記載漏れ申し訳ございません。今まで全体のデザインはPhotoshopで行っていたのですが、アイコンやイラスト、等もっとデザインの幅を広げたいと思って慣れないイラストレーターに戸惑っておりました。考え方がPhotoshopのままだったのがいけなかったのですね。自由に縮尺できるのですからあまりルーラやグリッドに合わせて考えない方がよさそうですね。ありがとうございました１

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • webのレイアウトデザインについて［勉強中］

    印刷専門のデザイナーですが、最近webサイトのデザインの仕事があります。 コーディングは外注なので、デザインだけIllustratorで作っているのですが、 やはり、ピクセル中心の概念を考えると、IllustratorよりPhotoshopでレイアウトした方が正しいですよね？ ひとつ聞きたいのですが、Illustratorでマージンを設定するとき、ササッと四角を描いて「ガイドを作成」をするんですけど、Photoshopで同じことできますか？ 定規から引っ張って作る、天地左右に永遠に伸びるガイドしか作成できないのでしょうか？ また、そうじゃないPhotoshop流のマージン設定方法があるのでしょうか。

  • イラストレータでの、ＷＥＢデザインをする場合

    イラストレータでの、ＷＥＢデザインをする場合 １ドット単位でデザインをいじりたい場合 たとえばボックスとボックスの隙間（ＣＳＳを使わないとして）を 5pxから6pxに変更したいとかの場合、 ベクター画像のイラレでは、どのようにして １ドット単位でいじるのでしょうか？

  • webサイトのデザイン方法について

    webサイトのデザイン方法について 自分はillustrator photoshop dreamweaverを使ってwebサイト制作を勉強しております。 最初に全体のデザインをillustrator上で作って、使用した画像を個別にphotoshop illustratorでgifなどのファイルに書き出してdreamweaverで組み立てています。 しかしこんなやり方は効率が悪いのではないかと不安になります。(illustrator上でデザインしても、その画像の大きさはdw上のメモ リを参考に大体で決定しています。） illustrator上でpx数を決定して、全くそのデザイン案通りに作業を進めていくような上手なやり方を知りたいです。 fireworksというソフトは持っているのですが使ったことがありません。 みなさんのデザインの行程を是非詳しく教えていただきたいです。 例えば、まずは、illustratorで　~px　×　~pxのドキュメントを新規作成して~~~という風に教えていただけたら幸いです。 fireworksを使っている人や使っていない人の両方の意見をお聞きしたいです！ よろしくお願いします！

    • ベストアンサー
    • HTML
  • イラストレーターで印刷用に作ったデザインをweb素材に使いたいのですが

    イラストレーターで印刷用に作ったデザインをweb素材に使いたいのですが、こういった場合は新たにweb用にピクセルで指定した新たなファイルを開いてそこにペーストするしかないのでしょうか？ たとえば、印刷用にmm単位でファイルを作ったが、 全てを、あるいは一部分だけを500px×500pxにしたいなんて事ができるでしょうか？

  • ベクター図形の辺が滲んでしまう（CS3）

    こんばんは。 名刺を作るにあたってIllustratorの環境設定を、 キー入力：0.5mm 単位：mm グリッド：10mm 分割数：10 グリッドにスナップ、にしていますが、 その設定で図形を作るとどの位置に置いても必ずどこかしらの辺が滲んでしまいます。 調べるとpxに関しては解決策が見つかるのですがmmに関しては見つかりません。 mmできっちり輪郭が出るようにするにはどのような設定がいいのでしょうか？ よろしくお願いします。

  • illustrator8.0の環境設定が立ち上げるごとに初期化する

    こんにちは。 illustrator8.0の環境設定が立ち上げるごとに初期化してしまいます。 何年も使ってますが、こうなってしまうのは最近のことで、「一般設定、単位・取り消し、ガイドグリッド」を自分設定にするのですが、PCを再起動しなくてもillustrator8.0を立ち上げ直すごとに初期化します。使用メモリは30000Kです。 ご存知の方がいらっしゃいましたら、よろしくお願い致します。 環境はMacintosh G4 OS9.22 illustrator8.0は7.0からのバージョンUPバージョン

    • ベストアンサー
    • Mac
  • Photoshopのグリッドの分割線の表示

    Photoshop CS5.1を使っています。 環境設定で、グリッド「20px：実線」分割「2」としています。 画面ではグリッドは20pxで実線が引かれていますが、分割線（10px単位で破線が出るはず）が表示されません。 検索してみたのですが、解決方法が見つけられませんでした。 お手数ですが、ご存知の方いらっしゃいましたら、ご回答をよろしくお願い致します。

  • illustratorのデフォルト表示を固定したい

    【現象】 Illustratorの表示（ガイド，透明グリッド，定規等のON,OFF）を設定しても，次回起動時には全て忘れている． 【要望】 デフォルトの表示方法を保存したい． 【環境】 Illustrator CS3 (for Win) 以上，お願い致します．

  • webデザインデータの作り方

    デザイナーをしているものです。 webサイトのデザインを制作するにあたって、コーダーの方にpsdのデザインデータを納品する場合、Illustratorで作ったデータ（webデザイン制作に関してのルールや設定などは守っています）をpsdに書き出してPhotoshopで最終調整（グループ分けやレイヤーの整理など）を行ったデータを渡すのは何か問題あるでしょうか？ 今まで、デザインデータは基本的にIllustratorで作っていたので、Photoshopで作るとなる倍ほどの時間がかかってしまいます・・・。 出来るだけコーダーの方に負担のないようなデータを作るにはやはり最初からPhotoshopで制作すべきでしょうか？

  • illustratorでコピーしてphotoshopに貼り付けるとサイズが変わってしまう

    Webパーツを作成する為に、イラストレーターでデータ作成をして、それをそのまま コピー→フォトショップにペーストしたのですが、ペーストするとなぜか イラレのデータより大きなサイズになってしまいます。 イラレ100px x 100pxが フォトショ210px x 210pxという具合です。 使用ソフト：illustrator cs3・photoshop cs3 環境設定も確認しましたが、・どちらも単位はピクセル指定(150pxで作成しています) ・イラレの環境設定→クリップボードのコピー形式にはどちらもチェックが入っています。 今までillustrator 10・photoshop 7　で作成していたときには特に問題なく同じ大きさでペーストできていました。 どこかの設定がおかしいのだとは思うのですが、詳しい方、どなたかよろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する