PS中的精灵图缩小方法

本人为CSDN小白，第一次写博客，肯定存在很多问题，请大家见谅。
正文：
很多人习惯使用FW了，身边很多朋友的PS也是又爱又恨，在前端学习过程中踩坑，现就自己在学习中的一些方法进行分享。
问题：
无法安装FW或者没有FW，有PS，想实现在FW中打开精灵图后缩小精灵图，以实现二倍缩小的效果。

解决办法：
打开PS-导入精灵图-点击功能栏里面的图层-选择图片大小-选择调整为自定-宽高设置那里进行调整。
注意：缩小精灵图后，在代码中一定要缩小原始精灵图的宽度，才能在导入精灵图选择XY轴像素后实现精灵图的使用。

background: url(此处放图片) no-repeat -XXpx -XXpx;
background-size: （此处像素选择原始精灵图宽度的一半）px   auto;

1.打开PS-导入精灵图-点击功能栏里面的图层-选择图片大小

2.选择调整为自定-宽高设置那里进行调整

3,选择需要导入代码中的精灵图的位置（点击拆解，框选需要的精灵图，鼠标移至左上角，查看信息，选择X和Y轴信（F8），带入代码中）

分享完毕，希望能帮到大家。

PS中和FW一样的精灵图缩小功能（像素栏输入数字就能缩小相关推荐

css精灵列表使用实例,介绍一个导出CSS精灵图动画的AE小脚本
作者:李威在H5项目中如果有动画需求,一个常见的流程是设计师用 After Effect 制作动画,然后导出为序列帧. 序列帧就是一张张图片,快速连续播放就能成为动画,但是在H5里直接播放序列帧对网 ...
PS-怎么用ps查看精灵图(雪碧图)的位置?
我平时都是用firework,今天用ps测了一下位置. 1.打开ps软件,菜单栏文件–打开–我们的精灵图(雪碧图). 2.选择左侧菜单栏–第一个虚线框 3.选择之后,去选择我们要看位置的区域,之后选择 ...
运用ps查看雪碧图（精灵图）的准确位置的方法
运用ps查看雪碧图(精灵图)的准确位置的方法运用ps测位置今天亲手试一下希望对各位有用! 1.打开ps软件,菜单栏文件–打开–我们的精灵图(雪碧图). 2.选择左边的菜单栏的矩形选框工具 3.用选框 ...
PS的安装、背景、背景练习、雪碧图/精灵图、线性渐变、径向渐变、电影卡片练习——06fontbackground
目录一.PS的安装二.背景(background-color.background-image. background-repeat.background-position.background- ...
精灵图和字体图标学习
精灵图为什么需要精灵图? 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度因此,为了有效的 ...
CSS高级技巧：精灵图、字体图标、三角形制作、布局技巧
CSS高级一.精灵图二.字体图标字体图标的优点: 这里附一下阿里的字体图标使用方法: 三.三角形制作四.一些样式 1.用户界面鼠标样式cursor 2.轮廓线outline 3.防止拖拽文本域 ...
CSS精灵图、字体图标、三角、鼠标样式、用户界面样式、溢出省略号
[CSS精灵图.字体图标.三角.鼠标样式.用户界面样式.溢出省略号] 本文档是个人对 Pink 老师课程的总结归纳及补充,转载请注明出处! 一.精灵图 1.1 为什么需要精灵图? 一个网页中往往会应用 ...
html精灵图坐标如何确定,如何使用HTML中的精灵图
在我们进行网页布局的时候经常会遇到以下的情况一排或多排文字上/下/左/右会有对应的小图标或图片,比如下图, 1.png 如果一张图片一张图片的去引入,不仅费时费力,还费资源. 那这个时候该如何去快速 ...
[css] 你是怎么设计css sprites（精灵图）的？有哪些技巧？
[css] 你是怎么设计css sprites(精灵图)的?有哪些技巧? 首先肯定不会去用PS量,那太费时间了~ 没有webpack以前,用Gulp的gulp.spritesmith插件,这里附上配置 ...
CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
本篇文章为 CSS 基础系列笔记第七篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...

PS中和FW一样的精灵图缩小功能（像素栏输入数字就能缩小

PS中和FW一样的精灵图缩小功能（像素栏输入数字就能缩小）

PS中的精灵图缩小方法

PS中和FW一样的精灵图缩小功能（像素栏输入数字就能缩小相关推荐

最新文章

热门文章