-
ID:Vbt9xE さんの質問

PSDのデザインファイルからHTML/CSSコーディングする時に、その中の余白ってどうやって測ってますか?
私の場合、デザインは外部から支給されてまして、できるだけ忠実に再現するためにいちいち長方形選択ツールで余白という余白を測りまくってるんですが、実はこんなことやってるのって自分だけなんじゃないかって、、効率が悪い気がしてなりません...。
どうか教えてください。

みんなの回答 7 件

ID:pppaQR さんの回答

Photoshop2014からスペース押すと選択中の要素から周りの要素までのpx数測れるよ。

ID:Vbt9xE

ええーそうなんですね!
でもいまはCS5しか使えないんです...

ID:pppaQR

矩形ツールでがんば!

ID:/4o9k/ さんの回答

それはコーダーがやる仕事ではなく、デザイナーがやるべき仕事。
余白を決定してるのはデザイナーなんだから、仕様書つくれっていう話。
仮に、ページごとに余白が全部違うっていう素人デザインにも関わらず、厳密な再現を求められるのであれば、それはもうコーディングコストだけでは合わなくなる。

ID:Vbt9xE

そういう考え方があるんですねー。社内ではぜひそうしたいです!
うちの場合、社外(クライアント)からデザインが支給されることが多いので、黙って仕事するしかないですね。。

ID:mpJtZp

実際そうだよね。
行間が微妙に違うとか絶対気づかないし。

ID:T5iJa6

それでもデザイナーの意図をくんで言われなくても出来る人が優秀だと思いますけどね。

実際、小規模〜中規模ぐらいの案件だとデザイナーに仕様書作らせるのは負担ではないでしょうか。サイクルの早い会社なら手がまわらないことが多いと思う

ID:OqY6gf さんの回答

コーダーではないですが、コーディングの仕事するときは自分で測りまくってますね。デザイナーがやるべき仕事って意見に反対するわけではないですが、やらせたところで、例えば、画像を余白なく切り抜くのか、横幅いっぱいにあわせて余裕を持たせたほうがいいのかとか、コーディングする側が判断するほうがいいと思う箇所もあるわけで。

なんていうかそれを踏まえて見積もりをだせばいいんじゃないですか?

ID:Vbt9xE

なるほどー。やっぱり測りまくるっていうのはあながち間違ってないんですね。いつも思うんですけど、多少なりともコーダーにもデザインの知識が必要になってきますよね。

ID:ZmUHni さんの回答

コーダーですが、私自身ではかってますよ。良い物作りたいならそうなるかと。

ID:Vbt9xE

よかった、測ってもいいんですね。ホッとしました。。
コーディングよりこの作業の方が時間かかってる気がします。。

ID:zqeYMx

いや、これが絶対普通ですから。

ID:ZmUHni

それも含めてのコーディングだとおもっています^^

ID:os6NHg さんの回答

ピクセルパーフェクト系のプラグインをブラウザにいれといて、目分量で組んで画像に合わせて微調整するよ(・∀・)

ID:Vbt9xE

なんですかそのピクセルパーフェクト系のプラグインって。そんなものがあるんですね。

ID:dTKXUB

昔はfirebugの拡張プラグインでpixel perfectってのがあった。
デザインのjpgとか読み込んでオーバーレイ表示が出来るやつ。

ID:Vbt9xE

おおー!見つけました、すごいこれは便利そう。
//coliss.com/articles/browser/firefox/1459.html

ID:os6NHg

あ、そーそーそーゆーのです(*´∀`)chromeもあるよ!
//chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi

cssでbodyの背景とかにスクショ張っちゃうのもアリだよ(・∀・)

ID:FH9zjo さんの回答

同じく矩形ツールで測ってます。
デザイナーもきちんと測らずにデザインしてる場合もありますが、そういう時はいい感じのキリのいい数値で余白を設定してます。

ID:Vbt9xE

お仲間がいてよかったです。やっと長年のモヤモヤがとれた気分です。
最近では24pxとか26pxとかの時はもういいやろと思って25pxで統一したりはしてます。この作業って地味に時間かかりますよね...

ID:dTKXUB

同じく短形ツールで、情報パネル見ながらやってる。
>24pxとか26pxとかの時はもういいやろと思って25pxで統一したり
こういう場合もデザインに合わせるんじゃなく、コーディング設計の概念からして統一したほうが良いよ。
.
ちなみに最新版のBracketsにはpsd読み込み機能が付いてて、
要素の幅とかマージンが簡単に把握出来るっぽい。

ID:Vbt9xE

そうそう、それで最近Braketsに乗り換えたんですよー!数値があてにならんけど...

ID:BcW5W. さんの回答

そこはやっぱり、モニターに物差し当てて、ミリ単位までびっちり測ってますよ^^

ID:t4VxRf

つまんねーんだよお前

ID:Vbt9xE

すみません、わたしも実際やってます......!

最終更新日:2014-12-07 (4,874 views)

関連するトピックス

ページ上部に戻る