2012-08-12 73 views
6

我在Photoshop CS5中創建了一些網站,但我通常傾向於在記事本++中使它們變爲原始。我通常讓他們住在網站上,編輯代碼並刷新頁面以查看更改。我想轉向更專業的方法,並在Photoshop中製作整個模板/設計。讓我從潛水回來的東西,是非常非常開始大聲笑..PSD網站模板的最佳尺寸?

什麼是一個很好的決議用於模板?我遇到過不同的教程,他們有不同的尺寸。例如,我的筆記本電腦分辨率是1366x768。我的辦公室裏有一臺22英寸的液晶顯示器,我知道這是一個非常大的分辨率。我會假設大多數顯示器的最小分辨率爲1024x768 ...

在Photoshop中創建新模板以創建網站模板時,我應該製作圖像的大小以及爲什麼?

另外,由於我們在這個話題上,你們有任何鏈接到圖像集合的良好資源,並且你發現可以幫助你創建你的模板最?我是一名程序員,衆所周知,大多數編碼人員都會吮吸圖像..我只是想加強我的另一半大腦:)

在此先感謝!

+0

960px在2年前很流行,你應該考慮設計多種屏幕尺寸 – SRN 2012-08-12 04:11:39

回答

15

我會建議採取以下行動歷程:

  1. 看看爲most widely used screen resolutions當前統計信息。正如你所看到的,1366x768是目前最流行的分辨率,其次是好的舊的1024x768,它仍然擁有龐大的用戶羣。並留意移動解決方案。
  2. 因瀏覽器鉻和其他操作系統絨毛所需的屏幕空間不足。
  3. 因爲針對多種屏幕尺寸的設計每天都變得越來越重要,所以我強烈建議您選擇一些目標分辨率而不是僅僅選擇一種。這可以很好地由CSS處理。即使您只針對桌面設備,考慮不同的屏幕尺寸也是有意義的。
  4. 既然你還在用Photoshop來弄溼你的腳,你可以從許多基於網格的PSD模板之一開始。我知道960px one1140px one,但你可以找到更多。無論如何,如果您決定支持多種屏幕尺寸,您可能必須使用多個網格。

然後,當您想要考慮所有這些更困難時,請直接閱讀Peter-Paul Koch的文章:A tale of two viewports

+1

我選擇了這個答案。您的文章寫得很好,提供了來源,顯然您提供了最詳細的答案。我感謝大家的回答,並希望我可以全部選中!感謝所有其他人,花時間回答我的問題。不幸的是,我只能選擇一個作爲「答案」。 – IncomePitbull 2012-08-26 00:26:51

1

看看砸雜誌和註冊他們的通訊以及webdesignerdepot和檢查Codrops.net。他們有很棒的免費贈品,教程和標準更新。我喜歡檢查我的郵件以查看它們。

至於PSD - 他們沒有設置大小。我已經看到專業wordpress開發人員樣機在1100px寬(根據您的佈局高度是SO變體)。我不會推薦寬度超過1366像素。

我可能會做1366或1440,因爲這是大多數人會看到的決議。當你在1920發送樣機廣泛的人認爲該網站是太小,當內容仍是940-980,它們都

編輯:

我自己做的PSD的在無論是在1100px或1440px寬和主要內容是總是940-980px寬。

我在沒有太多需要以圖形方式查看身體背景的情況下使用1100,而當背景對網站的「感覺」更爲重要時,使用了1440。

1

你想設計你的網站最常用的屏幕分辨率,似乎是1280像素×720像素。因此,這就是你想要的寬度,你可以創建任何類型的背景,並確保將其淡入一種顏色或透明地使用CSS來改變背景顏色。

請確保您的指南能夠幫助您保持內聯,最佳方式,創建一個寬度爲960-100px和高度爲720px的新文檔,然後將指南拖到所有四面。

然後,您可以將文檔大小更改爲1280像素800-960像素。

你在720px有一個指南的原因是因爲所有高於該行的東西都能保證在所有分辨率下都能看到,所以它被稱爲「在上面」。優秀的設計師考慮到這一點,以確保觀衆將被吸引到探索網站,一個特色的內容滑塊是一個簡單的方法。

-1

incomepitbull,我知道你在哪裏...
未來我也誰是努力學習Photoshop的後端開發者..
許多前端設計者是無知的發生的事情的發展階段..
大多數Photoshop取決於客戶的規格...
高度並不重要;使用960 px(12col,16col,24col),980 px(12col,24,col),1000 px(對於不使用網格系統的用戶,100%響應友好)或1140(針對較大顯示器的網頁, )
畢竟,作爲開發者,我們解決了所有這些問題;但好的模型很重要...