項(xiàng)目13 使用photoshop制作網(wǎng)頁(yè)素材

項(xiàng)目十三使用photoshop制作網(wǎng)頁(yè)素材熟悉photoshop的操作界面掌握photoshop繪制圖片素材的方法和技巧掌握photoshop設(shè)計(jì)頁(yè)面版面的要點(diǎn)掌握photoshop圖片的切圖要點(diǎn)學(xué)習(xí)目標(biāo)Contents目錄使用phtoshop制作圖片素材任務(wù)1導(dǎo)航和banner設(shè)計(jì)任務(wù)2頁(yè)面的版面設(shè)計(jì)任務(wù)3頁(yè)面切圖任務(wù)4簡(jiǎn)單圖形的繪畫(huà)01修改圖像大小02任務(wù)1使用photoshop制作圖片素材圖像顏色的調(diào)整03圖像的修補(bǔ)041.1

photoshop軟件界面介紹photoshop軟件工具的使用3photoshop軟件基礎(chǔ)知識(shí)1photoshop軟件運(yùn)用領(lǐng)域2農(nóng)村電商logo設(shè)計(jì)41.1

photoshop軟件界面介紹無(wú)論從事平面藝術(shù)設(shè)計(jì)、攝影、多媒體、影像制作還是網(wǎng)頁(yè)設(shè)計(jì)，都需要?jiǎng)?chuàng)作圖像。多數(shù)專(zhuān)業(yè)人士選擇AdobePhotoshop進(jìn)行藝術(shù)創(chuàng)作。AdobePhotoshop提供了強(qiáng)大的圖像處理功能，尤其是AdobePhotoshopCS5的新增工具以及對(duì)現(xiàn)有工具進(jìn)行的改進(jìn)，全面完善了圖像設(shè)計(jì)和制作過(guò)程，特別是在復(fù)雜選擇、內(nèi)容感知型填充、變形操控、繪圖效果、HDR成像等方面的增強(qiáng)和改善，極大地提高了AdobePhotoshop的工作效率，使整個(gè)工作流程更為順暢。1.1

photoshop軟件界面介紹1.1Photoshop的商業(yè)應(yīng)用領(lǐng)域1.1Photoshop的商業(yè)應(yīng)用領(lǐng)域一、平面設(shè)計(jì)平面設(shè)計(jì)是Photoshop應(yīng)用最為廣泛的領(lǐng)域，無(wú)論是書(shū)籍封面，還是大街上隨處可見(jiàn)的招貼、海報(bào)基本上都是使用Photoshop對(duì)其中的圖像進(jìn)行合成處理的。二、影像創(chuàng)意使用Photoshop可以將原本不相干的對(duì)象天衣無(wú)縫地拼合在一起，使圖像發(fā)生非常大的變化。1.1

photoshop軟件界面介紹1.1Photoshop的商業(yè)應(yīng)用領(lǐng)域三、數(shù)碼相片潤(rùn)飾及設(shè)計(jì)Photoshop具有強(qiáng)大的相片潤(rùn)飾功能，不僅可以輕松修復(fù)舊損照片、去除照片中的瑕疵，還可以完成很多特殊效果設(shè)計(jì)，例如一些婚紗照片的創(chuàng)意設(shè)計(jì)制作。四、特效文字設(shè)計(jì)利用Photoshop可以使原本普通、平常的文字發(fā)生各種各樣的變化，從而使這些文字在質(zhì)感、立體效果、外形方面發(fā)生變化，使之更適合場(chǎng)景的氛圍，突出主題。1.1

photoshop軟件界面介紹1.1Photoshop的商業(yè)應(yīng)用領(lǐng)域五、商業(yè)插畫(huà)繪制插畫(huà)繪制是近年來(lái)才慢慢走向成熟的行業(yè)，隨著出版及設(shè)計(jì)領(lǐng)域工作的逐步細(xì)分，商業(yè)插畫(huà)的需求不斷擴(kuò)大，從而使以前許多將插畫(huà)繪制作為個(gè)人愛(ài)好的藝術(shù)家開(kāi)始為出版社、圖片社、雜志社、商業(yè)設(shè)計(jì)公司繪制插畫(huà)。六、UI設(shè)計(jì)隨著計(jì)算機(jī)硬件設(shè)備性能的不斷加強(qiáng)和人們審美情趣的不斷提高，以往古板單調(diào)的操作界面早已無(wú)法滿(mǎn)足人們的需求，網(wǎng)頁(yè)、應(yīng)用軟件或游戲界面設(shè)計(jì)是否優(yōu)秀，已成為人們對(duì)它進(jìn)行衡量的標(biāo)準(zhǔn)之一。在此領(lǐng)域Photoshop扮演著非常重要的角色，目前在界面設(shè)計(jì)領(lǐng)域90%以上的設(shè)計(jì)師正在使用此軟件進(jìn)行設(shè)計(jì)。1.1

photoshop軟件界面介紹1.1Photoshop的商業(yè)應(yīng)用領(lǐng)域七、產(chǎn)品效果圖表現(xiàn)隨著經(jīng)濟(jì)全球化的日趨深入，產(chǎn)品設(shè)計(jì)已成為制造產(chǎn)品的競(jìng)爭(zhēng)動(dòng)力之一。產(chǎn)品設(shè)計(jì)是把一種規(guī)劃設(shè)想、解決問(wèn)題的方法通過(guò)具體的載體，以美好的形式表達(dá)出來(lái)的一種創(chuàng)造性活動(dòng)過(guò)程。用計(jì)算機(jī)進(jìn)行輔助工業(yè)設(shè)計(jì)，如工業(yè)產(chǎn)品造型平面表現(xiàn)、工業(yè)產(chǎn)品造型三維渲染表現(xiàn)等，都涉及到計(jì)算機(jī)軟件。PhotoshopCS5新增了3D功能后，大大方便了產(chǎn)品效果圖的表現(xiàn)。1.1

photoshop軟件界面介紹1.1Photoshop的商業(yè)應(yīng)用領(lǐng)域七、產(chǎn)品效果圖表現(xiàn)隨著經(jīng)濟(jì)全球化的日趨深入，產(chǎn)品設(shè)計(jì)已成為制造產(chǎn)品的競(jìng)爭(zhēng)動(dòng)力之一。產(chǎn)品設(shè)計(jì)是把一種規(guī)劃設(shè)想、解決問(wèn)題的方法通過(guò)具體的載體，以美好的形式表達(dá)出來(lái)的一種創(chuàng)造性活動(dòng)過(guò)程。用計(jì)算機(jī)進(jìn)行輔助工業(yè)設(shè)計(jì)，如工業(yè)產(chǎn)品造型平面表現(xiàn)、工業(yè)產(chǎn)品造型三維渲染表現(xiàn)等，都涉及到計(jì)算機(jī)軟件。PhotoshopCS5新增了3D功能后，大大方便了產(chǎn)品效果圖的表現(xiàn)。1.1

photoshop軟件界面介紹1.2圖形圖像相關(guān)知識(shí)一、像素與分辨率“像素”（Pixel）是由Picture（圖像）和Element（元素）這兩個(gè)單詞合成的，是用來(lái)計(jì)算數(shù)碼影像的一種單位，如同攝影的相片一樣，數(shù)碼影像也具有連續(xù)性的濃淡階調(diào)，我們?nèi)舭延跋穹糯髷?shù)倍，會(huì)發(fā)現(xiàn)這些連續(xù)色調(diào)其實(shí)是由許多色彩相近的小方點(diǎn)所組成，每一個(gè)像素都有其明確的位置及色彩值。這些小方點(diǎn)就是構(gòu)成影像的最小單位“像素”（Pixel），所有像素的位置及色彩決定了圖像的效果，越高位的像素，其擁有的色彩信息也就越豐富，越能表達(dá)顏色的真實(shí)感。分辨率是用來(lái)衡量圖像細(xì)節(jié)效果的一個(gè)概念。圖像分辨率即圖像中每單位長(zhǎng)度顯示的像素?cái)?shù)目，通常用像素／尺寸（ppi）表示。相同打印尺寸的圖像，高分辨率比低分辨率包含較多的像素，因而像素點(diǎn)也較小。1.1

photoshop軟件界面介紹1.2圖形圖像相關(guān)知識(shí)三、圖像文件格式Photoshop兼容的圖像文件格式很多，常用的文件格式有以下幾種：1.PSD（.psd）格式Photoshop軟件自帶的格式，它可以保存Photoshop在制作圖像時(shí)的各種信息，如通道、路徑、樣式和效果等，文件也相應(yīng)較大。2.BMP（.bmp）格式英文Bitmap（位圖）的簡(jiǎn)寫(xiě)，是一種與硬件設(shè)備無(wú)關(guān)的圖像文件格式，使用非常廣，是DOS和Windows兼容計(jì)算機(jī)上的準(zhǔn)Windows圖像格式。3.TIFF（.tif）格式標(biāo)記圖像文件格式（Tiff），用于在應(yīng)用程序和計(jì)算機(jī)平臺(tái)之間交換文件。Tiff是一種靈活的位圖圖像格式，幾乎被所有的繪畫(huà)、圖像編輯和頁(yè)面版面應(yīng)用程序支持。1.1

photoshop軟件界面介紹1.2圖形圖像相關(guān)知識(shí)4.JPEG（.JPG）格式一種有損壓縮格式。這種格式的圖像文件一般用于圖像瀏覽和一些超文本文檔（HTML文檔）中。5.GIF（.GIF）格式Gif(GraphicsInterchangeFormat)的原義是“圖像互換格式”，是CompuServe公司在1987年開(kāi)發(fā)的圖像文件格式。任務(wù)2導(dǎo)航和banner設(shè)計(jì)導(dǎo)航和banner設(shè)計(jì)知識(shí)點(diǎn)講解01農(nóng)村電商導(dǎo)航和banner設(shè)計(jì)02任務(wù)2導(dǎo)航和banner設(shè)計(jì)導(dǎo)航和banner設(shè)計(jì)知識(shí)點(diǎn)講解01導(dǎo)航欄是指位于頁(yè)面頂部或者側(cè)邊區(qū)域的，在頁(yè)眉橫幅圖片上邊或下邊的一排水平導(dǎo)航按鈕，它起著鏈接站點(diǎn)或者軟件內(nèi)的各個(gè)頁(yè)面的作用。banner通常指象征意義的旗幟，也可指錦旗、獎(jiǎng)旗或用于游行的大幅標(biāo)語(yǔ)、旗等，主要用于正式場(chǎng)合或詩(shī)歌中。任務(wù)3頁(yè)面版式設(shè)計(jì)頁(yè)面版式設(shè)計(jì)知識(shí)點(diǎn)講解01農(nóng)村電商網(wǎng)站頁(yè)面設(shè)計(jì)02任務(wù)3頁(yè)面版式設(shè)計(jì)頁(yè)面版式設(shè)計(jì)知識(shí)點(diǎn)講解01任務(wù)3頁(yè)面版式設(shè)計(jì)頁(yè)面版式設(shè)計(jì)知識(shí)點(diǎn)講解01網(wǎng)頁(yè)的版式設(shè)計(jì)決定了網(wǎng)頁(yè)的藝術(shù)風(fēng)格和個(gè)性特征。網(wǎng)頁(yè)的版式設(shè)計(jì)是設(shè)計(jì)師理性思維與感性表達(dá)的產(chǎn)物。網(wǎng)頁(yè)的版式設(shè)計(jì)要達(dá)到形式和內(nèi)容的統(tǒng)一。任務(wù)3頁(yè)面版式設(shè)計(jì)頁(yè)面版式設(shè)計(jì)知識(shí)點(diǎn)講解01網(wǎng)頁(yè)的版式設(shè)計(jì)由于終端顯示載體的不同而具有自身的特色:任務(wù)3頁(yè)面版式設(shè)計(jì)頁(yè)面版式設(shè)計(jì)知識(shí)點(diǎn)講解01一、版式結(jié)構(gòu)的分割在結(jié)構(gòu)上利用點(diǎn)、線、面等元素劃分網(wǎng)頁(yè)頁(yè)面為不同的視覺(jué)區(qū)域就是結(jié)構(gòu)的分割。任務(wù)3頁(yè)面版式設(shè)計(jì)頁(yè)面版式設(shè)計(jì)知識(shí)點(diǎn)講解011.框架式分割框架式分割是一種理性的分割形式，是指利用各種不同的方形框架對(duì)網(wǎng)頁(yè)進(jìn)行分割。任務(wù)3頁(yè)面版式設(shè)計(jì)頁(yè)面版式設(shè)計(jì)知識(shí)點(diǎn)講解012.自由式分割自由式分割用各種顯性或隱性的直線、曲線或交叉線自由分割頁(yè)面。（1）滿(mǎn)版型任務(wù)3頁(yè)面版式設(shè)計(jì)頁(yè)面版式設(shè)計(jì)知識(shí)點(diǎn)講解01（2）直線分割型任務(wù)3頁(yè)面版式設(shè)計(jì)頁(yè)面版式設(shè)計(jì)知識(shí)點(diǎn)講解01(3）曲線分割型任務(wù)3頁(yè)面版式設(shè)計(jì)頁(yè)面版式設(shè)計(jì)知識(shí)點(diǎn)講解01(4）自由型任務(wù)4頁(yè)面切圖1、切片概述2、單個(gè)切片的輸出3、連續(xù)切片的輸出4、農(nóng)村電商頁(yè)面切圖任務(wù)4頁(yè)面切圖1、切片概述所謂切片，就是將制作好的網(wǎng)頁(yè)效果圖，按照網(wǎng)頁(yè)的模塊分割成多個(gè)碎片，然后將切片導(dǎo)出交付前端工程師，由前端工程師通過(guò)代碼將網(wǎng)頁(yè)效果實(shí)現(xiàn)出來(lái)。切片輸出是否合理直接影響著網(wǎng)頁(yè)的顯示效果和反應(yīng)速度。因此切片在網(wǎng)頁(yè)中占著非常重要的作用。任務(wù)4頁(yè)面切圖2、單個(gè)切片的輸出操作過(guò)程：(1）切片的劃分:打開(kāi)要分割的圖像，在工具欄中選擇“切片工具”按住鼠標(biāo)左鍵，使用切片工具直接在需要切片的位置拖出一個(gè)矩形，即可完成對(duì)頁(yè)面元素的切割。

(2)切片的輸出:選擇“切片選擇工具”,選中需要輸出的切片。在菜單欄中選擇“文件”→“存儲(chǔ)為Web所用格式…”命令,在彈出的窗口中單擊“存儲(chǔ)”按鈕。(3）切片的命名:保存切片時(shí)設(shè)置文件名為“web.jpg”，保存類(lèi)型為“僅限圖像(*.jpg)”，切片選擇“選中的切片”。任務(wù)