ps網頁設計教程
設計網頁的方法很多,常見的有直接編寫代碼方法,利用可視化軟件設計(例如DreamWeaver)法,利用中間軟件實現格式轉換法(例如Word生成HTML代碼),還有就是PS設計網頁法。綜合各種設計方法的優缺點,可以得出利用PS設計網頁通常可以達到意想不到的效果,這不只是取決於他可以隨意佈局圖片,更得意於其專業的圖像處理能力。下面小編就給大家展示一下PS設計網頁的獨特之處。
工具/原料
Adobo PhotoShop 7.0
IE瀏覽器
方法/步驟
1
打開PS,新建空白文檔,名稱設置爲“feifei工作室”,從預設大小下拉列表中選擇 “1024 x 768”,模式設計爲“RGB顏色”,內容設置爲“白色”,點擊“好”按鈕完成文檔的創建工作。
2
新建一名稱爲“框架”的圖層,利用該圖層實際整個網頁的整體佈局。首先選擇“矩形選擇工具”,然後將矩形的寬度設置爲1024,高度設置爲80,在文檔的'上下兩側各框選一部分內容並填充爲黑色,從而使整個網頁呈現“寬屏幕”效果。
3
在背景圖層的上方新建一新圖層,並命名爲“背景顏色”。點擊“矩形選擇工具”,設置“寬度爲400,高度爲768,然後在窗口的左側框選一部分內容,填充一種深綠色。然後點擊“矩形選擇工具”,設置“寬度爲624,高度爲768,然後在窗口的右側框選一部分內容,填充一種淺綠色。填充兩種顏色飽和度有一點差別的顏色,目地是產生較爲明顯的對比。
4
在“框架”圖層之上再新建一圖層,名稱爲“主體元素”。打開一張事先準備好的百合花圖片,雙擊“背景”圖層將其轉換爲“圖層0”,點擊“魔術棒”工具,在圖片白色區域內點擊,選擇白色區域後,按下DEL鍵刪除白色區域。然後拖放圖片到圖層“主體元素”上,位置如圖所示。
5
然後選擇“矩形選擇工具”,設置“寬度爲624,高度爲768,然後在窗口中選擇花朵右側的一部分內容,並調整其亮度和對比度,使花朵的左右兩側呈現明顯的對比。
6
對該頁面進行細節的調整,增加一些導航欄,信息提示內容和版權信息等內容,最終制作完成的頁面如圖所示。
7
選擇“切片”工具,然後對內容進行切分。切分的好處是有利於文件在網絡上傳輸,同時在用切片工具劃分內容時最好將需要被文字內容替換的部分進行獨立分割。分割完成後的效果如圖所示。
8
找到保存文件的位置,打開"feifei工作室"文件,然後在內容區域內點擊鼠標右鍵,選擇“查看源文件”,就會發現對應的網頁內容已經生成。至此,利用PS設計網頁內容完成。
-
設計方案4篇[熱門]
爲了確保事情或工作有序有效開展,常常要根據具體情況預先制定方案,方案是書面計劃,具有內容條理清楚、步驟清晰的特點。那麼我們該怎麼去寫方案呢?以下是小編整理的設計方案4篇,歡迎大家借鑑與參考,希望對大家有所幫助。設計方案篇1【教學要求】1、體會行楷的運筆特...
-
實用的設計師的作文3篇[優]
在平平淡淡的學習、工作、生活中,大家最不陌生的就是作文了吧,作文是從內部言語向外部言語的過渡,即從經過壓縮的簡要的、自己能明白的語言,向開展的、具有規範語法結構的、能爲他人所理解的外部語言形式的轉化。寫起作文來就毫無頭緒?下面是小編幫大家整理的設計師...
-
我是設計師作文優秀(3篇)
在平凡的學習、工作、生活中,說到作文,大家肯定都不陌生吧,作文是人們以書面形式表情達意的言語活動。你知道作文怎樣寫才規範嗎?以下是小編爲大家整理的我是設計師作文3篇,希望能夠幫助到大家。我是設計師作文篇1設計師千千萬,設計師的領域涉足到方方面面,有高科技的...
-
爭吵的教學設計優秀
在教學工作者實際的教學活動中,總歸要編寫教學設計,教學設計要遵循教學過程的基本規律,選擇教學目標,以解決教什麼的問題。教學設計應該怎麼寫纔好呢?下面是小編整理的爭吵的教學設計優秀,僅供參考,大家一起來看看吧。爭吵的教學設計優秀1一、複習導入1、這節課我們繼...