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

質問

プロはフォトショップで作ったカンプを使ってコーディングするときに、ボックスなどのさいずをどう確認していますか？
下記サイトに下記のような記載があるのですが、情報を見ながらボックスをパス選択ツールなどで囲ってみるということでしょうか？
それだと１PXくらいずれることがありませんか？

それともボックスを作った段階ですべてサイズをメモって、テキストで何pxと記載しておくのでしょうか？
デザインを見るときに見えないようにするというのはどうでしょうか？

5．photoshopでF8キーの「情報」を見ながら、サイズを確認しながらエディターでCSSコーディング。

http://okwave.jp/qa/q5279110.html

回答No.2

ixkaito · ベストアンサー

>私の会社はコーディネーターとデザイナーが別だったのですが…

コーディネーターってなんですか？コーダーのことを言いたかったのでしょうか？
Fireworkの開発は実質終了しております。これからはフォトショで作るほうがオススメです。

質問について、Macでは[command]キー、Windowsでは[Ctrl]キーを押しながら、レイヤーパネルのレイヤーサムネールをクリックすれば、レイヤーが選択され、情報パネルで確認できます。

ちょっとした幅や高さの確認のときは[m]キーの長方形選択ツールを使います。1～2pxずれるかもしれませんが、5px刻み、10px刻みなどで作っている場合は問題ありませんので。もしくは拡大縮小、スペースキーを駆使してぴったり選択します。

ちなみに情報パネルは常に開いています。
あと、プロはペンタブで作業します。

お礼

ありがとうございます。

＞
ちょっとした幅や高さの確認のときは[m]キーの長方形選択ツールを使います。1～2pxずれるかもしれませんが、5px刻み、10px刻みなどで作っている場合は問題ありませんので。もしくは拡大縮小、スペースキーを駆使してぴったり選択します。

やはりいられのように選択すればわかるなどフォトショは無いようですね。
[m]キーとは同行事かわかりませんが長方形ツールや選択範囲を使って目でぴったりにするしかないのですね。
スペースキーとは選択範囲などを移動することでしょうか？

回答No.3

ixkaito

>やはりいられのように選択すればわかるなどフォトショは無いようですね。

イラレとまったく同じ機能はありませんが、移動ツール（[V]キー）の状態で左上に出てくる「自動選択」をチェックしておくと、キャンバス内の要素をクリックすることで自動的にレイヤーもしくはグループが選択されます。どちらにするかはその横で選べます。さらにその横でバウンディングボックスの表示／非表示を選べます。

「自動選択」をチェックしておくことでイラレに近い操作感覚にはなります。Webデザインをする際はオススメです。

ただ、これだけでは情報パネルに大きさは表示されませんので、レイヤーを選択してから[command]（Winでは[Ctrl]）+[T]キーで一応情報パネルには表示されます。

あとは回答しました[command]キー押しながらレイヤーサムネールをクリックする方法は手軽で確実なのでよく使います。

>スペースキーとは選択範囲などを移動することでしょうか？

長方形選択ツールでキャンバス内でクリックしている状態でスペースキーを押しながらマウスを動かすと、選択の開始ポイントを動かせます。

お礼

＞あとは回答しました[command]キー押しながらレイヤーサムネールをクリックする方法は手軽で確実なのでよく使います。

選択範囲が出来て情報がわかるのですね。

＞ただ、これだけでは情報パネルに大きさは表示されませんので、レイヤーを選択してから[command]（Winでは[Ctrl]）+[T]キーで一応情報パネルには表示されます。

とても便利です。ありがとうございました。効果以外の部分が選択されるようですね。

回答No.1

dadada111

私の会社はコーディネーターとデザイナーが別だったのですが、デザイナーがファイヤーワークスでインターフェースを決め、そこからコーディネーターが画像を切り出しホームページを作ってました。
フォトショを全く使わないということは無いですが、ファイヤーワークスで作った方が、サイズ調整やバランスなど見やすいと思いますよ。

お礼

確かにそうですが、いつまでFWは使い続けられるのですかね？