㈠ 有没有朋友在大公司做前端工程师的,他们切图一般都用什么软件哦,用什么方法切的,这个有
我们用的专门的摹客PS插件,可以一键下载所有切图。支持Sketch、Adobe XD、PS的设计稿,设计师只需在设计稿上进行切图标记,然后上传就可以了。
以PS为例,主要是这样操作:
1.在摹客官网安装并打开插件
插件安装好后打开PS,在“窗口>扩展功能”找到摹客插件,选择并打开。使用摹客平台账号登录。
2.标记切图
在完成的设计稿上,选中需要切图的图层或编组,点击“标记切图”。将在名称前增加“-e-”,“标记切图”变为“取消切图标记”,则标记切图完成。
3.上传至摹客
标记切图后,一键将设计稿上传至云端项目中,开发工程师就可以自主下载切图,只需在右侧面板中选中切图,点击即可下载。
摹客切图支持:
1.切图压缩:在右侧面板中选中切图
2. 切换平台和选择倍率:iOS、Android、Web
3. 下载选中切图,一步到位。
㈡ UI中的“切图”是什么意思为什么要切图
切图是设计师交付给开发的产物之一,设计稿完成后,设计师需要将其切成便于制作成页面的图片。但因为开发经常需要不同平台不同尺寸的切图,如果全部由UI来做,不仅费时费力,可能还会因为细微的差距造成开发不能很好的还原设计稿。
所以可以用摹客之类的专业工具来自动切图。UI把Sketch、Adobe XD、PS的设计稿进行切图标记,上传至摹客后,开发就可以自主下载不同平台不同尺寸的切图和使用了。
(2)前端设计师切图扩展阅读:
切图用于完成html+css布局的静态页面,有利于交互,形成良好的视觉感。通俗来讲,把一张设计图利用到切片工具 把自己所需的切成一张张小图,然后前端开发用DIV+CSS完成静态页面书写,完成CSS布局。
切图大家都有个误区,觉得切图就是把图片切出来,其实并不完全是这样,首先处理的是什么类型的页面图片型(EDM 或活动着陆页等)、图文型(门户网站或电商网站等)、界面型(Web App 等),把图片切出来这个过程是叫切片。
㈢ UI设计师在完成界面设计后,切图都改切哪些
网页设计好后的切图是将设计稿切成便于制作成页面的图片,并完成html css布局的静态页面,有利于交互,形成良好的视觉感。通俗来讲,把一张设计图利用到切片工具,把自己所需的切成一张张小图,然后用DIV CSS完成静态页面书写,完成CSS布局。
设计好的网页都需要切图,主流的是dreamweaver、photoshop软件,还有sketch、firework等,低端QQ切图,网页切图等。切图为后端编程者带来方便,提高效率,让网页稿有了交互性,实现平时看到的各种各样的功能,画面浏览速度快,有利于优化。
(3)前端设计师切图扩展阅读:
一般我们从设计师那得到的都是psd文件,里面有几十或者上百个图层,一般会根据内容分好文件夹,有文字有图片,有的只在特殊情况下显示的,这时候就需要根据自己的需要导出不同的图。
切图的时候也会有许多考虑,比如把哪些内容压缩成一张图片,什么时候用透明背景PNG,什么时候用CSS Sprite(把琐碎的小图比如按钮、logo复制到一张透明背景的图上然后保存为一张图,再用background position去提取。)文字是切成图片,还是复制到HTML里。
一般情况下都不会把文字切成图,除非用到比较特殊的字体或者变形等等,然后即使是photoshop保存为web格式导出的图,有时候尺寸也是很大的,特别是PNG,这时要使用一些专业压缩工具进行二次压缩。
当然有些有前端经验的设计师会把切好的图片发给你,这样就可以直接开始写HTML和CSS了,但是建议还是尽量自己切,掌握熟练的切图技巧也是一个前端应该有的技能。
参考资料来源:搜狗网络-切图
搜狗网络-静态页切图
㈣ 网页设计好后的切图是什么意思呢
切图就是把用设计软件设置好的图片切成相应的大小,切图后再把图片上传就可以可以加快显示速度,不用等整个图片都下载以后显示。
PS切图步骤:
1、打开PS,然后点击切片工具。
㈤ 能否用通俗语言讲一下web前端讲的“切图”到底是什么意思
简单说就是把一张大图裁成若干张小图
一张完整的web设计图包括了很多元素,Logo、图标、背景图等等
设计师通常给的是Ps的分层设计文件,或者是Ai,当然这样是最好的,当然也有设计师用的素材不是透明分层的,这个时候就需要我们自己抠图了(这又是另外一个话题了,不谈)
这时候就需要把我们需要的Logo、图标、背景图这些一一单图提取出来使用到前端项目中,于是我们用到了Ps或Ai中切图这个功能
㈥ 前端切图切到很高的境界是怎样一种体验
就我个人的一点经验分享一下,谈不上很高的境界,只说是一点心得,我认为比较好的切图的同学是,如何在众多林立的需求之间取得一个平衡。说到底还是眼界的问题,刚开始可能纠结如何命名css比较易用,过后可能纠结html结构是否合理,然后页面是否兼容,可复用,再往后页面功能设计是否合理,页面体验是否符合人的基本心理需求。做的时间长了,就有空琢磨这个产品到底如何,能否真的占有一定的市场或用户量,然后做失败几个产品之后,看看其它行业是否还有潜力的机会,是否有与互联网接合的切点。然后在跨地区看看,地球那边的行业是怎么样的?所以,下午去巴黎看看那边是否有订餐需求不是一个梦。然后在每个阶段下对前端的审视或要求是不一样的,也谈不上很高的境界,只是公司或人原来的目标或需求变了,所以就像我以前提到一样,这个点永远都达不到,只有无限可能的接近。
然后在分享点目前我接触到具体的体验:
1. 满足UI同学的视觉需求。
无论是css hack还是通过js进行差异化处理,从技术手段上无底线的实现UI同学的视觉要求。这是工作负责的态度,也是自我需求突破的一个手段。从UI同学来说,做的设计稿没有达到要求,是对其本身工作成果的不尊重。
2. 控制好后端同学的数据显示。
前端做为后端同学的代言人,无趣的数字通过有趣的交互或界面展现出来,本身是一件很美好的事情,通过合作的方式让整个流程完美无瑕,但总是在外界因素的影响下,把握不好。
3. 在这有限的条件下提高自己的效率或代码质量。
这就要提到一般页面的 页面的健壮性,扩展性,复用性。
a. 健壮性:
这个怎么说呢,UI出的psd图是一个页面理想状态下的形态,而页面有数据,会出现两种极端状态,一,数据极多,二,数据极少。所以在页面排版的时候,考虑这两种状态,以免数据太多的时候,撑破页面,以免数据太少,页面部分元素会出现收回去状况,这样的页面会出现一些细节没有处理的常规失误。
b. 扩展性:
可以说,这个也是第一条的扩充,扩展性的意思为,在页面的模块很少的时候,要考虑未来添加子模块或兄弟模块的状态,为将来留好html接口。在将来添加模块的时候,尽可能少的去动原来的html结构,使html易于扩展。这个具体情况,具体处理。一般的处理就是如果有可能会有兄弟元素就多套一层,为后台添加兄弟元素尽可能的不影响现有结构。这个点乍看起来很小,其实如果扩充到整个项目,多个项目就有可观的效应了。
c. 复用性:
由于页面中风格相似的模块很多,或页面中与页面中相似的模块很多,但是总会有那么一丁点的差异,这是设计师认识世界然后在表达世界的产物,我们理解设计师的职业操守,所以只能在前期做一些技术处理,免得后期问候某岗位的亲人。具体的有的模块高点有的模块低点,还有结构完全一样,但底纹不一定。这样建议把表现形式的样式放在一个class中,物理属性放在一个class中。还有就是装饰性的图片决不不以明标签的方式插入到页面中,内容式的内容绝对以<img src="" />的方式插入中去,以免将来多主题,多语言版本的实现。
可能有时候还有的情况是,页面完全切不出来,html,css完全不知道怎么写了。但基础掌握良好,概念基本清楚。这时候我个人建议应该是吸收别人好的东西时候到了,也是个人水平瓶颈的时候,需要在坚持一下完全的突破。具体的方式就是,用firebug去分析先有的bat各个项目的各个页面,总有你可以借鉴的地方。
㈦ 前端工程师,请问切图是什么意思我会写div﹢css已经比较熟练了,js也、jquery这些也学完
是的,做前端必须必须会切图,但是 切图 就是PS里面的一步操作,十分简单。QQ截图和PS切图是动作不一样,但是基本上是一样的,QQ是截取,而PS里面有个工具张的像 刀 ,拿着这个刀在图上面画,所以叫切图。
选择选中的切片,在点击保存,就这么先切,在选择,在保存,就完成了切图,但是PS切图比qq截图用着爽多了,因为在PS里面可以将图片放大N倍,在切,在小的图也能切,而且可以一次切很多,也能一次保存很多,所以比QQ截图用着爽。总体来讲比QQ截图专业吧。
㈧ 网站前端切图是什么意思,主要做什么
我们做网站的时候是要根据程序化来进行实现的,特别是做一个精品网站的时候,首先第一步就是设计网站,网站设计好之后即是切图,切图完就要加入div+css实现效果图,以及flash动画等功能了,切图完成之后才到下一步开发程序,这就是从前端的设计、切图到网站程序开发的一个过程。
网站的好坏,前端很重要,这是我们重视的一部分,前段必须把div+css做好,不能有多余的代码程序在里面,前端要是没有做好,往后的程序很影响seo的推广,这是很多企业做网站的时候忽略掉的问题,我们应该一手抓,俗话说的好,赢在起跑线上,只有系统化的前端div+css,设计,切图功能实现之后才有后面的程序制作,很多网站前端div+css做的乱七八糟的,不说兼容性行不行了,就是网络蜘蛛来获取页面的时候都很排斥的,所以说,切图是一个精品网站必备的,重中之重,不可忽视。
我们经过美工的设计页面,从每一张图片的整合到功能的实现都是切图来做的,切图人员必须具备有细心的品性,要严格要求每一步的到位,否则将会给后面的程序带来麻烦,一个精品网站的建设是要分为四个大的步骤进行的
第一、网站设计
第二、网站切图+div+css+功能美化
第三、网站程序制作
第四、后台的调用
㈨ 前端中所说的切图到底指的是什么意思
切图是指将设计稿切成便于制作成页面的图片,并完成html+css布局的静态页面。
㈩ 前端开发发展到今天,前端程序员们还需要切图吗
切图本应该是前端工程师的工作吧,设计师切的图往往不专业,他们不知道把图片压缩,不知道把图片合并,更不知道给图片更好命名,这样前端拿到切图还是要重新处理。优秀的设计师会把图层分类做的很好,图层按照模块化设计,很方便前端工程师来使用的。不会切图的前端不是合格的前端。图层乱七八糟的设计师也不是个合格的设计师