網站建設實例之某公司主頁設計

1、第四周 第八章網站建設實例第八章網站建設實例本章要點本章要點 Photoshop中不規(guī)則形狀的選取中不規(guī)則形狀的選取 圖層中元素的排列圖層中元素的排列 商標的樣式設計商標的樣式設計Photoshop中濾鏡的使用方法與技巧中濾鏡的使用方法與技巧 ImageReadyImageReady中動畫的制作中動畫的制作維達制造有限公司主頁設計實例維達制造有限公司主頁設計實例 -項目背景項目背景第八章網站建設實例第八章網站建設實例淮安市維達科技有限公司是一家專業(yè)從事全系列各種規(guī)格LED顯示屏的研發(fā)、制造、技術服務的企業(yè)。具有一支顯示行業(yè)豐富經驗的專業(yè)隊伍，匯集優(yōu)秀的光電技術、數字電路技術及計算機技術的人才。

2、產品結合了日本、美國、臺灣等先進LED數碼電子顯示屏的最新科技，采用世界最先進的LED顯示屏專用技術。隨著技術的不斷升級換代，工藝水平的不斷提高，使我公司產品在質量、性能、價格等方面都具有很強的競爭力。公司以技術為基礎，視質量為生命。公司的技術人員多，他們是公司的主要力量。我們非常重視技術改進工作，積極采用新器件、新工藝。能反映公司奉行“誠信為本，質量第一，優(yōu)質服務，追求卓越”的方針，使公司深受廣大客戶信賴和贊譽。相信具有競爭力的、質量過硬和服務優(yōu)良的產品一定會讓您滿意。第八章網站建設實例第八章網站建設實例1.打開Photoshop 軟件，新建一個RGB文件，寬度為778像素，高度為450像素

3、，分辨率為72dpi，保存文件命令為“維達制造有限公司.psd”。2.填充背景色為藍色，新建一圖層，并在畫面的左側做出從大到小的小圓，并排列如圖所示。 制作思路：選中“橢圓選區(qū)工具”，在屬性設置中設置“樣式”為“固定大小”，寬12像素，高12像素，填充白色，依次縮小大小，然后調整間距，然后用快捷鍵Ctrl+J復制圖層，然后鏈接相關的圖層，對這些圖層首先左對齊，然后垂直方向均勻分布，最后執(zhí)行“圖層” “合并鏈接圖層”命令。維達制造有限公司主頁設計實例維達制造有限公司主頁設計實例 -效果圖的制作效果圖的制作第八章網站建設實例第八章網站建設實例3.進行填充白色操作，然后設置不透明度50%左右，如圖所

4、示維達制造有限公司主頁設計實例維達制造有限公司主頁設計實例 -效果圖的制作效果圖的制作第八章網站建設實例第八章網站建設實例4.復制上面小圓圈圖層，然后執(zhí)行復制上面小圓圈圖層，然后執(zhí)行“編輯編輯”“變換變換”“水平翻轉水平翻轉”命令命令（快捷鍵（快捷鍵Ctrl+T），調整位置到畫面的右側，如圖所示。），調整位置到畫面的右側，如圖所示。維達制造有限公司主頁設計實例維達制造有限公司主頁設計實例 -效果圖的制作效果圖的制作第八章網站建設實例第八章網站建設實例5.打開素材圖片打開素材圖片“l(fā)ogo.jpg”，用魔術棒工具將紅色的企業(yè)標志選出并復制，用魔術棒工具將紅色的企業(yè)標志選出并復制選區(qū)中的內容，回到

5、實例圖中粘貼企業(yè)標志圖形并調整大小，如圖所示。選區(qū)中的內容，回到實例圖中粘貼企業(yè)標志圖形并調整大小，如圖所示。維達制造有限公司主頁設計實例維達制造有限公司主頁設計實例 -效果圖的制作效果圖的制作第八章網站建設實例第八章網站建設實例6.維達制造有限公司主頁設計實例維達制造有限公司主頁設計實例 -效果圖的制作效果圖的制作第八章網站建設實例第八章網站建設實例7.新建圖層，設置前景色為深藍色（新建圖層，設置前景色為深藍色（ RGB值值070FA8），利用），利用“圓角矩形圓角矩形工具工具”，在屬性中設置為，在屬性中設置為“填充像素填充像素”模式，然后繪制圓角矩形區(qū)域，模式，然后繪制圓角矩形區(qū)域，然后使

6、用然后使用“添加到形狀區(qū)域添加到形狀區(qū)域” ，繪制，如圖所示。，繪制，如圖所示。維達制造有限公司主頁設計實例維達制造有限公司主頁設計實例 -效果圖的制作效果圖的制作第八章網站建設實例第八章網站建設實例8.使用使用“魔術棒工具魔術棒工具”選區(qū)藍色區(qū)域，執(zhí)行選區(qū)藍色區(qū)域，執(zhí)行“選擇選擇”“修改修改”“收縮收縮”命令，命令，然后彈出然后彈出“收縮區(qū)域收縮區(qū)域”對話框，設置收縮量為對話框，設置收縮量為5像素，如圖所示。像素，如圖所示。維達制造有限公司主頁設計實例維達制造有限公司主頁設計實例 -效果圖的制作效果圖的制作第八章網站建設實例第八章網站建設實例9.用文字工具，輸入用文字工具，輸入“維達制造維達

7、制造”，然后設置字體，調整文字的位置，效，然后設置字體，調整文字的位置，效果如圖果如圖8-74所示。所示。維達制造有限公司主頁設計實例維達制造有限公司主頁設計實例 -效果圖的制作效果圖的制作第八章網站建設實例第八章網站建設實例10.給文字做右傾斜的效果，執(zhí)行給文字做右傾斜的效果，執(zhí)行“編輯編輯”“變換變換”“斜切斜切”命令，用鼠標命令，用鼠標按住上面一排中間的小方框，向右拖動一個距離，直到自己滿意的位置，按住上面一排中間的小方框，向右拖動一個距離，直到自己滿意的位置，圖所示。圖所示。維達制造有限公司主頁設計實例維達制造有限公司主頁設計實例 -效果圖的制作效果圖的制作第八章網站建設實例第八章網站

8、建設實例11.左手按住左手按住Ctrl鍵，用鼠標在圖層調板中點擊鍵，用鼠標在圖層調板中點擊 “維達制造維達制造”圖層，圖層，此時此時“維達制造維達制造”將會變成螞蟻線選區(qū)，執(zhí)行將會變成螞蟻線選區(qū)，執(zhí)行“選擇選擇”“修修改改”“擴展擴展”命令，在彈出的對話框中輸入命令，在彈出的對話框中輸入“3”，來擴大選區(qū)，來擴大選區(qū)，新建一個圖層，設置前景色為白色，使用新建一個圖層，設置前景色為白色，使用“油漆桶工具油漆桶工具”填充選區(qū)，填充選區(qū)，調整圖層順序后效果如圖所示。調整圖層順序后效果如圖所示。維達制造有限公司主頁設計實例維達制造有限公司主頁設計實例 -效果圖的制作效果圖的制作第八章網站建設實例第八章

9、網站建設實例12.選中剛剛填充白色的圖層，執(zhí)行選中剛剛填充白色的圖層，執(zhí)行“選擇選擇”“取消選擇取消選擇”命令，去除螞命令，去除螞蟻線，執(zhí)行蟻線，執(zhí)行“濾鏡濾鏡”“風格化風格化”“風風”命令，對該層進行風吹效果，命令，對該層進行風吹效果，如圖所示。如圖所示。經過了風吹效果后，如果覺得效果不明顯，可以執(zhí)行經過了風吹效果后，如果覺得效果不明顯，可以執(zhí)行“濾鏡濾鏡”“上次濾上次濾鏡操作鏡操作”命令（快捷鍵命令（快捷鍵Ctrl+F）來加強風吹效果。）來加強風吹效果。維達制造有限公司主頁設計實例維達制造有限公司主頁設計實例 -效果圖的制作效果圖的制作第八章網站建設實例第八章網站建設實例13.下面需要做內

10、容部分，首先在白色區(qū)域的左上角，用宋體打字下面需要做內容部分，首先在白色區(qū)域的左上角，用宋體打字“”，在右上角做導航條，欄目設定就根據企業(yè)所需而建，如圖，在右上角做導航條，欄目設定就根據企業(yè)所需而建，如圖所示。所示。維達制造有限公司主頁設計實例維達制造有限公司主頁設計實例 -效果圖的制作效果圖的制作第八章網站建設實例第八章網站建設實例14.新建圖層，畫一個矩形框。選擇一種灰色，作為邊框，執(zhí)行新建圖層，畫一個矩形框。選擇一種灰色，作為邊框，執(zhí)行“編編輯輯”“描邊描邊”命令，在彈出的窗口，輸入寬度為命令，在彈出的窗口，輸入寬度為“1”，打開素材圖片，打開素材圖片放入虛框中（放入虛框中（“藍天藍天.

11、jpg”和和“世界地圖世界地圖.jpg”），效果如圖），效果如圖8-79所示。所示。維達制造有限公司主頁設計實例維達制造有限公司主頁設計實例 -效果圖的制作效果圖的制作第八章網站建設實例第八章網站建設實例15.復制剛才已畫好的虛線到右側，排列如圖所示。復制剛才已畫好的虛線到右側，排列如圖所示。維達制造有限公司主頁設計實例維達制造有限公司主頁設計實例 -效果圖的制作效果圖的制作第八章網站建設實例第八章網站建設實例16.選擇企業(yè)相關的圖片數幅，大小為選擇企業(yè)相關的圖片數幅，大小為3232像素，以下圖形式排列，像素，以下圖形式排列，把這些小圖合并，以方便后面的操作，調整后如圖所示。把這些小圖合并，以

12、方便后面的操作，調整后如圖所示。 。維達制造有限公司主頁設計實例維達制造有限公司主頁設計實例 -效果圖的制作效果圖的制作第八章網站建設實例第八章網站建設實例16.選擇企業(yè)相關的圖片數幅，大小為選擇企業(yè)相關的圖片數幅，大小為3232像素，以下圖形式排列，像素，以下圖形式排列，把這些小圖合并，以方便后面的操作，調整后如圖所示。把這些小圖合并，以方便后面的操作，調整后如圖所示。 。維達制造有限公司主頁設計實例維達制造有限公司主頁設計實例 -效果圖的制作效果圖的制作第八章網站建設實例第八章網站建設實例17.維達制造有限公司主頁設計實例維達制造有限公司主頁設計實例 -效果圖的制作效果圖的制作第八章網站建設實例第八章網站建設實例維達制造有限公司主頁設計實例維達制造有限公司主頁設計實例 -gif動畫的制作動畫的制作 第八章網站建設實例第八章網站建設實例維達制造有限公司主頁設計實例維達制造有限公司主頁設計實例 -網頁的導出網頁的導出 第八章網站建設實例第八章網站建設實例本章小節(jié)本章小節(jié) 本節(jié)習題本節(jié)習題1.查找十個同種類型網站并與作比較。查找十個