【UI设计】零基础带你入门UI设计

零基础带你入门UI设计

下载并安装PS
关于PS的基础知识
PS相关的工具以及快捷键
制作界面的思想以及步骤
关于上面界面的图标
自己动手去做一做

前言：在一线城市分工比较明确，但在二线城市，对于前端工程师可能多少也要求点设计，比如：设计一个界面等等。一个项目主要分为四个流程：策划—— 设计 —— 开发 —— 运营，然而前端开发与设计紧密联系，可能会多少要求懂一点。

下载并安装PS

工具：PS （可到官方版本去下载，图标如下）

关于PS的基础知识

智能图片： 一般把编辑好的图片都要转换成智能图片，以保证此图片不能进行修改

界面大小： 当需要设计手机页面的时候，选用宽度：1125 像素高度：2456 分辨率： 72

不透明度： 降低了整体的透明度，若不适用透明度，填充改为百分之一百

透明： 填充从百分之百降到百分之三十四，只降低内部的透明度，不降低外面的

抠图： 选用钢笔工具 —— 形状 —— 曲线（左键按着不动进行移动）

PS相关的工具以及快捷键

图像的原始大小查看：crl + 1
移动工具：V
缩放： crl + t
显示所有画面：crl + o
图片放大 : crl + +
图片缩小 crl - -
路径转换为选区： crl + 回车
选取颜色之后填充前景色 : alt + delete
重合：钢笔工具 + crl + 拖着周围的小圆圈进行移动
角处理：钢笔工具 + 双击 + 点最后一个 + 点锚点
多出来的部分调整 : alt + 左键变成箭头向下的符号
渲染：画笔 + 像素200 + 选择颜色
周围出现刻度: crl + r

制作界面的思想以及步骤

做界面这方面，需要一定的鉴赏能力和长期积累的经验以及训练。

可以看一下面这个界面，说一说具体的操作步骤吧！

关于导航栏的制作：

这部分也可以选取我们手机里的导航栏，进行截屏或者在网上找！

步骤：
1，显示刻度： crl + R 键显示刻度（一定选择像素不是厘米等）

2，对图片进行划分：点击视图 —— 新建参考线 —— 选择水平）0px —— 从上面的参考线划出一条参考线与之对齐

3，填充背景色: 点击最左边形状自定义工具 —— 矩形工具 —— 画出上面的区域 —— 最上边填充双击选择颜色描边 : 选择中间夹着红色的白图片

4, 把我们事先找到的图片拖拽到这里来，点击右上角的锚点拖拽进行放大和缩小，按回车键图片进行固定，点击最左边的工具的第一个（有四个方向的箭头），进行拖拽到固定的位置

5，补充：如果你找的导航栏背景色是黑色的话，需要最右边的含有把正常改完滤色

关于去哪儿网制作

步骤：
1，肯据上述，你可以完成后面的背景色

2，填充文字 ：选择最左边的文字工具 —— 最上面选择你喜欢的字形 —— 输入去哪儿旅游会员日 —— 改颜色（上面第三步）

3，客服图标和转发图标：图片（下面会发图标下载并保存）—— 缩放 —— 回车 —— 移动到对应的位置（同上面步骤四）

步骤：
1，皇冠角标：最上面是一个皇冠的图片（给图标）—— 缩放——回车 —— 移动相应的位置 —— 点击最右边皇冠的图层的后面空白处双击 —— 颜色叠加打对勾 —— 双击打开 —— 选择颜色即可

2，会员日以及去哪儿旅行文字同上述

3，白色的六边形：选择最左边的自定义工具 —— 选择多边形定义工具 —— 最上面的边数改为6 —— 画图——填充白色

4，六边形的外边的形状：选择最左边的自定义工具 —— 选择多边形工具——最上面的边数改为6 —— 画图 —— 选择钢笔工具 —— 点击最上面的锚点删掉 —— 填充颜色 —— 改为渐变色紫色

步骤：

1，海豚：里面的海豚可以找一些网上的海豚的图进行抠图 —— 点击钢笔工具进行画锚点 —— 勾画出海豚的曲线 —— 填充颜色 —— 海豚中间弯曲的线同钢笔工具进行勾画 —— 填充颜色—— 最上面选择渐变色以及蓝色描边：选择渐变

2，光环：上网找黑色背景的光环下载下来(下面发) —— 拖拽进来 —— 最右边把正常改为滤色即可

3，10.1：输入10.1后—— 按着 crl + shift + 点着这个图片 —— 点击上下左右锚点对进行向左倾斜右倾斜变矮拉长

4,旅游会员日：按着上面的方式 —— 选择钢笔工具 —— 显示出锚点后—— 进行添加锚点连线 —— 字体会变厚

5，添加背景色以及周围的小圆圈 —— 最左边的自定义形状工具 ——— 椭圆工具 —— 画圆圈 —— 填充颜色

对于这部分的操作：和上述类似画矩形方块填充背景填字等

这些是五个图标

步骤：

划分区域 —— 填充背景色 —— 放图标 —— 填字（和上述同）

补充：当填充了旅行的图标被后面的背景色遮住了改动方法：只需要把最后边旅行的图层双击拖住移动背景色的图层上面，这样就可以看见了！

关于上面界面的图标

自己动手去做一做

希望可以多多实践哦