注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

【转载】PhotoShop 之 切图技巧 基础篇  

2015-01-19 19:52:42|  分类: PhotoShop常识 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
        PhotoShop之切图技巧基础篇
        
        本文主要针对PSD图的切图进行过程详解,是很基础的一步一步来的。前端开发工作中避免不了使用PhotoShop对美工的PSD图进行切图,所以这一技能日后还需要多加练习,把速度提上去。
        以下截图的例子是我一边练习一边截图一边写上来的,可谓一石三鸟了。哈哈……
        首先对该素材的原作者表示致敬,抱着喜爱的心情拿来做案例。
        1、打开PSD图,用四个图标作为例子。
PhotoShop 之 切图技巧 基础篇 - 艾某人 - 艾某人
PhotoShop 之 切图技巧 基础篇 - 艾某人 - 艾某人
        2、用“移动工具(V)”,勾选“自动选择图层”,点击要切的图形,在右边的图层窗口中显示出当前图形所在图层。当前例子是两个图层形成的,一个是灰色的圆形,一个是上面的“EMS”字样,这两个图层都要选中。
PhotoShop 之 切图技巧 基础篇 - 艾某人 - 艾某人
        3、用“选框工具(M)”测量当前图形的大小。
PhotoShop 之 切图技巧 基础篇 - 艾某人 - 艾某人
        在划选区的时候右下角就有当前选取的长宽,把这个数字记下来。
PhotoShop 之 切图技巧 基础篇 - 艾某人 - 艾某人
        如果没有记住,从“窗口->信息”把信息窗口调出来,里面就有当前选取的长宽。
PhotoShop 之 切图技巧 基础篇 - 艾某人 - 艾某人
        Tips:知道如何准确的划取选取吗?这时候就是标尺大显神威的时候了。
        在“视图->标尺”中将标尺调出来,可以右键标尺设置单位为“像素”,在之后的信息窗口中显示的单位也就是像素了,统一单位为之后的使用行方便。
        用“参考线”确定图形选取的边框,这个参考线直接从标尺抽取出来,上图抽取了4条参考线比较准确的确定了图形选取的边界,之后再使用“选框工具”时,参考线会帮助选取的边界尽可能的贴近图形边界。
        4、根据选取的长宽信息,新建对应大小的画布。一般网页的图案,分辨率72像素/英寸足够,颜色模式选择“RGB颜色”,8位。背景颜色可选成透明。
PhotoShop 之 切图技巧 基础篇 - 艾某人 - 艾某人
        5、将PSD图中选中的图层拖拽到新建的窗口中,调整一下位置。
PhotoShop 之 切图技巧 基础篇 - 艾某人 - 艾某人
        这是拖拽过来之后放大了的效果图。
PhotoShop 之 切图技巧 基础篇 - 艾某人 - 艾某人
        6、我们要切的是4张图,根据计算,在“图像->画布大小”,高度改成150*4=600像素。在“定位”点击向上的箭头,意思是扩大画布之后当前图案在画布顶端。
PhotoShop 之 切图技巧 基础篇 - 艾某人 - 艾某人
        设置了定位之后的效果图。
PhotoShop 之 切图技巧 基础篇 - 艾某人 - 艾某人
        7、剩余的3个图,分别用“选择工具(V)”确定图层,之后拖拽到新建的画布上。
PhotoShop 之 切图技巧 基础篇 - 艾某人 - 艾某人
        四个全部拖拽上去之后,效果如下
PhotoShop 之 切图技巧 基础篇 - 艾某人 - 艾某人
        Tips:为了不混淆,可以为图层编组。如“图层3”和“椭圆2 拷贝3”编组,选中两个图层,用快捷键Ctrl+G成组即可。
PhotoShop 之 切图技巧 基础篇 - 艾某人 - 艾某人
        成组之后的效果。
PhotoShop 之 切图技巧 基础篇 - 艾某人 - 艾某人
        8、 对齐四个图形,让四个图形均匀的分布在画布上。先点击“水平居中对其”,这个功能要保证第一个图形和最后一个图形在一条直线上,即需要先把这两个图形摆放正确;之后点击“按顶分布”,四个图形就匀称的排列在画布上了。这个对齐功能根据需要使用,这只是举一个例子。
PhotoShop 之 切图技巧 基础篇 - 艾某人 - 艾某人
PhotoShop 之 切图技巧 基础篇 - 艾某人 - 艾某人
        9、使用“切片工具(C)”,选中整个画布。之后画布的左上方出现蓝色的标识。
PhotoShop 之 切图技巧 基础篇 - 艾某人 - 艾某人
        右键选择“划分切片”。
PhotoShop 之 切图技巧 基础篇 - 艾某人 - 艾某人
        在弹出的划分切片的窗口中,在水平中输入要划分的切片数量为4。点击确定之后,画布划分为4个相等的区域。
PhotoShop 之 切图技巧 基础篇 - 艾某人 - 艾某人
        10、一切编排完成,这时候可以保存了。在“文件->存储为Web所用格式...”将文件存为网页制作过程中常用的格式。
PhotoShop 之 切图技巧 基础篇 - 艾某人 - 艾某人
        11、可通过“四联”的方式查看PNG、JPG、GIF格式的区别,选择适合的格式进行存储。当前的PNG图效果最符合预期,因此在“预设”下方的下拉框中选择“PNG-24”,点击存储。
PhotoShop 之 切图技巧 基础篇 - 艾某人 - 艾某人
        12、在保存的过程中,建议在“切片:”中选择“所有用户切片”。主要是因为在进行不规则的切图的过程中,使用“所有切片”会产生冗余的碎片,而这些碎片是我们用不到的。输入文件名。
PhotoShop 之 切图技巧 基础篇 - 艾某人 - 艾某人
        存储之后的效果就是这样的,四个分别命名的PNG图标。
 PhotoShop 之 切图技巧 基础篇 - 艾某人 - 艾某人

         之后还会有快速切图的提高篇,这个还需要再进行研究,目前只能先多练习。
                                                                                                                         --艾某人

欢迎学习交流------梦幻雪冰
  评论这张
 
阅读(51)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017