【转】Photoshop网站设计：DesignStudio
from:http://tech.163.com/07/0412/10/3BSDG1G7000920P0.html
????????今天我們來練習使用Photoshop設計一個簡單而專業的網站版面，這是一個名為“DesignStudio”的工作室的網站。
先看一下最終效果。
?
具體操作步驟如下。
1.按Ctrl+N打開“新建”對話框，將文檔大小設置為766x700像素，其它采用默認設置，完畢后單擊“確定”按鈕。選擇工具箱中“矩形工具”，繪制一個滿畫布的矩形，然后我們將要使用圖層樣式制作出如圖1所示的背景效果。
?
選擇菜單命令“圖層圖層樣式漸變疊加”，打開“圖層樣式”對話框，按如圖2所示設置漸變疊加選項。
其中漸變色的具體設置如圖3所示。
?
?
2.選擇工具箱中的“鋼筆工具”，確認選項欄中按下的是“形狀圖層”按鈕，按如圖4所示繪制20條三角形的光線形狀。
?
取消選擇路徑后的效果如圖5所示。
?
所有這些光線形狀都具有以下相同的設置。先在“圖層樣式”對話框中設置顏色疊加選項，如圖6所示。
為了方便，我們將所有這些光線形狀圖層合并為一個組，然后將該組的混合模式修改為“柔光”，效果如圖7所示。
?
?
3.從http://www.deviantart.com下載evil_bloodsplat筆刷，然后將它放置到目錄\Program Files\Adobe\Adobe Photoshop CS2 \Presets\Brushes。選擇工具箱中的“畫筆工具”，然后在“畫筆”面板中單擊右上角小箭頭，在彈出菜單中選擇命令“載入畫筆”，如圖8所示。
?
載入畫筆后，創建一個新的圖層，將前景色設置為白色，使用合適大小的畫筆在該圖層中繪制出如圖9所示的形狀。
?
4.使用“矩形工具”，畫出如圖10所示的白色網站面板。
并為該圖層應用如圖11所示的“投影”圖層樣式。
?
?
5.仍使用“矩形工具”，再創建一個新的形狀圖層，如圖12所示，顏色值為4A4A4A。
?
6.再次使用“矩形工具”，繪制出如圖13所示的形狀圖層。圖中所法的兩種顏色稍后通過設置漸變疊加來實現。
?
“漸變疊加”圖層樣式的選項如圖14所示。
其中漸變色的具體設置如圖15所示。
?
?
7.用“畫筆工具”在畫布上畫出一些不同大小的點，顏色值分別是C34713和BAE1FC，如圖16所示。
?
8.選擇工具箱中的“直線工具”，按如圖17所示畫出一條垂直的分隔線，顏色值為646464。
?
整體效果如圖18所示。
?
然后將分隔線復制出三個副本，并改變它們的位置，得到如圖19所示的效果。
?
9.現在按哪圖20所示的字符設置輸入網站的按鈕文字。
具體文字效果如圖21所示。
?
?
10.選擇工具箱中的“自定形狀工具”，在選項欄中單擊“形狀”右側的向下小箭頭，在彈出窗口中單擊右上角的向右小箭頭，然后選擇命令“全部”，當出現提示對話框時，單擊“追加”按鈕，然后從形狀列表中選擇如圖22所示的“靶心”形狀。
?
并將其顏色值設置為01C2EE，如圖23所示。
?
如圖24所示是整體效果。
?
11.下面要添中網站的名稱了。按如圖25、圖26、圖27所示設置這些文字的選項。
?
?
完成文字設置后的整體效果如圖28所示。
?
?
12.再輸入網站版面中的其它文字。這些文字都具有如圖29所示相同的投影效果。
?
分別按如圖30、圖31、圖32所示設置字符選項。
?
?
文字設置完成后的效果如圖33所示。
?
?
13.下面添加其它大段文本。這些文本都設置如圖34所示的“投影”圖層樣式。
?
然后按如圖35、圖36所示分別設置這些字符的格式。
?
?
設置完成后的效果如圖37所示。
?
14.使用“矩形工具”畫出如圖38所示的兩個矩形，用于放置日期，其顏色值為00A1DC。
?
15.下面要添加日期。其字符選項如圖39所示。
?
添加完日期后，網站版面就設計完成了。最終效果如圖40所示。
轉載于:https://www.cnblogs.com/savageworld/archive/2007/04/29/731777.html
總結
以上是生活随笔為你收集整理的【转】Photoshop网站设计：DesignStudio的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Asp.net 2.0 制作复合控件示例
- 下一篇： 如何把你的搜索引擎也加入到Firefox