3.8 使用切片工具制作网页 [原创Ps教程]



1. 本节课将为您演示[切片工具]的使用。此工具可以把图片切成若干个小图片并直接输出为网页格式,非常实用!首先长按[裁剪工具],显示隐藏的工具列表。


2. 然后选择列表中的[切片工具]。


3. 根据工作需求,可以把图像切割成若干个区域,在左上方的圆点处按下鼠标,并滑动至右下方的圆点处,从而创建一个基于两点的切片区域。


4. 接着以同样的方式,创建第二个切片区域。


5. 您还可以给切片设置网址链接,这样当把所有切片输出为网页后,即可点击该切片访问对应的链接网址。鼠标长按[切片工具],显示隐藏的工具列表。


6. 点击选择列表中的[切片选择工具]。


7. 然后鼠标双击第一个切片,弹出[切片选项]窗口。


8. 在弹出的[切片选项]窗口中,点击网址输入框,输入切片链接的网址。


9. 点击[目标]右侧的输入框,并输入网址打开的方式,设置在空白页面打开新的网址。


10. 接着点击[确定]按钮,完成切片选项的设置。


11. 现在把划分好的切片,输出为多张小图片和网页格式。依次点击[文件 > 存储为网页所用格式]命令。


12.


13. 在弹出的[存储]窗口中,保持窗口上方的图片输出格式为8位索引位图,即将小图输出为压缩后的图片,点击[存储]按钮,开始输出切片后的小图和网页。


14. 在弹出的[将优化结果存储为]窗口中,点击[文件名]右侧的输入框,输入网页的名称。


15. 点击[格式]右侧的下拉箭头。


16. 然后选择[网页和图像]选项,这样就可以同时输出切割后的小图和网页了。


17. 确认输出文件所在的文件夹,然后点击[保存]按钮,开始输出小图和网页。


18. 在弹出的警告窗口中,点击[确定]按钮。


19. 同时按下键盘上的快捷键,从操作界面切换出来,并打开输出文件所在的文件夹。


20. 文件夹下保存了所有输出的小图片,另一个文件则是输出后的网页,双击网页文件,使用浏览器打开该网页。


21. 网页中显示的画面,其实并不是一张大图,而是由输出的多张小图,按照原来的位置拼合而成的。点击此处的切片,查看网页链接效果,并结束本节课程。




本文整理自:《Photoshop CC互动教程》,真正的[手把手]教学模式,用最快的速度上手Photoshop,苹果商店App Store免费下载:https://itunes.apple.com/cn/app/id822431555,或扫描本页底部的二维码。课程配套素材下载地址:资料下载

0