PSD Webサイトテンプレートに最適なサイズですか？
Photoshop CS5でいくつかのWebサイトを作成しましたが、通常はそれらをNotepad ++で未加工にする傾向があります。私は通常、それらをサイトに公開し、コードを編集してページを更新し、変更を確認します。より専門的な方法に移行し、フォトショップでテンプレート/デザイン全体を作成したいと考えています。飛び込みを控えているのは、まさにその始まりです。
テンプレートに使用する適切な解像度は何ですか？私はさまざまなチュートリアルに出くわしました、そして彼らはさまざまなサイズを言っています。たとえば、私のラップトップの解像度は1366x768です。私のオフィスには22インチLCD=があり、それも非常に大きな解像度であることを知っています。ほとんどのモニターの最小解像度は1024x768だと思います...
Photoshopで新しいテンプレートを作成してWebサイトテンプレートを作成する場合、画像を作成するサイズとその理由を教えてください。
また、トピックについて説明しているので、画像コレクションの優れたリソースへのリンクはありますか。テンプレートを作成するのに最も役立つと思いますか。私はプログラマーであり、誰もが知っているように、ほとんどのコーダーは画像を吸い込んでいます。
前もって感謝します！
私は次の行動方針を提案します：
- 最も広く使用されている画面解像度 の現在の統計を見てください。ご覧のように、現在最も人気のある解像度は1366x768であり、それに続いて、ユーザーベースが非常に大きい古き良き1024x768がそれに続きます。また、モバイルの解像度にも注意してください。
- ブラウザーで必要な画面領域を考慮に入れるchromeおよびその他のOSの綿毛。
- 複数の画面サイズのデザインが日々重要になってきているため、1つだけではなく、いくつかのターゲット解像度を選択することを強くお勧めします。これはすべてCSSでうまく処理できます。デスクトップのみを対象としている場合でも、さまざまな画面サイズを検討することは理にかなっています。
- まだPhotoshopで足を濡らしているので、利用可能な多くのグリッドベースのPSDテンプレートの1つから始めることができます。 960px one と 1140px one は知っていますが、もっとたくさん見つけることができます。とにかく、複数の画面サイズをサポートする場合は、複数のグリッドを使用する必要があります。
そして、これらすべてについてもう少し難しく考えたいと思ったら、この記事に直行してください： 2つのビューポートの物語 Peter-Paul Koch.
スマッシング雑誌を見て、彼らのニュースレターとwebdesignerdepotにサインアップし、Codrops.netをチェックしてください。彼らは素晴らしい景品、チュートリアル、そして標準のアップデートを持っています。メールをチェックして確認するのが大好きです。
PSDについては、それらのセットサイズはありません。私はプロのwordpress開発者のモックアップを幅1100pxで見ました（高さはSOレイアウトに基づくバリアントです）。幅1366px以上はお勧めしません。 。
1366または1440を実行する可能性があるのは、それがほとんどの人に表示される解像度だからです。 1920年にモックアップを送信すると、人々はウェブサイトが小さすぎると思います。
編集：
私自身、PSDを1100pxまたは1440px幅で行い、メインコンテンツは常に940-980px幅です。
ボディの背景をグラフィカルに見ることがあまりない場合は1100を使用し、背景がWebサイトの「感触」にとってより重要な場合は1440を使用します。
あなたは、1280px x 720pxのように見える最も使用される画面解像度のためにあなたのウェブサイトをデザインしたいと思います。したがって、それがあなたの幅にしたいものです、あなたはどんなタイプの背景でも作成でき、それを1つの色または透明にフェードし、CSSを使用して背景色を変更することを確認します。
コンテンツをインラインに保つためのガイドがあることを確認します。最善の方法は、幅960〜100ピクセル、高さ720ピクセルの新しいドキュメントを作成し、ガイドを4辺すべてにドラッグします。
次に、ドキュメントのサイズを1280px x 800-960pxに変更できます。
あなたが720pxでガイドを持っている理由は、その線より上のすべてがすべての解像度で表示されることが保証されているため、「スクロールせずに見える範囲」と呼ばれます。優れたデザイナーは、これを考慮に入れて、オーディエンスがサイトの探索に引き込まれるようにします。注目のコンテンツスライダーは簡単な方法です。