UI总结

学了两个月的UI课程我知道了
UI设计英文叫User Interface翻译成中文意思就是(用户界面)。
UI设计是指对软件的人机交互,操作逻辑,界面美观的整体设计。
UI设计分为4种:
分别是移动端UI设计,PC端UI设计,游戏UI设计,以及其它端UI设计。
其中三大构成是专业设计的一门基础课,三大构成是什么呢?

0.三大构成即平面构成、色彩构成与立体构成,是现代艺术设计基础的重要组成部分。所谓“构成”是一种造型概念,其含义是将不同形态的几个以上的单元重新组构成一个新的单元。

1.平面构成主要在二度空间范围之内,以轮廓线划分图与地之间的界线,描绘形象。平面构成里面分3点,分别是点,线,面及点线面的运用,骨骼,重复和9种构成。

2.色彩构成就是色彩的相互作用,是从人们对色彩的感知和 心理效果出发用科学分析的方法,把复杂的色彩还原成基本的要素,利用色彩 在空间,量和 质基本的要素,利用色彩在空间、量和质的可变换性,按照一定的规律去组合构成之间的相互关系,再创造出新的色彩效果的过程。色彩构成三点:色彩三要素,色彩对比,色彩欣赏。

3.立体构成是现代艺术设计的基础之一,是使用各种材料将造型要素按照美的原则组成新立体的过程。立体构成的构成要素是点、线、面、体、色彩和空间诸方面。它的形成要素,仍然是形式美诸法则,如对比调和、对称均衡、比例、节奏、韵律、多样、统一等,重要的是通过设计创造意境。

一. 平面设计基础
学习PS之前我们应该了解一下PS,什么是PS?
ps软件s1通常指的是Adobe Photoshop,简称“PS”
是由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成
的数字图像。使用其众多的编修与绘图工具,可以有效地进行图片编辑工作。
主要用途都是平面设计与图片处理这两大类.

1.1 下面这些图片是开始接触做的,
在这里插入图片描述
在这里插入图片描述
第一个图像我先是使用钢笔工具进行抠图,然后将图案进行变形,最后使用扭曲贴在书本的表皮上面,图二,使用钢笔工具勾出卡通然后使用羽化涂出卡通的腮红,就完成啦。

1.2 学习了这些工具后我便开始掌握别的工具了,下面图片是新学的工具
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
图一:是怎样将水印去掉(原图有水印),首先我们先选择污点工具将不需要的水印慢慢的涂掉,可以结合涂抹工具进行均匀,然后进行图案的美化和细致的变化。
图二:也就是美图,主要用到的工具是涂抹,慢慢涂抹美化即可。
图三 :也是美图,使用到的工具有模糊工具,修复画笔工具,将图片的污点,痘痘等等去掉即可 。
图四:主要是运用模糊功能,保留第一个人的清晰度,后面每个人逐一进行模糊,按视觉 的远近原理 模糊程度不同,
图五: 这是主要是去污的,原图曝光不够,我这里就用曲线工具提亮整体,然后将瓶子上的污点去掉,在用涂抹工具涂均匀。下面倒影 复制图层垂直镜像,然后高斯模糊就行了。

二.PS的进阶篇

在这里插入图片描述
第一步新建画布,找个背景图片。
2,新建一个图层,加一个小小的渐变,径向,反向,设置填充为65%,正片叠底。
3,输入文字,字体找个粗大的。
4,然后复制一层 清除所有样式 填充不透明度0% 方便我们加更多效果
内阴影, 颜色:eb8029 用画笔工具在字体的背景画点黑色,再加点橙色,设置橙色图层的模式为线型减淡(添加),透明度16%
5,用涂抹工具,用20PX大小,50%深度。把亮色涂一下,看起来像融化了。根据裂痕再涂抹出破裂的效果然后在字体上面用画笔工具画两个图层,一个暗色,一个亮色,亮色为橙色,模式是颜色减淡。添加烟雾素材和火光素材,完成。

做完了岩浆字体后,接下来做的化妆品的一个Banner。在这里插入图片描述
1, 第一步新建画布,宽1600高800,放进草地背景,改为黑白颜色。
2, 放置花朵素材,复制一个花朵图层填充黑色,高斯模糊,稍微移位置,调整透明度,变成阴影。
3,放置护肤品素材,复制一个同图层做阴影。用矩形工具画白色形状模糊,制作出护肤品下方的亮光。
4,制作花瓣小细节,用蒙版,以及制作花瓣阴影。5,新建图层用渐变工具画出光影突出主体。
6,添加logo,给logo做一下渐变效果和描边。7,添加文案排版。完成。
在这里插入图片描述
汽车广告的制作
首先是对背景进行处理,目的是降低原来背景的饱和度,加大对比,增加我们想要画面呈现的一些冷调。接下来是对小车子进行处理,将车子放到场景中,然后画影子。画影子的时要注意4个车轮内侧方向的阴影要更重一些,车轮外侧要相对淡一点。车身我们也要处理一下,按照我们摆放的位置,光源在车的顶部靠后一点的位置,那么车身应该是从上到下逐渐变暗,车顶部最亮,底部最暗。这时需要我们通过曲线来吧车子整体压暗,再利用蒙版擦出顶部高亮区域,如果觉得曲线效果不理想,可结合笔画自己去涂抹暗处,注意调整不透明度。同理我们也可以利用白色柔性画笔去加强顶部的光,使对不更加明显。接下来是对人物的处理,与车子类似。也是加投影,调颜色,加强明暗对不。火桶的处理手法和人物类似,限于本身素材的颜色太亮,这里首先要做的是压暗在压暗。。主要说一下加上火之后,需要注意哪些细节的地方。1.火焰的周围应该是有偏红黄的亮色的,是火焰发出的光。2.桶的最上方离火最近,所以要有些环境色3.为了丰富桶的细节,我们可以给桶加血材质,配上一些英文。到这里,决定你画面整体材质能否上一个等次的节点来的。人物现在冰冷冰冷,既然前方有火,那么人物靠近火焰的一侧应该有一些暖色的光,同理车灯照射人物的一侧应该有一些冷色。最后用渐变统一一下色调,再加上你喜欢的文字和logo就好了。

在这里插入图片描述
先把要的素材选好,人物,城市背景,闪电,烟雾,然后扣出来,背景调暗,虚化,人物再调色,把人物左半边和 下半部分调暗,右肩调为ca7330 透明度调低,胸口圈圈上部分颜色加深重叠,最后字体调渐变…即可 。

二. AI的基础
AI是Adobe Illustrator的文件扩展名,是一种矢量图形文件格式。Adobe Illustrator是一种流行的基于矢量图形的绘图程序。AI格式是一个严格限制的,高度简化的EPS子集。AI代表Adobe Illustrator。
AI我们主要是制作icon的,下面是我做的AI

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
以上图案我都是使用钢笔工具进行绘画的,画出矩形或者圆形先然后使用 路劲查询器进行切图,合图。

三.AI的进阶在这里插入图片描述

图一是用无数圆形和路经查找器切合出来的,蓝色矩形做背景,最后给加个阴影部分完成。
图二用矩形工具绘制出大概的形状,填充颜色,以及渐变。然后接着绘制里面的圆,最后绘制高光部分,下方设置透明度为0
图三 ,我们先绘制图片,然后找到中心点。然后绘制渐变图形,空白的填充,渐变填充描边,描边度数大到中间的圆看不见。然后,点击渐变面板的描边应用渐变,再在渐变中添加4个锚点,然后把所有锚点改成白色,隔开一个描点设置透明度0%,最后画一个小原点,加上四周的短线就好啦!。

                                                                               个人设计总结
我觉得一个成功的界面都是简单大方的,容易看用的,毕竟界面是给用户操作的,想我这些操作系统界面,如果是色彩绚丽,会让人眼花缭乱不仅不能增加美感,更可能会给用户操作带来不便。Icon 和logo 我觉得有创意最好啦!用不同的形式或样子表达出你的意思,也能让人容易看懂,我们的时代每天都在进步,创新,所以我们的要有自己的创意,结合自己的想法,做出更多美好的作品!

四. 个人 logo设计
在这里插入图片描述
上图上我一个个人的Logo设计,开始的思路是从我的名字开始想的,Logo它包含了我名字英文缩写,和象征性的东西,L = 我姓的缩写 屋子代表家 ,笑脸代表了欢笑。

五.个人 ICON设计

在这里插入图片描述

我设计的这套ICON是猪为原型,因为今年是猪年嘛,粉色的猪感觉挺可爱的,又有趣 ,所以想到用猪猪 做ICON,是不是挺可爱的。ICON我主要都是用钢笔画出来的。字体是微软雅黑,颜色 ffd0d8 f299a8 。

六.系统后台首页设计

在这里插入图片描述
我做的这个是一个养老系统的后台,我用的主题颜色是浅绿色,这里的绿色代表健康,和谐的,排版简洁,整体整齐。

交互功能:我这个是主页面,这个页面,该放的信息应是简单的信息,一目名了的信息,所以这里放的是院里重要的信息,比如住院的人数,院内发布的重要公告,预约人数,排队人数,退住人数,人数之间的数据查询,顶层是一个用户的登录可以进行注销和切换,上面也可以进行界面颜色的选择进行变化。上方四中颜色代表了各种信息的总数,如住院人数,工作人员上岗人数,外出活动人数等,中间放的线形图可以看到住院人数的趋势,下放左侧放的是院内新闻,可以了解院内最新的通知,公告。右侧放了一个圆形图,可以看出各种重要信息占的百分比。

七.设计作品集在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值