zoukankan      html  css  js  c++  java
  • 前端切图的一些笔记(整理的有点乱)

    切图一:

    1使用移动工具

    自动选择+图层

    2、点击所要切的图标,这时在图层区域会锁定到你所选择的图层

    3、Alt不放,并且点击图层眼睛,这时可以把其他图层隐藏

    注:图要尽量放到大

    4、使用矩形选框工具,选择所要图标

    5、ctrl+shift+c复制(这个复制跟ctrl+c的复制不一样),新建一个透明图层,再ctrl+v粘贴

    6、放大放大,然后选择切片工具进行切块

    注意:可以做成雪碧图(CSS Sprites),设置同样的高度,这样页面上的内容就只需请求一张图片就行了,优化性能

     

    字体:使用字体工具,然后选择字体:

    查看“信息”窗口

     

    边框颜色:

    可以用吸管

    在查看颜色和信息面板

     

     

     

    切图二

    直接放大图片切。。。。。。

    ctrl+h可以隐藏参考性(选择“视图”--“标尺”才能拉出参考线)

    矢量图保存png

    像素图保存jpg

    如果背景有透明的 
    保存png24的

    矢量图放大不会失真

    一般所谓的像素图就是用相机或手机拍的

     

     

    一般刚拿到设计稿 先要看下它多大的

    以前做的设计稿还很多是1024的 
    现在宽屏的一般是1200

    即是内容部分为1200,多处的空出来,内容居中

    我们不是有那种居中的样式吗
    1200; margin:0 auto;

     

    快捷键:

    按ctrl+"+"  放大
    按ctrl+"-"   缩小
    按ctrl+"0"  还原

     

     

    1、使用切片工具,选择切片,然后按Alt,可以拖动进行复制,会显示一个加号

    移动的时候按shift 进行水平或垂直移动

    先按alt 复制出来 
    移动时按shift

    切片工具还有个选择切片工具可以选择n个切片按shift多选

     

    转换图片格式时一定要选中

    这要拖动或按shift多选都可以

    第一次输出一般选所有用户切片

    你要特殊选择每一个切片输出 你要选中它然后输出选选中的切片

     

     

    切片三:

    做切片还有一种用到参考线的

    参考线拉好了点这个

    这个方法有个坏处就是切了很多我们不想要的切片
    输出时一定要选中 你想要的

    2、参考线选好之后,点击“文件”--“存储为web......”,然后再出来的图中,按shift,在点击就可以选中了,并且在最后存储时“切片”要选中“选中的切片”

     

    背景有透明的要用png24

     

     

     

  • 相关阅读:
    N 种仅仅使用 HTML/CSS 实现各类进度条的方式
    使用 CSS 轻松实现一些高频出现的奇形怪状按钮
    通过jdb命令连接远程调试的方法
    (转)Python中asyncio与aiohttp入门教程
    (转)从0到1,Python异步编程的演进之路
    (转)python︱用asyncio、aiohttp实现异步及相关案例
    (转)Python 如何仅用5000 行代码,实现强大的 logging 模块?
    (转)python的dict()字典数据类型的方法详解以及案例使用
    (转)Python Async/Await入门指南
    (转)Python运维自动化psutil 模块详解(超级详细)
  • 原文地址:https://www.cnblogs.com/Chen-XiaoJun/p/5757716.html
Copyright © 2011-2022 走看看