手把手:ImageReady切片教程

教程

 1.拖出参考线,这时可以把文档放大,以便参考线更准确。

图1

  2.使用切片工具,首先为上面的圆边和下面的圆边做切片。

图2

  3.这一步,切出左边和右边的切片,单象素的切片,需要把画布放大到1600/%,这样才可以选择单象素。

  在网页中,左边和右边的切片,最终会变成单元格,如果最中间单元格里的内容不是固定的,就需要使用设置单元格背景颜色的方法,也可以使用设置单元格背景图片的方法,适应表格中间内容的填充。

图3

  附带源文件:

  4,再为中间一片添加切片,这时也可以放大文档准确切片。

图4

  源文件

  5.还有一些没有切片的区域,只有把它们变成用户切片,它们才会固定。

图5

  5.为了防止切出的表格变形,需要在“文件”>“输出设置”>“切片”中,作如下设置。

图6

  imageready不能输出嵌套表格(fw可以),这时,最好的方法,还是把一个文档,分成几个部分切片。

  流程:先把一个文档,从上向下,根据内容切成几部分,输出为“仅限图象”。然后,分别打开这些图片,做必要的切片,输出为“html和图像”。

图7

  示例中,是把一个页面,根据内容,先切成几部分,几部分都输出为图片, 然后,再把这几个图片,分别切片。

  这么做的原因,也是为了防止网页变形。

  在dreamweaver中,会生成从上到下的几个表格:

<table><tr><td></td></tr></table><table><tr><td></td></tr></table><table><tr><td></td></tr></table><table><tr><td></td></tr></table>

  只是做一个例子,并不表示生成的代码一样。

  在dreamwever中,把几个用ps切出的表格(最好事先把切出的文件,放在站点里,图像放在image文件夹中),分别复制在网页中,就可以了,这样表格之间,是不会相互影响的。

时间: 2024-08-03 16:45:35

手把手:ImageReady切片教程的相关文章

使用Eclipse 制作的手把手教程

SpringSource 的开发工具,宣传的亮点之一就是手把手的操作教程(Task-Focused Tutorials),那么要做简单的做这样一个教程也很容易,选择菜单 File > New > Other > User Assistence > Cheat Sheet,然后按照提示一步步的做就可以了,还有辅助的设计器可以用.最全面的教程来自于 https://www6.software.ibm.com/developerworks/cn/education/opensource/

关于 Fireworks 图片切片技术的一点心得补充

心得 今天看到贵版的切片教程,对于新手老说是好东东哈. 对于大图的切割,我自己认为能规则的切就规则的切,不要随心所欲的切...之所以这样说,是因为通常切片后,我都不怎么用FW自动生成的HTML表格.. 我们可以先看看FW自动生成的表格的结构(没有经过特殊设置的): 假如一幅图切了两行,第一行是三块图,第二行是两块图,这五副切片的宽度都不一致,那么输出后自动成的表格将会是3行6列的一个大表格.我们发现每个放置切片图的单元格是没有设置固定的width和height参数的,实际上对于单元格尺寸的控制,

关于Fireworks图片切片技术的一点心得补充

今天看到贵版的切片教程,对于新手老说是好东东哈. 对于大图的切割,我自己认为能规则的切就规则的切,不要随心所欲的切...之所以这样说,是因为通常切片后,我都不怎么用FW自动生成的HTML表格.. 我们可以先看看FW自动生成的表格的结构(没有经过特殊设置的): 假如一幅图切了两行,第一行是三块图,第二行是两块图,这五副切片的宽度都不一致,那么输出后自动成的表格将会是3行6列的一个大表格.我们发现每个放置切片图的单元格是没有设置固定的width和height参数的,实际上对于单元格尺寸的控制,FW使

手把手教你用Photoshop制作移轴摄影效果

  移轴摄影(Tilt-Shift Photography)是指将真实场景呈现出微缩模型般效果的摄影作品.拍摄这种照片通常需要使用移轴镜头,有时还需要用数码后期制作浅景深等效果.本文就教大家如果在Photoshop中制作出移轴摄影效果. 这是一篇手把手的"傻瓜"教程,即使你没有Photoshop基础也完全可以照着做.文中用到的软件是Windows平台的Photoshop CS2. 1. 选择合适的照片 在选择制作移轴摄影效果的照片时,要遵循一条原则:微缩模型照片通常是俯视角度的.所以要

Flash动态解析Web应用程序服务器路径

web|程序|动态|服务器 随着Flash的日益普及, Flash在WEB开发上面可是大显身手,既然是WEB-Site,那当然离不开基本的Html页面,以下是本人平时在制作Flash站点时候经常要用到的与Html方面的实用小技巧,不算多适合刚刚接触用Flash进行WEB开发的朋友,希望能够对大家有一定的帮助,本人算不上什么高手,错误之处还是难免的,请大家多多包涵,谢谢!(相关文章:手把手Flash初级教程)     动态解析FlashWEB应用程序的HTTP服务器路径     玩过Flash+A

超详的GOOGLE GLASS界面设计指南

 开发指南"> 编者按:这篇文章绝对值得收藏,Google Glass界面设计指南由用户界面.设计原则.设计模式和视觉风格4方面组成,说是一篇手把手的设计教程也不为过,特别是百度同学的专业翻译,保证了文章质量的原汁原味.向未来看齐的设计师们感受一下吧! 一.用户界面 本章将介绍Glass的主要UI组件.它们的使用场景,以及用户如何与它们进行交互操作. 1.1 时间轴概念是 Glass 用户体验的主体 Google Glass的主要用户界面是由分辨率为640x360px的卡片组成的时间轴.它

[翻译] Canvas 不用写代码的动画

Canvas 不用写代码的动画 https://github.com/CanvasPod/Canvas Canvas is a project to simplify iOS development for both designers and developers. It had been difficult for designers to get hands on building the product with the lack of objective-c and Xcode exp

《交互式程序设计 第2版》一第1章 交互设计导论

第1章 交互设计导论语义学家.哲学家阿尔弗莱德·科日布斯基(Alfred Korzybski)曾说过:"地图并不是领地本身."本书也遵循这一观点.地图虽然不等同于领地,但却能帮助你在领地中游觅,找到你身处的位置和即将前往的方向.本书内容广泛,涵盖编程.电子学.交互设计和艺术,如地图一般提纲携领,全部点到即止:而这些内容都是交互设计的重要方面.作为近年来新兴的领域,交互设计包含了艺术.设计.心理学.工程学和编程,而工具的发展又让它越来越容易企及,在本书中我们将看到这些工具如何让编写代码变

蹭网器网上公开叫卖专家支招防蹭网

状如鼠标.插着一根长达10多厘米的天线,它到底是什么?最近,带着上述古怪尊容的东东正在网上热销.24日,有媒体 曝光称,这家伙在广东某电子交易市场市场现身公然叫卖.原来,其绰号叫"蹭网器",据说功能相当强大,一分钟内便可搜索到周围10多个无线网络信号并进行破解,蹭别人的无线网"免费用".记者调查发现,这种蹭网器在成都似乎也有销售.专家提醒成都的网络用户,平常上网时要留个心眼,学会"防蹭"的一些基本技巧. 现象 卖家很警惕 网上公然售 据广州媒体报