恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
René 教你玩像素之小D的新房子
0.0°
2016-07-14 自译外文 教程 原作者: René 举报 5473 48 55 6

自打入行也来啊~就独得像素恩宠,这行业大牛三千,像素却偏偏宠我一人,于是我就劝像素说,一定要雨!露!均!沾~,可是像素啊,非是不听呢~就宠我~就宠我~~~~~~

René 教你玩像素

-(小D的新房子)-


Image title

昨天发送表一篇《我敢说你不会画这个方盒子》

小超人们非常踊跃,分分打开PS开始创作,

但是也收获了“小反派”们的各种奇葩评论,五花八门。

我给大家列举一下(仅供参考娱乐)


难难难形:太费时间了,最终效果并不惊艳呢!

素描画多形:透视都错了,没有景深感~

鸡蛋挑骨头形:你敢说那是45°?我看也就43°!

没事找抽形:小编到底是男的还是女?

·

·

·

·

在这里我郑重声明,

“雌雄同体你没听过啊!作业写完了吗?!(#‵′)凸”。


其实萝卜白菜各有所爱,你喜欢拟物化,他喜欢视觉冲击,我们就是大爱像素风。如果你把创作这件事当成一个任务来做,会很难完成。就像小时候我妈叫 我回家吃饭,吃完饭还要刷碗~就在刷碗时,电视里灌篮高手的主题曲响起!哎呀啊啊啊啊~我这个百爪挠心啊~就想马上放下手中的碗,一动不动摊在沙发上看动 画片…


讲真,玩像素很上瘾,心无杂念的完成一件事,才能真正理解其中的乐趣。

这不,我给昨天那个角色起名小D(屌丝缩写=_=),今天我要给他绘制一栋房子,以后还会有车~有老婆~有飞机~游艇~~(好像在YY自己的人生吖……)

Image title

(房子成品图)

Image title

步骤1

既然是为小D盖房子,首先要确定好比例,不然进不去就尴尬了。可以按照方盒子的角度(22.6°),从下由上的复制一些线条,每条线条之间间隔3个像素。

Image title


第2步

其实绘制像素画有一个技巧,就是先找到一个点作为参照画线,找一条线做参照画面,一切的一切都是衍生来的。我们删去不要的部分,先从房子的门开始绘制。

Image title

第3步

延伸右侧线段,为房子找到一个尽头,刚刚起步的小D就不要那么大的房子啦,物业费交不起啊!这个长度自己掌握吧~

Image title

第4步


看我多么低调奢华,只给小D一个窗户的空间,然后我们绘制一个“L”形,角度90°哦(复制一条线,水平翻转)

Image title

第5步

为了让房子看起来不是一个方方正正的普通标间,我们可以给房子加更多的细节。当然,在绘制初期,这个房子已经在我脑子里想了很久。如果大家没有同样的画面,可以搜索一下房子的形状,这样会加深印象。

Image title

第6步

房子的结构无非是三个方盒子拼接到一起,所以我们应该将它上面衔接起来。

Image title

第7步

开始上色,之前好多小超人问我用什么方法上色才是最好的,其实只要是用习惯的方式就好,不用太过纠结细节的问题。我来说一下我的做法。


首先是用(魔术棒)点击图层1(我标注1的部分),得到“1”的选区,然后用(图层-新建填充图层-填充)上色就可以了。选好颜色后得到一个带有蒙版的图层,这样的好处是后期方便处理细节,更改颜色。2-3都是一样的。


而高光部分,首先还是选择图层1,然后用(套索工具)将高光部分粗略的框选出来,按一下方向键“↑”,再按“↓”,你会发现高光部分自动形成一个标准的选区,然后再填色就好了。

Image title

Image title

第8步

我标注红色区域是大家需要注意的,这里不要用纯黑色,要设置成影音的颜色。

Image title

第9步

下面我们来加一个屋顶,原理和前面讲的一样,衍生拓展,与房子边缘间隔3个方块。

Image title

第10步

一般情况下,房顶是个三角形,但是凭空画三角形很困难,所以我们先将右侧绘制三条垂直线。

Image title

第11步

为了得到更好的效果,我通常是绘制两个三角进行对比。

三角的绘制方法是,以左下角为基础,延伸到中间线,然后以中间线为基础,延伸到右下角。(注意,这里的线段一定要规则规范,我上篇文章写过线的绘制规范,不懂可以去看看)

Image title

第12步

很显然,蓝色的三角更好一些,留下它就可以继续延伸整个框架了。

Image title

第13步

第1步我们已经绘制了比例标准,那么所有的线段都要画在标准的轨道上。

Image title

第14步

好的,按照同样的方法绘制另外一个三角形,然后把他们衔接起来,这里我就不做过多的演示啦~

Image title

第15步

把多余的部分删除,加上中间线,框架就搞定啦!!Y^o^Y

Image title

第16步

这里的上色方法跟前面讲的相同,在这展示一下就不多说了~

Image title

第17步

其实16步乍一看觉得挺好,仔细一看呢会发现有点怪~~(这个时候你肯定回头去看了)!

问题在哪里???两侧三角形的房檐啊!

Image title

第18步

这里我们还是参照三角形绘制一个距离边缘3个像素的线。

Image title

第19步

然后把下面的部分删除(直接绘制这个形状比较难,因为没有参照,所以使用倒序的方法来处理)

Image title

第20步

再把下面的颜色抻上来!这样才是真正房子的形状啊╮(╯_╰)╭

Image title

第21步

下面是我们处理细节的部分了,首先画一个门,不可以太宽或太窄,刚好可以让小D进去就行了。

门需要两层线,因为还有门框。

Image title

第22步

窗应该在居中的位置,高度差不多是门的一半,这里窗需要三层,为了表现更多的细节。

Image title

第23步

其他的墙面也要加窗,这样才显得明亮嘛~

Image title

第24步

门窗加入细节,颜色层越多细节越丰富,这里我们自己把控一下吧~

Image title

第25步

红色的门,喜庆!~(≧▽≦)/~

Image title

第26步

这里我把窗户加入了一些细节,大家注意光影的角度要统一。

(快装修完了,小D回来监工了┏ (゜ω゜)=☞)

Image title

第27步

这一步多了什么?找到留言有奖(O_O)?

Image title

第28步

少年我只能画到这里,其实可以加入更多的细节,比如邮箱啊,墙边缘啊,门牌号啊,这些都由小超人们自行发挥吧~~

Image title

Image title

第29步

房顶光秃秃的不美观,我们得加入一些瓦片,瓦片的绘制方法如上。

Image title

Image title

大功告成!!!!

最后加入一些条纹细节!大功告成啦!!!!!累死俺了~

总结:绘制像素画一定要从起点延伸到整个画面,

不要过早的摄入细节,这样可能会造成重复的工作。

其余还是要靠小超人们自己去摸索,毕竟这才是GAME规则啊~

·

·

·

·

超人时间Image title

小蓝房(波涛使者-作品)

Image title

小绿房(杨康YK-作品)

Image title

小白房(小小丹-作品)

嗯~就喜欢这样会举一反三能女纸,

不过房子基础有点飘~加油!

Image title

……(XXX-作品)

这位童鞋~你不是小葵花班的!出门右转去大班儿!(╰_╯)#

(用我这火眼金睛来观察,这图十有八九是扣的-_-#,不要来捣乱好的哇~)


好哒,今天的内容就到这里,


(找文,筛选,翻译,剪辑,上传,分享真的很累TAT)


喜欢我的朋友们请关注点赞哟!

Image title



更新:2016-07-14

收藏

48人已收藏

Sik死磕

苹果首推App Store搜UI排名第一

  • 20

    作品

  • 1423

    粉丝

  • 2

    关注

  • 视觉大片合成教程
  • 11月 重要的网页设计趋势
  • 如何在平面设计中有效地利用透明背景(上)
  • 2016年必备的9种图形设计趋势(下)
相关标签
psai像素国外

    猜你喜欢

      2016-07-14 自译外文 教程 原作者: René 举报 5473 48 55 6

      René 教你玩像素之小D的新房子

      0.0°

      你确定要举报René 教你玩像素之小D的新房子

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年07月14日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      55
      48
      6

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录