当前位置:文档之家› 怎么切图

怎么切图

怎么切图
怎么切图

xHtml+CSS时代怎么切图

一、鬼扯几句

Web2.0,告别表格布局,xHtml+CSS布局成为网页前端必备的一种技能。从PS到xHtml的过程中,切图是很多CSSer头痛的事情。用表格的时候,我们只需要用切片把图切成一块一块的,然后导出再进行一些简单的修改即可。在CSS布局的过程中,个人认为不需要切片,而是用选区。本文主要就怎么用选区切图进行简明讲解。

当然,个人水平有限,难免有不足之处,欢迎指正。本文中的方法仅代表个人观点,非官方,非权威,您可以进行批评指正,但请勿进行人身攻击,否则您可以不用继续往下看。

二、需要掌握的知识点

1、PS里的参考线和标尺。

2、PS里的图层基本知识。

3、PS里有一个命令叫【拷贝(Ctrl+C)】,但还有一个命令叫【合并拷贝(Ctrl+Shift+C)】可能您用得比较少,而在用选区进行切图的过程中,【合并拷贝】命令则具有重要的作用。

【拷贝】只是对当前选区、当前图层内的内容进行复制。

【合并拷贝】则是对当前选区、所有可见图层的内容进行复制。

三、思路分析

拿着一张效果图,首选应该对这张效果图进行分析,在切图层面上,主要分析三点:

1、哪些图片是单独的,比如图1中的logo和banner部分。

2、哪些图片是需要平铺的。比如图1中的导航部分的背景。

3、哪些图片是需要sprite的。如图1中一些列表前面的小图标。

如图1所示为本文所用图片。

图1

四、实现方法

在切图之前您肯定已经建立好了一个图片文件夹的。打开PSD文件进行并显示参考线。

切出大图片

1、选择矩形选框工具,沿banner部分四周的参考线绘制一个矩形选区,如图2所示。

图2

2、招待【编辑】菜单下的【合并拷贝】命令,或按下快捷键【Ctrl+Shift+C】。这样选区内的图片所有可见像素都已经拷贝到了PS剪贴板。

3、新建文件,由于PS可以监视剪贴板,所以大小不用更改。直接确定。如图3所示。

4、确定后【Ctrl+V】粘贴,即可得到如图4所示的效果。

图4

5、执行【文件】菜单下的【存储为web和设备所用格式…】,快捷键【Ctrl+Shift+Alt+S】,

打开【存储为web和设备所用格式】对话框,如图5所示。

图5

6、在图5中选择需要存储的格式并进行设置,关于格式的知识,自己查一下。单击

【存储】按钮,打开【将优化结果存储为】对话框。如图6所示。

在对话框中的【格式】下拉列表下选择【仅限图像】,并设置需要的文件名,保存。

同样的方法对logo部分进行切图操作。

切平铺图片

1、平铺图片一般会比较小,所以需要放大图像来进行操作。

2、使用矩形选框工具绘制一个矩形选区,因为图片为水平平铺,所以矩形选区的高度正好是需要平铺的高度,为了快速,宽度无所谓,如图7所示。

图7

3、平铺的图像一般做成1px的宽度,所以,再一个叫【单列选框工具】的东西派上用场了。在矩形选框工具组中选择单列选框工具,如图8所示。然后在【工具选项栏】上选择相交按钮,如图9所示。

图8 图9

4、在第2步画好的选区内部单击鼠标,即可得到1px宽度、原来的高度的选区。如图10所示。

图10

5、全并拷贝,后面的步骤和切大图一样。

用同样的方法切其它部分的平铺图片。

切sprite的图片

切sprite 图片之前,应该知道,总共有多少张小图,然后,最大的图片是多大,再来进行操作。比如,此例中,右上角有四张图片,再加上二级菜单的一个小方点总共就是5张图片,而最大的就是右上角,为12px*12px。后期建立文件大小应该为12px*60px。

1、新建一个大小为12px*60px的透明文件。并每隔12px拉一条参考线。(当然,此例中本来可以不用参考线,但在其它例子中都是需要的。),如图11所示。

图11

2、选择矩形选框工具,在【工具选项栏】上设置为【固定大小】,并将宽高设置为12px,如图12所示。

图12

3、放大效果图,使用矩形选框工具单击,并拖动选区到合适的位置,如图13所示。

图13

4、合并拷贝,返回到新建的文件中粘贴。并移动到合适的位置。如图14所示。

图14

当然,如果图标都在一个图层上,您也可以用移动工具直接从原文件拖

到此文件中。

5、同样的方法对其它小图进行操作,完成后效果如图15所示。

图15

6、后面的保存方法一样。存储为web和设备所用格式。

晕,到吃饭的时间了,不写了,下次整个详细点的,在sprite那里之所

以全部都放在相同大小的格子里,是为了方便后期定位,只需要每次的

数值是12的倍数就行了。

对于有些需要透明的地主,把多余的图层隐藏即可。

时间仓促,不够祥细,还请各位谅解。

补充:

经豪情提醒,对于不需要sprite的大图,还有一种很好的方法,实现步骤如下:

1、打开文件,绘制矩形选区。如图B-1所示。

图B-1

2、直接执行【图像】菜单下的【裁剪命令】,看清楚些,是【裁剪】而不是【裁切】。如图B-2所示。

3、得到结果如图B-3所示。

4、后面的步骤就不需要说了,当然是存储为web和设备所用格式了。

5、您以为就完了吗?没完,存完了发现,哎呀,原图没有了,没事儿,【Ctrl+Alt+Z】搞定了。然后用同样的方法完成其它地方就行了。

注意,用这种方法的时候,最好备份一份原文件。

如果您习惯用这种方法,可以给【裁剪】命令定义一个您习惯的快捷键。

不会定义互联网查。

附:给CSS初学者的建议

1、不要急于求成,一下就想写整站,慢慢来。

2、不要以为CMS是谁都可以改的,你程序和前端什么都不会,还去改CMS。玩笑开大了哈。

3、初学的时候用火狐进行测试,不要用IE内核之类的浏览器。更不用考虑兼容性。

4、从布局开始,比如:

从单列布局到两列布局再到多列布局;

从单行布局到多行布局再到多行布局;

从固定宽高到自适应;

最后混合布局。

5、完成第4点里的东西,基本的布局就没有什么问题了,可以开始学习细节的写法,列表是最常用的细节写法,写上20来个导航条,就掌握基本的用法了。

6、学习表单的CSS写法。

7、装上常用的主流浏览器吧,开始整个页面的标准化布局,在这个过程中,去了解浏览器的兼容性。

8、会写了之后,还没有完,您应该看些书,这样会发现很多您不知道的东西。

9、最重要的一点:其实您在初学CSS的时候,很多问题都是互联网上可以搜到的。

DIV+CSS兼职设计群 295962422 广州网页设计群 102846691

网页设计群 291863961 网页设计Web前端群 291867587

如何Photoshop进行切图[图文]

如何用Photoshop进行切图 一、基本概念 1,切图,是一种网页制作技术,它是将美工效果图转换为页面效果图的重要技术。Photoshop、Fireworks 等软件提供了切图技术,切图后可以直接导出为网页格式。 2,切片,是切图的直接结果,切图实际上就将图切分为一系列的切片。 二、切图操作过程 1,切图工具图标的识别 2,切图基本操作(最好是先拉出参考线) 1)基本操作有两个:划分切片和编辑切片。 划分切片,是使用切片工具,在原图上进行切分的操作。

编辑切片,是对切分好的切片进行编辑的操作,编辑包括对切片的名称、尺寸等的修改等等下面我们看一下这两个操作 2)基本操作

如果想移动某个切片,可以使用“切片选择工具”选择某个切片,并用鼠标进行拖动,也可以使用实现,另外如果想精确的细微移动,则可以使用实现 如果想将某个切片存为某个图片输出,可以使用“切片选择工具”选择某个切片,然后选择“文件”菜单,并选择“存储为Web所用格式(W)...”,然后在弹出的界面中...

3,切图技巧

1)一张图,可以有多种切分方式,如下: 既然存在n多种切图方式,那么是不是哪种方式都可以满足要求? 答案:不是的。 一般对页面的要求是,当页面大小发生变化时,页面的各部分可以相对自由地伸缩,而不会使页面发生错乱或变形等问题。 我们切分好的图是要输出为Html格式的网页文件的,然后通过网页编辑器,将该页面进行加工,做成符合要求(例如可以根据内容多少,自由伸缩等)的模板页面。这其中,切图的方式直接影响着模板页面是否能够满足实际的要求。 我们来看一个例子:

Allegro教程-17个步骤

Allegro教程-17个步骤 Allegro® 是Cadence 推出的先进 PCB 设计布线工具。 Allegro 提供了良好且交互的工作接口和强大完善的功能,和它前端产品Cadence® OrCAD® Capture 的结合,为当前高速、高密度、多层的复杂 PCB 设计布线提供了最完美解决方案。 Allegro 拥有完善的 Constraint 设定,用户只须按要求设定好布线规则,在布线时不违反 DRC 就可以达到布线的设计要求,从而节约了烦琐的人工检查时间,提高了工作效率!更能够定义最小线宽或线长等参数以符合当今高速电 路板布线的种种需求。 软件中的 Constraint Manger 提供了简洁明了的接口方便使用者设定和查看 Constraint 宣告。它与 Capture 的结合让 E.E. 电子工程师在绘制线路图时就能设定好规则数据,并能一起带到Allegro工作环境中,自动在摆零件及 布线时依照规则处理及检查,而这些规则数据的经验值均可重复使用在相同性 质的电路板设计上。 Allegro 除了上述的功能外,其强大的自动推挤 push 和贴线 hug 走线以及完善的自动修线功能更是给用户提供极大的方便;强大的贴图功能,可以提 供多用户同时处理一块复杂板子,从而大大地提高了工作效率。或是利用选购 的切图功能将电路版切分成各个区块,让每个区块各有专职的人同时进行设 计,达到同份图多人同时设计并能缩短时程的目的。 用户在布线时做过更名、联机互换以及修改逻辑后,可以非常方便地回编 到 Capture 线路图中,线路图修改后也可以非常方便地更新到 Allegro 中; 用户还可以在 Capture 与 Allegro 之间对对象的互相点选及修改。 对于业界所重视的铜箔的绘制和修改功能, Allegro 提供了简单方便的内层分割功能,以及能够对正负片内层的检阅。对于铺铜也可分动态铜或是静态铜,以作为铺大地或是走大电流之不同应用。动态铜的参数可以分成对所有铜、单一铜或单一对象的不同程度设定,以达到铜箔对各接点可设不同接续效果或 间距值等要求,来配合因设计特性而有的特殊设定。 在输出的部分,底片输出功能包含 274D 、 274X 、 Barco DPF 、 MDA 以及直接输出 ODB++ 等多样化格式数据当然还支持生产所需的 Pick & Place 、NC Drill 和 Bare-Board Test 等等原始数据输出。Allegro 所提供的强大输 入输出功能更是方便与其它相关软件的沟通,例如 ADIVA 、 UGS(Fabmaster) 、VALOR 、Agilent ADS… 或是机构的 DXF 、IDF……… 。为了推广整个先进EDA 市场 ,Allegro 提供了Cadence? OrCAD? Layout 、 PADS 、 P-CAD 等接口,让想转换 PCB Layout 软件的使用者,对于旧有的图档能顺利转换至Allegro 中。 Allegro 有着操作方便,接口友好,功能强大,整合性好等诸多优点,是一家公司投资 EDA 软件的理想选择。

地图切片原理

地图切片原理 何为瓦片?瓦片即网格中有多个类似瓦片的图片集。瓦片数据是将矢量或影像数据进行预处理,采用高效的缓存机制(如金字塔)形成的缓存图片集,采用“级、行、列”方式进行组织,可在网页中快速加载。因此,瓦片地图加载是根据客户端请求的地图范围和级别,通过计算行列号获取对应级别下网格的瓦片(即服务器预裁剪的图片),由这些瓦片集在客户端形成一张地图,如图2.21所示。 矢量地图和瓦片地图各具特点和优势,两者可以结合应用。矢量地图实时生成,可以对地图数据进行在线编辑、查询分析,具有空间关系,能够支持网络分析、空间分析等应用。瓦片地图由于是预裁剪的缓存图片集,网络加载速度较快、效果好,常作为地图底图。 地图切片:采用预生成的方法存放在服务器端,然后根据用户提交的不同请求,把相应的地图瓦片发送给客户端的过程,它是一种多分辨率层次模型,从瓦片金字塔底层到顶层,分辨率越来越低,但表示的地理范围不变。 地图缓存:又称地图瓦片,是一个包含了不同比例尺下整个地图范围的地图切片的目录,即一个缓存的地图服务就是能够利用静态图片来快速地提供地图的服务。 这里对地图切片中的几个重要的概念做一个介绍。 原理 几个概念: 在地图切片中,有三个比较重要的概念:1、切片原点;2、切片分辨率(比例尺);3、初始切片范围。下面就这三个概念做一个简单的介绍。 1、切片原点 切片原点一般有两种:1、左上角;2、左下角。大部分切片的算法是采用左上角作为切片原点的,例如天地图、Arcgis Server等等。切片原点定义了我的第一个 256*256的切片的位置。 2、切片分辨率(比例尺) 切片分辨率和比例尺是一一对应的。比例尺指的是我的图上一个单位代表实际多少距离,而分辨率代表屏幕上一个像素代表实际多少距离,因此,当定了一个之后,对应的另一个也确定了。 切片分辨率(比例尺)影响的是在该分辨率(比例尺)下,我的一个256*256的图片的实际坐标是多少。 3、初始化切片范围 初始化切片范围是指我是按照多大的图幅进行切片的,影像的是我在这个分辨率下总共能切多少个256*256的切片。

ArcGIS地图切片及更新切片流程

ArcGIS地图切片及更新切片流程(这个文档很详细的讲述了制作切片的过程)来源:王昆的日志 目录 1、总则 (2) 1.1、编制说明 (2) 2、创建地图模版 (3) 2.1、添加图层 (4) 2.2、图层的比例尺设置范围 (4) 3、发布、浏览地图服务 (6) 3.1、使用ArcGIS Manager 发布 (6) 3.2、使用ArcCatalog发布 (9) 3.3、使用ArcGIS Manager浏览地图 (12) 3.3.1、浏览本机地图 (12) 3.3.2、浏览网络上的地图 (14) 4、地图切片 (15) 4.1、对地图进行切片 (15) 4.2、删除地图服务缓存: (19) 5、更新地图切片 (20) 5.1、新建一个shapefile文件 (20) 5.2、更新部分地图切片 (23) 6、如何在服务器上更新部分地图切片 (29) 6.1、前期数据准备 (29) 6.1.1、数据检查 (29) 6.1.2、数据属性修改 (30) 6. 2、更新部分地图切片 (31) 6.3、更新部分切片过程中可能遇到的问题及解决方法 (31)

总则 编制说明 为了提高用户浏览地图信息的速度,地图模版创建完成后,需要对地图模版进行发布,然后进行切片处理,即把发布后的地图模版按照一定的比例尺切成地图图片。当用户需求改变时,地图模版随之发生改变,而静态的地图图片不会自动改变,因而需要对地图图片进行更新,从而使地图图片与地图模版相一致。本文档对这些操作方法做了详细描述,供初学者参考。 创建地图模版 为了发布地图信息,首先我们需要创建地图模版,即创建一个.mxd类型的文档。下面介绍创建地图模版的步骤: 点击【开始】—>【程序】—>【ArcGIS】—>【ArcMap】如下图所示: 点击ArcMap,进入ArcMap界面,如下图所示:

CSS从大图中抠取小图完整教程

相信很多喜欢研究网页界面的童鞋都遇到过一个奇妙的现象:网页中很多图片素材被合成在一张图片上。 起初小菜模仿网站的时候,经常遇到这个现象,那时候也不知道这时什么技术,人家的整张图片素材不会利用,只能用ps切图,切成单个的再用。。。 其实,这是一个非常简单的技术,就是因为想象的太难了,才一直找不到问题的关键。 要想实现CSS抠图,只需要用到一个属性:background-position。 按照字面理解,这个属性就是背景定位,先看看google网站的素材图,如下:

假如小菜现在想做一个+1按钮,利用上边的素材图,普通状态显示A图,鼠标移上去显示后显示B图,实现这么一个动态效果。 按钮是用来实现功能的,一般是用超链接响应单击事件,但是不能把背景图直接加在超链接上,那样就不叫样式啦,因为超链接的文本长度变化时,样式也变了。 地球人一般的做法是,div里边套一个超链接,超链接负责实现功能,div负责装载背景图。html结构如下: 1

2+1 3
有了html骨架,接下来就要写css样式啦。 假如我们什么都不考虑,直接把整张图片设为背景,样式如下: 1.btn{ 2background:url(bg.png); 3 } 效果如图:

div是块级元素,默认是占一行的,这个先不用关心,但看到背景图重复了,这显然不是我们想要的,加上background-repeat:no-repeat;属性,改进样式如下: 1.btn{ 2background:url(bg.png); 3background-repeat:no-repeat; 4 } 这样就不重复了。 div可以理解成一个矩形框,它的左上角是顶点,背景图片的顶点也是左上角,div加载背景图时,会把两个顶点重合,顶点的坐标是(0,0)。不理解的看图,很简单的。。。

PSD网页切图制作HTML教程

PSD网页切图制作HTML教程 把psd页面利用div+css切割成html页面 首先看看效果 下面的图片就是效果图,切割出来后,可能头部和底部会宽点..... 新建文件夹 开始时,在您的计算机中创建一个文件夹。我把它命名为zmool。再在文件夹中创建新文件夹images,放网站的所有图像。接下来打开代码编辑器(Dreamweaver),并在根目录下创建一个HTML文件名为index.html,这是我们的主页模板。现在创建一个新的CSS文件,并将其命名为style.css文件。如下图:

打开index.html文件。在head标签顶部,添加链接到您的样式表(style.css)。你可以使用下面的代码。 头部的代码如下面: Modern Design Studio 建立HTML结构 现在,我们将设置HTML文件结构。设置3个部分(标题,内容,页脚)像下面一样: Untitled Document

相关文档 最新文档