Photoshop设计质感的薅羊毛游戏界面

2016-02-15 21:01 19 1 收藏

下面图老师小编要向大家介绍下Photoshop设计质感的薅羊毛游戏界面,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

【 tulaoshi.com - PS 】

本教程主要使用Photoshop设计卡通风格的薅羊毛游戏界面,文章把薅羊毛小游戏的整体思路与设计过程详细的写了下来,希望能在整理的过程得到提高。感兴趣的朋友可以下载PSD源文件,下面一起来学习吧。

教程源文件:卡通风格的游戏界面设计PSD源文件

薅羊毛小游戏初稿展示

Photoshop设计质感的薅羊毛游戏界面,PS教程,图老师教程网

项目设计思路的详细过程

1、先确定基本思路

Photoshop设计质感的薅羊毛游戏界面,PS教程,图老师教程网

流程图画好以后又做了一些小的修改,制作的方向基本是确定了,由于我们的游戏并非真正意义上手机端APP游戏,只是网页或者微信端的小游戏,故而我设定的页面为三个:开始页面、游戏页面、领奖页面。另外此次游戏为薅羊毛带有一定恶趣味的感觉,所以定位为Q版画风。

2、画第一稿(开始页)

经验告诉我们,做好先给领导看,是非常正确的。样子定了再说后面的内容。

Photoshop设计质感的薅羊毛游戏界面,PS教程,图老师教程网

做好后领导和客户反映还不错,那么就可以继续下面的了,由于此次游戏讲究短频快的原则,所有我把游戏规则直接放在了开始页面,快速读取,快速游戏,背景加了个可爱的小羊,做到吸引点击的作用。

此页面所含原素:

Photoshop设计质感的薅羊毛游戏界面,PS教程,图老师教程网

3、游戏页

是整个游戏最复杂的页面,需要从游戏的动态效果来吸引用户,而且这个小游戏的宗旨是以最快速度让用户了解规则,进而为码上天翼平台做推广。故而初稿就先做了一只羊,并未制作过多的小羊表情,另外由于在绘画的过程中时间过于紧迫,第一稿的羊是仿照韩国sheepo又加了些自己的设计。

Photoshop设计质感的薅羊毛游戏界面,PS教程,图老师教程网

游戏页中原素展示:

Photoshop设计质感的薅羊毛游戏界面,PS教程,图老师教程网

4、结束页

结束页的设计依旧是沿用开始页的风格,由于此页面中文字与原素较多,故而游戏结束四个字并为用大字体来展示。

Photoshop设计质感的薅羊毛游戏界面,PS教程,图老师教程网

Photoshop设计质感的薅羊毛游戏界面,PS教程,图老师教程网

结束页元素:

Photoshop设计质感的薅羊毛游戏界面,PS教程,图老师教程网

第二稿页面展示

经过多次讨论,大家认为第一稿的羊太可爱太萌了,没有薅的冲动!另外领导认为这次的任务需要手绘一个新版的羊!初稿毕竟是仿sheepo的图,开动大脑,重新画。最后领导们要求重新画的这个羊要够贱,让它长一张欠薅的脸,看上去就想薅它。

下面是小羊的图图啦:

Photoshop设计质感的薅羊毛游戏界面,PS教程,图老师教程网

整体版式定了,那么就需要增加游戏中小羊的表情,增加游戏的搞笑特性(这个小羊的画法和上面介绍的画法一样就不过多赘述了哦,亲们可以自己尝试一下)

Photoshop设计质感的薅羊毛游戏界面,PS教程,图老师教程网

游戏结束后注册页面

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

亲们~此页面里含有过多的商业元素故而不能给大家提供源文件了哦,感谢大家的理解~~

这个页面的作用是为了给平台提供更过的用户而设置的,即如要领取奖品就需要先注册,然而往往这样的页面会引起大家的反感,所以我从蓝色调入手,以最初的海天照片入手,虚化以后得到的背景。其目的是尽量降低用户的急躁的心情,并设置只需要用手机号就可以注册,用支付宝来领取奖品。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

Photoshop设计质感的薅羊毛游戏界面,PS教程,图老师教程网

Photoshop设计质感的薅羊毛游戏界面,PS教程,图老师教程网

来源:http://www.tulaoshi.com/n/20160215/1563898.html

延伸阅读
【PS文字特效】photoshop制作超酷质感金属游戏字体 步骤如下: 1.新建文档900*900,拖入素材纹理壁纸如图 2.使用钢笔工具绘制出TF路径,ctrl+enter,填充黑色。 3.创建图层混合样式设置如下 投影 内阴影 斜面和浮雕 纹理(下载的素材里有次图案添加进去就可以了) 图案叠加(...
标签: PS PS基础
本教程主要使用Photoshop绘制时尚的圆形播放器UI图标,今天这篇教程适合新手练习,重点是帮同学们深入理解图层样式的运用,喜欢的朋友跟着教程一起来学习吧。 先看看效果图 第一步:新建画布,大小自定,填充一个淡色。 第二步:画一个圆形,大小自定,填充如下。 接上边的数值。 第三步:复制底圆,然后Ctrl+T,调整他...
标签: PS PS基础
本教程旨在教大家使用Photoshop创建一个简单的登录界面。只需一些简单技巧,你也可以设计出一个漂亮的登录界面。界面的背景色使用了几种不同的灰色色系,此举可最大程度保持整个界面的简洁和优雅。 本教程简单易学,适合于初学者。 登录界面 步骤1 新建一个800(H)x600(W)像素的文档。当然也可根据自己的需求新建。接下来,使用圆角矩...
标签: PS PS基础
开始实例的学习之前,可以先下载实例的配套素材,然后跟随操作步骤进行学习。 素材: MissYuan_教程素材.rar (1)运行Photoshop CS5,打开本书附带光盘背景.psd文件。 (2)使用钢笔工具在视图中绘制形状图层。 (3)接着为形状 1图像添加渐变叠加和斜面和浮雕样式效果,使其呈现立体效果。 (4)继续为其添加内阴影、描...
标签: PS PS基础
本教程主要使用Photoshop设计金属颓废质感的网页登陆框,教程是作者的一个国外客户,教程不是很详细,但是给大家提供一些好的思路,喜欢的朋友一起来学习吧。 教程需要的素材: 颓废质感的游戏登陆框PS教程素材

经验教程

747

收藏

31
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部