Photoshop平面設(shè)計(jì)基礎(chǔ)（第二版）課件：設(shè)計(jì)網(wǎng)頁(yè) Banner

設(shè)計(jì)網(wǎng)頁(yè)Banner1任務(wù)目標(biāo)1.能編輯視頻時(shí)間軸。2.能使用視頻軌道。3.能設(shè)置圖形透明度和制作縮放動(dòng)畫。4.能保存GIF格式動(dòng)態(tài)圖片。2任務(wù)描述本任務(wù)主要利用視頻時(shí)間軸面板和“圖層”面板，并結(jié)合“自由變換”工具制作圖所示網(wǎng)頁(yè)Banner廣告。要完成本任務(wù)，除了需要掌握視頻編輯動(dòng)畫的方法，還要掌握透明度和縮放動(dòng)畫的制作方法。3網(wǎng)頁(yè)Banner廣告一、視頻時(shí)間軸面板新建文檔后，執(zhí)行“窗口”“時(shí)間軸”命令，打開“時(shí)間軸”面板。單擊創(chuàng)建模式右側(cè)的圖標(biāo)

，在彈出的下拉列表中選擇“創(chuàng)建視頻時(shí)間軸”選項(xiàng)，打開“視頻時(shí)間軸”模式的“時(shí)間軸”面板。在“視頻時(shí)間軸”模式的“時(shí)間軸”面板中，除“背景”圖層外，其他每個(gè)圖層都會(huì)作為一個(gè)“視頻軌道”，可以對(duì)每個(gè)視頻軌道進(jìn)行調(diào)整、切分、設(shè)置動(dòng)畫等操作，如圖所示。下面分別對(duì)主要部分做簡(jiǎn)要介紹。45“視頻時(shí)間軸”模式面板1.播放控件：用于控制視頻的播放。包括“轉(zhuǎn)到第一幀”“轉(zhuǎn)到上一幀”“播放”和“轉(zhuǎn)到下一幀”圖標(biāo)。2.“音頻控制”圖標(biāo)

：用于關(guān)閉或啟用音頻的播放。3.“設(shè)置回放選項(xiàng)”圖標(biāo)

：可以設(shè)置分辨率及是否循環(huán)播放。4.“在播放頭處拆分”圖標(biāo)

：用于切分視頻軌道。5.“選擇過渡效果并拖動(dòng)以應(yīng)用”圖標(biāo)

：?jiǎn)螕粼搱D標(biāo)，在彈出的下拉列表中設(shè)置持續(xù)時(shí)間，并從中選擇所需的過渡效果，將過渡效果類型拖到剪輯的開頭或結(jié)尾，即可為視頻添加指定的過渡效果。拖動(dòng)時(shí)間軸中過渡效果預(yù)覽的邊緣，可以精確設(shè)置入點(diǎn)和出點(diǎn)。66.“當(dāng)前時(shí)間指示器”圖標(biāo)

：拖拽當(dāng)前時(shí)間指示器可以瀏覽幀或更改當(dāng)前時(shí)間或幀。7.時(shí)間標(biāo)尺：根據(jù)當(dāng)前文檔的持續(xù)時(shí)間和幀速率，水平測(cè)量持續(xù)時(shí)間或幀計(jì)數(shù)。8.“向軌道添加媒體”圖標(biāo)

：?jiǎn)螕粼搱D標(biāo)，可以將要添加的視頻或音頻添加到軌道中。9.“轉(zhuǎn)換為幀動(dòng)畫”圖標(biāo)

：?jiǎn)螕粼搱D標(biāo)，可以將“視頻時(shí)間軸”模式的“時(shí)間軸”面板切換為“幀動(dòng)畫”模式的“時(shí)間軸”面板。710.“渲染視頻”圖標(biāo)

：?jiǎn)螕粼搱D標(biāo)，可以選擇文件保存位置，設(shè)置格式、預(yù)設(shè)、大小、范圍等選項(xiàng)，設(shè)置好以后，單擊渲染，就開始渲染視頻。11.“縮小時(shí)間軸”圖標(biāo)

：?jiǎn)螕粼搱D標(biāo)，可以縮小顯示時(shí)間軸。12.“控制時(shí)間軸顯示比例”圖標(biāo)

：拖動(dòng)該圖標(biāo)向左可以縮小時(shí)間軸顯示比例；拖動(dòng)該圖標(biāo)向右可以放大時(shí)間軸顯示比例。13.“放大時(shí)間軸”圖標(biāo)

：?jiǎn)螕粼搱D標(biāo)，可以放大顯示時(shí)間軸。14.工作區(qū)域指示器：設(shè)置工作區(qū)域的開頭與結(jié)尾，拖動(dòng)該按鈕到指定的時(shí)間位置可以預(yù)覽或?qū)С鰟?dòng)畫或視頻的特定部分。8二、音軌時(shí)間軸上單獨(dú)的音軌可以進(jìn)行編輯和調(diào)整。單擊“音軌”圖標(biāo)

，在彈出的下拉菜單可以選擇“添加音頻”“復(fù)制音頻剪輯”“刪除音頻剪輯”“替換音頻剪輯”“新建音軌”或“刪除軌道”，如圖所示。9“音軌”選項(xiàng)三、添加視頻素材對(duì)已經(jīng)打開的文件，如果要向其中添加視頻文件，可以執(zhí)行“圖層”“視頻圖層”“從文件新建視頻圖層”命令，然后選擇要添加的視頻文件即可。10一、打開素材按“Ctrl+O”快捷鍵，打開“素材/素材/任務(wù)二”目錄下名為“網(wǎng)頁(yè)Banner設(shè)計(jì)背景.PSD”的文件，如圖所示。11打開素材二、置入圖片1.執(zhí)行“文件”“置入嵌入對(duì)象”命令，將“素材/素材/任務(wù)二”目錄下名為“天貓.JPG”的文件置入，在圖層面板自動(dòng)生成“天貓”圖層，然后調(diào)整圖片的大小和位置，效果如圖所示。12置入圖片2.將“素材/素材/任務(wù)二”目錄下名為“星星.JPG”的文件置入，在“圖層”面板自動(dòng)生成“星星”圖層，設(shè)置該圖層的混合模式為“濾色”，并調(diào)整圖片的大小和位置，效果如圖所示。13設(shè)置圖層的混合模式三、設(shè)置顏色在工具箱上單擊“設(shè)置前景色”圖標(biāo)

，打開“拾色器（前景色）”對(duì)話框，勾選左下角的“只有Web顏色”選項(xiàng)，把顏色控制條邊上的滑塊移到黃色邊上，然后選取色表中右上角的黃色，如圖所示。單擊“確定”按鈕完成設(shè)置。14設(shè)置顏色四、輸入文字1.選擇“橫排文字工具”，在工具屬性欄中設(shè)置字體類型為“微軟雅黑”，文字的大小為“72點(diǎn)”，然后在圖像窗口單擊，輸入文字“雙11終極狂歡”，按Esc鍵退出輸入，設(shè)置字體顏色為上一步的黃色；單擊“圖層”面板下方的“添加圖層樣式”圖標(biāo)，為文字添加“描邊”效果，設(shè)置描邊大小為“5像素”，顏色為“R102，G0，B153”，效果如圖所示。1516輸入文字2.輸入文字“每滿300減40”，設(shè)置字體類型為“微軟雅黑”，文字的大小為“105點(diǎn)”，垂直縮放為“120%”，如圖所示；為文字添加“描邊”效果，設(shè)置描邊大小為“7像素”，顏色為“R102，G0，B153”，調(diào)整文字的位置。效果如圖所示。17設(shè)置“字符”參數(shù)輸入文字及添加“描邊”效果五、繪制矩形1.新建“圖層1”，選擇“矩形選框工具”，在文字下方繪制矩形，并填充紅色（R255，G0，B0），效果如圖所示。18繪制矩形2.給“圖層1”添加“圖層蒙版”，選擇“漸變工具”，然后選中“前景色到透明漸變”選項(xiàng)，在紅色矩形的左右兩端分別進(jìn)行操作，效果如圖所示。19添加“圖層蒙版”及漸變效果3.選擇“橫排文字工具”，在繪制的紅色矩形上面輸入文字“11月11日0點(diǎn)開搶查看詳情”，設(shè)置字體類型為“微軟雅黑”，文字的大小為“45點(diǎn)”，顏色為白色，調(diào)整文字的位置，效果如圖所示。20輸入文字后的效果六、編輯圖層在“圖層”面板下方單擊“創(chuàng)建新組”圖標(biāo)

，生成“組1”圖層，除了“每滿300減40”和“星星”圖層之外，將其他圖層移動(dòng)到“組1”圖層里，如圖所示。21編輯圖層七、創(chuàng)建時(shí)間軸動(dòng)畫1.執(zhí)行“窗口”“時(shí)間軸”菜單命令，然后單擊“創(chuàng)建視頻時(shí)間軸”按鈕，創(chuàng)建時(shí)間軸動(dòng)畫。分別拖動(dòng)“每滿300減40”和“星星”軌道將視頻時(shí)長(zhǎng)設(shè)置為03：00f，并將工作區(qū)域指示器結(jié)尾設(shè)置為03：00f，如圖所示。22設(shè)置視頻時(shí)長(zhǎng)為03：00f2.在“時(shí)間軸”面板中將“當(dāng)前時(shí)間指示器”

移動(dòng)至0秒處，然后展開“每滿300減40”圖層，接著單擊“變換”左側(cè)的“啟用關(guān)鍵幀動(dòng)畫”圖標(biāo)

啟用并添加關(guān)鍵幀，如圖所示。23添加關(guān)鍵幀3.將“當(dāng)前時(shí)間指示器”

移動(dòng)至03：00f添加關(guān)鍵幀，如圖所示。24在03：00f秒處添加關(guān)鍵幀4.選擇“星星”圖層，在“時(shí)間軸”面板中將“當(dāng)前時(shí)間指示器”移動(dòng)至0秒處，然后展開“星星”圖層，接著單擊“不透明度”左側(cè)的“啟用關(guān)鍵幀動(dòng)畫”圖標(biāo)

，啟用并添加關(guān)鍵幀，如圖所示。25啟用并添加關(guān)鍵幀5.將“當(dāng)前時(shí)間指示器”

移動(dòng)至01：00f處，在“不透明度”左側(cè)單擊“在播放頭處添加或移去關(guān)鍵幀”圖標(biāo)

，添加關(guān)鍵幀，接著在“圖層”面板中將“星星”圖層的“不透明度”設(shè)置為“100%”，如圖所示。26添加關(guān)鍵幀并設(shè)置“不透明度”參數(shù)16.接著將“當(dāng)前時(shí)間指示器”

移動(dòng)至02：00f處，單擊“在播放頭處添加或移去關(guān)鍵幀”圖標(biāo)

，添加關(guān)鍵幀，接著在“圖層”面板中將“星星”圖層的不透明度設(shè)置為“0%”，如圖所示。27添加關(guān)鍵幀并設(shè)置“不透明度”參數(shù)27.繼續(xù)將“當(dāng)前時(shí)間指示器”

移動(dòng)至03：00f處，單擊“在播放頭處添加或移去關(guān)鍵幀”圖標(biāo)

，添加關(guān)鍵幀，接著在“圖層”面板中將“星星”圖層的不透明度設(shè)置為“100%”，如圖所示。28添加關(guān)鍵幀并設(shè)置“不透明度”參數(shù)38.設(shè)置完成后單擊“播放”圖標(biāo)

查看效果，文字“每滿300減40”和“星星”會(huì)產(chǎn)生動(dòng)態(tài)效果，平面效果如圖所示。29字體及星光變化的平面效果八、保存文