Web前端 PS切图
网页切图常用的工具有ps、fireworks，这儿使用ps对网页进行切图，我们通过切图得到所需的图片（.png、.jpg文件），用于给网页提供需要的素材。
ps切图常用的快捷键：
初始化PSD文件：F12
手抓PSD文件：H
放大：ctrl+加号
缩小：ctrl+减号
打开标尺：ctrl+R
切片工具快捷键:C
自由浏览图片：按住空格后，鼠标拖动
自由缩放图片：按住alt+滚轮
工作区类型的切换:Tab
新建一个透明背景的画布：ctrl+N
ps使用小技巧：
1、快速查找某个图片所在图层时，先选中移动工具（V），然后鼠标点击图片，就会看到图片所在图层。
2、撤销以前的操作，点开历史记录，删除要撤销的操作。
3、可以先用切片工具选择图片，然后ctrl+c和ctrl+v将图片复制到新建的图层。
4、双击图层上的T，按ctrl + c和ctrl + v复制PSD上的文字。
切图前的准备：
1、另存网页PSD文件。
2、整合PS图片，整理图层。
切片的具体操作：
1、分割切片
2、切片类型：用户切片（蓝色），非用户切片（灰色）。
切片要点：
1、根据颜色范围来切。
2、切片大小：把网页的切片切的越小越好，网页打开的速度更快。
3、切片区域完整性：保证完整的一部分在一个切片内，例如某区域的标题文字，以后修改时方便。
4、导出类型：GIF：颜色单一，过渡少，有动画的部分，比如灰色的阴影、背景，缺点最多；JPG：颜色过渡比较多，颜色丰富的，且无透明要求时，适用范围广泛，品质选择60-80；PNG-8：颜色色彩不太丰富，无论有无透明要求，保存时需要重新设置无仿色和无杂边；PNG-24：图片有半透明要求时。
5、保留源文件：即使页面做好了也要保留带切片层的源文件，说不上哪一天要修改某一部分。
6、切片命名规则，不要有特殊的字符，最好不要有中文，一般图片的名称都是英文。
需要切片的内容：
1、修饰性的（一般用在background属性）:图标、logo、有特殊效果的按钮、文字、非纯色的背景，一般保存为PNG-8,PNG-24。
2、内容性的（一般用在img标签）：banner、广告图片、文章中的配图，一般保存为JPG。
实际操作：
1、选择切片工具，对需要的素材进行切取，图片微小的修改可以右击编辑切片选项，设置具体的宽高。
2、对于一些带有背景的图片或者带有颜色的图标，可以用移动工具将图标拖到新画布进行切取，也可以点击图层上的眼睛图标将背景隐藏后再切片。
3、切片切好后，点击文件，选择存储为web所用格式，用抓手工具对图片进行移动，切片选择工具对每个切片进行详细的设置。
4、存储时选择所有用户切片。
5、切片后的结果保存在images文件夹下面。
另一种切图的小技巧
1、选择移动工具，勾选自动选择图层。
2、矩形选框工具截图，右击图片所在图层，选择转换为智能选择对象。
3、ctrl + c复制切片，ctrl + n新建图层，ctrl + v将切片复制到图层上。
Web前端 PS切图相关推荐
- 前端ps切图，图文教程，详细。
写在前面:本文主要内容是目前我所知道的切图技巧结合网上的资料,写出来分享一波.图文教程,多图!! BB:很多人都会说,切图这个活倒底分给UI还是分给前端.虽然好的UI会给我们把图切好,但是他们切的图不 ...
- 个人Web前端开发切图PS设置
(一) 文件新建设置 画布大小 Web(1920×2000) 像素 分辨率(R) 72 像素/英寸 颜色模式 RGB 8位 背景内容(透明) (二) 移动工具设置 自动选择不要勾选,右边选择图层 需要 ...
- 前端 ~ PS切图工具
*** 工具准备 *** 1.PS(photoshop) [注意]:安装时,需要先选择"试用",之后通过注册机进行注册,直接重新打开ps应用即可(应该会无需登录) 2.更改:缓存盘 ...
- 前端PS切图（笔记）
一 界面设置 预设WEB 1920*1080 自定义 *2000 72 RGB 背景:透明 自动选择图层 Ctrl+单击 视图>显示>智能参考线>标尺(Ctrl+R) ...
- 实用形ps切图技巧，图片格式及其相关
写在前面 之前写了两篇前端图片相关的内容(前端ps切图方法,图文详细,css sprite雪碧图制作,使用以及相关,图文gif),本文是面向前端小白的,搜集整理的一些切图技巧,及其相关内容. 关于版本 ...
- web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录 传统网页布局的三种方式 标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性 浮动元素会脱离标准流,可以与普通流的元素相重叠 如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
- 前端编程中利用PS切图还原设计图
一. PS 切图 1.1. 常见的图片格式 序号 格式 特点和常用的用途 1 jpg JPEG(.JPG)对色彩的信息保留较好,高清,颜色较多,我们**产品类的图片** 经常用jp ...
- 真正的ps切图方法（前端必看）
看了很多ps切图方法,真的感觉都不是很满意,可能说不是很合适我们前端的用法,毕竟我们要获取的是某一个图层里面的小图片,不需要获取全部切图,好了,废话不多说,看方法. 1.选中所在的图层,commond ...
- 【前端必学】PS切图详细教程3种方法（图层切图，切片，切图神器cutterman）
PSD图像格式是Photoshop的专用格式,里面可以存放图层.通道.遮置等多种设计稿,对我们前端人员来说,最大的优点,我们可以直接从上面复制文字,获得图片,还可以测量大小和距离, 我们开发需要的是一 ...
最新文章
- oracle跨库 导库,Oracle 用dblink 跨库导数据
- 20165212第九周学习总结
- linux mysql 数据文件,Linux下修改MySQL数据库数据文件路径的步骤
- python如何创建函数对列表里的元素进行分类_列表(List)操作方法详解
- 一天学会php(下)
- ApacheCN 交流社区热点汇总 2019.3
- step 3 socket
- 494. Target Sum
- 转换整形数字为16进制字符串
- 如何买基金（一）：三分钟读懂基金分类
- 数据规划（python实现数独自动算法之三）
- python求15 17 23 65 97的因数_pythonlearning
- NLP数据集：GLUE【CoLA（单句子分类）、SST-2（情感二分类）、MRPC、STS-B、QQP、MNLI、QNLI、RTE、WNLI】【知名模型都会在此基准上进行测试】
- 计算机连接未识别的网络,电脑网络连接处出现未识别的网络无Internet访问的解决办法...
- 编译原理：cminus_compiler-2021-fall Lab3
- Kettle/Pentaho的Carte集群配置和使用
- sicily 1209
- CSS雪碧图制作emoji表情包
- MySQL中的排序与分页
- 史蒂夫·乔布斯（简介）