ps切图html自适应屏幕,ps CC自动切图与前端CSS代码

ps切图html自适应屏幕,ps CC自动切图与前端CSS代码Photoshop是视觉设计师最强有力的武器之一,其实Photoshop也为前端开发同学带来很多惊喜。特别是从PhotoshopCC版本开始,它变得越来越有趣。今天笔者就其中几个新特性给大家介绍一下。如果您也有更多新的发现,请在下方留言与大家进行讨论。自动切图(含WebP、SVG格式):前端开发人员经常需要将很多图层切出成独立的图片。有了自动切图功能,无需花更多时间来切图了。只需在图层…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

Photoshop 是视觉设计师最强有力的武器之一,其实 Photoshop 也为前端开发同学带来很多惊喜。特别是从 Photoshop CC 版本开始,它变得越来越有趣。今天笔者就其中几个新特性给大家介绍一下。如果您也有更多新的发现,请在下方留言与大家进行讨论。

自动切图(含WebP、SVG格式):

前端开发人员经常需要将很多图层切出成独立的图片。有了自动切图功能,无需花更多时间来切图了。只需在图层名后添加相应格式后缀(如.png),即可自动输出所需格式的图片。

请保持菜单“编辑->首选项->增效工具”中的“生成器”为启用状态; 依次点击菜单“文件->生成->图像资源”,确认该菜单项已被勾选;

df7538778a2f3cc3a397ec0cfaa87f35.png

9ea565f7f12d6b02a64663db9573122a.png

试着修改某个图层命名(如 iTunes.png),然后检查当前 psd 文件所在目录下的“文件名-assets” 的目录,打开此目录,发现 iTunes.png 已经躺在里面了。

f9a25c3fb4a8d36dbe4fb2d602913efe.png

常用技巧:

dccd306156ed080826307331034ae4fd.png

@2x Retina 图片的输出,在图层前添加 200% 即可,如 200% logo@2x.png ;

开启 WebP、SVG 格式的自动输出: 新建 generator.json 文件,内容如下:

{ “generator-assets”: { “svg-enabled”: true, “webp-enabled”: true }}

将此配置文件拷贝至: Windows: (Win+R后输入 %USERPROFILE% )目录下,如 C:Usersxxx Mac OS: $HOME 如“Macintosh HD>Users>xxx” 目录下 WebP 输出暂只支持 Mac OS。

复制 CSS

Photoshop CC 终于推出了“复制CSS” 功能。它能让开发人员快速获取形状的 CSS 代码。其实不少设计师也很想学习 CSS,有了这个功能,可以让这些爱学习的设计师熟悉 CSS 代码与图形的对应关系;

288a7664a1d3a0763ec2de88183dac45.png

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/210159.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • javascript 正则表达式测试工具

    javascript 正则表达式测试工具

    2021年8月1日
    61
  • HDFS存储大量小文件居然有这样的问题!看我怎么搞定它!「建议收藏」

    HDFS存储大量小文件居然有这样的问题!看我怎么搞定它!「建议收藏」写在前面本文隶属于专栏《1000个问题搞定大数据技术体系》,该专栏为笔者原创,引用请注明来源,不足和错误之处请在评论区帮忙指出,谢谢!本专栏目录结构和文献引用请见1000个问题搞定大数据技术体系解答HDFS存储大量小文件有什么问题?小文件是指文件大小小于HDFS上Block大小的文件。这样的文件会给Hadoop的扩展性和性能带来严重问题。首先,在HDFS中,任何Block、文件或者目录在内存中均以对象的形式存储,每个对象约占150Byte。如果有100000个小文件,每

    2022年5月20日
    120
  • windows实现mysql读写分离[通俗易懂]

    一、主服务器(master)配置1、修改MySQL配置文件my.ini[mysqld]log-bin=mysql-bin#开启主从复制,主库的配置log-bin-index=mysql-bin.indexserver-id=1#指定主库serverid,主库的id要比从库的id小sync_binlog=1binlog_format=mixed

    2022年4月17日
    39
  • C++二维数组sort排序问题

    C++二维数组sort排序问题以往遇到行排列问题(按每行的字典序排序)的时候,总是使用结构体来进行排序,但是如何使用二维数组来达到同样的效果呢?实验内容:利用二维数组进行“三级排序”测试1:使用c++内置的普通型二维数组#include<algorithm>#include<iostream>usingnamespacestd;boolcmp(inta[],intb[]){ …

    2022年10月20日
    2
  • 10家值得关注的新加坡和印度大数据初创公司

    10家值得关注的新加坡和印度大数据初创公司

    2022年1月22日
    73
  • Xray扫描器[通俗易懂]

    Xray扫描器[通俗易懂]简介xray是一款可以使用HTTP/HTTPS代理进行被动扫描的安全工具,支持功能如下独立的URL扫描 基于HTTP的被动代理扫描,同时支持HTTPS SQL注入检测模块 命令注入检测模块 任意重定向检测模块 路径遍历模块Xray扫描器内置插件XSS漏洞检测(key:xss):利用语义分析的方式检测XSS漏洞 SQL注入检测(key:sqldet…

    2022年5月30日
    187

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号