网页效果图怎么切图

网页效果图怎么切图
网页效果图怎么切图

xHtml+CSS时代怎么切图

作者:逸乡浪子 E-mail: a@https://www.360docs.net/doc/967307737.html, QQ:316113735

一、鬼扯几句

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的时候,很多问题都是互联网上可以搜到的。

个人意见,仅供参考。

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 软件的理想选择。

3dMAX制作室内效果图步骤

用3DSMAX制作室内效果图的九大步骤 一、读懂设计图纸,搞清设计意图。这不仅是要搞清楚设计方案的空间结构,更重要的是要理解设计者的设计构思和理念,以此来把握好在效果图场景中需要表现的格调和气氛。 二、根据设计图纸进行建模工作。应根据平面图的设计,在场景中建立地面、墙体、吊顶等大体框架,在搭好的框架中加入相机,进一步调整相机的【参数】至满意的角度后,便可在场景中创建其他三维造型和调入家具。 三、将建造的模型按照图纸的要求,在3DSMAX场景中进行移动、旋转、缩放等处理,将这些构件线架整合在一起。 四、将各种建筑构件和造型摆放至合适的位置后,就可以给场景中各种物体赋予材质,同一种材质可赋予多个不同的物体。对各部分构件线架赋材质时,要求整体材质应该有一个主基调色,尽量避免大面积对比色的情况出现。 五、调整场景中的灯光环境,使整个场景物体能表现出比较好的立体感和层次感。制作室内效果图过程中,在场景中添加灯光时,应注意各区内灯光的多少及分布的差异会在场景中产生不同的室内光影效果,所烘托表现的气氛可能会有较大的差异,这时就要特别注意使灯光布局所产生的光影效果和气氛与总体设计不产生矛盾。另外,在调整灯光的【颜色】和【倍增器】时,要注意物体材质的颜色和明亮度也会受其影响而发生改变。 六、适当增加场景中的小品、画饰、花卉、人物等配景,使整个场景显得更为生动逼真。在效果图场景中添加人物另外一个重要目的是为效果图标定一个合理的空间尺度。 七、渲染输出。输出图像的大小要根据图纸大小而定,一般制作效果图图像的分辨率最好不小于120dpi(120像素/英寸) 。 八、在制作效果图的最后,我们可以再为其添加绿化及配景,这个过程我们称之为" 效果图的后期处理",一般需要在photoshp等图像处理软件中进行。在photoshop中进行后期处理。一般需要调整整个画面的基调色、亮度及反差,使画面表现出较好的色感和层次感,添加各种配景使画面显得更为生动,进行适当的光影效果处理,使整个画面呈现出较好的艺术效果。 九、进行打印输出。有条件时,最好进行附膜、装裱等处理,使效果图更具艺术品味。

网页制作流程7452127996

建网站的投入可是很大的。 首先是申请免费个人主页空间(当然也可以申请付费的,看你自己的情况了)。你可以在搜索引擎中以"免费资源"为关键字进行搜索,在找到的网页中查看免费个人主页部分,进入提供免费个人主页的网站之后,再按步骤完成申请表格。然后是编辑个人网页。如果你是初学者,建议你使用FrontPage,因为它是一个所见即所得的网页编辑软件,也是微软OFFICE的一个组件,使用起来和WORD有很多类似之处。最后是上传网页。请按提供个人主页空间服务的网站上的上传说明中的方法上传你编辑好的网页。经过这些步骤,你的个人主页就建立了. 如何建立一个网站? (信息来源:商翼网站策划) 一、引言 一个网站的整体规划和设计的好坏是它发展的重要之处, 也是它吸引人们浏览的所在之处。Internet/Intranet技术的日益发展,使人们认识到了Internet/Intranet的优势,更使得数据库与web的连接成为数据库开发方面的热门技术之一。 通常情况下,通过浏览器看到的网页大多是静态的。所谓“静态”,是指网站的网页内容“固定不变”,当浏览器通过互联网的HTTP(HypertextT ransportProtocol)协议向Web服务器请求提供网页时,服务器仅仅是将原来设计好的静态HTML文档传给浏览器。其页面内容使用的仅仅是标准的HTML代码,最多再加上流行的GIF89A格式的动态图片,比如产生几只小猫小狗跑来跑去的动画效果。若网站维护者要更新网页的内容,就必须手动更新所有的HTML文档。静态网站的致命弱点就是不易维护。为了更新网页的内容, 网站维护者必须重复制作HTML文档,随着网站内容和信息量的日益扩增,可以想象这是多么复杂繁琐的工作。 那么,什么是动态网站呢?所谓“动态”,并不是指放在网页上的图片会动,动态页面应具有以下几个特点: (一).交互性:即网页能根据客户的要求和选择而动态改变和响应,浏览器即作为客户端界面,这是今后Web发展的大势所趋。 (二).自动更新:即无需手动更新HTML文档,就能自动生成新的页面,从而大大减少工作量。 (三).因时因人而变:即当不同的时间、不同的人访问同一网址时能产生不同的页面,这一点对于需要对使用者授权的网站尤其适用。 随着的Internet迅速发展,不管是专业的ISP(Internet服务提供者)和ICP(Internet内容提供者),还是一般的政府机关、银行、交通部门、学校、医院、服务者,甚至是每个人,都在积极寻求在Internet上发布信息,提供新型的网上管理和服务。可以说,网站设计和网站的编辑正成为新兴的热门行业。 二、网站的系统分析 (一).项目立项 我们接到客户的业务咨询,经过双方不断的接洽和了解,并通过基本的可行性讨论够,初步达成制作协议,这时就需要将项目立项。较好的做法是成立一个

【某项目】效果图制作流程经验分享

上海骄安建筑设计有限公司 【某项目】项目家配图,效果图制作流程

公司简介 上海骄安建筑设计有限公司下设效果图制作部,数码图文快印部!专业从事:建筑室内、室外效果图制作,景观园林效果图制作,市政道路桥梁效果图制作,建筑多媒体,三维动画制作,建筑图文快印输出等内容。 效果图制作部在建筑效果图行业内我们的愿望是成为新媒体环境中可以提供一站式服务的先锋,为我们客户提供整合互动多媒体和传统新媒介的咨询,调研,策划,创意设计服务,并凭借我们多年的经验及娴熟的技法,协助客户表达卓越的建筑设计思想。通过多年积累实践经验,总结出只有诚信服务,严格把握好质量,才能立足于市场。效果图技术部在职人员有40---50人左右,其中制图技术员40余人。根据市场所需和员工技能特长分2个组,为建筑组和非建筑组。建筑组主要以建筑效果图为主,非建筑组以景观园林效果图,道桥室内效果图为主。公司从事效果图行业有18年之久,员工年龄和工龄层次分明,三十岁以上的有12人左右,为技术骨干,工龄也达到10年之久,二十至三十岁之间员工为多,是公司创造力和活力阶层,也是生产力的保证。公司也注重培养新人,在招聘时发掘可塑造之人。效果图业务部10人左右,为公司持续经营的保证!公司办公场所有300多平方,公司电脑设备为适应客户之所需不断更新中。 骄安设计一直秉承“以人才和技术为基础,创造最佳作品和服务”的企业宗旨,用认真主动的服务与不断创新的产品,“帮助客户超越竞争对手”获得成功,并希望每一个项目的完成是骄安设计与您长久合作的开始。 公司部分客户如下: 上海华东电力设计有限公司 上海市政工程设计研究院 中国建筑设计研究院上海分院 中船第九设计研究院有限公司 上海高等教育建筑设计研究院 上海广亩景观设计咨询有限公司 上海申马景观设计有限公司 上海华汇园林景观设计有限公司 上海市政工程规划设计研究院 上海勘察设计研究院有限公司 上海派尼欧旅游景观设计有限公司 凯帝捷建筑设计咨询(上海)有限公司等………………………………………中海发展(苏州)有限公司 中海发展(宁波)有限公司 中海发展(无锡)有限公司 中海发展(上海)有限公司 苏州凯润置业有限公司 宁波市梅山美的房地产发展有限公司苏州弘阳房地产开发有限公司 远洋地产(上海)有限公司 无锡万达城投资有限公司 万达地产(金山)有限公司 冠泉置业(宁波)有限公司 山东瑞联房地产开发有限公司

怎样制作网页制作网页详细操作步骤

怎样制作网页制作网页详细操作步骤 怎样制作网页制作网页详细操作步骤 制作网页主要有以下一些工具 Frontpage:office自带的一个工具,操作简单,实用,学起来 比较轻松,功能不咋地,我不太喜欢。 Dreamweaver:这是网页三剑客之一,专门制作网页的工具,可 以自动将网页生成代码,是普通网页制作者的首选工具,界面简单,实用功能比较强大。建议初学者选用。 另外一个工具就是代码编辑工具,例如写字本、EditPlus等, 这些工具主要编辑asp等动态网页。 大型的网站往往还需要数据库的支持,所以还得懂数据库。sql、甲骨文等。 总之,掌握好网页制作,能独立完成一个网站的制作工作,那就不要考虑吃饭问题。随便混就好了! 网站设计八步骤 由于目前所见即所得类型的工具越来越多,使用也越来越方便,所以制作网页已经变成了一件轻松的工作,不像以前要手工编写一 行行的源代码那样。一般初学者经过短暂的学习就可以学会制作网页,于是他们认为网页制作非常简单,就匆匆忙忙制作自己的网站,可是做出来之后与别人一比,才发现自己的网站非常粗糙,这是为 什么呢?常言道:“性急吃不了热豆腐”。建立一个网站就像盖一幢 大楼一样,它是一个系统工程,有自己特定的工作流程,你只有遵 循这个步骤,按部就班地一步步来,才能设计出一个满意的网站。 一、确定网站主题 网站主题就是你建立的网站所要包含的主要内容,一个网站必须要有一个明确的主题。特别是对于个人网站,你不可能像综合网站

那样做得内容大而全,包罗万象。你没有这个能力,也没这个精力,所以必须要找准一个自己最感兴趣内容,做深、做透,办出自己的 特色,这样才能给用户留下深刻的印象。网站的主题无定则,只要 是你感兴趣的,任何内容都可以,但主题要鲜明,在你的主题范围 内内容做到大而全、精而深。 二、搜集材料 明确了网站的主题以后,你就要围绕主题开始搜集材料了。常言道:“巧妇难为无米之炊”。要想让自己的网站有血有肉,能够吸 引住用户,你就要尽量搜集材料,搜集得材料越多,以后制作网站 就越容易。材料既可以从图书、报纸、光盘、多媒体上得来,也可 以从互联网上搜集,然后把搜集的材料去粗取精,去伪存真,作为 自己制作网页的素材。 三、规划网站 一个网站设计得成功与否,很大程度上决定于设计者的规划水平,规划网站就像设计师设计大楼一样,图纸设计好了,才能建成一座 漂亮的楼房。网站规划包含的内容很多,如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等,你只 有在制作网页之前把这些方面都考虑到了,才能在制作时驾轻就熟,胸有成竹。也只有如此制作出来的网页才能有个性、有特色,具有 吸引力。如何规划网站的每一项具体内容,我们在下面会有详细介绍。四、选择合适的制作工具 尽管选择什么样的工具并不会影响你设计网页的好坏,但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制 作涉及的工具比较多,首先就是网页制作工具了,目前大多数网民 选用的都是所见即所得的编辑工具,这其中的优秀者当然是Dreamweaver和Frontpage了,如果是初学者,Frontpage2000是首选。除此之外,还有图片编辑工具,如Photoshop、Photoimpact等;动画制作工具,如Flash、Cool3d、GifAnimator等;还有网页特效 工具,如有声有色等,网上有许多这方面的软件,你可以根据需要 灵活运用。

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

相关文档
最新文档