6

Photoshop CS5 でいくつかの Web サイトを作成しましたが、通常はメモ帳 ++ でそのまま作成する傾向があります。私は通常、それらをサイト上でライブにし、コードを編集してページを更新して変更を確認します。より専門的な方法に移行して、テンプレート/デザイン全体を Photoshop で作成したいと考えています。私が飛び込むのを妨げているのは、まさにスタートです笑..

テンプレートに使用する適切な解像度は何ですか? さまざまなチュートリアルに出くわしましたが、サイズが異なります。たとえば、私のラップトップの解像度は 1366x768 です。私のオフィスには 22 インチの LCD がありますが、これも非常に大きな解像度であることを知っています。ほとんどのモニターの最小解像度は 1024x768 だと思います...

Web サイトのテンプレートを作成するために Photoshop で新しいテンプレートを作成する場合、どのサイズの画像を作成する必要がありますか? また、その理由は何ですか?

また、私たちはこのトピックに取り組んでいるので、テンプレートの作成に最も役立つ画像コレクションの優れたリソースへのリンクはありますか? 私はプログラマーです。誰もが知っているように、ほとんどのコーダーは画像が嫌いです..私は脳の残りの半分を強化しようとしています :)

前もって感謝します！

4

4 に答える 4

14

次の行動方針を提案します。

  1. 最も広く使用されている画面解像度の現在の統計を見てみましょう。ご覧のとおり、1366x768 が現在最も人気のある解像度であり、続いて古き良き 1024x768 が依然として多くのユーザー ベースを持っています。また、モバイルの解像度にも注意してください。
  2. ブラウザーのクロムやその他の OS の毛羽立ちによって必要とされる画面領域を考慮に入れます。
  3. 複数の画面サイズに合わせて設計することが日々重要になっているため、1 つだけではなくいくつかのターゲット解像度を選択することを強くお勧めします。これはすべて CSS で適切に処理できます。デスクトップのみをターゲットにしている場合でも、さまざまな画面サイズを検討することは理にかなっています。
  4. まだ Photoshop に慣れていないので、利用可能なグリッドベースの PSD テンプレートの 1 つから始めることができます。私は960px のものと1140pxのものを知っていますが、他にもたくさんあります。複数の画面サイズをサポートする場合は、おそらく複数のグリッドを使用する必要があります。

そして、これらすべてについて少し難しく考えたいと思ったら、次の記事に進んでください: Peter-Paul Koch による2 つのビューポートの物語。

于 2012-08-12T04:56:24.847 に答える
1

あなたは、1280px x 720px と思われる最も使用頻度の高い画面解像度に合わせて Web サイトをデザインしたいと考えています。したがって、それが幅にしたいものです。任意のタイプの背景を作成し、それを 1 つの色または透明にフェードさせ、CSS を使用して背景色を変更するようにしてください。

コンテンツをインラインに保つのに役立つガイドがあることを確認してください。最善の方法は、幅 960 ～ 100 ピクセル、高さ 720 ピクセルの新しいドキュメントを作成し、ガイドを 4 つの側面すべてにドラッグすることです。

次に、ドキュメントのサイズを 1280px x 800-960px に変更できます。

720px にガイドがある理由は、その線より上のすべてがすべての解像度で表示されることが保証されているためです。これは「スクロールせずに見える範囲」と呼ばれます。優れたデザイナーはこれを考慮して、視聴者がサイトの探索に引き込まれるようにします。注目のコンテンツ スライダーは簡単な方法です。

于 2012-08-13T02:15:08.113 に答える
1

スマッシング マガジンを見て、ニュースレターや webdesignerdepot にサインアップして、Codrops.net をチェックしてください。彼らは素晴らしい景品、チュートリアル、および標準の更新を持っています. メールをチェックしてそれらを見るのが大好きです。

PSDについては、サイズが決まっていません。プロの wordpress 開発者が幅 1100px でモックアップしているのを見たことがあります (高さはレイアウトに基づく SO バリアントです)。幅が 1366 ピクセルを超えることはお勧めしません。

私は 1366 または 1440 にするかもしれません。これがほとんどの人が目にする解像度だからです。1920 ワイドでモックアップを送信すると、ウェブサイトが小さすぎると思われますが、コンテンツがまだ 940 ～ 980 である場合は、

編集：

私自身は 1100px または 1440px 幅の PSD を作成しており、メイン コンテンツは常に 940 ～ 980px 幅です。

ボディの背景にグラフィカルに表示するものがあまりない場合は 1100 を使用し、ウェブサイトの「感触」にとって背景がより重要な場合は 1440 を使用します。

于 2012-08-12T04:11:56.980 に答える
-1

インカムピットブル、私はあなたがどこから来たのか理解しています.
私はPhotoshopを学ぼうとしているバックエンド開発者でもあります..
多くのフロントエンドデザイナーは開発段階で何が起こっているのかを知りません...
ほとんどのPhotoshopのモークアップは顧客の仕様...
高さは問題ではありません。960 px (12col,16col,24col)、980 px (12col,24,col)、1000 px (グリッド システムを使用していない人には 100 % レスポンシブ フレンドリー)、または 1140 (より大きなモニターをターゲットとする Web、つまりモバイル ファースト ピクセルではない場合) を使用します。 .)
結局、私たちは開発者として、この問題をすべて解決します。しかし、良いモックアップは重要です...

于 2014-04-14T08:25:08.497 に答える