- ベストアンサー
フォトショップで作ったカンプを使ってコーディング方法の確認
- フォトショップで作ったカンプを使ってコーディングする際、ボックスのサイズ確認方法は？
- ボックスをパス選択ツールなどで囲んで確認する方法と、サイズをメモしておく方法のどちらが良いか？
- デザインを見るときに見えないようにする方法はあるか？Photoshopの情報ツールを利用してサイズを確認しながらCSSコーディング
- CSS
- 回答数3
- ありがとう数14
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- ixkaito
- ベストアンサー率69% (18/26)
>やはりいられのように選択すればわかるなどフォトショは無いようですね。 イラレとまったく同じ機能はありませんが、移動ツール（[V]キー）の状態で左上に出てくる「自動選択」をチェックしておくと、キャンバス内の要素をクリックすることで自動的にレイヤーもしくはグループが選択されます。どちらにするかはその横で選べます。さらにその横でバウンディングボックスの表示／非表示を選べます。 「自動選択」をチェックしておくことでイラレに近い操作感覚にはなります。Webデザインをする際はオススメです。 ただ、これだけでは情報パネルに大きさは表示されませんので、レイヤーを選択してから[command]（Winでは[Ctrl]）+[T]キーで一応情報パネルには表示されます。 あとは回答しました[command]キー押しながらレイヤーサムネールをクリックする方法は手軽で確実なのでよく使います。 >スペースキーとは選択範囲などを移動することでしょうか？ 長方形選択ツールでキャンバス内でクリックしている状態でスペースキーを押しながらマウスを動かすと、選択の開始ポイントを動かせます。
お礼
＞あとは回答しました[command]キー押しながらレイヤーサムネールをクリックする方法は手軽で確実なのでよく使います。 選択範囲が出来て情報がわかるのですね。 ＞ただ、これだけでは情報パネルに大きさは表示されませんので、レイヤーを選択してから[command]（Winでは[Ctrl]）+[T]キーで一応情報パネルには表示されます。 とても便利です。ありがとうございました。効果以外の部分が選択されるようですね。
- dadada111
- ベストアンサー率3% (3/92)
私の会社はコーディネーターとデザイナーが別だったのですが、デザイナーがファイヤーワークスでインターフェースを決め、そこからコーディネーターが画像を切り出しホームページを作ってました。 フォトショを全く使わないということは無いですが、ファイヤーワークスで作った方が、サイズ調整やバランスなど見やすいと思いますよ。
お礼
確かにそうですが、いつまでFWは使い続けられるのですかね？
関連するQ&A
- コーディングで「float」のclearの仕方
htmlとcssのコーディングに関して質問させてください。 右側と左側にボックスをフロートさせた際、 どうやって回り込みを解除したらよいのか教えてください。 ▼htmlのタグ <div id="left">......</div> <div id="right">......</div> ▼cssのタグ #left{float:left; width:100px;} #right{float:right; width:100px;} このようなコーディングをした際には、 html、もしくはcssのどちらに、どのようなタグを 追加して回り込みをなくしたらよろしいでしょうか？ 分かりにくいかもしれませんがご教授いただければ幸いです。
- 締切済み
- その他([技術者向] コンピューター)
- Webデザインをする順番はどんな感じですか？
Web初心者みたいな人間です。 私が作成する順番は本に書いてあった通り、 1．レイアウトのラフを書く。 2.Illustratorでラフ通り四角ツールとかでワイヤーフレーム（レイアウト）を作る。 3．photoshopにワイヤーフレームを移動させて、それを基に写真加工したものやロゴ、バナーなどを入れていく。 4．それを全てオブジェクトごとにスライスする。 5．photoshopでF8キーの「情報」を見ながら、サイズを確認しながらエディターでCSSコーディング。 って感じなのですが、人とどう違うのか聞きたいのです。 最近聞いたプロの方の話ですとラフ→FWで作って→スライス→DWでコーディングと聞きました。 後、表とか、もしページじゃなく、カンプの状態で他の会社にプレゼンとかする場合とかどういう風に作るのでしょうか？ エクセルで作ってPhotoshopで貼りつけるとかでしょうか？ 教えて下さい。
- ベストアンサー
- HTML
- レスポンシブのコーディングについて
初めまして。 初心者ながらレスポンシブサイトを作っていて、 つまづいてしまった箇所があるので教えて頂きたいです。 １：左右中央寄せのcss記述について iPhone（320px）とAndroid（推定360px）の実機で表示確認をしながら Media Queriesのcssを記述を書いてたのですが、画面サイズが異なる為か cssの書き方が悪いのか、画面の左右中央寄せにしたくて 片方のスマホサイズに合わせると、片方ずれてしまいます。 cssでどの画面サイズでも左右中央に寄る書き方はありますか？ ２：Media Queriesについて １のcssの書き方がわからないので、画面サイズによって Media Queriesを書き分ければ早いかなと思い、 iPhone用とAndroid用で別で記述してみたのですが、 画面サイズを指定してるにも関わらず、片方のMedia Queriesが 両方のスマホに反映してしまいます。 下記、Media Queriesの記述内容です。 iPhone用（幅320px） @media screen and (max-width: 320px) { Android用（幅：360px） @media screen and (max-width: 360px) and (min-width: 321px) { 上記の書き方は間違っておりますでしょうか。 以上、2点について教えて頂けると助かります。 初心者なため、これで何時間も調べたり試行錯誤してしまっています。。 ちなみに、実機はiPhoneはiPhone4S、AndroidはF-01F です よろしくお願いします。 よろしくお願いします。
- 締切済み
- CSS
- フォトショップ→イラストレーターへパスをコピー
フォトショップは6.0 イラストレーターは9.0.2です、 スキャナで取り込みをした画像を、フォトショップを使って取り込み、 選択範囲→色域指定で選択範囲を指定し、パスをイラストレーターに コピーしたいのですが、うまくいきません。 作業用パスを作成し、レイヤーを作りコピーをしようとしていますが、 「adobe photoshopクリップ画像が大きすぎて出力できません。」 と出てきてしまいます。 サイズを変更しても同じです。 どなたか教えてください。
- ベストアンサー
- その他([技術者向] コンピューター)
- jQueryでボックスのサイズ変更
jQueryで表示済みのボックス要素（div#box）のサイズを変更しています。 ※ 元のサイズは100×100px $("#box").css("width","250px"); $("#box").css("height","250px"); この時、サイズの変更をスムーズにアニメーションさせるようにするには、何か方法があるのでしょうか？ イメージとしては、lightbox2のように、画像のサイズによってウインドウがスムーズにアニメーションするアレです。 「このページに書いてあるよ」や「こうすればできるよ」など、情報をお待ちしています。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 画像をフォトショップで指定サイズJPEGにする方法
画像リサイズについて教えてください。（期日があり、少々急いでおります） 商品情報を会員ログインWEBより登録するよう依頼されているのですが、 以下のような指定があり、条件通りにリサイズできなくて困っています。 １．容量：500KB以上1.5MB以内 ２．解像度：原寸で350dpi ３．ファイル形式：JPEG ４．ファイルサイズ：横600px×縦400px ５．保存形式：CMYK 当方の現在の状態 １．元の画像はデジカメで撮影したもので4000px×3000px ２．使用できる画像編集ソフトはフォトショップエレメンツ７.0またはフォトショップ5.5です。 ３．サイズ通り（または等倍）のトリミングはフォトショップで自身で加工できます。 ↓ フォトショップで 画像解像度を350dpi サイズ600px×400pxに置き換えると950KBくらいになります。 その後、 JPEGで保存すると180KBくらいまで落ちてしまい、それをアップロードしようとすると「サイズが小さすぎるので画像のリサイズを見直してください」とエラーで弾かれてしまいます。 （指定サイズが500KB以上のためです） サイズや解像度が指定されている状態ですので、その通りにするのですが、 JPEG保存すると容量が低下します。（圧縮されるので当然だと思いますが） フォトショップ不得手なのでこのやり方しか思いつきませんでした。 それでできないのだからやり方が間違っているんでしょうね。。。 何か良い方法、ズバリやり方 お待ちしております！ よろしくお願いします。
- ベストアンサー
- 画像・動画・音楽編集
- フォトの切り抜きがおかしくなります。
フォトの切り抜きがおかしくなります。 超初心者なので、ご教授願います。 フォトショップ（バージョン5）でペンツールを使っパスを作成して、フォトの切り抜きを しようとしているのですが、何度やってもうまくいきません。 ↓以下、参考にしているページです。 http://blog.ddc.co.jp/mt/dtp/archives/20091127/090651.html このページに習って処理をしてみているのですが・・・。 バージョンがＣＳ3になってますが、ツールの基本的な使用方法とかその辺は、そんな 大きく変わらないですよね？（あくまで基本の基本の部分は・・・。） 具体的の手順は、 (1)フォトショップで画像を開いて、 (2)ペンツールで切り抜く形に輪郭縁取って、 (3)パスのパレットで「パスを保存」 (4)グリッピングパスのダイアログで、今保存したパス（パス1）を選んで平滑度のところ 空欄でＯＫ (5)ＰｈｏｔｏＳｈｏｐ形式で保存 これをイラストレーターで「配置」で表示させるとおかしな状態になります。 とりあえず、状態を伝える為にてきとうな画像で作った確認用フォトを添付します。 背景白なんでもともと切り抜く必要の無い画像ですが・・・。確認用の適当な画像なので・・・。 見てもらうと分かりますが、こんなおかしな状態になります。 たぶん（じゃなくて絶対）やり方がおかしいんだと思いますが、どのようにやればちゃんと 出来るんでしょうか？ そもそも何で、内側におかしな線が入ってくんでしょう？ ちゃんと輪郭を縁取っているのに・・・。 詳しい方どうかよろしくお願い致します。
- ベストアンサー
- 画像・動画・音楽編集
- フォトショップのクリッピングパスがイラストレーターできれいに見れない
タイトルの通りなのですが、 イラストレータ9で情報新聞のデータを作っています。 フォトショップ6で手書きのイラストを取り込んで 着色、パスを保存してクリッピングパスを作ります。 psdからeps保存。 これでイラレに持って行ったら大体はイラストを形に 切り抜く事ができるのですが、中にいくつか背景が 四角いままで出て来る事があります。 パスが完全に閉じていないのでは？と聞きパスも もう一度作り直してもだめです。 画像より大きなバウンディングボックス（を指定しています）がびよーんとでてきます。 何が悪いのか調べても調べても分らないのですが ちゃんと切り抜かれない画像達は、psdからepsに 保存し直す時に○○のコピー.epsとなり 黄色いおにぎりが出て来てこの形式やオプションでは 保存できないデータが含まれますとでます。 イラストの着色に時間がかかったのでなんとか使えないかと困っております。 言葉足らずで申し訳有りませんが、どうかよろしく お願いします！
- ベストアンサー
- CAD・DTP
- 写真アルバムのデザインをフォトショップ photoshopで作成したい
写真アルバムのデザインをフォトショップ photoshopで作成したいと思ってます。 初心者でお恥ずかしい質問と思いますがよろしくお願いします。 よく、オリジナルフォトブックを作るさいに、業者が作った写真を入れる枠組みなどがいろいろとあるのですがああいうのを一から作ってみたいと思ってます。 デザインをやっている知り合いはイラストレーターのパスから、枠やデザインを全部作って、フォトショップに移行して写真を入れていく作業をしているようですが、それをフォトショップのみで最初から 作成したいと思っているのですが、可能でしょうか？ まず戸惑ったとは、18センチの正方形のサイズの画面の中に、9つの正方形の枠を入れていくのですが、縦、横三分割にきれいに素早く作る方法がわかりません。 パスかペンツールで線を引くにしても、正方形ツールで１つ１つ枠を作るにしても、時間がかかって しまってキッチリ分割ができません。 何か方法はありませんでしょうか？ 説明がわかり難い点は補足しますので、どうぞよろしくお願いします。
- ベストアンサー
- 画像・動画・音楽編集
- Win IE5.5～6.0での余白に関するバグ
最近やっと完全スタイルシートによりコーディングをマスターする為に勉強を始め何とかある程度形になるまでコーディングが出来たのですが Win IE5.5と6.0でバグが発生してしまいました。 幅532pxのボックス内に532pxの画像を配置した所右側に1px～2pxの無駄な余白が出来てしまうのです 他のモダンブラウザーでは全て平気なのですがIE5.5と6.0でこの現象が発生してしまいます。画像を添付しましたので症状を見てください。 それと下記アドレスに現在製作中のHTMLファイルとCSSファイルをアップしてありますのでお暇な時にでも覗いていただきアドバイスいただきたくおもいます。 宜しくお願いします ■HTML http://sangoclip.web.fc2.com/test/ ■CSS(レイアウト用) http://sangoclip.web.fc2.com/test/shared/css/default.css ■CSS(デフォルトCSSクリアー用) http://sangoclip.web.fc2.com/test/shared/css/reset.css
- ベストアンサー
- CSS
お礼
ありがとうございます。 ＞ ちょっとした幅や高さの確認のときは[m]キーの長方形選択ツールを使います。1～2pxずれるかもしれませんが、5px刻み、10px刻みなどで作っている場合は問題ありませんので。もしくは拡大縮小、スペースキーを駆使してぴったり選択します。 やはりいられのように選択すればわかるなどフォトショは無いようですね。 [m]キーとは同行事かわかりませんが長方形ツールや選択範囲を使って目でぴったりにするしかないのですね。 スペースキーとは選択範囲などを移動することでしょうか？