• ベストアンサー

Photoshopでwebカンプ

Photoshopでwebカンプを作る上で3つほど分からず こちらに投稿させていただきました。 （1）PC用幅1200pxの場合、左右の空きスペースはどのくらい取ればいいですか？ 　　SP用幅750pxの場合、左右の空きスペースはどのくらい取ればいいですか？ （2）表組みを作る場合、修正が楽で簡単で正確に作る方法はありませんか？（サイトなどであればそのサイトを教えていただけると助かります） （3）細い線幅はどのくらいがいいのですか？ 初歩的な質問で申し訳ありませんがよろしくお願いいたします。

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

  • ベストアンサー
回答No.1

＞PC用幅1200pxの場合 ＞SP用幅750pxの場合 どこからこの条件が出てきたのかわからないので、誰も言及できないと思います。 表現とコンテンツ内容に合わせて余白が決まりますので。 SPの場合、どうしてもスライドバーの部分が必要になりますから、少なくとも10〜20pxは余白をとりますが、楽天市場のサイトみたいにぎゅうぎゅうにするのか、余白多めで考えるのかで違いますよね。 PCの場合はコンテンツ次第です。 1200pxをフルで使うのか、1366pxの中の1200pxとして考えるのか、という点だけでみても違いますよね。 SPのコンテンツをPCに展開することが多いわけで、その場合のグリッドシステム（コンテンツ幅の単位）をどう決めるかというのは、コンテンツとデザイナー次第です。 ＞表組みを作る場合、修正が楽で簡単で正確に作る方法 イラストレーターで作って、貼り付ける。 ＞細い線幅はどのくらいがいいのですか？ 好みで決めればいいですが、自分は1pxですね。 線幅だけではなく、色の濃さでも印象が違いますので。 どのみち線はだいたいcssで指定しますので、最細単位で使っておけば問題ないと思いますよ。

aaaaaaaaaa1
質問者

補足

外注先のコーディングされる方が 一般的に多い PC用幅1200px SP用幅750px と言っていました それぞれの幅が最大限（例えば、紙サイズで言うと仕上がりA4縦210mmが1200pxや750pxになります）

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. Photoshop（フォトショップ）

関連するQ&A

  • photoshop webデザイン カンプ制作

    初歩的な質問失礼します。 現在photoshopにてwebサイトのデザインカンプを制作中です。 新規ファイル作成の時点で、キャンバスのサイズを1280×1024に設定して制作を進めていたのですが、高さが全然足りなくなってしまいました。 こういった場合はどうするのが良いでしょうか？？ また、皆さんはサイトの高さがどれくらいになるかわからない場合、新規ファイル作成の際、キャンバスサイズをどのように設定されていますか？？ すごく初歩的な質問でお恥ずかしいのですが、どなたか親切な方、素人にもわかりやすいご教授を頂けないでしょうか？？ よろしくお願い致します。

  • レティーナ対応のwebデザイン　photoshop

    webサイトを作成する際にレティーナ対応させる時の初歩的な質問になります。 photoshopでデザインを作る時の初期設定を伺いたいのですが、 横幅1280pxで見せたい場合 1280pxの144ppiで初期設定するか 2560pxの72ppiで設定しますか？ もしくは他のやり方とかあります？ 初歩的な質問で申し訳ないですがみなさんのやり方を教えてください。 よろしくお願いします。

  • photoshop7.0 両サイドが影のweb用背景画像をつくりたい

    中央寄せのホームページで、両サイドが少し影になっていて浮かび上がっているように見えるものがあると思うのですが、そういうものを作りたいです。 ソースなどから、横に細長い背景画像を繰り返し並べているのだということは分かりました。 そこで、photoshopでその背景画像を作る手順を教えていただきたくて質問させていただいています。 高さ5px×幅780pxの画像の両サイド10px分くらいをグレーから透明になるようなグラデーションをおく手順を作り方、保存方法など含めて分かるかたいらっしゃったらアドバイスをお願いいたします。 http://www.unouplus.com/uraunou/ こちらのサイトさんの右側みたいな感じで左右対称にしたいです。

  • フォトショップで作ったカンプを使ってコーディング

    プロはフォトショップで作ったカンプを使ってコーディングするときに、ボックスなどのさいずをどう確認していますか？ 下記サイトに下記のような記載があるのですが、情報を見ながらボックスをパス選択ツールなどで囲ってみるということでしょうか？ それだと１PXくらいずれることがありませんか？ それともボックスを作った段階ですべてサイズをメモって、テキストで何pxと記載しておくのでしょうか？ デザインを見るときに見えないようにするというのはどうでしょうか？ 5．photoshopでF8キーの「情報」を見ながら、サイズを確認しながらエディターでCSSコーディング。 http://okwave.jp/qa/q5279110.html

    • ベストアンサー
    • CSS
  • WEBサイト制作の図面作成ソフトでいいものは？

    お世話になります。 WEBサイト制作する時にPhotoshopでだいたいのレイアウトとともに ボタンなども作ってしまっているのですが、 そういった際に例えば ボタンとボタンの間は20px空ける。とか この画像のサイズはいくつで。とか ここの幅はいくつにしたい。 ここの文字の色はrgbで#123456だ などを自動で表示させられる（CADみたいな感じ？）機能や そういったソフトがあれば楽だなと思っているのですが、 そういったものはあるのでしょうか？ 最低でも、「ここの幅は25pxで」みたいなのを 図面の様に書けるものがあればと思っているのですが。 （イラレでやってもいいのですが、矢印引いて、テキスト書いてと２段階になるのが面倒なので 矢印引いたらpx指定のテキスト入力がすぐ打てる様にしたいです）

    • ベストアンサー
    • CSS
  • ウェブデザイン　paddingとwidthについて

    はじめまして。 http://www.e-washizu.co.jp/ こちらのサイトの横幅は７８６pxですが、 そのうち影画像分の６pxを引くと７８０pxです。 しかしcssを見たところ、 <div id=main>部分のwidth幅は７６０ピクセルになっていて、 padding-left:10px; padding-right:10px; この２つの値をあわせるとちょうど７８０pxになるのですが、 ここで疑問点が浮上しました。 え？paddingの値分widthの値から引くの？？と。。 私の作っていたサイトでは、 width幅を７６０pxではなく「７８０px、padding左右に10px」 と記述していましたがそれでデザインはちょうどピッタシになりました。 http://www.e-washizu.co.jp/のように、いったい何が違うのでしょうか？？ 分かる方、ご回答お願いいたします＞＜

    • ベストアンサー
    • HTML
  • Photoshop　CS３ パスに太さをつけたい

    ちょっとタイトルが正確ではありませんが、Photoshop　CS３を使用してやりたいことがあります。 パスで線を描き、厚みを持った線を作成したいのです。 「パスの境界線を描く」を使うと同じようなことはできるのですが、 現在のパスの形の線を描くだけなので、パスの形を修正してもついてきてくれません。 塗りつぶしを透明にしてレイヤースタイルで境界線を描くでも同じようなことができますが この場合、かならず始点と終点が繋がって閉じた図形になってしまい、 「～」のような閉じていない曲線を表現することができません。 理想は、閉じていない曲線状パスに沿って常に一定の幅の描画がされ、パスの形をいじっても ちゃんとそれが反映されるような感じです。 言葉で伝わりにくいかもしれませんが、詳しい方おられましたら教えて頂けると助かります。

  • WEBデザイン　ナビゲーションメニュー　画像

    初歩的な質問失礼します。 最近？よく見かける、横並びのナビゲーションメニューバーがウィンドウ幅いっぱいに広がっているwebサイトのデザインについて教えていただきたいことがあります。 サイト全体がセンタリングされて、幅が固定されている横並びメニューバーは作れるのですが、 http://www.sapporoholdings.jp/ このサイトのようなナビゲーションバーを作りたいと思ったところ、自分なりに調べて幅を指定しない、などのレイアウト自体の理屈は理解しました。 しかしいざ作ろうと思ったときに画像の用意の仕方で戸惑ってしまいました。 上記のサイトのように、メニューのテキストを画像で表示させる場合、通常時の画像/マウスオーバーの画像はどのように用意するのが効率がいいでしょうか？ メニュー全体の背景画像をrepeat-xでウインドウ幅いっぱいに繰り返し指定して、各メニューのテキスト（画像）と区切りのラインを透過画像で用意しているのでしょうか？ 一番左と一番右のメニューだけに背景画像repeat-xを指定しているのでしょうか？ 質問がわかりにくくてすいません、本当に知りたくて困っています。 ちなみに私の流れとしてはphotoshopを使用して、先にカンプを作ってから画像をスライスして作っています。 どなたかわかりやすく説明して頂けないでしょうか？？ いろいろな方法があるのでしょうが、みなさんのおすすめを教えて頂きたいです。 どうかよろしくお願いします。

    • ベストアンサー
    • CSS
  • イラストレータで、パスの中心線よりも外側に線幅をとる設定方法

    現在線を描くと、線の中心線をまたいで、左右均等に線の幅になっています。たとえば、太めの10ポイントの幅の線を描いた場合、パス(中心線)の両側に　5ポイントずつ幅が取られています。 これですと、簡単な例として、四角形を描いて塗りを赤、外周の線を太めにして青で縁取り、のように使いたい場合、線幅を太くするほど塗りの四角の面積が小さくなります。線の中心線よりも外側に線幅がくるようにして、線幅が塗りの面積に影響しないように設定する方法を教えてください。　よろしくおねがいします。

  • Photoshopで飛び出し文字

    http://images.p-world.co.jp/shizuoka/user_img/005062_02.jpg http://images.p-world.co.jp/saga/user_img/009916_04.jpg 上記アドレスにあるような飛び出した様な立体感のある文字をPhotoshopのみで作りたいのですが、方法が分かりません。 ご存知の方がいらしたら是非教えてください。 私がこういった文字を作る際は、illustratorでブレンドツールやVectorEffectsを使って立体にしてからPhotoshopに貼り付けて加工しています。 この方法だと修正をしたい場合にillustratorで一から作り直すことが多いので、時間がかかってしまいます。 他にも楽にそういった文字が楽に作れる方法などありましたら教えてください。 ちなみに環境は WindowsXP 使用しているアプリケーションは Photoshop7.0 Illustrator10 です。 VectorEffectsは1.5です ※リンク切れ起こしていたら申し訳ありません

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する