德克云技术联盟

标题: 平面设计师之路2——图像的裁剪与拼合还原 [打印本页]

---

作者: 李昭    时间: 2014-7-17 11:08
标题: 平面设计师之路2——图像的裁剪与拼合还原


        开展本教程的目的是兼顾实用性与当前工作的结合，让大家带着目的学习平面设计技术，因此我将第二贴的主题定义为“图像的裁剪与拼合还原”。这一技术入门简单，但是在程序员将美工的工作成果代码化及维护人员在信息处理过程中经常会用到这方面的技术和手段，所以本着面向菜鸟的态度，我将这方面的技术向大家做一逐一介绍。
       1、最简单的裁剪
        
        photoshop中的选择工具，自行带有设定选择大小的选项，只要设定好选取模式，就可以选择想要的大小，将指定大小的画面区域选择出来。
        尽量别用裁剪工具，就是这个工具：，因为这个裁出来的图像大小不好控制，不利于简化页面代码。
       将选区做好以后，只需要Ctrl+C复制，然后新建图像、粘贴就可以形成一幅新的图像。

       2、对于美工设计出来的页面，尽量要用高级切图方法而不是低级切图方法。
        高级切图方法是指充分使用PS图层，充分利用美工的图片源文件的切图方法。例如下面的图像：
        
        如果要将其中的圆角方形图标切出来，高级切图一般这么做：
        1）、先用隐藏其他图层的方法找到目标元素所在图层。也就是把无关图层前面的眼睛关掉：
               
               看到没，“定位系列”按钮相关的图层被我找见了。那么把他周围重叠的其他图层全部关掉，只留下有用的。
          2）、在看得见的图层上点击右键，选择“合并可见图层”：
               
          3）、选择想要选区，复制：
               
          4）、新建图像，然后粘贴，记得把新图像的背景图层删除掉：
            
         5）、另存图像为1.png，即存在透明部分的图像即可。

        说完了高级切图，那么说说低级切图：
        低级切图一般吧美工设计的jpg文件拿过来，做个选区就切了。切的结果是得到了一个有背景的方方正正的按钮图像：
        
       这样的图像虽然也能用，但是偏离了美工设计的初衷，比如上面的图标，其灰色阴影美工设计时的初衷应该是不受网页背景的影响，但是用低级切图切出来的图像，如果网页背景改成了不是白色，这个图片就需要处理了。
       我这么说并不是说低级切图不能用，两种方式要依照目标使用。

      3、切图要善用css和图像的组合，可以减少图像的使用量。
        例如下面的登陆对话框：
      
        如果将美工设计稿的整体作为一个完整背景，则在代码过程中需要在页面定位输入框的位置，有时比较麻烦； 如果将整幅图切得过细，又觉得拼合起来比较麻烦，那么就可以按照图中虚线所示的位置，把图像切成3份，中间位置的那份最后只取一像素行做背景就可以了。这样页面代码量可以尽可能地减少。
        

      

---

欢迎光临 德克云技术联盟 (http://www.decoclouds.com/)