zoukankan      html  css  js  c++  java
  • 页面制作 Chapter 1--PhotoShop切图笔记

        由于自己大二自己玩过PS,所以,这节课就相对容易点。但是,PS不经常用的后果就是快捷键容易忘......

        1、PS首选项的设置

             编辑>首选项>单位与标尺,把标尺和文字单位改成像素

        2、创建切图需要的工作区,关闭不需要的面板(窗口>工作区>新建工作区>保存工作区),右上角选择工作区

            a.信息面板(F8)

            b.图层面板(F7)

            c.历史记录面板

            d.工具栏

            e.选项栏

         3、切图常用的工具

              a.移动工具(选择图层、移动图层)

              b.矩形选框工具(选择矩形框,查看信息面板,获取选中区域的宽高)

              c.魔棒工具(容差越小,选择的颜色范围越小;消除锯齿,让边缘光滑)

              d.裁剪和切片工具

              e.取色器

              f.缩放工具(放大画布:Ctrl+加号,缩小画布:Ctrl+减号,画布变成100%:Ctrl+1。可以设置滚轮缩放,更方便!)

          4、组的概念

               类似于文件夹

          5、辅助视图

               在视图菜单下开启:对齐(在移动图层时,当靠近参考线或者别的图层或者文件边缘会有吸附力)、标尺(Ctrl+r) 、显示>参考线(需勾选显示额外内容)

               参考线的快捷键:Ctrl+;

          6、CSS Sprite或者图片精灵

               推荐文章:http://www.css88.com/archives/756

          7、打开设计稿,获取信息

               -尺寸信息(所有数字都要测量,矩形选框工具结合信息面板,测量时画布尽量放大!)

                 a.宽度、高度

                   巧用添加到选区功能测量较大的布局宽度:  在画布最左边作一个小的矩形选区,按住shift键,在画布最右侧作一个小的矩形选区,信息面板上的w即为布局宽度

                 b.内边距、外边距

                 c.边框

                 d.定位

                 e.文字大小

                    当文字是单独的图层,直接利用文字工具;

                    当文字图层被合并之后,就用矩形选框工具,获取的矩形高度信息就是文字大小。由于文字字体不同,字号会有差异,因此在测量文字大小时,选择较大的文字测量。

                 f.行高

                    当文字是单独的图层,直接利用文字工具;

                    当文字图层被合并之后,就用矩形选框工具,第一行文字的底部到第二行文字的底部的矩形高度就是行高         

                g.背景图位置

                  -颜色信息(所有颜色都要取色,取色时画布尽量放大,用拾色器和吸管工具)

                    a.边框色

                    b.背景色

                       利用取色器判断是否为纯色;

                       巧用魔棒工具确定是否为线性渐变;

                    c.文字颜色

                       当文字是单独的图层,直接利用文字工具;

                       当文字图层被合并之后,放大画布,用吸管工具取色;

                       如果文字图层被添加了叠加效果,就不用文字工具获取颜色,而是用拾色器。

        8、切图之前先要明确哪些是需要切出来的

             -修饰性的(一般用在background属性):

               a.图标、logo

               b.有特殊效果的按钮、文字等

               c.非纯色背景

             -内容性的(一般用在img标签)

               a.banner、广告图片

               b.文章中的配图...

         9、切出来的图片的保存类型

              内容性的:颜色丰富的保存为JPG;

              修饰性的:PNG8,PNG24(都支持全透明,但PNG24支持半透明,IE6不支持PNG24的半透明)

        10、隐藏文字只留背景

               -若文字为独立图层,隐藏文字图层即可

               -若文字和背景合并,平铺背景覆盖文字即可

                如果背景是纯色的,直接填充背景色,so easy,如果背景是渐变色,就用到矩形选框工具和自由变换(Ctrl+T)

                较为麻烦的是背景色是纹理图,不能用自由变换的方法,只能用移动工具+Alt+Shift,水平方向移动矩形区域,注意纹理要对齐噢!

        11、可平铺背景的切图

               沿X轴平铺内容,充满文件的宽

        12、保留一份PSD,在PSD上进行后期修改

               沿Y轴平铺的内容,充满文件的高

        12、切片工具(使用于可以一刀切的活动页)

               ·拉参考线

               ·选择切片工具

               ·点击"基于参考线的切片"按钮

               ·选择切片选择工具,在切片内容上右键>编辑切片选项>名称,修改每个切片内容的名称

               ·保存为Web所用格式,选中所有的切片内容,然后进行统一的设置,比如保存的格式,品质等

        13、保存

              ·存储所需内容(三个快捷键连用:复制Ctrl+C、新建Ctrl+N、粘贴Ctrl+V)

                新建时背景内容选择透明

              ·存储为Web所用格式(Ctrl+Shift+Alt+S)

               -当图片颜色丰富且无透明要求时,建议保存为JPG格式并选择合适的品质,一般为60-80

               -当图片颜色不太丰富时,无论有无透明要求,建议保存为PNG8格式,保存时设置 无仿色,无杂边(可以把这种设置保存起来,方便下次使用)

               -当图片有半透明要求,保存为PNG24(对图片不进行压缩,所以文件较大)

        14、修改和维护

               a.要继续放更多的图标则需要更改画布大小,定位选择在左上角,可以使得已经在使用的图片不用修改CSS

               b.移动图标

                  若图标为独立的图层,直接用移动工具;

                  若图标为非独立图层,用矩形选框工具选择需要移动的图标,然后移动到合适的位置,再用剪切(Ctrl+X),再用粘贴(Ctrl+V),就能把需要移动的图标建立在新图 层上;

               c.要减小画布到指定区域(矩形选框工具、裁剪工具)

                  为了增加可维护性,画布一般要稍大于图像内容。

        15、PNG8格式的颜色模式默认为索引颜色,在修改时需更改颜色模式为RGB颜色

        16、图片合并方案

              a.Sprite拼图,好处:减少网络请求,提升页面加载速度

              b.压缩工具 

                 有损:TinyPng(在线网站)

              c.合并( 图片之间必须保留空隙)     

                 -图片排列方式:横向排列 纵向排列

                 -合并与分类

                   ·把同属于一个模块的图片合并

                   ·把大小相似的图片合并

                   ·把颜色相近的图片合并

                   ·综合以上方式合并

              d.合并推荐

                 -只本页用到的图片合并

                 -有状态的图标合并

        17、浏览器兼容的方案

              -IE6不支持PNG24半透明,则存两份图标,对高级浏览器保存一份PNG24的,对IE6保存一份PNG8的

              -让高级浏览器使用CSS3,让低级浏览器用切图+骇客,或者优雅降级原则,都用CSS3处理,让低版本浏览器没有这种效果。如让高级浏览器使用圆角效果,让不支持的浏览器使用直角效果

                    

                        

           

       

       

  • 相关阅读:
    PyQt作品 – PingTester – 多点Ping测试工具
    关于和技术人员交流的一二三
    Pyjamas Python Javascript Compiler, Desktop Widget Set and RIA Web Framework
    Hybrid Qt applications with PySide and Django
    pyjamas build AJAX apps in Python (like Google did for Java)
    PyQt 维基百科,自由的百科全书
    InfoQ:请问为什么仍要选择Java来处理后端的工作?
    Eric+PyQt打造完美的Python集成开发环境
    python select module select method introduce
    GUI Programming with Python: QT Edition
  • 原文地址:https://www.cnblogs.com/rosestudy/p/4678676.html
Copyright © 2011-2022 走看看