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

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

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

【 tulaoshi.com - PS 】

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

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

薅羊毛小游戏初稿展示

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

项目设计思路的详细过程

1、先确定基本思路

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

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

2、画第一稿(开始页)

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

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

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

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

此页面所含原素:

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

3、游戏页

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

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

游戏页中原素展示:

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

4、结束页

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

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

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

结束页元素:

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

第二稿页面展示

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

下面是小羊的图图啦:

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

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

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

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

游戏结束后注册页面

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

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

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

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

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

延伸阅读
标签: PS PS基础
本教程旨在教大家使用Photoshop创建一个简单的登录界面。只需一些简单技巧,你也可以设计出一个漂亮的登录界面。界面的背景色使用了几种不同的灰色色系,此举可最大程度保持整个界面的简洁和优雅。 本教程简单易学,适合于初学者。 登录界面 步骤1 新建一个800(H)x600(W)像素的文档。当然也可根据自己的需求新建。接下来,使用圆角矩...
标签: PS PS基础
最终效果预览 下面让我们用线框来着手布局。下图就是我们绘制的简单布局,这么做的目的是要确定每个元素的位置。确定主导航栏包含几个部分、以及最新增加的内容在主页面中的展示位置。 新建文件,宽960px、高1200px。这对于屏幕分辨率为1024*768的朋友来说是黄金尺寸。前景色设为#85848c,背景色设为#414048. 拉一个径向渐变当背景如下...
标签: PS PS基础
今天,我将介绍如何创建一个干净的网络布局、一个漂亮的背景。开门见山,咱直接切入正题吧,菇凉帅哥们有兴趣的话,可以打开PS跟着做哟。 开始设置的文件 打开一个新的文档:外形尺寸1200×1640像素,分辨率为72像素/英寸。 我们要创建基本的背景层。简单的在草稿上勾画出大概的布局与结构,可以看出页面最终的雏形,不过 在设计过...
标签: PS PS基础
本教程主要使用Photoshop设计金属颓废质感的网页登陆框,教程是作者的一个国外客户,教程不是很详细,但是给大家提供一些好的思路,喜欢的朋友一起来学习吧。 教程需要的素材: 颓废质感的游戏登陆框PS教程素材
标签: PS PS基础
开始实例的学习之前,可以先下载实例的配套素材,然后跟随操作步骤进行学习。 素材: MissYuan_教程素材.rar (1)运行Photoshop CS5,打开本书附带光盘背景.psd文件。 (2)使用钢笔工具在视图中绘制形状图层。 (3)接着为形状 1图像添加渐变叠加和斜面和浮雕样式效果,使其呈现立体效果。 (4)继续为其添加内阴影、描...

经验教程

15

收藏

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