• ベストアンサー

この1pxは何とかならない物でしょうか?

どうすれば綺麗に出来るのでしょうか? Illustratorを使ってデザインを書いているのですが、それらをWEB用にスライスを使用して書き出しています。 しかし、デザイン作成中と、スライス処理後でサイズが異なってしまいます。例えば100px×100pxのイラストを描いてWEB用にスライスで書き出すと、サイズが101px×101pxというような感じで、大体1~2pxほどサイズが変わってしまいます。自動で作成されるテーブルのせいなのでしょうか? これはどう対処をすればいいのですか?あらかじめ予想して1px位小さく作成するんでしょうか? また、WEBページで100px×100pxのテーブル内にぴったりと画像を挿入するには100px×100pxで作ればよいのでしょうか?それとも99px×99pxでしょうか?ボーダーなどでも変わってしまうのでしょうか? これらの解決法をご存知の方は、宜しくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • renton
  • ベストアンサー率34% (1720/4934)
回答No.1

質問する時は、バージョンも書いた方が良いですよ・・・ Web用に保存で、右側にある「画像サイズ」で「アートボードサイズでクリップ」にチェックを入れて「適用」ボタンを押してみてください。 設定しているアートボードのサイズで綺麗に出力が出来ます。 もしくは、PSDで書き出しておいて、Photoshopで調整してから出力でも良いかもしれません。

yuyukina
質問者

お礼

rentonさん、ありがとう御座います。 なるほど、そういう作業を行わないといけないんですね、さっそくやってみます。

その他の回答 (3)

noname#107580
noname#107580
回答No.4

こんにちは! まず、環境設定で単位をPXにします。 それと線幅のサイズの計算は入っていますか? 例えば、デフォルトの状態(線幅1px)で長方形ツールで100×100PXで四角を描画します。 (変形パレットでは四角のサイズは W:100px、H:100px となっています) その四角を選択した状態で【オブジェクト】→【スライス】→【選択範囲から作成】でスライスします。 (変形パレットで確認するとそのスライスのサイズは101×101px になっています) これは1px の線幅の両サイドの線が0.5pxずつはみ出しているからです。 それ以外ですと・・ちょっと思いつきません・・ 私の環境では、100×100PXのスライスで書き出せば、100×100PXになっています。 >あらかじめ予想して1px位小さく作成するんでしょうか? これはないと思います。 >100px×100pxのテーブル内にぴったりと画像を挿入するには100px×100pxで作ればよいのでしょうか?それとも99px×99pxでしょうか? テーブルサイズが100px×100pxであればボーダー、セルどうしの間隔、セル内の余白などによって変わってきます。 セルのサイズが100px×100pxであればボーダーとセルどうしの間隔は関係ありませんが、セル内の余白(cellpadding)は0にしないとぴったりになりません。

yuyukina
質問者

お礼

yayopixさん、ありがとう御座います。 これから色々試して見たいと思います。

noname#22328
noname#22328
回答No.3

Photoshopをお持ちでしたら、Photoshopに移し替えてWEB用に保存したほうが良いです。 私はいつもそうしてます。 Illustratorって、DTPソフトだから、WEB用に書き出すのに向いてないみたいです。 ただ100pxの塗りつぶし四角に、線を1pxつけた場合は、 100px+0.5px+0.5px=101pxになるので、丁度、症状を再現しますね? 100pxの四角で1pxのラインでふちどりたいなら、99px。 2pxのラインなら、98pxってことになるかな? ラインの無い状態で、書き出されるサイズを確認してみて下さい。 それとピクセルプレビューモードで作業されてみて下さい。 ピクセルプレビューモードについては、イラストレーターのヘルプに詳しく書いてあるのでご参照下さい。

  • neralies
  • ベストアンサー率20% (2/10)
回答No.2

答えになっていないかもしれませんが、 イラレはDTP用のソフトという面が強いので Fireworksに変えて、同じように制作してください。 ピクセル単位の調節や描画ができます。

yuyukina
質問者

お礼

ありがとう御座います。 Fireworksですか、一応イラレで何とかしたいと考えていますので・・・。

関連するQ&A

  • イタストレターからHPは出来ますか?

    イラストレターCS3でWEBページのデザインをしました。 スライスしても鮮明な画像が、表現できません。 更に、綺麗に区分したスライスが出来ません。 全部、同時にスライスしてよろしいでしょうか? もし、イラストレータできれいなWEBページが出来るのなら その方法を教えてください。

  • 左100px 中100% 右100px

    CSSを利用して、 左100px 中100% 右100px とし、 中のサイズはブラウザのサイズを変更しても変わらないようにしたいのですが、 floatやmarginなどを駆使しても 左 中 右 のように回り込んでしまったり、 中のサイズが文字数分だけしか幅が広がらなかったりします。 テーブルなら簡単にいくのですが。。。 CSSだけで 左100px 中100% 右100px のデザインを描画するのは可能でしょうか?

    • ベストアンサー
    • CSS
  • イラストレーターCS2のスライスにつきまして

    こんにちは。 例えばイラストレーターCS2で色・塗りなしで100px×100pxの四角を作ってスライスを作成すると、若干ですが大きくなります。その度にスライスの分割で分割している状態です。(Macです) ちゃんと決めたサイズでスライスを作成する方法はないのでしょうか? 初心者のヒヨッ子ですが、宜しくお願い致します。

  • WEBデザインの際の画像作成について

    WEBデザイナーとして働き始めたばかりの初心者です。 普段、イラストレーターでWEBサイト全体のデザイン→スライス→コーディングという流れで仕事をしています。 イラストレーター上でデザインをしているときに、写真画像などを配置するときがあります。 そのとき、フォトショップを使い、色調補正などをしてからイラレに配置して全体のデザインをしていくのですが、その配置する画像について質問です。 この画像は フォトショップ上で実際に使うサイズにしてからイラレに配置 ↓ イラレでスライス が良いのか、 フォトショップでは補正などのみで、サイズは触らず、イラレ上で配置 ↓ イラレ上で実際に使うサイズ調整 ↓ スライス のどちらが良いのでしょうか? スライスで書き出された画像は後述の方が綺麗に感じたのですが、 皆さんはどのように画像を作成されていますか? また、 イラレ上のオブジェクトをスライスして書き出し もしくは イラレ上のオブジェクトを一旦フォトショップにコピーしてから書き出し とどちらのほうが画像が綺麗に書き出されるでしょうか? こちらも後述の方が綺麗に書き出されるような気がするのですが・・・。 皆さんはデザイン→スライスの際はどのような手順でされているでしょうか? よろしくお願いします。

  • スライスで困ってます。

    独学でwebの勉強をしているものです。 普段はフォトショップでデザインを作り、それをスライスしてHTMLで組み立ててます。 先程デザイナーさんからイラストレーターのデーターを貰い、それをスライスしてHTMLで組み立てて欲しいとのことなんですが、、、 恥ずかしながらイラストレーターは地図やイラストを描くのに使用する位であまり慣れておりません。 イラストレーターでスライスしてみたのですが、どうも使いづらくて時間がかかってしまいます。(綺麗にスライスができませんTT隙間ができてしまったり、スライスの表示ボックス?が見えにくかったり・・・) なので、イラストレーターのデータをフォトショップでスライスする事は可能でしょうか? この場合は、そのままイラストレーターでスライスした方が良いのでしょうか? アドバイスのほどお願いします。 駄文で申し訳ございませんが、非常に困ってますので宜しくお願い致します。

  • Illustratorで作成、pngで保存するとサイズが変わる

    Illustratorでイラストを作成しています。 例えば、新規ドキュメント縦100px×横100pxで作成します。 イラストはこのドキュメントに対し、横長のイラストです。 実際のイラストは、縦80px×横100pxぐらいとします。 「Web用に保存」で設定は「PNG-24」、背景を透過させるため、透明部分にチェックを入れています。 この時、ドキュメントは縦100px×横100pxの正方形で作成しているのに、PNGで保存されたファイルは縦80px×横100pxぐらいの横長になります。 これを、縦100px×横100pxの「PNG-24」(背景透過)で保存するにはどうしたら良いのでしょうか? なお、イラストのサイズは変えたくありません。 初歩的な質問ですが、よろしくお願い致します。

  • テーブルの隙間を無くしたい

    DreamWeaverCS4を使いホームページを作成しております。そこでテーブルについて、狙い通りに上手く表示が出来なくて困っております。どなたかご指導アドバイスをお願い致します。具体的な内容は下記のとおりです。 ・テーブルを「7列2行(全体の大きさは横700px×縦100px)」で作成し、内訳は1行目は、一枠横100px×縦50pxの大きさで7枠作成。2行目は横700px×50pxで作成。 上記内容のテーブル1行目に横100px×縦50pxのサイズの画像を7つ挿入。そして2行目には横700px×縦50pxの画像を1つ挿入しました。 そしてテーブルの設定は「ボーダーは0」です。 しかし、画像挿入後には2行目の画像横700px×縦50pxが入っているテーブルに隙間が出来て背景が見えてしまいます。1行目を見ると…微妙に各画像間の間に隙間が空いていて、この隙間が全体的に700pxを超えているようなんです。それで、2行目の画像に対して背景が見えて(テーブルの幅が広がってしまっています)いるのです。 そこでですが、画像を配置後にテーブルの隙間をきっちりと無くして背景が見えなくする方法ってあるのでしょうか? 解る方がいましたら…ご指導…アドバイスをお願い致します…。よろしくお願い致します…。

    • ベストアンサー
    • HTML
  • cssでテーブルで細い線

    スタイルシートを使って 1ピクセルの細い線にしようと、 サンプルのように以下のようにしてみましたが 中の線(td?)が二重になってしまいます 一線にするのにどのようにすればイイですか? ―――――――― .table2 { width: 400px; /* テーブルの横幅 */ border-collapse: collapse; /* 枠線の表示方法 */ border: 1px #1C79C6 solid; /* テーブル全体の枠線(太さ・色・スタイル) */ background-color: #FFFFFF; /* 背景色 */ } .table2 TD { border: 1px #1C79C6 collapse; /* セルの枠線(太さ・色・スタイル) */ } ―――――――――――――― <TABLE CLASS="table2"> <TR> <TD>WebデザインA</TD> <TD>WebデザインB</TD> </TR> <TR> <TD>WebデザインC</TD> <TD>WebデザインD</TD> </TR> </TABLE>

    • ベストアンサー
    • CSS
  • イラレからWEBサイト

    大学の課題でWEBサイトの作成があるため こちらのサイトを参考にイラストレーターからWEBサイトを作ろうと考えました。 https://blogs.adobe.com/creativestation/web-start-illustrator-web-design-06-export-images しかしチュートリアルはこのページの画像のスライスで終わってしまっています。 イラストレータからHTMLやCSSまで書き出すことはできないのでしょうか? 画像のみを作成し、あとは位置などのHTMLやCSSの設定は 自分でコードを書かなければならないのでしょうか? この画像のスライスの後どうしたら良いのか教えていただきたいです!

    • 締切済み
    • CSS
  • テーブルの角を丸くして、立体的に

    先日、IEでも閲覧可能で、 テーブルの線を細くするスタイルシートを このように教えて頂きました。 このスタイルシートから、 テーブルの角を丸くして、 立体的にする書き方を教えて頂けると とっても助かります。 ------------ <!DOCTYPE html> <html lang="ja"> <head> <style type="text/css"><!-- table.WebDesign{ border-collapse: collapse; width: 400px;} table.WebDesign,table.WebDesign td{border:solid 1px #1C79C6;} --></style> </head> <body><div> <table class="WebDesign"> <tr><td>Webデザイン</td><td>Webデザイン</td></tr> <tr><td>Webデザイン</td><td>Webデザイン</td></tr> </table> </div></body></html>

    • ベストアンサー
    • CSS