1、電子商務網頁圖像制作（Adobe Photoshop CS6）（第二版）國家級職業教育規劃教材第 1 章 認識電子商務網頁圖像制作第 2 章 熟悉 Photoshop CS6 界面環境第 3 章 圖像的簡單處理第 4 章 文字的簡單處理第 5 章 圖像處理技法摳圖目 錄第 6 章 圖像處理技法修圖第 7 章 圖像處理技法調色第 8 章 圖像處理技法合成第 9 章 圖像處理技法特效第 10 章 電子商務網頁圖像制作綜合實訓目 錄第 1 章 認識電子商務網頁圖像制作第 1 節 數字圖像的基本概念第 2 節 顏色的基本常識第 3 節 平面構圖的基本常識第 1 節 數字圖像的基本概念 電子商務網頁圖像

2、是一種數字圖像。對于數字圖像，需要了解其主要類型、像素、分辨率的含義和作用，以及常見的數字圖像文件格式。這樣在制作電子商務網頁圖像，進行圖像文件創建、編輯制作、保存和選擇時，就能更加合理和有效。一、數字圖像的主要類型 數字圖像是由模擬圖像數字化得到的，用計算機或數字電路存儲和處理的圖像。計算機一般采用點陣圖和矢量圖兩種方式存儲或處理圖像。1. 點陣圖（Bitmap） 點陣圖即位圖存儲模式，是通過許多像素點表示一幅圖像，每個像素具有顏色屬性和位置屬性。2. 矢量圖（Vector） 矢量圖即矢量存儲模式，是根據幾何特性用直線和曲線來描述圖形，即圖像由線條和填充顏色的塊面構成，而不是圖像數據的每一點

3、。點陣圖樣例矢量圖樣例 如果將點陣圖與矢量圖進行比較，就會發現： （1）點陣圖由一個一個的像素點組成，即在一定面積的圖像上包含有固定數量的像素。因此，如果在屏幕上以較大的倍數放大顯示圖像或以過低的分辨率打印時，位圖圖像會出現鋸齒邊緣。而矢量圖是根據幾何特性來繪制圖形，用線段和曲線描述圖像，與單位面積上的圖像點數無關，可以將它縮放到任意大小顯示和打印，都不會影響其清晰度。點陣圖與矢量圖放大效果對比 （2）點陣圖表現的色彩比較豐富，可逼真地表現自然界的各類實物；而矢量圖色彩不夠豐富，無法表現逼真的實物。 （3）由于點陣圖表現的色彩比較豐富，因此占用的空間會很大。由于矢量圖表現的圖像顏色比較單一，因

4、此所占用的空間相對較小。 （4）通過軟件，可以將矢量圖輕松地轉化為點陣圖，而將點陣圖轉化為矢量圖就需要經過復雜而龐大的數據處理，且生成的矢量圖質量絕對不能和原來的圖形比擬。點陣圖與矢量圖色彩效果對比二、數字圖像的像素和分辨率1. 圖像像素（Pixel） 位圖圖像最基本的單位是像素，它是一個小的方形顏色塊，一個圖像通常由許多像素組成，這些像素被排列成橫行和縱列。當把圖像放大足夠的倍數時，就會發現圖像畫面其實是由許多色彩相近的小方點所組成，這些小方點就是構成圖像的最小單位“像素”（Pixel）。2. 圖像分辨率 圖像分辨率是指圖像單位長度內像素的個數，常用單位為像素 / 英寸（Pixels Per

5、 Inch，縮寫為 ppi），就是指每 1 英寸（1 英寸 =2.54 厘米）的單位長度里一共有多少個像素點，它是衡量圖像細節表現力的一個重要技術參數。 在圖片創建期間，必須根據圖像最終的用途決定正確的分辨率。一般情況下，電子商務網頁的圖像主要用于屏幕顯示，方便網絡傳輸，其圖像分辨率一般設置為 72dpi（每英寸的像素）；而用于出版印刷的圖像制作時，其圖像分辨率一般設置為 300dpi。圖像分辨率為 10 像素 / 英寸，占 3.15KB 圖像分辨率為 72 像素 / 英寸，占 101KB圖像分辨率為 300 像素 / 英寸，占 499KB三、數字圖像的文件格式1. BMP 格式 BMP（位圖

6、格式）是最普遍的點陣圖格式之一，也是 Window 系統下的標準格式，是將 Window 下顯示的點陣圖以無損形式保存的文件，其優點是不會降低圖片的質量，但文件占用的存儲空間比較大。2. GIF 格式 GIF（圖像交換格式）是一種壓縮格式，適合用于線條圖的剪貼畫以及使用大塊純色的圖片。該格式使用無損壓縮來減少圖片的大小，當用戶要保存圖片為 GIF 格式時，可以自行決定是否保存透明區域或者轉換為純色。同時，通過多幅圖片的轉換，GIF 格式還可以保存為動畫文件。但要注意的是，GIF 圖像最多只能支持 256 色。3. JPEG 格式 JPEG（聯合圖片專家組圖像格式）是壓縮率較高的格式，大多數彩色

7、和灰度圖像都使用 JPEG 格式。JPEG 格式圖像壓縮比很大，而且支持多種壓縮級別，當對圖像的精度要求不高而存儲空間又有限時，JPEG 是一種理想的壓縮方式。在 HTML 文檔中，JPEG 廣泛用于顯示圖片和其他連續色調的圖像文檔。4. PNG 格式 PNG 是一種較新的網絡圖像格式。PNG 汲取了 GIF 和 JPEG 二者的優點，其第一個特點是采用無損壓縮方式來減少文件的大小，保證圖像不失真，這一點與犧牲圖像品質以換取高壓縮率的 JPEG 有所不同；它的第二個特點是顯示速度很快，只需下載 1/64 的圖像信息就可以顯示出低分辨率的預覽圖像；其第三個特點是同樣支持透明圖像的制作，透明圖像在

8、制作網頁圖像時很有用，把圖像背景設為透明，可讓圖像與網頁背景很和諧地融合在一起。5. PSD 格式 PSD 是圖像處理軟件 AdobePhotoshop 的專用格式。PSD 其實是 Photoshop 進行平面設計的一張“草稿圖”，它里面包含有各種圖層、通道、遮罩等多種設計的樣稿，以便于下次打開文件時可以修改上一次的設計。在 Photoshop 所支持的各種圖像格式中，PSD 的存取速度比其他格式快很多，功能也很強大。6. TIFF 格式 TIFF（標記圖像文件格式）用于在應用程序之間和計算機平臺之間交換文件。TIFF是一種靈活的圖像格式，被所有繪畫、圖像編輯和頁面排版應用程序支持，幾乎所有的

9、桌面掃描儀都可以生成 TIFF 圖像，而且 TIFF 格式還可加入作者、版權、備注以及自定義信息，存放多幅圖像。7. WMF 格式 WMF 是 Windows 中常見的一種圖元文件格式，屬于矢量文件格式。它具有文件短小、圖案造型化的特點，整個圖形常由各個獨立的組成部分拼接而成，其圖形相對簡單。8. CDR 格式 CDR 格式是繪圖軟件 CorelDraw 的專用圖形文件格式，而 CorelDraw 是一款平面排版矢量繪圖軟件，它可用于企業 VI 設計、宣傳畫冊設計、書籍裝幀設計等。9. AI 格式 AI 格式是 Adobe 公司發布的，其優點是占用硬盤空間小，打開速度快，方便格式轉換，是矢量軟

10、件 Illustrator 的專用圖形文件格式。10. EPS 格式 EPS 格式是跨平臺的標準格式，擴展名在 PC 平臺上是 .eps，在蘋果機 Macintosh 平臺上是 .epsf，主要用于矢量圖像和光柵圖像的存儲。EPS 格式采用 PostScript 語言進行描述，并且可以保存其他一些類型信息，如多色調曲線、Alpha 通道、分色、剪輯路徑、掛網信息等，因此 EPS 格式常用于印刷或打印輸出。Photoshop 中的多個 EPS 格式選項可以實現印刷、打印的綜合控制，在某些情況下甚至優于 TIFF 格式。第 2 節 顏色的基本常識 對于圖像制作來說，認識色彩是創建完美圖像的重要基礎

11、。電子商務網頁圖像作為計算機處理的數字圖像，其使用的顏色本身沒有什么不同，但它還是有一些特定的記錄和處理色彩的技術。因此，需要理解顏色的基本理論，熟悉數字圖像處理技術中有關顏色、色彩的術語，并對顏色及其特性有進一步了解。一、顏色及其三要素 顏色具有三要素：明度（Brightness）、色相（Hue）、飽和度（Saturation）。1. 明度 B（Brightness） 在無色彩中，顏色明度最高的色為白色，明度最低的色為黑色，中間存在一個從亮到暗的灰色系列。明度在三要素中具有較強的獨立性，它可以不帶任何色相的特征而通過黑白灰的關系單獨呈現出來。 由于明度表示顏色的相對明暗程度，在 Photos

12、hop 等計算機繪圖軟件中，通常用從 0（黑）100%（白）的百分比來度量明度。2. 色相 H（Hue） 色相是指色彩的相貌。如果說明度是色彩的骨骼，色相就很像色彩外表的華美肌膚。色相體現著色彩外向的性格，是色彩的靈魂。 在 Photoshop 等計算機繪圖軟件中，使用 0360 的標準色輪對色相按位置進行度量。通常色相是由顏色名稱標識的，如紅、綠或橙色。色輪將可見光范圍內顏色以圓環方式表示3. 飽和度 S（Saturation） 飽和度（也叫純度）指的是顏色的強度或純度，即彩色成分所占的比例。在Photoshop 等計算機繪圖軟件中，常用從 0（灰色）100%（完全飽和）的百分比來度量飽和度

13、。如果使用色輪的方式來表示，在標準色輪上飽和度是從中心逐漸向邊緣遞增的。標準色輪不同色相及其飽和度變化 基于顏色的色相（Hue）、飽和度（Saturation）、明度（Brightness）三要素，在Photoshop等計算機繪圖軟件中，常用 HSB 模式來描述顏色。使用 HSB 模式描述顏色二、數字圖像的色彩模式 除了 HSB 顏色表示模式，計算機圖像處理軟件通常還使用 RGB、CMYK 及 Lab 等色彩模式，以便在不同應用領域更好地表示顏色。其中 RGB 模式是一種發光屏幕的加色模式；CMYK 模式是一種顏色反光的印刷減色模式；Lab 模式是為了彌補 RGB 和 CMYK 兩種色彩模式的

14、不足，由 CIE 組織（國際照明委員會）確定的一個理論上包括了人眼可以看見的所有色彩的色彩模式。1. RGB 模式 絕大部分的可見光可以用紅、綠和藍（RGB）三原色光按不同比例和強度的混合來表示。因為 RGB 三種顏色合到一起產生白色，所以 RGB 模型為加色模式，用于光照、視頻和顯示器。 在 Photoshop 等圖像處理軟件的 RGB 模式中，可以給彩色圖像中每個像素的 RGB 分量分配一個從 0（黑色）到 255（白色）范圍的強度值。 RGB 圖像使用紅、綠、藍三種顏色，在屏幕上可以重現多達 1670 萬種顏色。RGB 圖像為三通道圖像，每個像素包含 24 位（83）。新建 Photos

15、hop 圖像的默認模式為 RGB，計算機顯示器總是使用 RGB 模型顯示顏色。RGB顏色模式2. CMYK 模式 CMYK 顏色模式以打印在紙張上油墨的光線吸收特性為基礎，當白光照射到半透明的油墨上時，部分光線被吸收，部分被反射回眼睛。理論上，純青色（C）、品紅（M）和黃色（Y）色素能夠合成吸收所有顏色并產生黑色，因此，CMYK 模型也叫作減色模型。由于所有打印油墨都會包含一些雜質，這三種油墨實際上產生的是一種土灰色，因此必須與黑色（K）油墨混合才能產生真正的黑色。 CMYK 圖像為四通道圖像，在 Photoshop 等圖像處理軟件的 CMYK 模式中，每個像素的每種印刷油墨會被分配一個 0%

16、100% 的百分比值。最亮（高光）顏色分配較低的百分比值，較暗（暗調）顏色分配較高的百分比值。當所有四種分量的值都是 0%時，就會產生純白色。CMYK 顏色模式3. Lab 模式 Lab 顏色模式由心理明度分量（L）和兩個色度分量組成，這兩個色度分量即 a 分量（從綠到紅）和 b 分量（從藍到黃）。 Lab 顏色模式與設備無關，不管使用什么設備（如顯示器、打印機或掃描儀）創建或輸出圖像，這種顏色模型產生的顏色都保持一致。在 Photoshop 等圖像處理軟件中，Lab顏色模式主要用于不同顏色模式之間的轉換。三、色彩的心理感覺 色彩心理是客觀世界的主觀反映，不同的顏色會給瀏覽者不同的心理感受。不

17、同波長的光作用于人的視覺器官而產生色感時，必然導致人產生某種帶有情感的心理活動，而且每種色彩在飽和度、明度上的略微變化也會產生不同的感覺。 色彩的心理感覺具有差異性和共同性的特點，差異性體現在色彩感覺與人的年齡、職業、心理相關；共同性體現在色彩的冷暖、輕重、動靜等感覺，其決定因素是色彩自身的三要素。色彩的心理感覺1. 色彩感覺與年齡 由于年齡變化，導致生理變化和心理變化。據研究統計：嬰兒喜愛紅色和黃色；49歲的兒童最喜愛紅色；9 歲的兒童又喜愛綠色；715 歲的小學生和初中生中，男生的色彩喜好次序是綠、紅、青、黃、白、黑，女生的色彩喜好次序是綠、紅、白、青、黃、黑。隨著年齡的增長，人們的色彩喜

18、好逐漸向復色過渡，向黑色靠近。也就是說，人們越成熟，所喜愛的色彩越傾向成熟。2. 色彩感覺與職業 一般來說，體力勞動者喜愛鮮艷的色彩；腦力勞動者喜愛調和的色彩；農牧人員喜愛鮮艷的、成補色關系的色彩；高級知識分子則喜愛復色、淡雅色、黑色等成熟色彩。3. 色彩感覺與心理 不同的社會制度、意識形態、生活方式，會產生不同的社會審美意識和審美感受。由不同地區、不同民族、不同文化傳統、不同審美而在某個較長的時期內保持著相對穩定的顏色，就形成了社會的常用色。而當一些色彩被賦予時代精神的象征意義，又符合人們的認識、理想、興趣、愛好、欲望時，就會形成社會流行色。相對常用色而言的，流行色是一種與時俱變的顏色，其特

19、點是流行最快、周期最短。常用色有時會上升為流行色，流行色經人們使用后也會成為常用色。 流行色也具有一般規律：長期流行紅藍色調后，人們會向往綠橙色調；長期流行淡雅色調后，人們會向往中深色調；長期流行鮮明色調后，人們會向往沉著色調；長期流行暖色調后，人們會向往冷色調。4. 色彩的冷暖感覺 色彩的冷暖感覺是人們在長期生活實踐中由于聯想而形成的。紅、橙、黃等色常使人聯想起東方的旭日和燃燒的火焰，因此有溫暖的感覺，所以稱為“暖色”；藍色常使人聯想起大海、藍天、陰影處的冰雪，因此有寒冷的感覺，所以稱為“冷色”；綠、紫等色給人的感覺是不冷不暖，故稱為“中性色”。暖色讓人感覺熱烈、擴展、前進、親和、積極，冷色

20、讓人感覺冷靜、收縮、后退、冷漠、消極。暖色調和冷色調5. 色彩的輕重感覺 色彩在心理上的重量感受主要取決于色彩的明度，明度高色彩感覺輕，明度低色彩感覺重。明度相同時，飽和度高色彩感覺輕，飽和度低色彩感覺重。色彩的輕重感覺6. 色彩的動靜感覺 色彩的動靜感也來源于人們的聯想，它與畫面色調氣氛和意境有著密切的關系。總體而言，暖色的運動感強，冷色的靜止感強；明度高的運動感強，明度低的靜止感強；飽和度高的運動感強，飽和度低的靜止感強；顏色對比強的運動感強，顏色對比弱的靜止感強。色彩的動靜感覺第 3 節 平面構圖的基本常識 優秀的圖像構圖和版面設計，可以更好地傳達信息，或者加強信息傳達的效果，增強可讀性

21、，使要傳達的內容更加醒目、美觀。因此，對平面構圖和版面設計的良好把控，將有助于提高圖像設計和制作的水準。一、平面構成的含義 平面構成是視覺元素在二次元的平面上，按照美的視覺效果、力學的原理，進行編排和組合，以理性和邏輯推理來創造形象，研究形象與形象之間的排列方法，是理性與感性相結合的產物。 形象在構成設計中是表達一定含義的形態構成的視覺元素，在平面構成中，點、線、面是造型元素中最基本的形象和要素。1. 點 一個標記點在幾何學中是不具有大小只具有位置的，但在平面構成中是有大小、形狀、位置和面積的。點一般被認為是最小的并且是圓形的，但實際上點的形式可以是多種多樣的，有圓形、方形、三角形、梯形、不規

22、則形等。自然界中的任何形態縮小到一定程度都能產生不同形態的點。由此可以聯想到一個物體在周圍不同的環境條件下就會產生不同的感覺，越小的形體越能給人以點的感覺。 單個的點在畫面中的位置不同，產生的心理感受也不同。居中時會有平靜、集中感；偏上時會有不穩定感，形成自上而下的視覺流程；位置偏下時會有安定的感覺，但容易被人們忽略；位于畫面三分之二偏上的位置時，最易吸引人們的觀察力和注意力。點在畫面不同位置產生不同的心理感覺 當畫面中有兩個大小不同的點時，大的點首先引起人們的注意，但視線會逐漸從大的點移向小的點，最后集中到小的點上。點大到一定程度會具有面的性質，點越大越空乏，越小積聚力越強。兩個點的位置點的

23、構成方法2. 線 線是點移動的軌跡。線游離于點和形之間，具有位置、長度、寬度、方向、形狀和性格等屬性。 線有很強的心理暗示作用，不同的線還有不同的感情和性格。線可用于表現動與靜，直線表現靜，曲線表現動，曲折線則有不安定的感覺。 直線具有男性的特點，有力度、穩定；水平線平和、寂靜，使人聯想起風平浪靜的水面、遠方的地平線；垂直線則使人聯想到樹、電線桿、建筑物的柱子，有一種崇高的感受；斜線則有一種速度感。直線還有粗細之分，粗直線有一種厚重、粗笨的感覺，細直線有一種尖銳、精細的感覺。 曲線富有女性化的特征，具有豐滿、柔軟、優雅、渾然之感。幾何曲線是用圓規或其他工具繪制的，具有對稱和秩序的美、規整的美；

24、自由曲線是徒手畫的一種自然的延伸，自由而富有彈性。線的構成方法 線的構成方法包括等距的密集排列面化的線；按不同距離排列，具有透視空間視覺效果疏密變化的線；粗細變化的線具有虛實空間的視覺效果；將原來較為規范的線條排列做一些切換變化，成錯覺化的線；立體化的線；不規則的線等。面的構成方法3. 面 面是線移動的軌跡。在平面構成中，面是具有長度、寬度和形狀的實體，點的密集或者擴大，線的聚集和閉合都會形成面。面是構成各種可視形態的基礎。 面的形態是多種多樣的，不同形態的面在視覺上有不同的作用和特征。直線形的面具有直線所表現的心理特征，如安定、秩序感、直板、僵硬的特征；曲線形的面具有柔軟、輕松、飽滿的特征；

25、偶然形的面（如水和油墨混合潑灑產生的偶然形等）比較自然生動，有人情味。面的應用 面的可塑性較強，善于表現不同的情感。通常，由什么類型的線組成的面，就具有該種線的特征。面在標志設計、攝影、廣告招貼設計、服裝設計、環境藝術設計和包裝設計中應用廣泛。二、版面設計基本知識1. 版面設計的基本原則 （1）思想性與藝術性結合 （2）整體協調與主體突出結合2. 版面設計的一般形式法則 （1）重復與交錯 （2）節奏與韻律 （3）對稱與均衡 （4）對比與調和 （5）比例與適度 （6）變異與秩序 （7）虛實與留白 （8）變化與統一節奏與韻律對比與調和變異與秩序虛實與留白變化與統一謝謝觀賞！電子商務網頁圖像制作（A

26、dobe Photoshop CS6）（第二版）第 1 章 認識數據庫 對于大部分電子商務企業來說，為了方便對商品的管理，需要把所有商品的相關信息（商品編號、商品名稱、商品類別、商品單位等）匯集起來，如果僅靠人工收集和管理，工作量將十分巨大，若運用數據庫的知識，將所有的商品信息按一定的規則存儲到計算機中，就可以方便快捷的進行管理 。一、數據庫的概念 打開如圖所示的數據庫之后，可以看到該數據庫由進貨信息表、商品信息表等組成。商品銷售管理數據庫 打開商品信息表，如圖所示，可以看到具體商品的詳細信息，包括商品標號、商品名稱、商品類別、商品單位、進貨單價、庫存下限、產地。商品信息表 通過上面的簡單操作

27、可以看出，數據庫(Database)是按照一定的數據結構來組織、存儲和管理數據的、建立在計算機存儲設備上的倉庫，這些商品相關信息就是倉庫中的數據，用戶可以對這些數據進行新增、更新、刪除等操作。 對于數據庫來說，它可以有效的組織數據，方便地輸入數據到計算機中，并可以根據用戶的要求將數據從計算機中提取出來。例如需要在商品銷售管理數據庫中統計每個倉庫的出貨次數，需要對數據進行左圖所示的設置與操作，最終結果如右圖所示。統計每個倉庫的出貨次數的設置查詢的結果 不同的用戶可以通過不同的應用程序得到自己需要的數據信息，而并不影響數據庫中存儲的實際數據。而在應用程序和數據庫之間起橋梁作用的就是數據庫管理系統D

28、BMS（DataBase Management System）。數據庫管理系統對數據的處理方式和文件系統不同，它把所有應用程序中的數據匯集在一起，并以記錄為單位存儲起來，便于應用程序查詢和使用。二、數據模型1. 層次模型 層次模型表示數據間的從屬關系結構，是一種以記錄某一事物的類型為根結點的有向樹結構。其主要特點如下：（1）僅有一個無雙親的根結點。（2）根結點以外的子結點，向上僅有一個父結點，向下有若干子結點。（3）層次模型表示的是從根結點到子結點的一個結點或多個結點，或者從子結點到父結點的多個結點對一個結點的數據間聯系2. 網狀模型 如圖所示，網狀模型是層次模型的擴展，它表示多個從屬關系的層

29、次模型，呈現一種交叉關系的網絡結構。網狀結構是記錄為結點的網絡結構，其主要特征如下:（1）有一個以上的結點無雙親。（2）至少有一個結點有多個雙親。3. 關系模型 關系模型的所謂“關系”是有特定含義的，任何事物都可以描述成一定事物數據之間的關系。層次模型描述數據之間的從屬層次關系；網狀模型描述數據之間的多種從屬的網狀關系。關系模型的所謂“關系”雖然也適用于這種理解，但同時又特具有相關性但又非從屬性的平行數據之間按照某種序列排列的集合關系。商品編號商品名稱商品類別商品單位商品單價產地S0001西瓜水果千克2.58江蘇S0002水蜜桃水果千克13.5江蘇S0005蘋果水果千克6.8陜西S0006香蕉

30、水果千克5.2海南商品基本信息表 表中的這些數據雖然是平行的，不代表從屬關系，但它們構成了某種商品類別的商品屬性關系結構（同屬于水果）。 三、關系型數據庫（1）表（Table）（2）列（Field） 也稱為表名，由表名、列名以及若干行組成。 也稱字段、域或者屬性，表中的每一列都包含一類信息。（3）行（Row）（4）主鍵（Key） 也稱元組，表中每一行由若干個字段組成，描述一個對象的信息。這個字段描述該對象的某種性質。 是表中的某個字段組，它們的值唯一地標識一個元組。 （5）關系模式（Relation Schema） 關系的描述稱為關系模式。（6）值域（Domain） 值域是字段的取值范圍。（7

31、）表名和列名的命名規定 表名在整個數據庫中必須是唯一的，列名在一個表中必須是唯一的，但在不同的表中可以出現相同的列名。表名和列名應盡可能帶有一定的意義并盡量簡單。 （1）實體完整性四、關系完整性約束 實例完整性是指關系的主屬性不能為空值。由于關系對應現實世界中的實體，實體必須是客觀存在并可以區分的，即每個實體都有唯一性標識。在關系數據庫中由主屬性作為唯一性標識，若主屬性取空值，則說明這個實體不可標識。例如“商品信息表”中設置了“商品編號”為主鍵，那么商品編號就不能為空，也不能有重復的兩個商品編號出現。 （2）參照完整性 參照完整性是指在關系中不能引用其他關系中不存在的屬性值。由于現實世界中的實

32、體存在著某種聯系，在關系數據為中描述聯系時就必須存在有關系之間屬性的引用，參照完整性所定義的就是關系之間屬性的引用規則。例如在“商品信息表”和“進貨信息表”通過“商品編號”這個屬性建立了某種聯系。按照參照完整性規則，“進貨信息表”中每個商品的都必須在“商品信息表”中必須存在。 （3）用戶定義的完整性 用戶定義的完整性是針對某一具體的應用所定義的約束條件。由于關系數據庫要反映現實世界上中的各種需要，單靠實體完整性和參照完整性不能滿足應用的所有需要。如商品的進貨數量取值范圍是500-5000，這樣就需要用戶自定義完整性來描述。 實體完整性和參照完整性是關系模型必須滿足的約束條件，由關系系統自動生成

33、；而用戶定義的完整性則是根據實際需要自行定義的約束條件。課件制作謝謝觀看第 2 章 熟悉 Photoshop CS6 界面環境第 1 節 Photoshop CS6 的安裝與配置第 2 節 Photoshop CS6 的工作界面第 3 節 Photoshop CS6 文件的基本操作第 4 節 Photoshop CS6 的圖層與選區第 1 節 Photoshop CS6 的安裝與配置 Photoshop，簡稱“PS”，是由美國 Adobe 公司開發的一款圖像處理軟件。它的理論基礎是色彩學，通過對圖像中各像素的數字描述，實現了對數字圖像的精確調控。其眾多的編修與繪圖工具，可以有效地進行圖片編輯工

34、作。可支持多種圖像格式和色彩模式，能同時進行多圖層處理，它的選擇工具、圖層工具、濾鏡工具能使用戶得到各種手工處理或其他軟件無法得到的圖像效果。一、Photoshop CS6 的特點1. 支持多種圖像格式2. 支持多種色彩模式3. 強大的圖像選取功能4. 提供各種圖像編輯功能5. 提供對圖像色調和色彩的調整功能6. 提供各種繪畫功能7. 提供創建各種圖層及圖層效果8. 提供功能強大的濾鏡特效庫二、Photoshop CS6 的安裝要求1. 在 Windows 環境下安裝 PhotoshopCS6 的系統要求2. 在 MacOS 系統下安裝 PhotoshopCS6 的環境要求 該軟件使用前需要激

35、活。軟件激活、訂閱驗證和訪問在線服務需要寬帶網絡，不能用電話激活。 在 Photoshop CS6 中選擇菜單“編輯”“首選項”“常規”即可進入首選項設置界面，或直接按 Ctrl+K 組合鍵也可以進入。三、Photoshop CS6 運行環境的配置“首選項”菜單命令組 1. 內存 / 暫存盤等設置“首選項”對話框“性能”選項卡2. 單位標尺的設置“首選項”對話框“單位與標尺”選項卡3. 設置繪畫光標“首選項”對話框“光標”選項卡第 2 節 Photoshop CS6 的工作界面 Photoshop CS6 的工作界面主要由菜單欄、工具選項卡、工具箱、浮動控制面板、圖像編輯窗口、狀態欄六部分組成

36、。PhotoshopCS6 的工作界面一、菜單欄 Photoshop CS6 的菜單欄位于工作界面的頂端，由文件、編輯、圖像、圖層、文字、選擇、濾鏡、3D、視圖、窗口和幫助 11 個菜單命令組成。另外，如果菜單中的命令呈現灰色，則表示該命令在當前編輯狀態下不可用；如果菜單命令右側有一個三角形符號，則表示此菜單中包含有子菜單，將鼠標指針移動到該菜單上，即可打開該子菜單；如果菜單命令右側有省略號“”，在執行此菜單命令時將彈出與之有關的對話框。菜單欄二、工具選項卡 工具選項卡位于菜單欄的下方，主要用于對所選工具屬性進行設置，其顯示內容會根據用戶所選工具的不同而改變。在工具箱中選中工具后，多數情況下還

37、需要在工具選項卡中對所選工具的參數進行設置，以達到更佳的使用效果。“矩形選框”工具的工具選項卡三、工具箱 工具箱位于工作界面的左側，包含50多個工具。要使用工具箱中的工具，只需單擊工具按鈕即可在圖像編輯窗口中使用。 用戶可根據不同需求將工具箱變為單欄或雙欄顯示。 在工具箱中，若在某工具按鈕的右下角有一個小三角形，表示該工具按鈕內還包含其他工具，在工具按鈕上單擊鼠標右鍵，即可彈出所隱藏的工具。工具箱顯示隱藏的工具四、狀態欄 狀態欄位于工作界面的最底部，用于顯示當前所編輯圖像的參數值，及當前文檔圖像的相關信息，主要有顯示比例、文件大小、內存使用率、操作運行時間、當前工具等提示信息。狀態欄五、浮動控

38、制面板 浮動控制面板位于工作界面的右側，用戶可以進行分離、移動和組合操作，主要用于對當前圖像的顏色、圖層、樣式及相關的操作進行設置。默認情況下，浮動控制面板包括圖層、通道、路徑、顏色、色板、調整和樣式七種。顯示浮動控制面板六、圖像編輯窗口 圖像編輯窗口在 Photoshop CS6 工作界面的中間，在該窗口中可實現所有操作功能，灰色區域即為圖像編輯工作區。當打開一個文檔時，工作區中將顯示該文檔的圖像窗口。圖像窗口是編輯的主要工作區域，圖形的繪制或圖像的編輯都在此區域中進行。同時打開多個文件的工作界面第 3 節 Photoshop CS6 文件的基本操作 Photoshop CS6 是一款非常優

39、秀的圖像處理軟件，若想充分發揮其繪圖和圖像處理功能，在創作之前，必須熟練掌握其常用的操作方法。對于圖像文件的常用操作有：打開文件、新建文件、存儲文件和關閉文件等。此外，圖像文件的畫幅、分辨率的設定方法和原則也是重點學習的內容。“文件”“打開”命令一、打開文件 在 Photoshop CS6 中打開圖像文件有以下幾種操作方法： 1. 選擇“文件”“打開”命令。 2. 按 Ctrl+O 組合鍵。 3. 雙擊 Photoshop 操作界面編輯窗口中的空白處。 使用以上三種方法都可以在彈出的“打開”對話框中，選擇需要打開的圖像文件。“文件”“打開”命令 可以打開一個圖像文件進行編輯和修改，也可以同時打

40、開多個圖像文件。如果要打開一組連續文件，可以在選擇第一個文件后，按住Shift鍵的同時再選擇最后一個要打開的文件，再單擊“打開”按鈕。如果要打開一組不連續的文件，可以在選擇第一個圖像文件后，按住Ctrl鍵，同時選擇其他的圖像文件，然后再單擊“打開”按鈕。選擇需要打開的文件二、新建文件 在Photoshop CS6中，若要繪制或編輯圖像，首先需要新建一個空白文件。執行“文件”“新建”命令，彈出 “新建”對話框，設置新文件的“寬度”“高度”“顏色模式”及“背景內容”等，單擊“確定”按鈕即可新建一個空白的圖像文件。“新建”對話框三、存儲文件1. 直接存儲圖像文件 存儲當前圖像文件，執行“文件”“存儲

41、為”命令，或使用快捷鍵 Shift+Ctrl+S，彈出對話框。 PSD 是 Photoshop 重要的文件格式，它可以保留文檔的圖層、蒙版、通道等所有內容，編輯圖像之后，盡量保存為該格式，以便以后可以隨時修改。“存儲為”對話框2. 另存圖像文件 Photoshop CS6 所支持的圖像格式有20種，因此它可以作為一種轉換圖像格式的工具來使用，將圖像格式轉為其他軟件支持的格式。 執行“文件”“存儲為”命令，或使用快捷鍵 Shift+Ctrl+S，在彈出的“存儲為”對話框中根據需要更改“格式”選項并保存即可。四、還原操作1. 使用“編輯”菜單執行“還原”命令 在操作過程中，如果存在誤操作，需要返回

42、這一錯誤步驟之前的狀態，可以執行“編輯”“還原”命令。如果在后退之后，又需要重新執行這一命令，則可以執行“編輯”“重做”命令。如果連續執行“后退一步”命令，還可以連續向前回退。如果在連續執行“編輯”“后退一步”命令后，再連續執行“編輯”“向前一步”命令，則可以連續重新執行已經退回的操作。還原命令2. 使用“歷史記錄”面板執行還原操作 “歷史記錄”面板具有還原操作功能，其上記錄了進行的每一步操作。通過觀察此面板，可以清楚地了解到以前所進行的每一操作步驟，并決定具體回退到哪一個位置。 在進行一系列操作后，如果還需要后退至某一個歷史狀態，則直接在歷史記錄列表區中單擊該歷史記錄的名稱，即可使圖像操作狀

43、態返回至此。此時在所選歷史記錄后面的操作都將呈灰度顯示，重新操作后該操作步驟以后的“歷史記錄”將重新記錄。“歷史記錄”面板五、畫幅、分辨率的設定 用 Photoshop CS6 編輯的圖像是基于位圖格式的，而位圖的基本單位是像素，因此在創建位圖圖像時需要指定圖像的分辨率。 分辨率是指位圖圖像中細節的精細度，測量單位是像素 / 英寸（ppi）。每英寸的像素越多，分辨率越高。 雖然分辨率越高圖像質量越好，但會增加占用的存儲空間。所以應根據圖像的用途設置合適的分辨率，以取得最好的使用效果。如果圖像應用于屏幕顯示或網絡，可將分辨率設置為 72 像素 / 英寸；如果圖像用于打印機打印，可將分辨率設置為

44、100150 像素 / 英寸；如果圖像用于印刷則應設置為 300 像素 / 英寸。“圖像大小”對話框 在 Photoshop CS6 中，執行“圖像”“圖像大小”命令，將顯示“圖像大小”對話框。在該對話框中，可以設定圖像大小和分辨率。第 4 節 Photoshop CS6 的圖層與選區 圖層與選區是Photoshop CS6 的核心功能，圖層的不透明度、混合模式、圖層樣式等操作，選區的編輯修改等操作須重點學習。 在Photoshop CS6 中，所有圖像都是基于圖層來進行操作的。圖層就是圖像的層次，可以將一幅作品分成若干幅圖像，每一幅圖像都處于不同圖層，便于用戶調整。而選區則針對每一幅圖像進行

45、操作，具有靈活性，可以多次進行編輯操作。一、圖層的基本概念1.“圖層”面板 “圖層”面板是進行圖層編輯操作不可缺少的工具。“圖層”面板顯示當前圖層的信息，從“圖層”面板可以調整圖層疊放次序、圖層透明度、圖層混合模式等參數。一般情況下，“圖層”面板默認顯示在工作區，也可通過“窗口”“圖層”命令，在工作區中顯示或隱藏此面板。“圖層”面板2. 創建圖層 （1）按鈕創建圖層 （2）使用快捷鍵創建新圖層3. 選擇圖層 單擊“圖層”面板中的一個圖層即可選擇該圖層，使其成為當前圖層。4. 編輯圖層 （1）顯示、隱藏圖層 隱藏圖層顯示圖層 （2）復制圖層 （3）刪除圖層 （4）重命名圖層 （5）改變圖層順序

46、（6）過濾圖層過濾圖層5. 合并圖層 首先選中需要合并的圖層，再選擇“圖層”“合并圖層”命令，即可合并圖層。也可以按 Ctrl+E 組合鍵合并圖層。6. 圖層組 圖層組類似于文件夾，可將圖層按照類別放在不同的組內，當關閉圖層組后，在圖層面板中就只顯示圖層組名稱。選擇“圖層”“新建”“組”命令，彈出“新建組”對話框，設置選項后單擊“確定”按鈕即可創建圖層組。圖層組二、選區的基本概念1. 選區的創建 （1）創建規則選區 利用“矩形選框工具”和“橢圓選框工具”可以制作規則的選區。 （2）創建不規則選區 使用工具箱中的“套索工具”“多邊形套索工具”“磁性套索工具”“魔棒工具”“快速選擇工具”均可創建不

47、規則選區。創建規則選區2. 管理選區 （1）移動選區 （2）取消選區 （3）存儲選區 （4）載入選區存儲選區3. 修改選區 在創建選區時，可對選區進行多項修改，如邊界選區、平滑選區、擴展選區、收縮選區、羽化選區、調整邊緣等。修改選區4. 應用選區 （1）描邊選區 （2）填充選區 （3）使用選區定義圖案填充選區謝謝觀賞！電子商務網頁圖像制作（Adobe Photoshop CS6）（第二版）第 3 章 圖像的簡單處理第 1 節 圖像的尺寸大小調整第 2 節 圖像的裁切處理第 3 節 圖像的移動與變換第 4 節 繪制位圖圖像第 5 節 繪制矢量圖形第 1 節 圖像的尺寸大小調整 圖像尺寸的大小與圖

48、像的文件格式、分辨率和幅面大小有關系。通過合理的設置，在不影響圖像在網頁上瀏覽效果的情況下，可大幅調整圖片的尺寸，以減少圖像占用的存儲空間。 圖像文件的大小是圖像文件的數字大小，以千字節（KB）、兆字節（MB）或千兆字節（GB）為度量單位。圖像文件的大小與圖像的像素多少成正比，圖像中包含的像素越多，在給定的打印尺寸上顯示的細節也就越豐富，但需要的磁盤存儲空間也會增多，而且編輯和打印的速度可能會更慢。 因此，在圖像品質（保留所需要的所有數據）和文件大小難以兩全的情況下，滿足電商網頁圖像顯示的基本要求，合理調整圖像中包含的像素數量，成為它們之間的折中方法。 調整圖像的像素總量有兩種方法：一是改變圖

49、像的分辨率；二是調整圖像的尺寸。這兩種方法可以結合使用。第 2 節 圖像的裁切處理 Photoshop CS6 中，最常用、最方便的是使用工具箱中的“裁剪工具”，用以對圖像進行裁剪。 “裁剪工具”和“切片工具”等在一個工具組里，按鍵盤上的C鍵，即可調出裁剪工具。 選中了裁剪工具，默認的裁剪范圍是整張圖片，這和以往需要自己拖動設置有所不同，而且圖片被裁剪工具默認劃為九宮格，只需拖動邊緣來確定裁剪范圍即可。裁剪圖片通常是將圖像裁剪得更小。如果裁剪的尺寸，比原有尺寸還大，這樣超出原始圖片的地方，將會使用背景色填充。裁剪工具第 3 節 圖像的移動與變換 在處理圖形或圖像的過程中，總少不了對圖形或圖像的

50、基本形狀進行調整。本節介紹在 Photoshop CS6中如何對選定的圖像對象進行移動、旋轉、變形處理。 靈活使用 Photoshop CS6中的“移動”工具，及“變換”和“自由變換”菜單命令，就可以將所選定的圖形變換成所想要的形狀和形式。一、Photoshop CS6 的移動工具 Photoshop CS6 中“移動工具”圖標為 ，快捷鍵為 V。“移動工具”屬性欄1.“自動選擇圖層” 選擇此選項，在具有多個圖層的圖像上單擊鼠標，系統將自動選中鼠標單擊位置所在的圖層。2.“自動選擇組” 選擇此選項，在具有多個組的圖像上單擊鼠標，系統將自動選中鼠標單擊位置所在的組。3.“顯示變換控件” 選擇此選

51、項，選定范圍四周將出現控制點，用戶可以方便地調整選定范圍中的圖像尺寸。4.“對齊圖層” 當同時選擇了兩個或兩個以上的圖層時，單擊相應的按鈕可以將所選圖層進行對齊，包括“頂對齊”“垂直居中對齊”“底對齊”“左對齊”“水平居中對齊”和“右對齊”。5.“分布圖層” 如果選擇了三個或三個以上的圖層時，單擊相應的按鈕可以將所選圖層按一定規則進行均勻分布排列。分布方式包括“按頂分布”“垂直居中分布”“按底分布”“按左分布”“水平居中分布”和“按右分布”。二、移動工具使用注意事項 移動工具主要是針對當前“選區”或當前“圖層”的內容來操作的。 移動工具用來移動所選圖像的位置，它不限制圖像的區域，可以在不同圖層

52、或不同圖片中使用。移動工具的快捷鍵為 V，按住鍵盤上的 Alt 鍵，配合移動工具，可以實現在當前圖層中復制圖像的目的。 在所要操作的對象上單擊鼠標右鍵，即可選中當前圖層，使用移動工具移動當前圖層中的操作對象。 將一個圖像窗口中的內容拖到另一個打開的圖像窗口中，相當于把該圖像拷貝到另一圖像窗口中。三、Photoshop CS6 的變換和自由變換 縮放 旋轉 斜切 扭曲 透視 變形“變換”和“自由變換”菜單命令變形操作時的小技巧：（1）Shift+ 縮放可約束長寬比。（2）Alt+ 縮放可自中心變換。（3）Ctrl+Shift+ 拖動角點可斜切。（4）Ctrl+ 拖動角點可扭曲。（5）Ctrl+A

53、lt+ 拖動角點可對稱的扭曲。（6）Ctrl+Shift+Alt+ 拖動角點可透視。（7）Ctrl+Shift+T 再次執行相同變換操作。第 4 節 繪制位圖圖像 在處理圖形或圖像的過程中，往往需要自己繪制創建一些簡單的圖形。本節介紹如何在Photoshop CS6 中使用繪畫工具，繪制圖片作品。 使用Photoshop CS6 中的畫筆工具、填充工具、圖案圖章工具等，可以自由發揮，創建出自己的圖形圖像。Photoshop CS6 中繪畫工具的使用是一項基本功，是圖像處理的基礎，只有扎實掌握這些基本功，才能做出完美的作品。一、Photoshop CS6 的畫筆工具 畫筆工具主要用來繪圖或對圖像

54、上色，畫筆的顏色可由色板的顏色決定。畫筆工具的使用方法和實際使用毛筆在畫紙上繪畫一樣，可以表現出多種邊緣柔軟的效果。畫筆工具 畫筆工具的選項欄包括：畫筆、模式、不透明度、流量和噴槍，可以調整畫筆的大小、硬度、刷式（筆刷形狀）、不透明度等，如圖所示。 鉛筆工具主要是模擬平時畫畫所用的鉛筆，選用鉛筆工具后，在圖像內按住鼠標左鍵不放并拖動，即可以進行畫線，它與畫筆不同之處是所畫出的線條沒有蒙邊。筆頭可以在左邊的畫筆中選取。畫筆工具選項欄二、Photoshop CS6 的填充工具 填充是以指定的顏色或圖案對所選區域進行處理，常用的填充工具有油漆桶和漸變工具。 油漆桶（即顏料桶）工具用于向鼠標單擊處和與

55、其顏色相近區域填充前景色或指定圖案。 使用工具箱中的漸變工具可以產生兩種以上的顏色漸變效果。漸變方式既可以選擇系統設定值，也可以自己定義。漸變方向有線性狀、圓形放射狀、方形放射狀、角形和斜向等幾種。如果不選擇區域，將對整個圖像進行漸變填充。填充工具三、Photoshop CS6 的圖章工具 圖章工具有仿制圖章和圖案圖章工具兩種。 仿制圖章工具主要用于對圖像的修復，也可以理解為局部復制。先按住 Alt 鍵，再用鼠標在圖像中需要復制或要修復取樣點處單擊一下左鍵，再選取一個合適的仿制畫筆大小，就可以在圖像中修復圖像。 圖案圖章工具也是用來復制圖像的，但與仿制圖章有些不同，其前提是先用矩形選框工具選擇

56、一范圍，在“編輯”菜單中選擇“定義圖案”命令，然后再選合適的筆頭，在圖像中復制圖案。圖章工具第 5 節 繪制矢量圖形 由于矢量圖形文件具有尺寸較小、放大縮小不失真等優點，常常用于標識、圖標、LOGO 等簡單直接的圖像。 使用 Photoshop CS6 中的“鋼筆工具”等，可以自由發揮，創建出自己的圖形圖像。鋼筆工具屬于矢量繪圖工具，其優點是可以勾畫平滑的曲線，在縮放或變形之后仍能保持平滑效果。 鋼筆工具畫出來的矢量圖形稱為路徑。路徑允許是不封閉的開放狀，如果把起點與終點重合繪制就可以得到封閉的路徑。鋼筆工具 鋼筆工具繪制出來的線條全部都是貝賽爾曲線。貝賽爾曲線由線段（Segment）和錨點（

57、Anchor）構成，而每一個錨點都有兩個控制點，通過調節控制點就可以設計出自己想要的線條。 圖中并沒有直接繪制線段，而是定義了各個錨點的位置，軟件則在點間連線成型，控制線段形態的并不是線段本身，而是線段兩端錨點的控制點的位置。貝賽爾曲線謝謝觀賞！電子商務網頁圖像制作（Adobe Photoshop CS6）（第二版）第 4 章 文字的簡單處理第 1 節 文字使用基礎第 2 節 文字的字體及樣式調整第 3 節 廣告字的制作第 1 節 文字使用基礎 為電子商務網頁圖像添加文字不僅可以吸引瀏覽者或顧客的眼球，而且能快速使其從眾多商品圖片中選中需要瀏覽的圖像。網頁中也要針對商品的情況進行說明，這些文字

58、都是以圖像的形式上傳到網頁上的。如果給文字增加一些特效，會達到更好的宣傳效果。首先，要重點掌握文字的基本使用方法，并通過實例進行鞏固，在此基礎上，繼續加深學習文字樣式的調整方法，并進行實例應用，最終能夠使用Photoshop CS6 進行圖像中文字的簡單處理。一、認識文字工具屬性欄 在 Photoshop CS6 中，文字的輸入主要是通過文字工具箱來完成的。在文字工具箱中右鍵單擊 “橫排文字工具”按鈕，可打開文字工具組，其中包含文字工具和文字蒙版工具。文字工具屬性欄二、創建點文本 點文本是一個水平或垂直的文本行，在處理標題等字數較少的文字時，可以通過點文本來完成。選擇橫排或直排文字工具后，在圖

59、像中需要創建文字的地方單擊鼠標左鍵，即可在該點插入一個光標，在光標處輸入文字即可。創建點文本三、創建段落文本 段落文本也是基于文本框輸入的文本，用戶可以輸入一段或多段文字，當輸入的文字超出文本框的界定寬度后，將自動進行換行，使文字以文本框的大小進行排列。由于段落文本具有自動換行、可調整文字區域大小和形狀等優勢，在需要處理的文字量較大時，可以使用段落文本來完成。電商網頁段落文本 段落文本的創建方法是在工具箱中選擇“橫排文字工具”，將鼠標指針移至圖像編輯窗口中，按住鼠標左鍵并拖曳，可顯示一個虛線框，至合適位置后釋放鼠標左鍵，即可繪制出一個文本框，且顯示一個閃爍的文字插入點光標，在此輸入相應的文本信

60、息即可。四、修改點文本與段落文本 創建點文本或段落文本后，如果需要對文本中的文字內容進行修改，可再次選擇 “橫排文本工具”或 “直排文本工具”，然后將光標移動到文本中，當光標變為 形狀時單擊鼠標左鍵，即可激活文本編輯狀態，此時可以對文本進行選取、刪除或修改等操作。 除了修改文本的內容，還可以對文字格式進行修改，包括字體、字號和字符顏色等。選擇“橫排文本工具”或“直排文本工具”后，在文本中按下鼠標左鍵并拖動，選中需要設置的文字，然后在屬性欄中重新設置即可。 創建好文本后，如果要移動文本，只需選擇“移動工具”，在圖層面板中選中要移動的文本圖層，然后在圖像中按下鼠標左鍵并拖動即可。 對于段落文本，不