JS扩展Photoshop新功能

2016-02-20 00:35 42 1 收藏

有了下面这个JS扩展Photoshop新功能教程,不懂JS扩展Photoshop新功能的也能装懂了,赶紧get起来装逼一下吧!

【 tulaoshi.com - Web开发 】

PS前端架构辅助v2.0.1版2007-11-14发布,欢迎各位前端架构师下载试用,欢迎反馈使用建议。

推出目的,可以快速生成HTML代码和CSS样式--选中一个选区,按下F2,代码立即生成图片也立即保存好了

相信Photoshop是凡是称得上电脑高手的人都会的图片处理软件,鸽子也特别喜欢画画(设计),这个软件也用得特溜,闭着眼都可以玩了。呵,于是也就想到为Photoshop增加新功能。记得去年工作的时候扩展了CorelDraw,发现功能还真实用。

升级日志

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

增加导出背景重复设置;

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

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

运行环境

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

效果如图:

JS扩展Photoshop新功能_网页教学网webjx.com整理

最新版下载地址:xExportv2.0.1.rar

安装方法

把解压的:xExportv2.0.1.jsx 拷贝到 C:Program FilesAdobePhotoshop CS3PresetsScripts, 打开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...");
....

代码过长故省略,可以通过下载附件来查看

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

来源:https://www.tulaoshi.com/n/20160220/1632175.html

延伸阅读
标签: PS PS教程
Photoshop CS5已经发布啦,俺已经装上简体中文版,体验它带来的新感觉。经过测试发现,它的新功能非常实用,还很容易上手。 今天我们就来试一试它的内容识别功能。这个功能针对修图过程中最为常见的问题对软件进行了优化,Adobe的设计者给予它新的智慧,总的来说,它更聪明啦。 记得刚刚学Photoshop的时候,就发现了一个大问题。就是如果...
标签: 电脑入门
QQTalk是腾讯公司新近开发的一款支持多人语音交流的团队语音通信工具,主要面向需团队协作的游戏用户,也适用于需多人语音沟通的办公和家庭用户。软件小巧、灵活、上手简单,性能卓越,能以极小的带宽占用,穿越防火墙,提供清晰高质的语音服务。 QQtalk BETA1的相关信息 系统要求: QQtalk BETA1 下载地址:点此下载 据腾讯官方...
标签: Illustrator
Adobe CS 不仅是一套前所未有的全新设计工具,还能提供最能展现您创造力所需的增强效能。下面我们来看看Adobe 宣传的Illustrator CS 十大全新功能。 高级印刷样式控制功能 使用全新文字排版控制、文字与段落样式等功能,设定精美打印类型。  Adobe PDF 文件制作 使用与 Adobe Acrobat Disti...
Adobe在6月18日发布了产品线2014年的重大更新,今天带领大家一起领略一下Photoshop CC 2014版的新增功能。 Adobe® Photoshop® CC 2014 附带数种新功能和增强,可极大地丰富您的数字图像处理体验。继续阅读对新增功能的快速介绍以及提供详细信息的资源链接。 下载地址: http://pan.baidu.com/s/1bn1qVtt 智能参考线 Photoshop ...
标签: PS PS教程
在Adobe Photoshop CC 2015的技术预览版中,PS设计空间就作为一项新功能出现,可以说是网页UI设计的专属工作站。本期国外精品翻译教程就对这一新功能进行一下简单介绍。         启动“PS设计空间”模式后,Photoshop换上新界面,原有与UI/Web设计无关的功能会被隐藏(比如3D工具等),这样设计师就能在UI专属设计界面中更...

经验教程

302

收藏

68
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部