蔬果类APP界面UI设计
作者:暂无发布时间:2019年11月07日 11:05


1.打开【PS】软件,新建画布,设置画布尺寸,拉出相应的参考线。


2.打开【电量条】素材拖入到画布上方,添加颜色叠加为【白色】,新建矩形填充【绿色】,。


3. 【Ctrl+T】调整绿色矩形形状,选择【文字工具】输入所需文本,调整字体字号和间距,拖入【搜索】素材放置合适位置。


4. 选择【文字工具】输入【点击搜索…】文本,设置字体字号,放置搜索框内。


5. 选择【文字工具】输入【今日推荐】文本,设置字体字号,选择【矩形工具】创建一个矩形,填充主题绿色。


6. 选择【矩形工具】创建一个矩形,按住【Alt】键复制并移动一个矩形,将矩形细分为三个小矩形,拖入素材文件,创建【剪切蒙版】,输入文字


7.复制【今日推荐】修改为【每日新鲜】,选择【矩形工具】创建两个矩形拖入素材文件,输入所需文字。


8.在画布下方拖入素材图标,选择【矩形工具】绘制一个矩形,修改颜色为【主题灰色】。


9. 选择【椭圆工具】绘制一个椭圆,填充为【白色】,复制一个适当缩小,填充为【绿色】,添加【投影】和【内阴影】图层样式,拖入按钮素材图片,放在合适位置。


10. 选择【矩形工具】绘制一个矩形,填充颜色为【黑色】,设置不透明度,选中按钮区域,添加【蒙版】填充【黑色】,使按钮显示,拖入其他按钮素材。



11.新建画布,拖入【电量条】素材,输入标题文本,按住【Alt】键复制多个并修改文本内容。


12. 选择【椭圆工具】绘制一个椭圆,拖入素材文件,创建矩形形状,拖入素材图片,按住【Alt键单击图层间创建剪切蒙版】。


13.选择【文字工具】输入所需的文本,按【Alt】键复制并移动至下方,替换原有的素材文件,新建两个矩形,输入【通道】【发布】文字。


14.最终效果如图所示。


点击观看视频教程
UI-蔬果类APP界面设计
初级练习16306人已学视频时长:53:06
立即学习
特别声明:以上文章内容仅代表作者本人观点,不代表虎课网观点或立场。如有关于作品内容、版权或其它问题请与虎课网联系。
500+精品图书
20G学习素材
10000+实用笔刷
持续更新设计模板
立即领取

下载虎课APP

随时随地学技能
APP更方便
每天免费学课程
下载虎课网APP
随时随地学海量会员教程
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服
虎课
积分
免费学习92000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了21,976
并提交了174份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 92000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证