用户登录

点一下这个分享小图标,在下面可以显示一个分享的提示,上面可以显示分享到的社交网站的图标 ...

先去找两个社交网站的图标 ... 打开 Font Awesome 的 Cheatsheet ... 搜索一下 weibo .... 复制一下 ... 回到我们的设计,打开 Assets 页面 ... 粘贴过来 ...

设计一下它的大小 .. 颜色选择纯黑色 .. 再改一下名字 ..

然后画一个正在形 .. 大小是 24 像素 .. 把它放在小图标的下面 .. 调整一下小图标的位置 ..

刚才复制的是一个字体图标,可以转换一下它 .. shift + command + O .. 会把它转换成一些 path ..

把这两个图层放到一个群组里 .. 再起个名字 .. 然后隐藏下面这个正方形 ... 再把这个群组转换成一个符号 ...

再去复制一个小图标 ... 搜索一下 weixin ... 复制 ... 粘贴 ...

然后用同样的方法再处理一下这个 weixin 小图标 ..

打开 Symbols 页面 .. 复制一份刚才创建的这个图标符号 .. 名字的里面加上一个 light ... 因为我需要让它在暗色背景下面显示,所以图标的颜色可以设置成白色 ...

再找到这个 weibo ... 复制一份 ... 改一下名字 ... 设置一下颜色 ...

回到 Assets ... 复制一下这两个小图标 .. 把它们粘贴到 Article 这个页面上 ..

放大显示 ... 设置一下对齐 .

再画一个矩形 .. 填充设置成黑色 ... 手工再设置一下它的尺寸 ...

然后把它放在小图标的下面 ...

选中其中的一个小图标,我们可以使用它的 Light 版本代替一下 ... 再选中另一个 ... 同样选择 light 版本的符号 ..

然后调整一下小图标的位置 ...

再设置一下它们的对齐方式 ...

选中下面这个黑色的矩形 ... 给它添加点圆角效果 ...

再插入一个小角形 ... Insert ... Shape .. Triangle ... 把它设置成黑色 ... 再手工设置一下它的大小 ...

把它放在这个黑色矩形的右上角这个位置上 ..

选中这几个图层 ... Command + G,群组的名字是 Share ...

然后再选中下面这些图层 ... 也把它们放在一个群组里 ... 名字是 Info ...

调整缩放比例 ... 重新再摆放一下这个 Share 组件的位置 ...

分享《 网站实例:设计 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点