云骑士一键装系统-简单一键在线装机工具,一键备份还原功能让系统维护更方便!
BIOS设置 win10教程 win7教程 U盘教程 xp教程 win8教程 电脑故障 电脑资讯 手机教程 软件教程 游戏攻略
当前位置:云骑士 > 使用教程 > 软件教程 > 如何用ps做app界面

如何用ps做app界面

文案作者:
2020-11-17 17:57:56
播放量:

PART1:首先是展示效果图

如何用ps做app界面

PART2:创建文件、设置背景

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

如何用ps做app界面(1)

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

如何用ps做app界面(2)

PART3:状态栏和导航栏部分

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

如何用ps做app界面(3)

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

如何用ps做app界面(4)

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

如何用ps做app界面(5)

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

如何用ps做app界面(6)

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

如何用ps做app界面(7)

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

如何用ps做app界面(8)

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

如何用ps做app界面(9)

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

如何用ps做app界面(10)

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

如何用ps做app界面(11)

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

如何用ps做app界面(12)

PART4:绘制头部卡片部分。

如何用ps做app界面(13)

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

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

如何用ps做app界面(14)

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

如何用ps做app界面(15)

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

如何用ps做app界面(16)

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

如何用ps做app界面(17)

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

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

如何用ps做app界面(18)

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

如何用ps做app界面(19)

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

如何用ps做app界面(20)

PART5:绘制中间的卡片。

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

如何用ps做app界面(21)

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

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

如何用ps做app界面(22)

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

如何用ps做app界面(23)

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

如何用ps做app界面(24)

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

如何用ps做app界面(25)

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

如何用ps做app界面(26)

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

如何用ps做app界面(27)

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

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

如何用ps做app界面(28)

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

如何用ps做app界面(29)

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

如何用ps做app界面(30)

步骤5:同步骤4,颜色:#ec5a6f、#ac5aec。

如何用ps做app界面(31)

PART6:最后一个版块。

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

如何用ps做app界面(32)

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

如何用ps做app界面(33)

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

如何用ps做app界面(34)

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

如何用ps做app界面(35)

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

如何用ps做app界面(36)

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

如何用ps做app界面(37)

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

如何用ps做app界面(38)

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

如何用ps做app界面(39)

PS制作梦幻天使效果教程
图文
PS制作梦幻天使效果教程
在PS中绘制PSD发光素材,可以在每幅画面中调整运用。在场景上我们的地区点几乎找不到可以落脚的森林湖面拍摄点,这里用湖面滤镜Flaming Pear来制作湖面...
阅读:131 发布时间:2020-09-02
手机wps怎么压缩文件
图文
手机wps怎么压缩文件
打开手机上面的文件管理器,找到要压缩的WPS文件。长按一下WPS文件,然后选择要压缩的文件。点击右下角的【更多】,选择【压缩】。对压缩文件进行保...
阅读:46 发布时间:2022-02-09
苹果手机wps的文件怎么发送到qq邮箱
图文
苹果手机wps的文件怎么发送到qq邮箱
在手机上点击打开wps文件。打开文件后,选择程序下方的【工具】选项。选择工具选项中的【文件】分享功能。选择通过邮件分享。输入对方的邮箱地址,...
阅读:83 发布时间:2021-12-10
ps绘制大理石与金属碰撞文字效果教程
图文
ps绘制大理石与金属碰撞文字效果教程
创建一个1000x750 px的新文档,单击图层面板底部的创建新的填充或调整图层图标,选择纯色,然后设置颜色:#e8e4e1,用Kaiju字体创建文本,设置大小为250p...
阅读:247 发布时间:2020-11-20
ps怎么抠图并和另一张图片合并
图文
ps怎么抠图并和另一张图片合并
打开ps,选择两张图片,打开蒙版,使用画笔工具,将硬度调整到最大,在图像上涂抹,关闭蒙版,选择反向,复制粘贴,选择新建立图层,拖动该图像到...
阅读:572 发布时间:2020-11-12
怎么恢复系统
怎么恢复系统
浏览:9475
2019-11-11
索尼笔记本重装系统教程
索尼笔记本重装系统教程
浏览:12483
2020-10-15
不用光盘怎么重装电脑系统
不用光盘怎么重装电脑系统
浏览:15030
2018-10-17
win7麦克风没声音怎么设置
win7麦克风没声音怎么设置
浏览:24228
2020-10-17

客服二维码

邮箱:toplearningteam#gmail.com (请将#换成@)

Copyright 2013-2020 云骑士( https://www.yunqishi.net/ ) 版权所有 All Rights Reserved   鄂ICP备2023010145号-1