点击此处返回

每日可免费学习1个教程

立即登录>

软件入门平面设计 3D数字 C4D教程 Blender教程短视频制作影视动画摄影艺术室内设计绘画插画海外教程电商教程产品精修办公职场编程开发考证·外语品牌设计综合教程 UI设计兴趣生活

详情图文教程训练营推荐

UI设计

UI-民宿类APP界面设计

1660人学过难度:初级练习软件:PS（CC2017）

评论(38) 收藏课程已收藏下载视频

关注人数：8698

虎课注册讲师，专注于海报设计、电商设计，擅于UI设计。人为生活而设计，设计为生活而存在。我是爱设计更爱生活的豆豆，希望我的课程对大家都有帮助~

PS-618年中大促淘宝首页主图

1.8万人已学

PS-荒诞复古风淘宝首页设计

9817人已学

课程综合评分：9.9分

评论可是有底线的

本节教程练习

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】打组【轮播按钮】，距【banner】

登录后学习完整图文教程

虎课APP离线下载免流量

70000+教程，每天免费学一课

一键打开