1、ps網頁設計教程
PS軟體應用十分的廣泛,修改圖像,運用圖層蒙版設計簡單網頁,文字排版,網頁優化,包括導航圖,網頁底端的頁腳,網頁主題內容,特效文字的製作,動作按鈕的設計等。今天一起來學習如何用PS來設計簡單的網頁這篇文章吧。
如何用PS來設計簡單的網頁
新建一個800X600像素的空白背景,顏色模式設置為RGB模式。RGB模式顏色是由紅色,綠色,藍色三種顏色相交構成,可以更好的顯示網頁中的色彩內容。
新建文件,點擊確定,空白文件會自動顯示在軟體中。對於新建空白文件來說,圖像的寬度和高度的大小要按照等比例進行設計,也可以不勾選重新定義新像素來實現。
打開一張車的圖片,移動到白色背景畫布中,選擇圓角矩形工具,選擇路徑為了方便轉換為選區,設置為5個像素,像素越大,圓角矩形的四個圓角就是更加的明顯,然後選擇漸變工具,選中系統自帶的黑白漸變,修改黑白漸變的顏色,改為灰白,也可以設置前景色為灰色,背景色為白色進行漸變的填充,然後點擊確定。
然後選擇工作路徑,滑鼠CRL點擊工作路徑,設置為選區,選中線性漸變類型,然後畫出漸變的顏色。漸變的方向是從上到下為白色到淺灰色的漸變效果圖。
然後選擇修改收縮2個像素,就是將選區收縮小2個像素,變小一些,然後再次從下向上漸變,然後alt快捷鍵復制2個,如圖所示,然後找到車的一個的圖標按鈕,然後用磁性套索工具勾勒好,然後滑鼠左鍵拉動到合適位置,然後選擇3個圖層,然後水平分布,和居中分布對齊。然後選擇左對齊分布,分布均勻。分布按鈕是在選擇工具上方的工具欄中,有平均分布對齊等多個按鈕。
然後再次用鋼筆工具勾畫另外一個車的圖標,然後再用自由變換調整到合適位置,然後點擊2個圖層之後,進行左對齊分布。分布到形狀中的最左邊位置即可。
再次選擇一個不同的車的圖標設計圖片,然後用鋼筆工具進行勾畫圖標,或者為了方便,可以直接用魔棒工具來選擇,選中其需要圖形的一部分。
然後再次選中圖形,形狀圖形,全部選中相應圖層,調整水平分布和左對齊分布。當分布不均勻,可以按住滑鼠左鍵自動進行調整。
所有的圖標都自由變換,調整到合適位置,如圖。按住crl+t來實現圖形的自由變換的內容。如圖
輸入相應的文字,文字的顏色設置為黑色,將其三個文字圖層,按住shift鍵和左右方向鍵進行移動調整來改變。之後將車的圖片進行調整,便於觀看,文字進行排版即可。
2、如何用ps設計網頁?
?
3、如何用photoshop進行網頁設計
你是想要在原來的設計下面加上一塊空白,那可以選擇「圖象」-「畫布大小」,在彈出的對話框中,先設置定位,如果在下面加長就點擊向上的鍵頭,這樣就會在原圖的下方加入空白,現在再輸入設定高度數字就OK了!
4、如何用Photoshop做網頁設計
如果是給個人做,怎麼做都無所謂。如果是在公司里給客戶做。這一步不可少,出了效果圖後,要給客戶看。等客戶確定不再修改時再做網頁,目的就在於防止客戶反復修改,動布局!
另外會做網頁效果圖,代表你的設計能力。用dreamweaver直接做的後果是邊想邊做,容易把設計思路搞混了!
據我所知,這樣的教程基本沒有。因為做網頁效果圖只要基本的操作,有時從別的網頁截一塊下來處理一下,直接用到自己的效果圖上。
一般顯示器解析度 寬:1024 高: 768 寬減去滾動條的寬度, 一般為1003-1004 不會有橫拉條 高度 根據頁而定
網頁設計需要的PS操作技術並不是很多,只要掌握基礎就行了。
但是你想要做好一個稿子就不是那麼簡單了。
這當中有一些天賦的因素,但是更多的是學習。
你可以從模仿別人的稿子開始,漸漸的融入自己的東西。
http://www.68design.net/
這個站每天都會有新的酷站收藏,也有設計欣賞。
http://www.zcool.com.cn/
這個站素材豐富而且也有酷站收藏。
要做好網頁設計,一定要多看,拚命的看並且吸收裡面的東西,看看高手們是怎麼處理細節的,這樣慢慢自然會有提高。
是否可以解決您的問題?
5、用PS做的網頁設計如何做成動態網站效果
用PS做的是效果圖,需要前端開發人員編寫代碼才可以在網站上展示出來。
簡單來說,在PS里做好之後,需要切圖。把圖片切割成適合在網站上瀏覽。
切圖時需要把文字分離出圖片的要處理好。
切好圖片之後,需要用html結合JavaScript等知識編寫代碼。
這樣寫出的頁面還只是靜態的網站。
如果想要做成動態的效果,還需要搭建後台,連接資料庫等。
6、怎麼使用PS製作一個網頁
你好!
准確的說,ps是製作網頁的其中一個軟體之一,製作網頁有專用的「網頁三劍客」:PS、DW、flash。
想要做網頁的話,你起碼要會前兩個,其中
ps在網頁製作裡面的作用主要就是:劃分切片+圖片處理。
劃分切片:就是將你在ps裡面做好的網頁版面進行合理的劃分,劃分為一個個小的切片,然後用DW對這些切片進行布局。
圖片處理:這個很好理解,就是對網頁圖片進行優化+處理,以節省空間和達到你想要的圖片效果。
最終的網頁文件是在DW這個軟體裡面完成的,單靠ps做不出來一個完整的網頁。
7、用PS做一個網頁設計圖
挺簡單的,現在fireworks中做下PSD圖,然後在DW中處理一下就行了
我也有現成的,加些分留個郵箱可以發給你。。。。
網站分為好多類型,像個人主頁、門戶、論壇等,你可以選擇其中的一個來做。。如果你是新手的話,那就做個個人主頁吧,比較自由,做成什麼樣的都可以。。。。
如果你的程序搞的比較好的話,那就做個論壇吧、
8、如何在Photoshop中設計網頁的網格
設計網頁的網格方法1
第一種方法使用GuideGuide 卡梅倫McEfee建立垂直列。這Photoshop插件被認為是處於測試階段,但是從我與它的經驗的一切工作得很好,甚至有談GuideGuide 2的發布,其中將包括更多的功能。GuideGuide頁面上可以找到安裝說明。還有一個使用它的視頻教程是由羅素布朗一起在Adobe 。
成立於5秒您的網格
確定利潤率列和排水溝寬度,數量。然後點擊「創建指南」。
如果你設計樣稿的畫布寬,做快速的數學運算,使保證金長度要限制你的960像素的網格允許。例如,如果在畫布是1200像素寬,然後左,右邊緣將每個120像素。
例如12列設置為120像素的20萬像素的排水溝和利潤率。
您還可以設置基線網格這樣,但你最終很多導游。一個更好的選擇可能是方法上的一個有特色的的邁克貴金屬的方法及工藝視頻 ...
方法和工藝的可擴展的基線網格
這里是一個步驟的簡要介紹設立一個可擴展的基線網格。
建立網格的基準值,然後創建您的圖案模板。基線網格是由領先的正文中(或行高)。例如,如果您的設計的主體副本是在13點Helvetica,在18分的領先,那麼你將成立一個18像素的基線網格。
創建一個Photoshop文件,該文件是您的基線網格的高度,填補了底部的像素,並留下其餘的像素透明。在這種情況下,畫布的尺寸將1個像素寬和18像素高。
「全選」,然後保存為一個新的模式。您可以通過編輯→定義圖案...
轉到調整圖層→模式,並選擇新創建的網格圖案。
根據需要,調整不透明度。
列和基線網格1的方法的一個例子。
優點
你會得到一個可選的基線網格,您可以使用獨立的垂直的柱網。基線網格,可以創建視覺上的混亂,當在頂部的設計樣稿奠定。使用這種方法,它可以只在需要時進行切換。
如果你喜歡使用您的網格指南,這是更好的解決方案。
您可以隱藏和顯示網格通過一個簡單的快捷方式。
缺點
使用垂直參考線來標記文檔中的其他元素,可很難,因為你可能會混淆他們與電網。
方法2相比,網格你的選擇是不具體或全面(如設置的橫向模塊的高度)。
數學網格線的確定,不一定會配合像素網格。這意味著你的導游,可以在某些情況下,下降不均,並最終被定位實際像素的中間。
這種方法需要兩個獨立的進程相比只是一種方法,即將來創建一個垂直和基線網格,。
設計網頁的網格方法2
模塊化網格模式是所有功能於一身的的網格解決方案 。該工具創建一個垂直的柱狀網格和基線網格所有作為一個模式 。採用模塊化的網格模式有兩種方法 :
除了對Photoshop 的應用程序面板,這也適用於煙花,GIMP和微軟Expression設計 。請注意,您必須有最新的軟體(Adobe CS5或等值的其他應用程序之一中)和本小組的互聯網連接工作。話雖這么說,如果您已經創建了一個模式,並將其保存在資料庫中,然後你就可以訪問它,而無需任何其他 。
Web應用程序
瀏覽器,Firefox,Safari和Opera。Web應用程序使您可以創建一個網格模式和所有格式的瀏覽器直接下載 。
無論你選擇,隨便挑一個模塊的寬度,排水溝寬度和基線數量,以及模塊化的網格模式,沒有休息。您也可以指定一個水平模塊的高度。
9、教您怎樣用Photoshop製作一個漂亮的網頁
第一步 首先新建一個文檔。我創建的是寬1100px高1100px的文檔。這個文檔可以用於寬為1024px的站點,仍然還有空間去決定在可視區域之外如何布置,這樣在更大屏幕下也很好的適應。
現在第一步先創建一個美觀抽象背景。我們使用從#1b204c到#472373這兩種顏色按照線性遞減繪制背景。
第二步 現在我們要一個吸引眼球的背景,足夠抽象到不會干擾人閱讀文字。很走運,在GoMedia』s Arsenal站點里有一張很棒的免費水彩圖片,點擊「freebie(免費贈品)」區,你就能找到兩張水彩圖片;我們要的是綠色那張。
現在這樣很開心了,你按下CTRL+I將圖片反置,會在黑色為底的背景上呈現漂亮的粉紫色,這樣就更酷了!
第三步 現在把處理過的水彩圖片拷貝到主畫布上,按下CTRL+T鍵,將其調整到適當大小。這里我們要將右邊淡化為黑色(這樣在後面我們可以更方便地編輯我們的 HTML代碼)。另外,我們也不想在豎直方向過長,因此最好擦掉一些超出的地方。選取一個畫刷,選用黑色擦去底下部分。
注意最好選取帶有一些紋理的畫刷,這樣擦去部分不會顯得很明顯。如果你向下滾動畫刷列表,有一個Photoshop自帶的像圖例中的畫刷。這個畫刷也能用,當然你可能有其他更漂亮的畫刷,用起來更加自如。
你選中以後,在右邊和底下區域黑色填充,這樣這層就覆蓋在整個畫布上了。