打印

[原创/分享]JS扩展Photoshop新功能:前端架构辅助工具

PS前端架构辅助v2.0.1版2007-11-14发布,欢迎各位前端架构师下载试用,欢迎反馈使用建议。
  推出目的,可以快速生成HTML代码和CSS样式--选中一个选区,按下F2,代码立即生成图片也立即保存好了
    相信Photoshop是“凡是称得上电脑高手”的人都会的图片处理软件,鸽子也特别喜欢画画(设计),这个软件也用得特溜,闭着眼都可以玩了。呵,于是也就想到为Photoshop增加新功能。记得去年工作的时候扩展了CorelDraw,发现功能还真实用。

    升级日志:
升级时间2007-11-14,主要升级特性:

  • ·增加导出背景重复设置;
  • ·增加了(为减少请求次数)而使用一张图来切割生成各种小图标的CSS快捷方式;
  • ·增加了是否导出当前边框设置的复选框;
  • ·优化了UI界面;



  [注]安装或使用过程中遇到了问题,请向我发邮件,我的伊妹儿/MSN/QQ都是:www@xiaogezi.cn

 [运行环境]:Windows Vista,Windows XP sp2,Mac Os,
                   Photoshop cs3+ (注意一定要是这个版本的,低于这个版本的运行报错),
                   IE 6.0+;

效果如图
      最新版下载地址:http://www.nihaoku.cn/temp/xExportv2.0.1.rar

         安装方法:把解压的:xExportv2.0.1.jsx 拷贝到 C:\Program Files\Adobe\Photoshop CS3\Presets\Scripts,

                      打开Photoshop CS3,“窗口”-> “动作”-> 打开“动作面板”,新建动作,设置快捷键为F2。在面板选项里选择“选择菜单项” -> “文件” -> “脚本” -> “xExportv2.0.1.jsx” (如果脚本列表里面没有,请选择“浏览”来选择)。

      使用方法:使用框选工具,选择要导出图片的部分,设置要保存图片的位置(默认是D:\),按下F2,轻松设置即可生成符合W3C标准的HTML代码,图片也保存好了。

      操作案例: http://www.esieo.com/demo/ 这个网页的HTML文档的代码就是精彩案例。
复制内容到剪贴板
代码:
#target photoshop
app.bringToFront();
$.localize = true;
/*
      程式名:扩展Photoshop之导出选区到图片并生成DIV+CSS(xhtml)代码;
  Code By Linr Chen,My website http://www.nihaoku.cn/  http://www.xiaogezi.cn/
      JavaScript File Name:xExport.jsx
*/
if (app.documents.length == 0)
{
  var docRef = app.documents.add();
}
else
{
  var docRef = app.activeDocument;
  var obj = docRef.selection;
}
var okBtn = "确定";
var cleBtn = "取消";
var strTitle=" 图片到源代码 Image to HTML - Linr Studio";
var strButtonBrowse = localize("$$$/JavaScripts/ExportLayersToFiles/Browse=&Browse...");
var dlg;
/* 创建Win form 窗体 */
function createDlg(css,htm)
{
dlg = new Window("dialog",strTitle,[200,250,630,560],undefined);
dlg.orientation = 'column';
dlg.alignChildren = 'left';
dlg.toHTMLIDlbl = dlg.add( 'statictext', [10,12,55,30], 'DIV ID:', '');
dlg.toHTMLID = dlg.add( 'edittext', [56,10,220,30], '', {multiline:false, readonly:false} );
dlg.toHTMLbtn = dlg.add("button",[222,8,320,32],"生成DHTML...");
....
代码过长故省略,可以通过下载附件来查看
[ 本帖最后由 vickeychen 于 2007-11-16 11:14 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!
本帖最近评分记录
  • km268 威望 +1 谢谢分享 2007-11-16 12:51
nihaoku.cn 心情音乐
好东西收藏了。
还有这个东西??

TOP

不错的东西  
下雨

TOP

我的和你图片上的版本一样.为什么找不到这个目录 \Adobe\Photoshop CS3\Presets\Scripts.
没有Presets这个文件夹/怎么解决?

TOP

楼上的,可能是中文版的,中文版的路径: \Adobe\Photoshop CS3\预置\脚本.
nihaoku.cn 心情音乐

TOP

设置F2为启动快捷键的方法:
 
 "窗口"->"动作" -> "新建动作(图标)" -> 输入动作名,选择"F2"为快捷键,按回车确定,开始录制动作.

 在动作面板在右上角打开面板菜单,"插入菜单项目",这个插入菜单项目对话框不要理它,去选择 -> "文件"->"脚本"->"xExportv2.0.1",回车确定插入菜单项目对话框 -> "停止动作(图标)".一切OK.关了ps,再开一次.打开一个文档,选择一个选区,按下F2键试下,如果设置正确的话,将会成功启动.
nihaoku.cn 心情音乐

TOP

功能上加強點,保存圖片的名稱最好不要是一串數字
支持正體字,不只有心

TOP

弄明白了

[ 本帖最后由 wtzzy 于 2007-11-16 13:56 编辑 ]

TOP

好东西,楼主同志辛苦了!牛啊!网页美工的帮手

TOP

牛昂
确实是好东西
明天去公司就去炫耀炫耀
哈哈

TOP

没大怎么弄明白
挺怪的
呵呵

TOP

基本上用不到!

TOP

有意思啊

TOP

中文版的安装报错

中文版的安装报错
Error 21:undefined 不是对象。Line:214 ->

TOP

下载来的代码好象都是乱码样的
是不是加了密啊?
能给份源码学习吗?

TOP

niu a .收藏了。

TOP

引用:
原帖由 marsvip 于 2007-11-19 10:00 发表
中文版的安装报错
Error 21:undefined 不是对象。Line:214 ->
必须先框选

TOP

打开Photoshop CS3,“窗口”-> “动作”-> 打开“动作面板”,新建动作,设置快捷键为F2。在面板选项里选择“选择菜单项” -> “文件” -> “脚本” -> “xExportv2.0.1.jsx” (如果脚本列表里面没有,请选择“浏览”来选择)。

这步操作有问题,“在面板选项里选择“选择菜单项” -> “文件” -> “脚本” -> “xExportv2.0.1.jsx””面板选项是指?
沉淀至清晰

TOP

导出后只看得到图片,没有html文件

导出后只看得到图片,没有html文件

TOP

请问是不是,有了这插件就不用布局网页手写代码了?

TOP

回复 #21 chenhaitaogood 的帖子

不可能发生的事情

TOP

大家可以参考Adobe的ExtendScript Toolkit 2的SDK。利用还可以做出更多你想不到不到的事情。
快乐带给你

TOP

安装有问题 楼主 还给抓图说明下吧.......

在面板选项里选择“选择菜单项” -> “文件” -> “脚本” -> “xExportv2.0.1.jsx” (如果脚本列表里面没有,请选择“浏览”来选择)。

这步操作有问题

TOP

回复 #24 maklove 的帖子

选菜单里面的 "文件"—>"脚本"-->"浏览"

TOP

好东东啊,谢谢楼主分享~~
学习,学习!

TOP

要是楼主把源码共享出来,大家不断开发新功能就更好了

TOP

部分源文件

代码太多了,放出部分源文件,有意者联系我,我的QQ/MSN/E-mail都是www@xiaogezi.cn

前端架构 v1.0.1(旧)版部分源代码:
复制内容到剪贴板
代码:
#target photoshop
app.bringToFront();
$.localize = true;
/*
      程式名:扩展Photoshop之导出选区到图片并生成DIV+CSS(xhtml)代码;
  Code By Linr Chen,My website http://www.xiaogezi.cn/
      JavaScript File Name:xExport.jsx
*/
if (app.documents.length == 0)
{
  var docRef = app.documents.add();
}
else
{
  var docRef = app.activeDocument;
  var obj = docRef.selection;
}
var okBtn = "确定";
var cleBtn = "取消";
var strTitle=" 图片到源代码 Image to HTML - Linr Studio";
var strButtonBrowse = localize("$$$/JavaScripts/ExportLayersToFiles/Browse=&Browse...");
var dlg;
/* 创建Win form 窗体 */
function createDlg(css,htm)
{
dlg = new Window("dialog",strTitle,[200,250,630,560],undefined);
dlg.orientation = 'column';
dlg.alignChildren = 'left';
dlg.toHTMLIDlbl = dlg.add( 'statictext', [10,12,55,30], 'DIV ID:', '');
dlg.toHTMLID = dlg.add( 'edittext', [56,10,220,30], '', {multiline:false, readonly:false} );
dlg.toHTMLbtn = dlg.add("button",[222,8,320,32],"生成DHTML...");
dlg.toHTMLpathlbl = dlg.add( 'statictext', [10,42,55,60], '文件名:', '');
dlg.toHTMLpath = dlg.add("edittext",[56,40,220,60],'',{multiline:false, readonly:false});
dlg.toHTMLtypejpg=dlg.add("radiobutton",[230,40,270,60],'JPG',{value:true,active:true});
       dlg.toHTMLtypejpg.value=true;
dlg.toHTMLtypegif=dlg.add("radiobutton",[275,40,310,60],'GIF','');
dlg.toHTMLtypepng=dlg.add("radiobutton",[315,40,360,60],'PNG','');
dlg.toHTMLhtmlbl = dlg.add( 'statictext', [10,65,80,85], 'xHTML:', '');
dlg.toHTML=dlg.add( 'edittext', [10,85,420,170], htm, {multiline:true, readonly:false} );
dlg.toHTMLcsslbl = dlg.add( 'statictext', [10,175,80,195], 'CSS2.0:', '');
dlg.toCSS=dlg.add( 'edittext', [10,195,420,280],css, {multiline:true, readonly:false} );
dlg.toHTMLbtn.addEventListener ("onClick","getSize", "");
dlg.toHTMLlinklbl = dlg.add( 'statictext', [10,282,450,320], '(C)Linr Studio 2007 琳儿工作室  http://www.nihaoku.cn/', '');
dlg.toHTMLID.()
{
  dlg.toHTML.text=dlg.toHTML.text.replace(/id=\"[0-9a-zA-Z]+\"/gi,"id=\""+dlg.toHTMLID.text+"\"");
  dlg.toCSS.text = dlg.toCSS.text.replace(/#[0-9a-zA-Z]+\{/gi,"#"+dlg.toHTMLID.text+"{");
}
dlg.toHTMLbtn.onClick = function() {
  var extname='';
   if(dlg.toHTMLtypejpg.value)extname='jpg';
   if(dlg.toHTMLtypegif.value)extname='gif';
   if(dlg.toHTMLtypepng.value)extname='png';
   if(dlg.toHTMLpath.text!=''){dlg.toHTML.text=getInfo(dlg.toHTMLID.text,dlg.toHTMLpath.text,extname).vhtm;dlg.toCSS.text=getInfo(dlg.toHTMLID.text,dlg.toHTMLpath.text,extname).vcss;}
   if(dlg.toHTMLpath.text!='' && extname!='')exportFile(extname,'d:\\'+dlg.toHTMLpath.text.replace(/\//gi,'\\')+'.'+extname);
}
dlg.show();
}
createDlg(getInfo().vcss,getInfo().vhtm);
function exportFile(api,path)
{
var saveFilePath=new File(path);
  switch(api)
  {
   
   case 'jpg':
      /* 保存为jpeg格式 */
     try
       {
  ...
       }
       catch (e)
     {   // display error
       alert("导出JPG格式时发生错误!错误信息如下: \r\r" + e);
       return;   // quit
     }
     break;
   
     /* 保存为gif格式 */
   case 'gif':
     try
     {
  ...
     }
     catch(e)
     {
      alert("导出GIF格式时发生错误!错误信息如下: \r\r" + e);
      return;   // quit
     }
     break;
     
    /* 保存为png格式 */
   case 'png':
    try
    {
  ...
    }
    catch(e)
    {
      alert("导出PNG格式时发生错误!错误信息如下: \r\r" + e);
      return;   // quit
    }
    break;
  }
}
/* 获取选区的属性 */
function getInfo(id,str,ext)
{
var _width,_height,_left,_top,_bottom,_right;
var selobj = docRef.selection;
var sel=docRef.selection.bound;
var cssText,html,bgimg=str;
id=(id)?id:'div';
str=(str && ext)?'&#92;t<img src="'+str+'.'+ext+'" alt="" />':'';
bgimg=(bgimg && ext)?'background:url(../images/'+bgimg+'.'+ext+') 0 0 no-repeat;':'';
/* 获取left,top,right,bottom,width,height 等值 */
   _left=sel[0].value;
   _top=sel[1].value;
   _right=sel[2].value;
   _bottom=sel[3].value;
   _width=_right-_left;
   _height = _bottom-_top;
/* 获取HTML,CSS */
   cssText = '#'+id+'{width:'+_width+'px;height:'+_height+'px;'+bgimg+'}';
   html ='<div id="'+id+'" class="">&#92;r&#92;n'+str+'&#92;r&#92;n</div>';
//alert('CSS:&#92;r&#92;n&#92;t'+cssText);
//alert('HTML:&#92;r&#92;n&#92;t'+html);
return {vcss:cssText,vhtm:html};
}
nihaoku.cn 心情音乐

TOP

添加F2成为快捷键的方法,flash演示
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!
nihaoku.cn 心情音乐

TOP

引用:
原帖由 chenhaitaogood 于 2007-11-19 16:36 发表
请问是不是,有了这插件就不用布局网页手写代码了?
那就发了!

TOP