恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
PS教程!数据APP界面教程
0.0°
2018-07-04 好文转载 教程 原作者: Emma Y. 举报 2736 18 12 2

哈喽!大家好,我又来咯~我当然相信各位同学在上一次都会有些许收获。那么在这期我会带大家画一个手机界面,别看简单,说不定你也会在这个过程有收获哦。

首先小月在前面跟大家说一下,这篇教程讲的是APP界面教程,操作步骤比较多,但是内容比较详细,所以大家不要着急,一步一步来,毕竟学习不是一成而就的,需要不断的去操作、练习。谢谢大如果这篇教程让你有所收获,记得给小月点个赞哦,谢谢大家了~小月在B站发布了一些教学视频,感兴趣的童鞋可以去了解一下哦https://space.bilibili.com/334026226/#/

PART1:首先是展示效果图

Image title

PART2:创建文件、设置背景

步骤一:文件-新建-进行下面设置。

Image title

步骤2:从工具栏选“矩形工具”,尺寸设置为750*1334像素,然后对齐画布,并设置背景颜色:#313952、#393f52。

Image title

PART3:状态栏和导航栏部分 

步骤1:状态栏就是手机电池电量那一部分,这个可以去网上下载。然后放到界面的顶部。先设置一个750*40px的矩形,然后把下载到的状态栏条对这个矩形垂直居中、水平居中。(这里说一个技巧:可以按住Ctrl,在图层面板上点击这个矩形,这样就会出来一个预选框。然后再点击下载到的状态栏进行上面的对齐操作。)最后记把这个隐藏了或者删除掉。

Image title

步骤2:画导航栏,这里导航就很简单了。一个汉堡菜单icon和一个钱包标题。依然还是建一个待会儿要对齐的图层(750*88px)。先预览下效果。

Image title

步骤3:接下来绘制汉堡菜单icon。

Image title

a:先用矩形工具画最上面那一条(24*4px),颜色:#FFFFFF。

Image title

b:再用工具栏的黑色箭头选择画好的那一条,复制一层(Ctrl C,Ctrl V)然后往下移动10px(按住shift+↓),如下操作。

Image title

c:重复操作复制出第三条。

Image title

d:再将中间那条往左移动6px。

Image title

e:最后将这个画好的icon放好位置。按住shift,点击前面建好的高度88px,记得点一下工具栏的“移动工具”,然后再点击icon图层。顶部就会出现对齐的一些操作,选垂直居中和左对齐。

Image title

f:最后可以把预选框取消了(Ctrl+D),同时把背景条(我这里是黑色的)隐藏了。然后再按住shift+→(每次移动10px,我们要向右移动80px)。

Image title

步骤4:把标题写上去,同时记得水平居中,垂直居中。设置如下:

Image title

PART4:绘制头部卡片部分。

Image title

步骤1:先做出中间的卡片。

a:矩形工具画一个590*340px的矩形,圆角10px。填充渐变颜色#373f57、#4d5672,角度45°。 对整个背景画布水平居中,依然是上面的方法,按住shift,点击背景图层,出现预选框,然后点这个卡片的图层,再用移动工具(工具栏最上面那个),然后就可以水平居中了。 最后卡片设置图层样式-投影。 卡片设置如下图。

Image title

b:选一个粗一点的字体,打出VISA字样。图层双击进入图层样式设置,添加渐变色#8189a6、#eff1f6,角度0°。设置如下:

Image title

c:把透明度降为10%。文字距离卡片左边和下面均为30px。

Image title

d:添加卡片里面的文字信息。颜色:#FFFFFF。

Image title

e:上面文字1和2部分透明度60%,文字3部分透明度40%。

f:网上找VISA的logo,保存完放到卡片上,缩放到合适大小。离下面卡号文字60px,上面和左边均为30px。添加图层样式-颜色叠加(#ffffff)。透明度80%。

Image title

步骤2:接下来就可以把左边的卡片画出来了。这里直接复制一份上面这张卡片就行了。然后Ctrl+T,在上面缩放比例设置80%,80%。然后按住shift,移动到左边且离中间卡片距离为40px。

Image title

步骤3:复制出右边的卡片。方法同步骤2。只留下卡片就行,文字啥的都删掉。会发现太黑了,需要反向渐变颜色(属性栏)。

Image title

PART5:绘制中间的卡片。

步骤1:先把小标题输进去。设置参考如下,透明度40%。距离上面卡片60px,和卡片左对齐。

Image title

步骤2:先把第一个卡片做好,其他卡片改改颜色,改改数字就行了。

a:新建一个矩形220*273px,圆角10px。填充颜色:#4d5672。设置投影,最后左对齐上面文字。

Image title

b:新建一个椭圆工具80*80px。描边6px,颜色#373f57。上距离30px,左距离30px。透明度降为80%。

Image title

c:复制一层,然后透明度改回来(100%)。把属性面板的“设置描边线段的端点”改成圆的。否则等会我们要截掉这个圆圈的部分端头就会是平的。描边设置为8px。并修改描边颜色为渐变色(#f4b962、#f462a0),角度60°。

Image title

d:选择钢笔工具里(鼠标长按)的添加锚点工具(图层面板选的是上面这个渐变圈圈)。

Image title

f:再点一下上图2的位置,键盘Delete键,删除。剩下的线段会是端点圆头的,还记得前面让大家设置的吧。

Image title

e:给它加一个高光:新建一个8*8px圆,颜色用吸管吸一下末端颜色。然后双击进入图层样式添加外发光,里面的颜色还是你吸到的颜色。最后把这个高光图层放到线段图层的下面。然后调整好界面显示的位置,让它们看起来是一个整体

Image title

步骤3:接下来就好办了,把文字添加进去。

a:下图为“1680”的字符设置,美元符号$和1680一样,只需要把字号改成22即可。最后调整位置,左边距离30px,上距离60px。

Image title

b:第一个卡片的就剩最后一步啦。新建文字图层把日期打进去,下面是字符设置。透明度改为40%。上距离20px,左和下距离都为30px。

Image title

步骤4:第二个卡片,现在只需要复制刚才做好的那个卡片就行了。然后调整卡片与卡片的距离为30px。最后改改文字,改改颜色#5ae0cf、58a3e1。

Image title

步骤5:同步骤4,颜色:#ec5a6f、#ac5aec。最后效果如下:

Image title

PART6:最后一个版块。

步骤1:首先把上面的文字一个一个(分三个图层)打进去。字符串间的距离为40px。选中的字符串“monthly”底下加一蓝绿色条强调一下。色条长度和文字长度一样就行,高度2px,颜色:#5addcf,向上距离文字10px。

Image title

步骤2:接下来画出5条竖线(间距100px),颜色#FFFFFF,宽度1px,高度到页面的底。透明度20%。打出文字,注意文字和线两边的距离还有和两边文字的距离,一定要是对称的。最后把文字打包建一个组,整组透明度40%。

Image title

步骤3:最后一步啦,搞定就完美了。先来看下下最后效果:

Image title

a:用钢笔工具,勾勒出形状。采用描边6px,不要用填充哈。添加一个渐变色:#5abce0、#5ae0cf,并把第一个颜色的透明度改成20%。如下:

Image title

b:最后一个小东西啦,画一个14*14px的圆,填充:#5ae0cf,描边4px,颜色:#FFFFFF。放在线段的末端。如下:

Image title

c:给这个圆加一个外发光的图层样式。如下:

Image title

d:一起来看一下这部分做完的整体效果:

Image title

e:预览整个页面最终设计效果:

Image title

PART7:总结

做完之后,有没有觉得虽然简单,但是也是有学到一些知识呢。界面要注意规范问题,比如间隙的把控,字体字号的选择,什么是重点什么是辅助,怎么来区分,以及真个界面的稳定性还有颜色色彩的选择,这些你都明白吗?多做练习,如果有想法可以自己修改。







































更新:2018-07-04

收藏

18人已收藏

月下酌

UI资源领取:2930429889

  • 44

    作品

  • 162

    粉丝

  • 0

    关注

  • PS绘制渐变插画教程《静夜》
  • C4D教程!教你6步做出圆球置换效果
  • 炫酷的障画面特效怎么设计?用PS简单三步搞定!
  • 20几岁设计师,你应该掌握的资料整理术

    猜你喜欢

      2018-07-04 好文转载 教程 原作者: Emma Y. 举报 2736 18 12 2

      PS教程!数据APP界面教程

      0.0°

      你确定要举报PS教程!数据APP界面教程

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年07月04日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      12
      18
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录