導航:首頁 > 萬維百科 > ps網頁設計圖片

ps網頁設計圖片

發布時間:2020-08-31 10:56:32

1、如何用PS做網頁效果圖



上次有空做了個。我用的是GIF的動態效果。你也可以直接做圖片然後保存網頁格式,尺寸什麼的自己調。不要在意這些細節。。

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、用PS做好網頁圖片,怎麼樣快速變為網頁

1、先打開photoshop設計好你的網頁背景,如圖所示,如何設計這樣的頁面我就不講了,不屬於該經驗的內容,下面就是要介紹如何將這樣的圖片轉換問網頁。
2、在工具欄選擇【切片工具】,大部分人的工具欄只顯示裁剪工具,右鍵單擊裁剪工具就能看到切換工具,選擇它即可。
3、屬性欄進行設置,先來設置樣式,有三種樣式可供選擇,正常樣式、固定長寬比、固定大小。
4、正常模式下,滑鼠拖動可以繪制一個矩形的切片,切片的大小和長寬比都是任意的,點擊切片就會使切片的邊框變成棕褐色(如下面第二幅圖),並出現八個控制點(如下面第三幅圖,拖動控制袋可以任意的改變切片的大小),另外,直接拖動切片也可以改變切片的位置。
5、固定長寬比模式下,拖動滑鼠可以繪制切片,切片的大小是任意的,但是切片的長寬比是固定不變的。為了方便,一般長寬比和圖像的的長寬比是相同的。怎樣知道圖像的長寬比呢,參考下面第二幅圖,在圖像--圖像大小下,打開圖像大小對話框,這里你可以找到圖像的寬度和高度。
6、固定大小模式下,切片的長和寬都是你設定的,不會改變,如圖所示,點擊一下滑鼠就可以繪制一個切片,我繪制的這些切片都是一樣大小的。選中一個切片,切片變成棕色的邊框,並出現了八個控制點,拖動控制點也可以改變切片的大小。
7、一般將圖片切割成網頁的時候,我們可以使用一種簡便的方法,切換到任意一種模式下,右鍵單擊圖像,然後在打開的右鍵菜單中,選擇【劃分切片】,打開劃分切片的對話框。
8、設置將圖片切分為水平4個切片,垂直5個切片,點擊確定按鈕,下面第二幅圖就是我們建立這個切片。這是建立切片最快的速度了。
9、拖動控制點可以改變整行或者整列的寬度和高度。
10、除此之外,我們還可以對某個切片進行進一步的切割,右鍵單擊某個切片,然後選擇【劃分切片】,打開劃分切片對話框,設置橫向和縱向的切片個數,如圖所示
11、最後,一個關鍵的設置就是,右鍵單擊某個切片,然後在打開的右鍵菜單中選擇【編輯切片選項】,打開切片選項對話框。
12、在這里你要設置的有切片的名稱,這個名稱也就是網頁圖片的名稱,默認系統給出的名稱即可。設置url,也就是圖片的鏈接,在網頁上點擊圖片就能打開這個鏈接;目標在動態圖片中需要設置,即載入URL時的楨,在靜態的圖片中不需要設置;信息文本也就是鼠表放在網頁上的圖片上的時候,出現在瀏覽器底部狀態欄的文字信息;Alt標記就是滑鼠放在圖片上,自動出現在圖片周圍的文字。設置好這些參數以後點擊確定按鈕。
13、最後就是要保存html文件了,在菜單欄上執行:文件--存儲為web和設備所用格式
14、在打開的對話框中,點擊【雙聯】你會看到兩個圖片,上面這個是處理前的原圖,下面這個是處理後的圖片,你可以對比兩個效果以後再保存圖片。
15、設置格式為jpeg,其他參數參考下面的這幅圖,一般默認系統給出的參數即可。點擊儲存按鈕。
16、最關鍵的步驟就是在這里,設置格式為【html和圖像】,然後點擊保存按鈕。
17、你會看到保存後有兩個文件,一個是圖片文件夾,一個是html文件,雙擊打開html就可以看到一個網頁了。
18、用dreamweaver打開網頁文件可以對齊進行進一步的編輯。

4、如何用PS製作網頁首頁的效果圖?

ps、fireworks都可以用來做效果圖的,用這些工具做效果圖的時候只要注意一下欄目的排版以及用色的協調性,ps做網頁效果圖常用的效果不多,所要只要掌握幾種常用的工具用法就可以了:選取、剪切、填色、漸變、蒙版、切圖等。
剛開始初學的可以網上找一些好點的模版下來自己嘗試著按自己的想法進行修改,等熟練掌握以後再完全自己構思、設計!

5、PS製作網頁圖片

先製作一個純色。使用蒙版設置半透明。

裁切成你想要的那種形狀。

然後下面放上深底色。

然後復制幾層,排列一下

 

最後把需要的區域裁切出來就好。。  大體原理就是這樣。實際操作的時候可以不同裁切,直接調整需要的大小就好。

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

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

7、怎麼將PS的圖片製作成網頁

這要牽扯三個軟體:
1.photoshop(網頁圖片製作)
2.imageReady(PS圖片放進去,導出「將優化結果存儲為..」--保存類型選擇--html)
3.Dreamweaver(打開HTML文件,你就可以看見代碼了)

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

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

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

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

9、用PS製作網頁要存什麼格式的圖片

存儲為web格式 也可以直接存儲為png格式即可。

ps製作網頁步驟:
1.先用Photoshop做一個網頁圖片;
2.Ctrl+R調出標尺,在圖片上繪製表格,框選出要做鏈接的部分;
3.使用切片工具,按照繪制的表格劃分切片
4.以上步驟完成後,進行操作「文件」>「儲存為Web和設備所用格式」,在打開的窗口中按照自己的需要為網頁圖片作設置,設置完成後,「儲存」,保存類型「html和圖片」,切片「所有切片」。
5.接下來用Dreamweaver打開html文件,為其作鏈接及其它。
6.最後保存就完了。

與ps網頁設計圖片相關的知識