商業(yè)網(wǎng)站Logo設(shè)計(jì)與制作課件

1、1. 項(xiàng)目展示與項(xiàng)目目標(biāo) 2. 項(xiàng)目資訊 3. 項(xiàng)目計(jì)劃與決策 4. 項(xiàng)目實(shí)施 5. 項(xiàng)目檢查與評(píng)估 6. 強(qiáng)化拓展實(shí)訓(xùn):企業(yè)LOGO設(shè)計(jì) 情境3：Logo設(shè)計(jì)與制作 基于工作過程的網(wǎng)頁設(shè)計(jì)與制作教程第三章 主頁面的設(shè)計(jì)項(xiàng)目展示與項(xiàng)目目標(biāo)1項(xiàng)目展示與項(xiàng)目目標(biāo) 基本掌握?qǐng)D層的概念掌握?qǐng)D層的使用方法與技巧熟練掌握?qǐng)D層的樣式的使用方法與技巧掌握網(wǎng)頁布局工具網(wǎng)格、標(biāo)尺與參考線的使用技巧 1項(xiàng)目背景2. 項(xiàng)目資訊 淮信科技有限公司是一家集培訓(xùn)認(rèn)證、軟件開發(fā)、域名注冊(cè)、虛擬主機(jī)、網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷推廣與一體的IT企業(yè)。簡(jiǎn)稱淮信科技，企業(yè)已經(jīng)有了自己的企業(yè)商標(biāo)，涉及企業(yè)Logo主要是為了建立網(wǎng)站而使用，所以

2、設(shè)計(jì)要簡(jiǎn)潔，反映出企業(yè)性質(zhì)。 2. 項(xiàng)目資訊 在字典中Logo是“標(biāo)識(shí)語”的意思，在IT領(lǐng)域，Logo是標(biāo)志、徽標(biāo)的意思。網(wǎng)站的Logo就是網(wǎng)站的標(biāo)志，也是互聯(lián)網(wǎng)上各個(gè)網(wǎng)站用來與其他網(wǎng)站鏈接的圖形標(biāo)志。 Logo有以下幾個(gè)作用： 1）Logo是與其他網(wǎng)站鏈接以及讓其他網(wǎng)站鏈接的標(biāo)志和門戶。 2）Logo是網(wǎng)站形象的重要體現(xiàn)。 3）Logo能使瀏覽者便于選擇。 一個(gè)好的Logo應(yīng)具備的條件： 1）精美、獨(dú)特，符合伙計(jì)標(biāo)準(zhǔn)。 2）與網(wǎng)站的整體風(fēng)格相融。 3）能夠體現(xiàn)網(wǎng)站的類型、內(nèi)容和風(fēng)格。 關(guān)鍵知識(shí)點(diǎn)一：Logo的設(shè)計(jì)綜述 2. 項(xiàng)目資訊網(wǎng)易的Logo，它使用了3種顏色：紅（網(wǎng)易）、黑（NETEA

3、SE，）、白（底色）。“網(wǎng)易”兩個(gè)字使用了篆書，體現(xiàn)了古典意味，也蘊(yùn)含著“輕松上網(wǎng)，易如反掌”的含義。關(guān)鍵知識(shí)點(diǎn)一：Logo的設(shè)計(jì)綜述 新浪網(wǎng)的Logo，Logo的背景色以淡黃色到白色的過渡，同時(shí)配以禮花、鞭炮以及“春”字都反映了春節(jié)的氣氛，該Logo最有特色的是字母i，i上的點(diǎn)用了表象性手法處理成一只眼睛，而這又使這個(gè)字母i像一個(gè)小火炬，這樣既向往人們傳達(dá)了“世界在你眼中”的概念，激發(fā)人們對(duì)網(wǎng)絡(luò)的好奇，又使人們?nèi)菀子涀⌒吕司W(wǎng)的域名。 2. 項(xiàng)目資訊關(guān)鍵知識(shí)點(diǎn)二：圖層的使用混合模式不透明度圖層可見性連接圖層 添加圖層樣式 蒙板圖層 蒙板圖層 添加圖層 蒙板圖層 普通圖層 2. 項(xiàng)目資訊關(guān)鍵知識(shí)

4、點(diǎn)三：文本工具與圖層樣式的使用 使用字體使用字體文字工具屬性文字大小字體樣式字體對(duì)齊字體顏色字體變形字符段落2. 項(xiàng)目資訊關(guān)鍵知識(shí)點(diǎn)三：文本工具與圖層樣式的使用 2. 項(xiàng)目資訊關(guān)鍵知識(shí)點(diǎn)四：網(wǎng)頁效果圖的精確布局 參考線命令:執(zhí)行“視圖”“標(biāo)尺”命令即可在編輯窗口中顯示標(biāo)尺；執(zhí)行“視圖”“顯示”“參考線”命令即可在編輯窗口中顯示參考線。 網(wǎng)格命令:執(zhí)行“視圖”“顯示”“網(wǎng)格”命令即可在編輯窗口中顯示網(wǎng)格。 參數(shù)設(shè)置命令:執(zhí)行“編輯”“首選項(xiàng)”“單位與標(biāo)尺”命令（快捷鍵直接調(diào)出“首選項(xiàng)”對(duì)話框） 3. 項(xiàng)目計(jì)劃與決策 淮信科技Logo主要在原有的商標(biāo)的基礎(chǔ)上，設(shè)計(jì)出簡(jiǎn)潔，反映出企業(yè)性質(zhì)的網(wǎng)絡(luò)標(biāo)志。

5、建議設(shè)計(jì)的大小為230像素100像素，Logo的主題內(nèi)容放在中間區(qū)域210像素60像素內(nèi)，企業(yè)商標(biāo)重新繪制，主體顏色不變?nèi)匀徊捎闷髽I(yè)的科技藍(lán)色（RGB值為15，40，140），草圖設(shè)計(jì)如圖所示。 商標(biāo)淮信科技（方正大黑簡(jiǎn)體）淮信科技英文名稱4. 項(xiàng)目實(shí)施 1）啟動(dòng)Photoshop 軟件，然后執(zhí)行“文件”“新建”命令，創(chuàng)建“淮新科技Logo.psd”文件，寬度：230像素，高度：100像素，分辨率：72像素/英寸，顏色模式：RGB顏色，背景內(nèi)容：白色。 2）執(zhí)行“編輯”“首選項(xiàng)”“單位與標(biāo)尺”命令，修改標(biāo)尺的單位為像素，執(zhí)行“編輯”“首選項(xiàng)”“參考線、網(wǎng)格、切片和計(jì)數(shù)”命令，將網(wǎng)格線間距修改為

6、20像素），執(zhí)行“視圖”“標(biāo)尺”命令顯示標(biāo)尺，執(zhí)行“視圖”“顯示”“網(wǎng)格”命令顯示網(wǎng)格，最后執(zhí)行“視圖”“新參考線”命令，會(huì)彈出“新建參考線”對(duì)話框（如圖3-35所示），依次新建兩條水平參考線（20px，80px）與兩條垂直參考線(10px，220px)，新建完成后效果如圖3-36所示。4. 項(xiàng)目實(shí)施 3）新建一個(gè)圖層，放大圖像然后使用“多邊型套索工具”，依次選區(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ū)中，如

7、圖3-38所示。圖 3-37 繪制不規(guī)則選區(qū) 圖 3-38 填充選區(qū) 4. 項(xiàng)目實(shí)施 4）復(fù)制圖層1命名為圖層2，然后執(zhí)行“編輯”“自由變換”命令，在變換區(qū)域內(nèi)單擊鼠標(biāo)右鍵執(zhí)行“水平翻轉(zhuǎn)”命令，最后將圖層2向右移動(dòng)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. 項(xiàng)目實(shí)施 6）使用文本工具輸入“淮信科技”，設(shè)置字體為“方正大黑簡(jiǎn)體”， 36點(diǎn)，字體為藍(lán)色，點(diǎn)

8、擊字符段落標(biāo)記，設(shè)置字符間距為100（如圖3-41所示），文字效果如圖3-42所示。 圖 3-41 設(shè)置字符間距 圖 3-42 添加文字后的效果 4. 項(xiàng)目實(shí)施 7）采用同樣的方法輸入文本“Huaixin Scinence and Technology”，字體：Arial Black，大?。?點(diǎn)，顏色：藍(lán)色（RGB值為15，40，140），如圖3-43所示。8）新建圖層4，使用鉛筆工具繪制一條線，調(diào)整圖層位置，如圖3-44所示。 圖 3-43 添加英文文字 圖 3-44 添加橫線的效果 4. 項(xiàng)目實(shí)施 9）對(duì)圖層添加圖層樣式。鼠標(biāo)選中“淮信科技”文本層，鼠標(biāo)點(diǎn)擊“添加圖層樣式”按鈕，選擇“斜面與浮雕”效果，設(shè)置如圖3-45所示。 圖 3-45 為“淮信科技”設(shè)置“斜面與浮雕”4. 項(xiàng)目實(shí)施 10）在圖層面板中，選中“淮信科技”文本層，把鼠標(biāo)放在上點(diǎn)擊鼠標(biāo)右鍵，執(zhí)行“拷貝圖層樣式”命令，然