Photoshop UI設(shè)計實戰(zhàn)案例教程（移動端+Web端） 課件 第5章 Web UI 的基 本框架與創(chuàng)意設(shè)計

PhotoshopUI設(shè)計實戰(zhàn)案例教程(移動端+Web端)第5章WebUI的基本框架與創(chuàng)意設(shè)計本章概述：第5章主要圍繞WebUI的基本框架與創(chuàng)意設(shè)計展開。首先介紹了WebUI的基本框架構(gòu)成要素，包括頁面布局、導(dǎo)航欄、內(nèi)容區(qū)域等，闡述了它們的功能和設(shè)計原則，以確保用戶界面的易用性和美觀性。接著強調(diào)了創(chuàng)意設(shè)計在WebUI中的重要性，通過獨特的色彩搭配、創(chuàng)新的交互元素以及個性化的圖標設(shè)計等方面來體現(xiàn)。例如，合理運用色彩心理學(xué)選擇適合的顏色組合，以引導(dǎo)用戶情緒和行為；采用新穎的交互方式如動畫效果、滾動視差等增強用戶體驗。同時還提及了響應(yīng)式設(shè)計的關(guān)鍵要點，確保WebUI在不同設(shè)備上都能保持良好的顯示效果和操作性能，適應(yīng)多樣化的用戶需求和使用場景。第5章WebUI的基本框架與創(chuàng)意設(shè)計5.1WebUI基本框架類型5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計5.3實例2:數(shù)碼電子風(fēng)格的網(wǎng)絡(luò)安全產(chǎn)品網(wǎng)站UI設(shè)計5.4拓展訓(xùn)練:制作磨砂玻璃質(zhì)感網(wǎng)頁本節(jié)概述該小節(jié)主要介紹了WebUI基本框架類型相關(guān)內(nèi)容，具體如下：5.1WebUI基本框架類型5.1.1Web頁面基本組成部分網(wǎng)絡(luò)世界中Web網(wǎng)頁眾多，多數(shù)網(wǎng)頁結(jié)構(gòu)可分為3部分：導(dǎo)航（多為頂部橫向布局）、正文內(nèi)容（如列表等）、欄目。常見結(jié)構(gòu)是頂部導(dǎo)航欄，右側(cè)欄目區(qū)，左側(cè)正文內(nèi)容，但不是每個網(wǎng)頁都具備這3部分。很多網(wǎng)頁只有導(dǎo)航欄和正文，如搜狗搜索首頁。還有些網(wǎng)頁由頂部導(dǎo)航欄和正文組成，如dribbble首頁。僅有導(dǎo)航和欄目的網(wǎng)頁較少，互聯(lián)網(wǎng)早期門戶網(wǎng)站如騰訊網(wǎng)首頁可算此類，正文區(qū)域被欄目板塊填滿。5.1.2Web首頁設(shè)計該部分強調(diào)Web首頁的重要性，它是網(wǎng)站門面，影響用戶第一印象和留存率。設(shè)計目標是吸引用戶、傳達核心信息并引導(dǎo)探索。其設(shè)計要素包括：合理布局，精心規(guī)劃導(dǎo)航欄、內(nèi)容區(qū)等元素，保證頁面簡潔清晰；色彩搭配要符合主題和品牌形象，考慮對比度和協(xié)調(diào)性；圖片運用要高質(zhì)量且相關(guān)，注意加載速度；文字設(shè)計要注重排版和字體選擇，簡潔明了且突出重點；交互設(shè)計要添加適當元素，增強用戶體驗。5.1.3內(nèi)容展示主頁的類型此小節(jié)介紹了五種內(nèi)容展示主頁類型。信息型主頁以傳達信息為主，文字內(nèi)容多，注重準確性和邏輯性。產(chǎn)品型主頁重點展示產(chǎn)品，通過多種形式呈現(xiàn)產(chǎn)品特點等。品牌型主頁圍繞品牌形象設(shè)計，強調(diào)價值觀等。社交型主頁用于社交互動，有動態(tài)消息等元素。娛樂型主頁提供娛樂內(nèi)容，注重趣味性和吸引力。5.1.1Web頁面基本組成部分常見組成部分導(dǎo)航（菜單）：多數(shù)位于頂部橫向布局。正文內(nèi)容：包含列表、卡片展示頁、詳情內(nèi)容頁等多種形式欄目：相關(guān)內(nèi)容的標題列表。常見結(jié)構(gòu)示例資訊、信息集合類網(wǎng)站常見為頂部導(dǎo)航欄，右側(cè)欄目區(qū)域，左側(cè)正文內(nèi)容。不同網(wǎng)頁結(jié)構(gòu)情況導(dǎo)航欄和正文兩部分如搜狗搜索首頁，僅有頂部導(dǎo)航欄和下方正文（含搜索輸入框）。如dribbble首頁，由頂部導(dǎo)航欄和下方正文組成。導(dǎo)航和欄目兩部分（較少見）互聯(lián)網(wǎng)早期門戶網(wǎng)站如騰訊網(wǎng)首頁，除導(dǎo)航外，正文區(qū)域基本被欄目板塊填滿。5.1WebUI基本框架類型5.1.2Web首頁設(shè)計重要性：首頁是網(wǎng)站門面，影響用戶第一印象，設(shè)計精美，企業(yè)官網(wǎng)首頁設(shè)計尤受重視。企業(yè)官網(wǎng)框架類型長圖海報樣式：內(nèi)容少，用大面積精美圖片或交互動效。資訊網(wǎng)站樣式：內(nèi)容多結(jié)構(gòu)復(fù)雜，如阿里云官網(wǎng)。其框架相似，上方除導(dǎo)航欄多為Banner圖宣傳內(nèi)容，接著是圖文組合展示業(yè)務(wù)、產(chǎn)品或案例等，形式多樣，基本是“圖/圖標+標題文字段落”組合，也有用卡片形式。特殊首頁類型：如設(shè)計作品或圖片分享展示社區(qū)網(wǎng)站，采用瀑布流式網(wǎng)頁設(shè)計，可無限下拉，如花瓣網(wǎng)“發(fā)現(xiàn)”頁，狹義瀑布流指花瓣網(wǎng)卡片錯落分布的網(wǎng)頁。實例介紹：本章實例1學(xué)習(xí)設(shè)計類似花瓣網(wǎng)的瀑布流網(wǎng)頁。5.1WebUI基本框架類型5.1.3內(nèi)容展示主頁的類型定義：Web頁面的內(nèi)容展示主頁是導(dǎo)航菜單的落地頁，即菜單對應(yīng)的內(nèi)容頁面。分類文章樣式：類似圖文結(jié)合的文章來組織展示內(nèi)容，如Saleforce官網(wǎng)某內(nèi)容頁。組件單元樣式：用表格、列表、卡片等組件單元組織內(nèi)容，如G(G是一款國外的會議錄制產(chǎn)品)的個人主頁和內(nèi)容展示頁。重點介紹文章樣式排版多樣本章著重介紹3種第二類內(nèi)容組織樣式，面向企業(yè)內(nèi)部工具類Web頁面導(dǎo)航菜單落地頁，由大量表格、列表、卡片等組件組織，適用于數(shù)據(jù)呈現(xiàn)、管理和項目管理等應(yīng)用場景。5.1WebUI基本框架類型5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計本節(jié)概述設(shè)計思路(1)復(fù)制多個背景圖層，添加不同模糊值的“高斯模糊”濾鏡，并通過圖層蒙版來模擬遠近不同景深的效果。(2)運用矢量蒙版疊加不同深淺的漸變，以模擬鏡面反光金屬材質(zhì)效果。設(shè)計過程本實例將設(shè)計一個以多邊形拓撲結(jié)構(gòu)可視化風(fēng)格為主且具有科技風(fēng)格的Web首頁。它以模擬多邊形拓撲結(jié)構(gòu)可視化點線陣列作為背景，加上模擬遠近景深的效果，創(chuàng)建富有空間感的虛擬電子空間背景。在頁面上繪制一個內(nèi)核發(fā)光的多邊形金屬材質(zhì)立體物作為整個頁面的絕對視覺重心，進一步奠定整個頁面的科技風(fēng)格。當然，作為Web首頁，其內(nèi)容也包含了該站點的主、副標題，站點一級導(dǎo)航菜單等基礎(chǔ)UI組件5.2.1繪制背景和基礎(chǔ)UI組件1.新建文檔打開Photoshop后，按Ctrl+N組合鍵新建一個空白文檔，將寬度設(shè)為1080，高度設(shè)為640像素，單擊“創(chuàng)建”按鈕，然后雙擊背景圖層，將其轉(zhuǎn)換為普通圖層，并命名為“底層背景”。2.為背景添加漸變效果雙擊“底層背景”圖層，調(diào)出“圖層樣式”窗口，勾選“漸變疊加”圖層樣式，將漸變色條左右兩端色值分別設(shè)為#0c0c14和#22262b，漸變“角度”設(shè)為90度5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計5.2.1繪制背景和基礎(chǔ)UI組件3.添加導(dǎo)航欄組件添加文本：使用橫排文字工具編輯添加5個文本圖層，內(nèi)容分別為“Hellofriends”“Menu1”“Menu2”“Menu3”和“Menu4”，字體大小均為28點，將它們擺放在界面的左上角區(qū)域和右上角區(qū)域。其中，將Menu1的字體設(shè)為Bold粗體字，字體顏色設(shè)為#ffd75c，其他文本字體均設(shè)為Light細體字，字體顏色均設(shè)為#ffffff。為“Menu1”添加選中標識條組件：選擇矩形工具，繪制一個矩形，擺放到“Menu1”正上方，并將圖層命名為“menu選中態(tài)”。雙擊該矩形圖層，調(diào)出“圖層樣式”窗口，勾選“外發(fā)光”圖層樣式，設(shè)置“混合模式”為“線性減淡(添加)”，“不透明度”為15%，色值為#ffdc51，“大小”為30像素。然后將“menu選中態(tài)”的圖層樣式復(fù)制并粘貼到同為選中態(tài)的菜單文本圖層Menu1中。最后將所有文本圖層和“選中態(tài)標識條”組件編組，并重命名為“導(dǎo)航欄”。5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計5.2.1繪制背景和基礎(chǔ)UI組件4.添加主副標題組件（1）添加主副標題文本：使用橫排文字工具，字體大小為28點，字體樣式為Light細體字，顏色均為#ffffff，編輯添加兩個文字圖層，一個是歡迎語“Welcometo”，另一個是一長段文本段落（內(nèi)容可自定義），擺放位置參考圖5-17。再添加一個參考內(nèi)容為“ThenameofwebsiteaboutPolygon”，分兩行的文字作為主標題，將字體大小設(shè)為84點（參考值），字體樣式改為Bold粗體字，擺放在之前的兩個小文字之間的區(qū)域，注意3個文字圖層均左對齊。（2）添加裝飾性元素：使用矩形工具繪制一個寬度和高度均為60像素的正方形，放在歡迎語“Welcometo”的上方區(qū)域，并和文字左對齊，將該正方形所在的圖層重命名為“主標題裝飾元素”。因為后面要給正方形添加“漸變”圖層樣式，所以正方形的顏色可任意選擇。然后將“主標題裝飾元素”圖層和其他主副標題文字圖層一起選中，按Ctrl+G組合鍵編組，并重命名為“Web主副標題”。5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計5.2.1繪制背景和基礎(chǔ)UI組件4.添加主副標題組件（3）為裝飾元素添加圖層樣式：雙擊正方形所在的“主標題裝飾元素”圖層，調(diào)出“圖層樣式”窗口，勾選“漸變疊加”圖層樣式，將“角度”改為126度，漸變色條左右兩端色值分別設(shè)為#ff7f52和#ffd145。勾選“外發(fā)光”圖層樣式，設(shè)置“混合模式”為“線性減淡(添加)”，“不透明度”為15%，外發(fā)光顏色值為#ffdc51，“大小”為60像素。最后將主副標題文本和裝飾性元素的矩形圖層全部選中，按Ctrl+G組合鍵編組，重命名為“Web主標題”。5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計5.2.1繪制背景和基礎(chǔ)UI組件5.添加角落鏈接組件添加鏈接文本：選擇橫排文字工具，字體顏色保持#ffffff不變，字體大小為28點，字體樣式為Light細體字，在幕布右下角添加文本“Theotherlink”。添加六邊形裝飾性元素：選擇多邊形工具，在工具屬性欄中將多邊形的“邊”設(shè)為6，即六邊形，在右下角的鏈接文本左側(cè)繪制一個大小參考圖5-20所示的六邊形。將剛才繪制的主標題上的裝飾性矩形元素的圖層樣式復(fù)制，然后粘貼到這個新的六邊形上，最后將鏈接文本Theotherlink和六邊形一起編組并重命名為“右下角鏈接”。5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計5.2.2繪制多邊形拓撲結(jié)構(gòu)陣列背景圖1.繪制基礎(chǔ)網(wǎng)格陣列繪制折線：使用鋼筆工具，設(shè)置“填充”為無，“描邊”為1像素，顏色為#ffffff，在底層背景之上繪制若干條折線，大致呈井字形網(wǎng)格，表現(xiàn)出一定的表面起伏。編組：將繪制的所有網(wǎng)格折線圖層選中，按Ctrl+G組合鍵編組，并重命名為“網(wǎng)格結(jié)構(gòu)線”。5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計5.2.2繪制多邊形拓撲結(jié)構(gòu)陣列背景圖2.豐富網(wǎng)格陣列層次感繪制粗線：選擇鋼筆工具，將描邊大小改為2像素，繪制兩條橫穿整個網(wǎng)格陣列且較粗的折線，將其選中后按Ctrl+G組合鍵編組并重命名為“橫貫粗線”。繪制X形結(jié)構(gòu)線：選擇鋼筆工具，將描邊粗細改回1像素，繪制井字形網(wǎng)格內(nèi)部的X形結(jié)構(gòu)線，將其選中后按Ctrl+G組合鍵編組，并重命名為“X結(jié)構(gòu)線”。5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計5.2.2繪制多邊形拓撲結(jié)構(gòu)陣列背景圖3.為網(wǎng)格結(jié)構(gòu)線增加繪制聯(lián)結(jié)節(jié)點繪制立體正方體效果繪制六邊形和菱形：先選中多邊形工具，繪制一個六邊形并適當傾斜，將圖層“不透明度”設(shè)為80%；再選中鋼筆工具，繪制一個菱形形狀，作為正方體的頂部面。編組：將兩個圖層編組，重命名為“聯(lián)結(jié)點”。復(fù)制散布結(jié)點：多次復(fù)制“聯(lián)結(jié)點”編組圖層，將它們逐個分布到網(wǎng)格陣列的交叉結(jié)構(gòu)點上，依據(jù)近大遠小的透視原則，適當調(diào)整各個“連接點”的大小，最后將所有“聯(lián)結(jié)點”編組圖層編組，并重命名為“聯(lián)結(jié)點組”。5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計5.2.2繪制多邊形拓撲結(jié)構(gòu)陣列背景圖4.繪制少量三角形填充結(jié)構(gòu)面繪制三角面：選擇鋼筆工具，將“填充”設(shè)為#ffffff，“描邊”設(shè)為無，在部分網(wǎng)格內(nèi)部繪制三角面，將圖層的“不透明度”設(shè)置為4%-12%。編組：最后將所有三角結(jié)構(gòu)面圖層編組并重命名為“結(jié)構(gòu)面”。5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計5.將相關(guān)圖層編組編組所有圖層：將目前為止的所有多邊形拓撲結(jié)構(gòu)網(wǎng)格陣列相關(guān)的編組圖層編組，然后重命名為“背景結(jié)構(gòu)線面”。5.2.2繪制多邊形拓撲結(jié)構(gòu)陣列背景圖6.為多邊形拓撲結(jié)構(gòu)網(wǎng)格陣列繪制圖層蒙版添加圖層蒙版：選中“背景結(jié)構(gòu)線面”編組圖層，單擊圖層面板底部的“添加圖層蒙版”按鈕。繪制蒙版設(shè)置筆刷參數(shù)：單擊選中剛添加的圖層蒙版，選擇筆刷工具，將筆刷顏色設(shè)為#000000，筆刷大小設(shè)置為900像素，“硬度”設(shè)為0%，“不透明度”改為50%。繪制黑色形狀：在保持圖層蒙版選中的情況下，使用筆刷在蒙版上繪制黑色，通過不斷切換筆刷大小，繪制出不同大小的黑色形狀，使圖層蒙版呈現(xiàn)繞著畫布四周繪制一圈黑色，中間部分半隱的效果，凸顯出近處清晰、遠處漸隱的效果。5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計5.2.3創(chuàng)建景深效果1.為多邊形拓撲結(jié)構(gòu)網(wǎng)格陣列添加“高斯模糊”濾鏡轉(zhuǎn)換為智能對象：選中“背景結(jié)構(gòu)線面”編組圖層，按Ctrl+J組合鍵復(fù)制，并單擊鼠標右鍵，選擇“轉(zhuǎn)換為智能對象”選項。添加濾鏡：保持智能對象圖層“背景結(jié)構(gòu)線面復(fù)制”的選中狀態(tài)，執(zhí)行“濾鏡>模糊>高斯模糊”命令，添加一個“半徑”為9的“高斯模糊”濾鏡。5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計5.2.3創(chuàng)建景深效果2.添加圖層蒙版編組并命名：選中智能對象圖層“背景結(jié)構(gòu)線面復(fù)制”，按Ctrl+G組合鍵打包編組并重命名為“加模糊level1”。添加蒙版并繪制：保持選中編組的“加模糊level1”圖層，添加一個圖層蒙版，使用筆刷工具在蒙版上繪制形狀。5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計5.2.4復(fù)制景深效果圖層1.再復(fù)制一個景深圖層，并調(diào)整模糊值復(fù)制圖層并調(diào)整：選中編組圖層“加模糊level1”，按Ctrl+J組合鍵復(fù)制，重命名為“加模糊level2”，選中并用鼠標右鍵單擊編組圖層“加模糊level1”的圖層蒙版，選擇“刪除圖層蒙版”，雙擊編組圖層“加模糊level2”內(nèi)的智能對象圖層“背景結(jié)構(gòu)線面復(fù)制”的“智能濾鏡”下的“高斯模糊”濾鏡，將“半徑”改為24像素5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計2.添加圖層蒙版并繪制添加蒙版并繪制：選中編組圖層“加模糊level2”，為其創(chuàng)建一個圖層蒙版，使用畫筆工具在蒙版上繪制圖形。5.2.4復(fù)制景深效果圖層2.復(fù)制并調(diào)整第三個景深效果圖層復(fù)制調(diào)整圖層：復(fù)制編組圖層“加模糊level2”，重命名為“模糊遠景”，先刪除原有的圖層蒙版，再單擊“智能濾鏡”下的“高斯模糊”濾鏡左側(cè)的眼睛圖標，暫時關(guān)閉模糊效果，然后將整個編組圖層略往上移動一段距離，并將整個圖層水平翻轉(zhuǎn)。添加蒙版并繪制：為編組圖層“模糊遠景”添加一個圖層蒙版，使用畫筆工具在上面繪制蒙版形狀，將下半部分涂黑隱藏，只顯示上半部分區(qū)域。5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計5.2.4復(fù)制景深效果圖層2.復(fù)制并調(diào)整第三個景深效果圖層復(fù)制調(diào)整圖層：復(fù)制編組圖層“加模糊level2”，重命名為“模糊遠景”，先刪除原有的圖層蒙版，再單擊“智能濾鏡”下的“高斯模糊”濾鏡左側(cè)的眼睛圖標，暫時關(guān)閉模糊效果，然后將整個編組圖層略往上移動一段距離，并將整個圖層水平翻轉(zhuǎn)。添加蒙版并繪制：為編組圖層“模糊遠景”添加一個圖層蒙版，使用畫筆工具在上面繪制蒙版形狀，將下半部分涂黑隱藏，只顯示上半部分區(qū)域。5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計5.2.5繪制一個內(nèi)核帶發(fā)光效果的多邊形立體物1.繪制外殼的基礎(chǔ)形狀繪制形狀并編組：使用鋼筆工具繪制多個基礎(chǔ)形為三角形且每個角都是圓角的形狀，組成一個多邊形立體外殼，將“描邊”設(shè)為無，填充色任意，再將繪制的所有組成外殼的三角形圖層編組并重命名為“多邊形基礎(chǔ)底色”。添加圖層樣式：雙擊編組圖層“多邊形基礎(chǔ)底色”調(diào)出“圖層樣式”窗口，勾選“漸變疊加”圖層樣式，將漸變色條左右兩端色值分別設(shè)為#0c0c14和#969696，“角度”設(shè)為90度。創(chuàng)建矢量蒙版：選中編組圖層“多邊形基礎(chǔ)底色”按Ctrl+G組合鍵再次編組，重命名為“多邊形外殼組”，選中所有“多邊形基礎(chǔ)底色”內(nèi)的三角形形狀圖層，切換選擇直接選擇工具，在畫布上拖動鼠標框選全部形狀圖層的路徑，按Ctrl+C組合鍵復(fù)制這些矢量路徑，選中編組圖層“多邊形外殼組”，按Ctrl+V組合鍵粘貼剛才復(fù)制的矢量路徑，生成一個以多邊形外殼為形狀的矢量蒙版。5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計5.2.5繪制一個內(nèi)核帶發(fā)光效果的多邊形立體物2.在外殼上繪制鏡面反射效果（1）繪制暗面效果：在添加了矢量蒙版的“多邊形外殼組”內(nèi)選擇鋼筆工具，繪制兩個矢量路徑作為多邊形外殼的立體暗面效果，將這兩個新繪制的作為暗面效果的矢量形狀所在圖層分別重命名為“暗面反光1”和“暗面反光2”，將這兩個圖層編組，并重命名為“鏡面明暗效果1”。（2）添加漸變圖層樣式：雙擊“暗面反光1”圖層，調(diào)出“圖層樣式”窗口，勾選“漸變疊加”圖層樣式，將漸變色條左右兩端色值分別設(shè)為#0c0c14和#2c2522，“角度”設(shè)為90度，復(fù)制“暗面反光1”的圖層樣式，粘貼到“暗面反光2”圖層上。（3）添加更多層明暗面：繼續(xù)使用鋼筆工具繪制兩個矢量形狀作為暗面，均粘貼相同的圖層樣式，并分別調(diào)整圖層不透明度至30%和40%，豐富外殼的立體明暗效果。5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計5.2.5繪制一個內(nèi)核帶發(fā)光效果的多邊形立體物2.在外殼上繪制鏡面反射效果（4）添加反射面：使用鋼筆工具在指定位置繪制一個反射其他三角形立體外殼組成件的矢量形狀，將該形狀所在圖層重命名為“灰色反射面”，將該圖層的不透明度降低至50%，給圖層“灰色反射面”添加一個“漸變疊加”圖層樣式，并將其漸變色條左右兩端顏色分別設(shè)為#2b2c31和#494c52。5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計5.2.5繪制一個內(nèi)核帶發(fā)光效果的多邊形立體物2.在外殼上繪制鏡面反射效果（5）添加高光亮面：使用鋼筆工具繪制一個矢量形狀作為高光面，將該圖層重命名為“亮面”，將“填充”設(shè)置為0%，“不透明度”設(shè)置為100%，為其添加漸變樣式，將漸變條左右兩端色值分別設(shè)為#000000和#ffffff，然后將右端的白色手柄向左移動一段距離，左端黑色手柄向右移動一段適當?shù)木嚯x，并單擊色條上方的不透明度調(diào)節(jié)手柄，將左端顏色的不透明度改為0，再將漸變的“角度”改為38度。5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計5.2.5繪制一個內(nèi)核帶發(fā)光效果的多邊形立體物2.在外殼上繪制鏡面反射效果（6）添加反射內(nèi)部發(fā)光核心光亮的橙色反射面：使用鋼筆工具繪制一個圍繞三角形外殼件一周的矢量形狀作為反射內(nèi)部發(fā)光核心光亮的反射面，并添加“外發(fā)光”和“漸變疊加”兩個圖層樣式，“外發(fā)光”圖層樣式的參數(shù)設(shè)置為“混合模式”為“濾色”，發(fā)光顏色為#bc3a00，“不透明度”為60%，“大小”為10像素，“漸變”圖層樣式的參數(shù)設(shè)置為：漸變條左右兩端色值分別設(shè)為#df2500和#c54100，“角度”為141度。5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計5.2.5繪制一個內(nèi)核帶發(fā)光效果的多邊形立體物3.繪制內(nèi)核（1）繪制基礎(chǔ)形狀并編組：繼續(xù)使用鋼筆繪制一個矢量形狀作為內(nèi)核，將該形狀所在圖層重命名為“發(fā)光基礎(chǔ)體”，并放置在三角形外殼編組圖層“多邊形外殼組”之后，按Ctrl+G組合鍵編組并命名為“橙色發(fā)光內(nèi)核”，將繪制的矢量形狀路徑復(fù)制并粘貼到編組上作為矢量蒙版。（2）設(shè)置圖層顏色標識：用鼠標右鍵單擊編組圖層“橙色發(fā)光內(nèi)核”左側(cè)的眼睛圖標，在彈出的菜單中選擇“橙色”，將這一編組圖層及其內(nèi)部的圖層標識設(shè)為橙色（3）添加漸變疊加樣式：為“發(fā)光基礎(chǔ)體”矢量形狀圖層添加“漸變疊加”圖層樣式，并將漸變色條左右兩端色值分別設(shè)為#e22d00和#ffb19b，“角度”設(shè)為130度5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計5.2.5繪制一個內(nèi)核帶發(fā)光效果的多邊形立體物3.繪制內(nèi)核（4）添加發(fā)光樣式：雙擊編組圖層“橙色發(fā)光內(nèi)核”，打開“圖層關(guān)鍵內(nèi)容：“漸變疊加”“外發(fā)光”“投影”樣式的設(shè)置及效果，核心樣式參數(shù)包括“內(nèi)發(fā)光”“外發(fā)光”“投影”的混合模式、顏色值、不透明度、大小等設(shè)置，以及相應(yīng)的形狀繪制和樣式應(yīng)用過程。5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計5.2.5繪制一個內(nèi)核帶發(fā)光效果的多邊形立體物4.為內(nèi)核體添加明面、暗面和反射面效果（1）繪制內(nèi)核暗面：用鋼筆工具在“發(fā)光基礎(chǔ)體”矢量形狀上方繪制2個作為暗面的矢量形狀，形狀如圖5-48所示，并將它們所在圖層分別命名為“暗面1”和“暗面2”，為內(nèi)核添加“漸變疊加”圖層樣式，將漸變色條左右兩端色值分別設(shè)為#c91c00和#ff560b，“角度”為105度。（2）繪制內(nèi)核反射面：使用鋼筆工具在“暗面2”矢量形狀上繪制一個作為反射面的矢量形狀，如圖5-49(a)所示，并將其所在圖層命名為“黃色面1”，然后添加“漸變疊加”樣式，將漸變色條左右兩端色值分別設(shè)為#e25500和#ffd36a，繼續(xù)使用鋼筆工具，在“黃色面1”矢量形狀圖層之上，繪制作為反射面的第2個矢量形狀，并將其所在圖層命名為“黃色面2”，為“黃色面2”圖層添加“漸變疊加”圖層樣式，將漸變色條左右兩端色值分別設(shè)為#e23a00和#ff9703。5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計5.2.5繪制一個內(nèi)核帶發(fā)光效果的多邊形立體物4.為內(nèi)核體添加明面、暗面和反射面效果（3）添加高光亮面：使用鋼筆工具繪制一個形狀如圖5-50(a)所示的矢量形狀，將其所在圖層命名為“亮面1”，注意該圖層的位置要在“暗面2”圖層之下，“暗面1”圖層之上，為“亮面1”圖層添加“漸變疊加”和“外發(fā)光”兩個圖層樣式，設(shè)置“漸變疊加”圖層樣式的漸變色條左右兩端色值分別為#ffc0b0和#ffe2da，設(shè)置“外發(fā)光”圖層樣式的“混合模式”為“濾色”，發(fā)光顏色為#ffd7bd，“不透明度”為65%，“大小”為60像素，用與上一步驟類似的方法添加更多高光亮面，繼續(xù)使用鋼筆工具繪制更多層高光亮面，可以直接復(fù)制“亮面1”的圖層樣式，同時注意，這幾個高光亮面圖層要在最上層。5.2實例1:多邊形拓撲結(jié)構(gòu)風(fēng)格的Web首頁設(shè)計5.3實例2:數(shù)碼電子風(fēng)格的網(wǎng)絡(luò)安全產(chǎn)品網(wǎng)站UI設(shè)計本節(jié)概述設(shè)計思路通過創(chuàng)建特定的視覺元素來傳達網(wǎng)絡(luò)安全的概念。利用數(shù)碼電子風(fēng)格的虛擬病毒和盾牌元素，構(gòu)建具有科技感和防護感的頁面。運用色彩、圖形和圖層樣式等手段，營造出符合網(wǎng)絡(luò)安全主題的視覺氛圍。設(shè)計過程首先新建文檔，設(shè)定寬1920像素、高1280像素，將底層背景設(shè)為#161717，并在右側(cè)用畫筆繪制深藍色大圓。接著用矩形工具繪制白線組成網(wǎng)格地板，旋轉(zhuǎn)復(fù)制后編組，添加蒙版并設(shè)置顏色疊加與漸變疊加樣式。然后添加文字和按鈕，包括設(shè)置主標題文字樣式、添加描述文本和分割線并設(shè)置樣式，繪制按鈕并調(diào)整。對于主體視覺元素，繪制盾牌時先用鋼筆工具繪制形狀，設(shè)置多層漸變疊加和顏色疊加樣式，再通過復(fù)制、調(diào)整圖層樣式和微調(diào)形狀繪制倒角、厚度和倒影，添加高斯模糊濾鏡和蒙版，最后繪制橢圓設(shè)置屬性，為盾牌添加顏色疊加和高斯模糊濾鏡。繪制病毒模型，先用橢圓工具繪制不同圓形設(shè)置樣式，復(fù)制調(diào)整繪制內(nèi)部發(fā)光和邊緣等效果，接著繪制圓環(huán)、高光點等并設(shè)置樣式編組后添加外發(fā)光，最后用鋼筆工具繪制觸角，設(shè)置樣式復(fù)制微調(diào)，添加倒影和反射效果以及陰影和照亮地板的效果。5.3.1繪制基礎(chǔ)背景框架1.新建文檔打開Photoshop后，按Ctrl+N組合鍵新建一個空白文檔，將寬度設(shè)為1920像素，高度設(shè)為1280像素。，單擊“創(chuàng)建”按鈕，然后雙擊背景圖層，將其轉(zhuǎn)換為普通圖層，并命名為“底層背景”。2.為底層背景添加顏色填充顏色：單擊左側(cè)工具欄最下方的前景色塊，調(diào)出“拾色器”窗口，將顏色值設(shè)為#161717，按Alt+Delete組合鍵為“底層背景”圖層填充顏色。繪制大圓：按B鍵切換到筆刷工具，將筆刷大小設(shè)為1800像素，“硬度”為0，單擊前景色塊調(diào)出拾色器，將筆刷顏色設(shè)為#1c2233，在底層背景偏右側(cè)區(qū)域單擊，繪制一個模糊的深藍色大圓，以創(chuàng)建類似徑向漸變的效果。5.3實例2:數(shù)碼電子風(fēng)格的網(wǎng)絡(luò)安全產(chǎn)品網(wǎng)站UI設(shè)計5.3.1繪制基礎(chǔ)背景框架3.繪制網(wǎng)格地板（1）繪制縱線：選擇矩形工具，將“填充”顏色設(shè)為#ffffff，繪制一條寬度為2像素，長度在2500像素以上的白線，將其旋轉(zhuǎn)60°，再按Ctrl+J組合鍵復(fù)制出12-13條線，平移相同的距離，將這些白線編組并重命名為“地板網(wǎng)格-縱線”。5.3實例2:數(shù)碼電子風(fēng)格的網(wǎng)絡(luò)安全產(chǎn)品網(wǎng)站UI設(shè)計5.3.1繪制基礎(chǔ)背景框架3.繪制網(wǎng)格地板（2）繪制橫線并編組：選中編組圖層“地板網(wǎng)格-縱線”，按Ctrl+J組合鍵復(fù)制，重命名為“地板網(wǎng)格-橫線”，適當移動新編組內(nèi)各條白線的位置，同時選中編組圖層“地板網(wǎng)格-縱線”和“地板網(wǎng)格-橫線”再次編組，重命名為“地板網(wǎng)格組”。5.3實例2:數(shù)碼電子風(fēng)格的網(wǎng)絡(luò)安全產(chǎn)品網(wǎng)站UI設(shè)計5.3.1繪制基礎(chǔ)背景框架3.繪制網(wǎng)格地板（3）添加蒙版并設(shè)置樣式：單擊圖層面板底部的“添加圖層蒙版”按鈕，為“地板網(wǎng)格組”添加一個圖層蒙版，并在上面繪制蒙版，形狀大致是中間白色、四周漸黑。為地板網(wǎng)格組整體添加色彩，雙擊“地板網(wǎng)格組”編組圖層，調(diào)出“圖層樣式”窗口，勾選“顏色疊加”和“漸變疊加”圖層樣式，分別調(diào)整它們的參數(shù)，設(shè)置“顏色疊加”圖層樣式的顏色為#ffffff，“不透明度”為40%，設(shè)置“漸變疊加”圖層樣式漸變色條左右兩端色值分別為#905fff和#00ffc0，“混合模式”為“正?！?，“角度”為0度，再將“地板網(wǎng)格組”編組圖層的“不透明度”改為60%。5.3實例2:數(shù)碼電子風(fēng)格的網(wǎng)絡(luò)安全產(chǎn)品網(wǎng)站UI設(shè)計5.3.1繪制基礎(chǔ)背景框架4.添加網(wǎng)站標題文字和按鈕（1）添加主標題文字：使用橫排文字工具輸入文本Virusprotectionsolutions（參考），然后單擊字符面板下的“全部大寫字母”按鈕，將文本全部設(shè)為大寫樣式，設(shè)置文本Virus的字體大小為64點，顏色值為#6a6aff，字體樣式為Light，設(shè)置文本protection的字體大小為64點，顏色值為#00ffc0，字體樣式為Bold，設(shè)置文本solutions的字體大小為122點，顏色值為#ffffff，字體樣式為UltraLight。（2）添加描述性文本：使用文字工具隨意編寫2-3行的段落文字，并將字體大小設(shè)為24點，顏色值為#ffffff。5.3實例2:數(shù)碼電子風(fēng)格的網(wǎng)絡(luò)安全產(chǎn)品網(wǎng)站UI設(shè)計5.3.1繪制基礎(chǔ)背景框架4.添加網(wǎng)站標題文字和按鈕（3）添加文字分割線：選擇橢圓工具，設(shè)置“填充”顏色為#ffffff，“描邊”為無，在左右兩端繪制兩個大小一致的小圓點，再使用鋼筆工具繪制一個中間凹下，兩頭較高的細長形狀，并保持左右兩端與兩個圓點平齊，繪制完成后，將這3個矢量形狀圖層編組并重命名為“文字段落分割線”。5.3實例2:數(shù)碼電子風(fēng)格的網(wǎng)絡(luò)安全產(chǎn)品網(wǎng)站UI設(shè)計5.3.1繪制基礎(chǔ)背景框架4.添加網(wǎng)站標題文字和按鈕（4）設(shè)置文字分割線樣式：雙擊“文字段落分割線”編組圖層，調(diào)出“圖層樣式”窗口，勾選“漸變疊加”和“外發(fā)光”圖層樣式，并分別調(diào)整它們的參數(shù)，“漸變疊加”圖層樣式參數(shù)調(diào)整如下：漸變色條左右兩端色值與之前“地板網(wǎng)格組”圖層的漸變樣式相同，“混合模式”為“濾色”，“角度”為180度，“外發(fā)光”圖層樣式參數(shù)調(diào)整如下：“混合模式”為“濾色”，“不透明度”為60%，外發(fā)光的色值為#3dabff，“大小”為60像素，最后將編組圖層“文字段落分割線”的圖層“填充”改為0%。5.3實例2:數(shù)碼電子風(fēng)格的網(wǎng)絡(luò)安全產(chǎn)品網(wǎng)站UI設(shè)計5.3.1繪制基礎(chǔ)背景框架4.添加網(wǎng)站標題文字和按鈕（5）繪制按鈕：選擇圓角矩形工具，設(shè)置“填充”為無，“描邊”粗細為1.5像素，繪制一個寬680像素，高300像素，圓角為8像素的圓角矩形，然后按Ctrl+J組合鍵兩次復(fù)制兩個圓角矩形，設(shè)置最后一個圓角矩形的“填充”色值為#00b0ff，“描邊”為無，圖層“不透明度”為15%，再使用文字工具輸入內(nèi)容為CustomerStories，大小為24點的文本，將新添加的3個圓角矩形矢量形狀圖層和文字圖層編組，并重命名為“按鈕1”。5.3實例2:數(shù)碼電子風(fēng)格的網(wǎng)絡(luò)安全產(chǎn)品網(wǎng)站UI設(shè)計5.3.1繪制基礎(chǔ)背景框架4.添加網(wǎng)站標題文字和按鈕（6）復(fù)制按鈕并修改：按Ctrl+J組合鍵復(fù)制并向右移動一段適當?shù)木嚯x，修改文字內(nèi)容為Product，將文本圖層重命名為“按鈕2”，刪除第3個圓角矩形矢量形狀，即只保留僅有描邊無填充的圓角矩形，添加圖層樣式，選中前面繪制的文字分隔線圖層，復(fù)制其圖層樣式，然后在“按鈕1”編組圖層中選中兩個有描邊但沒有填充的矢量形狀圖層，即“圓角矩形1”和“圓角矩形復(fù)制”圖層，粘貼圖層樣式，并做微調(diào)，將漸變的“樣式”改為“徑向”，即改為從中心向四周呈圓周擴散的漸變樣式，然后為文字圖層添加一個“外發(fā)光”圖層樣式，設(shè)置發(fā)光顏色為#57baff，“不透明度”為60%，“大小”為15像素，將文字圖層的“外發(fā)光”圖層樣式復(fù)制并粘貼到“按鈕2”編組圖層中的文字圖層和兩個圓角矩形矢量形狀圖層上，并適當調(diào)整“外發(fā)光”圖層樣式的參數(shù)，保持發(fā)光顏色和“混合模式”不變，將“不透明度”都改為100%，“大小”都改為30像素。5.3實例2:數(shù)碼電子風(fēng)格的網(wǎng)絡(luò)安全產(chǎn)品網(wǎng)站UI設(shè)計5.3.2設(shè)計頁面的主體視覺元素1:盾牌元素1.繪制盾牌基礎(chǔ)表面形狀（2）繪制形狀并設(shè)置樣式：使用鋼筆工具繪制一個類似盾牌的矢量形狀，雙擊該矢量形狀所在圖層，調(diào)出“圖層樣式”窗口，勾選“漸變疊加”圖層樣式，然后單擊其右側(cè)的“+”圖標，添加第二個“漸變疊加”圖層樣式（新添加的“漸變疊加”圖層樣式在上一層），將第1個“漸變疊加”圖層樣式（即下層的“漸變疊加”圖層樣式）的“混合模式”設(shè)為“正?！保瑵u變色條左右兩端色值分別為#14dbff和#00ff9c，“角度”為117度，將第2個“漸變疊加”圖層樣式（即上層的“漸變疊加”圖層樣式）的“混合模式”改為“濾色”，漸變色條左端色值可以不變，右端色值改為淺綠色#86ffd0，將左端上方的不透明度手柄向右移動一段距離，使“位置”為45像素，最后把“不透明度”設(shè)為0%。5.3實例2:數(shù)碼電子風(fēng)格的網(wǎng)絡(luò)安全產(chǎn)品網(wǎng)站UI設(shè)計5.3.2設(shè)計頁面的主體視覺元素1:盾牌元素2.繪制盾牌的倒角復(fù)制并設(shè)置樣式：將該矢量形狀圖層重命名為“盾牌”，按Ctrl+J組合鍵復(fù)制并重命名為“盾牌倒角”，適當放大一圈圖形，然后雙擊“盾牌倒角”圖層調(diào)出“圖層樣式”窗口，取消勾選上面一層的“漸變疊加”圖層樣式，并勾選“顏色疊加”圖層樣式，將顏色設(shè)為#ffffff，“不透明度”改為60%，將這2個圖層編組并重命名為“盾牌”再次復(fù)制并調(diào)整：再次復(fù)制“盾牌”圖層，重命名為“盾牌倒角2”，適當放大圖層，使其比“盾牌倒角”圖層稍大一點，然后將上一層的“漸變疊加”圖層樣式的“混合模式”改為“變亮”，將漸變色條左端上方的不透明度手柄向左移動，將“不透明度”恢復(fù)為100%5.3實例2:數(shù)碼電子風(fēng)格的網(wǎng)絡(luò)安全產(chǎn)品網(wǎng)站UI設(shè)計5.3.2設(shè)計頁面的主體視覺元素1:盾牌元素3.繪制盾牌的厚度（1）繪制并調(diào)整厚度：復(fù)制“盾牌倒角”圖層，命名為“盾牌厚度”，將復(fù)制出的圖形適當向后和向左移動一段距離，使用鋼筆工具對其形狀錨點進行微調(diào)，調(diào)整該圖形所在圖層的“顏色疊加”圖層樣式的“不透明度”為90%。5.3實例2:數(shù)碼電子風(fēng)格的網(wǎng)絡(luò)安全產(chǎn)品網(wǎng)站UI設(shè)計（2）繪制暗部陰影：復(fù)制“盾牌厚度”圖層，重命名為“盾牌厚度暗部陰影1”，將“不透明度”改為60%，“填充”改為0，選擇鋼筆工具，在工具屬性欄中單擊右側(cè)的“路徑操作”按鈕，在下拉菜單中選擇路徑繪制模式為“與形狀區(qū)域相交”，繪制一個形狀如圖5-71(a)所示的矢量形狀，但因為使用了“與形狀區(qū)域相交”路徑模式，所以最終只會顯示新繪制形狀與圖層原有形狀相交的區(qū)域，雙擊該圖層調(diào)出“圖層樣式”窗口，取消勾選“顏色疊加”，調(diào)整“漸變疊加”圖層樣式的漸變色條左端上方的不透明度控制手柄的“不透明度”為0，右端色值為#142f41，勾選“反向”復(fù)選框，反轉(zhuǎn)漸變左右兩端顏色，再將“角度”改為-95度。5.3.2設(shè)計頁面的主體視覺元素1:盾牌元素3.繪制盾牌的厚度（3）復(fù)制暗部陰影并調(diào)整：復(fù)制一個盾牌厚度的暗部陰影形狀圖層，并命名為“盾牌厚度暗部陰影2”，將圖層的“不透明度”改為80%。5.3實例2:數(shù)碼電子風(fēng)格的網(wǎng)絡(luò)安全產(chǎn)品網(wǎng)站UI設(shè)計5.3.2設(shè)計頁面的主體視覺元素1:盾牌元素4.繪制盾牌的倒影效果復(fù)制并調(diào)整倒影：選中編組圖層“盾牌”，按Ctrl+J組合鍵復(fù)制并將其重命名為“盾牌倒影”，把該圖層向下移動一段距離，按Ctrl+T組合鍵調(diào)出自由變換手柄，用鼠標右鍵單擊，在菜單中依次選擇“水平翻轉(zhuǎn)”和“垂直翻轉(zhuǎn)”選項，展開編組圖層“盾牌倒影”，隱藏“盾牌厚度暗部陰影1”和“盾壁厚度暗部陰影2”圖層，并使用鋼筆工具適當調(diào)整“盾牌厚度”圖層，最終形狀如圖5-73(a)所示。轉(zhuǎn)換為智能對象并設(shè)置：將編組圖層“盾牌倒影”轉(zhuǎn)換為智能對象圖層，把圖層的“不透明度”改為20%，為其添加一個“高斯模糊”濾鏡，再將模糊“半徑”改為12像素。添加蒙版并繪制漸變：為盾牌倒影添加一個圖層蒙版，選中智能對象圖層“盾牌倒影”，單擊圖層面板底部的“當層蒙版”按鈕，為其添加一個圖層蒙版，使用漸變工具在圖層蒙版上從左下角向右上角方向拉出一個黑白漸變的圖形。5.3實例2:數(shù)碼電子風(fēng)格的網(wǎng)絡(luò)安全產(chǎn)品網(wǎng)站UI設(shè)計5.3.2設(shè)計頁面的主體視覺元素1:盾牌元素5.添加盾牌自發(fā)光照亮地板繪制橢圓并設(shè)置屬性：使用橢圓工具在盾牌和盾牌倒影之間繪制一個橢圓形狀，轉(zhuǎn)換為智能對象圖層，重命名為“盾牌發(fā)光照亮地板”，設(shè)置圖層“不透明度”為40%，“填充”為0%。設(shè)置盾牌顏色疊加和模糊濾鏡：為“盾牌”圖層添加一個“顏色疊加”圖層樣式，將顏色值改為#19fff1，“不透明度”改為40%，添加一個模擬半徑值為40的“高斯模糊”濾鏡。5.3實例2:數(shù)碼電子風(fēng)格的網(wǎng)絡(luò)安全產(chǎn)品網(wǎng)站UI設(shè)計5.3.3設(shè)計頁面的主體視覺元素2:病毒模型元素1.繪制病毒模型的主體圓球繪制最外層殼體的圓形：使用橢圓工具繪制一個寬高均為408像素的正圓形，將“填充”設(shè)為無，“描邊”顏色設(shè)為#ffffff，粗細設(shè)為1像素，再將生成的圖層命名為“圓球描邊1”。繪制內(nèi)部發(fā)光層：復(fù)制圖層“圓球描邊1”，并重命名為“圓球內(nèi)部發(fā)光”，保持選中橢圓工具，在工具屬性欄中更改當前選中圖層的矢量形狀的“填充”顏色為#ffffff，將該圖層的“不透明度”更改為12%，“填充”更改為0%，然后添加一個“內(nèi)發(fā)光”圖層樣式，將發(fā)光顏色設(shè)為#e5f0ff，“大小”設(shè)為150像素。繪制第二層描邊：再次復(fù)制圖層“圓球描邊1”，并重命名為“圓球描邊2”，保持選中橢圓工具，在工具屬性欄中更改當前選中圖層的矢量形狀的“六元”為2像素，將該圖層的“不透明度”改為30%，按Ctrl+T組合鍵調(diào)出自由變換手柄，適當縮小“圓球描邊2”的尺寸。5.3實例2:數(shù)碼電子風(fēng)格的網(wǎng)絡(luò)安全產(chǎn)品網(wǎng)站UI設(shè)計5.3.3設(shè)計頁面的主體視覺元素2:病毒模型元素2.繪制球體內(nèi)部的其他細節(jié)（1）繪制邊緣層：復(fù)制圖層“圓球描邊1”，重命名為“圓球邊緣”，保持選中橢圓工具，在工具屬性欄中更改當前選中圖層的矢量形狀的“填充”顏色為#ffffff，再將圖層的“不透明度”更改為30%，選擇橢圓工具，在工具屬性欄中更改“路徑操作”為“減去頂層形狀”，然后繪制一個略小一圈的圓形，從而創(chuàng)建出一個圓環(huán)形狀。（2）繪制高光點：復(fù)制圖層“圓球內(nèi)部發(fā)光”，重命名為“圓球高光點”，將其“外發(fā)光”圖層樣式的“大小”改為60像素，然后按Ctrl+T組合鍵使用自由變換手柄適當縮小其尺寸。（3）繪制內(nèi)部直線和網(wǎng)點：選擇鋼筆工具，設(shè)置“填充”設(shè)為無，“描邊”為1像素，顏色為#ffffff，在圓球內(nèi)部繪制多條直線組成網(wǎng)狀，將所有直線編組并命名為“折線”，選擇橢圓工具，設(shè)置“填充”為#ffffff，顏色為#ffffff，“描邊”為無，在剛剛繪制的直線網(wǎng)內(nèi)部線條交叉處繪制多個小圓點，將生成的圖層命名為“折線網(wǎng)點”。（4）繪制模糊高光點：選擇筆刷工具，設(shè)置筆刷的“大小”為125像素，筆刷“硬度”為0，筆刷的“不透明度”為50%，單擊圖層面板底部的“創(chuàng)建新圖層”按鈕，新建一個圖層，用筆刷在球體的大致左上區(qū)域單擊，繪制一個邊緣羽化的圓點，作為球體的模糊高光點，再將生成的圖層重命名為“圓球高光點模糊”。5.3實例2:數(shù)碼電子風(fēng)格的網(wǎng)絡(luò)安全產(chǎn)品網(wǎng)站UI設(shè)計5.3.3設(shè)計頁面的主體視覺元素2:病毒模型元素2.繪制球體內(nèi)部的其他細節(jié)（5）編組并設(shè)置外發(fā)光樣式：將目前為止繪制的所有球體相關(guān)的圖層打包編組并命名為“病毒核心球”，按A鍵切換到路徑選擇工具，選中并復(fù)制圖層“圓球描邊1”的圓形矢量形狀，將其粘貼到編組圖層“病毒核心球”上，以作為其矢量形狀蒙版，雙擊編組圖層“病毒核心球”，調(diào)出“圖層樣式”箱口，勾選“外發(fā)光”圖層樣式，設(shè)置“混合模式”為“濾色”，“不透明度”為60%，發(fā)光顏色值為#a4c4ff，“大小”為120像素。5.3實例2:數(shù)碼電子風(fēng)格的網(wǎng)絡(luò)安全產(chǎn)品網(wǎng)站UI設(shè)計5.3.3設(shè)計頁面的主體視覺元素2:病毒模型元素3.繪制病毒模型的觸角（1）繪制觸角描邊：選中鋼筆工具，設(shè)置鋼筆工具的“填充”為無，“描邊”為1像素，顏色為#ffffff，單擊工具屬性欄中的“路徑操作”按鈕，在彈出的下拉菜單中選擇“新建圖層”選項，繪制一個新的矢量形狀，作為病毒的觸角形狀，將生成的圖層重命名為“觸角描邊”。（2）繪制觸角內(nèi)發(fā)光：復(fù)制“觸角描邊”圖層，重命名為“觸角內(nèi)發(fā)光”，保持選中鋼筆工具，在工具屬性欄中設(shè)置當前選中圖層的矢量首都北京的“填充”顏色為#ffffff，圖層“不透明度”為10%，圖層的“填充”為0，然后為該圖層的樣式，設(shè)置發(fā)光顏色為#e5f0ff，“大小”為30像素。（3）編組并再次編組：將“觸角描邊”圖層和“觸角內(nèi)發(fā)光”圖層編組并重命名為“觸角1”，將該編組圖層和之前繪制的病毒球體編組圖層“病毒核心球”也編組，并重命名為“病毒模型1”。（4）繪制觸角頂端形狀：選擇鋼筆工具，設(shè)置鋼筆工具的“填充”顏色為#ffffff，“描邊”為無，在觸角頂端繪制圖5-81所示的矢量形狀，將圖層“不透明度”改為80%，為這個矢量形狀添加一個“外發(fā)光”圖層樣式，設(shè)置“混合模式”為“濾色”，“不光學(xué)中為65%，發(fā)光顏色為#ffffff，“大小”為20像素。5.3實例2:數(shù)碼電子風(fēng)格的網(wǎng)絡(luò)安全產(chǎn)品網(wǎng)站UI設(shè)計5.3.3設(shè)計頁面的主體視覺元素2:病毒模型元素4.復(fù)制多個觸角并微調(diào)：復(fù)制8個左右的觸角，分別微調(diào)其形狀、不透明度等，其中4個放在“病毒核心球”編組圖層下，4個放在“病毒核心球”編組圖層上，然后為“病毒模型1”打包編組，重命名為“病毒模型+倒影”。5.3實例2:數(shù)碼電子風(fēng)格的網(wǎng)絡(luò)安全產(chǎn)品網(wǎng)站UI設(shè)計5.3.3設(shè)計頁面的主體視覺元素2:病毒模型元素5.為病毒模型創(chuàng)建倒影（1）創(chuàng)建在地板上的倒影：將病毒模型編組圖層轉(zhuǎn)換為智能對象圖層，然后復(fù)制