網(wǎng)頁(yè)設(shè)計(jì)與制作 課件 王紅蕾 項(xiàng)目1-6：了解網(wǎng)頁(yè)基礎(chǔ)組成和色彩 - 創(chuàng)建本地站點(diǎn)和基本文本網(wǎng)頁(yè)_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作 課件 王紅蕾 項(xiàng)目1-6：了解網(wǎng)頁(yè)基礎(chǔ)組成和色彩 - 創(chuàng)建本地站點(diǎn)和基本文本網(wǎng)頁(yè)_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作 課件 王紅蕾 項(xiàng)目1-6：了解網(wǎng)頁(yè)基礎(chǔ)組成和色彩 - 創(chuàng)建本地站點(diǎn)和基本文本網(wǎng)頁(yè)_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作 課件 王紅蕾 項(xiàng)目1-6：了解網(wǎng)頁(yè)基礎(chǔ)組成和色彩 - 創(chuàng)建本地站點(diǎn)和基本文本網(wǎng)頁(yè)_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作 課件 王紅蕾 項(xiàng)目1-6：了解網(wǎng)頁(yè)基礎(chǔ)組成和色彩 - 創(chuàng)建本地站點(diǎn)和基本文本網(wǎng)頁(yè)_第5頁(yè)
已閱讀5頁(yè)，還剩134頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

網(wǎng)頁(yè)設(shè)計(jì)與制作——項(xiàng)目1：了解網(wǎng)頁(yè)基

礎(chǔ)組成和色彩Project1項(xiàng)目1學(xué)習(xí)目標(biāo)〓知識(shí)目標(biāo)〓了解網(wǎng)頁(yè)的基本概念。了解網(wǎng)頁(yè)設(shè)計(jì)該用到的軟件。掌握網(wǎng)頁(yè)的布局和色彩?！寄苣繕?biāo)〓學(xué)會(huì)網(wǎng)頁(yè)布局版式設(shè)計(jì)的有哪些。學(xué)會(huì)網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)有哪些。學(xué)會(huì)網(wǎng)頁(yè)設(shè)計(jì)中的色彩分類有哪些?！刭|(zhì)目標(biāo)〓從基礎(chǔ)學(xué)起，培養(yǎng)工匠精神，多學(xué)多練加強(qiáng)個(gè)人的網(wǎng)頁(yè)設(shè)計(jì)能力。養(yǎng)自身的審美能力，增加網(wǎng)頁(yè)設(shè)計(jì)中的美感。職場(chǎng)情境當(dāng)我們看到網(wǎng)頁(yè)時(shí)進(jìn)入眼簾的除了布局以外就是網(wǎng)頁(yè)的色彩了，為此，小艾想要對(duì)網(wǎng)頁(yè)的基礎(chǔ)、布局和色彩部分進(jìn)行一下初步了解，而同事凱程告訴她，好的網(wǎng)頁(yè)布局和色彩會(huì)令訪問(wèn)者耳目一新，同樣也可以使訪問(wèn)者比較容易找到他們所需要的信息，所以網(wǎng)頁(yè)設(shè)計(jì)初學(xué)者應(yīng)該對(duì)網(wǎng)頁(yè)的基礎(chǔ)、布局和色彩的相關(guān)知識(shí)有所了解。接下來(lái)，大家可以跟隨小艾一起走進(jìn)網(wǎng)頁(yè)設(shè)計(jì)之中，來(lái)了解網(wǎng)頁(yè)的基礎(chǔ)、布局和色彩。大家可以在本節(jié)中了解網(wǎng)頁(yè)的基本概念、了解網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知、掌握網(wǎng)頁(yè)布局設(shè)計(jì)與色彩等內(nèi)容。CONTENTS任務(wù)1了解網(wǎng)頁(yè)的基本概念目錄任務(wù)2了解網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)任務(wù)3掌握網(wǎng)頁(yè)布局設(shè)計(jì)與色彩綜合實(shí)戰(zhàn)—繪制國(guó)字型網(wǎng)頁(yè)布局草圖綜合實(shí)戰(zhàn)—采集色彩課后習(xí)題任務(wù)1了解網(wǎng)頁(yè)的基本概念要學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)，首先要了解一些基本概念，如網(wǎng)頁(yè)、URL等。本節(jié)將首先介紹這些網(wǎng)頁(yè)的基本概念，從而為后面設(shè)計(jì)更復(fù)雜的網(wǎng)頁(yè)打下良好的基礎(chǔ)。活動(dòng)1認(rèn)識(shí)網(wǎng)頁(yè)網(wǎng)頁(yè)，是指網(wǎng)站中的任何一個(gè)頁(yè)面，通常是HTML格式。進(jìn)入網(wǎng)站后第一眼看到的即是這個(gè)網(wǎng)站的首頁(yè)任務(wù)1了解網(wǎng)頁(yè)的基本概念要學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)，首先要了解一些基本概念，如網(wǎng)頁(yè)、URL等。本節(jié)將首先介紹這些網(wǎng)頁(yè)的基本概念，從而為后面設(shè)計(jì)更復(fù)雜的網(wǎng)頁(yè)打下良好的基礎(chǔ)。活動(dòng)2認(rèn)識(shí)統(tǒng)一資源定位符URLURL英文全稱是UniformResourceLocator，即統(tǒng)一資源定位符，它是一種通用的地址格式，指出了文件在Internet中的位置。一個(gè)完整的URL地址由協(xié)議名、服務(wù)器地址、在服務(wù)器中的路徑和文件名4部分組成，瀏覽器地址欄中顯示了完整的URL地址任務(wù)2了解網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)本次任務(wù)就帶領(lǐng)大家了解一下網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)，為以后的學(xué)習(xí)做好鋪墊?；顒?dòng)1了解網(wǎng)頁(yè)設(shè)計(jì)軟件網(wǎng)頁(yè)設(shè)計(jì)的軟件有很多，對(duì)于初學(xué)者只要了解用于網(wǎng)頁(yè)的布局、圖像處理和動(dòng)畫制作的相關(guān)軟件就可以了。任務(wù)2了解網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)活動(dòng)2了解網(wǎng)頁(yè)標(biāo)記語(yǔ)言HTMLHTML的任何標(biāo)記都由“<”和“>”括起來(lái)，如<HTML><I>。在起始標(biāo)記的標(biāo)記名前加上符號(hào)“/”便是其終止標(biāo)記，如</I>，夾在起始標(biāo)記和終止標(biāo)記之間的內(nèi)容受標(biāo)記的控制，例如<I>假期愉快</I>，夾在標(biāo)記“I”之間的“假期愉快”將受標(biāo)記“I”的控制。HTML文件的基本結(jié)構(gòu)也是如此。任務(wù)2了解網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)活動(dòng)2了解網(wǎng)頁(yè)標(biāo)記語(yǔ)言HTML下面介紹一下HTML文件的基本結(jié)構(gòu)。1.HTML標(biāo)記<Html>標(biāo)記用于HTML文檔的最前邊，用來(lái)標(biāo)識(shí)HTML文檔的開(kāi)始。而</Html>標(biāo)記恰恰相反，它放在HTML文檔的最后邊，用來(lái)標(biāo)識(shí)HTML文檔的結(jié)束，兩個(gè)標(biāo)記必須一塊使用。2.Head標(biāo)記<head>和</head>構(gòu)成HTML文檔的開(kāi)頭部分，在此標(biāo)記對(duì)之間可以使用<title></title>、<script></script>等標(biāo)記對(duì)，這些標(biāo)記對(duì)都是描述HTML文檔相關(guān)信息的標(biāo)記對(duì)，<head></head>標(biāo)記對(duì)之間的內(nèi)容不會(huì)在瀏覽器的框內(nèi)顯示出來(lái)，兩個(gè)標(biāo)記必須一塊使用。3.Body標(biāo)記<body></body>是HTML文檔的主體部分，在此標(biāo)記對(duì)之間可包含<p></p>、<h1></h1>、<br></br>等眾多的標(biāo)記對(duì)，它們所定義的文本、圖像等將會(huì)在瀏覽器內(nèi)顯示出來(lái)，兩個(gè)標(biāo)記必須一塊使用。4.Title標(biāo)記使用過(guò)瀏覽器的人可能都會(huì)注意到瀏覽器窗口最上邊藍(lán)色部分顯示的文本信息，那些信息一般是網(wǎng)頁(yè)的“標(biāo)題”，要將網(wǎng)頁(yè)的標(biāo)題顯示到瀏覽器的頂部其實(shí)很簡(jiǎn)單，只要在<title></title>標(biāo)記對(duì)之間加入要顯示的文本即可。任務(wù)2了解網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)活動(dòng)3了解網(wǎng)頁(yè)組成網(wǎng)頁(yè)設(shè)計(jì)時(shí)頁(yè)面中的主要組成元素有文字、圖片及超級(jí)鏈接等項(xiàng)目，其中文字及圖片是用來(lái)表達(dá)頁(yè)面中的資料內(nèi)容。但是網(wǎng)站中當(dāng)然不可能只有一個(gè)頁(yè)面，此時(shí)“超級(jí)鏈接”就負(fù)起了各個(gè)網(wǎng)頁(yè)之間鏈接的工作。文字、圖片與超級(jí)鏈接是網(wǎng)頁(yè)的主要組成組件。網(wǎng)頁(yè)效果的技術(shù)一日千里，單純的文字及圖片已經(jīng)無(wú)法滿足設(shè)計(jì)及瀏覽者的需求，背景音樂(lè)、Animate動(dòng)畫等多媒體交互式特效是目前網(wǎng)頁(yè)設(shè)計(jì)的主流素養(yǎng)小課堂在網(wǎng)頁(yè)設(shè)計(jì)的最初階段，要結(jié)合自身對(duì)網(wǎng)頁(yè)的學(xué)習(xí)與理解去創(chuàng)造屬于自己的網(wǎng)頁(yè)內(nèi)容，網(wǎng)頁(yè)中不應(yīng)出現(xiàn)違反相關(guān)規(guī)定的文本、圖片以及視頻等等。將正能量有序的去傳播去普及。任務(wù)3掌握網(wǎng)頁(yè)布局設(shè)計(jì)與色彩活動(dòng)1掌握網(wǎng)頁(yè)布局設(shè)計(jì)設(shè)計(jì)網(wǎng)頁(yè)頁(yè)面時(shí)需要根據(jù)不同的網(wǎng)站性質(zhì)和頁(yè)面內(nèi)容選擇合適的布局形式，通過(guò)不同的頁(yè)面布局形式可以將常見(jiàn)的網(wǎng)頁(yè)分為以下幾種類型。1.“國(guó)”字型布局“國(guó)”字型：這種布局是網(wǎng)頁(yè)上使用最多的一種布局類型，是綜合性網(wǎng)站常用的版式，即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來(lái)就是網(wǎng)站的主要內(nèi)容，左右分列小條內(nèi)容，通常情況下左邊是主菜單，右面放友情鏈接等次要內(nèi)容，中間是主要內(nèi)容，與左右一起羅列到底，最底端是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種版面的優(yōu)點(diǎn)是頁(yè)面充滿、內(nèi)容豐富、信息量大；缺點(diǎn)是頁(yè)面擁擠、不夠靈活。2.拐角型布局拐角型，又稱T字型布局，這種結(jié)構(gòu)和上一種只是形式上的區(qū)別，其實(shí)是很相近的，就是網(wǎng)頁(yè)上邊和左右兩邊相結(jié)合的布局，通常右邊為主要內(nèi)容，比例較大。在實(shí)際運(yùn)用中還可以改變T布局的形式，如左右兩欄式布局，一半是正文，另一半是形象的圖像或?qū)Ш綑?。這種版面的優(yōu)點(diǎn)是頁(yè)面結(jié)構(gòu)清晰、主次分明，易于使用；缺點(diǎn)是規(guī)矩呆板，如果細(xì)節(jié)色彩上不到位，很容易讓人“看之無(wú)味”。3．框架型布局框架型布局一般分成上下或左右布局，一欄是導(dǎo)航欄目，一欄是正文信息。復(fù)雜的框架結(jié)構(gòu)可以將頁(yè)面分成許多部分，常見(jiàn)的是三欄布局。左邊一欄顯示導(dǎo)航欄，右邊顯示正文信息。4.封面型布局這種類型的頁(yè)面設(shè)計(jì)一般很精美，通常出現(xiàn)在時(shí)尚類網(wǎng)站、企業(yè)網(wǎng)站或個(gè)人網(wǎng)站的首頁(yè)，優(yōu)點(diǎn)顯而易見(jiàn)、美觀吸引人；缺點(diǎn)是速度慢。5.Html5型布局Html5型是目前非常流行的一種頁(yè)面形式，由于Html5功能的強(qiáng)大，頁(yè)面所表達(dá)的信息更加豐富，且視覺(jué)效果出眾。6.標(biāo)題正文型布局這種類型即上面是標(biāo)題，下面是正文，一些文章頁(yè)面或注冊(cè)頁(yè)面多屬于此類型。任務(wù)3掌握網(wǎng)頁(yè)布局設(shè)計(jì)與色彩活動(dòng)2掌握網(wǎng)頁(yè)色彩網(wǎng)頁(yè)色彩與人的心理感覺(jué)和情緒有一定的關(guān)系，利用這一點(diǎn)可以在設(shè)計(jì)時(shí)形成自己獨(dú)特的色彩效果，給瀏覽者留下深刻印象，加大產(chǎn)品的售出概率。不同的色系在網(wǎng)頁(yè)中也會(huì)擁有自己的獨(dú)特之處，網(wǎng)頁(yè)色彩分類主要有按照色相分類和按印象分類兩種。1.按照色相分類色彩常見(jiàn)的色彩搭配按照色相的順序歸類。每類都以該色相為主，配以其他色相或者同色相的，應(yīng)用對(duì)比和調(diào)和的方法，并按照從輕快到濃烈的順序排序。紅色配色方案橙色配色方案任務(wù)3掌握網(wǎng)頁(yè)布局設(shè)計(jì)與色彩黃色配色方案綠色配色方案藍(lán)色配色方案紫色配色方案任務(wù)3掌握網(wǎng)頁(yè)布局設(shè)計(jì)與色彩活動(dòng)2掌握網(wǎng)頁(yè)色彩網(wǎng)頁(yè)色彩與人的心理感覺(jué)和情緒有一定的關(guān)系，利用這一點(diǎn)可以在設(shè)計(jì)時(shí)形成自己獨(dú)特的色彩效果，給瀏覽者留下深刻印象，加大產(chǎn)品的售出概率。不同的色系在網(wǎng)頁(yè)中也會(huì)擁有自己的獨(dú)特之處，網(wǎng)頁(yè)色彩分類主要有按照色相分類和按印象分類兩種。2.按印象分類色彩色彩搭配看似復(fù)雜，但并不神秘。既然每種色彩在印象空間中都有自己的位置，那么色彩搭配得到的印象可以用加減法來(lái)近似估算。如果每種色彩都是高亮度的，那么它們的疊加，自然會(huì)是柔和、明亮的；如果每種色彩都是濃烈的，那么它們疊加，就會(huì)是濃烈的。當(dāng)然在實(shí)際設(shè)計(jì)過(guò)程中，設(shè)計(jì)師還要考慮到乘除法，例如同樣亮度和對(duì)比度的色彩，在色環(huán)上的角度不同，搭配起來(lái)就會(huì)得到千變?nèi)f化的感覺(jué)。因此，色彩除了按色相的搭配外，還可以將印象作為搭配分類的方法。任務(wù)3掌握網(wǎng)頁(yè)布局設(shè)計(jì)與色彩任務(wù)3掌握網(wǎng)頁(yè)布局設(shè)計(jì)與色彩任務(wù)3掌握網(wǎng)頁(yè)布局設(shè)計(jì)與色彩任務(wù)3掌握網(wǎng)頁(yè)布局設(shè)計(jì)與色彩任務(wù)3掌握網(wǎng)頁(yè)布局設(shè)計(jì)與色彩拓展知識(shí)既然是學(xué)習(xí)了網(wǎng)頁(yè)設(shè)計(jì)中的色彩了，就要對(duì)網(wǎng)頁(yè)安全色有一個(gè)初步的了解。網(wǎng)頁(yè)安全色是當(dāng)紅色、綠色、藍(lán)色色彩數(shù)字信號(hào)值為0、51、102、153、204、255時(shí)構(gòu)成的色彩組合，它一共有6×6×6=216種色彩（其中彩色為210種，非彩色為6種）。216網(wǎng)頁(yè)安全色是指在不同硬件環(huán)境、不同操作系統(tǒng)、不同瀏覽器中都能夠正常顯示的色彩集合（調(diào)色板），也就是說(shuō)，這些色彩在任何終端瀏覽用戶顯示設(shè)備上的顯示效果都是相同的。所以在網(wǎng)頁(yè)設(shè)計(jì)中使用216網(wǎng)頁(yè)安全色可以避免原有的色彩失真的問(wèn)題。

任務(wù)3掌握網(wǎng)頁(yè)布局設(shè)計(jì)與色彩活動(dòng)3掌握網(wǎng)頁(yè)中的色彩推移網(wǎng)頁(yè)頁(yè)面中采用色彩推移的方式組合色彩，這通常是構(gòu)成頁(yè)面統(tǒng)一色調(diào)的最好方法之一。色彩推移是將色彩按照一定規(guī)律有秩序地排列、組合的一種作品形式。種類有色相推移、明度推移、純度推移、互補(bǔ)推移和綜合推移等。設(shè)計(jì)師可以通過(guò)色彩推移的方法使頁(yè)面色彩看起來(lái)更加統(tǒng)一、和諧。色彩推移同樣可以運(yùn)用到局部圖像上。任務(wù)3掌握網(wǎng)頁(yè)布局設(shè)計(jì)與色彩活動(dòng)3掌握網(wǎng)頁(yè)中的色彩推移1．色相推移

色相推移是將色彩按色相環(huán)的順序，由冷到暖或由暖到冷進(jìn)行排列、組合的一種漸變形式。為了使畫面豐富多彩、變化有序，色彩可選用色相環(huán)，從一種色彩推移到另一種色彩，也可以選擇灰度色相環(huán)，從白色到黑色或從黑色到白色。2．明度推移明度推移是將色彩按明度等差級(jí)系列的順序，由淺到深或由深到淺進(jìn)行排列、組合的一種漸變形式。一般都選用單色系列組合，也可選用兩個(gè)色彩的明度系列，但也不宜擇用太多，否則易亂易花，效果適得其反。3．純度推移純度推移是將色彩按等差級(jí)數(shù)系列的順序，由鮮到灰或由灰到鮮進(jìn)行排列、組合的一種漸變形式。4．互動(dòng)推移互補(bǔ)推移是處于色相環(huán)通過(guò)圓心180度兩端位置上一對(duì)色相的純度組合推移形式。5．綜合推移綜合推移是將色彩將色相、明度、純度推移進(jìn)行綜合排列、組合的漸變形式，由于色彩三要素的同時(shí)加入，其效果要比單項(xiàng)推移復(fù)雜、豐富得多。綜合實(shí)戰(zhàn)—繪制國(guó)字型網(wǎng)頁(yè)布局草圖實(shí)戰(zhàn)訓(xùn)練求掌握在Photoshop軟件中新建網(wǎng)頁(yè)文檔的方法掌握在Photoshop軟件中繪制矩形的方法鍵入對(duì)應(yīng)文本實(shí)戰(zhàn)素材素材文件：無(wú)任務(wù)單項(xiàng)目編號(hào)1-1項(xiàng)目名稱綜合實(shí)戰(zhàn)—繪制國(guó)字型網(wǎng)頁(yè)布局草圖1學(xué)時(shí)時(shí)間地點(diǎn)目的：實(shí)踐網(wǎng)頁(yè)設(shè)計(jì)前期的布局構(gòu)圖課堂實(shí)踐：在Photoshop軟件中新建文檔、繪制矩形、鍵入文本，完成一個(gè)國(guó)字型頁(yè)面的布局?？己藰?biāo)準(zhǔn)：在Photoshop軟件中新建文檔，設(shè)置寬度與高度為1024像素*768像素。10分繪制不同色彩的矩形。10分鍵入不同區(qū)域的文字10分內(nèi)容可粘貼：評(píng)價(jià)評(píng)分：指導(dǎo)教師簽字：綜合實(shí)戰(zhàn)—繪制國(guó)字型網(wǎng)頁(yè)布局草圖實(shí)戰(zhàn)效果圖效果文件：源文件/項(xiàng)目1/綜合實(shí)戰(zhàn)—繪制“國(guó)”字型網(wǎng)頁(yè)布局草圖，如圖綜合實(shí)戰(zhàn)—吸取顏色實(shí)戰(zhàn)訓(xùn)練要求掌握使用Photoshop打開(kāi)文檔的方法掌握吸管工具的使用吸取顏色變?yōu)榍熬吧O(shè)置應(yīng)用于網(wǎng)頁(yè)的Web顏色實(shí)戰(zhàn)素材素材文件：素材/項(xiàng)目1/精油，如圖任務(wù)單項(xiàng)目編號(hào)1-2項(xiàng)目名稱綜合實(shí)戰(zhàn)—采集色彩

時(shí)間地點(diǎn)目的：實(shí)踐網(wǎng)頁(yè)設(shè)計(jì)中圖片的色彩吸取流程課堂實(shí)踐：在Photoshop中打開(kāi)素材、設(shè)置吸管工具、吸取顏色設(shè)置前景色、查看Web顏色，完成一個(gè)網(wǎng)頁(yè)圖片的顏色吸取?？己藰?biāo)準(zhǔn)：打開(kāi)網(wǎng)頁(yè)圖片。10分選擇吸管工具。10分設(shè)置前景色10分查看Web顏色10分內(nèi)容可粘貼：評(píng)價(jià)評(píng)分：指導(dǎo)教師簽字：綜合實(shí)戰(zhàn)—吸取顏色實(shí)戰(zhàn)效果圖效果文件：源文件/項(xiàng)目1/綜合實(shí)戰(zhàn)—色彩采集，如圖。

課后習(xí)題一．判斷題1.()首頁(yè)是指網(wǎng)站中的任一頁(yè)面。2.()網(wǎng)站架構(gòu)圖是網(wǎng)站內(nèi)容的組織結(jié)構(gòu)。3.()網(wǎng)頁(yè)設(shè)計(jì)時(shí)的色彩可以隨意的進(jìn)行搭配。二．填空題1..通常瀏覽者進(jìn)入網(wǎng)站時(shí)，最先看到網(wǎng)頁(yè)界面被稱為

。2.

是HTML文檔的主體部分，在此標(biāo)記對(duì)之間可包含<p></p>、<h1></h1>、<br>/br>等眾多的標(biāo)記對(duì)，它們所定義的文本、圖像等將會(huì)在瀏覽器內(nèi)顯示出來(lái)，兩個(gè)標(biāo)記必須一塊使用。三．選擇題1.()網(wǎng)頁(yè)安全色共有多少色彩？(A)256色(B)216色(C)全彩(D)65536色2.網(wǎng)頁(yè)中的色彩推移可通過(guò)以下（）方式進(jìn)行(A)色相推移(B)明度推移(C)純度推移(D)互動(dòng)推移（E）綜合推移網(wǎng)頁(yè)設(shè)計(jì)與制作——項(xiàng)目2：掌握網(wǎng)頁(yè)中圖像

的處理基礎(chǔ)Project2項(xiàng)目2職場(chǎng)情境網(wǎng)頁(yè)設(shè)計(jì)中只要涉及到圖像，幾乎就會(huì)需要對(duì)其進(jìn)行相應(yīng)的處理，無(wú)論是為保護(hù)自己圖像不被盜用，還是用到的圖像中有一些瑕疵，這些都需要進(jìn)行一下前期的加工，將其處理成在網(wǎng)頁(yè)中屬于自己風(fēng)格的特色，圖像處理是網(wǎng)頁(yè)設(shè)計(jì)中不可缺少一項(xiàng)重要內(nèi)容。為此，小艾想使用比較專業(yè)的軟件對(duì)圖像進(jìn)行處理，而同事凱程告訴她，Photoshop就是一個(gè)在圖像處理中非常專業(yè)、非常好用的軟件，在處理圖像方面可以將其分為剪裁與傾斜校正、修飾及保護(hù)自己的圖像、挽救及處理色調(diào)問(wèn)題、瑕疵圖像處理等相關(guān)操作。接下來(lái)，大家可以跟隨小艾一起走進(jìn)Photoshop的圖像處理環(huán)節(jié)。大家可以在本項(xiàng)目中了解各種處理圖像的方法，將圖像以最好的效果出現(xiàn)在我們的網(wǎng)頁(yè)中。學(xué)習(xí)目標(biāo)〓知識(shí)目標(biāo)〓掌握在網(wǎng)頁(yè)設(shè)計(jì)前為圖像進(jìn)行校正的方法。掌握為圖像添加水印保護(hù)的方法。掌握為圖像處理色調(diào)問(wèn)題的方法。掌握為瑕疵圖像進(jìn)行處理的方法?！寄苣繕?biāo)〓學(xué)會(huì)為圖像剪裁與傾斜校正的處理。學(xué)會(huì)為圖像添加水印的處理。學(xué)會(huì)為圖像進(jìn)行色調(diào)的處理。學(xué)會(huì)為圖像去掉瑕疵的處理?！刭|(zhì)目標(biāo)〓明確分工，充分了解團(tuán)結(jié)協(xié)作在工作中的重要性。用知識(shí)武裝自己，提高自身動(dòng)手操作的能力，增強(qiáng)學(xué)習(xí)的自信心。CONTENTS任務(wù)1掌握剪裁與校正圖像目錄任務(wù)2掌握添加水印保護(hù)圖像任務(wù)3掌握處理色調(diào)問(wèn)題任務(wù)4掌握處理瑕疵圖像綜合實(shí)戰(zhàn)—制作網(wǎng)頁(yè)中的老照片效果課后習(xí)題任務(wù)1掌握剪裁與校正圖像網(wǎng)頁(yè)中的圖像需要拍攝照片時(shí)，由于角度或姿勢(shì)等問(wèn)題，拍攝出的照片會(huì)出現(xiàn)傾斜效果，如果對(duì)這張照片非常喜歡，又不能重新去拍的時(shí)候，可以通過(guò)Photoshop軟件來(lái)對(duì)其進(jìn)行重新構(gòu)圖和修正。活動(dòng)1掌握裁剪圖像不同網(wǎng)頁(yè)中的圖像，可以根據(jù)布局對(duì)其進(jìn)行精細(xì)的剪裁，例如淘寶網(wǎng)店頁(yè)面中有些圖像，在一些特定的區(qū)域中都是需要固定大小的，在插入圖像之前一定要先了解該區(qū)域圖像的大小，所謂磨刀不誤砍柴工，就是在前期將圖像按照固定大小進(jìn)行創(chuàng)建或裁剪，在這個(gè)基礎(chǔ)之上再進(jìn)行視覺(jué)方面的設(shè)計(jì)，只有這樣才能真正收到事半功倍的效果。實(shí)踐經(jīng)驗(yàn)：使用裁剪工具

裁剪圖像時(shí)，設(shè)置屬性“寬度”與“高度”后，在圖像中無(wú)論創(chuàng)建的裁剪框多大，裁剪后的最終圖像大小都是一致的；矩形選框工具

按“固定大小”創(chuàng)建選區(qū)后在通過(guò)“裁剪”命令，同樣可以裁剪出固定尺寸的圖像任務(wù)1掌握剪裁與校正圖像活動(dòng)2掌握校正圖像當(dāng)找到網(wǎng)頁(yè)中需要應(yīng)用的圖像時(shí)，難免會(huì)發(fā)現(xiàn)有一些圖像會(huì)傾斜的情況出現(xiàn)，這種情況多出現(xiàn)在拍攝照片時(shí)由于角度或姿勢(shì)等問(wèn)題，會(huì)把相片拍歪，如果不想進(jìn)行重新拍攝，但是，還想繼續(xù)使用這張照片，就需要對(duì)其進(jìn)行相應(yīng)的校正，將其符合網(wǎng)頁(yè)的需要。處理前后的對(duì)比如圖。任務(wù)1掌握剪裁與校正圖像課堂實(shí)操—通過(guò)裁剪工具校正傾斜圖像對(duì)于將圖像拍歪的照片，我們通過(guò)Photoshop可以輕松將其進(jìn)行修正而不需要重新去拍攝，處理過(guò)程如下：任務(wù)1掌握剪裁與校正圖像活動(dòng)3掌握旋轉(zhuǎn)圖像當(dāng)我們使用數(shù)碼相機(jī)拍攝照片時(shí)，由于相機(jī)沒(méi)有自動(dòng)轉(zhuǎn)正功能，會(huì)使輸入到計(jì)算機(jī)中的照片由直幅變?yōu)闄M躺效果，此時(shí)將其直接上傳到網(wǎng)店中會(huì)使圖像看起來(lái)很不舒服，這會(huì)使整個(gè)網(wǎng)頁(yè)的美感會(huì)大大下降。此時(shí)即可利用Photoshop即可快速將橫幅的照片轉(zhuǎn)換成直幅效果，旋轉(zhuǎn)前后的對(duì)比如圖。任務(wù)1掌握剪裁與校正圖像課堂實(shí)操—通過(guò)旋轉(zhuǎn)命令將橫幅變直幅效果在Photoshop我們只要將橫幅的圖像通過(guò)“旋轉(zhuǎn)”命令，即可將其旋轉(zhuǎn)成直幅效果，處理過(guò)程如下：實(shí)踐經(jīng)驗(yàn)：在Photoshop中使用“變換”命令對(duì)圖像進(jìn)行旋轉(zhuǎn)時(shí)，圖像的最后顯示高度只能是原圖橫躺的高度，超出的范圍將不會(huì)被顯示，如圖任務(wù)2掌握添加水印保護(hù)圖像如果網(wǎng)頁(yè)中出現(xiàn)的照片是自己拍攝的，此時(shí)一定會(huì)考慮兩個(gè)問(wèn)題一個(gè)是如何讓瀏覽者更喜歡網(wǎng)頁(yè)中的照片；一個(gè)是不想自己辛苦拍攝并處理的照片被別人稍加篡改就可以應(yīng)用到其他網(wǎng)頁(yè)中。此時(shí)就得從版權(quán)方面考慮，一定要為圖像添加相應(yīng)的版權(quán)保護(hù)，例如加一些浮在表面的水印或者是一些圖像圖形等。活動(dòng)1掌握添加文字水印為照片添加文字水印，除了能增加其專業(yè)性和整體感外，還能保護(hù)自己的照片防止被外人盜用，添加的文字水印一般都比較淡不會(huì)影響圖像本身的觀賞性課堂實(shí)操—通過(guò)定義畫筆為圖像添加畫筆水印通常情況下網(wǎng)頁(yè)中的圖像會(huì)很多，如何快速為多個(gè)圖像添加水印就是一件很費(fèi)事的事，本次課堂實(shí)操教大家通過(guò)定義畫筆后，使用畫筆工具按照每張照片的特點(diǎn)進(jìn)行多個(gè)水印的添加。添加文字水印的具體操作如下：任務(wù)2掌握添加水印保護(hù)圖像課堂實(shí)操—通過(guò)定義畫筆為圖像添加畫筆水印任務(wù)2掌握添加水印保護(hù)圖像活動(dòng)2掌握添加圖像水印為圖像添加水印，不但可以直接輸入文本，還可以將具有相應(yīng)特征的圖像直接添加到圖像中。圖像性質(zhì)的水印可以是商標(biāo)，也可以是文字與圖形相結(jié)合的圖像，這樣做也可以防止自己辛苦得到的圖像被盜用。課堂實(shí)操—通過(guò)定義圖案添加圖像水印除了定義畫筆后為不同的圖像添加統(tǒng)一類型的畫筆水印外，還可以將制作的一個(gè)圖像定義成圖案以填充的方式來(lái)統(tǒng)一不同圖像的水印。具體操作如下：任務(wù)2掌握添加水印保護(hù)圖像課堂實(shí)操—通過(guò)定義圖案添加圖像水印任務(wù)3掌握處理色調(diào)問(wèn)題拍攝照片時(shí)并不是所有的圖像都能達(dá)到理想效果，有時(shí)會(huì)因?yàn)榄h(huán)境的問(wèn)題，拍出的照片會(huì)出現(xiàn)發(fā)暗、曝光不足、顏色不正等瑕疵，本次任務(wù)就通過(guò)課堂實(shí)操的方式為大家講解通過(guò)Photoshop校正此類問(wèn)題的方法。活動(dòng)1掌握處理偏暗曝光不足的圖像在太陽(yáng)下或光線不足的環(huán)境中拍攝相片時(shí)，如果沒(méi)有控制好相機(jī)的設(shè)定，就會(huì)拍出太亮或太暗的照片。如果是曝光不足的照片，畫面會(huì)出現(xiàn)發(fā)灰或發(fā)黑的效果，從而影響照片的質(zhì)量，要想將照片以最佳的狀態(tài)進(jìn)行儲(chǔ)存，一是在拍照時(shí)調(diào)整好光圈、角度和位置，來(lái)得到最佳效果；二是將照片拍壞后，使用Photoshop對(duì)其進(jìn)行修改，得到最佳效果。課堂實(shí)操—通過(guò)色階處理曝光不足的圖像本次實(shí)操講解曝光不足照片的補(bǔ)救方法，使用的軟件是Photoshop。具體操作如下：任務(wù)3掌握處理色調(diào)問(wèn)題課堂實(shí)操—通過(guò)色階處理曝光不足的圖像實(shí)踐經(jīng)驗(yàn)：對(duì)于初學(xué)者來(lái)說(shuō)，使用對(duì)話框有可能不太習(xí)慣，大家可以直接通過(guò)命令調(diào)整曝光不足產(chǎn)生的圖像發(fā)灰暗效果，只要執(zhí)行菜單欄中“圖像/自動(dòng)色調(diào)”命令就可以快速調(diào)整曝光不足，如圖任務(wù)3掌握處理色調(diào)問(wèn)題知識(shí)拓展在拍攝相片時(shí)由于攝影技巧的與光源的原因，拍出的照片給人的感覺(jué)會(huì)有一種層次相融合的感，不能有效地體現(xiàn)整張相片中該有的實(shí)物紋理，本課堂實(shí)操是使用Photoshop輕松調(diào)整所拍照片的層次感。

任務(wù)3掌握處理色調(diào)問(wèn)題活動(dòng)2掌握處理偏色圖像在日常生活中大家拍攝的照片在顏色方面與現(xiàn)實(shí)見(jiàn)到的不太一樣，常常會(huì)出現(xiàn)偏色問(wèn)題，以及顏色鮮艷度等問(wèn)題，如果不想重拍就得對(duì)其進(jìn)行色偏的調(diào)整。課堂實(shí)操—通過(guò)色彩平衡校正偏色圖像在使用相機(jī)拍照時(shí)由于拍攝的原因常常會(huì)出現(xiàn)一些偏色的照片，本次課堂實(shí)操就要帶領(lǐng)大家使用Photoshop輕松修正照片偏色的方法，從而還原相片的本色。具體操作如下：任務(wù)3掌握處理色調(diào)問(wèn)題活動(dòng)3掌握改變圖像的色調(diào)當(dāng)前網(wǎng)頁(yè)中的圖像尤其是電商網(wǎng)頁(yè)的商品琳瑯滿目五顏六色，要想得到此類的效果，在網(wǎng)拍商品時(shí)，由于顏色不全而會(huì)造成有的顏色產(chǎn)品沒(méi)有被拍照，這樣就無(wú)法上傳，等到商品到貨后，再拍會(huì)浪費(fèi)很多的時(shí)間，這時(shí)只要使用Photoshop中的“色相/飽和度”調(diào)整功能，就可以輕松將一種顏色變?yōu)槎喾N顏色，可以是整體調(diào)整也可以是局部調(diào)整，如圖。素養(yǎng)小課堂網(wǎng)頁(yè)中的視覺(jué)吸引，圖像部分起著至關(guān)重要作用，為了能讓所需的圖像符合當(dāng)前網(wǎng)的規(guī)格，就需要對(duì)其進(jìn)行細(xì)致調(diào)整與處理，在操作過(guò)程中要積極調(diào)動(dòng)操作能力以及對(duì)圖像的審美，要懂得把所學(xué)知識(shí)運(yùn)用到實(shí)際操作中的重要性，懂得了多學(xué)多練才是提升自身技能的最佳途徑。任務(wù)4掌握處理瑕疵圖像活動(dòng)1掌握去掉圖像中的多余雜質(zhì)在網(wǎng)頁(yè)中通常離不開(kāi)圖像的，如果單獨(dú)以文字描述作為網(wǎng)頁(yè)，會(huì)大大降低瀏覽者對(duì)該網(wǎng)頁(yè)的興趣，一張好的圖像不但可以直觀地展示該產(chǎn)品所具有的圖形信息還能從中看到其主要的特色，從而加大瀏覽者對(duì)該網(wǎng)頁(yè)的興趣，在網(wǎng)頁(yè)中拍好一張照片并不是一件容易的事情，由于環(huán)境光線、擺放角度、沒(méi)有移走的其他物品或相機(jī)中自動(dòng)添加日期都會(huì)對(duì)當(dāng)前照片起到一定的副作用，本次任務(wù)講解去掉雜質(zhì)、增強(qiáng)圖像的清晰度和為模特磨皮等相關(guān)知識(shí)。。本次課上活動(dòng)講解拍攝照片后，圖像中出現(xiàn)的污點(diǎn)、水印、日期等雜質(zhì)的去除方法。課堂實(shí)操—通過(guò)命令或工具修復(fù)圖像中的污漬圖像中出現(xiàn)的污點(diǎn)，可以通過(guò)“內(nèi)容識(shí)別”填充命令或污點(diǎn)修復(fù)畫筆工具

來(lái)快速對(duì)其進(jìn)行處理。任務(wù)4掌握處理瑕疵圖像課堂實(shí)操—通過(guò)修復(fù)畫筆工具去除圖像中的水印使用修復(fù)畫筆工具

可以對(duì)被破壞的圖像或有瑕疵的圖像進(jìn)行修復(fù)。使用該工具進(jìn)行修復(fù)時(shí)首先要進(jìn)行取樣（取樣方法為按住Alt鍵在圖像中單擊），在使用鼠標(biāo)在被修的位置上涂抹。任務(wù)4掌握處理瑕疵圖像課堂實(shí)操—通過(guò)修補(bǔ)工具清除照片中的日期用于拍攝的數(shù)碼相機(jī)，大多數(shù)會(huì)將拍攝的日期添加到照片中，如果直接使用此照片，在視覺(jué)上一定會(huì)影響美觀，使用修補(bǔ)工具

可以十分輕松地將日期清除，具體操作如下：任務(wù)4掌握處理瑕疵圖像活動(dòng)2掌握增加圖像的清晰度使用相機(jī)進(jìn)行網(wǎng)拍時(shí)，受外界環(huán)境的影響，常常會(huì)使照片效果有一種朦朧模糊的感覺(jué)，或者是拍攝照片時(shí)由于技術(shù)原因，很多照片都會(huì)變得有些模糊，看著比較模糊的圖像直接上傳到網(wǎng)頁(yè)，會(huì)大大降低網(wǎng)頁(yè)的整體觀賞度，要想改變就得對(duì)其進(jìn)行模糊變清晰的調(diào)整。課堂實(shí)操—通過(guò)濾鏡修復(fù)模糊圖像此時(shí)只要使用Photoshop進(jìn)行銳化處理便可以使將照片變得清晰一些，具體的調(diào)整方法如下：任務(wù)4掌握處理瑕疵圖像活動(dòng)3掌握美化模特的皮膚在為服裝拍攝照片時(shí)，往往會(huì)找到適合當(dāng)前服裝的模特作為拍攝的載體，但是有時(shí)會(huì)因?yàn)楣饩€或?qū)ο鄼C(jī)的不熟悉而造成模特肌膚不夠美白，從而會(huì)間接影響服裝的魅力程度，在美的服裝也要模特來(lái)襯托，漂亮的模特會(huì)大大提升服裝本身的價(jià)值，一張漂亮的模特照片可以讓網(wǎng)頁(yè)此區(qū)域的美感大大增強(qiáng)。課堂實(shí)操—通過(guò)歷史記錄畫筆對(duì)模特皮膚進(jìn)行磨皮本次課堂實(shí)操就教大家為照片中服裝模特皮膚區(qū)域進(jìn)行磨皮的方法，具體操作如下：綜合實(shí)戰(zhàn)—制作網(wǎng)頁(yè)中的老照片效果實(shí)戰(zhàn)訓(xùn)練要求為素材應(yīng)用“色階”增加對(duì)比度應(yīng)用“漸映射”調(diào)整色調(diào)設(shè)置“混合模式”為“正片疊底”并應(yīng)用“顆粒”濾鏡“畫筆工具”編輯圖層蒙版，圖層蒙版中應(yīng)用“纖維”濾鏡和“添加雜色”濾鏡創(chuàng)建“黑白”調(diào)整圖層實(shí)戰(zhàn)素材素材文件：素材/項(xiàng)目2/小朋友背影，如圖所示。

任務(wù)單項(xiàng)目編號(hào)2項(xiàng)目名稱綜合實(shí)戰(zhàn)—制作網(wǎng)頁(yè)中的老照片效果

時(shí)間地點(diǎn)目的：實(shí)踐復(fù)古網(wǎng)頁(yè)中的圖像處理，將其制作出老照片效果課堂實(shí)踐：圖像處理，打開(kāi)素材、應(yīng)用“創(chuàng)建調(diào)整圖層”、應(yīng)用濾鏡，完成一個(gè)老照片效果?？己藰?biāo)準(zhǔn)：主題明確，調(diào)整對(duì)比和色調(diào)。10分設(shè)置混合模式應(yīng)用“顆粒”濾鏡。10分創(chuàng)建圖層蒙版，使用畫筆工具編輯圖層蒙版10分圖層蒙版中應(yīng)用纖維濾鏡10分創(chuàng)建“黑白”調(diào)整圖層10分內(nèi)容可粘貼：評(píng)價(jià)評(píng)分：指導(dǎo)教師簽字：綜合實(shí)戰(zhàn)—制作網(wǎng)頁(yè)中的老照片效果實(shí)戰(zhàn)效果圖效果文件：源文件/項(xiàng)目2/綜合實(shí)戰(zhàn)—復(fù)古網(wǎng)頁(yè)中的圖像處理-制作老照片，如圖所示。

課后習(xí)題一．選擇題1.下面哪個(gè)是打開(kāi)“色階”對(duì)話框的快捷鍵？A．Ctrl+LB.Ctrl+UC.Ctrl+AD.Shift+Ctrl+L2.下面哪個(gè)是打開(kāi)“色相/飽和度”對(duì)話框的快捷鍵？A．Ctrl+LB.Ctrl+UC.Ctrl+BD.Shift+Ctrl+U二．填空題1.為圖像去色的快捷鍵是

。2.可以得到底片效果的命令是

。網(wǎng)頁(yè)設(shè)計(jì)與制作——項(xiàng)目3：掌握網(wǎng)頁(yè)中處理

圖像時(shí)的摳圖技巧Project3項(xiàng)目3職場(chǎng)情境網(wǎng)頁(yè)設(shè)計(jì)中的圖像處理環(huán)節(jié)，摳圖是一項(xiàng)不可避免的操作，無(wú)論是為單一的圖像替換背景，還是為一系列的圖像統(tǒng)一背景，這些都需要對(duì)圖像本身進(jìn)行摳圖來(lái)完成。如果是制作網(wǎng)頁(yè)中圖像的合成廣告就更少不了摳圖了。為此，小艾想使用比較專業(yè)的軟件對(duì)處理中的摳圖進(jìn)行處理，而同事凱程告訴她，Photoshop就是一個(gè)在摳圖方面具有非常專業(yè)的摳圖功能，在摳圖方面可以將其分為規(guī)則形狀摳圖、簡(jiǎn)單背景摳圖、復(fù)雜圖形摳圖、毛發(fā)摳圖和半透明圖像摳圖等操作。接下來(lái)，大家可以跟隨小艾一起走進(jìn)Photoshop的摳圖環(huán)節(jié)。大家可以在本節(jié)中了解各種摳圖方法將拍攝的圖像進(jìn)行背景替換，使圖像本身更加凸顯，在網(wǎng)頁(yè)視覺(jué)中引起買家的注意力，從而間接的增加銷量。學(xué)習(xí)目標(biāo)〓知識(shí)目標(biāo)〓掌握在制作網(wǎng)頁(yè)前為圖像摳圖的方法。掌握為人物毛發(fā)進(jìn)行摳圖的方法。掌握為半透明圖像進(jìn)行摳圖的方法?！寄苣繕?biāo)〓學(xué)會(huì)為規(guī)則圖像進(jìn)行摳圖。學(xué)會(huì)為簡(jiǎn)單背景進(jìn)行摳圖。學(xué)會(huì)為復(fù)雜圖形進(jìn)行摳圖。學(xué)會(huì)為毛發(fā)區(qū)域進(jìn)行摳圖。學(xué)會(huì)為半透明玻璃杯進(jìn)行摳圖?！刭|(zhì)目標(biāo)〓不忘初心，堅(jiān)持使命。在為圖像進(jìn)行摳圖學(xué)習(xí)中，充分了解動(dòng)手操作的重要性。CONTENTS任務(wù)1掌握規(guī)則形狀摳圖目錄任務(wù)2掌握簡(jiǎn)單背景摳圖任務(wù)3掌握復(fù)雜圖形摳圖任務(wù)4掌握毛發(fā)摳圖技巧綜合實(shí)戰(zhàn)—設(shè)計(jì)與制作運(yùn)動(dòng)網(wǎng)頁(yè)課后習(xí)題任務(wù)5掌握半透明圖像摳圖技巧任務(wù)1掌握規(guī)則形狀摳圖拍照后想將局部區(qū)域整體移動(dòng)到自己喜歡的背景中，就要掌握控圖的操作。為圖片進(jìn)行規(guī)則幾何摳圖可分為圓形與矩形。對(duì)于規(guī)則現(xiàn)狀進(jìn)行摳圖時(shí)，常用的工具就是選區(qū)工具中的矩形選框工具

和橢圓選框工具

。活動(dòng)1掌握矩形摳圖矩形摳圖首先要進(jìn)行選區(qū)的創(chuàng)建，在Photoshop中常用來(lái)創(chuàng)建矩形選區(qū)的工具有矩形選框工具

，矩形選框工具

使用方法是在圖像中按住鼠標(biāo)向?qū)峭蟿?dòng)松開(kāi)鼠標(biāo)即可創(chuàng)建選區(qū)，如圖所示，主要應(yīng)用在對(duì)圖像選區(qū)要求不太嚴(yán)格的圖像中。任務(wù)1掌握規(guī)則形狀摳圖拍照后想將局部區(qū)域整體移動(dòng)到自己喜歡的背景中，就要掌握控圖的操作。為圖片進(jìn)行規(guī)則幾何摳圖可分為圓形與矩形。對(duì)于規(guī)則現(xiàn)狀進(jìn)行摳圖時(shí)，常用的工具就是選區(qū)工具中的矩形選框工具

和橢圓選框工具

?；顒?dòng)2掌握正圓摳圖正圓摳圖首先要進(jìn)行選區(qū)的創(chuàng)建，在Photoshop中常用來(lái)創(chuàng)建正圓選區(qū)的工具有橢圓選框工具

，使用方法與矩形選框工具

類似，如圖所示。選區(qū)創(chuàng)建完畢后，將選區(qū)內(nèi)的圖像拖曳到新文檔中即可完成摳圖。任務(wù)1掌握規(guī)則形狀摳圖課堂實(shí)操—通過(guò)矩形選區(qū)替換圖片背景矩形選框工具

主要應(yīng)用在對(duì)圖片選區(qū)要求不太嚴(yán)格的矩形圖片中，如手機(jī)、pad、書(shū)籍等摳圖對(duì)象。具體的摳圖方法如下任務(wù)2掌握簡(jiǎn)單背景摳圖對(duì)于拍攝的照片進(jìn)行摳圖時(shí)，如果背景色是單色時(shí)，摳圖時(shí)可以使用魔術(shù)橡皮擦

，快速選擇工具

、對(duì)象選擇工具

和魔棒工具

，以上的四種工具可以通過(guò)智能運(yùn)算的方式進(jìn)行圖像的選取?；顒?dòng)1掌握魔術(shù)橡皮擦摳圖使用魔術(shù)橡皮擦工具

可以快速去掉圖片的背景。該工具的使用方法非常簡(jiǎn)單，只要選擇要清除的顏色范圍，單擊即可將其清除，刪除背景色后的圖片可以直接拖曳到新背景圖片中，如圖所示。任務(wù)2掌握簡(jiǎn)單背景摳圖對(duì)于拍攝的照片進(jìn)行摳圖時(shí)，如果背景色是單色時(shí)，摳圖時(shí)可以使用魔術(shù)橡皮擦

，快速選擇工具

、對(duì)象選擇工具

和魔棒工具

，以上的四種工具可以通過(guò)智能運(yùn)算的方式進(jìn)行圖像的選取。活動(dòng)2掌握快速選擇工具摳圖使用快速選擇工具

可以快速在圖像中對(duì)需要選取的部分建立選區(qū)，使用方法非常簡(jiǎn)單，只要選擇該工具后，使用指針在圖像中拖動(dòng)即可將鼠標(biāo)經(jīng)過(guò)的地方創(chuàng)建選區(qū)，選區(qū)創(chuàng)建完畢后，將選區(qū)內(nèi)的圖像拖曳到新文檔中完成摳圖，如圖所示。任務(wù)2掌握簡(jiǎn)單背景摳圖對(duì)于拍攝的照片進(jìn)行摳圖時(shí)，如果背景色是單色時(shí)，摳圖時(shí)可以使用魔術(shù)橡皮擦

，快速選擇工具

、對(duì)象選擇工具

和魔棒工具

，以上的四種工具可以通過(guò)智能運(yùn)算的方式進(jìn)行圖像的選取?；顒?dòng)3掌握對(duì)象選擇工具摳圖使用對(duì)象選擇工具

創(chuàng)建選區(qū)時(shí)，是非常方便的一個(gè)工具，在在需要選取的范圍上大致創(chuàng)建一個(gè)選取范圍，可以是矩形選區(qū)，也可以是不規(guī)則選區(qū)，松開(kāi)鼠標(biāo)后即可將需要的內(nèi)容進(jìn)行選擇，選區(qū)創(chuàng)建完畢后可以將其進(jìn)行色相的調(diào)整以此來(lái)改變色調(diào)，如圖所示。任務(wù)2掌握簡(jiǎn)單背景摳圖對(duì)于拍攝的照片進(jìn)行摳圖時(shí)，如果背景色是單色時(shí)，摳圖時(shí)可以使用魔術(shù)橡皮擦

，快速選擇工具

、對(duì)象選擇工具

和魔棒工具

，以上的四種工具可以通過(guò)智能運(yùn)算的方式進(jìn)行圖像的選取?；顒?dòng)4掌握魔術(shù)棒工具摳圖使用魔棒工具

能選取圖像中顏色相同或相近的像素，像素之間可以是相連的也可以是不連續(xù)的。通常情況下使用魔棒工具

可以快速創(chuàng)建圖像顏色相近像素的選區(qū)，創(chuàng)建選區(qū)的方法非常簡(jiǎn)單，只要在圖像中某個(gè)顏色像素上單擊，系統(tǒng)便會(huì)自動(dòng)以該選取點(diǎn)為樣本創(chuàng)建選區(qū)，反選選區(qū)后可以移動(dòng)圖像到新背景中，如圖所示。任務(wù)2掌握簡(jiǎn)單背景摳圖課堂實(shí)操—通過(guò)快速選擇工具為圖像更換背景。本次的課堂實(shí)操為快速為拍攝的羽絨服素材更換背景，將其作為網(wǎng)頁(yè)中的一個(gè)圖像廣告宣傳。具體的摳圖方法如下任務(wù)3掌握復(fù)雜圖形摳圖拍攝對(duì)象的類型不同形狀也會(huì)有所不同，對(duì)于不規(guī)整形狀的寶貝進(jìn)行摳圖時(shí)，就需要使用一些操作比較復(fù)雜的工具來(lái)完成，本小節(jié)為大家介紹一下磁性套索工具

、多邊形套索工具

和鋼筆工具

在摳圖時(shí)的使用方法活動(dòng)1掌握多邊形套索工具摳圖多邊形套索工具

通常用來(lái)創(chuàng)建較為精確的選區(qū)。創(chuàng)建選區(qū)的方法也非常簡(jiǎn)單，在不同位置上單擊鼠標(biāo)，即可將兩點(diǎn)以直線的形式連接，起點(diǎn)與終點(diǎn)相交時(shí)單擊即可得到選區(qū)，如圖所示。實(shí)踐經(jīng)驗(yàn)：使用多邊形套索工具

繪制選區(qū)時(shí)，按住“Shift”鍵可沿水平、垂直或與之呈45°角的方向繪制選區(qū)；在終點(diǎn)沒(méi)有與起始點(diǎn)重疊時(shí)，雙擊鼠標(biāo)或按住“Ctrl”鍵的同時(shí)單擊鼠標(biāo)即可創(chuàng)建封閉選區(qū)。任務(wù)3掌握復(fù)雜圖形摳圖拍攝對(duì)象的類型不同形狀也會(huì)有所不同，對(duì)于不規(guī)整形狀的寶貝進(jìn)行摳圖時(shí)，就需要使用一些操作比較復(fù)雜的工具來(lái)完成，本小節(jié)為大家介紹一下磁性套索工具

、多邊形套索工具

和鋼筆工具

在摳圖時(shí)的使用方法活動(dòng)2掌握磁性套索工具摳圖磁性套索工具

可以在圖像中自動(dòng)捕捉具有反差顏色的圖像邊緣，并以此來(lái)創(chuàng)建選區(qū)，此工具常用在背景復(fù)雜但邊緣對(duì)比度較強(qiáng)烈的圖像中。創(chuàng)建選區(qū)的方法也非常簡(jiǎn)單，在圖像中選擇起點(diǎn)后沿邊緣拖動(dòng)即可自動(dòng)創(chuàng)建選區(qū)，如圖所示。實(shí)踐經(jīng)驗(yàn)：使用磁性套索工具

創(chuàng)建選區(qū)時(shí)，單擊鼠標(biāo)也可以創(chuàng)建矩形標(biāo)記點(diǎn)，用來(lái)確定精確的選區(qū)；按鍵盤上的“Delete”鍵或“Backspace”鍵，可按照順序撤銷矩形標(biāo)記點(diǎn)；按“Esc”鍵可消除未完成的選區(qū)。任務(wù)3掌握復(fù)雜圖形摳圖課堂實(shí)操—通過(guò)磁性套索工具與多邊形套索工具結(jié)合為圖像摳圖本節(jié)為大家講解使用多邊形套索工具

和磁性套索工具

相結(jié)合的方法對(duì)產(chǎn)品進(jìn)行創(chuàng)建選區(qū)并摳圖，由于本節(jié)主要為大家講解這兩個(gè)工具相配合使用進(jìn)行摳圖，所以為大家選取了一個(gè)音響素材作為操作對(duì)象，將其摳圖后作為網(wǎng)頁(yè)中的一個(gè)廣告圖像，具體操作過(guò)程如下。任務(wù)3掌握復(fù)雜圖形摳圖拍攝對(duì)象的類型不同形狀也會(huì)有所不同，對(duì)于不規(guī)整形狀的寶貝進(jìn)行摳圖時(shí)，就需要使用一些操作比較復(fù)雜的工具來(lái)完成，本小節(jié)為大家介紹一下磁性套索工具

、多邊形套索工具

和鋼筆工具

在摳圖時(shí)的使用方法活動(dòng)3掌握鋼筆工具摳圖使用鋼筆工具

可以精確地繪制出直線或光滑的曲線，還可以創(chuàng)建形狀圖層。該工具的使用方法也非常簡(jiǎn)單。只要在頁(yè)面中選擇一個(gè)點(diǎn)單擊，再移動(dòng)到下一點(diǎn)單擊，就會(huì)創(chuàng)建直線路徑；在下一點(diǎn)按下鼠標(biāo)并拖動(dòng)會(huì)創(chuàng)建曲線路徑，按”Enter”鍵繪制的路徑會(huì)形成不封閉的路徑；在繪制路徑的過(guò)程中，當(dāng)起始點(diǎn)的錨點(diǎn)與終點(diǎn)的錨點(diǎn)相交時(shí)，此時(shí)單擊鼠標(biāo)，系統(tǒng)會(huì)將該路徑創(chuàng)建成封閉路徑1創(chuàng)建路徑任務(wù)3掌握復(fù)雜圖形摳圖拍攝對(duì)象的類型不同形狀也會(huì)有所不同，對(duì)于不規(guī)整形狀的寶貝進(jìn)行摳圖時(shí)，就需要使用一些操作比較復(fù)雜的工具來(lái)完成，本小節(jié)為大家介紹一下磁性套索工具

、多邊形套索工具

和鋼筆工具

在摳圖時(shí)的使用方法活動(dòng)3掌握鋼筆工具摳圖2路徑轉(zhuǎn)換為選區(qū)任務(wù)3掌握復(fù)雜圖形摳圖本節(jié)為大家講解使用鋼筆工具

為復(fù)雜的女鞋進(jìn)行摳圖，在摳圖的過(guò)程中主要了解鋼筆工具

在實(shí)際操作中的使用以及技巧。具體的操作過(guò)程如下：課堂實(shí)操—通過(guò)鋼筆工具為女鞋摳圖換背景素養(yǎng)小課堂在為網(wǎng)頁(yè)圖像進(jìn)行摳圖處理中，要積極調(diào)動(dòng)我們自己的動(dòng)手操作能力，在實(shí)際操作中懂得了把所學(xué)知識(shí)會(huì)運(yùn)用到操作中的重要性，懂得了多學(xué)多練才是提升自身技能的最好途徑，在學(xué)習(xí)中還要時(shí)刻灌輸愛(ài)國(guó)、強(qiáng)國(guó)在生活中的重要性。懂得了少年強(qiáng)、則中國(guó)強(qiáng)的道理。以此來(lái)弘揚(yáng)中華優(yōu)秀傳統(tǒng)文化，發(fā)揚(yáng)愛(ài)國(guó)精神。任務(wù)4掌握毛發(fā)摳圖技巧拍攝有模特或動(dòng)物參與的圖片時(shí)，摳圖時(shí)會(huì)遇到人物的發(fā)絲或動(dòng)物的毛發(fā)區(qū)域，如果使用多邊形套索工具

或鋼筆工具

進(jìn)行摳圖時(shí)，會(huì)發(fā)現(xiàn)頭發(fā)區(qū)域會(huì)出現(xiàn)背景摳不干凈的效果，如圖所示課堂實(shí)操—通過(guò)選擇并遮住為卷發(fā)模特?fù)笀D選區(qū)創(chuàng)建完畢后，可以通過(guò)“選擇并遮住”命令，修整發(fā)絲處的背景，具體的操作如下：任務(wù)5掌握半透明圖像摳圖技巧在Photoshop中，對(duì)半透明對(duì)象進(jìn)行摳圖，可以在“通道”面板中完成。使用“通道”進(jìn)行摳圖時(shí)，通常需要應(yīng)用一些工具結(jié)合“通道”面板進(jìn)行操作。在操作完畢之后，必須要把編輯的通道轉(zhuǎn)換為選區(qū)，再通過(guò)移動(dòng)工具

將選區(qū)內(nèi)的圖片拖動(dòng)到新背景中完成摳圖，對(duì)通道進(jìn)行編輯時(shí)主要使用畫筆工具

，通道中黑色部分為保護(hù)區(qū)域，白色區(qū)域?yàn)榭删庉嫷奈恢?，灰色區(qū)域?qū)?huì)創(chuàng)建半透明效果，如圖所示涂抹顏色彩色通道顯示狀態(tài)載入選區(qū)黑色添加通道覆蓋區(qū)域添加到選區(qū)白色從通道中減去從選區(qū)中減去灰色創(chuàng)建半透明效果產(chǎn)生的選區(qū)為半透明任務(wù)5掌握半透明圖像摳圖技巧課堂實(shí)操—通過(guò)通道為透明玻璃酒瓶摳圖本節(jié)為大家講解使用鋼筆工具

為酒瓶創(chuàng)建路徑，再在“通道”中為酒瓶玻璃部分進(jìn)行半透明摳圖。具體的操作過(guò)程如下：綜合實(shí)戰(zhàn)—設(shè)計(jì)與制作運(yùn)動(dòng)網(wǎng)頁(yè)實(shí)戰(zhàn)訓(xùn)練要求掌握新建網(wǎng)頁(yè)文檔的大小掌握漸變具填充漸變色將其作為背景對(duì)提供的素材進(jìn)行精細(xì)的摳圖掌握繪制自定義形狀圖形鍵入文字并進(jìn)行左對(duì)齊排版實(shí)戰(zhàn)素材素材文件：素材/項(xiàng)目3/跳高、打籃球、運(yùn)動(dòng)小人，如圖3所示。

項(xiàng)目編號(hào)3項(xiàng)目名稱綜合實(shí)戰(zhàn)—設(shè)計(jì)與制作運(yùn)動(dòng)網(wǎng)頁(yè)時(shí)間地點(diǎn)目的：實(shí)踐網(wǎng)頁(yè)設(shè)計(jì)與制作的一般流程課堂實(shí)踐：運(yùn)動(dòng)主題，新建、打開(kāi)、摳圖可以通過(guò)多種方法進(jìn)行摳圖、設(shè)計(jì)與制作，完成一個(gè)運(yùn)動(dòng)網(wǎng)頁(yè)首頁(yè)。考核標(biāo)準(zhǔn)：主題明確，結(jié)構(gòu)清晰，符合網(wǎng)頁(yè)要求。10分色彩線條搭配和諧。10分圖片摳圖細(xì)致不要有毛邊10分文字與圖片版式設(shè)置平衡10分整體效果呈現(xiàn)得體10分內(nèi)容可粘貼：評(píng)價(jià)評(píng)分：指導(dǎo)教師簽字：任務(wù)單綜合實(shí)戰(zhàn)—設(shè)計(jì)與制作運(yùn)動(dòng)網(wǎng)頁(yè)實(shí)戰(zhàn)效果圖效果文件：源文件/項(xiàng)目3/綜合實(shí)戰(zhàn)—設(shè)計(jì)與制作運(yùn)動(dòng)網(wǎng)頁(yè)，如圖所示。課后習(xí)題一．填空題使用磁性套索工具

創(chuàng)建選區(qū)時(shí)，單擊鼠標(biāo)也可以創(chuàng)建矩形標(biāo)記點(diǎn)，用來(lái)確定精確的選區(qū)；按鍵盤上的

鍵或Backspace鍵，可按照順序撤銷矩形標(biāo)記點(diǎn)；按Esc鍵可消除未完成的選區(qū)。磁性套索工具

進(jìn)行摳圖時(shí)，按住

鍵后，會(huì)將磁性套索工具

變?yōu)槎噙呅翁姿鞴ぞ?/p>

。通過(guò)矩形選框工具或橢圓選框工具創(chuàng)建選區(qū)后摳圖，如果不進(jìn)行羽化設(shè)置，會(huì)出現(xiàn)圖像邊緣與背景融合不協(xié)調(diào)的后果，羽化設(shè)置得

或

都會(huì)出現(xiàn)不自然的效果。

二．選擇題1.為毛發(fā)摳圖時(shí)，可以使用下面那個(gè)命令。A．選擇并遮住B.色相/飽和度C.反選選區(qū)D.羽化2.為不規(guī)則圖像進(jìn)行摳圖時(shí)，下面那個(gè)工具會(huì)將邊緣扣取的非常平滑。A．矩形選框工具B.套索工具C.鋼筆工具D.魔術(shù)棒工具網(wǎng)頁(yè)設(shè)計(jì)與制作——項(xiàng)目4：了解文字與圖層Project4項(xiàng)目4職場(chǎng)情境網(wǎng)頁(yè)設(shè)計(jì)中離不開(kāi)文字和圖像，在Photoshop中只要應(yīng)用這兩項(xiàng)內(nèi)容就會(huì)用到圖層，通過(guò)圖層可以對(duì)文本和圖像有一個(gè)更好的管理和編輯，這兩項(xiàng)內(nèi)容也是要認(rèn)真學(xué)習(xí)的。為此，小艾想對(duì)圖層和文字有個(gè)更好的學(xué)習(xí)方向，而同事凱程則告訴她，Photoshop這個(gè)軟件就可以對(duì)她的要求做出全面的解決，只要認(rèn)真的對(duì)軟件中的文字和圖層進(jìn)行了解，就能對(duì)她的工作和學(xué)習(xí)起到非常大幫助，Photoshop不但能鍵入文字，還能對(duì)文字進(jìn)行非常專業(yè)編輯和排版，結(jié)合圖層的運(yùn)用能夠更好的在網(wǎng)頁(yè)中發(fā)揮作用。接下來(lái)，大家可以跟隨小艾一起走進(jìn)Photoshop的文字與圖層環(huán)節(jié)。大家可以在本節(jié)中了解各種文字與圖層的使用和編輯方法，做好網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)工作部分，處理好的圖像加上文字的點(diǎn)綴和說(shuō)明，能讓網(wǎng)頁(yè)更加具有視覺(jué)沖擊力，更能發(fā)揮網(wǎng)頁(yè)的功能。學(xué)習(xí)目標(biāo)〓知識(shí)目標(biāo)〓掌握在Photoshop中文字的創(chuàng)建與編輯的方法。掌握在Photoshop中認(rèn)識(shí)圖層與編輯圖層的方法。掌握智能對(duì)象與圖層樣式的編輯方法。掌握?qǐng)D層蒙版與操控變形的編輯方法?！寄苣繕?biāo)〓學(xué)會(huì)文字的鍵入。學(xué)會(huì)編輯文本。學(xué)會(huì)圖層的運(yùn)用。學(xué)會(huì)圖層蒙版的編輯。學(xué)會(huì)智能對(duì)象的應(yīng)用?！刭|(zhì)目標(biāo)〓充分運(yùn)用文字，展現(xiàn)正能量對(duì)人生觀的引導(dǎo)。在學(xué)習(xí)實(shí)踐中培養(yǎng)邊學(xué)邊練的習(xí)慣，提升動(dòng)手操作能力。CONTENTS任務(wù)1了解創(chuàng)建文字的工具目錄任務(wù)2掌握文字的編輯任務(wù)3掌握段落文字任務(wù)4認(rèn)識(shí)圖層任務(wù)7掌握操控變形課后習(xí)題任務(wù)5掌握智能對(duì)象任務(wù)6掌握?qǐng)D層蒙版綜合實(shí)戰(zhàn)—設(shè)計(jì)與制作加濕器宣傳網(wǎng)頁(yè)任務(wù)1了解創(chuàng)建文字的工具文字的主要功能是在視覺(jué)傳達(dá)中向大眾傳達(dá)作者的意圖和各種信息，要達(dá)到這一目的必須考慮文字的整體訴求效果，給人以清晰的視覺(jué)印象。因此，設(shè)計(jì)中的文字應(yīng)避免繁雜零亂，使人易認(rèn)，易懂，切忌為了設(shè)計(jì)而設(shè)計(jì)，忘記了文字設(shè)計(jì)的根本目的是為了更好，更有效的傳達(dá)作者的意圖，表達(dá)設(shè)計(jì)的主題和構(gòu)想意念，在Photoshop中能夠直接創(chuàng)建文字工具只有橫排文字工具

和直排文字工具

。在文檔中輸入文字后，系統(tǒng)會(huì)自動(dòng)在“圖層”面板中創(chuàng)建一個(gè)文字圖層?；顒?dòng)1了解橫排文字工具橫排文字工具

的使用方法非常簡(jiǎn)單，只要在“工具箱”中選擇橫排文字工具

，之后再拖動(dòng)光標(biāo)到到畫面中找到要輸入文字的地方，單擊鼠標(biāo)會(huì)出現(xiàn)圖標(biāo)，此時(shí)輸入所需要的文字即可，輸入方法如圖所示。任務(wù)1了解創(chuàng)建文字的工具使用橫排文字工具

鍵入文字后，屬性欄會(huì)變成該工具對(duì)應(yīng)的選項(xiàng)設(shè)置，如圖所示。任務(wù)1了解創(chuàng)建文字的工具活動(dòng)2了解直排文字的鍵入在Photoshop中使用直排文字工具

可以在垂直方向上鍵入豎排文字，該工具的使用方法與橫排文字工具

相同，就是屬性欄也是一模一樣的，具體輸入方法如圖所示。任務(wù)2掌握文字的編輯活動(dòng)1掌握對(duì)已建文本的基礎(chǔ)編輯屬性欄中針對(duì)文字的設(shè)置，已經(jīng)講過(guò)了，本次任務(wù)主要講解在“字符”面板中關(guān)于文字的一些基本編輯。在Photoshop中編輯文字指的是對(duì)已經(jīng)創(chuàng)建的文字，通過(guò)“屬性欄”、“字符”面板、“段落”面板或“文字”菜單進(jìn)行重新的設(shè)置，例如設(shè)置文字行距、文字縮放、基線偏移以及對(duì)文字的變形等等。任務(wù)2掌握文字的編輯比例間距比例間距是按指定的百分比值減少字符周圍的空間。數(shù)值越大，字符間壓縮越緊密。取值范圍是0%～100%之間。輸入文字后，在“字符”面板中單擊設(shè)置所選字符的比例間距右邊的下拉列表，在其中選擇比例間距為90%，此時(shí)字符間將會(huì)縮緊。字符間距字符間距指的是放寬或收緊字符之間的距離。鍵入文字后在“字符”面板中分別選擇-100和200，得到如圖所示的效果。字距微調(diào)字距微調(diào)是增加或減少特定字符對(duì)之間的間距的過(guò)程。在“字距微調(diào)”下拉列表中包含三個(gè)選項(xiàng)：度量標(biāo)準(zhǔn)、視覺(jué)和0。輸入文字后，分別選擇不同選項(xiàng)后會(huì)得到如圖所示的效果。任務(wù)2掌握文字的編輯水平縮放與垂直縮放垂直縮放水平縮放與垂直縮放用來(lái)對(duì)輸入文字的垂直或水平方向上的縮放，設(shè)置垂直與水平縮放為300%，得到如圖所示的效果?；€偏移基線偏移可以使選中的字符相對(duì)于基線進(jìn)行提升或下降。輸入文字后，選擇其中的一個(gè)文字，設(shè)置基線偏移為10和－10，得到如圖所示的效果.。。文字行距文字行距指的是文字基線與下一行基線之間的垂直距離。輸入文字后，在“字符”面板中設(shè)置行距文本框中輸入相應(yīng)的數(shù)值會(huì)使垂直文字之間的距離發(fā)生改變，如圖所示。任務(wù)2掌握文字的編輯字符樣式字符樣式指的是對(duì)輸入字符的顯示狀態(tài)，單擊不同按鈕會(huì)完成所選字符的樣式效果，包括仿粗體、斜體、全部大寫字母、小型大寫字母、上標(biāo)、下標(biāo)、下畫線和刪除線。如圖所示的圖像分別為原圖和應(yīng)用斜體、上標(biāo)和下畫線后的效果。。任務(wù)2掌握文字的編輯活動(dòng)2掌握文字變形在Photoshop中通過(guò)“文字變形”命令可以對(duì)輸入的文字進(jìn)行更加藝術(shù)化的變形，使文字更加具有觀賞感，變形后的文字仍然具有文字所具有的共性?！拔淖肿冃巍泵羁梢酝ㄟ^(guò)在鍵入文字后直接單擊“文字變形”按鈕

來(lái)執(zhí)行，或者執(zhí)行菜單欄中的“圖層/文字/文字變形”命令來(lái)打開(kāi)“變形文字”對(duì)話框，如圖所示。鍵入文字后，分別對(duì)鍵入的文字應(yīng)用扇形與扭轉(zhuǎn)，并勾選“水平”單選框，設(shè)置“彎曲”為50%、“水平扭曲”和“垂直扭曲”為0%，會(huì)得到如圖所示的效果。任務(wù)3掌握段落文字在Photoshop中使用文字工具不但可以創(chuàng)建點(diǎn)文字，還可以創(chuàng)建大段的段落文本，在創(chuàng)建段落文字時(shí)，文字基于定界框的尺寸自動(dòng)換行。。課堂實(shí)操—通過(guò)文字工具創(chuàng)建段落文本按住“Alt”鍵在頁(yè)面中拖動(dòng)或者單擊鼠標(biāo)會(huì)出現(xiàn)如圖所示的“段落文字大小”對(duì)話框，設(shè)置“高度”與“寬度”后，單擊“確定”按鈕，可以設(shè)置更為精確的文字定界框任務(wù)4認(rèn)識(shí)圖層對(duì)圖層進(jìn)行操作可以說(shuō)是Photoshop中使用最為頻繁的一項(xiàng)工作。通過(guò)建立圖層，然后在各個(gè)圖層中分別編輯圖像中的各個(gè)元素，可以產(chǎn)生既富有層次，又彼此關(guān)聯(lián)的整體圖像效果。所以在編輯圖像的同時(shí)圖層是必不可缺的?；顒?dòng)1認(rèn)識(shí)圖層的原理圖層與圖層之間并不等于完全的白紙與白紙的重合，圖層的工作原理類似于在印刷上使用的一張張重疊在一起的醋酸纖紙，透過(guò)圖層中透明或半透明區(qū)域，可以看到下一圖層相應(yīng)區(qū)域的內(nèi)容，如圖所示。任務(wù)4認(rèn)識(shí)圖層活動(dòng)2認(rèn)識(shí)圖層面板每一個(gè)圖層都是由許多像素組成的，而圖層又通過(guò)上下疊加的方式來(lái)組成整個(gè)圖像。打個(gè)比喻，每一個(gè)圖層就好似是一個(gè)透明的“玻璃”，而圖層內(nèi)容就畫在這些“玻璃”上，如果“玻璃”什么都沒(méi)有，這就是個(gè)完全透明的空?qǐng)D層，當(dāng)各“玻璃”都有圖像時(shí)，自上而下俯視所有圖層，從而形成圖像顯示效果，對(duì)圖層的編輯可以通過(guò)菜單或面板來(lái)完成。“圖層”被存放在“圖層”面板中，其中包含當(dāng)前圖層、文字圖層、背景圖層、智能對(duì)象圖層等。執(zhí)行菜單欄中的“窗口/圖層”命令，即可打開(kāi)“圖層”面板，“圖層”面板中所包含的內(nèi)容如圖所示。任務(wù)4認(rèn)識(shí)圖層拓展知識(shí)圖層樣式指的是在圖層中添加樣式效果，從而為圖層添加投影、外發(fā)光、內(nèi)發(fā)光斜面與浮雕等。用于各個(gè)圖層樣式的使用方法與設(shè)置過(guò)程大體相同，本次任務(wù)主要講解“投影”對(duì)話框的中各選項(xiàng)的作用，使用“投影”命令可以為當(dāng)前圖層中的圖像添加陰影效果。執(zhí)行菜單欄中的“圖層/圖層樣式/投影”命令，即可打開(kāi)如圖1所示的“投影”對(duì)話框。其中的各項(xiàng)含義如下：

混合模式：用來(lái)設(shè)置在圖層中的添加投影混合效果。

顏色：用來(lái)設(shè)置投影的顏色。

不透明度：設(shè)置投影的透明程度。

角度：用來(lái)設(shè)置光源照射下投影的方向，可以在文本框中輸入文字或直接拖動(dòng)角度控制桿。

使用全局光：勾選該復(fù)選框后，在圖層中的所有樣式都使用一個(gè)方向的光源。

距離：用來(lái)設(shè)置投影與圖像之間的距離。

擴(kuò)展：用來(lái)設(shè)置陰影邊緣的細(xì)節(jié)，數(shù)值越大投影越清晰；數(shù)值越小投影越模糊。

大小：用來(lái)設(shè)置陰影的模糊范圍，數(shù)值越大，范圍越廣，投影越模糊；數(shù)值越小，投影越清晰。

等高線：用來(lái)控制投影的外觀現(xiàn)狀。單擊等高線圖標(biāo)右面的倒三角形會(huì)彈出“等高線”下拉列表，在其中可以選擇相應(yīng)投影外光。消除鋸齒：勾選此復(fù)選框，可以消除投影的鋸齒，增加投影效果的平滑度。

雜色：用來(lái)添加投影雜色，數(shù)值越大，雜色越多。設(shè)置相應(yīng)的參數(shù)后，單擊“確定”按鈕，即可為圖層添加投影效果。任務(wù)4認(rèn)識(shí)圖層課堂實(shí)操—通過(guò)添加圖層樣式制作下載按鈕。本次課堂實(shí)操為大家講解一下通過(guò)添加不同圖層樣式制作下載按鈕的方法，具體操作如下：投影、內(nèi)陰影、內(nèi)發(fā)光、斜面和浮雕、圖案疊加任務(wù)5掌握智能對(duì)象將圖像轉(zhuǎn)換成智能對(duì)象后，將圖像縮小，再?gòu)?fù)原到原來(lái)大小后，圖像的像素不會(huì)丟失，智能對(duì)象還支持多層嵌套功能和應(yīng)用濾鏡并將應(yīng)用的濾鏡顯示在智能對(duì)象圖層的下方。執(zhí)行菜單欄中的“圖層/智能對(duì)象/轉(zhuǎn)換為智能對(duì)象”命令，可以將圖層中的單個(gè)圖層、多個(gè)圖層轉(zhuǎn)換成一個(gè)智能對(duì)象或?qū)⑦x取的普通圖層與智能對(duì)象圖層轉(zhuǎn)換成一個(gè)智能對(duì)象。轉(zhuǎn)換成智能對(duì)象后，圖層縮略圖會(huì)出現(xiàn)一個(gè)表示智能對(duì)象的圖標(biāo)，如圖所示。任務(wù)5掌握智能對(duì)象編輯智能對(duì)象可以對(duì)智能對(duì)象的源文件進(jìn)行編輯，修改并儲(chǔ)存源文件后，對(duì)應(yīng)的智能對(duì)象會(huì)隨之改變。具體的操作過(guò)程如下：課堂實(shí)操—通過(guò)調(diào)整色調(diào)編輯智能對(duì)象素養(yǎng)小課堂在對(duì)文字與圖層的了解后，知道文字在網(wǎng)頁(yè)設(shè)計(jì)中的重要性，文字除了在網(wǎng)頁(yè)中的美觀輔助外，還能通過(guò)文字的信息表達(dá)出該網(wǎng)頁(yè)區(qū)域的功能和特色，用文字來(lái)體現(xiàn)正能量是非常直觀入心的，弘揚(yáng)愛(ài)國(guó)精神也是最直接的，簡(jiǎn)練的文字可以體現(xiàn)出愛(ài)國(guó)、敬業(yè)、誠(chéng)信、友善等多方面的內(nèi)容。學(xué)好運(yùn)用文字和圖層，可以大大減輕網(wǎng)頁(yè)設(shè)計(jì)時(shí)的多項(xiàng)任務(wù)。

任務(wù)6掌握?qǐng)D層蒙版圖層蒙版可以理解為在當(dāng)前圖層上面覆蓋一層玻璃片，這種玻璃片有：透明和黑色不透明兩種，前者顯示全部，后者隱藏部分。然后用各種繪圖工具在蒙版上（既玻璃片上）涂色（只能涂黑、白、灰色），涂黑色的地方蒙版變?yōu)椴煌该鳎床灰?jiàn)當(dāng)前圖層的圖像，涂白色則使涂色部分變?yōu)橥该骺煽吹疆?dāng)前圖層上的圖像，涂灰色使蒙版變?yōu)榘胪该鳎该鞯某潭扔赏可纳顪\決定。圖層蒙版可以用來(lái)在圖層與圖層之間創(chuàng)建無(wú)縫的合成圖像，并且對(duì)圖層中的圖像不造成破壞。課堂實(shí)操—通過(guò)添加圖層蒙版后運(yùn)用畫筆摳圖為圖層添加圖層蒙版后，圖層中的圖像不會(huì)遭到破壞，本次課堂實(shí)操為大家講解在蒙版中使用畫筆進(jìn)行摳圖的方法，具體的操作如下：任務(wù)6掌握?qǐng)D層蒙版任務(wù)6掌握?qǐng)D層蒙版課堂實(shí)操—通過(guò)圖層樣式和蒙版制作網(wǎng)頁(yè)導(dǎo)航本次課堂實(shí)操為大家講解，在圖層中添加圖層樣式、添加圖層蒙版并進(jìn)行漸變編輯，制作出水晶風(fēng)格的網(wǎng)頁(yè)導(dǎo)航欄，具體的操作如下：任務(wù)7掌握操控變形該功能能夠通過(guò)添加的顯示網(wǎng)格和圖釘對(duì)圖層中的圖像進(jìn)行變形，從而使僵化的變換變得更加具有柔性，使變換后的圖像更符合創(chuàng)作者的要求，變換后的效果如圖所示。在圖像中選擇圖層后，執(zhí)行菜單欄中的“編輯/操控變形”命令，此時(shí)系統(tǒng)會(huì)自動(dòng)為圖像添加上網(wǎng)格進(jìn)行顯示，并將屬性欄變?yōu)椴倏刈冃螘r(shí)對(duì)應(yīng)的效果，如圖所示。任務(wù)7掌握操控變形其中的各項(xiàng)含義如下：

模式：用來(lái)設(shè)置變形時(shí)的樣式。正常：默認(rèn)剛性。剛性：更剛性的變形。扭曲：適用于校正變形。密度：用來(lái)設(shè)置網(wǎng)格顯示的密度以控制變形的品質(zhì)。擴(kuò)展：用來(lái)擴(kuò)展與收縮變換區(qū)域。顯示網(wǎng)格：在變換時(shí)顯示網(wǎng)格。圖釘深度：用來(lái)控制圖釘所處的層次，用以分辨多個(gè)圖釘?shù)捻樞?。旋轉(zhuǎn)：控制圖釘旋轉(zhuǎn)角度。任務(wù)7掌握操控變形課堂實(shí)操—通過(guò)操控變形將人物腿部拉長(zhǎng)本節(jié)為大家講解通過(guò)“操控變形”命令為素材中的人物制作大長(zhǎng)腿效果。具體的操作過(guò)程如下：綜合實(shí)戰(zhàn)—設(shè)計(jì)與制作加濕器宣傳網(wǎng)頁(yè)實(shí)戰(zhàn)訓(xùn)練要求掌握新文檔使用漸變工具填充漸變色將其作為背景對(duì)提供的素材進(jìn)行精細(xì)的摳圖掌握調(diào)整大小設(shè)置混合模式合成圖像鍵入文字并進(jìn)行排版繪制圓角矩形設(shè)置描邊調(diào)整不透明度實(shí)戰(zhàn)素材素材文件：素材/項(xiàng)目4/加濕器2、樓群、影，如圖所示項(xiàng)目編號(hào)4項(xiàng)目名稱綜合實(shí)戰(zhàn)—設(shè)計(jì)與制作加濕器宣傳網(wǎng)頁(yè)

時(shí)間地點(diǎn)目的：實(shí)踐網(wǎng)頁(yè)設(shè)計(jì)與制作的一般流程課堂實(shí)踐：電商主題，新建、打開(kāi)、摳圖、設(shè)置混合模式、設(shè)計(jì)并制作完成一個(gè)電商宣傳網(wǎng)頁(yè)?？己藰?biāo)準(zhǔn)：主題明確，結(jié)構(gòu)清晰，符合網(wǎng)頁(yè)要求。10分色彩線條搭配和諧。10分圖片摳圖細(xì)致不要有毛邊10分文字與圖片版式設(shè)置平衡10分整體效果呈現(xiàn)得體10分內(nèi)容可粘貼：評(píng)價(jià)評(píng)分：指導(dǎo)教師簽字：任務(wù)單綜合實(shí)戰(zhàn)—設(shè)計(jì)與制作加濕器宣傳網(wǎng)頁(yè)實(shí)戰(zhàn)效果圖效果文件：源文件/項(xiàng)目4/綜合實(shí)戰(zhàn)—設(shè)計(jì)與制作加濕器宣傳網(wǎng)頁(yè)，如圖所示。

課后習(xí)題一．選擇題1.按哪個(gè)快捷鍵可以通過(guò)復(fù)制新建一個(gè)圖層？A．Ctrl+LB.Ctrl+CC.Ctrl+JD.Shift+Ctrl+X2.填充圖層和調(diào)整圖層具有以下哪兩種相同選項(xiàng)？A．不透明度B.混合模式C.圖層樣式D.顏色3.下面哪幾個(gè)功能不能應(yīng)用于智能對(duì)象？A.繪畫工具B.濾鏡C.圖層樣式D.填充顏色4.以下哪幾個(gè)功能可以將文字圖層轉(zhuǎn)換成普通圖層？A.柵格化/文字B.柵格化文字圖層C.柵格化/圖層D.柵格化/所有圖層二．填空題1.在Photoshop中使用

可以在水平方向上鍵入橫排文字。2.執(zhí)行菜單欄中的“圖層/智能對(duì)象/

”命令，可以將圖層中的單個(gè)圖層、多個(gè)圖層轉(zhuǎn)換成一個(gè)智能對(duì)象或?qū)⑦x取的普通圖層與智能對(duì)象圖層轉(zhuǎn)換成一個(gè)智能對(duì)象。網(wǎng)頁(yè)設(shè)計(jì)與制作——項(xiàng)目5：掌握切片與

網(wǎng)頁(yè)圖像Project5項(xiàng)目5職場(chǎng)情境如果網(wǎng)頁(yè)上的圖像較大，瀏覽器下載整個(gè)圖像需要花很長(zhǎng)的時(shí)間。切片就是將一幅大圖像分割為一些小的圖像切片，然后在網(wǎng)頁(yè)中通過(guò)沒(méi)有間距和寬度的表格重新將這些小的圖像沒(méi)有縫隙的拼接起來(lái)，成為一幅完整的圖像。這樣做可以減小圖像的大小，減少網(wǎng)頁(yè)的下載時(shí)間，還能將圖像的一些區(qū)域用HTML來(lái)代替。為此，小艾想使用比較專業(yè)的軟件對(duì)處理中的網(wǎng)頁(yè)進(jìn)行輸出優(yōu)化，而同事凱程告訴她，Photoshop就可以完成對(duì)一個(gè)設(shè)計(jì)的網(wǎng)頁(yè)進(jìn)行切片制作并輸出的功能。在此方面只要了解網(wǎng)頁(yè)切片輸出和網(wǎng)頁(yè)圖像的優(yōu)化與輸出即可。學(xué)習(xí)目標(biāo)〓知識(shí)目標(biāo)〓掌握網(wǎng)頁(yè)切片輸出的方法。掌握網(wǎng)頁(yè)圖像的優(yōu)化與輸出的方法?！寄苣繕?biāo)〓學(xué)會(huì)為制作的網(wǎng)頁(yè)創(chuàng)建切片。學(xué)會(huì)為制作的切片進(jìn)行輸出。學(xué)會(huì)為網(wǎng)頁(yè)圖像進(jìn)行優(yōu)化。學(xué)會(huì)為網(wǎng)頁(yè)圖像進(jìn)行輸出?！刭|(zhì)目標(biāo)〓積極積累網(wǎng)頁(yè)各個(gè)方面知識(shí)點(diǎn)并將其在工作中進(jìn)行運(yùn)用。CONTENTS任務(wù)1了解網(wǎng)頁(yè)切片目錄任務(wù)2掌握網(wǎng)頁(yè)圖像綜合實(shí)戰(zhàn)—網(wǎng)頁(yè)頁(yè)面的切割與優(yōu)化綜合實(shí)戰(zhàn)—設(shè)計(jì)網(wǎng)頁(yè)Logo綜合實(shí)戰(zhàn)—設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航條課后習(xí)題任務(wù)1了解網(wǎng)頁(yè)切片“切片工具”是Photoshop軟件自帶的一個(gè)平面圖片切割工具。使用“切片”工具可以將一個(gè)完整的網(wǎng)頁(yè)切割成許多小圖片，以便于從網(wǎng)絡(luò)上下載?；顒?dòng)1了解創(chuàng)建切片Photoshop中的切片工具

主要用于在制作網(wǎng)頁(yè)時(shí)候?qū)D片進(jìn)行“瘦身”，它可以在不損失圖像效果的前提下，減小文件的容量。在打開(kāi)的圖片上，使用切片工具

，將光標(biāo)置于要?jiǎng)?chuàng)建切片的位置，按住鼠標(biāo)左鍵拖動(dòng)，拖動(dòng)到合適的切片大小繪制切片，具體的創(chuàng)建過(guò)程與矩形選框工具

相同，如圖所示。任務(wù)1了解網(wǎng)頁(yè)切片活動(dòng)2了解編輯切片如果切片大小不合適，還可以調(diào)整和編輯切片，在圖片中創(chuàng)建切片后，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“劃分切片”命令，在彈出的“劃分切片”對(duì)話框中，將劃分切片的“垂直劃分為”設(shè)置為3，設(shè)置完畢單擊“確定”按鈕，完成切片的劃分，如圖所示。任務(wù)1了解網(wǎng)頁(yè)切片其中的各項(xiàng)含義如下：水平劃分為：水平均勻分割當(dāng)前切片。垂直劃分為：垂直均勻分割當(dāng)前切片。實(shí)踐經(jīng)驗(yàn)：在圖像上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“編輯切片選項(xiàng)”命令，彈出“切片選項(xiàng)”對(duì)話框，在對(duì)話框中可以設(shè)置切片的URL、目標(biāo)、信息文本等，如圖所示。其中的各項(xiàng)含義如下：切片類型：輸出切片的設(shè)置，包括圖像、無(wú)圖像和表。名稱：顯示當(dāng)前選擇的切片名稱，也可以自行定義。URL：在網(wǎng)頁(yè)中的單擊當(dāng)前切片可以鏈接的網(wǎng)址。目標(biāo)：設(shè)置打開(kāi)網(wǎng)頁(yè)的方式，主要包含以下5種_blank、_self、_parent、_top和自定義，依次表示為：新窗口、當(dāng)前窗口、父窗口、頂層窗口和框架。當(dāng)所指名稱的框架不存在時(shí)，自定義作用等同于_blank。信息文本：在網(wǎng)頁(yè)中當(dāng)鼠標(biāo)移動(dòng)到當(dāng)前切片上時(shí)，網(wǎng)絡(luò)瀏覽器中狀態(tài)欄顯示的內(nèi)容。AIT標(biāo)記：在網(wǎng)頁(yè)中當(dāng)鼠標(biāo)移動(dòng)到當(dāng)前切片上時(shí)，彈出的提示信息。當(dāng)網(wǎng)絡(luò)上不顯示圖片時(shí)，圖片位置將顯示“Alt標(biāo)記”框中的內(nèi)容。尺寸：X和Y代表當(dāng)前切片的坐標(biāo)，W和H代表當(dāng)前切片的寬度和高度。切片背景類型：設(shè)置切片背景在網(wǎng)頁(yè)中的顯示類型。在下拉菜單中包括無(wú)、雜色、白色、黑色和其他。當(dāng)選擇“其他”選項(xiàng)時(shí)，會(huì)彈出“拾色器”對(duì)話框，在對(duì)話框中設(shè)置切片背景的顏色。任務(wù)1了解網(wǎng)頁(yè)切片課堂實(shí)操—通過(guò)切片連接到網(wǎng)絡(luò)使用“存儲(chǔ)為Web和設(shè)備所用格式”命令可以導(dǎo)出和優(yōu)化切片圖像，Photoshop會(huì)將每個(gè)切片存儲(chǔ)為單獨(dú)的文件并生成顯示切片圖像所需的HTML或CSS代碼。具體的操作方法如下。任務(wù)2掌握網(wǎng)頁(yè)圖像優(yōu)化網(wǎng)頁(yè)使之能快速下載是頁(yè)面制作中很重要的考慮因素。網(wǎng)頁(yè)優(yōu)化涉及方方面面，圖片優(yōu)化則是其中重要手段之一，本此任務(wù)就講述如何進(jìn)行網(wǎng)頁(yè)圖像的優(yōu)化?；顒?dòng)1掌握?qǐng)D像的優(yōu)化及應(yīng)用顏色表1.圖像的優(yōu)化現(xiàn)在的網(wǎng)站大量地使用圖片，那么如何優(yōu)化這些圖片才好呢?在網(wǎng)站設(shè)計(jì)之初，就先要做好規(guī)劃，如背景圖片如何使用，做到心中有數(shù)。編輯圖片的時(shí)候，要做好裁剪，只展示必要的、重要的、同內(nèi)容相關(guān)的部分。在輸出圖片的時(shí)候，圖片大小要設(shè)置妥當(dāng)，長(zhǎng)度和寬度就設(shè)成所需要的大小，而不要輸出大圖片，在使用的時(shí)候，再指定較小的長(zhǎng)度和寬度，縮放圖片。JPG圖片也可以模糊背景，壓縮的時(shí)候，可以壓縮得更多。頁(yè)面上的邊框和背景，盡可能使用CSS的方式來(lái)展示，而不要使用圖片。圖片盡量使用PNG格式，以替代過(guò)去常用的GIF和JPG格式。在保證質(zhì)量的情況下，用最小的文件。在html中明確指定圖片的大小。對(duì)于GIF和PNG文件格式，最小化顏色位數(shù)。如果圖片上要添加文字，盡量不要把文字嵌入到圖片中，而是采用透明背景圖片，或者使用CSS定位讓文字覆蓋在圖片上，這樣既能獲得相等的效果，還能把圖片更大程度地壓縮。在較小的GIF和PNG圖片上，可以使用有損壓縮?？赡艿脑?，使用局部壓縮，可在保證前景清楚的基礎(chǔ)上，較大程度地壓縮背景。圖片在優(yōu)化之前，若能降噪的話，可以獲得20%多的額外壓縮。任務(wù)2掌握網(wǎng)頁(yè)圖像2.應(yīng)用顏色表如果將圖像優(yōu)化為GIF格式、PNG-8格式和WBMP格式時(shí)，可以通過(guò)“儲(chǔ)存為Web所用格式”對(duì)話框中的“顏色表”部分對(duì)顏色進(jìn)行進(jìn)一步設(shè)置，如圖所示。其中的各項(xiàng)含義如下。

顏色總數(shù)：顯示“顏色表”調(diào)板中顏色的總和。

將選中的顏色映射為透明：在“顏色表”調(diào)板中選擇相應(yīng)的顏色后，單擊該按鈕，可以將當(dāng)前優(yōu)化圖像中的選取顏色轉(zhuǎn)換成透明。Web轉(zhuǎn)換：可以將在“顏色表”調(diào)板中選取的顏色轉(zhuǎn)換成Web安全色。

顏色鎖定：可以將在“顏色表”調(diào)板中選取的顏色鎖定，被鎖定的顏色樣本在右下角會(huì)出現(xiàn)一個(gè)被鎖定的方塊圖標(biāo)。新建顏色：?jiǎn)螕粼摪粹o可以將吸管工具

吸取的顏色添加到“顏色表”面板中，新建的顏色樣本會(huì)自動(dòng)處于鎖定狀態(tài)。

刪除：在“顏色表”面板中選擇顏色樣本后，單擊此按鈕可以將選取的顏色樣本刪除，或者直接拖曳到刪除按鈕上將其刪除。任務(wù)2掌握網(wǎng)頁(yè)圖像活動(dòng)2掌握?qǐng)D像大小及保存圖像1.圖像大小顏色設(shè)置完畢后還可以通過(guò)“儲(chǔ)存為Web所用格式”對(duì)話框中的“圖像大小”部分對(duì)優(yōu)化的圖像進(jìn)行進(jìn)一步設(shè)置輸出大小，如圖所示。其中的各項(xiàng)含義如下：

新建長(zhǎng)寬：用來(lái)設(shè)置修改圖像的寬度和長(zhǎng)度。

百分比：設(shè)置縮放比例。

品質(zhì)：可以在下拉列表中選擇一種插值方法，以便對(duì)圖像重新取樣。任務(wù)2掌握網(wǎng)頁(yè)圖像活動(dòng)2掌握?qǐng)D像大小及保存圖像2.保存圖像當(dāng)制作完成一張圖片后需要將它們保存，以備未來(lái)使用，這時(shí)就需要對(duì)圖片進(jìn)行存儲(chǔ)，在存儲(chǔ)的時(shí)候也會(huì)相應(yīng)地出現(xiàn)一些文件格式待選擇。執(zhí)行菜單欄中的“文件/導(dǎo)出/導(dǎo)出為”命令，彈出“導(dǎo)出為”對(duì)話框，選擇導(dǎo)出格式后，單擊“導(dǎo)出”按鈕，彈出“另存為”對(duì)話框。在該對(duì)話框中選擇文件存儲(chǔ)的位置，如圖5-11所示，單擊“保存”按鈕，即可保存圖像。任務(wù)2掌握網(wǎng)頁(yè)圖像課堂實(shí)操—通過(guò)儲(chǔ)存為Web所用格式輸出透明GIF圖如何從Photoshop輸出透明背景的GIF圖像呢？下面就來(lái)講述輸出透明GIF圖像的方法。素養(yǎng)小課堂在為網(wǎng)頁(yè)及圖像進(jìn)行優(yōu)化與輸出中，要積極增強(qiáng)自己的分析能力、溝通能力，在實(shí)操作中懂得了把所學(xué)知識(shí)會(huì)運(yùn)用到操作中的重要性，懂得了團(tuán)結(jié)協(xié)作在工作中的重要性，在學(xué)習(xí)中還要時(shí)刻增加自己的責(zé)任感、使命感以及榮譽(yù)感。綜合實(shí)戰(zhàn)—網(wǎng)頁(yè)頁(yè)面的切割與優(yōu)化實(shí)戰(zhàn)訓(xùn)練要求掌握切片工具的使用掌握網(wǎng)頁(yè)布局中進(jìn)行圖像切片制作對(duì)圖像進(jìn)行優(yōu)化處理實(shí)戰(zhàn)素材素材文件：素材/項(xiàng)目5/電商網(wǎng)頁(yè)宣傳頁(yè)，如圖所示。項(xiàng)目編號(hào)5-1項(xiàng)目名稱綜合實(shí)戰(zhàn)—網(wǎng)頁(yè)頁(yè)面的切割與優(yōu)化時(shí)間地點(diǎn)目的：實(shí)踐網(wǎng)頁(yè)頁(yè)面進(jìn)行切割與優(yōu)化的一般流程課堂實(shí)踐：電商主題，打開(kāi)素材、創(chuàng)建切片、導(dǎo)出網(wǎng)頁(yè)和圖像，完成一個(gè)網(wǎng)頁(yè)頁(yè)面的切割與優(yōu)化?？己藰?biāo)準(zhǔn)：切片位置創(chuàng)建明確，符合網(wǎng)頁(yè)要求。10分對(duì)圖像中的切片進(jìn)行優(yōu)化。10分導(dǎo)出網(wǎng)頁(yè)與圖像10分切片中的圖片數(shù)量要統(tǒng)一10分導(dǎo)出網(wǎng)頁(yè)能夠打開(kāi)10分內(nèi)容可粘貼：評(píng)價(jià)評(píng)分：指導(dǎo)教師簽字：任務(wù)單綜合實(shí)戰(zhàn)—網(wǎng)頁(yè)頁(yè)面的切割與優(yōu)化實(shí)戰(zhàn)效果圖效果文件：源文件/項(xiàng)目5/綜合實(shí)戰(zhàn)—網(wǎng)頁(yè)頁(yè)面的切割與優(yōu)化，如圖所示。綜合實(shí)戰(zhàn)—設(shè)計(jì)網(wǎng)頁(yè)Logo實(shí)戰(zhàn)訓(xùn)練要求掌握?qǐng)A角矩形的繪制掌握調(diào)出多個(gè)圖層的選區(qū)掌握漸變色的填充掌握鍵入文字調(diào)整間距調(diào)整不透明度實(shí)戰(zhàn)素材素材文件：無(wú)任務(wù)單項(xiàng)目編號(hào)5-2項(xiàng)目名稱綜合實(shí)戰(zhàn)—設(shè)計(jì)網(wǎng)頁(yè)Logo時(shí)間地點(diǎn)目的：實(shí)踐通過(guò)文字及圖形設(shè)計(jì)logo的一般流程課堂實(shí)踐：電商主題，新建文檔、繪制正圓、繪制圓角矩形、調(diào)整圖形位置、調(diào)出選區(qū)清除多余圖像、填充漸變色，完成一個(gè)網(wǎng)頁(yè)logo的設(shè)計(jì)與制作?？己藰?biāo)準(zhǔn)：設(shè)置圓角位置。10分清除多余圖像。10分填充徑向漸變色10分鍵入文字調(diào)整間距10分統(tǒng)一漸變色調(diào)整不透明度10分內(nèi)容可粘貼：評(píng)價(jià)評(píng)分：指導(dǎo)教師簽字：綜合實(shí)戰(zhàn)—網(wǎng)頁(yè)頁(yè)面的切割與優(yōu)化實(shí)戰(zhàn)效果圖效果文件：源文件/項(xiàng)目5/綜合實(shí)戰(zhàn)—設(shè)計(jì)網(wǎng)頁(yè)Logo，如圖所示。綜合實(shí)戰(zhàn)—設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航條實(shí)戰(zhàn)訓(xùn)練要求掌握新建文檔填充漸變色作為背景的方法掌握?qǐng)A角矩形的繪制的方法掌握自定義形狀工具繪制標(biāo)志及搜索的方法掌握鋼筆工具的使用掌握添加圖層樣式的方法掌握鍵入文字調(diào)整大小實(shí)戰(zhàn)素材素材文件：無(wú)任務(wù)單項(xiàng)目編號(hào)5-3項(xiàng)目名稱綜合實(shí)戰(zhàn)—設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航條

時(shí)間地點(diǎn)目的：實(shí)踐通過(guò)形狀及漸變和圖層樣式制作導(dǎo)航條的一般流程課堂實(shí)踐：電商主題，新建文檔、填充漸變色、繪制圓角矩形、繪制自定義形狀、添加圖層樣式，完成一個(gè)網(wǎng)頁(yè)導(dǎo)航條的設(shè)計(jì)與制作?？己藰?biāo)準(zhǔn)：繪制圓角矩形填充漸變色。10分繪制自定義形狀調(diào)整合適大小。10分添加漸變疊加和投影圖層樣式。10分鋼筆工具繪制路徑轉(zhuǎn)換成選區(qū)填充漸變色10分鍵入文字調(diào)整大小10分內(nèi)容可粘貼：評(píng)價(jià)評(píng)分：指導(dǎo)教師簽字：綜合實(shí)戰(zhàn)—網(wǎng)頁(yè)頁(yè)面的切割與優(yōu)化實(shí)戰(zhàn)效果圖效果文件：源文件/項(xiàng)目5/綜合實(shí)戰(zhàn)—設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航條，如圖所示。課后習(xí)題一．選擇題Photoshop中的（

）主要用于在制作網(wǎng)頁(yè)時(shí)候?qū)D片進(jìn)行“瘦身”，它可以在不損失圖像效果的前提下，減小文件的容量。A切片工具B切片選擇工具C矩形選框工具D鋼筆工具使用“

”命令可以導(dǎo)出和優(yōu)化切片圖像，Photoshop會(huì)將每個(gè)切片存儲(chǔ)為單獨(dú)的文件并生成顯示切片圖像所需的HTML或CSS代碼。A存儲(chǔ)為Web和設(shè)備所用格式B復(fù)制C色彩范圍D儲(chǔ)存為

二.填空題如果切片大小不合適，還可以調(diào)整和編輯切片，在圖片中創(chuàng)建切片后，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇

命令，在彈出的話框中，將劃分切片的如果圖片上要添加文字，盡量不要把文字嵌入到圖片中，而是采用透明背景圖片，或者使用CSS定位讓文字覆蓋在圖片上，這樣既能獲得相等的效果，還能把圖片更大程度地

。網(wǎng)頁(yè)設(shè)計(jì)與制作——項(xiàng)目6：創(chuàng)建本地站點(diǎn)和

基本文本網(wǎng)頁(yè)P(yáng)roject6項(xiàng)目6職場(chǎng)情境網(wǎng)頁(yè)設(shè)計(jì)中關(guān)于圖像的部分學(xué)習(xí)完成后，如何創(chuàng)建一個(gè)屬于自己的站點(diǎn)，并創(chuàng)建一個(gè)真正的網(wǎng)頁(yè)呢，這時(shí)單純的學(xué)習(xí)

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論