web切图的几个快捷键及总结
自由的控制视图系列
- 自由的浏览图片:按住空格后,鼠标拖动
- 自由的缩放图片:按住alt+滚轮
- 切换到实际像素(100%):Ctrl + 1
- 工作区类型切换:Tab
控制内容系列
- 通过画面上点选一个图层:Alt + 鼠标右键
- 在画面上拖动一个图层:V 切换到移动模式 鼠标拖动
- 复制拖动一个图层:移动模式下 Alt+拖动
- 删除一个图层:选中要删除的图层 按下 Delete
- 合并多个图层:选中要合并的图层 按下 Ctrl+E
- 选区内填充颜色:Alt+Delete (前景色) Ctrl+Delete(背景色)
- 缩放当前选择图层:Ctrl+T(自由变换模式)
实用工具系列
- 画一个选区:点击M进入选区模式 , 鼠标拖画
- 放弃选区:Ctrl+D
- 文字工具:点击T进入文字模式,点选画面的文字或者创建新文本
- 切片工具:点击C进入切片模式(旧版本会有不同)
快速隐藏其他图层:alt+小眼睛
ctr+r标尺
吸管工具:点击I进入吸管模式,点选画面颜色
切图之前的思路分析
拿PSD效果图后,首先应该对这张效果图进行分析,在切图层面上,主要分析三点哪些图片是单独的,比如Logo和banner部分
哪些图片是需要平铺的,比如导航部分的背景*
哪些图片是需要CSS sprite
比如一些列表前面的icon小图标
图片的格式
logo统一切成png透明度的(颜色较少的都用png)
看透明度情况使用png8或png24
一般情况下临时图
、ad
、banner
图用jpg格式,色彩丰富的、大图切成jpg
颜色较少的都用png,用png8还是png24需看图片具体透明底情况,半透明的切成png24
在保证图片的画质情况下,图片的大小越小越好
尺寸小的,色彩不丰富的和背景透明的切成gif或者png8的
(注:IE6不支持PNG24透明度图片,需做兼容处理或切成PNG8)
*【PNG-8和PNG-24的区别】png8有1位的布尔透明通道(要么完全透明,要么完全不透明),png24则有8位(256阶)的布尔透明通道(所谓半透明)**
png-8 和gif有一些相似之处,模式都是索引颜色,只支持像素级的纯透明,不支持 alpha 透明。
(注:我们通常说的“IE6不支持 PNG 透明”,是指不支持 PNG-24 的透明。但是 IE6 支持 PNG-8 的透明,就像支持gif的透明一样)
切图的一些小技巧
Ctrl+N
新建一个透明背景图层(大小识图层比例而定,比裁剪的图层大就行)
shift
+鼠标左键点击图层可选中多个图层进行操作
Ctrl
+鼠标左键选中需要裁剪的图层移至第1步中新建好的透明背景图层当中,再按ctrl+shift+E
进行合并可视图层。
Ctrl
+鼠标左键点击右边图层栏的选区视图,选中需要裁剪的图层选区,再按快捷键[Alt+I+R
(裁切)或Alt+I+P
(裁剪)]进行裁剪
裁剪完成后ctrl+shift+alt+s
进行保存为web可用格式。
web切图的几个快捷键及总结的更多相关文章
- PS Web切图界面设置
界面为移动工具时(快捷键V),选中左上角的图层. 点击视图,选中显示→智能参考线,与标尺. 点击窗口,把"库" "颜色"去掉,把屏幕右上角的"通道&q ...
- Mac下Web切图常用PS快捷命令
Mac下 Z 放大镜 双击放大镜 图片会回到100%大小 C 切片工具 B 画笔 alt 在B模式下 吸取颜色 M 选区(默认) 点击第二次M 矩形选区 可以固定大小 shift+c ...
- 学习笔记2:前端PS切图
前端PS切图 一.Photoshop的界面设置 二.Photoshop的基本操作 三.Photoshop的传统切图 四.Photoshop的精准切图 五.Photoshop的扩展知识 视频学习:htt ...
- PS切图篇
一.PS界面设置 1.新建(ctrl+n) 初始化尺寸参数 预设:自定 宽度:1920px 高度:自设(如:2000px) 分辨率:72像素/英寸 颜色:RGB/8位 背景内容:透明 存储为预设 2. ...
- photoshop切图介绍
第一部分:界面设置 1.点击“文件-新建”(或者ctrl+n)打开一个新建对话框.名称可随意填写.“预设”设置为自定,“宽度”一般选择1920,“单位”选为像素.“高度”可选择为2000,“单位”选为 ...
- photoshop切图介绍 && photoshop下载与破解
第一部分:界面设置 1.点击“文件-新建”(或者ctrl+n)打开一个新建对话框.名称可随意填写.“预设”设置为自定,“宽度”一般选择1920,“单位”选为像素.“高度”可选择为2000,“单位”选为 ...
- 前端开发工程师必备JS技能-切图
/******************************************** 学习时间:2015年12月21日 学习者:易天曦 学习目的:掌握切图技巧 学习目标:1.学会从网页设计师的P ...
- PS:切图
1.从psd中获取资源 2.基本了解 3.简单的图片操作和调整 4.对自己的审美提高一.界面设置: 1.新建设置:ctr+n; 预设:Web,大小Web(1920*1080) 背景:透明 2.移动工具 ...
- ps切图设置
1. 新建设置 文件->新建->预设->自定义 1920 像素 2000 像素 72 像素/英寸 背景内容 透明 存储预设 2.视图设置 视图->显示->智能参考线选中视 ...
随机推荐
- git版本控制 for window安装和命令行使用
Git 安装配置 Windows 平台上安装 在 Windows 平台上安装 Git 同样轻松,有个叫做 msysGit 的项目提供了安装包,可以到 GitHub 的页面上下载 exe 安装文件并运行 ...
- 读书笔记(一)—— 浅析浏览器渲染过程和html中的文件加载
在构建页面时,我们会在html中载入一个或多个css和js文件.或许大家都已经习惯了"最佳实践"中,css文件应该放在<head>标签中引入,而js文件则是放在< ...
- MySQL checkpoint深入分析
1.日常关注点的问题 2.日志点分析 3.checkpoint:脏页刷盘的检查点 4.模糊检查点发生条件 1.master thread checkpoint 2.flush_lru_list che ...
- Autofac in webapi2
安装包:Autofac.webapi2 注意: install-package autofac.webapi2 (注意:您的项目中如果使用的是webapi2,此处必须为webapi2而不是webapi ...
- MSYS2使用教程
一.安装 官方下载地址 http://www.msys2.org/ 指定好安装路径(一般D根目录即可),一路下一步就好. 二.配置国内镜像 使用[清华大学开源软件镜像站]中的地址,修改\etc\pac ...
- adb shell screenrecord命令行使用说明
一.查看帮助命令,参数 --help D:\>adb shell screenrecord --help Usage: screenrecord [options] <filename&g ...
- 关于JS中数组的分析操作
JS数组的基础操作代码: <script type="text/javascript"> 数组的三种定义 var arr1 = new Array( ...
- Android图片轮播控件
Android广告图片轮播控件,支持无限循环和多种主题,可以灵活设置轮播样式.动画.轮播和切换时间.位置.图片加载框架等! 使用步骤 Step 1.依赖banner Gradle dependenci ...
- 012.Adding a New Field --【添加一个新字段】
Adding a New Field 添加一个新字段 2016-10-14 3 分钟阅读时长 作者 By Rick Anderson In this section you'll use Entity ...
- Clang之词法分析Lex
Clang是LLVM编译器框架的前端(Frontend)编译器,可编译链接C.C++.Objective-C和Objective-C++四种语言的项目代码.Clang 的开发目标是提供一个可以替代 G ...