• ベストアンサー

イラストレーターのスライス作業

HPを作るときにボタンなどをイラストレーター9.0で 作成しています。いつもはボタンなどを一つづつ 保存し、HTMLをくむときにその画像を置きたい ところに一つづつおいています。 しかし、最近プロの方にちょっときいたのですが イラストレーターでボタンなどを全部配置してしまい その画像をスライスしてHPを作ると聞きました。 このようにHPを作るにはどのように すればよいのでしょうか? 教えてください。

noname#2997
noname#2997

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

  • ベストアンサー
  • dany
  • ベストアンサー率35% (27/77)
回答No.1

Illustrator9(以下IL)にはまだスライスの概念がなかったと 思うので、Photoshop6(以下PS)やFIREWORKS(以下FW)との 連携について話したのではないかと思います。 もしくはそういうPlug-inがあるのかも。 私がよくやる方法としては、そのサイトをFWで一枚のイメージ として作ってしまい、必要な部分だけスライスを作成して書き 出します。 ドットにこだわる場合や複雑な加工が必要な場合はPSで作り、 複雑なパスで作りたいときはILで作り、それぞれのファイルを FWに読み込ませ、スライスを設定して吐き出します。 スライスの概念についてはこのへんを http://www.siliconcafe.com/fireworks/text/04/003.html ILでも複数のスライスとしてではなく、トンボを単数のスライス(?) として扱うことが出来ます。 http://www.too.com/ec/tutorial/t2_2/ai9web1.html 下記のサイトではグラフィックソフトのチュートリアルがいろいろ あるので一度覗いてみるといいかもしれません。 http://www.too.com/ec/tutorial/index.html 余談ですが、FWからhtmlごと吐き出すことも出来ますが、自分の 思った通りの枠組みにならないので、画像だけを使うようにして います。結局最期は手打ち。:-) この他にも方法があるのかもしれないので、そのプロの方に 直接聞いてみるのがいいでしょうね。他の方法だったら ぜひ教えてください。:-)

noname#2997
質問者

お礼

丁寧なご回答ありがとうございます。 参考のURLも大変わかりやすかったです。 がんばって、いろいろちゃれんじしてみます。

その他の回答 (1)

回答No.2

専門家なのに回答に自信がないなんて、なんてひどい人。。。と思われてしまいますが、danyさんのお答えの中にAdobe ImageReadyという言葉が出てこなかったので、ちょっと書きます。 わたしはIllustratorで作った画像をコピーして、Photoshop5.5もしくは6.0にペーストし、Photoshop付属のImageReadyでスライスします。 もちろん、Illustratorで作った画像を使わない場合はその作業は省きますが。 スライスっていいですよね。表示が速いし。 ImageReadyでスライス、簡単でいいですよ。 ImageReadyでgifアニメを作るのはあまり好きじゃないけど。

noname#2997
質問者

お礼

ひどい人だなんて思わないですよ。 お答えいただいてありがとうございます。 がんばってやってみますね。

関連するQ&A

  • イラストレーターのスライスについて

    Illustrator CS3を使っています。 画像として書き出したいエリアをスライスで切り、「Webおよびデバイス用に保存」時に、切った各スライスにスライス名(ex. img01)をセットして、保存してgifなどを出力しました。 別途、修正が必要となったので、先述したデータに修正を加え、再度img01を書きだそうとしたら、スライス名が「ユーザ01」などのように初期の値に戻っていました。 こういう現象って皆様ありますか? 対象法ありますでしょうか?いちいちスライス名を入れるのが億劫で。。。

  • illustratorのコツ(整列やスライスなど)

    こんにちは。 illustratorでデータをもらったものをweb用にスライスして保存しようとしているのですが、普段Photoshopを使っているのでとても効率の悪いやり方しか出来ず時間ばかり掛かっています。 特に、Photoshopでは簡単に出来るのにイラレで同じ機能を見つけられない2点を質問させてください。 Photoshopは7 Illustratorは10 OSはwin XPです。 ■整列 ボタンの画像の上に「送信」と言う文字があった場合に 中央に整列させる方法 Photoshopだと、レイヤーをリンクさせて選択ツールで整列させると ボタン画像の位置は変えずに文字だけをボタン画像の中央に寄せることが出来るのですが、イラレで整列をすると 両方の画像が動いて、整列されてしまいます。 もとのいちまで移動させれば良いことなのですが、何か良い方法があればアドバイスお願いします。 ■スライス スライスツールを使ってボタン画像をweb用に保存したいと思ったのですが、線が2つ出てきたり、画像の線にピッタリにガイドを引いておいてもそのガイドに沿ったスライスがうまく引けなかったりして困っています。 とりあえずで保存してみたのですが、ピッタリ切り取れるときもあれば、1px余白ができたりすることもあります。 Photoshopではとても簡単にピッタリ切り抜けるのに・・ともどかしく 丸ごとPhotoshopにコピーしてみたりもしたのですが 色が少し違ったり1px大きくなったりしてしまいました。 違うソフトだから当然なのですが、同じAdobe製品で同じツールなのに結構使い勝手が違うように感じるので、何かイラレを使うときのコツみたいなものがあればと思っています。おすすめのサイトもありましたら合わせてアドバイスいただけると助かります。

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

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

  • イラストレーターでスライスし、ドリームウィーバーで編集するには

    イラストレーター10でホームページの外観を作り スライスを作成し、それをドリームウィーバーMXで編集しようと思っています。 ドリームウィーバーMXでテーブルを作成し、そのテーブルの中に入れ子の状態になるようにイラストレーターで作成したスライスデーターを配置するにはどうしたらよいでしょうか? アドバイスを宜しくお願いします。 もし、この方法自体が効率や仕上がり上、良い方法でないという場合も、ご指摘を宜しくお願いします。

  • イラストレーターのファイルをHTMLと画像で保存

    イラストレーターCS5 を使っています。 以前はイラストレーター10を使っていて、WEB用に保存したときに画像とHTMLも保存できたはずなのですが、CS5でスライスして、WEB用で保存するとき、「画像のみ」でしか保存できません・・・。 HTMLも一緒に保存することはできないのでしょうか?><

  • スライスした画像が表示されません

    おはようございます。よろしくお願いいたします。 HPビルダー9.0でHPを公開しています。今回TOPページをリニューアルしようと思い、ページ全体をPhotoshopで作りスライスして、画像とHTMLファイルで保存しました。これをアップロード後ブラウザで開いてみると、画像がまったく表示されません。表示されるのはスライスしたラインと各々の赤い×だけです。ビルダーのプレビューではまったく問題なく表示されます。どうしてでしょうか? スライスを保存する時、フォルダー内にimageというフォルダーが新しく作られ、この中にスライスした画像が保存されるため、この画像も全てローカルフォルダーに移動しアップロードしました。何がいけなかったんでしょうか?よろしくお願いいたします。

  • ホームページ作成する時のCSS,HTMLデザイン作業(Indesign Fireworks Illustratorなど)

    皆様いつも回答ありがとうございます。 早速ご質問ですが(素人ながら稚拙なご質問申し訳ないです) 1.IndesignとFireworks、どちらがDreamweaverで応用が利くか(HTMLやCSSを作成する点で) 2.プロはDreamweaverのみでHP(HTMLやCSS)を全部作成しますか? Indesign(cs3)やFireworksなど?のソフトウェアを使ってデザインしたついでにHTMLやCSSもそのまま出来上がり、それをDreamweaver(cs3)に埋め込めないかと思ったのですが、可能というか実践向けなのでしょうか? 実際のWEB現場ではどのように一連の作業していますか、やはりdreamweaverだけでHTMLやCSSを最初から作っていく、みたいな感じでしょうか?またもしIndesignやFireworksなどでCSSやHTMLも可能であるならばどちらがHPを製作・デザインする上でいいでしょうか? 私としてillustratorでロゴや画像などはすべて処理しようかと考えています。つまり画像やロゴを配置したイメージがそのままHTMLやCSSが出来上がり、それをDreamweaverで使えるかどうかお聞きしたいのです。。両方とも無料体験したのですが、イマイチ使えるのかどうかって感じなのです・・。 m(__)m回答いただければ大変助かります、よろしく尾根がいたします。

  • イラストレーターのスライス機能

    イラストラーターにスライス機能ってありますよね。今、やむを得ない事情で使ったことのないバージョン8.0を使用しています。 このバージョンにスライス機能がまだついていないようなのです。 アートボードの上に小さな矩形を作って、ロゴを作成しているのですが、スライス→Web用に保存 みたいなことって8.0ではどのようにすれば良いのでしょうか。 最近覚え始めたばかりなので、よくわからず・・・ どなたかご教授願います!

  • フォトショでスライス後のホームページ編集

    こんにちは。 友人からホームページの修正を頼まれて安請け合いしてしまったのですが、どうもうまくいかないのでご教授願えますでしょうか。 友人からもらったデータを見たところ、フォトショップで作成後スライスしたもののようでした。 私の手元にはHTMLに変換した後の切り刻まれたデータしかありません。 今回頼まれたのはボタンを一個追加してリンクさせるというものです。 イラストレーターでボタンをはめ込みたい場所のサイズに合わせて作成し、元のスライスされた jpgとすり替えてみたのですがうまく収まらず、そのせいで他の画像も全てガタガタに崩れて しまいます。 そもそもフォトショップで作成したホームページの編集方法もよくわからないのですが、 どこかに詳しいサイトはありませんでしょうか? ホームページの編集にはホームページビルダーを使っています。 説明が悪くて申し訳ありませんが、どうぞよろしくおねがいします。

  • イラストレーターでの配置が出来ない

    初歩的な質問だったらすいません。 イラストレーターで画像の配置をしようと思っています。画像自体はjpeg画像をフォトショップで読み込み、必要箇所だけ囲んで”作業用パスの作成”をし、”パスの保存”をして”クリッピングパスの作成”をしたものをeps形式で保存しました。 これをイラストレーターでリンクで配置しようとするのですが、何故か出来ません。今までこの方法で切り抜き画像を配置出来たのですが、何度やってもエラーが出る事もなく、ただ配置されずに画面は何も変わらないのです。 どなたか原因が分かる方はいらっしゃるでしょうか? よろしくお願いします。 環境はMACOS10、イラストレーター10、フォトショップ7.0です。