注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

高级菜鸟

积累并顺便分享AI,启动技术,C#,ASP.net等知识的地方

 
 
 

日志

 
 

【引用】将PSD转换为WordPress主题,Divine Project  

2011-08-17 22:20:49|  分类: PHP |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

  Divine Project牛X了,将PSD转换为WordPress主题 - 顺顺 - 順順 不只是吸引

许多人都会使用photoshop制作网站界面,但却不是每一个会用Photoshop的人都能够将PSD转换成网页代码。。
别看自己脚尖了,我就是活生生的例子摆在面前呢。大专学习过Photoshop课程,对于网页设计有一些自己看法,终究懒得研究代码和CSS等,到了想改模版的时候,终日郁郁寡欢..为了应付这样的问题,上次曾介绍过使用Extensoft Artisteer制作WordPress主题的方法,但个性化方面还是会受到限制,毕竟那属于傻瓜式软件。

这次碰到的Divine Project就牛X了,可以将PSD转换为Wordpress的主题模版… 这货确是神物,而且绝非地球上出品的。按照自己的想法制作一个完整的网站界面,然后用Divine实现代码,再美滋滋的看着自己的作品发呆,是不是个很酷的主意..?

首先,我必须用托福250级的E文水平翻译一下官网对于此软件的介绍…


软件官方网站:http://www.divine-project.com好吧,如果你还记得时常不得不面对繁杂的代码,还必须得验证所有的浏览器兼容性.. 知道最后你的想法虽然美丽,但是却会遇到许多挫折,你会明白的。
那还等什么?Divine是设计师的好帮手,我们大胆地宣称,我们不需要程序员和代码了!翻译软件可以将英文翻译成法文,那为什么不能有翻译软件的效果,将设计的艺术作品翻译为网页代码?因此,我们觉得可行,所以开始开发Divine。
而这就是Divine的诞生。

我们才刚刚涉及了太多无聊的网页代码编写工作,这个过程完全破坏了真正的艺术灵感和创作的乐趣。

使用Divine的十大原因:


(YesCola:每次看到十大我就想起“著名科技网站”eWeek…,每天必发一个十大)


1、
这是完全免费的!

    
*您不必支付代码编写的费用。
    
*通过Divine的免费版本,你可以认识它的优势。2、在短短几分钟内创建一个WordPress主题。*您不必为了一个主题,花几天甚至几个星期去实现它。
    
*通过Divine帮助你,不到5分钟就可创造一个主题。
    
*您的设计转换到一个现成的网站只需要简单的点几下鼠标。3、最小知识站点的创建 (YesCola:这段恕我无法翻译正确….)* Photoshop的基本是不够漂亮。
    
*一般关于网络技术的概念是完全不够的。4、热门风格的支持*使用Divine,你甚至可以创建CMS风格的WordPress的主题。
    
*您可以创建各种独特的主题,并不会限制数量。5、有问题吗?想法?建议?*发布您的想法或方案的缺点。
    
*支持现有的想法或意见。
    
*观察他们的实现和评估质量。6、针对搜索引擎的SEO优化*优化后的代码能够帮助你在搜索引擎中获得好成绩。
    
*您可以自定义站点的标题/描述/和关键词。7、优化速度*Divine能够产生了逻辑上正确的主题代码。
    
*将多个图层合并成单一的图像。8、编码适应

    
*对代码/编码进行了优化,更适合现今网页的设计要求。9、W3C的有效的速记和优化的CSS(尚未进行)*实现更友好的、高效的代码编写。
    
* 兼容各种不同的浏览器。10、你是创造性的自由设计师*不要去想代码 – 把心思放在你的设计。
    
*所有您的想法将通过Divine实现为网页,并且尽可能和PSD显示的效果一致。

    

    

    

    

    

    

    

    

呼~~~ 机器翻译+托福250级人工翻译完成….

开始使用Divine进行自由的设计创作

第一个问题就是,Divine Project是全英文的软件,官方网站上的教程也是全英文。对英文盲来说会有些麻烦,不过幸好软件上大多是一些单词,自己辛苦点用翻译软件翻译一下就可以了。比如用有即时翻译功能的有道词典。

Divine Project的原理是给PSD中的每一个图层添加相应的WP功能,设计的自由度相当大,甚至可以达到随心所欲的页面布局。而之前说过的的WordPress主题制作软件Extensoft Artisteer则显得一成不变呆头呆脑。

先来看一个官方的制作例子:

这是一个PSD文件 |   这是将PSD通过软件转换为Wordpress的简明图文教程

好了,如果你现在你认为这个想法确实很酷的情况下,继续阅读剩余的部分。

Divine的系统需求如下:

操作系统:Windows XP以上,包括Windows7
Photoshop版本:CS3以上 (其实CS2也可以用,但安装的时候有点蛋疼)
是否支持X64系统:官网说不能支持,但在我的试用过程中发现无论是64位系统和64位的PS均可以支持。 (官网是骗人的小坏蛋)

开始使用Divine进行创作

1、前往官网输入你的邮件地址,会在邮箱中收到软件最新版的下载地址。
2、如果正在使用Photoshop,请先关闭。然后执行安装程序。
3、打开你的Photoshop,进行设计,然后在“文件-自动-Divine”中打开软件。(在某些情况下中也可以通过Photoshop菜单栏中的Divine打开软件)
4、使用图形化的界面对PSD的每一个图层添加代码工作。

你可以先使用这个PSD文件做一下实验。

  Divine Project牛X了,将PSD转换为WordPress主题 - 顺顺 - 順順 不只是吸引   Divine Project牛X了,将PSD转换为WordPress主题 - 顺顺 - 順順 不只是吸引

观看视频教程:

Divine Project官方网站上的视频教程是在Youtube上的,国内用户不翻则绝缘.. 众所周知的原因。
我将视频教程上传到了优酷上,又费了九牛二虎吃奶之力下载到了1280×720的更高清晰度的视频,并上传至网盘提供下载。


教程1:打开你的设计和如何使用Divine    在线观看 |   高清下载地址1、地址2

教程2:给PSD指定Wordpress的模版元素    在线观看 |   高清下载地址1地址2

教程3:如何将Wordpress模版上传到FTP中    在线观看 |   高清下载地址1地址2

教程4:如何预览Wordpress与检查问题 在线观看 |   高清下载地址1地址2

教程5:完整的将PSD输出到Wordpress模版的快速过程 在线观看 |   高清下载地址1地址2


一些可能出现的问题:

在PS中找不到divine软件按钮,原因可能是不清楚divine按钮的位置或是Divine或者Photoshop的安装路径包含中文所造成的,可以尝试以下办法,这个来自发现吧

1、安装之后打开:文件->自动->divine,看能不能启动.

2、如果单击之后无反应:重新安装photoshop,安装路径改为纯英文路径。重新安装Divine到英文路径,并在安装时将choose plug-in custom folder选项勾选,将插件路径手动选择到photoshop的插件目录下。(PS3以上版本插件目录为plug-ins)

3、回到第一步重新测试,如果仍然无法启动,尝试在Photoshop中:编辑->首选项->增效工具->附加的增效文件夹,手动选择Divine的插件文件夹(在PS的插件目录下)。重新启动PS。

4、第三步中如果无法找到Divine的插件文件夹,就点这里或者这里下载Divine0.5版本的安装包(内含单独的插件,安装此版本,并复制单独的插件到PS插件目录下)

可能会有一些样式在Divine中无法设置,例如部分链接的颜色样式。在发布主题之后再修修补补就行了,至少大部分的代码工作Divine已经帮助完成。

后话:

我试用了这个软件,但目前还没有开始动手使用它制作全新的Wordpress主题,所以不确保会有任何后续的问题。可能你会遇到麻烦,我的能力有限不一定能完全帮助你解决,有兴趣建议多去官网上看一看。但至少这个软件的想法很有创意,从软件本身的设计也看得出功力深厚,但相信对于代码无奈的你可以用它来解放双手!

从版本日期上看,软件似乎有一阵子没有更新了,所以可能很多Wordpress新版本的特性无法被支持,我觉得倒无伤大雅。官方一直在开发新的版本,暂时只是小范围内测试,我提交了测试版本申请还不知道有没戏..
上面已经说过Divine杯具的不支持中文,但它支持多语言文件。如果有哪位大神对E文足够熟悉不妨尝试一下制作一个中文语言包.. 我就厚脸皮的代表党和人民致以十二万分的感谢。

这是我最近花最多时间写的文章,实在是觉得这个软件的创意和功能太棒了。好了,Enjioy it~!

本文来自 http://www.yescola.com

  评论这张
 
阅读(2209)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018