CSS学习笔记之PS切图 3.1

最新推荐文章于 2024-11-09 19:20:14 发布
最新推荐文章于 2024-11-09 19:20:14 发布
阅读量207 收藏 1
点赞数 2
文章标签： css 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36450483/article/details/123206394
版权
本文介绍了常见的图片格式，如JPEG、GIF和PNG，以及它们的特点。重点讲解了Photoshop中如何进行图层切图和切片切图，提到了Cutterman插件以简化切图流程。Cutterman是一款自动导出图层的Photoshop插件，旨在替代传统繁琐的手动切图方式，提高工作效率。
摘要由CSDN通过智能技术生成

1.1 常见的图片格式

1、jpg图像格式：对色彩的信息保留较好

2、gif图像格式：常用于一些图片小动画效果

3、png图像格式：结合了GIF和JPEG的优点，保持透明背景

4、PSD图像格式：Photoshop的专用格式，可以直接从上面复制文字,获得图片,还可以测量大小和距离

1.2 PS切图

1、图层切图 ： 右击图层 快速导出为 PNG
2、切片切图：利用切片工具手动划出
3、PS 插件切图： Cutterman
Cutterman 是一款运行在 Photoshop 中的插件，能够自动将你需要的图层进行输出，以替代传统的手工 "导出 web 所用格式" 以及使用切片工具进行挨个切图的繁琐流程。
官网： http://www.cutterman.cn/zh/cutterman

Terry-98
关注
CSS学习笔记
怀抱清风的博客
03-22 1833
CSS学习大纲: 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练掌握CSS三大特性 熟练掌握CSS盒子模型 熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-cop...
CSS学习笔记(二) 移动WEB开发
kianagrow的博客
04-22 262
思维导图 文章目录思维导图1. 移动端基础1.1 浏览器现状1.2 手机屏幕现状1.3 移动端调试方法2. 视口2.1 布局视口2.2 视觉视口2.3 理想视口2.4视口总结meta视口标签3. 二倍图3.1 物理像素&物理像素比3.2 背景缩放3.3 多倍图切图工具4. 移动端开发选择4.1 单独移动端页面4.2 响应式兼容PC移动端5. 移动端技术解决方案5.1 移动端浏览器5.2 CSS初始化5.3 盒子模型选择5.4 特殊样式6. 移动端常见布局 1. 移动端基础 1.1 浏览器现状
ps切图生成div_css代码
05-08
ps切图生成div_css代码
CSS---PS切图---7.22
weixin_50768118的博客
07-22 174
常见的图片格式、PS切图
css(五)项目实战，ps切图
qq_46199553的博客
08-09 1047
PS 切图 4.1 常见的图片格式 jpg图像格式： JPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格 式的 gif图像格式：GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景 和动画效果, 实际经常用于一些图片小动画效果. png图像格式是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保 持透明背景. 如果想要切成背景透明的图片,请选择png格式. PSD图像格式PSD格式是Photoshop的.
Css--ps切图
syyy9090的博客
04-16 172
图层切图：
CSS（PS切图、学成在线案例）
matrix_xiaobai的博客
08-21 1052
PS有很多的切图方式：图层切图、切片切图、PS插件切图最简单的切图方式：右击图层 快速导出为PNG但是很多情况下，我们需要合并图层再导出：1.利用切片工具选中图片2.导出选中的图片Cutterman是一款运行在Photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工“导出web所用格式”以及使用切片工具进行挨个切图的繁琐流程1.学成在线PSD文件2.开发工具：PS、cutterman插件、vscode、chrome我们本次采取结构与样式相分离思想：1.创建study目录文件夹（用来
CSS学习笔记之学成在线项目（上） 3.1
qq_36450483的博客
03-01 369
CSS学成在线项目上
B 站黑马程序员 pink 老师前端课程学习笔记_05 CSS3
PancrasG的博客
03-01 771
1. CSS 浮动 1.1 传统网页布局的三种方式 网页布局的本质——用 CSS 来拜访盒子。把盒子摆放到相应位置 CSS 提供了三种传统布局方式 普通流（标准流） 浮动 定位 **标准流：**标签按照规定好的默认方式排列 块级元素会独占一行，从上到下顺序排列 常用元素：div,hr,p,h1~h6,ul,ol,dl,form,table 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行 常用元素：span,a,i,em 标准流是最基本的布局方式 1.2 为什么要使用浮动（
CSS详细笔记
nuomi_w的博客
11-15 863
1.CSS简介 CSS的主要使用场景就是美化网页，布局页面的。 1.1HTML的局限性 说起HTML，这其实是个非常单纯的家伙，他只关注内容的语义。比如表明这是一个大标题，表明这是一个段落，表明这儿有一个图片，表示此处有链接。 1.2 CSS-网页的美容师 CSS是层叠样式表(Cascading Style Sheets)的简称. 有时我们也会称之为CSS样式表或级联样式表。 总结: HTML主要做结构,显示元素内容. CSS美化 HTML,布局网页. CSS最大价值:由HTML专注去做结构呈现，样式交给
B 站黑马程序员 pink 老师前端课程学习笔记_04 CSS3
PancrasG的博客
02-18 818
1. CSS 的三大特性 CSS 有三个非常重要的特性：层叠性、继承性、优先级 1.1 层叠性 相同选择器设置相同的样式，此时一个样式就会==覆盖（层叠）==另一个冲突的样式。层叠性主要解决样式冲突的问题 层叠性原则： 样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式 样式不冲突不会重叠 <style> div { color: blue; font-style: 14px; } div { color: #000
Web前端学习笔记——CSS之Photoshop切图
唯恋殊雨的博客
09-20 899
Photoshop基本使用 PS界面组成： ctrl + r 显示隐藏标尺 右击 标尺 — 把里面的单位一律改为像素 ctrl+ d 取消选区 菜单栏、选项栏、工具栏、浮动面板（拖拽名称，可单独操作面板）、绘图窗口 ​ 窗口菜单，可显示隐藏所有面板 工作区：（新建） 调整浮动面板 图层操作(重点) 图层面板快捷键 F7 其实图层就是一张张透明的纸 可以实现叠加问题。 ...
CSS（一）photoshop相关及切图
Oliver尹的博客
06-27 364
当我们拿到设计稿时，需要把设计稿制作成页面，因此就需要用到photoshop，然后使用photoshop切图 关于阴影拾取色的时候，如果阴影的颜色包含透明度，那么阴影就不应该写成16进制颜色如：#f5f5f5，因为这种写法无法表示透明度，应该写成rgba的方式，rgba可以表示透明度   切图 1.独立图层切图 方法一： （1）新建空白文件 （2）找到图形的图层 （3）拖拽图形或图...
CSS-PS切图+学成在线按例（01-32课）
weixin_45727991的博客
11-24 274
1、常见的图片格式 1、jpg图像格式：jpeg（jpg）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式。 2、gif格式：gif格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际经常用于一些图片小动画效果 3、png格式是一种新兴的网络图形格式，结合了gif和jpeg的优点，具有存储形式丰富的特点，能够保持透明背景，如果想要切成背景透明的图片，要选择png格式。 4、psd图像格式psd格式是Photoshop的专用格式，里面可以存放图层
Photoshop图象切片保存为网页HTML（DIV+CSS布局）的方法
热门推荐
胡杰的专栏
01-27 3万+
Photoshop图象切片保存为网页HTML（DIV+CSS布局）的方法   首先，制作图象切片（以一张图片为例子） 一、选择“切片”工具，在图像上拖动以分割图像（例如：一张图像切割2次就形成3个切片） 二、设置切片选项（如大小、目标链接、图片说明等等）：选择“切片选择”工具，在要设置的图像切片上双击，在弹出的面板进行具体设置（如图）： 三、储存切片为网页： 文件——保存
使用纯HTML和CSS绘制圣诞树：打造网页中的冬日奇景
最新发布
zhaoshanshan168的博客
11-09 291
通过简单的代码，您可以在网页上实现一棵带有星星、彩球装饰的圣诞树，为网站增添节日氛围。1. **树结构**：利用CSS的`border`属性绘制不同大小的三角形来组成圣诞树的分层结构。4. **彩球装饰**：在树上添加不同颜色的圆形装饰球，让页面更具节日氛围。### HTML & CSS 实现节日圣诞树：一步步打造你的冬季主题网页。2. **树干**：使用一个小矩形模拟树干，增加圣诞树的稳定感。3. **装饰星星**：用金色字体绘制顶部的星星，吸引眼球。
【前端基础】CSS进阶
qq_41413652的博客
11-01 1018
目标：掌握复合选择器作用和写法；使用background属性添加背景效果。
CSS例子: 横向排列的格子
11-01 511
【代码】CSS例子: 横向排列的格子。
HTML CSS H5C3样式语句汇总20241105
m0_63615119的博客
11-05 353
H5C3样式语句汇总20241105
XHTML+CSS布局下PS切图教程
"xhtml+css时代ps中怎么切图" 在网页设计中，XHTML与CSS的使用成为了主流，告别了传统的表格布局。在这样的背景下，如何高效地从Photoshop（PS）中进行切图变得至关重要。这篇文章由作者逸乡浪子分享了他的切图技巧...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值