一行代码都不用写就能完成简单的精美网页设计

开发 前端
是一篇由 Chris Kellett 为大家带来的教程,只需利用Ai CC 以及Muse CC,就可以在一行代码都不写的情况下,完成简单的网页设计和发布。

是一篇由 Chris Kellett 为大家带来的教程,只需利用Ai CC 以及Muse CC,就可以在一行代码都不写的情况下,完成简单的网页设计和发布。

quickly prototype a site

不过本文仅仅简单的介绍了大体的操作流程,更多细节还需诸位仔细研究一下。

01. 用AI进行基本布局

一行代码都不写!完成简单网页的设计上传发布

工作流程的第一步是使用AI CC,进行基本的布局,并且创建基本的矢量图标。完成后,在图层面板中选择释放到图层(顺序)。这样就能将设计导出,以供PS编辑。

02.用PS完成设计

一行代码都不写!完成简单网页的设计上传发布

根据AI导出的图层,用PS进行视觉设计。

03. 命名图层

一行代码都不写!完成简单网页的设计上传发布

用PS完成设计时,要保持良好的习惯,例如:正确命名图层、充分利用CC的生成器工具、确保在命名图层和图层组中不要有空格(可用下划线和连字符代替)。

04. 导出图像资源

一行代码都不写!完成简单网页的设计上传发布

所有图层和图层组命名完成后选择文件>生成器>图像资源(File>Generate>Image Assets)。保存为PSD文件,即可实现动态导出图像资源为单独文件。

05. 导入到Muse CC

一行代码都不写!完成简单网页的设计上传发布

导入到Muse CC,在平面图中,选择浏览器填充选项(Browser Fill),选择保存的PSD文件;下一步,在选项中选择组合,不设置填充颜色并且去掉边框。

《神器:Adobe网页设计软件”缪斯Muse “下载》

#p#

06. 添加微件

一行代码都不写!完成简单网页的设计上传发布

回到平面图,打开主页。选择Featured News Composition widget(抱歉哦,小编无Muse CC,应该是”特殊新闻组件”),然后便添加了一个组件。

07. 选择字体

一行代码都不写!完成简单网页的设计上传发布

触发组件目标。选择文本字体。可在控制面板和文本面板发现字体菜单,选择Web Fonts并且添加字体。

08. 添加图标

一行代码都不写!完成简单网页的设计上传发布

组件的模板如图所示。现在需要加入步骤1中设计的图标。选择文件>置入,选择图标和Logo。

09. 改变状态

一行代码都不写!完成简单网页的设计上传发布

使用状态(State)面板为组件的每个触发器(Trigger)选择正常、翻转、激活状态。可以通过效果工具改变PNG图标的颜色.

10.标题样式

一行代码都不写!完成简单网页的设计上传发布

标题呢?画一个合适尺寸的矩形框,然后使用字体工具输入标题。在段落样式面板中点击新样式图标。在列表中选择H1

11. 为组件添加简单的表单

一行代码都不写!完成简单网页的设计上传发布

在这里进行保存。选择触发器(Trigger),在对象(Target)面板中删除内容。打开组件面板拖出一个简单的填表组件,放在合适的位置。使用状态面板,修改表单区域的具体样式。

#p#

12. 选择背景图像

一行代码都不写!完成简单网页的设计上传发布

回到平面视图中,选择Browser Fill,丢弃图像。但仍处于Broswer Fill面板模式,载入一张背景图像,居中,调整比例,确保图像填充入其中。

13. 本地预览

一行代码都不写!完成简单网页的设计上传发布

利用 Muse的built-in(内置)浏览器预览来检测。选择预览标签来测试。当然,用浏览器测试一下也好。

14. 发布

一行代码都不写!完成简单网页的设计上传发布

利用Business Catalyst 服务发布网站,点击发布(Publish)。输入测试网站的名称,选择一个想要做主机的地址,选择OK。网站便会上传,完成后,打开浏览器。

15.在线编辑

一行代码都不写!完成简单网页的设计上传发布

若有改动,便在改动后,再次点击发布按钮,这样会自动上传改动部分(而不会上传未改动部分)。点击管理按钮,打开Business Catalyst后台,这样可以实时在线编辑内容。

16. 利用其他工具上传

一行代码都不写!完成简单网页的设计上传发布

如果想要用其他FTP应用上传文件,选择文件>导出为HTML选项,这样便可以继续用FTP工具上传了。

17. 完成

一行代码都不写!完成简单网页的设计上传发布

好了,我们通过使用CC版的PS、MUSE、AI、Business Catalyst,完成了一个”没有写一行代码”的网页设计与搭建。

原文链接:http://www.pmtoo.com/ucd/2013/1128/4151.html

责任编辑:陈四芳 来源: 产品中国
相关推荐

2014-02-12 13:43:50

代码并行任务

2017-04-13 19:20:18

Python代码并行任务

2021-12-26 12:10:21

React组件前端

2021-04-19 10:38:06

代码开发工具

2016-12-02 08:53:18

Python一行代码

2022-02-08 22:18:10

Chrome插件服务器

2017-04-05 11:10:23

Javascript代码前端

2021-11-02 16:25:41

Python代码技巧

2012-05-09 09:31:33

HTML5

2022-04-09 09:11:33

Python

2020-12-08 06:20:00

Python自动化工具开源

2020-08-12 14:54:00

Python代码开发

2021-12-29 09:34:49

Log4j漏洞代码

2021-08-31 09:49:37

CPU执行语言

2020-09-09 16:00:22

Linux进程

2020-08-19 10:30:25

代码Python多线程

2023-09-12 10:10:57

开发者工具开源

2021-11-05 06:57:50

架构工具代码

2019-12-25 14:08:50

Pandas数据计算

2015-12-21 13:11:02

开源A-FrameWebGL
点赞
收藏

51CTO技术栈公众号