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

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

2013/11/27 22619评论区

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

quickly prototype a site

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

如果你对建站有兴趣,可以阅读以下文章:
《不用编码!全球10大高端建站神器推荐》
《设计师神装:50个最好的免费Photoshop插件》
《十八岁自学少年:我的个人网站是怎么做出来的》

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 “下载》

06. 添加微件

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

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

07. 选择字体

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

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

08. 添加图标

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

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

09. 改变状态

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

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

10.标题样式

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

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

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

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

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

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,完成了一个”没有写一行代码”的网页设计与搭建。

原文地址:creativebloq
优设网翻译:@MartinRGB
 
================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册:网页设计师必须修炼的内功技法,更是不可或缺的WEB设计指南http://hao.uisdc.com/ps/
设计微博:拥有粉丝量58万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/prototype-site-and-test-it-online

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 优设专访 设计师干货 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里