【切图】切图小知识

最近在学习前端，所以萌生了对切图的学习，接下来分享下我的学习历程吧~

1．切图其实并不是直译的就是将图片切开那么简单，那么切图到底是什么意思呢？

切图概念：切图是指将设计稿切成便于制作成页面的图片，并完成html+css布局的静态页面，有利于交互，形成良好的视觉感。通俗来讲，把一张设计图利用到切片工具把自己所需的切成一张张小图，然后用DIV+CSS完成静态页面书写，完成CSS布局。

2．切图工具：主流是dreamweaver、photoshop软件，还有sketch、firework等，低端QQ切图，网页切图等。

3． Ps切图小练习，学习自“PhotoShop教程：切图那点事儿”，链接如下：

https://jingyan.baidu.com/article/93f9803fc50dd3e0e56f555e.html

通过这个练习，就会对切图有很省的理解哦。

4． “新手福利！超全面的UI设计切图规范指南”链接为：

https://www.uisdc.com/ui-design-slice-guideline

切图是初级设计师最重要的能力，网上一直没有全面系统的教程，这篇好文从零开始教你学会切图方法，附上切图神器，绝对值得学习与收藏。

是不是看完这些觉得又Get到很多新知识啊~~

时间： 2024-08-24 02:43:35

【切图】切图小知识的相关文章

切图切页面的区别

切图: 指的是经过设计出来的psd,切图(比如:图标,图片,banner,背景图),在用html排出来. 切页面: 指的是把psd切源文件切成一个模块一个模块的,分开,条理清晰,不需要像切图一样的仔细妹纸需要排模块,定好后期怎么排代码,条理清晰. 通常大家都这么叫-以后一定要问清楚了,会晕的,这应该是常识不用我解释吧.

以前只是听说过雪碧图没用过,然后来了这里做的第一个活儿就涉及到他.因为怕不会用,就用他们原来切的,那个调的费事啊,算那个background-position困难的啊.原因是他们的雪碧图切放在了一起,没有留有空隙,所以,只能用一个废标签去专门放一个图标.现在发现雪碧图还是很有用的,把所有要用的图片放在一起,然后根据定位来调出要用的图片很方便. 随便写了个小demo:http://codepen.io/tianzi77/pen/xGGMBO 参照网站底部鼠标放上去的时候有一个切换效果. 代码也很简

关于图算法 & 图分析的基础知识概览

网址:https://learning.oreilly.com/library/view/graph-algorithms-/9781492060116/ 你肯定没有读过这本书,因为这本书的发布日期是2019年5月.本文会覆盖该书的大部分内容,读完这篇,你能够了解图算法的基本概念.关于此书,作为市面上为数不多的面向数据科学应用的图算法书籍,写的比较全面系统和易懂.当然,书在细节上的提高空间还有很多.今天内容很多,坐稳~ 目录图算法 & 图分析图基础知识连通图与非连通图未加权图与加权图有

DFS遍历图时的小技巧

DFS遍历图时的小技巧我们通常使用DFS遍历图时,用vis[i]=true;来标记访问过的节点,但是如果要让我们统计图中所有边的长度的话,如果我们还这样做的话,对于非环形图来说,没问题,但是对于环形图来说,就可能访问不到最后一条边,如A-B-C-A,A标记之后就不能统计到C-A了. 这时我们的办法是,每访问一条边后,就把它销毁,然后递归地去DFS时不再以vis[i]==false为条件去递归,而是直接以G[i][j]!=0为条件去递归. 这也是和平时DFS遍历图时有区别的地方,一个小技巧吧.

AE小知识

1.AE中对象模型图 (Object Model Diagram,OMD)(我的arcgis默认安装在C:\Program Files (x86)): C:\Program Files (x86)\ArcGIS\DeveloperKit10.0\Diagrams 可以帮助程序员了解类之间的关系,如何从一个类到另一个类,选择正确的接口,获取需要的属性和方法等. 2.在ArcObjects中存在三种类型的类: 抽象类(Abstract Class) 组件类(CoClass) 普通类(Cl

ios开发小知识2

http://blog.sina.com.cn/s/blog_66450b500102vadq.html http://www.cnblogs.com/lovesmile/archive/2012/06/27/2565569.html ios开发小知识2(转自cc) 退回输入键盘 - (BOOL)textFieldShouldReturn:(id)textField{ [textField resignFirstResponder];} CGRectCGRect frame = CGRe

积累的一些代码片段/小知识

★jQuery1.7.2下操作object元素报错 jQuery1.7.2下,用$选择器操作object元素会报错:代码如下: $('object').hide(); 换用原生js就没事了: document.getElementsByTagName('object')[0].style.display = 'none'; ★关闭按钮小叉的字体做一个简单的关闭按钮时,我们经常用字母X来实现,为了让它看上去更像一个叉,可设置字体为: font-family: “Microsoft JhengHe

js中级小知识1

首先我们复习之前的小知识,本期博客与之前有关 js数据类型基本数据类型:string undefined null boolean number 引用数据类型: Object array function 二者的区别基本数据类型就是简单的操作值,引用数据类型,把引用地址赋值给变量堆内存就是存放代码块的,存放形式有两种,一种是对象一键值对的形式存放另一种就是函数以字符串的形式存放案例引用数据类型的赋

面试过程中，你知道这些小知识，将事半功倍

在平时我们面试的过程总总会遇到一些面试官问一些平时我们不怎么注意的问题,当问出来的时候,面试者通常都是一脸懵逼,这和我想象中的不一样阿,怎么不按照套路出牌,当然一些小知识更能体现出你的细心和好学,以下分析20个面试中的小知识,共勉~.·整理的这份PDF有从基础到进阶.含有BATJ.字节跳动面试专题,算法专题,高端技术专题,混合开发专题,java面试专题,Android,Java小知识,到性能优化.线程.View.OpenCV.NDK等应有尽有.还有辅之相关的视频+学习笔记 (更多完整项目下载.未

UML建模之 - 类图&时序图

简介简介 UML是面向对象开发中一种通用的图形化建模语言 UML建模技术就是用模型元素来组建整个系统的模型,模型元素包括系统中的类.类和类之间的关联.类的实例相互配合实现系统的动态行为等 UML建模工具 Rational Rose : 是直接从UML发展而诞生的设计工具,常用建模工具 Power Designer : 是对数据库建模而发展起来的一种数据库建模工具 Microsoft Visio :是一种画图工具,Visio 2010才开始引入UML建模,不是很专业 Star UML : 开源轻