码迷,mamicode.com
首页 > 其他好文 > 详细

前端PS切图(笔记)

时间:2016-02-26 12:30:36      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:前端切图

一 界面设置

  • 预设WEB 1920*1080

  自定义    *2000   72  RGB  背景:透明

  • 自动选择图层  Ctrl+单击

  • 视图》显示》智能参考线》标尺(Ctrl+R)

  • 窗口   图层,历史记录,信息,字符

         信息面板中  单位:像素    一、二颜色:RGB  文档尺寸

  • 编辑》首选项》单位与标尺  单位:像素

  • 保存  窗口》工作区》新建工作区》WEB切图

二 PS基本操作

 1.简单工具

  • 选区  单击选择   双选区,单击同时,shift加选区  alt减选区

  • shift正圆  alt固定圆心画圆  Ctrl +放大   Ctrl -缩小  Space移动

  • 移动V 选区M + Shift 切换下三角选择项

  • 快选 [大  ]小   魔棒 填充,内容识别 

  • 裁剪C  选中图层裁;选区裁,自动按包含选区的最小矩形裁

  • 吸管 点改前景色

  • 污点修复(有羽化值)  画笔、图章

  • 历史记录画笔  高斯模糊后使用,可以去斑点

  • 模糊、涂抹、减淡、海绵

  • 字体毛边Window LCD,走钢笔路径

  • 蒙版 选区

  • 快捷键 Ctrl+Alt+Shift+E:盖印图层  Alt+Del:填充前景色

        Ctrl+T:自由变换   Alt+拖动:复制图层  Ctrl+R:标尺  

        参考线拖拉过程中,按Alt横竖参考线互变

 2.图层原理、操作

  • 变换选区缩小得同心圆选区

 3.参考线及辅助

 视图》新建参考线  或者Alt+V+E+H 水平参考线

                      V 垂直

 选中图层后,拉参考线会自动吸附边缘

 Ctrl+;隐藏/显示参考线

三 切图

 1.传统切图:拖参考线,切片》基于参考线切图》导出(先裁剪再切会快些)

        Alt+Shift+Ctrl+S生成WEB所用格式(导出)

 2.精准切图:脚本》将图层导出到文件,PNG24全勾选(仅限高版本PS)

 3.(1)编辑》首选项》增效工具》启用生成器 

  (2)文件》生成》图像资源

  (3)图层重命名为 图层.png  会自动生成图片 也可.svg

              200%button@2X.jpg 双倍Retina屏使用

  • 文件》抽出资源   图层》复制CSS(生成CSS代码)

        

前端PS切图(笔记)

标签:前端切图

原文地址:http://djvvv9.blog.51cto.com/4575248/1745214

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!