商業(yè)網站Logo設計與制作-18頁PPT課件

1、項目展示與項目目標1項目展示與項目目標 基本掌握圖層的概念掌握圖層的使用方法與技巧熟練掌握圖層的樣式的使用方法與技巧掌握網頁布局工具網格、標尺與參考線的使用技巧 1項目背景2. 項目資訊 淮信科技有限公司是一家集培訓認證、軟件開發(fā)、域名注冊、虛擬主機、網站建設、網絡營銷推廣與一體的IT企業(yè)。簡稱淮信科技，企業(yè)已經有了自己的企業(yè)商標，涉及企業(yè)Logo主要是為了建立網站而使用，所以設計要簡潔，反映出企業(yè)性質。 2. 項目資訊 在字典中Logo是“標識語”的意思，在IT領域，Logo是標志、徽標的意思。網站的Logo就是網站的標志，也是互聯網上各個網站用來與其他網站鏈接的圖形標志。 Logo有以下幾

2、個作用： 1）Logo是與其他網站鏈接以及讓其他網站鏈接的標志和門戶。 2）Logo是網站形象的重要體現。 3）Logo能使瀏覽者便于選擇。 一個好的Logo應具備的條件： 1）精美、獨特，符合伙計標準。 2）與網站的整體風格相融。 3）能夠體現網站的類型、內容和風格。 關鍵知識點一：Logo的設計綜述 2. 項目資訊網易的Logo，它使用了3種顏色：紅（網易）、黑（NETEASE，163）、白（底色）。“網易”兩個字使用了篆書，體現了古典意味，也蘊含著“輕松上網，易如反掌”的含義。關鍵知識點一：Logo的設計綜述 新浪網的Logo，Logo的背景色以淡黃色到白色的過渡，同時配以禮花、鞭炮以及

3、“春”字都反映了春節(jié)的氣氛，該Logo最有特色的是字母i，i上的點用了表象性手法處理成一只眼睛，而這又使這個字母i像一個小火炬，這樣既向往人們傳達了“世界在你眼中”的概念，激發(fā)人們對網絡的好奇，又使人們容易記住新浪網的域名。 2. 項目資訊關鍵知識點二：圖層的使用混合模式不透明度圖層可見性連接圖層 添加圖層樣式 蒙板圖層 蒙板圖層 添加圖層 蒙板圖層 普通圖層 2. 項目資訊關鍵知識點三：文本工具與圖層樣式的使用 使用字體使用字體文字工具屬性文字大小字體樣式字體對齊字體顏色字體變形字符段落2. 項目資訊關鍵知識點三：文本工具與圖層樣式的使用 2. 項目資訊關鍵知識點四：網頁效果圖的精確布局 參

4、考線命令:執(zhí)行“視圖”“標尺”命令即可在編輯窗口中顯示標尺；執(zhí)行“視圖”“顯示”“參考線”命令即可在編輯窗口中顯示參考線。 網格命令:執(zhí)行“視圖”“顯示”“網格”命令即可在編輯窗口中顯示網格。 參數設置命令:執(zhí)行“編輯”“首選項”“單位與標尺”命令（快捷鍵直接調出“首選項”對話框） 3. 項目計劃與決策 淮信科技Logo主要在原有的商標的基礎上，設計出簡潔，反映出企業(yè)性質的網絡標志。建議設計的大小為230像素100像素，Logo的主題內容放在中間區(qū)域210像素60像素內，企業(yè)商標重新繪制，主體顏色不變仍然采用企業(yè)的科技藍色（RGB值為15，40，140），草圖設計如圖所示。 商標淮信科技（方正

5、大黑簡體）淮信科技英文名稱4. 項目實施 1）啟動Photoshop 軟件，然后執(zhí)行“文件”“新建”命令，創(chuàng)建“淮新科技Logo.psd”文件，寬度：230像素，高度：100像素，分辨率：72像素/英寸，顏色模式：RGB顏色，背景內容：白色。 2）執(zhí)行“編輯”“首選項”“單位與標尺”命令，修改標尺的單位為像素，執(zhí)行“編輯”“首選項”“參考線、網格、切片和計數”命令，將網格線間距修改為20像素），執(zhí)行“視圖”“標尺”命令顯示標尺，執(zhí)行“視圖”“顯示”“網格”命令顯示網格，最后執(zhí)行“視圖”“新參考線”命令，會彈出“新建參考線”對話框（如圖3-35所示），依次新建兩條水平參考線（20px，80px）

6、與兩條垂直參考線(10px，220px)，新建完成后效果如圖3-36所示。4. 項目實施 3）新建一個圖層，放大圖像然后使用“多邊型套索工具”，依次選區(qū)坐標1（10，20）、坐標2（25，30）、坐標3（30，50）、坐標4（25，80）、坐標5（10，80）、坐標6（15，50）形成閉合選區(qū)，如圖3-37所示，最后設置前景色為藍色（RGB值為15，40，140），并填充到選區(qū)中，如圖3-38所示。圖 3-37 繪制不規(guī)則選區(qū) 圖 3-38 填充選區(qū) 4. 項目實施 4）復制圖層1命名為圖層2，然后執(zhí)行“編輯”“自由變換”命令，在變換區(qū)域內單擊鼠標右鍵執(zhí)行“水平翻轉”命令，最后將圖層2向右移動

7、25像素，如圖3-39所示。5）新建圖層3，選擇“橢圓套索工具”，設置屬性中的樣式為固定大小，寬20像素，高20像素，繪制選區(qū)后填充為紅色（RGB值為：255，0，0），用方向鍵調整其位置在圖層1與圖層2中間，如圖3-40所示。 圖 3-39 繪制不規(guī)則選區(qū) 圖 3-40 填充選區(qū) 4. 項目實施 6）使用文本工具輸入“淮信科技”，設置字體為“方正大黑簡體”， 36點，字體為藍色，點擊字符段落標記，設置字符間距為100（如圖3-41所示），文字效果如圖3-42所示。 圖 3-41 設置字符間距 圖 3-42 添加文字后的效果 4. 項目實施 7）采用同樣的方法輸入文本“Huaixin Scinence and Technology”，字體：Arial Black，大?。?點，顏色：藍色（RGB值為15，40，140），如圖3-43所示。8）新建圖層4，使用鉛筆工具繪制一條線，調整圖層位置，如圖3-44所示。 圖 3-43 添加英文文字 圖 3-44 添加橫線的效果 4. 項目實施 9）對圖層添加圖層樣式。鼠標選中“淮信科技”文本層，鼠標點擊“添加圖層樣式”按鈕，選擇“斜面與浮雕”效果，設置如圖3-45所示。 圖 3-45 為“淮信科技”設置“斜面與浮雕”4. 項目實施 10）在圖層面板中，選中“淮信科技”文本層，把鼠標放在上點擊鼠標右鍵，執(zhí)行“拷貝圖層樣式”命令，然后選中圖層