photoshop 制作雪碧图

作者: Devops海洋的渔夫 | 来源:发表于2019-02-18 23:14 被阅读31次

仅供学习,转载请注明出处

需求说明

在上一篇photoshop 切图技巧中,我使用批量切图的技巧切出了三张图片如下:

那么可以将这三个图片做成一张雪碧图,方便一次性请求获取下来。

下面来演示一下制作过程。

创建透明画布

好了,有了透明背景之后,就可以打开那三个图片,抠出图像部分,复制+黏贴到透明背景中。

打开图像

选择【反选】,然后复制,如下:

新建图层,将图像复制

发现画布不是很够大,那么下面就要调整一下画布的大小。

调整画布大小

设置参考线,方便另外两个图片的位置定位

首先使用固定的矩形选择框确认高度,然后拖拉参考线。

拷贝定位图标

拷贝购物车图标

好了,大概已经画好了,那么裁剪一下画布。

调整画布

导出雪碧图

好了,这样就制作好雪碧图了。


2019年全套Java、Android、HTML5前端、Python、大数据视频,价值数万资源大放送

寻找资源的地址如下:

扫描微信公众号

寻找价值数万的视频资源

相关文章

  • photoshop 制作雪碧图

    仅供学习,转载请注明出处 需求说明 在上一篇photoshop 切图技巧中,我使用批量切图的技巧切出了三张图片如下...

  • 2016-3-9 记录

    PHOTOSHOP 什么是切图 分析UI:组织html结构,需要的图片(前景,背景) 制作雪碧图 图片优化 htm...

  • 雪碧图制作-mapbox本地化

    雪碧图制作-mapbox本地化 1. 雪碧图制作1.1. 安装1.1.1. nodejs安装1.1.2. spri...

  • 前端—雪碧图

    使用雪碧图的优点有以下几点: 雪碧图的制作与使用方法:

  • css-雪碧图

    雪碧图 雪碧图是图片拼接技术,主要用来减少http请求。 制作 ps 自己制作 使用工具,在windows有CSS...

  • 雪碧图制作

    首先需要一张图片 HTML代码如下: css代码如下: 显示效果如下: 当鼠标移入时,图片就会相应的发生变化

  • 合格前端系列(二):前端优化问题

    减少http请求 制作雪碧图 减少代码大小 待更。。。

  • 前端 利用steps设置不连续动画

    1.准备 制作横向的雪碧图,例如11张小图拼成一张雪碧图 2.设置动画,背景位置变化 @keyframes gif...

  • Python使用png图片生成MapboxGL雪碧图

    在mapboxgl中,使用sprite雪碧图实现图标渲染是比较常见的方式。对于自己制作定义的图标如何生成雪碧图,本...

  • mapbox GL 搭建本地服务(二)

    实现目标:1. 了解雪碧图是什么2. 用我自己做的一个小工具为本地发布的地图服务制作一个雪碧图!关键词:雪碧图 ...

网友评论

    本文标题:photoshop 制作雪碧图

    本文链接:https://www.haomeiwen.com/subject/anttyqtx.html