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

このQ&Aのポイント
  • illustratorで効率的に整列とスライスを行う方法を教えてください
  • Photoshopとillustratorの整列機能の違いについて教えてください
  • illustratorでスライスする際に起こる問題について教えてください
回答を見る
  • ベストアンサー

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

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

  • RH01
  • お礼率92% (86/93)

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

  • ベストアンサー
  • masa2470
  • ベストアンサー率100% (1/1)
回答No.1

初めまして、整列の方でしたら自分にも同じ経験がありましたのでお答えさせて頂きます。 illustratorにはキーオブジェクトという機能があるようで動かしたくない図形(今回でしたらボタンの画像)を選択ツールで2回クリックするとそれがキーオブジェクトになります。 まず、ボタンの画像を2回クリックしたあとshiftキーを押しながら文字をクリックして2つとも選択した状態にします。そのまま整列ボタンで水平・垂直それぞれの中央に整列を押すとボタン画像が動かずに文字がボタンを基準に中央に動いてくれると思います。 web用の作成はFireworksを使用しておりましてillustratorのスライスの方は申し訳ないのですが詳しくなく整列の方だけですが御容赦のほど御願い致します。

RH01
質問者

お礼

masa2470さん、アドバイスありがとうございます! 早速試してみたらバッチリ文字だけが移動してきてくれました!! やはり私が発見できてなかっただけで 機能としては存在してたんですね・・ スライスはまた別の方からのアドバイスを少し待ってみたいと思います。 本当に助かりました。ありがとうございました!

関連するQ&A

  • スライスの意味とイラレで作った画像について

    自社サイトの作成を任されているのですが社内に質問できる人がいないのでお願いします。(サイトはワードプレスで作っています) ●スライスって何のために使うの?どう使うの? 色んな質問をみて回ったのですが、スライスを使う意味がよく理解できません。どうしてわざわざ画像を分割するんですか? リンクを貼ったりしやすくするため? それなら画像をひとつずつ作って並べて貼ればいいのでは? スライスツールで画像を分割しweb用に保存すると、htmとimagesフォルダが作られました。フォルダはわかりますが、htmはどう使うんでしょうか・・?これ意味あるんですか? イラレにもスライスツールありますが一度も使ったことがありません・・ ●イラレで作った画像をフォトショで読み込み保存って意味ある? イラレで作った画像はwebでは少しぼやける。それを相談すると、イラレで作るからじゃん~フォトショで作るのが当たり前。と言われたのですが、イラレのデータをフォトショで開いてweb用に保存しても「フォトショで作った画像」ってことになるんでしょうか? (もしなるのだったら、 “フォトショでweb用に保存” “イラレでweb用に保存” どちらもweb用に保存なのに、どうして画質に差ができるのか・・) 幼稚園レベルですみません。

  • Illustrator10.03での整列

    ・「長方形ツール」で四角を書く。 ・「直線ツール」で横棒を3本書く。 ・すべてを選択して、「整列」の「垂直方向中央に分布」 そうすると、四角の中に線が3本均等に入るはずなんですが、 (表みたいになる) 線3本が、四角の中央よりも上に配置されてしまいます。 確か、Illustrator8.01では、均等に配置されたさずなんですが。。。 これは、Illusurator10では、無理なんでしょうか?

  • photoshop7のスライスツールについて

    現在使用しているアプリケーションは古くphotoshop7です。 画像からスライスツールでスライスの作成をし、 CSでは ファイル → Webおよびデバイス用に保存 で選択したスライス画像が一度に何個か保存できる ようですが、photoshop7ではweb用に保存しても 画像が1つになってしまい、保存にして スライス という 選択をしようとしても、スライスという項目ができません。 photoshop7でスライスの書き出しをする場合 どうしたら出来るでしょうか? 宜しくお願いします。

  • Illustratorでweb用にスライス

    Web制作初心者です。 Illustrator CS5で web用にスライスをしてみました。 作ったデザインの背景色を、カラーをカラーピッカーの16進数(#~)で確認して、 CSSにバックグラウンドカラーで指定しました。 その上にイラレ上でタイトル画像をスライスしたものを置いたのですが、 バックグラウンドカラーと画像の色が違うのです。 web制作にはDreamweaver使っているのですが、こちらの不具合かと思い ブラウザで見ても違う色になっていました。 やはり、イラレでスライスはまだまだ、うまく行かないのですか? DTP出身なのでフォトショが苦手で出来ればイラレで全てデザインしたいと思っています。 どうぞ、よろしくお願いいたします!

    • 締切済み
    • CSS
  • イラストレーターのスライス作業

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

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

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

  • Photoshop不要なスライスを防ぐ方法

    Photoshop並びにIllustratorでスライスして、Webおよびデバイス用に保存を押し、プレビュー画面で、欲しかった画像だけを選択しているのですが、imagesというディレクトリに大量に要らないスライス画像が保管され、実際に欲しかったスライスがなかなか見つかりません。 Fireworksのように選択した画像だけ、スライスするにはどうすればいいでしょうか。 グリッド線がついていることもあります。ソフトはCS5です。 よろしくお願いします。

  • illustratorでガイドに対し整列が出来ない

    illustratorでガイドにオブジェクトを整列させようとすると オブジェクト自体が消えてしまいます。 例えばアートボードの中心に縦線のようにガイドを一本置きます。 その横に四角形のオブジェクトを設置したとします。 オブジェクトとガイドを選択した後に ガイドに位置を揃えたいので再度ガイドをクリックすると ガイドが太く表示され、その状態で「整列パネル」で整列を 行うと、ガイドの位置はそのままに、オブジェクトだけが 消えてしまいます。アートボードの外にさえもありません。 *整列パネルには「選択範囲に整列」にチェックが入っています。 ならばと今度は上記の手順で最後の「ガイドをクリックして太く表示」 の工程を行わず単純にガイドとオブジェクトのみを選択した状態で 整列を行うと今度はオブジェクトもガイドも消えてしまいました。 二か月ほど前まではそのような事は無かった気がするのですが この場合どう対処すればちゃんとガイドの対して正しくオブジェクトが 整列するようになるのでしょうか? *バージョンはillustratorCS5、OSはWin10です。 OSをWin10に変えた瞬間にこうした不具合が出た訳ではありません。 どなたか原因と解決策を教えて頂けたらと思います。 どうぞ宜しくお願い致します。

  • illustratorで六角形オブジェクトの整列

    六角形オブジェクトの整列についてお聞きしたいです。 添付した画像は、プレビュー表示で見た画像で 均等に整列されているように見えますが、 アウトライン表示して見ると、微妙にずれています。 このような六角形オブジェクトの背景デザインを よく見るので同じように作りたいのですが、 線が垂直や・水平であれば、スマートガイドで交差の文字が出てぴったりくっついて整列をさせられるのですが、 六角形の場合、【く】の斜めのラインに合わせるため 斜めになっている部分はスマートガイドの交差が出ず、吸着されません。 ctrl+yでアウトライン表示にして、最大まで拡大して手動で合わせようにも 線同士が吸着されないため 微妙にずれていたり、重ねたところの線が二重のように見えているため ぴったりくっついて整列できているのかがわからないです。 六角形オブジェクトを添付した画像のように なにかぴったりくっつける方法はご存知ないでしょうか? 説明が上手く伝えられず、申し訳ありません。 よろしくお願い致します。

  • PhotoShop CS3でスライスツールを使用するとテーブルレイアウトになってしまう

     PhotoShop CS3とDreamweaver CS3でwebデザインの勉強をしています。PhotoShop CS3でスライスツールを使用し、ボタンや背景を切り分けてリンクを設定してweb用に保存します。保存でできたhtmlファイルを開くとテーブルレイアウトになっているのですが、これをcssレイアウトにするにはどうしたらいいのでしょうか?  スライスツールで切り分けたのをDreamweaverで組み立てるのでしょうか?アドバイス宜しくお願いします。

専門家に質問してみよう