新媒體美工設(shè)計(jì)的基本要素《Photoshop新媒體美工設(shè)計(jì)》03目錄/Contents3.13.23.33.4認(rèn)識(shí)圖形設(shè)計(jì)要素了解設(shè)計(jì)展現(xiàn)要素實(shí)戰(zhàn)案例——對(duì)H5頁面進(jìn)行鑒賞課后習(xí)題目錄/Contents3.1認(rèn)識(shí)圖形設(shè)計(jì)要素3.1.1點(diǎn)3.1.2線3.1.3面3.1.1點(diǎn)點(diǎn)是可見的最小的形式單元，具有凝聚視覺的作用，可以使畫面布局顯得合理、舒適、靈動(dòng)且富有沖擊力。點(diǎn)的表現(xiàn)形式豐富多樣，既包含圓點(diǎn)、方點(diǎn)、三角點(diǎn)等規(guī)則的點(diǎn)，又包含鋸齒點(diǎn)、雨點(diǎn)、泥點(diǎn)、墨點(diǎn)等不規(guī)則的點(diǎn)。點(diǎn)沒有規(guī)定的大小和形狀。畫面中越小的形體越容易給人點(diǎn)的感覺，如漫天的雪花、夜空中的星星、大海中的帆船和草原上的馬等。點(diǎn)既可以單獨(dú)存在于畫面之中，也可以組合成線或者面。3.1.2線線在視覺形態(tài)中可以用于表現(xiàn)長(zhǎng)度、寬度、位置、方向和性格，具有剛?cè)嵯酀?jì)、優(yōu)美和簡(jiǎn)潔的特點(diǎn)，常用于渲染畫面，引導(dǎo)、串聯(lián)或分割畫面要素。線分為水平線、垂直線、曲線、斜線。線的不同形態(tài)所表達(dá)的情感是不同的，直線單純、大氣、明確、莊嚴(yán)；曲線柔和流暢、優(yōu)雅靈動(dòng)；斜線活力四射，具有很強(qiáng)的視覺沖擊。3.1.3面幾何形是指有規(guī)律的易于被人們所識(shí)別、理解和記憶的圖形，包括圓形、矩形、三角形、菱形、多邊形等，以及由線條組成的不規(guī)則幾何要素。矩形給人帶來穩(wěn)重、厚實(shí)與規(guī)矩的感覺；圓形給人充實(shí)、柔和、圓滿的感覺；正三角形給人堅(jiān)實(shí)、穩(wěn)定的感覺；不規(guī)則幾何形狀給人時(shí)尚活力的感覺。①幾何形3.1.3面自由形來源于自然或靈感，比較灑脫、隨意，可以營造出淳樸、生動(dòng)的視覺效果。自由形可以是表達(dá)設(shè)計(jì)者個(gè)人情感的各種手繪形，也可以是曲線彎曲形成的各種有機(jī)形，還可以是自然力形成的各種偶然形。②自由形目錄/Contents3.13.23.33.4認(rèn)識(shí)圖形設(shè)計(jì)要素了解設(shè)計(jì)展現(xiàn)要素實(shí)戰(zhàn)案例——對(duì)H5頁面進(jìn)行鑒賞課后習(xí)題目錄/Contents3.2了解設(shè)計(jì)展現(xiàn)要素3.2.1色彩3.2.2版式布局3.2.3文字3.2.1色彩1．構(gòu)成色彩的三要素——色相、明度、純度①色相。色彩是由光波波長(zhǎng)的長(zhǎng)短所決定的，而色相就是指這些不同波長(zhǎng)的色彩情況。③純度。純度（也叫飽和度）是指色彩的純凈或者鮮艷程度（下文統(tǒng)稱為飽和度）。飽和度越高，顏色越鮮艷，視覺沖擊力越強(qiáng)。②明度。明度是指色彩的明亮程度，即有色物體由于反射光量的區(qū)別而產(chǎn)生顏色的不同明暗強(qiáng)度。3.2.1色彩2．色彩的特性①色彩的情感性②色彩的象征性③色彩的強(qiáng)調(diào)性3.2.1色彩3．色彩的搭配與調(diào)整01OPTION02OPTION03OPTION①主色。主色是畫面中占用面積最大、最受矚目的色彩，它決定了整個(gè)畫面的風(fēng)格。主色不宜過多，一般控制在1～3種顏色，主色過多容易造成視覺疲勞。②輔助色。輔助色的占用面積略小于主色，是用于烘托主色的色彩。合理應(yīng)用輔助色能豐富畫面的色彩，使畫面效果更美觀、更有吸引力。③點(diǎn)綴色。點(diǎn)綴色是指畫面中占用面積小、色彩比較醒目的一種或多種色彩。合理應(yīng)用點(diǎn)綴色可以起到畫龍點(diǎn)睛的作用，使畫面主次更加分明、富有變化。3.2.1色彩3．色彩的搭配與調(diào)整色彩的搭配并不是隨心所欲的，而需要遵循一定的比例與流程。色彩搭配的黃金比例為“70:25:5”，其中，主色占總畫面的70%，輔助色占25%，而其他點(diǎn)綴色占5%。色彩搭配的流程為：首先根據(jù)畫面的布局選擇占用面積大的主色，然后根據(jù)主色選擇輔助色與點(diǎn)綴色，用它們來突出畫面的重點(diǎn)、平衡視覺效果。3.2.1色彩4．色彩的對(duì)比①色相對(duì)比。色相對(duì)比是指因色相的差別而形成的對(duì)比。②明度對(duì)比。明度對(duì)比是指利用色彩的明暗程度形成的對(duì)比。③純度對(duì)比。純度對(duì)比是指利用純度的強(qiáng)弱形成的對(duì)比。3.2.2版式布局①骨骼式布局②韻律式布局③流程式布局④放射式布局3.2.3文字1．文字的字體①黑體。黑體又稱方體或等線體，它沒有襯線裝飾，字形端莊，筆畫橫平豎直，筆跡粗細(xì)幾乎完全一致。黑體商業(yè)氣息濃厚，其“粗”的特點(diǎn)能夠滿足用戶對(duì)于文案字體“大”的要求，常用于表現(xiàn)陽剛、氣勢(shì)、端正等含義。常用黑體有方正黑體簡(jiǎn)體、方正大黑簡(jiǎn)體等。3.2.3文字1．文字的字體②宋體。宋體是比較傳統(tǒng)的字體，其字形較方正、纖細(xì)，結(jié)構(gòu)嚴(yán)謹(jǐn)，筆畫橫平豎直，末尾有裝飾。宋體給人一種秀氣端莊的感覺，其在保持極強(qiáng)筆畫韻律性的同時(shí)，能夠給用戶一種舒適醒目的感覺。宋體類的字體有很多，如華文系列宋體、方正雅宋系列宋體、漢儀系列宋體等。3.2.3文字1．文字的字體③楷體。楷體是漢字字體中的一種，從隸書演變而來，是現(xiàn)行的漢字手寫正體字之一，具有既起收有序、筆筆分明、堅(jiān)實(shí)有力，又停而不斷、直而不僵、彎而不弱、流暢自然的特點(diǎn)。3.2.3文字1．文字的字體④書法體。書法體是指具有書法風(fēng)格的字體，主要包括隸書、行書、草書、篆書和楷書等類型的字體。書法體具有較強(qiáng)的文化底蘊(yùn)，其字形自由多變、頓挫有力，力量中摻雜著文化氣息，常用于表現(xiàn)古典文化等感覺。⑤藝術(shù)體。藝術(shù)體是指一些非常規(guī)的特殊印刷用字體，一般用于美化版面。其筆畫和結(jié)構(gòu)大都進(jìn)行了一些藝術(shù)化處理，常用于商品海報(bào)或模板的標(biāo)題部分，以提升海報(bào)或模板的藝術(shù)品味。3.2.3文字1．文字的字體⑥襯線體與無襯線體。襯線體容易識(shí)別，它強(qiáng)調(diào)了每個(gè)字母筆畫的開始和結(jié)束，因此易讀性比較強(qiáng)；無襯線體則比較醒目。在整文閱讀的情況下，適合使用襯線體進(jìn)行排版，它易于提高換行閱讀的識(shí)別性，以避免發(fā)生行間的閱讀錯(cuò)誤，如Didot、Bodoni、Century、ComputerModern等。無襯線體是指西文中沒有襯線的字體，與漢字字體中的黑體相對(duì)應(yīng)。與襯線體相反，該類字體通常是機(jī)械的和統(tǒng)一線條的，它們往往擁有相同的曲率、筆直的線條、銳利的轉(zhuǎn)角。AdobeJenson、Janson、Garamond等字體均屬于無襯線體。3.2.3文字1．文字的字體⑦手寫體。手寫體是一種使用硬筆或者軟筆純手工寫出的文字。這種手寫體文字，大小不一、形態(tài)各異，更具有美觀性，如方正靜蕾簡(jiǎn)體、葉根友字體、Kensington、ConnoisseursTypeface、BefindisaScriptFont等。3.2.3文字2．文字的設(shè)計(jì)原則①字體與畫面風(fēng)格相符②增強(qiáng)文字的可讀性③增強(qiáng)排版的美觀度2.2.5合理運(yùn)用字體同一個(gè)畫面中字體的種類最好保持在2～3種，否則會(huì)使畫面變得復(fù)雜，影響用戶對(duì)信息的接收。字體在畫面中一般可分為標(biāo)題字體和正文字體。標(biāo)題字體的文字?jǐn)?shù)量較少，但字形設(shè)計(jì)比較突出，用以快速吸引用戶的注意力。正文字體的文字?jǐn)?shù)量較多、占用面積較大、字形變化較小，更強(qiáng)調(diào)易讀性。目錄/Contents3.13.23.33.4認(rèn)識(shí)圖形設(shè)計(jì)要素了解設(shè)計(jì)展現(xiàn)要素實(shí)戰(zhàn)案例——對(duì)H5頁面進(jìn)行鑒賞課后習(xí)題3.3實(shí)戰(zhàn)案例——對(duì)H5頁面進(jìn)行鑒賞實(shí)戰(zhàn)目標(biāo)本實(shí)戰(zhàn)將對(duì)秋天音樂H5頁面進(jìn)行鑒賞，分析該頁面中的色彩、文字、版式布局技巧，并對(duì)其展現(xiàn)方式進(jìn)行闡述。3.3實(shí)戰(zhàn)案例——對(duì)H5頁面進(jìn)行鑒賞實(shí)戰(zhàn)思路觀察該H5頁面，可發(fā)現(xiàn)整個(gè)頁面均由幾何形的面組合而成，其畫面結(jié)構(gòu)統(tǒng)一、美觀。在色彩的選擇上，整個(gè)頁面多使用高飽和度的橙色和黃色，這些顏色是秋天的代表色，既具有柔和感又具有視覺沖擊力。在版式布局上，整個(gè)頁面采用骨骼式布局的方式，將內(nèi)容分為不同的模塊，以展示歌曲信息。其整體結(jié)構(gòu)簡(jiǎn)潔且方便觀看。在文字的選擇上，整個(gè)頁面主要選用黑體為主要字體，頁面的整體效果簡(jiǎn)明、美觀，更能引起用戶的瀏覽興趣。目錄/Contents3.13.23.33.4認(rèn)識(shí)