声明: web小白的笔记,欢迎大神指点,联系QQ:1522025433。

工具:Photoshop

1.复制文字:点击文章工具后选择文字。

2.矩形选框工具 看信息 f8, 取消矩形选框 Ctrl+D。

3. 传统切图:用工具栏的 矩形选框工具 选中你想要的图片部分,然后选择编辑栏(最顶上的一栏)选择 图像-->裁剪 然后你想要的图片就出来了,
然后再 储存为web所用格式(点击编辑栏的 文件-->储存为web所用格式 ) 即可。

4.快速切图(快速切图的代替方法吧,可以和切图达到一样的效果,传统意义上的切图,图像边缘有渐变色,可能会切掉,建议使用这种方法,
这种方法做不到再进行传统切图):选择工具栏中的 移动工具,在上面选择 自动选择 前打上√,在 自动选
择后 选择 图层(此时你可以拖动你要选择或要切的图,观看是否移动,看看有没有选中),
选中此 图层 后,右键此 图层 把此图层 转换为智能对象 ,然后选择 矩形选框工具 ,框选住你要切的图 Ctrl+c 复制,然后
Ctrl+n 新建 ,此时就会记住你选择图层的画布大小,然后 Ctrl+v 粘贴 刚刚复制的图,就OK了,
最后,储存为web所用格式即可。

5.f12 初始化图片,即重新打开 文件。

6.ctrl+alt+z 撤销

7.看文字的宽度:用3的方法选取文本框(图层内只有文字的图层)后,按住ctrl键点击文字图层(就是利用魔棒工具选中文字,然后看其宽度),
同时也在信息窗口就可以看见文字的宽度了。当然也可以用3 方法看大小,即 ctrl+n新建 看画布的大小。

8.雪碧图的制作: 先按照3的步骤做出一个 图标,让后根据 下一个图像的大小增大画布(编辑栏 图像-->画布大小),然后直接选中psd稿里的第二个
图标图层,直接拖拽到,画布增大的位置,利用键盘上的上下左右进行微调。

9. 如果想给图片加背景,就新建一个图层(新建方法:编辑栏 图层-->新建-->图层)。可以利用工具栏里的油漆桶工具(和渐变工具,3D材质拖放工具在一块),
为图层填充颜色。填充的时候一定要先选中要填充颜色的图层,别弄错了。这里要注意一点,在图层窗口里,要看图层的排列顺序,在上面的图层会
显示在 在下面的图层 的上面。也就是说上面的图层会覆盖下面的图层。

10. 图层的打开方法: 在编辑栏中 选择 窗口-->勾选 图层。 就会出来。

web中切图、快速切图与web雪碧图制作的方法的更多相关文章

  1. shoeBox超实用的雪碧图(Sprite)图制作工具-使用

    从前端优化说起 浏览器载入单张图片的速度基本取决于图片的大小,但是载入多张图片的速度却和另一个要素息息相关-网络请求数,在图片大小和一致的情况下,图片张数越少其请求数越少其载入速度也就越快.所以在使用 ...

  2. 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)

    一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...

  3. 快速获取雪碧图的图标样式插件 - gulp-css-spriter教程

    如何快速把合成好的雪碧图,快速获取图标的样式呢? 用gulp-css-spriter很简单. 第一步: 在某个文件夹用shitf+鼠标右键 第二步: npm install gulp-css-spri ...

  4. CSS Sprite雪碧图应用

    在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...

  5. compass与css sprite(雪碧图)

    什么是css sprite? css sprite,中文叫雪碧图,也有人喊CSS精灵,就是一种背景拼合的技术,然后通过background-position来显示雪碧图中需要显示的图像. MDN相关链 ...

  6. Vue-cli3.0下的雪碧图插件webpack-spritesmith配置方法

    在前端项目中,为了减少对图片的请求次数,一般而言需要进行雪碧图的配置.即将多张小图标合并成一张图片,这样页面中的小图标都在一张图片上,只需请求一张图片,就可以通过CSS设置各个小图标的显示,利于节省带 ...

  7. 深入浅出CSS(二):关于雪碧图、background-position与steps函数的三角恋情

    [测试代码] HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  8. Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程

    Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程 用excel作图时候经常会碰到做柱状图和折线图组合,这样的图一般难在折线图的数据很小,是百分比趋势图,所以经常相对前面主数据太小了,在 ...

  9. CSS Sprite雪碧图的应用

    CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...

随机推荐

  1. range与xrange的区别

    一.Python中range()与xrange()有什么区别 range([start,] stop[, step]),根据start与stop指定的范围以及step设定的步长,生成一个序列 rang ...

  2. unity2D动画和图片切割

    视频地址:   http://www.tudou.com/listplay/siFwDsllSEM.html 恩,我得到了素材,是这样的 这是一整张的图片,png格式的.很明显,这是类似于一个帧动画之 ...

  3. AES加密【转】

    .   此时就一定要使用如下代码步骤 : 1.SecureRandom的key定下来. SecureRandom 实现完全隨操作系统本身的內部狀態,除非調用方在調用 getInstance 方法之後又 ...

  4. Spring RedisTemplate操作-序列化性能测试(12)

    @Autowired @Qualifier("redisTemplate") private RedisTemplate<String, String> stringr ...

  5. Android studio 自动导入(全部)包 import

    http://blog.csdn.net/buaaroid/article/details/44979629 1 Android studio 只有import单个包的快捷键:Alt+Enter.没有 ...

  6. Python XML操作

    XML(可扩展性标记语言)是一种非常常用的文件类型,主要用于存储和传输数据.在编程中,对XML的操作也非常常见. 本文根据python库文档中的xml.etree.ElementTree类来进行介绍X ...

  7. TCP网络编程

    TCP网络编程  与UDP不同的是TCP是通过客服端和服务端的方式来传输数据的.客服端:public class TCPClient { /**     * @param args     * @th ...

  8. weblogic基本目录介绍,位数查看,启动与发布项目,修改JVM参数,设置项目为默认项目

    这里的基本目录%base%表示安装目录,如我的目录为:E:/weblogic就是%base% 1.weblogic目录介绍 weblogic主要的目录介绍: 1.日志目录: 每个domain(域)都有 ...

  9. latex 字体大小设置

    tex 设置字体大小命令由小到大依次为: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \huge \ ...

  10. C语言函数调用栈(三)

    6 调用栈实例分析 本节通过代码实例分析函数调用过程中栈帧的布局.形成和消亡. 6.1 栈帧的布局 示例代码如下: //StackReg.c #include <stdio.h> //获取 ...