民宿类APP界面设计
作者:暂无发布时间:2019年11月07日 10:40

1.         打开【PS,Ctrl+N】新建画布,【M】选择选区框,【状态栏】40像素,【导航栏】88像素,【底部标签

栏】98像素,分别为其拉一条【参考线】。


2.         拖入【状态栏】素材,【居中】对齐,【矩形工具】在【导航栏】画一个546*60像素的搜索框,【居中】对齐,在88像素内【置底】,【圆角】29.5像素,【描边】1像素、颜色为【eaeaea】,【填充】白色,添加【投影】。


3.          拖入【搜索按钮】素材,【放置】在搜索框当中:水平距左边32像素、垂直居中对齐,【调整】大小、【宽高】数值为双数,添加【颜色叠加】,【文字工具】输入提示文案。


4.         拖入【扫一扫】素材,【放置】在【导航栏】当中:水平距左边30像素、垂直与搜索框居中对齐,【调整】大小、【宽高】数值为双数,不得高于搜索框,添加【颜色叠加】,同样步骤放置【消息】素材,【Ctrl+G】打组【导航栏】。


5.         【矩形工具】创建670*270像素的矩形,水平居中对齐,垂直距【导航栏】50像素,【圆角】10像素,拖入图片素材,按【Alt】放置矩形中,点击【左键】剪切,新建图层,降低【不透明度】,【文字工具】输入文案,【Ctrl+G】打组【banner】。


6.         【矩形工具】创建矩形,【Alt】移动复制一个,【Ctrl+G】打组【轮播按钮】,距【banner40像素【Ctrl+G】打组【轮播按钮】,拖入【banner】组中。


7.         【文字工具】输入文案,【矩形工具】创建矩形,文案与矩形相隔10像素,水平距左边30像素,垂直距【轮播按钮】76像素,【Ctrl+G】打组【标题】。


8.         【矩形工具】画一个264*180像素的矩形,【圆角】10像素,水平距左边40像素,垂直距【标题】46像素,拖入图片素材,按【Alt】放置矩形中,点击【左键】剪切,【文字工具】输入文案,【Ctrl+G】打组【组2】。


9.         Alt】移动复制两个【组2】,更改图片和文字,再更改组的名字,【Ctrl+G】打组【精选主题】。


10.     Ctrl+J】复制【精选主题】组,两组【间距】76像素,分别更改图片和文字,再更改组的名字为【热门城市】,【文字工具】输入【更多】,水平距右边40像素,底部与【精选主题】和【热门城市】持平。


11.     【矩形工具】创建矩形,拖入【首页】素材,添加【投影】,【文字工具】输入【首页】,素材和文字相隔10像素、水平距左边40像素、垂直居中对齐,【Ctrl+G】打组【首页】。


12.     Ctrl+J】复制【首页】组,更改素材和文字,再更改组的名字,水平距右边40像素,平均分步,【Ctrl+G】打组【标签栏】。


13.     Ctrl+S】保存,同样方法新建相同的画布,拉好【参考线】,拖入【状态栏】素材,拖入【返回按钮】素材,水平距左边30像素、垂直居中对齐,【文字工具】输入文案,水平垂直居中对齐,【Ctrl+G】打组【导航栏】。


14.     【文字工具】输入文案,水平距左边30像素,【多边形工具】画一个三角形,两者间距16像素,垂直居中对齐,【Ctrl+G】打组【时间】,【Ctrl+J】复制,更改文字,再更改组的名字为【筛选】。


15.     【文字工具】输入文案,【调整】大小、位置、颜色。


16.     【矩形工具】画一个690*400像素的矩形,【圆角】10像素,距文字20像素,拖入图片素材,按【Alt】放置矩形中,点击【左键】剪切,【Ctrl+G】打组【欧式复古两室】。


17.     Ctrl+J】复制,两组【间距】50像素,分别更改图片和文字。


18.     拖入【标签栏】素材,将首页【颜色叠加】改为【渐变叠加】,【Ctrl+S】保存。


19.     最终效果图如图所示。


    

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

下载虎课APP

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

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

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

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

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