導航:首頁 > 萬維百科 > 用photoshop做一個網頁設計

用photoshop做一個網頁設計

發布時間:2020-09-21 03:52:19

1、教您怎樣用Photoshop製作一個漂亮的網頁

第一步 首先新建一個文檔。我創建的是寬1100px高1100px的文檔。這個文檔可以用於寬為1024px的站點,仍然還有空間去決定在可視區域之外如何布置,這樣在更大屏幕下也很好的適應。

現在第一步先創建一個美觀抽象背景。我們使用從#1b204c到#472373這兩種顏色按照線性遞減繪制背景。

第二步 現在我們要一個吸引眼球的背景,足夠抽象到不會干擾人閱讀文字。很走運,在GoMedia』s Arsenal站點里有一張很棒的免費水彩圖片,點擊「freebie(免費贈品)」區,你就能找到兩張水彩圖片;我們要的是綠色那張。

現在這樣很開心了,你按下CTRL+I將圖片反置,會在黑色為底的背景上呈現漂亮的粉紫色,這樣就更酷了!

第三步 現在把處理過的水彩圖片拷貝到主畫布上,按下CTRL+T鍵,將其調整到適當大小。這里我們要將右邊淡化為黑色(這樣在後面我們可以更方便地編輯我們的 HTML代碼)。另外,我們也不想在豎直方向過長,因此最好擦掉一些超出的地方。選取一個畫刷,選用黑色擦去底下部分。

注意最好選取帶有一些紋理的畫刷,這樣擦去部分不會顯得很明顯。如果你向下滾動畫刷列表,有一個Photoshop自帶的像圖例中的畫刷。這個畫刷也能用,當然你可能有其他更漂亮的畫刷,用起來更加自如。

你選中以後,在右邊和底下區域黑色填充,這樣這層就覆蓋在整個畫布上了。

2、用photoshop設計網頁首頁時,設置多少精度出來的網頁圖片精度高?

Photoshop製作網頁效果圖的幾個注意點:
第一點:新建文件尺寸大小; 製作網頁效果圖,首先就是要新建文件,那麼要建多大的合適呢?這可不是隨便亂定的,一般我們是要根據目前絕大部分顯示器的最佳解析度來定。在比較早些時候,17英寸為主流顯示器,最佳解析度為1024*768,所以考慮到網頁在顯示器上能有最好的顯示效果,一般都定在1003px以下(這個數據是由顯示器最寬1024px減去瀏覽器右側滾動條寬21px和到1003px)。如果你的網頁超過這個尺寸,那當網頁即使最大化顯示的時候,內容也不能完全呈現,底部就會顯示水平滾動條,這樣會影響用戶體驗! 目前來說19英寸解析度達到1280以上的寬屏顯示器已經成為主流,因此現在很多網頁都開始做得更寬,比如可以做成1200px寬的,但為了能讓1024解析度下都能有好顯示,建議還是定為1003px以下,比如960,980都是合適的。如果不確定應該設置多少合適,可以打開參考網站,看看他們是設置多少。 如何查看別人的網頁尺寸呢?很簡單,使用截圖工具把網頁截下完整的寬度後使用Photoshop用選區工具框選寬度就能在信息面板里顯示出來了!
第二點:字體與字型大小; 字體方面,在瀏覽器里顯示的字體是調用操作系統里的,因為絕大部分操作系統都有宋體、黑體、微軟雅黑、Arial、Tahoma這幾種字體,所以在網頁效果製作時,盡量使用這些字體,如果不使用這些字體,那到在把網頁效果圖做成網頁的時候就沒法做出這種字體效果了;如果非要使用其他字體,那麼在做成網頁的時候只能以圖片的形式來顯示出來,不過考慮到圖片文件都偏大,會讓網頁打開速度降低,所以盡量不要以這種形式顯示。
第三點:關於顏色; 不同的操作系統會有不一樣的調色標准,因在Web上就有定義了一個安全色表,以期能讓符合這個色表定義的顏色,在不同顯示設備上都能有同樣的顯示效果。不過對於不是對色彩十分嚴謹的網頁效果來說,不需要這么嚴格執行,所以關於顏色,我們直接使用Photoshop里默認的顏色就可以了,當然,如果你所設計的網頁對於色彩十分看中,那請認真按照Web安全色標准設計。
第四點:網頁效果圖里填充的內容; 在製作網頁效果的時候,很多地方要填充文字內容,這個時候有些初學者為了方便操作,直接把同樣的內容復制使用,最後整個網頁上看起來就會顯得怪怪的。這里大家在填充內容的時候,最好是使用不一樣的信息,或者乾脆直接從其他網頁上截取內容填充。
第五點:要注重細節處理; 因為你製作出來的效果圖,最終是做為網頁的製作依據,因此在效果圖上,每個模塊的間距都要精確到像素、文字擺放的位置等也要准確到位。
第六點:保存的圖片格式; 效果圖製作好後,建議保存成png格式。不要存jpg格式,因為這個格式對圖片壓縮比較大,會丟失細節。

3、用photoshop製作的網頁要怎麼用dreamweaver製作二級頁面 至少要有兩個鏈接!

你想在dreamweaver製作二級頁面,就在dw中新建一個頁面製作。具體步驟是dw菜單中的文件,新建,頁面類型選html,點擊創建按鈕就創建了一個空白頁面。在這個空白頁面上做你要得二級頁面效果。
給你舉個例子:一級頁面是網站首頁,導航中有一個「聯系我們」,你現在要做的二級頁面就是「聯系我們」這個頁面。在dw中新建一個頁面,做成你需要的效果,然後在dw中打開一級頁面(網站首頁),在導航「聯系我們」這幾個字或者圖片加個超鏈接,鏈接到你剛剛做好的二級頁面即可。

4、photoshop在網頁製作的作用

首先,做網頁設計為什麼要使用photoshop,photoshop是一個圖形圖像處理軟體,而且是可視化的操作,可以讓設計師更方便的進行操作。那有人會說Firworks可以設計網頁嗎,答案肯定是有的,因為Firworks也是圖形圖像軟體,只是根據個人的操作習慣了,另外一般Firworks給人的印象是一個只會做GIF動畫的軟體,可能是對軟體的偏見吧,現在絕大部分做網頁設計都使用PS。從軟體的角度來說,PS的功能會比FIR要強大許多!

從軟體的界面的設計,到軟體的實用性,以及特效的製作上,都有著不可超越的特性,而且photoshop還在不斷的升級過程中,現在最高的版本是CS6,它不僅僅可以實現網頁設計的製作以及平面設計效果圖的製作,還可以製作GIF動畫以及3D效果圖!

做為做網頁設計的平台,photoshop起著至關重要的作用,做網頁設計,首先必須要有一個自己足夠熟悉的平台,而且在操作上要有效率,後期做網頁設計,效率是一個非常值得關注的問題。

5、用PS做一個網頁設計圖

挺簡單的,現在fireworks中做下PSD圖,然後在DW中處理一下就行了

我也有現成的,加些分留個郵箱可以發給你。。。。

網站分為好多類型,像個人主頁、門戶、論壇等,你可以選擇其中的一個來做。。如果你是新手的話,那就做個個人主頁吧,比較自由,做成什麼樣的都可以。。。。
如果你的程序搞的比較好的話,那就做個論壇吧、

6、怎麼使用PS製作一個網頁

你好!
准確的說,ps是製作網頁的其中一個軟體之一,製作網頁有專用的「網頁三劍客」:PS、DW、flash。
想要做網頁的話,你起碼要會前兩個,其中
ps在網頁製作裡面的作用主要就是:劃分切片+圖片處理。

劃分切片:就是將你在ps裡面做好的網頁版面進行合理的劃分,劃分為一個個小的切片,然後用DW對這些切片進行布局。

圖片處理:這個很好理解,就是對網頁圖片進行優化+處理,以節省空間和達到你想要的圖片效果。

最終的網頁文件是在DW這個軟體裡面完成的,單靠ps做不出來一個完整的網頁。

7、如何用Photoshop做網頁設計

如果是給個人做,怎麼做都無所謂。如果是在公司里給客戶做。這一步不可少,出了效果圖後,要給客戶看。等客戶確定不再修改時再做網頁,目的就在於防止客戶反復修改,動布局!
另外會做網頁效果圖,代表你的設計能力。用dreamweaver直接做的後果是邊想邊做,容易把設計思路搞混了!
據我所知,這樣的教程基本沒有。因為做網頁效果圖只要基本的操作,有時從別的網頁截一塊下來處理一下,直接用到自己的效果圖上。

一般顯示器解析度 寬:1024 高: 768 寬減去滾動條的寬度, 一般為1003-1004 不會有橫拉條 高度 根據頁而定
網頁設計需要的PS操作技術並不是很多,只要掌握基礎就行了。
但是你想要做好一個稿子就不是那麼簡單了。
這當中有一些天賦的因素,但是更多的是學習。
你可以從模仿別人的稿子開始,漸漸的融入自己的東西。

http://www.68design.net/
這個站每天都會有新的酷站收藏,也有設計欣賞。
http://www.zcool.com.cn/
這個站素材豐富而且也有酷站收藏。

要做好網頁設計,一定要多看,拚命的看並且吸收裡面的東西,看看高手們是怎麼處理細節的,這樣慢慢自然會有提高。
是否可以解決您的問題?

8、如何用Photoshop製作網頁模板

網頁中的元素有很多,像Banner條、文本框、文字、版權、Logo、廣告等。盡量把這些相對獨立的元素放在不同的圖層中,這樣方便以後的再編輯。 不過圖層一多,就顯得很凌亂,可建立多個圖層組來進行管理。單擊圖層面板右上角的小三角按鈕,從彈出菜單中選擇「新建組」,在隨後出現的對話框中為新建組取一個名稱(如:「網頁頂部」),確定即可。這時圖層面板中多出一個文件夾圖標,即圖層組。把相關聯的圖層都拖放到同一組中,比如網頁頂部的所有元素,標題、菜單、Logo等都放到「網頁頂部」組中(見圖1)。同樣方法可以建立多個組,在組的下面還可以建立子組。 點擊圖層組前面的小三角,就可以像文件夾一樣展開或折疊它,這樣圖層面板就顯示干凈利落得多,要修改某個元素也能很容易找到。對同一組中的所以圖層可以方便地進行統一操作,如整體復制、刪除、隱藏、合並等。 小提示: ★如果你想借鑒某個網頁的設計,不妨把它截成圖片放在最下面的圖層中,再拉出多個參考線劃出網頁的大致版式,再在此基礎之上邊參考邊製作自己的網頁。 從Photoshop到Dreamweaver的轉換 在Photoshop中設計好之後,下面就要用切片工具把它轉換成網頁。有些人在切片之前喜歡合並圖層,其實沒有必要,合不合並圖層對最終生成的網頁沒有多大影響,反而會妨礙以後的編輯修改。 第1步:我們最終需要的,只是Photoshop中製作的圖形和框架。選擇切片工具(快捷鍵為K),把需要的每個圖形獨立切分出來。每切分出一個圖形,在它的左上角會顯示出切片編號(見圖2)。 第2步:在工具箱右擊切片工具,從彈出菜單中選擇「切片選擇工具」,用它可以選取、移動切片,並可以調整切片的大小。右擊某個切片還可以刪除或劃分這個切片。

9、用ps做網頁尺寸一般是多大

網頁分為主區和背景區,主區一般是950px~980px的寬度,高度沒限制。背景區你可以按到1920px的寬度來做,適合適應不同的顯示器。
這方面你要和寫CSS的人溝通一下,他會告訴你什麼叫主區什麼叫背景區。

10、用Photoshop做網頁設計圖的教程有哪些

photoshop是處理圖片的軟體,並非做網頁的。
網頁需要格局,代碼等。如果只是拿PS做一張圖,再用firework去隔,會很簡單,很枯燥的。
再學學dreamweaver

與用photoshop做一個網頁設計相關的知識