網頁美工設計-字體設計.ppt

項目3網頁字體設計 任務1千變萬化的字體設計課件 建議2學時 學習目標 1 了解網頁字體以及字體的編排 2 掌握網頁字體的設計原則 3 掌握不同風格的字體在不同頁面中的應用 4 學會常見字體的特效設計 知識準備 了解網頁中的字體 案例欣賞 下圖為以字體為主的網頁 知識準備 了解網頁中的字體 案例分析 1 表現形式 用字體和簡易圖形作為網頁界面的主要表現目標 2 色彩運用 色彩上采用黑色 橙色和灰色相結合的設計方式 3 欄目設置 依據易用性原則 設置了網站的各要素 4 動態(tài)效果設計 當鼠標點擊導航 圖片和具體內容時 輕松進入站點 簡單 明了 易于操作 知識準備 了解網頁中的字體 理論概要 1 字體設計 字體 字號 字體的粗細 字距和行距 2 字體編排設計 兩端對齊 一端對齊 居中對齊 文字繞圖 自由編排 3 字體的風格 動感活力 穩(wěn)重規(guī)范 隨意瀟灑 活潑可愛 雅致端莊 簡單大方 4 文字編排中常見的設計方式 5 字體色彩設計 6 網頁字體的設計原則 字體 字號 字體的粗細 字距和行距 兩端對齊 一端對齊 居中對齊 文字繞圖 自由編排 動感活力 穩(wěn)重規(guī)范 隨意瀟灑 活潑可愛 雅致端莊 簡單大方 同等重量 級別的內容 文字大小 粗細的變化需統(tǒng)一 以便瀏覽者分清主從關系 更好的理解文字內容和所傳達的信息 運用通欄方式編排文字 頁面顯得規(guī)整有序 更利于瀏覽者閱讀 運用分欄方式編排文字 可豐富網頁版面 字體編排與網站色彩 風格需統(tǒng)一 例如女性網站可選用秀麗的細體字 男性網站可選用挺拔的粗體字 兒童網站可選用可愛的藝術字 藝術字體的運用可增添頁面的獨特魅力 特立獨行的藝術字可給瀏覽者強烈的視覺沖擊力 從而加深對網站得印象 不同程度的傾斜字體可以給瀏覽者不同的視覺效果 并為網頁注入新的活力 增添網頁的動感和韻味 對比色的運用 多種顏色字體的配置效果 利用強調色突出網站的特別信息 字體是網頁的重要組成部分 字體設計的好壞直接影響網頁的美觀及內容的有效傳播 所以設計字體的時候要遵循以下幾個基本原則 設置字體時 盡可能使用通俗易懂的常用字體 避免繁雜凌亂 防止字體失去可讀性功用 設置字體時 不宜選擇過多種字體 以3種以內為宜 設置字體時 根據實際情況選擇字號 不宜過大或過小 設置字體時 字體要與網站的主題統(tǒng)一 以便更好的傳遞信息 任務1 千變萬化的字體設計 本任務是修改網頁中文字的字體 字號和位置 如下圖所示 任務分析 本任務將是修改網頁中文字的字體 字號和位置 感受網頁中千變萬化的文字效果 該圖為一美容機構網站的局部截取圖 從網站的布局 圖片的配置到色彩的整體搭配都非常美觀 但是由于網頁中文字的使用不當 使網頁看起來失色不少 在視覺傳達的過程中 文字除了傳遞信息的功能外 還具有傳達情感的功能 因此它必須有視覺上得美感 設計精良 美觀的文字使人感到愉悅 從而獲得良好的心理反應更好的發(fā)揮功效 任務實施 1 打開素材圖片 2 修改文字字體 3 修改文字字號 4 修改文字位置 5 改變字體顏色 參照教材中 任務實施 嘗試操作 完成網頁中字體的修改 拓展探索 根據任務1的實例 重新設計編排網頁中的文字 要求字體的設計與網頁的整體風格既和諧統(tǒng)一 又要富有一定的變化 從而起到有效傳遞