自由的控制视图系列

  • 自由的浏览图片:按住空格后,鼠标拖动
  • 自由的缩放图片:按住alt+滚轮
  • 切换到实际像素(100%):Ctrl + 1
  • 工作区类型切换:Tab


控制内容系列

  • 通过画面上点选一个图层:Alt + 鼠标右键
  • 在画面上拖动一个图层:V 切换到移动模式 鼠标拖动
  • 复制拖动一个图层:移动模式下 Alt+拖动
  • 删除一个图层:选中要删除的图层 按下 Delete
  • 合并多个图层:选中要合并的图层 按下 Ctrl+E
  • 选区内填充颜色:Alt+Delete (前景色) Ctrl+Delete(背景色)
  • 缩放当前选择图层:Ctrl+T(自由变换模式)


实用工具系列

  • 画一个选区:点击M进入选区模式 , 鼠标拖画
  • 放弃选区:Ctrl+D
  • 吸管工具:点击I进入吸管模式,点选画面颜色

  • 文字工具:点击T进入文字模式,点选画面的文字或者创建新文本
  • 切片工具:点击C进入切片模式(旧版本会有不同)
  • 快速隐藏其他图层:alt+小眼睛

  • ctr+r标尺

切图之前的思路分析

拿PSD效果图后,首先应该对这张效果图进行分析,在切图层面上,主要分析三点哪些图片是单独的,比如Logo和banner部分

哪些图片是需要平铺的,比如导航部分的背景*

哪些图片是需要CSS sprite
比如一些列表前面的icon小图标

图片的格式
logo统一切成png透明度(颜色较少的都用png)

看透明度情况使用png8png24

一般情况下临时图
、ad
、banner
图用jpg格式,色彩丰富的、大图切成jpg

颜色较少的都用png,用png8还是png24需看图片具体透明底情况,半透明的切成png24

在保证图片的画质情况下,图片的大小越小越好

尺寸小的,色彩不丰富的和背景透明的切成gif或者png8的

(注:IE6不支持PNG24透明度图片,需做兼容处理或切成PNG8)
*
【PNG-8和PNG-24的区别】png8有1位的布尔透明通道(要么完全透明,要么完全不透明)png24则有8位(256阶)的布尔透明通道(所谓半透明)**

png-8gif有一些相似之处,模式都是索引颜色,只支持像素级的纯透明,不支持 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切图的几个快捷键及总结的更多相关文章

  1. PS Web切图界面设置

    界面为移动工具时(快捷键V),选中左上角的图层. 点击视图,选中显示→智能参考线,与标尺. 点击窗口,把"库" "颜色"去掉,把屏幕右上角的"通道&q ...

  2. Mac下Web切图常用PS快捷命令

    Mac下 Z 放大镜 双击放大镜   图片会回到100%大小 C 切片工具 B 画笔    alt 在B模式下 吸取颜色 M   选区(默认) 点击第二次M   矩形选区 可以固定大小 shift+c ...

  3. 学习笔记2:前端PS切图

    前端PS切图 一.Photoshop的界面设置 二.Photoshop的基本操作 三.Photoshop的传统切图 四.Photoshop的精准切图 五.Photoshop的扩展知识 视频学习:htt ...

  4. PS切图篇

    一.PS界面设置 1.新建(ctrl+n) 初始化尺寸参数 预设:自定 宽度:1920px 高度:自设(如:2000px) 分辨率:72像素/英寸 颜色:RGB/8位 背景内容:透明 存储为预设 2. ...

  5. photoshop切图介绍

    第一部分:界面设置 1.点击“文件-新建”(或者ctrl+n)打开一个新建对话框.名称可随意填写.“预设”设置为自定,“宽度”一般选择1920,“单位”选为像素.“高度”可选择为2000,“单位”选为 ...

  6. photoshop切图介绍 && photoshop下载与破解

    第一部分:界面设置 1.点击“文件-新建”(或者ctrl+n)打开一个新建对话框.名称可随意填写.“预设”设置为自定,“宽度”一般选择1920,“单位”选为像素.“高度”可选择为2000,“单位”选为 ...

  7. 前端开发工程师必备JS技能-切图

    /******************************************** 学习时间:2015年12月21日 学习者:易天曦 学习目的:掌握切图技巧 学习目标:1.学会从网页设计师的P ...

  8. PS:切图

    1.从psd中获取资源 2.基本了解 3.简单的图片操作和调整 4.对自己的审美提高一.界面设置: 1.新建设置:ctr+n; 预设:Web,大小Web(1920*1080) 背景:透明 2.移动工具 ...

  9. ps切图设置

    1. 新建设置 文件->新建->预设->自定义 1920 像素 2000 像素 72 像素/英寸 背景内容 透明 存储预设 2.视图设置 视图->显示->智能参考线选中视 ...

随机推荐

  1. git版本控制 for window安装和命令行使用

    Git 安装配置 Windows 平台上安装 在 Windows 平台上安装 Git 同样轻松,有个叫做 msysGit 的项目提供了安装包,可以到 GitHub 的页面上下载 exe 安装文件并运行 ...

  2. 读书笔记(一)—— 浅析浏览器渲染过程和html中的文件加载

    在构建页面时,我们会在html中载入一个或多个css和js文件.或许大家都已经习惯了"最佳实践"中,css文件应该放在<head>标签中引入,而js文件则是放在< ...

  3. MySQL checkpoint深入分析

    1.日常关注点的问题 2.日志点分析 3.checkpoint:脏页刷盘的检查点 4.模糊检查点发生条件 1.master thread checkpoint 2.flush_lru_list che ...

  4. Autofac in webapi2

    安装包:Autofac.webapi2 注意: install-package autofac.webapi2 (注意:您的项目中如果使用的是webapi2,此处必须为webapi2而不是webapi ...

  5. MSYS2使用教程

    一.安装 官方下载地址 http://www.msys2.org/ 指定好安装路径(一般D根目录即可),一路下一步就好. 二.配置国内镜像 使用[清华大学开源软件镜像站]中的地址,修改\etc\pac ...

  6. adb shell screenrecord命令行使用说明

    一.查看帮助命令,参数 --help D:\>adb shell screenrecord --help Usage: screenrecord [options] <filename&g ...

  7. 关于JS中数组的分析操作

    JS数组的基础操作代码: <script type="text/javascript">        数组的三种定义    var arr1 = new Array( ...

  8. Android图片轮播控件

    Android广告图片轮播控件,支持无限循环和多种主题,可以灵活设置轮播样式.动画.轮播和切换时间.位置.图片加载框架等! 使用步骤 Step 1.依赖banner Gradle dependenci ...

  9. 012.Adding a New Field --【添加一个新字段】

    Adding a New Field 添加一个新字段 2016-10-14 3 分钟阅读时长 作者 By Rick Anderson In this section you'll use Entity ...

  10. Clang之词法分析Lex

    Clang是LLVM编译器框架的前端(Frontend)编译器,可编译链接C.C++.Objective-C和Objective-C++四种语言的项目代码.Clang 的开发目标是提供一个可以替代 G ...