最终效果图:
先上最终效果图,我们这边的超跑不是超级跑车,是超级跑鞋的意思~··
设计师除了要设计,还要多运动啊!
1、首先你需要上网找一张NIKE鞋图片,素材的颜色将被用作界面的主配色。
2、接下来,你需要用磁力套索工具,或者选区工具,把图片周围的白色扣干净。
PS:如果你是个懒人的话,可以在花瓣直接搜NIKE PNG,
可以得到已扣完的耐克鞋(。・`ω´・),这么懒真的好吗?
3、你需要建一个750*1334像素,分辨率为72的画布,背景色值为:#1e1e1e
4、你需要找到正方形形状工具,画出状态栏40像素和标题栏88像素的长方形,色值为#1a1a1a,然后画出粉红色的长方形装饰
5、画一个内容区域的正方形,尺寸如图,色值还是为#1a1a1a,再给它添加黑色外发光,透明度30%,正片叠底
6、很多人说状态栏那类找,一般我们都是用模板里面的素材,你没有的话,请下载本教程里的源文件里面直接拿,(。☉౪ ⊙。)呐尼,你说你要自己画?有懒不偷……那只好随便你了~··
图标呢!可以去阿里矢量图标库下载,记得下载矢量格式就是那个SVG或者AI格式,当然你要自己画也可以,至于如何画图标可以参阅雪姐姐的其它教程~··本处不展开~··
6、接下来再百度图片里搜一张NIKE的logo图片,高清一些的,拖进AI里,小黑箭头点中后,会出现图像描摹工具栏,下来箭头后选黑白徽标
7、描摹好后,点顶部菜单对象-扩展,对象-取消编组,要重复取消编组到无编组可取消后,用小黑箭头点一下画板空白处,再点击白色部分,delete掉所有的白色背景
接下去就可以拷贝到PS里去用了,粘贴的时候要选4个菜单中的最后『形状图层』
8、接下来用圆角矩形工具画一个按钮呗,尺寸如图,给加个渐变的图层样式
9、复制按钮图层,错开一些位置,把窗口-属性-蒙版面板打开,设置羽化值为8,透明度加一些,做个弥散投影,再给按钮添加文字
10、我们把扣完的NIKE鞋放上图调整下角度,然后用加深工具,在颜色部分,使用阴影模式擦2下,这样鞋子颜色会更加妖艳一些,也是我们需要的效果
11、接下来我们打上价格,去阿里矢量图标库找一些小星星或者小爱心,当然你自己画也很快,然后把5颗小星星CTRL+G成组后,在图层文件夹上方新建一层,右键-剪切图层,把最后1颗半星星涂白
12、最后我们来做COLOR和SIZE区域的分割线,其实也很简单,建一个高2个像素,宽和中心方形区域一样宽的像线一样的黑色长方形路径,再给这个线加一个浅灰色投影
13、关于此运动鞋的介绍文字,你去官网或者各种专卖店产品介绍里拷贝来即可,记得把品名加粗,MORE加粗,其它的就细细的好了,我用的冬青体,你爱用苹方还是微软雅黑随你~··那个SIZE的尺寸小方块也只是正方形加了一个粉红描边~··
耶~··这些你都做完了,你就得到了一张看起来比较概念的流行时尚的购物车APP界面就做完了,接下来把它塞进Iphone7的MOCK UP手机壳里就大功告成了!
没有好看的手机壳的话,在本教程的源文件里我给你准备了一个~··快去下载吧!(●'◡'●)ノ♥ 大家也可以试着做一些其它配色的NIKE鞋APP界面出来,期待大家的作品~··
学UI就到UEgood,好、省、快!即教软件技术,又教设计思维!更多教程请点右边头像查看!UEgood必修班第六期4月16日开课,要集中式学习的抓紧时间上车!