基于工作過程的網(wǎng)頁設(shè)計與網(wǎng)站開發(fā)教程

基于工作過程的網(wǎng)頁設(shè)計與網(wǎng)站開發(fā)教程機械工業(yè)出版社主編：張洪斌劉萬輝1.項目展示與項目目標(biāo)

2.項目資訊3.項目計劃與決策4.項目實施5.項目檢查與評估6.強化拓展實訓(xùn):企業(yè)LOGO設(shè)計

情境2：商業(yè)網(wǎng)站Logo設(shè)計與制作

基于工作過程的網(wǎng)頁設(shè)計與制作教程第三章網(wǎng)頁效果圖設(shè)計

項目展示與項目目標(biāo)1項目展示與項目目標(biāo)

基本掌握圖層的概念掌握圖層的使用方法與技巧熟練掌握圖層的樣式的使用方法與技巧掌握網(wǎng)頁布局工具網(wǎng)格、標(biāo)尺與參考線的使用技巧

1．項目背景2.項目資訊

淮信科技有限公司是一家集培訓(xùn)認(rèn)證、軟件開發(fā)、域名注冊、虛擬主機、網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷推廣與一體的IT企業(yè)。簡稱淮信科技，企業(yè)已經(jīng)有了自己的企業(yè)商標(biāo)，涉及企業(yè)Logo主要是為了建立網(wǎng)站而使用，所以設(shè)計要簡潔，反映出企業(yè)性質(zhì)。

2.項目資訊在字典中Logo是“標(biāo)識語”的意思，在IT領(lǐng)域，Logo是標(biāo)志、徽標(biāo)的意思。網(wǎng)站的Logo就是網(wǎng)站的標(biāo)志，也是互聯(lián)網(wǎng)上各個網(wǎng)站用來與其他網(wǎng)站鏈接的圖形標(biāo)志。Logo有以下幾個作用：1）Logo是與其他網(wǎng)站鏈接以及讓其他網(wǎng)站鏈接的標(biāo)志和門戶。2）Logo是網(wǎng)站形象的重要體現(xiàn)。3）Logo能使瀏覽者便于選擇。

一個好的Logo應(yīng)具備的條件：1）精美、獨特，符合伙計標(biāo)準(zhǔn)。2）與網(wǎng)站的整體風(fēng)格相融。3）能夠體現(xiàn)網(wǎng)站的類型、內(nèi)容和風(fēng)格。

關(guān)鍵知識點一：Logo的設(shè)計綜述

2.項目資訊網(wǎng)易的Logo，它使用了3種顏色：紅（網(wǎng)易）、黑（NETEASE，）、白（底色）?！熬W(wǎng)易”兩個字使用了篆書，體現(xiàn)了古典意味，也蘊含著“輕松上網(wǎng)，易如反掌”的含義。關(guān)鍵知識點一：Logo的設(shè)計綜述

新浪網(wǎng)的Logo，Logo的背景色以淡黃色到白色的過渡，同時配以禮花、鞭炮以及“春”字都反映了春節(jié)的氣氛，該Logo最有特色的是字母i，i上的點用了表象性手法處理成一只眼睛，而這又使這個字母i像一個小火炬，這樣既向往人們傳達(dá)了“世界在你眼中”的概念，激發(fā)人們對網(wǎng)絡(luò)的好奇，又使人們?nèi)菀子涀⌒吕司W(wǎng)的域名。

2.項目資訊關(guān)鍵知識點二：圖層的使用混合模式不透明度圖層可見性連接圖層添加圖層樣式蒙板圖層蒙板圖層添加圖層蒙板圖層普通圖層2.項目資訊關(guān)鍵知識點三：文本工具與圖層樣式的使用

使用字體使用字體文字工具屬性文字大小字體樣式字體對齊字體顏色字體變形字符段落2.項目資訊關(guān)鍵知識點三：文本工具與圖層樣式的使用

2.項目資訊關(guān)鍵知識點四：網(wǎng)頁效果圖的精確布局

參考線命令:執(zhí)行“視圖”→“標(biāo)尺”命令即可在編輯窗口中顯示標(biāo)尺；執(zhí)行“視圖”→“顯示”→“參考線”命令即可在編輯窗口中顯示參考線。

網(wǎng)格命令:執(zhí)行“視圖”→“顯示”→“網(wǎng)格”命令即可在編輯窗口中顯示網(wǎng)格。

參數(shù)設(shè)置命令:執(zhí)行“編輯”→“首選項”→“單位與標(biāo)尺”命令（快捷鍵<Ctrl+K>直接調(diào)出“首選項”對話框）

3.項目計劃與決策

淮信科技Logo主要在原有的商標(biāo)的基礎(chǔ)上，設(shè)計出簡潔，反映出企業(yè)性質(zhì)的網(wǎng)絡(luò)標(biāo)志。建議設(shè)計的大小為230像素×100像素，Logo的主題內(nèi)容放在中間區(qū)域210像素×60像素內(nèi)，企業(yè)商標(biāo)重新繪制，主體顏色不變?nèi)匀徊捎闷髽I(yè)的科技藍(lán)色（RGB值為15，40，140），草圖設(shè)計如圖所示。

商標(biāo)淮信科技（方正大黑簡體）淮信科技英文名稱4.項目實施

1）啟動Photoshop軟件，然后執(zhí)行“文件”→“新建”命令，創(chuàng)建“淮新科技Logo.psd”文件，寬度：230像素，高度：100像素，分辨率：72像素/英寸，顏色模式：RGB顏色，背景內(nèi)容：白色。

2）執(zhí)行“編輯”→“首選項”→“單位與標(biāo)尺”命令，修改標(biāo)尺的單位為像素，執(zhí)行“編輯”→“首選項”→“參考線、網(wǎng)格、切片和計數(shù)”命令，將網(wǎng)格線間距修改為20像素），執(zhí)行“視圖”→“標(biāo)尺”命令顯示標(biāo)尺，執(zhí)行“視圖”→“顯示”→“網(wǎng)格”命令顯示網(wǎng)格，最后執(zhí)行“視圖”→“新參考線”命令，會彈出“新建參考線”對話框（如圖3-35所示），依次新建兩條水平參考線（20px，80px）與兩條垂直參考線(10px，220px)，新建完成后效果如圖3-36所示。4.項目實施

3）新建一個圖層，放大圖像然后使用“多邊型套索工具”，依次選區(qū)坐標(biāo)1（10，20）、坐標(biāo)2（25，30）、坐標(biāo)3（30，50）、坐標(biāo)4（25，80）、坐標(biāo)5（10，80）、坐標(biāo)6（15，50）形成閉合選區(qū)，如圖3-37所示，最后設(shè)置前景色為藍(lán)色（RGB值為15，40，140），并填充到選區(qū)中，如圖3-38所示。圖3-37繪制不規(guī)則選區(qū)圖3-38填充選區(qū)4.項目實施

4）復(fù)制圖層1命名為圖層2，然后執(zhí)行“編輯”→“自由變換”命令，在變換區(qū)域內(nèi)單擊鼠標(biāo)右鍵執(zhí)行“水平翻轉(zhuǎn)”命令，最后將圖層2向右移動25像素，如圖3-39所示。5）新建圖層3，選擇“橢圓套索工具”，設(shè)置屬性中的樣式為固定大小，寬20像素，高20像素，繪制選區(qū)后填充為紅色（RGB值為：255，0，0），用方向鍵調(diào)整其位置在圖層1與圖層2中間，如圖3-40所示。圖3-39繪制不規(guī)則選區(qū)圖3-40填充選區(qū)4.項目實施

6）使用文本工具輸入“淮信科技”，設(shè)置字體為“方正大黑簡體”，36點，字體為藍(lán)色，點擊字符段落標(biāo)記，設(shè)置字符間距為100（如圖3-41所示），文字效果如圖3-42所示。

圖3-41設(shè)置字符間距圖3-42添加文字后的效果4.項目實施

7）采用同樣的方法輸入文本“Huaixin

ScinenceandTechnology”，字體：ArialBlack，大?。?點，顏色：藍(lán)色（RGB值為15，40，140），如圖3-43所示。8）新建圖層4，使用鉛筆工具繪制一條線，調(diào)整圖層位置，如圖3-44所示。

圖3-43添加英文文字圖3-44添加橫線的效果4.項目實施

9）對圖層添加圖層樣式。鼠標(biāo)選中“淮信科技”文本層，鼠標(biāo)點擊“添加圖層樣式”按鈕，選擇“斜面與浮雕”效果，設(shè)置如圖3-45所示。

圖3-45為“淮信科技”設(shè)置“斜面與浮雕”4.項目實施

10）在圖層面板中，選中“淮信科技”文本層，把鼠標(biāo)放在上點擊鼠標(biāo)右鍵，執(zhí)行“拷貝圖層樣式”命令，然后選中圖層1，點擊鼠標(biāo)右鍵執(zhí)行“粘貼圖層樣式”命令，依次對圖層2、圖層3組同樣的操作，最后給圖層3添加“描邊”效果（如圖3-46所示）。11）調(diào)整各個圖層的位置，淮信科技Logo就完成了，效果圖如圖3-25所示。

圖3-46圖層3的描邊效果設(shè)置（顏色為白色）5.項目檢查與評估

學(xué)習(xí)目標(biāo)評價項目能夠認(rèn)識PhotoshopCS4界面能夠識別PhotoshopCS4界面中的各個模塊的功能熟練掌握快捷鍵與鼠標(biāo)操作能夠使用常用的40個快捷鍵地使用掌握PhotoshopCS4的基本操作能夠掌握圖像文件的創(chuàng)建、保存、關(guān)閉能夠掌握圖像文件的打開與顯示模式掌握圖像大小的基本操作方法掌握圖像的復(fù)制與粘貼掌握PhotoshopCS4的部分基本工具的使用能夠掌握選區(qū)工具的使用能夠掌握選區(qū)的填充與描邊能夠掌握圖像的變換方法能夠掌握文本的輸入方法6.強化拓展實訓(xùn)：企業(yè)LOGO設(shè)計

6.強化拓展實訓(xùn)：圖像的摳取強化練習(xí)

在圖像選擇過程中為保證選區(qū)精細(xì)度，建議對圖像進(jìn)行放大（快捷鍵<Ctrl++>）后進(jìn)行選取。在圖像選取過程中，如果改變選區(qū)，可以按<Delete>鍵刪除定位節(jié)點。圖像選擇過程中如果找不到第一點所在的位置，可以在任意一點雙擊鼠標(biāo)左鍵閉合選區(qū)。在繪制選區(qū)過程中，按住<Shift>鍵可以得到水平、垂直或45°方向的選區(qū)線條。使用“空格鍵”來切換“抓手工具”，用來調(diào)整圖片的位置，便于圖像的控制。新選區(qū)：清除原有的選擇區(qū)域，直接新建選區(qū)。這是Photoshop中默認(rèn)的選擇方式，使用起來非常簡單。

添加到選區(qū)：在原有的選區(qū)的基礎(chǔ)上，添加新的