【工具】前端Photoshop

前端photoshop最常见问题:

  1. 字体单位换成像素:按下ctrl+k调出首选项,选择单位与标尺,在里面把文字单位由点改为像素就行了。不过要注意的是,点是很多软件里面文字的默认单位。像素是虚拟单位,如果以它做基本单位在输出的时候可能会出问题。
  2. 切雪碧图:接着魔棒或者快速选择icon图,点击裁剪,把所有的小icon图都拖拽到一个新建的透明的图层中,然后用标尺定位,回车确认裁剪,在文件-储存为web所用格式,预设PNG-24,存储即可。
  3. 切海报大图:隐藏其他图层,只选择可视海报图所在的组,如果图上有文字之类的就会是一个组,隐藏组中不需要的内容。将整个组复制到新的文档,然后合并为一张图。接着魔棒或者快速选择所需要的图,点击裁剪,自动得到最合适的大小,回车确认裁剪,在文件-储存为web所用格式,预设PNG-24,存储即可。
  4. 切片切图:用切片把需要的图片都裁剪出来,然后去掉背景,剪切,选择储存为web所用格式。
  5. 切按钮图:按钮是渐变色无法用颜色设置的,需要保存1px宽度图片然后用平铺来完成的图,在切图时裁剪好后选择图像-画布大小-width为1即可。
  6. 切多图层的图:要么合并它们拖拽到新建的透明的图层中,裁剪,保存。要么直接用裁剪保存。
  7. 获取背景颜色:选择吸管工具,右击保存十六进制代码。
  8. 自动选择图层:在移动工具下选择左上角自动选择-图层。ctrl+鼠标左键。
  9. 仅选择一图层:按住alt然后选择其中一个眼睛。
  10. 测量长度:按下F8,可以看到文字旁边的信息面板会显示宽高。
  11. 复印屏幕:Print Sc SysRq,在PS中粘贴。
  12. 快速切单独小图:把小图选择出来,复制,然后Ctrl+N新建,会新建出和图片一样大小的新图,然后粘贴,即可得到之前选择的小图。
  13. 放大镜:快捷键ctrl++,缩小ctrl+-。双击放大镜欢迎100%。

Photoshop cc版本能用到的切图方法:

Photoshop精准切图

打开文件-脚本-图片保存到文件,然后选择格式,切图等待。。这个方法有毒,有生之年,等不到图片。

photoshop扩展知识

psd图片的自动切图方式,可以把阴影等都切进来,有需要进行学习。

切图技巧步骤1:编辑- 首选项 - 增效工具 - 使用生成器

切图技巧步骤2:文件-生成 - 图片资源【直接通过向图层或文件夹添加或删除后缀名 .png / .jpg / .svg ,自动导出或删除图片。注意:文件名还可以命名为200%文件名(x%文件名是原大小百分之x大小),jpg8、.png8、.png24....(原质量的百分之x)】

.svg格式是一种矢量图的格式,图片变成代码。

抽出资源:文件-抽出资源

复制css:选择-图层-复制成css样式(非智能对象),可用于自己制作的图片或文字

1.编辑——首选项ctrl+k——勾选启动生成器

2.文件——生成——勾选图像资源【文件夹.assets】

3.文件命名--200%文件名space@/文件名8(尺寸/大小)

4.图层--复制CSS sublime text2【这个技能不错】

5.图层管理

原文地址:https://www.cnblogs.com/pearl8/p/8306085.html