電子商務(wù)概論(第2版)-教學(xué)課件-作者-杭俊-編-03-第三章-電子商務(wù)中的視覺設(shè)計(jì)技術(shù)

CompanyLOGO第三章電子商務(wù)中的視覺設(shè)計(jì)技術(shù)經(jīng)濟(jì)管理學(xué)院杭俊

第二篇技術(shù)篇ElectronicCommerceCompanyLOGO第三章電子商務(wù)中的視覺設(shè)計(jì)技術(shù)經(jīng)濟(jì)管1Contents第一節(jié)Web網(wǎng)頁設(shè)計(jì)技術(shù)基礎(chǔ)第二節(jié)電子商務(wù)視覺設(shè)計(jì)基礎(chǔ)第三節(jié)商品圖片的拍攝與處理ElectronicCommerceElectronicCommerce第四節(jié)視覺設(shè)計(jì)中的圖片處理Contents第一2本章學(xué)習(xí)目標(biāo)1了解Web頁面的表現(xiàn)技術(shù)。2理解電子商務(wù)視覺設(shè)計(jì)基礎(chǔ)。3熟知商品圖片的拍攝與處理。ElectronicCommerceElectronicCommerce本章學(xué)習(xí)目標(biāo)1了解W3本節(jié)主題主題一：Web技術(shù)發(fā)展簡(jiǎn)史第一節(jié)Web網(wǎng)頁設(shè)計(jì)技術(shù)基礎(chǔ)主題二：

Web技術(shù)概述ElectronicCommerceElectronicCommerce本節(jié)主題主題一：W4主題一：Web網(wǎng)頁設(shè)計(jì)技術(shù)基礎(chǔ)ElectronicCommerceElectronicCommerce一、Web技術(shù)發(fā)展簡(jiǎn)史Web技術(shù)的發(fā)展經(jīng)歷了三個(gè)階段：“靜態(tài)網(wǎng)頁”時(shí)代、“動(dòng)態(tài)網(wǎng)頁”時(shí)代和Web2.0時(shí)代。1．“靜態(tài)網(wǎng)頁”時(shí)代在“靜態(tài)網(wǎng)頁”時(shí)代，通過客戶機(jī)端的Web瀏覽器，用戶可以訪問網(wǎng)絡(luò)上各個(gè)Web站點(diǎn)，通過Web站點(diǎn)上的主頁訪問整個(gè)網(wǎng)站。2．“動(dòng)態(tài)網(wǎng)頁”時(shí)代為了克服靜態(tài)網(wǎng)頁的不足，人們將傳統(tǒng)單機(jī)環(huán)境下的編程技術(shù)引入互聯(lián)網(wǎng)絡(luò)，并與Web技術(shù)相結(jié)合，從而形成新的網(wǎng)絡(luò)編程技術(shù)。3．Web2.0時(shí)代簡(jiǎn)單地說，Web2.0不是一個(gè)具體的事物，而是一個(gè)階段，是促成這個(gè)階段的各種技術(shù)和相關(guān)的產(chǎn)品服務(wù)的一個(gè)稱呼。主題一：Web網(wǎng)頁設(shè)5主題二：Web技術(shù)概述1．Web技術(shù)的分工（1）使用HTML與XHTML搭建網(wǎng)站的結(jié)構(gòu)網(wǎng)站內(nèi)容間的關(guān)聯(lián)通過HTML與XHTML組織起來的，相比較而言，XHTML更加嚴(yán)謹(jǐn)。（2）使用CSS美化與布局網(wǎng)站（3）使用腳本語言實(shí)現(xiàn)動(dòng)態(tài)與交互效果（4）使用數(shù)據(jù)庫軟件實(shí)現(xiàn)數(shù)據(jù)存儲(chǔ)ElectronicCommerce主題二：Web技術(shù)概述1．Web技術(shù)的分工www.them6主題二：Web技術(shù)概述2．Web設(shè)計(jì)中常用的軟件（1）Notepad++是一款由國內(nèi)技術(shù)人員編寫的開源的、小巧的、功能強(qiáng)大的文字處理軟件，此軟件可以稱為Windows記事本的完美替代方案，而且很多功能可以自己定制。（2）EditPlus是一款由韓國人編寫的小巧但功能強(qiáng)大的文字處理軟件，其所提供的功能和穩(wěn)定性遠(yuǎn)遠(yuǎn)強(qiáng)于Windows提供的記事本，而且很多功能可以自己定制。（3）Dreamweaver是Adobe公司出品的一款建立Web站點(diǎn)和應(yīng)用程序的專業(yè)工具。它將可視布局工具、應(yīng)用程序開發(fā)功能和代碼編輯支持組合在一起，其功能強(qiáng)大，使得各個(gè)層次的開發(fā)人員和設(shè)計(jì)人員都能夠快速創(chuàng)建界面吸引人的基于標(biāo)準(zhǔn)的網(wǎng)站和應(yīng)用程序。（4）PhotoShop是Adobe公司出品的一款對(duì)數(shù)字圖形編輯和創(chuàng)作的軟件。Photoshop同時(shí)攜帶了一款可以制作GIF圖片和對(duì)網(wǎng)頁進(jìn)行切圖的軟件ImageReady。ElectronicCommerce主題二：Web技術(shù)概述2．Web設(shè)計(jì)中常用的軟件www.t7主題二：Web技術(shù)概述1.動(dòng)態(tài)網(wǎng)頁技術(shù)（1）網(wǎng)頁的動(dòng)態(tài)表現(xiàn)技術(shù)GIF動(dòng)畫圖片的出現(xiàn)是動(dòng)態(tài)網(wǎng)頁的雛形，雖然豐富了網(wǎng)頁的表現(xiàn)形式，但終究只是一張活動(dòng)的圖，滿足不了人們的交互需求。1）Shockwave是一種用于動(dòng)畫和交互式展示的圖形格式，由名為Director的程序所創(chuàng)建。2）Java語言的應(yīng)用Java的應(yīng)用有兩種：Java應(yīng)用程序與Java小程序（JavaApplet）。3）腳本語言的使用腳本是用來運(yùn)行在客戶端，實(shí)現(xiàn)Web瀏覽器的時(shí)間驅(qū)動(dòng)功能的。

（2）網(wǎng)頁的動(dòng)態(tài)內(nèi)容技術(shù)表現(xiàn)永遠(yuǎn)是手段，而內(nèi)容才是本質(zhì)。實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁的根本還是在內(nèi)容上實(shí)現(xiàn)動(dòng)態(tài)訪問。ElectronicCommerce主題二：Web技術(shù)概述1.動(dòng)態(tài)網(wǎng)頁技術(shù)www.them8本節(jié)主題主題一：色彩第二節(jié)電子商務(wù)視覺設(shè)計(jì)基礎(chǔ)主題二：文字ElectronicCommerceElectronicCommerce本節(jié)主題主題一：色彩9主題一：色彩1．關(guān)于色彩（1）色彩在電子商務(wù)的視覺設(shè)計(jì)中，人們對(duì)色彩的喜好偏差往往對(duì)他們的消費(fèi)體驗(yàn)起著非常關(guān)鍵的作用。（2）色相環(huán)色相環(huán)的作用是告訴我們顏色之間的相互關(guān)聯(lián)。2．色彩與情感紅色血?dú)狻崆?、主?dòng)、節(jié)慶、憤怒橙色歡樂、信任、活力、新鮮黃色溫暖、快樂、希望、智慧綠色健康、生命、和平、寧靜藍(lán)色可靠、力量、冷靜、清爽、專業(yè)紫色神秘、高尚、優(yōu)雅黑色深沉、黑暗白色樸素、純潔、清爽、干凈灰色冷靜、中立ElectronicCommerce主題一：色彩1．關(guān)于色彩www.themegallery.c10主題一：色彩1．色彩在設(shè)計(jì)中的作用色彩能幫助我們快速地建立用戶認(rèn)知，這里我們以基本的三原色為例，介紹色彩在設(shè)計(jì)中的運(yùn)用。2．色彩情感在視覺設(shè)計(jì)中的運(yùn)用（1）引導(dǎo)——

理解瀏覽者對(duì)色彩的喜好偏差（2）決策——運(yùn)用色彩實(shí)現(xiàn)“七秒定律”（3）轉(zhuǎn)化——以色彩實(shí)現(xiàn)訂單的高“轉(zhuǎn)換率”綜上所述，我們?cè)谶M(jìn)行網(wǎng)頁色彩設(shè)計(jì)時(shí)，不能單純憑借自己的喜好去配色，還需要考慮網(wǎng)站所營銷的產(chǎn)品和服務(wù)的定位以及標(biāo)準(zhǔn)色和整體的色調(diào)。這樣即便不能滿足所有瀏覽者的需要，但是可以顧及大多數(shù)用戶。需要大家理解的是，具體的色彩風(fēng)格需要設(shè)計(jì)者認(rèn)真地了解設(shè)計(jì)需求，從瀏覽者的角度去感覺，色彩的設(shè)計(jì)與運(yùn)用不是限定的，是可以靈活調(diào)整不斷優(yōu)化的。ElectronicCommerce主題一：色彩1．色彩在設(shè)計(jì)中的作用www.themegall11主題二：文字1．文字設(shè)計(jì)的元素我們從字體、字號(hào)、行長、間距和背景五個(gè)元素來討論文字在設(shè)計(jì)中追求的效果和效果的實(shí)現(xiàn)。2．文字的層級(jí)關(guān)系文字的層級(jí)經(jīng)常在網(wǎng)頁設(shè)計(jì)中被忽視。其實(shí)文字層級(jí)在溝通中扮演著重要角色，它可以將用戶引向期望中的結(jié)果的同時(shí)改善用戶的體驗(yàn)。3.網(wǎng)頁設(shè)計(jì)中的創(chuàng)意1．大自然8．食物2．音樂9．老物件3．藝術(shù)10．建筑4．包裝5．?dāng)z影6．時(shí)尚7．室內(nèi)設(shè)計(jì)ElectronicCommerce主題二：文字1．文字設(shè)計(jì)的元素www.themegaller12主題二：文字1.留白與富媒體在網(wǎng)頁視覺設(shè)計(jì)中的運(yùn)用1．留白留白和負(fù)空間的術(shù)語近年來被交替使用，它們指畫布（或數(shù)碼設(shè)備屏幕）上不包含任何內(nèi)容的空間。藝術(shù)角度上說，留白就是以“空白”為載體進(jìn)而渲染出美的意境的藝術(shù)；應(yīng)用角度上說，留白更多指一種簡(jiǎn)單、安閑的理念。2．富媒體近年來在網(wǎng)頁瀏覽時(shí)，你一定會(huì)發(fā)現(xiàn)包含視頻等多媒體元素，扔掉文字內(nèi)容的網(wǎng)站越來越多。什么是富媒體（RichMedia）？富媒體以多媒體形式來展現(xiàn)信息，包含二維動(dòng)畫、三維動(dòng)畫、影像和聲音等。ElectronicCommerce主題二：文字1.留白與富媒體在網(wǎng)頁視覺設(shè)計(jì)中的運(yùn)用www.13第三節(jié)商品圖片的拍攝與處理

一、商品拍攝簡(jiǎn)述商品拍攝的目的在于對(duì)商品進(jìn)行有機(jī)的組織，利用合理的構(gòu)圖和恰當(dāng)?shù)挠霉猓瑢⑸唐繁憩F(xiàn)得栩栩如生，給瀏覽者以真實(shí)的感受。二、商品拍攝器材1．照相機(jī)商品的拍攝需要一款適合靜物拍攝的照相機(jī)，這類照相機(jī)都會(huì)具有微距的功能。2．三腳架三腳架是我們進(jìn)行商品拍攝的主要附件，目的在于避免相機(jī)的晃動(dòng)，保證影像的清晰度。3．燈光燈光是室內(nèi)拍攝的主要工具，通常在室內(nèi)拍攝時(shí)我們會(huì)使用三個(gè)30W以上的三基色白光節(jié)能燈，價(jià)格相對(duì)適中，色溫也好，很適合室內(nèi)拍攝。4．商品拍攝臺(tái)我們?cè)谶M(jìn)行商品拍攝時(shí)是需要一些平面支撐的。一般光滑平整的桌面都可以作為拍攝臺(tái)來使用。ElectronicCommerce第三節(jié)商品圖片的拍攝與處理

一、商品拍攝簡(jiǎn)述www.th14第三節(jié)商品圖片的拍攝與處理三、光線的使用商品拍攝多數(shù)是在拍攝臺(tái)上實(shí)現(xiàn)的，在拍攝中燈光使用較多，自然光使用較少，在燈光處理方面比較復(fù)雜。1．室內(nèi)自然光室內(nèi)自然光是由戶外自然光通過門窗等射入室內(nèi)的光線，方向明顯，極易造成物體受光部分和陰暗部分的明暗對(duì)比。2．人工光源主要是指各種燈具發(fā)出的光。（1）側(cè)光，可以很好地顯示拍攝對(duì)象的形態(tài)和立體感。（2）側(cè)逆光，能夠強(qiáng)化商品的質(zhì)感表現(xiàn)。（3）角度較低的逆光，能夠表現(xiàn)出商品的透明感。（4）角度較高的逆光，常用于拍攝商品的輪廓形態(tài)。ElectronicCommerce第三節(jié)商品圖片的拍攝與處理三、光線的使用www.them15第三節(jié)商品圖片的拍攝與處理四、商品的構(gòu)圖商品在被拍攝時(shí)的構(gòu)圖大多是通過拍攝者的主觀意圖擺設(shè)出來的，所以對(duì)于構(gòu)圖的要求更加嚴(yán)謹(jǐn)，對(duì)于畫面中各種關(guān)系的處理也要求更加合理。（1）△型（三角形）構(gòu)圖△型構(gòu)圖即三角形構(gòu)圖，是靜物拍攝最常用的一種方式。它所表現(xiàn)的靜物畫面具有穩(wěn)定性和莊嚴(yán)的感覺。（2）▽型（倒三角形）構(gòu)圖與三角形構(gòu)圖相反，倒三角形構(gòu)圖極富動(dòng)感，追求在不穩(wěn)定的情緒中體現(xiàn)感覺上的變化。（3）S型構(gòu)圖S型構(gòu)圖，優(yōu)美而富于變化，在商品拍攝中比較少用。S型構(gòu)圖通常借助線條的表現(xiàn)力來烘托商品的美感。（4）對(duì)角線構(gòu)圖在對(duì)角線構(gòu)圖形式中，主體會(huì)有所傾斜，加強(qiáng)了畫面的沖擊力度，給人以強(qiáng)烈的動(dòng)感。ElectronicCommerce第三節(jié)商品圖片的拍攝與處理四、商品的構(gòu)圖www.them16第三節(jié)商品圖片的拍攝與處理五、背景的選擇與處理在商品拍攝中，背景可以表現(xiàn)主體所處的環(huán)境，對(duì)表現(xiàn)整個(gè)畫面的色調(diào)、氣氛和空間感有著至關(guān)重要的作用。背景布置的技巧：（1）背景色彩要單一，布置要整潔。（2）背景顏色要能突出產(chǎn)品，不要使用和產(chǎn)品同色或相近色的背景色。（3）商品放置于整潔的水平面上后，在其后方垂直面上鋪放白紙可襯托出簡(jiǎn)潔的效果。（4）針對(duì)反光類的商品，拍攝時(shí)可以使用背景紙將其圍起來拍攝。ElectronicCommerce第三節(jié)商品圖片的拍攝與處理五、背景的選擇與處理www.t17本節(jié)主題主題一：圖片大小的處理第三節(jié)視覺設(shè)計(jì)中的圖片處理主題二：對(duì)于圖片細(xì)節(jié)的處理ElectronicCommerceElectronicCommerce本節(jié)主題主題一：圖片181.圖片大小的處理（1）使用Photoshop軟件打開需要處理的圖片。（2）選擇Photoshop軟件菜單中的“圖像——

圖像大小”，進(jìn)行大小調(diào)整，如圖3-3所示。（3）選擇Photoshop軟件菜單中的“文件——存儲(chǔ)為Web所用格式”，將文件存為120K大小。2.對(duì)于圖片細(xì)節(jié)的處理1．摳圖Photoshop軟件中針對(duì)摳圖的工具主要有三種：魔棒工具、多邊形套索工具和鋼筆工具。2．水印圖片在使用時(shí)經(jīng)常需要添加水印，常見的水印分文字水印和圖案水印兩種。ElectronicCommerce1.圖片大小的處理19水印制作步驟（1）新建一個(gè)新的圖層，長度和寬度都為8厘米，分辨率是默認(rèn)的72像素/英寸，背景默認(rèn)透明。（2）選擇工具欄中的“橫排文字工具”，在新建圖層上寫上水印文字。（3）在右下方工具欄中的“添加圖層樣式”按鈕中找到“描邊”。（4）在填充中通過修改數(shù)值將字體調(diào)成空心。如果你需要調(diào)整描邊顏色的深淺，可以在圖層里面選不透明度，一般改成55%即可。（5）在“選擇”菜單中單擊“全選”選中整個(gè)圖層，再單擊“編輯——定義圖案”給水印起一個(gè)名字，比如“水印”。（6）打開需要添加水印的圖案，填充該水印即可。3．圖片文字去除與圖像嫁接使用Photoshop軟件可以很容易地去掉原有圖片中的文字或者將新的圖像元素嫁接到自己的圖片中。這兩者都可以采用Photoshop軟件中的仿制圖章工具來完成。ElectronicCommerce水印制作步驟Elec20圖文解說ElectronicCommerce圖文解說Electr21【本章習(xí)題】

一、選擇題1．Web技術(shù)的發(fā)展并未經(jīng)歷的階段是（）A．靜態(tài)網(wǎng)頁時(shí)代

B．動(dòng)態(tài)網(wǎng)頁時(shí)代C．Web1.0時(shí)代

D．Web2.0時(shí)代2．色相環(huán)由（）種顏色組成A．5

B．8

C．12

D．103．以下哪一種顏色不屬于色彩的三原色（）A．綠

B．黃

C．藍(lán)

D．紅4．以下哪一種拍攝器材會(huì)涉及色溫的問題（）A．照相機(jī)

B．燈光

C．背景材料

D．三腳架二、問答題1．簡(jiǎn)述Web1.0與Web2.0的區(qū)別和什么是社交網(wǎng)絡(luò)。2．簡(jiǎn)述色相環(huán)的構(gòu)成和作用。3．說說自己對(duì)色彩和情感的理解。4．談?wù)勅绾螀^(qū)分襯線體與非襯線體。ElectronicCommerce【本章習(xí)題】

一、選擇題www.themegallery.c22課外修煉素材CNN：PS聯(lián)盟：三視覺平面設(shè)計(jì)在線：123ElectronicCommerceElectronicCommerce課外修煉素材CNN：23微語錄丹·卡登我對(duì)于時(shí)尚的理解是讓人們以更加自我的方式去追尋生活的真諦。我們的靈感來源于那些通常來講并不流行的東西。ElectronicCommerceElectronicCommerce克里斯汀·拉克魯瓦微語錄丹·卡登我對(duì)于24課后思考

如何進(jìn)行Banner的構(gòu)成與創(chuàng)意設(shè)計(jì)?ElectronicCommerceElectronicCommerce課后思考25CompanyLOGOThankYou!ElectronicCommerce經(jīng)濟(jì)管理學(xué)院杭俊CompanyLOGOThankYou!Electro26CompanyLOGO第三章電子商務(wù)中的視覺設(shè)計(jì)技術(shù)經(jīng)濟(jì)管理學(xué)院杭俊

第二篇技術(shù)篇ElectronicCommerceCompanyLOGO第三章電子商務(wù)中的視覺設(shè)計(jì)技術(shù)經(jīng)濟(jì)管27Contents第一節(jié)Web網(wǎng)頁設(shè)計(jì)技術(shù)基礎(chǔ)第二節(jié)電子商務(wù)視覺設(shè)計(jì)基礎(chǔ)第三節(jié)商品圖片的拍攝與處理ElectronicCommerceElectronicCommerce第四節(jié)視覺設(shè)計(jì)中的圖片處理Contents第一28本章學(xué)習(xí)目標(biāo)1了解Web頁面的表現(xiàn)技術(shù)。2理解電子商務(wù)視覺設(shè)計(jì)基礎(chǔ)。3熟知商品圖片的拍攝與處理。ElectronicCommerceElectronicCommerce本章學(xué)習(xí)目標(biāo)1了解W29本節(jié)主題主題一：Web技術(shù)發(fā)展簡(jiǎn)史第一節(jié)Web網(wǎng)頁設(shè)計(jì)技術(shù)基礎(chǔ)主題二：

Web技術(shù)概述ElectronicCommerceElectronicCommerce本節(jié)主題主題一：W30主題一：Web網(wǎng)頁設(shè)計(jì)技術(shù)基礎(chǔ)ElectronicCommerceElectronicCommerce一、Web技術(shù)發(fā)展簡(jiǎn)史Web技術(shù)的發(fā)展經(jīng)歷了三個(gè)階段：“靜態(tài)網(wǎng)頁”時(shí)代、“動(dòng)態(tài)網(wǎng)頁”時(shí)代和Web2.0時(shí)代。1．“靜態(tài)網(wǎng)頁”時(shí)代在“靜態(tài)網(wǎng)頁”時(shí)代，通過客戶機(jī)端的Web瀏覽器，用戶可以訪問網(wǎng)絡(luò)上各個(gè)Web站點(diǎn)，通過Web站點(diǎn)上的主頁訪問整個(gè)網(wǎng)站。2．“動(dòng)態(tài)網(wǎng)頁”時(shí)代為了克服靜態(tài)網(wǎng)頁的不足，人們將傳統(tǒng)單機(jī)環(huán)境下的編程技術(shù)引入互聯(lián)網(wǎng)絡(luò)，并與Web技術(shù)相結(jié)合，從而形成新的網(wǎng)絡(luò)編程技術(shù)。3．Web2.0時(shí)代簡(jiǎn)單地說，Web2.0不是一個(gè)具體的事物，而是一個(gè)階段，是促成這個(gè)階段的各種技術(shù)和相關(guān)的產(chǎn)品服務(wù)的一個(gè)稱呼。主題一：Web網(wǎng)頁設(shè)31主題二：Web技術(shù)概述1．Web技術(shù)的分工（1）使用HTML與XHTML搭建網(wǎng)站的結(jié)構(gòu)網(wǎng)站內(nèi)容間的關(guān)聯(lián)通過HTML與XHTML組織起來的，相比較而言，XHTML更加嚴(yán)謹(jǐn)。（2）使用CSS美化與布局網(wǎng)站（3）使用腳本語言實(shí)現(xiàn)動(dòng)態(tài)與交互效果（4）使用數(shù)據(jù)庫軟件實(shí)現(xiàn)數(shù)據(jù)存儲(chǔ)ElectronicCommerce主題二：Web技術(shù)概述1．Web技術(shù)的分工www.them32主題二：Web技術(shù)概述2．Web設(shè)計(jì)中常用的軟件（1）Notepad++是一款由國內(nèi)技術(shù)人員編寫的開源的、小巧的、功能強(qiáng)大的文字處理軟件，此軟件可以稱為Windows記事本的完美替代方案，而且很多功能可以自己定制。（2）EditPlus是一款由韓國人編寫的小巧但功能強(qiáng)大的文字處理軟件，其所提供的功能和穩(wěn)定性遠(yuǎn)遠(yuǎn)強(qiáng)于Windows提供的記事本，而且很多功能可以自己定制。（3）Dreamweaver是Adobe公司出品的一款建立Web站點(diǎn)和應(yīng)用程序的專業(yè)工具。它將可視布局工具、應(yīng)用程序開發(fā)功能和代碼編輯支持組合在一起，其功能強(qiáng)大，使得各個(gè)層次的開發(fā)人員和設(shè)計(jì)人員都能夠快速創(chuàng)建界面吸引人的基于標(biāo)準(zhǔn)的網(wǎng)站和應(yīng)用程序。（4）PhotoShop是Adobe公司出品的一款對(duì)數(shù)字圖形編輯和創(chuàng)作的軟件。Photoshop同時(shí)攜帶了一款可以制作GIF圖片和對(duì)網(wǎng)頁進(jìn)行切圖的軟件ImageReady。ElectronicCommerce主題二：Web技術(shù)概述2．Web設(shè)計(jì)中常用的軟件www.t33主題二：Web技術(shù)概述1.動(dòng)態(tài)網(wǎng)頁技術(shù)（1）網(wǎng)頁的動(dòng)態(tài)表現(xiàn)技術(shù)GIF動(dòng)畫圖片的出現(xiàn)是動(dòng)態(tài)網(wǎng)頁的雛形，雖然豐富了網(wǎng)頁的表現(xiàn)形式，但終究只是一張活動(dòng)的圖，滿足不了人們的交互需求。1）Shockwave是一種用于動(dòng)畫和交互式展示的圖形格式，由名為Director的程序所創(chuàng)建。2）Java語言的應(yīng)用Java的應(yīng)用有兩種：Java應(yīng)用程序與Java小程序（JavaApplet）。3）腳本語言的使用腳本是用來運(yùn)行在客戶端，實(shí)現(xiàn)Web瀏覽器的時(shí)間驅(qū)動(dòng)功能的。

（2）網(wǎng)頁的動(dòng)態(tài)內(nèi)容技術(shù)表現(xiàn)永遠(yuǎn)是手段，而內(nèi)容才是本質(zhì)。實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁的根本還是在內(nèi)容上實(shí)現(xiàn)動(dòng)態(tài)訪問。ElectronicCommerce主題二：Web技術(shù)概述1.動(dòng)態(tài)網(wǎng)頁技術(shù)www.them34本節(jié)主題主題一：色彩第二節(jié)電子商務(wù)視覺設(shè)計(jì)基礎(chǔ)主題二：文字ElectronicCommerceElectronicCommerce本節(jié)主題主題一：色彩35主題一：色彩1．關(guān)于色彩（1）色彩在電子商務(wù)的視覺設(shè)計(jì)中，人們對(duì)色彩的喜好偏差往往對(duì)他們的消費(fèi)體驗(yàn)起著非常關(guān)鍵的作用。（2）色相環(huán)色相環(huán)的作用是告訴我們顏色之間的相互關(guān)聯(lián)。2．色彩與情感紅色血?dú)?、熱情、主?dòng)、節(jié)慶、憤怒橙色歡樂、信任、活力、新鮮黃色溫暖、快樂、希望、智慧綠色健康、生命、和平、寧靜藍(lán)色可靠、力量、冷靜、清爽、專業(yè)紫色神秘、高尚、優(yōu)雅黑色深沉、黑暗白色樸素、純潔、清爽、干凈灰色冷靜、中立ElectronicCommerce主題一：色彩1．關(guān)于色彩www.themegallery.c36主題一：色彩1．色彩在設(shè)計(jì)中的作用色彩能幫助我們快速地建立用戶認(rèn)知，這里我們以基本的三原色為例，介紹色彩在設(shè)計(jì)中的運(yùn)用。2．色彩情感在視覺設(shè)計(jì)中的運(yùn)用（1）引導(dǎo)——

理解瀏覽者對(duì)色彩的喜好偏差（2）決策——運(yùn)用色彩實(shí)現(xiàn)“七秒定律”（3）轉(zhuǎn)化——以色彩實(shí)現(xiàn)訂單的高“轉(zhuǎn)換率”綜上所述，我們?cè)谶M(jìn)行網(wǎng)頁色彩設(shè)計(jì)時(shí)，不能單純憑借自己的喜好去配色，還需要考慮網(wǎng)站所營銷的產(chǎn)品和服務(wù)的定位以及標(biāo)準(zhǔn)色和整體的色調(diào)。這樣即便不能滿足所有瀏覽者的需要，但是可以顧及大多數(shù)用戶。需要大家理解的是，具體的色彩風(fēng)格需要設(shè)計(jì)者認(rèn)真地了解設(shè)計(jì)需求，從瀏覽者的角度去感覺，色彩的設(shè)計(jì)與運(yùn)用不是限定的，是可以靈活調(diào)整不斷優(yōu)化的。ElectronicCommerce主題一：色彩1．色彩在設(shè)計(jì)中的作用www.themegall37主題二：文字1．文字設(shè)計(jì)的元素我們從字體、字號(hào)、行長、間距和背景五個(gè)元素來討論文字在設(shè)計(jì)中追求的效果和效果的實(shí)現(xiàn)。2．文字的層級(jí)關(guān)系文字的層級(jí)經(jīng)常在網(wǎng)頁設(shè)計(jì)中被忽視。其實(shí)文字層級(jí)在溝通中扮演著重要角色，它可以將用戶引向期望中的結(jié)果的同時(shí)改善用戶的體驗(yàn)。3.網(wǎng)頁設(shè)計(jì)中的創(chuàng)意1．大自然8．食物2．音樂9．老物件3．藝術(shù)10．建筑4．包裝5．?dāng)z影6．時(shí)尚7．室內(nèi)設(shè)計(jì)ElectronicCommerce主題二：文字1．文字設(shè)計(jì)的元素www.themegaller38主題二：文字1.留白與富媒體在網(wǎng)頁視覺設(shè)計(jì)中的運(yùn)用1．留白留白和負(fù)空間的術(shù)語近年來被交替使用，它們指畫布（或數(shù)碼設(shè)備屏幕）上不包含任何內(nèi)容的空間。藝術(shù)角度上說，留白就是以“空白”為載體進(jìn)而渲染出美的意境的藝術(shù)；應(yīng)用角度上說，留白更多指一種簡(jiǎn)單、安閑的理念。2．富媒體近年來在網(wǎng)頁瀏覽時(shí)，你一定會(huì)發(fā)現(xiàn)包含視頻等多媒體元素，扔掉文字內(nèi)容的網(wǎng)站越來越多。什么是富媒體（RichMedia）？富媒體以多媒體形式來展現(xiàn)信息，包含二維動(dòng)畫、三維動(dòng)畫、影像和聲音等。ElectronicCommerce主題二：文字1.留白與富媒體在網(wǎng)頁視覺設(shè)計(jì)中的運(yùn)用www.39第三節(jié)商品圖片的拍攝與處理

一、商品拍攝簡(jiǎn)述商品拍攝的目的在于對(duì)商品進(jìn)行有機(jī)的組織，利用合理的構(gòu)圖和恰當(dāng)?shù)挠霉?，將商品表現(xiàn)得栩栩如生，給瀏覽者以真實(shí)的感受。二、商品拍攝器材1．照相機(jī)商品的拍攝需要一款適合靜物拍攝的照相機(jī)，這類照相機(jī)都會(huì)具有微距的功能。2．三腳架三腳架是我們進(jìn)行商品拍攝的主要附件，目的在于避免相機(jī)的晃動(dòng)，保證影像的清晰度。3．燈光燈光是室內(nèi)拍攝的主要工具，通常在室內(nèi)拍攝時(shí)我們會(huì)使用三個(gè)30W以上的三基色白光節(jié)能燈，價(jià)格相對(duì)適中，色溫也好，很適合室內(nèi)拍攝。4．商品拍攝臺(tái)我們?cè)谶M(jìn)行商品拍攝時(shí)是需要一些平面支撐的。一般光滑平整的桌面都可以作為拍攝臺(tái)來使用。ElectronicCommerce第三節(jié)商品圖片的拍攝與處理

一、商品拍攝簡(jiǎn)述www.th40第三節(jié)商品圖片的拍攝與處理三、光線的使用商品拍攝多數(shù)是在拍攝臺(tái)上實(shí)現(xiàn)的，在拍攝中燈光使用較多，自然光使用較少，在燈光處理方面比較復(fù)雜。1．室內(nèi)自然光室內(nèi)自然光是由戶外自然光通過門窗等射入室內(nèi)的光線，方向明顯，極易造成物體受光部分和陰暗部分的明暗對(duì)比。2．人工光源主要是指各種燈具發(fā)出的光。（1）側(cè)光，可以很好地顯示拍攝對(duì)象的形態(tài)和立體感。（2）側(cè)逆光，能夠強(qiáng)化商品的質(zhì)感表現(xiàn)。（3）角度較低的逆光，能夠表現(xiàn)出商品的透明感。（4）角度較高的逆光，常用于拍攝商品的輪廓形態(tài)。ElectronicCommerce第三節(jié)商品圖片的拍攝與處理三、光線的使用www.them41第三節(jié)商品圖片的拍攝與處理四、商品的構(gòu)圖商品在被拍攝時(shí)的構(gòu)圖大多是通過拍攝者的主觀意圖擺設(shè)出來的，所以對(duì)于構(gòu)圖的要求更加嚴(yán)謹(jǐn)，對(duì)于畫面中各種關(guān)系的處理也要求更加合理。（1）△型（三角形）構(gòu)圖△型構(gòu)圖即三角形構(gòu)圖，是靜物拍攝最常用的一種方式。它所表現(xiàn)的靜物畫面具有穩(wěn)定性和莊嚴(yán)的感覺。（2）▽型（倒三角形）構(gòu)圖與三角形構(gòu)圖相反，倒三角形構(gòu)圖極富動(dòng)感，追求在不穩(wěn)定的情緒中體現(xiàn)感覺上的變化。（3）S型構(gòu)圖S型構(gòu)圖，優(yōu)美而富于變化，在商品拍攝中比較少用。S型構(gòu)圖通常借助線條的表現(xiàn)力來烘托商品的美感。（4）對(duì)角線構(gòu)圖在對(duì)角線構(gòu)圖形式中，主體會(huì)有所傾斜，加強(qiáng)了畫面的沖擊力度，給人以強(qiáng)烈的動(dòng)感。ElectronicCommerce第三節(jié)商品圖片的拍攝與處理四、商品的構(gòu)圖www.them42第三節(jié)商品圖片的拍攝與處理五、背景的選擇與處理在商品拍攝中，背景可以表現(xiàn)主體所處的環(huán)境，對(duì)表現(xiàn)整個(gè)畫面的色調(diào)、氣氛和空間感有著至關(guān)重要的作用。背景布置的技巧：（1）背景色彩要單一，布置要整潔。（2）背景顏色要能突出產(chǎn)品，不要使用和產(chǎn)品同色或相近色的背景色。（3）商品放置于整潔的水平面上后，在其后方垂直面上鋪放白紙可襯托出簡(jiǎn)潔的效果。（4）針對(duì)反光類的商品，拍攝時(shí)可以使用背景紙將其圍起來拍攝。ElectronicCommerce第三節(jié)商品圖片的拍攝與處理五、背景的選擇與處理www.t43本節(jié)主題主題一：圖片大小的處理第三節(jié)視覺設(shè)計(jì)中的圖片處理主題二：對(duì)于圖片細(xì)節(jié)的處理ElectronicCommerceElectronicCommerce本節(jié)主題主題一：圖片441.圖片大小的處理（1）使用Photoshop軟件打開需要處理的圖片。（2）選擇Photoshop軟件菜單中的“圖像——

圖像大小”，進(jìn)行大小調(diào)整，如圖3-3所示。（3）選擇Photoshop軟件菜單中的“文件——存儲(chǔ)為Web所用格式”，將文件存為120K大小。2.對(duì)于圖片細(xì)節(jié)的處理1．摳圖Photoshop軟件中針對(duì)摳圖的工具主要有三種：魔棒工具、多邊形套索工具和鋼筆工具。2．水印圖片在使用時(shí)經(jīng)常需要添加水印，常見的水印分文字水印和圖案水印兩種。ElectronicCommerce1.圖片大小的處理45水印制作步驟（1）新建一個(gè)新的圖層，長度和寬度都為8厘米，