Photoshop制作網(wǎng)站首頁(yè)(3):切割網(wǎng)頁(yè)圖片

來(lái)源:不詳 作者:佚名 學(xué)習(xí):597人次
Photoshop制作網(wǎng)站首頁(yè)(3):切割網(wǎng)頁(yè)圖片來(lái)源:xuexin.com 薛欣
切圖是網(wǎng)頁(yè)設(shè)計(jì)中非常重要的一環(huán),它可以很方便的為我們標(biāo)明哪些是圖片區(qū)域,哪些是文本區(qū)域。另外,合理的切圖還有利于加快網(wǎng)頁(yè)的下載速度、設(shè)計(jì)復(fù)雜造型的網(wǎng)頁(yè)以及對(duì)不同特點(diǎn)的圖片進(jìn)行分格式壓縮等優(yōu)點(diǎn)。 1. 使用工具箱中的“切片工具”在標(biāo)題部分的左右各切一刀,使用“切片選擇工具”雙擊右側(cè)部分,在彈出的面板中設(shè)置切片類(lèi)型為無(wú)圖像。因?yàn)樵摬糠质羌兩,為了在網(wǎng)頁(yè)中顯示效果相同,設(shè)切片背景為黑色,這樣該部分輸出成網(wǎng)頁(yè)后將由透明占位符和黑色背景色代替,如圖 所示。





2. 使用切片的固定大小,設(shè)置寬度為“68”,高度為“40”,這次是切割的導(dǎo)航條按鈕,將切片和被切對(duì)象對(duì)齊,切的時(shí)候要小心,避免切片之間重疊,如圖1-3-2 所示。


圖1-3-2

3. 使用同樣的方法將其它導(dǎo)航條按鈕切割,注意最后一個(gè)“管委會(huì)”按鈕是三個(gè)字,因此設(shè)置的切片寬度要大,如圖1-3-3 所示。需要注意的是,切割的時(shí)候要注意平衡,比如右側(cè)切割了,那么左側(cè)也要等高的切一刀,這樣輸出成網(wǎng)頁(yè)的時(shí)候不容易亂。



圖1-3-3
4. 切割方法同上,注意切片左上角的編號(hào)。下一行切片14 和15 共兩刀,再往下16、17、18 共三刀,其中17 為純色,因此設(shè)為無(wú)圖像,并用相應(yīng)的顏色標(biāo)識(shí),如圖1-3-4 所示。后面的方法基本相同,需要把在Dreamweaver 中處理的純色背景部分設(shè)為無(wú)圖像,并以相應(yīng)的切片背景色填充。如果某個(gè)圖層的范圍正好是要切割的大小,可以直接使用“基于圖層的切片”功能。



圖1-3-4

5. 執(zhí)行菜單“存儲(chǔ)為Web 和設(shè)備所用格式”,該命令用于將PSD 源文件輸出成網(wǎng)頁(yè)或是手機(jī)等設(shè)備所使用的格式。在對(duì)話框中進(jìn)行簡(jiǎn)單的優(yōu)化設(shè)置,確定后設(shè)置輸出類(lèi)型為“HTML 和圖像”,并且要輸出所有的切片,如圖1-3-5 所示。



圖1-3-5

舉一反三:
嘗試使用切圖工具對(duì)已有的版面進(jìn)行切割,并注意切割的技巧。

學(xué)習(xí) · 提示

  • 一定要打開(kāi)PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
暫無(wú)評(píng)論,交個(gè)作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!