• 締切済み

webのレイアウトデザインについて[勉強中]

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

みんなの回答

  • eg_nn
  • ベストアンサー率81% (27/33)
回答No.1

>やはり、ピクセル中心の概念を考えると、IllustratorよりPhotoshopでレイアウトした方が正しいですよね? 正しいというか、Illustratorだと切り出し作業が大変であったり、Webに適した画像というとPhotoshopかFireworksの方が良いと思います。 (個人的におすすめするのはFireworksですが) 外注先での指定はありませんか? Illustratorも入稿可なところもありますよ。 それからPhotoshopのガイドは定規から引っ張って作るガイド以外なかったと思います。 でもWebサイトのレイアウトの際はIllustratorのようなガイドは必要ないと思いますが…。 (ところで「Illustratorでマージンを設定するとき」とありますが、私の知識が足りないのか、少しよくわかりません。文字のマージンのことを仰っているのでしょうか?)

hakomaga
質問者

補足

スミマセン!!! レスが無かったので、放置してしまいました。 今更ですが、補足します。。。 >切り出し作業 確かに。思わぬところでアンチェリかかったりしますよね。 とはいえ、イラレも一応ピクセル単位、RGBで作れるので、 つい依存しちゃってます。 >イラレで入稿可 はい、そういうところにお世話になってる現状です。 >マージン マージンって言葉、CSSみたいで分かりにくかったですね、スミマセン。 要はガイド線の事です。 マージン(四方の余白)に限った話では無いのですが、 印刷媒体のデザインって、特にページ物だとフォーマットの設定で ガイドだらけになります。 イラレでは斜めとか円もガイドに出来るので重宝しているのですが、 フォトショではどうもやりにくくて。 ウェブもページ物なので、フォーマットを考える上でガイドが 不可欠だと思うのですが、どういったノウハウでやっているのか 気になりました。 また質問を変えて、聞いてみたいと思います。 ありがとうございました。

関連するQ&A

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

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

    • 締切済み
    • CSS
  • Webデザインの勉強の仕方

    大学生です。 Webデザイナーに興味があり、IllustratorでWebサイトのデザインを作成したり、作成したものをHTMLとCSSでコーディングしたりしています。 質問なのですが、皆さんはWebデザインをどのように勉強しているのでしょうか? 私は理論から入ろうと思ってドナルド・ノーマン『誰のためのデザイン?』『エモーショナル・デザイン』 やユーザビリティの本を読むことから始めたのですが、理論を学んでもデザインに活かすのが難しく、断念した覚えがあります。 それ以降は好きなWebサイトのデザインをIllustratorで再現してみたり、思いついたデザインを紙に描いて試行錯誤した後、Illustratorで作成するといった工程を経ています。 デザインというのはただでさえ学ぶのが難しい領域ですが、体系的な勉強方法はあるのでしょうか。

    • 締切済み
    • CSS
  • Webデザインの勉強にオススメの本等教えて下さい

    大学在学中、Webの勉強を独学で始めました ある程度理解してきたのと同時にアカデミック版のAdobeWebPremiumを購入し Photoshopでデザイン→Dreamweaverでコーディングという形を取るようになりました コーディングに関してはほぼデザイン通りにXHTML+CSS2で組み立てることが出来るようになり この時点から知人に頼まれWebサイト等を5件ほど作成したのですがデザインがいまいちぱっとしません 自分なりに海外サイトでフォトショップチュートリアルなどを見てプロが作るようなデザインを勉強しているつもりなのですが いざ、0から自分でデザインをしようとするとパッとしないデザインになってしまいます 動きが足りないのかな?と最近jQueryなんかも勉強を始めたのですがやっぱりデザインがすべてだということが分かりました そこで、質問なのですがWebデザインを勉強するにあたってオススメの書籍や勉強会の情報など教えて頂けないでしょうか? 趣味程度ではなく、Webデザイナーとして食べていけるようになりたいと本気で考えています 暇な時間があれば常にパソコンに向かってWebの勉強をしてるくらい本気です Photoshop、Fireworks、IllustratorでのWebデザイン関連の書籍でお願いします 尚、Webデザイン系の会社へ就職して先輩方に教えてもらう、専門学校へ入学する等の選択肢はなしでお願いします

  • webデザイン

    『adobe Photoshopで始めるWebデザイン』をダウンロードし進めていましたが『09』のテキスト追加で躓いてしまいました。 テキストを入力後にプレビューすると左右の枠が切れて表示されてしまいます…。 ブロック、ボックス、マージンなどの設定は何度も見直ししたのですが解決に至りません… どなたかご教授頂けますでしょうか。 よろしくお願いします。

  • Webページのデザインの勉強法に関して

    宜しくお願い致します。 Webページのデザインの勉強法に関して教えて下さい。 現在はHTML、CSS、jQueryは分かるのでページのコーディングは出来ます。 また、PHPも少し分かるので問い合わせフォームやDBを絡めた予約システムも作れます。 現在デザインの勉強の為に行っていることはお手本サイトのキャプチャを取りFireworksにてワイヤフレームの作成からパーツの作成を行っています。 しかし、Fireworksでは実現困難な箇所が多々あります。 そこで、IllustratorやPhotoshopも持っているのでこちらでパーツの作成を行いたく存じます。 どちらも初めて使うソフトなので難しく感じております。 IllustratorとPhotoshopの辞典のような書籍は用意しました。 あと、問題集のような書籍も用意して実際に利用して使い方の勉強も併せて行っております。 キャプチャを別レイヤーや別のアートワークに置いて模写やトレースを繰り返し行う事で 素材作成のオペレータになるのではないかと思っております。 しかし、独学では限界を感じております。 パソコン教室に問い合わせましたがあくまでもソフトの使い方を指導するようです。 私がやりたいことは、完成図の素材を持ち込み、使用されている効果の順番や使用されている効果やフィルタやグラデーションの分析と効率の良い手順での素材の作成方法を知りたいのです。 アドバイスがあれば教えて下さい。

  • webデザインの勉強方法を教えてください

    仕事で、主にワイヤーフレームをひたすら作成をすることになったのですが、デザイン力のなさを痛感しています。 Webデザインの勉強の仕方や、参考になる書籍があれば教えて欲しいです。 将来的には、ワイヤーだけでなく、サイトも作っていけるようになりたいです。 photoshop、illustrator、dreamweaver歴はそれぞれ6ヶ月程度です。dreamweaver・wordpress等の書籍を買い、簡単なサイトをつくるといっても見様見真似で、まだまだ素人レベルで、きちんとお金を頂けるレベルまでなりたいです。 宜しくお願い申し上げます。

    • 締切済み
    • CSS
  • Webデザインをする順番はどんな感じですか?

    Web初心者みたいな人間です。 私が作成する順番は本に書いてあった通り、 1.レイアウトのラフを書く。 2.Illustratorでラフ通り四角ツールとかでワイヤーフレーム(レイアウト)を作る。 3.photoshopにワイヤーフレームを移動させて、それを基に写真加工したものやロゴ、バナーなどを入れていく。 4.それを全てオブジェクトごとにスライスする。 5.photoshopでF8キーの「情報」を見ながら、サイズを確認しながらエディターでCSSコーディング。 って感じなのですが、人とどう違うのか聞きたいのです。 最近聞いたプロの方の話ですとラフ→FWで作って→スライス→DWでコーディングと聞きました。 後、表とか、もしページじゃなく、カンプの状態で他の会社にプレゼンとかする場合とかどういう風に作るのでしょうか? エクセルで作ってPhotoshopで貼りつけるとかでしょうか? 教えて下さい。

    • ベストアンサー
    • HTML
  • webデザインデータの作り方

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

  • webデザインこれが普通?

    たまにコーダー作業を請け負いますが、きっちりと座標、位置、サイズをあわせたデザインカンプでその通りに作れば、ちゃんとコーディング可能なデータを回してくるデザイナーさんと、ガイドの位置もずれていたり、サイズ配置座標も数ピクセルずれているデータを回してくるデザイナーさんがいます。 後者を雰囲気デザインと個人的に呼称してます。 もちろん雰囲気デザインですから、設計書がついてくることはありません。 雰囲気デザインの場合、結局何度も問い合わせたり、手直ししたり、ひどい場合には突き返したりして、ものすごくイライラします。 皆さんの周りには、後者のような雰囲気デザイナーはweb業界ではどの程度の割合居ますか?どう対応していますか?

    • ベストアンサー
    • HTML
  • webデザイン、勉強中です。しかし…

    webデザイン、実務経験を積んで4ヶ月経ちます。以前の職はWEBデザインとは全くかけはなれた仕事をして美大を出たわけでもありません。全て独学+現場で学びました。24歳、男です。 現在はインターンみたいな(?)形で実際に現場で勉強して、いろいろ学んでいます。(その為、お給料は1円も発生していません) しかし、社長からいろいろ駄目出しをされ、いつになったら雇って頂けるのか不明です。 一応話的には「7月か8月くらいに”アルバイトとして”雇用してあげる。」と前に言われました。しかし、それも口約束なので実際どうなるのか分かりませんし、社長の気分はコロコロ変わります。というか昨日の話では「雇うのはいつになるか分からない」と言われました。しかも雇えても低賃金。 一応、自分のスキルはと言うと… ・XHTML+CSS(毎日コーディングもしているので普通に出来ます) ・デザイン(主に現場で勉強中) ・photoshop(実務経験で使用)、Illustrator(プライベートで使ったくらい) ・FLASH(簡単なアニメーション[モーショントゥイーンやマスク機能を使ったレベル]、これもプライベートで使ったくらい) ・DreamWevaerの基本操作 一応、サイトデザインのURL画像を貼り付けておきます。 自分がいろんなサイトを見て参考にしながら(もちろん全く同じデザインではありませんし、あくまで参考にした程度です)サイトを作ったものです。(この作品に関しては先輩からのアドバイスも受けておりません。) コーディングする時間がなかったので、画像で書き出しました。 (今回のテーマは3月なので別れの時期、”想い出”をテーマに制作しました) 今の自分のレベルですが、これではどこもアルバイトでは雇って貰えないのでしょうか…。 自分的には頑張って正社員を希望しているのですが…正社員は厳しいですか? 現在、就活もしようか悩んでおります。 まだ作品数が少なくて申し訳ないのですが(過去にお客様に納品したのもあります)、ご解答よろしくお願いいたします。

専門家に質問してみよう