介绍两款可以将PSD文件生成XHTML+CSS 网页的Photoshop插件

2010年6月23日09:54:49Photoshop3321K阅读模式

一, 概述

SiteGrinder是Media Lab公司出品的用于Photoshop的一个把PSD档切图并转成网页的Photoshop插件。SG的主要用处是：不需切片直接按图层把PSD里面的文本和图片分别转为文字或图片。并且生成符合网页设计标准的htm和css。还可以创建翻转按钮，CSS菜单，自动图片画册，flash幻灯片和其他多媒体，嵌入脚本代码等高级效果。同类软件包括:htmlbutcher, photoshop ImageReady, fireworks,Divine(一款以 Photoshop 插件形式存在的设计助手，它能够帮助你快速将PSD设计源文件转换成以XHTML和CSS布局的WordPress主题)等。

SiteGrinder是Media Lab公司的旧弃切图工具PhotoWebber1/2的后继。 SiteGrinder 1.0于2005年1月发布，SiteGrinder 2.0 Basic & Pro 于2006年5月发布。SiteGrinder 2 支持：Win版支持PS6-CS3CS4，Photoshop Elements 3, 4, 5 和6,支持Vista(1.0支持PS5-CS)。Mac版支持PS7-CS3CS4，Photoshop Elements 3, 4 和 6,支持Leopard。

使用中觉得SG与PS CS3的搭配最慢，不推荐使用PS CS3。而且SG中的-form，-xmedia等额外的“高级”功能很拖软件速度，似乎应该把这些工作交给DW去做。SG的未来发展方向似乎并不明确。因为他始终建立在PS的基础之上，而且似乎在努力冲向DW的范畴，难道，SG想往的是成为ADOBE麾下一员？…

另外,SG在生成过程中时,由于使用的是类似PS的动作类指令,所以同时会和Windows的复制粘贴等常用命令冲突.

二, SiteGrinder使用教程

SiteGrinder的工作流程超级简单：首先给图层添加提示语，在原来的层的名字后输入”-button（按钮）”，”-rollover（翻转）”以及”-popup（弹出）”等层的提示语hint。一旦添加图层名称，就可启动SiteGrinder 2插件，就可以自动生成网页。如欲改进,则重复进行上述流程,这样就能把原PSD设计转换成所需要的网页.

1,新建PSD文档的初始化和整理

新建选项：

Width: 750 pixels for 800*600, 1000 pixels for 1024*768(默认IE窗口内能看到的部分为1002px*645px)

Height: 按网站所有页面的最长值估算,浏览器会自适应内容.

Color Mode: RGB, 8 bits per channel

Color profile: sRGB

Pixel Aspect Ratio: Square

Resolution: 72 pixels/inch

Background Contents: 使用的颜色将作为生成页面的默认背景色

PSD文件整理优化

一个SiteGrinder文件通常包含众多层,应该利用Photoshop自带和SiteGrinder特有的工具来有效整理它们.保持PSD文件内部的良好阅读性。

1, 图层内容:如要取母板中某区域用于新图层,可使用命令:“层|新建|通过剪切的图层”(new layer via cut”).如按纽由文字和图片背景层图片翻转层等多层组成,则应不合并图层,而是把文字和图片层等放入同一个图层组set/group,然后在组名的后面添加”-button了”.

2, 图层顺序:可按照在生成页面上从顶到底的顺序安排图层的顺序.再辅以按照功能顺序安排,如要接收用户输入的层放在最上面.

3, 图层命名:除了button和menu等系统要求特定名字的层之外,层应该清晰有序地命名,同类的小层可以归类放入同一个层组内,如顶部菜单背景”Top Menu Background Stuff”。图层的名称尽量与其在网页中的位置或内容相关，因为系统自动生成的CSS文件的相关名称如ID Selector就是根据图层名称生成的。

4, 图层组群Sets/Groups:photoshop CS2允许组嵌套至5层.还可以给层组标上颜色以醒目,如用绿色标识公用内容层组,用紫色标识特定页面内容层组.可参照如下命名顺序:

Header stuff
Side menu stuff
Home content
Gallery content
Contact content
Footer stuff
Page background stuff

5, 图层复合:Layer Comps:可用于优化工作环境

6, 智能对象:Smart Objects:Photoshop CS2可把一系列图层创建为一个虚拟的智能对象图层,以重复使用.并且可以改一动万.

7, 图层定位:可以使用move移动工具的”自动选择”来定位组或图层(但是这个功能也可能造成定位混乱),还可用text selection文字工具点击文字层来定位该文字层.

8, 可以通过按住Ctrl或者Shift键不放来选取任意多的图层,然后可以进行批量处理,如可把它们放入新组,可以把图层样式一对多粘贴.

10, 智能复制层组:通过SiteGrinder Tools工具进行层组的复制,可以指定生成图层组的名称,而非PS原来自动加长的无意义文件名.这对按纽图层组的复制特别有用.

2,在Photoshop 里面处理PSD文档加提示语

1,Hint提示语用法

提示语Hint指的是添加在PSD图层的原名称后面的一个破折号和一个关键词(二者之间不能有空格)，SiteGrinder根据该提示语来对该图层进行对应的操作。一个图层可以添加多个提示语，不过并不常见。如果图层名称之后未添加提示语，则系统会转化该图层为不需要进行互动的网页的背景图片。如果是处于最底层的单色的图层，SG会转化其为页面的背景色而非图片(可通过SG的面板对”Interior Color” 和 “Exterior Color”进行更详细设置)。

提示列表hint list: A complete list of hints you can use with SiteGrinder including links to documentation.

2,SiteGrinder 2 Basic/Pro的通用提示语Hints

-nomerge -ignore是SiteGrinder 2新产生的提示,而SiteGrinder 1中的 -haslinks也被淘汰了.

全名	缩写	应用对象类型	是否应用于全组	功能说明
-button	-b	Any	Y	定义一个按钮。
-rollover	-r	Any	Y	定义了一个使用相同名称(指的是在加上提示语之前的名称)的按钮的翻转图片。
-popup	-p	Any	Y	定义了一个使用相同名称的按钮的弹出层。
-popdown	?	Any	Y	在一个使用相同名称的按钮被点击时，将使该层被隐藏
-hide	?	Any	Y	表示本图层将在其它任何按钮激活弹出层时被隐藏
-text	?	Text	?	强制一个文字图层转化为网页中的文字。等效于在文字层选项中”反锯齿”为无。如果是段落，就在属性”段后添加空格Add Space After Paragraph”设置为12pt以保证正确输出段落.
?	-g	Text	?	Forces a type layer to be rendered as a graphic 强制一个文字图层转化为网页中的图形
-links	?	Text	?	定义了一个相对应的文本层中的字词的超链接。首行键入待链接字词，次行为链接地址，各字词间以空行隔开
-link	?	Text	?	定义了一个使用相同名称的按钮的(以本文本层文字作为)超链接。
-@link	?	Text	?	定义了一个使用相同名称的按钮的(以本文本层文字作为)电子邮件链接。
-scroll	?	Text	?	Gives the type layer a vertical scrollbar on the final web page. 使文本层转化为具有垂直滚动条的文本框架。
-menu	?	Text	Y	使本层或本组转化为一组菜单,使用段落型文字层,如果是水平的菜单,各项之间隔两个空格或两个夹着竖杠的空格,如果是竖直的菜单,各项之间用回车隔开,各项的行间隔使用文本层的属性”段后添加空格Add Space After Paragraph”设置,而不要用空行来隔开
-rrect	?	rect	?	Causes a Rounded Rectangle shape layer to become a re-sizable rounded rect web element 本层自动转化为具有圆角矩形包围，不是在本层图片外加上圆角。可与photoshop的Rounded Rectangle tool结合使用生成自扩展的圆角矩形
-fav	?	Any	?	Causes a layer to become a 16×16 favorites icon for the site 本层自动转化为一个16X16大小的网站图标
-page	?	Comp	?	Specifies that a layer comp represents a page; optional for comps with matching buttons 指定一个comp(photoshop cs中出现的图层复合)对应生存一个网页;并可以在相同名称按钮上建立到该comp的链接
-nomerge	?	Image	Y	指定本层单独生成而不与其他层合并，以免sitegrinder 2的自动合并非互动性图片的功能出错
-ignore	?	Any	Y	Layer (or layer set/group) will not be included in the build of any page, even if it is visible. 指定本层不生成，无论本层是否可见

注:-rrect不是在本层图片外加上圆角(这个提示语在siteGrinder 1 中较常用，在2.0后比较少用)，参见:-rrect Hint|

注:可以在文本层A里面直接键入网址电邮，(即使不带http或mailto)系统会自动识别并转化为超链接.也可以另建一个文本层B添加 -links，A的内容是：a url sample, a mail address sample。则B的内容可以设为：

url sample
http://www.deepcast.net

mail address sample
server@deepcast.net

links目前的不足是不能添加多行文本的链接，而且是把层A中所有符合条件的字词全部加上链接，不能个别限定。

3, SiteGrinder 2 Pro的专有提示语Hints

如果在SiteGrinder 2 Basic中使用则会自动加盖版权水印.

全名	应用对象类型	应用于全组?	功能说明
-form	Text	?	The text layer contains information SiteGrinder Pro will use to build HTML form entry fields 文字层包含的信息将被用于生成HTML表单输入字段
-grow	-Text,-xmedia,-thumbsheet	?	该层高度和位置指定了网页的可能纵向扩展的选区(该层生成网页后是和页面等宽的div)。即该层的纵向高度以下(所有上边缘位于grow层的下边缘之下的层才会自动沉下成为footer,所以不包括与grow层有重叠的层)的所有层将变成网页的底部footer。-grow可和-xmedia搭配使用来导入大段的PSD外部html文件.每个页面只能有一个grow层.因为通常SG生成的层都使用绝对定位,如果页面中增减了文字或图片内容或者浏览器使用较大号字体那么设计就会参差变形.如果使用了interiorgrow-tile,那么 grow层必须位于页面所有层除了tile层之外的最底部.就是说最底下几层分别是-grow和interiorgrow-tile ,interior-tile,exterior-tile等
interior-tile	Image	?	本层的”图案叠加“样式(Pattern Overlay style)里所使用的填充图案(一般都是一象素宽或高的背景图案)将被用来作为PSD文档之画布canvas所生成的网页之内的背景图
exterior-tile	Image	?	本层的”图案叠加“样式(Pattern Overlay style)里所使用的填充图案(一般都是一象素宽或高的背景图案)将被用来作为填充浏览器内，尤其是interior-tile之下之外的背景图
interiorgrow-tile	Image	?	本层的”图案叠加“样式(Pattern Overlay style)里所使用的填充图案(一般都是一象素宽或高的背景图案)将被用来作为-grow层的网页背景图.因为grow层之下的背景图层并不会自动随 grow层伸缩,所以要使用本提示语.
-xmedia	Any	?	本层指定生成网页时要包括进该位置来的一些外部媒体，如swf,flv,MPEG,QuickTime,Microsoft Video,HTML,MP3,JPEG,gif/Animated gif,PNG等.如本图层名为bunny-xmedia,所在图层组为bugs-page,则SG会按大致如下顺序抓取位于默认的external media folder目录的如下同名文件中的第一种个存在的文件为本图层填充内容:BugsBunny.mpeg,Bunny Bugs.mpeg,Bugs.html,Bunny.swf
next-button	Any	Y	Creates automatic forward navigation between pages, especially gallery pages. See note below. 创建自动向前导航页，尤其是图集。见说明如下。
prev-button	Any	Y	Creates automatic backward navigation between pages, especially gallery pages. See note below. 创建自动向后导航页，尤其是图集。见说明如下。
nextset-button	Any	Y	Creates automatic forward navigation between thumb pages. See note below. 创建缩略图的自动向前导航页。见附注如下。
prevset-button	Any	Y	Creates automatic backward navigation between thumb pages. See note below. 创建缩略图的自动向后导航页。见附注如下。
up-button	Any	Y	Creates automatic navigation from a gallery image page to its corresponding page of thumbnails. See note below. 创建从图集到对应缩略图的自动导航。见说明如下。
-img	Image	?	Uses the HTML <img> tag when placing the image. 本层生成网页中使用<img>的图片。
-slideshow	Any	?	Layer is a placeholder for an animated slideshow to be generated by SiteGrinder Pro 本层指定生成网页时自动生成的动画幻灯片
-thumb	Image	Y	Layer will be a thumbnail for a gallery image 本层将生成一个对应于图集的缩略图
-thumbsheet	Image	?	Layer defines an area which SiteGrinder will fill with thumbnails 本层指定生成网页时自动生成的缩略图集
-picturebox	Image	?	Layer is a placeholder for the full size versions of images in a gallery to be generated by SiteGrinder Pro 本层指定生成网页时图集中的全尺寸的图片
-metadata	Text	?	Layer contains metadata hints so SiteGrinder Pro will display image metadata along with a gallery image 本层生成网页中的图集中的元数据
-gallery	Comp	?	Page contains thumbnails, thumbsheet or pictureboxes for a gallery to be created by SiteGrinder Pro 指定了一个供SiteGrinder调用的图集
-literal	paragraph Text	?	本段落文字层(paragraph而不能是没有维数的point型文字层)的内容(HTML 或其他代码)将直接添加到生成网页的一个DIV(它的宽长度由该段落文字层的宽长度决定)里。为了PSD的美观可以把该层透明度设置为0不影响最终生成

注:Up, Next, Prev 按纽: “Up-button”, “Next-button”, “Prev-button”, “Nextset-button”, “Prevset-button” 必须使用层layers或层组layer sets/groups的全名. Up, Next, Prev 按纽也可应用于-rollover -popup ,如 “Up-rollover” “Up-popup”.

注:三个特殊的提示语： interior-tile,exterior-tile, interiorgrow-tile这三个是SG2的新提示语，这三个提示语就是该图层的整个名称，而非在某图层后再加提示语。

注:背景图相关教程：背景图和背景色的从上往下层叠次序是：interior-tile(canvas之内背景图), interior background color(canvas背景色),exterior-tile(浏览器之内网页总背景图),exterior background color(浏览器之内网页总背景色).： http://www.medialab.com /sitegrinder/support/sg2overview_page_backgrounds.html｜Background colors & tiles｜ "Web 2.0" Tile Tutorial Using grow, exterior-tile, and interiorgrow-tile together|

如果使用了背景图,则为了保证页面内容长过背景图时(如使用了-gorw层等)背景不错乱,可以在SG控制面板中设定页面背景色 (interior/exterior backgroud color)为背景图最下方一格象素的颜色,同时把背景图重复方式设置为repeat-x仅横向重复.

注:form相关教程：SiteGrinder提供了一系列语法去自动生成表格，不过似乎并不灵活与实用。The -form hint|

3, 在SiteGrinder里面调试和优化

自动报告调试

自动报告Report提供三种调试信息:

1,Details about what SiteGrinder has found in your document in terms of buttons, menus, graphics, pages, etc. so you can verify that SiteGrinder will build as you expect. You'll find these by clicking on the “Details” and “Menus” buttons on the report page.

2,Warnings. These are signified by a yellow triangle. Warnings are usually not going to cause major problems with the build, and they are often merely suggestions, or “just-in-case.” For example if you use a dash in a layer name that's not followed by a hint, SiteGrinder will warn you just in case you were trying to use a hint it doesn't recognize.

3,Errors. These are signified by a red stop sign and usually indicate more fundamental problems than warnings do.

使用SiteGrinder的Report工具再编辑

可以对页面，按钮，图片压缩格式等进行进一步的编辑。编辑结果会保存在PSD文档里。

如tile提示语所定义的背景图片(图案叠加样式中的图案)，默认是x,y双向重铺的，可以在SG控制面板里设置只重复x或y。

生成htm文件在浏览器里面调试

Lightning Build:忽略图片的快速生成,用于快速调试.

Preview:在软件默认位置生成页面

To Folder:在指定路径生成页面

如果SG发现指定生成的图片的命名有冲突,则会自动在名称前加“id”+(编号),如果是生成的文件或目录的命名有冲突,则会自动在名称前加 “pid”+(编号).一般需要避免后者,则要避免PSD文件名称,图层复合中指定的-page名称,SG tools里指定的页面名称,现存目录中已存在的文件和目录名称等名称有重复冲突的可能.

如果生成的速度过慢,则要考虑以下因素:

是否使用了大幅相片作为背景图片,同时使用GIF输出.为压缩效果应使用JIG输出.

是否使用了SG UI不友好的字体,如MAC中的Comic Book.参见Sitegrinder running very very slowly|

Large Website Questions| Big Build from multiple PSD’s| 'too many pages' need help using -xmedia| Advanced Webinar: Large Site Techniques: Resources|

三, SiteGrinder引起的工作流程优化

Skeleton prototype
a. use text paragraphs with -menu for fastest initial side and top menus
b. use templates wherever possible to minimize layer comps needed
c. use -xmedia for text placeholders in templates
d. use horizontal repeat for text header and footer

Content/fonts
a. start bringing in actual content via -xmedia
b. use alternative common.css font properties to allow fast font comparisons

Graphics
a. convert text menus to graphic ones (now that text is approved)
b. use background/foreground SGP settings to quickly compare color combinations
c. add graphics once color combo decided