Sketch设计资讯类社交APP界面
作者:暂无发布时间:2019年11月07日 11:07

1.本节课为大家带来社交APP页面的设计,具体内容【如图所示】。


2.打开【Sketch】,这是我们要设计的一个原型稿,【如图所示】。


3.【A】新建画板,【R】矩形工具,画矩形,关闭描边, 从标尺拉出参考线,【Ctrl+D】再复制一个出来,同样拉出参考线,【如图所示】。


4.在画板下方用【矩形工具】画矩形,拉出参考线,在矩形内部再画一个矩形,在画板两边画出矩形,同样拉出参考线【如图所示】。


5.导入预设好顶部状态栏,【矩形工具】画矩形,导入预设图片,同时选中矩形和图片,【右键】选择蒙版【如图所示】。


6.【矩形工具】画一个与图片大小相同的矩形,关闭描边,填充为黑色,调整不透明度,【如图所示】。


7.【T】文字工具,打字,【Ctrl+D】复制,【矩形工具】画矩形,【T】打字,调整位置和大小【如图所示】。


8.【矩形工具】画矩形,【T】文字工具打字,导入图标素材【如图所示】。


9.【矩形工具】画矩形,【T】文字工具打字,【Ctrl+D】复制文字,按住【Shift】直接拖拽,【矩形工具】画几个小矩形,填充颜色,增加阴影,【T】输入文字信息,【如图所示】。


10.按住【Shift】直接点击矩形可以进行拖拽,【T】文字工具打字,【O】椭圆工具画圆,使用插件自动复制图片,【如图所示】。


11.【T】文字工具打字,【O】椭圆工具画三个圆,选中三个圆然后点击【合并形状】,【拼合】,调整位置,【T】文字工具打字,【R】矩形工具画矩形,再次利用插件导入图片【如图所示】。


12.【矩形工具】画矩形,修改圆角,【T】文字工具打字【如图所示】。


13.【矩形工具】画矩形,在内部再画一个,去掉描边,修改圆角,点击【插入】,选择【形状】,【三角形】,垂直反转,【双击】三角形,修改三角形锚点,合并形状,【如图所示】。


14.【矩形工具】画矩形,【O】椭圆工具画圆,【插入】【形状】【三角形】,反转三角形,去掉描边,填充颜色,【如图所示】。


15.点击【合并形状】,【拼合】,放大双击图像,修改锚点【如图所示】。


16.【矩形工具】画一条线,放到文章下方,在页面底部画一个矩形,【导入】图标素材,【Ctrl+Shift+G】对图标进行解组【如图所示】。


17.【矩形工具】画矩形,修改圆角,在画出矩形的下方接着画矩形,修改矩形上方圆角【如图所示】。


18.【矩形工具】,【双击】矩形修改圆角,下方接着画矩形,然后在上方再画一个小矩形,修改上方圆角,在图形底部画圆,双击圆形删除顶部锚点【如图所示】。


19.【椭圆工具】画圆,去掉描边,填充颜色,在内部画正方形,双击修改锚点让它变为菱形,菱形内部画圆修改颜色【如图所示】。


20.【矩形工具】画矩形,【双击】矩形,在上方增加锚点,按住方向键将锚点向上移动,在内部画一个矩形调整颜色,选中两个矩形,点击【减去顶层】【如图所示】。


21.【椭圆工具】画圆,内部画矩形,复制一层然后调整角度【如图所示】。


22.选中【首页】图层组,【Ctrl+D】复制,【如图所示】。


23.把所有组件删除,导入黑色顶端状态栏【如图所示】。


24.【T】文字工具打字,【V】钢笔工具,画一个三角形,选择描边,【如图所示】。


25.【矩形工具】画矩形,【Ctrl+D】复制,【如图所示】。


26.【矩形工具】画矩形,去掉描边,【椭圆工具】在矩形内部画圆,去掉填充,选择描边,在矩形顶端再画矩形,双击修改锚点,【如图所示】。


27.复制图片,点击蒙版剪切进网格内,【如图所示】。


28.在页面底部画白色矩形,在矩形内部再画矩形框,【T】文字工具打字【如图所示】。


29.本节课到此结束,谢谢观看。

特别声明:以上文章内容仅代表作者本人观点,不代表虎课网观点或立场。如有关于作品内容、版权或其它问题请与虎课网联系。
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+个教程!
配套素材、源文件一键下载!
昨日学员已学习了44,206
并提交了243份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证