<em id="r6zg7"><ins id="r6zg7"></ins></em><dl id="r6zg7"><ins id="r6zg7"></ins></dl>

    <dl id="r6zg7"></dl>

    <dl id="r6zg7"><ins id="r6zg7"></ins></dl>
    <em id="r6zg7"></em>

      <div id="r6zg7"></div>

      <em id="r6zg7"></em>

      亿品元素设计资源博客

      品味经典包装设计,版式设计,分享实用设计资源、设计软件、插件下载及在线书法字体生成
      登录注册 联系合作 投稿

      亿品元素 » 教程技巧 » 利用Photoshop cs6网格对齐功能绘制高清icon

      利用Photoshop cs6网格对齐功能绘制高清icon

      经常制作ico的朋友应该发现了:一些本来尺寸很大,质量很不错的高清png图片,经过缩小转为ico时却变得惨不忍睹(图标的细节损失?#29616;兀?#32780;当我们去看那些专业人士制作的icon时,却发现,对方制作的ico尺寸虽小,但是细节却保持的非常好,这里面难道有什么技巧么?今天亿品元素就给大家分享一篇关于利用Photoshop cs6网格对齐功能绘制…

      经常制作ico的朋友应该发现了:一些本来尺寸很大,质量很不错的高清png图片,经过缩小转为ico时却变得惨不忍睹(图标的细节损失?#29616;兀?#32780;当我们去看那些专业人士制作的icon时,却发现,对方制作的ico尺寸虽小,但是细节却保持的非常好,这里面难道有什么技巧么?今天亿品元素就给大家分享一篇关于利用Photoshop cs6网格对齐功能绘制高清icon的文章。掌握这一技巧,或许我们也可以制作出高清的icon呢!

      网格对齐

      Photoshop cs6自发?#23478;?#26469;,一直颇受好评,细心的朋友可能发现最新的PS CS6支?#36136;?#37327;对象绘制、变换时像素自动对齐网格,而且非常好用。PS CS6的像素自动对齐网格功能在绘图过程中,无疑方便了很多,不必再担心图形边缘会出现模糊,但是我们在?#23548;?#30340;图形设计过程中会发现,还是会经常需要调整一些路?#30585;?#26377;完全对齐到网格产生的半?#35813;?#30340;过渡像素,用来平滑图形边?#23548;?#23569;锯齿感,或让图形看上去更饱满、更细腻,我们称其为次像素 (或亚像素,Sub-pixel,一般用于屏幕显示技术等领域),如下图所示。

      图1-消除锯齿的次像素

      一、像素对齐网格

      1. 对象绘制时像素对齐网格

      像素对齐网格最大的作用就是避免绘制图形时出现虚边,解决图?#25991;?#31946;的问题,尤其是将画布放大数倍去抠界面、图标细节时,精度可?#28304;?#21040;像素级,让设计师将精力更多的集中在创意表达层面,不必因为担心模糊而谨慎的去操作,从而提高工作效率。

      在PS CS6初始状态时,只有当画布在100%比例下,也就是?#23548;?#20687;素比例时,画出来的图形才不会模糊,放大或缩小画布到其他比例下,即使打开网格进行辅助,画出来的图?#25105;不?#27169;糊,如图2所示,?#28193;?#22270;形与紫色图形分别为100%画布下不打开网格,和非100%比例画布下打开网格随意绘制的相同大小的矩形,我们能明显的看到紫色图形边缘非常的模糊。

      图2-对齐像素图形和未对齐像素图形的对比

      ? 这时的网格没有起到作用,是因为在PS CS6初始状态时,网格的?#38382;?#19981;是以像素为单位,而是毫米,如图-3,首选项窗口可以通过主菜单?#23567;北?#36753;>首选项>常规”或快捷键Ctrl+K来打开。

      图3-初始状态下的网格?#38382;?/p>

      想要在常规图形 (矩形、圆角矩形、圆形) 绘制过程中,使像素在任何情况下都对齐网格,在PS CS6的首选项窗口中,对”参考线、网格和切片”选项卡的网格?#38382;?#36827;行简单的设置,并配合快捷键就可以做到。

      图3中可以看到网格线间隔的默?#29616;?#26159;25毫米,将单位改为像素,这时单位前面的数值会自动变为1,这时的网格线并?#20174;?#30011;布上的像素格对齐,需要手动重新输入数?#25285;?#19988;网格线间隔数值与子网格数?#24403;?#39035;相等,图4展示的是在3200%比例下,两种不同数值网格所呈现出的效果,可根据自己的喜好进行调整。网格?#36175;?#36807;主菜单”视图>显示>网格”来显示或隐藏,快捷键为Ctrl+’(回车左侧的引号键)。

      图4-不同网格?#38382;?#21576;现的效果

      完成了如上设置,最后确保”主菜单>视图>对齐”及”对齐到>网格”两个选项已勾选,”对齐到>网格”选项在打开显示网格的情况下才可编辑。

      图5-对齐功能及相关选项

      像素对齐网格设置完成,以后在非100%视图下绘制常规图形,只要打开网格辅助,就不会出现模糊情况。像素对齐网格在PS CS6中还是存在一定的局限性,受到图形形状的?#38469;?#24403;使用线条工具、多边形工具、自定义形状工具绘制一些带有倾?#21271;?#32536;或非直角的图形时,还是无法保证所有角点和边缘对齐网格,当然这里的模糊更多的是防锯齿效果,可以利用网格手动调整。

      2. 对象变换时像素对齐网格

      PS CS6中,长宽都是奇数或都是?#38469;?#26102;,进行90°变换时都可以对齐像素,当长宽数值分别是奇数和?#38469;?#26102;,再进行顺时针或逆时针90°变换就会使图?#25991;?#31946;,无法对齐到像素,这时可以先旋转,然后打开网格进行辅助,不要退出自由变换模式,拖动对象,这时边缘就会自动吸附对齐网格,如下图:

      图6-变换图形时对齐网格

      二、利用次像素让图形更饱满

      举个小例子,看看次像素在图形设计中的作用,抛砖引玉。

      在界面设计中,经常会绘制下拉菜单等控件上的三角形箭头形状,最常见的做法就是用铅笔工具点象素画出来,如图7-a所示,看上去很清晰,但在分辨?#24335;?#23567;的屏幕上看,会稍显生硬、有锯齿感,影响界面的细腻度;用路径对齐网格绘制箭头,如图7-b所示,解决了锯齿问题,但看上去体量感被削弱了,不够饱满;图7-c中所示的效果,是对次像素微调后的效果,既消除了锯齿,而且在体量感上不输第一种方案的效果。

      图7-三种不同方法绘制的箭头

      没看出差别?我们将三种方案放在一起对比下,见图8,从左至右?#26469;?#20026;图7中的a、b、c方案,我们看到中间的b方案虽然没有了锯齿,但体量上明显小于a、c方案,而c方案同?#26412;?#22791;无锯齿、相等的体量感两个优点。

      图8-下拉箭头效果对比

      通过放大图片我们可以看到在次像素上的差别,要达到方案c的方法其实很简单,看看下图放大的效果和路径你就明白了。

      图9-使用路径改善后的次像素

      只要将角点上的路?#30585;?#28857;分别向外移动一点,让原本颜色比?#31995;?#30340;次像素稍微加深就可以了,操作时,放大画布让调节更细微和精确,选中锚点,轻点多次键盘上的方向键来移动即可,这个方法不局限于箭头形状,大家可以开启像素眼去发现更多的应用场景。

      原文:http://www.shejidaren.com/icon-pixel-tutorial.html

      打赏

      如果本站对您有所帮助,请考虑对本站进行小额捐赠:

      捐赠亿品
      相关内容
      亿品标签 » ? ? ?

      发表评论

      如何下载本站资源『所有留言都会被审核,请勿发布垃圾评论』

      (必填)*

      pc蛋蛋贴吧
        <em id="r6zg7"><ins id="r6zg7"></ins></em><dl id="r6zg7"><ins id="r6zg7"></ins></dl>

        <dl id="r6zg7"></dl>

        <dl id="r6zg7"><ins id="r6zg7"></ins></dl>
        <em id="r6zg7"></em>

          <div id="r6zg7"></div>

          <em id="r6zg7"></em>

            <em id="r6zg7"><ins id="r6zg7"></ins></em><dl id="r6zg7"><ins id="r6zg7"></ins></dl>

            <dl id="r6zg7"></dl>

            <dl id="r6zg7"><ins id="r6zg7"></ins></dl>
            <em id="r6zg7"></em>

              <div id="r6zg7"></div>

              <em id="r6zg7"></em>