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)
上一篇 2025年7月26日 下午8:15
下一篇 2025年7月26日 下午8:43


相关推荐

  • Android 代码混淆

    Android 代码混淆Android代码混淆简介在我们日常开发中,对已经开发完成的源代码,需做一些代码混淆工作,以对代码起到一种保护和降低安装包体积的作用。开启混淆在app的build.gradle文件中如下代码:android{……buildTypes{release{//开启代码混淆minifyEnabledtrue//开启资源混淆,移除未使用的资源shri

    2022年5月30日
    32
  • VCL控件透明_textbox控件咋设置背景透明

    VCL控件透明_textbox控件咋设置背景透明代码TestPanel=class(Tpanel)publicprocedurePaint;override;end;procedureTestPanel.Paint;varR:TRect;begininherited;R:=ClientRect;DrawParentBackground(Self,Canvas.Hand…

    2026年3月7日
    3
  • webstorm 2022 激活码(注册激活)[通俗易懂]

    (webstorm 2022 激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html1PA3AFINM4-eyJsaWNlbnNlSW…

    2022年3月31日
    1.6K
  • java中字符串String格式转化成json格式[通俗易懂]

    java中字符串String格式转化成json格式[通俗易懂]一、将Sting转为Json在开发中,经常是前端发送一串数据过来之后,是通过一个参数带着一串值过来,这一串值是String格式的,但是里面的内容其实是json格式类型的,所以拿到值之后就要将该值转化成json格式,然后获取里面指定的key就可以拿到该值了。JSONObjectjsonObject=JSON.parseObject(tt);这样就可以将一串参数转化成json对象了,然后通过下面指定的key获取特定的值,如下面所示Stringimei=(String)jsonObjec

    2022年8月23日
    16
  • web容器和web服务器区别关系_java中间件有哪些

    web容器和web服务器区别关系_java中间件有哪些目录Web服务器中间件容器总结Web开发的选择我们经常会被Web服务器、Web容器和Web中间件这三个概念搞混。因为我们常见的很多网站要么是由IIS搭建,要么是由Apache、Tomcat、Ngnix搭建。所以,我们会把他们都叫成是Web服务器,因为他们都提供了Web服务,可以让我们通过http协议访问到。但是又有很多地方会说Tomcat是Servlet容器,而又有很多地方…

    2025年7月14日
    7
  • SQL Server中SET QUOTED_IDENTIFIER的使用

    SQL Server中SET QUOTED_IDENTIFIER的使用

    2022年3月5日
    50

发表回复

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

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