TechBlog
首页分类标签搜索关于

© 2025 TechBlog. All rights reserved.

UI课程总结

06/21/2023
2019Ui课程总结#无标签

微信小程序星海飞驰

UI课程总结

UI理论：

创造丰富的视觉效果，提升人类使用互联网产品的体验，不仅可以美化页面，还可以在使用产品功能时，更加简单、方便。画面应该保持物体平衡、色彩平衡和统一阴影方向，根据不同的产品使用不同的色彩搭配，从而给予用户舒适的体验。

PS基础

涂抹工具磨皮

原图 在这里插入图片描述 在这里插入图片描述

使用了涂抹工具美化后

这里要注意的是：涂抹时尽量朝同一个方向涂抹，否则就会颜色不均匀，造成一块黑一块白的效果，看起来很不自然。（上面右图就是，我现在才发现，等我把这写完再改）

魔棒工具误点

在这里插入图片描述

我们老师让我们把这中间的图案扣下来，我当时就用的魔棒工具

在这里插入图片描述

可是这种边缘有点渐变效果的 用了很长时间才搞定，但还是有一些锯齿这些小细节没做好，我现在还是推荐用钢笔工具，钢笔工具虽然有点难上手但是扣多点图就习惯了，而且非常精准。

变换工具

在这里插入图片描述

在这里插入图片描述 在这里插入图片描述

将以上两张名片“印在”展示模板上，很简单，只需要用变换工具（Ctrl+T）然后右键选变形，再把四个角对齐模板就好了。

PS进阶

在这里插入图片描述

在PS已经到进阶的时候，比较注意的还是物体的摆放远近、和光线阴影的问题

•光源是从上方的天窗打下来的 那么车顶和车窗应该给他提亮，这时我们可以用到蒙版 在这里插入图片描述 然后用画笔工具 调一下画笔工具的透明度 就看感觉来在车顶和车窗 提亮。

•这张图还有一个大光源就是右边的火桶了 火光打在人的左侧，所以我们分别用画笔工具在人的左半身 用得是黄色和红色 稍微调一下透明度，看起来会自然一点。

•这个轮胎 在这里插入图片描述 原本是这样的，我们用钢笔工具扣下来， 在这里插入图片描述 ，我们现在要把亮度调暗，有很多种方法，这里我们新建了一个蒙版 用画笔工具把它画暗。

•这里补充一点 当你从PS外拖图片进来时，他会默认调为智能对象，我们这个时候应该栅格化后，再调为智能对象。

AI基础

PS放大后会像素化，有很多小锯齿 在这里插入图片描述

AI是矢量图，放大也不影响清晰度。 在这里插入图片描述

AI和PS的区别：

AI主要是用线，而PS主要是色彩，AI终是辅助PS用的一个工具。

实时上色工具（快捷键：K）

用钢笔工具把兔子的轮廓描出来后

在这里插入图片描述

我们选中全部路径，Ctrl+alt+x，然后用实时上色工具填色

AI进阶

渐变图标绘制过程 在这里插入图片描述

1

用矩形和椭圆工具绘制出来 在这里插入图片描述

填充选择渐变 详细属性如图 在这里插入图片描述

继续在里面绘制一个圆 填充渐变效果 再加一个描边#848484 在这里插入图片描述

再来绘制高光部分 这样就完成了 在这里插入图片描述

第五章：版式设计

在这里插入图片描述

字体大小统一 布局要有平衡性，这张图我分为上下两大部分

上：一张大banner图 占了全高大约5分的位置

下左：文字加小图 小图也是选的森林吊桥图 与上方的大banner图对应

下右：三块小的文字 这样看起来与左边平衡一点

LOGO设计

在这里插入图片描述

根据耀字拆分 光+羽+隹

光用星星代替

羽和隹 用鹰的爪子代替 同时鹰也代表着热爱自由 翱翔于蓝天中

最后用一个未闭合的圆框柱 代表着我不会被任何东西束缚

鹰的爪子抓着星星逃跑 代表了我热爱自由

官网设计

在这里插入图片描述

、

这里官网设计我使用的是沉稳的颜色 蓝+黑+灰

选一张高逼格的banner图放在上方

再把院长的照片放上去

剩余的中间部分 用来放文字和功能等等

因为学校官网 看得人主要是要来了解学校的信息 所以放文字比较好 但是不宜太多 偶尔用图片来表达 这样不会使人阅读疲惫

下方再把学校的口号放上去 放大 然后加个红色描边 代表我们的学习正在燃烧

ICON设计

在这里插入图片描述

这一套icon是标准一点的设计 没有搞花里胡哨 识辨度比较高 每一个图标都有加阴影部分和一些渐变

主要还是为了识别度

后台网站设计

在这里插入图片描述

这个后台网站 是一个帮商家推广商品 然后领佣金的一个后台管理网站

用的主要是半透明风格 背景加一个色彩渐变 这样看起来不乱 又很舒服

主要的目的是为了看数据 所以还是做得简洁一点 没有加什么banner图之类的

第十章：作品集

在这里插入图片描述

微信小程序星海飞驰