PSDのデザインファイルからHTML/CSSコーディングする時に、その中の余白ってどうやって測ってますか？私の場合、デザインは外部から支給されてまして、できるだけ忠実に再現するためにいちいち長方形選択ツールで余白という余白を測りまくってるんですが、実はこんなことやってるのって自分だけなんじゃないかって、、効率が悪い気がしてなりません...。どうか教えてください。
Photoshop2014からスペース押すと選択中の要素から周りの要素までのpx数測れるよ。
ええーそうなんですね！でもいまはCS5しか使えないんです...
矩形ツールでがんば！
それはコーダーがやる仕事ではなく、デザイナーがやるべき仕事。余白を決定してるのはデザイナーなんだから、仕様書つくれっていう話。仮に、ページごとに余白が全部違うっていう素人デザインにも関わらず、厳密な再現を求められるのであれば、それはもうコーディングコストだけでは合わなくなる。
そういう考え方があるんですねー。社内ではぜひそうしたいです！うちの場合、社外（クライアント）からデザインが支給されることが多いので、黙って仕事するしかないですね。。
実際そうだよね。行間が微妙に違うとか絶対気づかないし。
それでもデザイナーの意図をくんで言われなくても出来る人が優秀だと思いますけどね。
実際、小規模〜中規模ぐらいの案件だとデザイナーに仕様書作らせるのは負担ではないでしょうか。サイクルの早い会社なら手がまわらないことが多いと思う
コーダーではないですが、コーディングの仕事するときは自分で測りまくってますね。デザイナーがやるべき仕事って意見に反対するわけではないですが、やらせたところで、例えば、画像を余白なく切り抜くのか、横幅いっぱいにあわせて余裕を持たせたほうがいいのかとか、コーディングする側が判断するほうがいいと思う箇所もあるわけで。
なんていうかそれを踏まえて見積もりをだせばいいんじゃないですか？
なるほどー。やっぱり測りまくるっていうのはあながち間違ってないんですね。いつも思うんですけど、多少なりともコーダーにもデザインの知識が必要になってきますよね。
コーダーですが、私自身ではかってますよ。良い物作りたいならそうなるかと。
よかった、測ってもいいんですね。ホッとしました。。コーディングよりこの作業の方が時間かかってる気がします。。
いや、これが絶対普通ですから。
それも含めてのコーディングだとおもっています＾＾
ピクセルパーフェクト系のプラグインをブラウザにいれといて、目分量で組んで画像に合わせて微調整するよ(・∀・)
なんですかそのピクセルパーフェクト系のプラグインって。そんなものがあるんですね。
昔はfirebugの拡張プラグインでpixel perfectってのがあった。デザインのjpgとか読み込んでオーバーレイ表示が出来るやつ。
おおー！見つけました、すごいこれは便利そう。//coliss.com/articles/browser/firefox/1459.html
あ、そーそーそーゆーのです(*´∀｀)chromeもあるよ！//chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi
cssでbodyの背景とかにスクショ張っちゃうのもアリだよ(・∀・)
同じく矩形ツールで測ってます。デザイナーもきちんと測らずにデザインしてる場合もありますが、そういう時はいい感じのキリのいい数値で余白を設定してます。
お仲間がいてよかったです。やっと長年のモヤモヤがとれた気分です。最近では24pxとか26pxとかの時はもういいやろと思って25pxで統一したりはしてます。この作業って地味に時間かかりますよね...
同じく短形ツールで、情報パネル見ながらやってる。>24pxとか26pxとかの時はもういいやろと思って25pxで統一したりこういう場合もデザインに合わせるんじゃなく、コーディング設計の概念からして統一したほうが良いよ。.ちなみに最新版のBracketsにはpsd読み込み機能が付いてて、要素の幅とかマージンが簡単に把握出来るっぽい。
そうそう、それで最近Braketsに乗り換えたんですよー！数値があてにならんけど...
そこはやっぱり、モニターに物差し当てて、ミリ単位までびっちり測ってますよ^^
つまんねーんだよお前
すみません、わたしも実際やってます......！
みんなの回答 7 件
Photoshop2014からスペース押すと選択中の要素から周りの要素までのpx数測れるよ。
それはコーダーがやる仕事ではなく、デザイナーがやるべき仕事。
余白を決定してるのはデザイナーなんだから、仕様書つくれっていう話。
仮に、ページごとに余白が全部違うっていう素人デザインにも関わらず、厳密な再現を求められるのであれば、それはもうコーディングコストだけでは合わなくなる。
コーダーではないですが、コーディングの仕事するときは自分で測りまくってますね。デザイナーがやるべき仕事って意見に反対するわけではないですが、やらせたところで、例えば、画像を余白なく切り抜くのか、横幅いっぱいにあわせて余裕を持たせたほうがいいのかとか、コーディングする側が判断するほうがいいと思う箇所もあるわけで。
なんていうかそれを踏まえて見積もりをだせばいいんじゃないですか？
コーダーですが、私自身ではかってますよ。良い物作りたいならそうなるかと。
ピクセルパーフェクト系のプラグインをブラウザにいれといて、目分量で組んで画像に合わせて微調整するよ(・∀・)
同じく矩形ツールで測ってます。
デザイナーもきちんと測らずにデザインしてる場合もありますが、そういう時はいい感じのキリのいい数値で余白を設定してます。
そこはやっぱり、モニターに物差し当てて、ミリ単位までびっちり測ってますよ^^
関連するトピックス