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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
我敢说你不会画这个方盒子→ →
0.0°
2016-07-12 自译外文 教程 原作者: René 举报 15239 245 405 67

前两天我上传了一篇“René 教你玩像素”,大家一致反映没挑战性- -#,好吧,是我低估了你们的超能力~今天教你画一个方盒子!!!!觉得简单?呵呵…图样图森破

Image title

像素风格自成一派,已经深入我们的生活

神奇的小方块拼凑到一起抽象的表现了各种形态。

那么我们来测试一下,下面五张图(从简单到复杂)中,你能达到那个阶段?



Image title

(最简单的十二生肖)这玩意很简单,对吧?



Image title

(那这个头像呢?)额,好像也可以吧?毕竟小编之前发过的啊!



Image title

(温室里的食人蘑)其他的到还好说,这个玻璃效果…



Image title

(闹事中的场景)简直不是人!这东西是人做的嘛!- -#



Image title

(3D机械效果)……



这些逆天的效果,一点都不清真!…

你可能还会问,不就是效果酷一点,拽一点,

然并卵啊!谁会做设计的时候,花那么多时间研究他啊!

你说的对,如果能做到最后两个的效果,就可以称之为艺术了,

但是!生活中也有很多关于像素的案例!



Image title

像素公文包…



Image title

像素卡片



Image title

像素UI图标



Image title

像素挂饰



Image title

像素绣(明明就是十字绣→ →)




…………………………………………………………………………………………

好的,其实上面的东西跟本节课没有多大关系_(:з」∠)_

我们进入正题。



Image title

如果你像我一样,愿意做一名玩像素的大孩子,那么可以根据兴趣,选择我的像素艺术,它给人的感觉更像是在堆积木,但是不用担心它会掉下来,因为,一切尽在你的掌控中:)

首先,我们将创建一个像素作为逻辑起点,它会帮助我们确定其他像素的走向和比例。如果你觉得这个对你来说很简单,那么我们可以先画几条线做准备。

Image title


这些线是像素艺术中最常见的,他们看似普通,但是有许多奥妙。他们是每两个一组依次错开的,这样标准的排列,完成作品之后,你会感觉他们仍然是光滑的。




Image title

正确的结构线条是这样的结构,每个角度的变化,不会影响他们之间的均匀程度(线条相同),

我的绘制方法是复制,比如上30°,首先绘制出一个方块,然后复制一个方块垂直向上,合并成由两个方块组成的长条,然后快捷键 “command+J”复制一层,再使用快捷键“command+T”变形,把它移动到下面方块的右上角回车确定,然后快捷键 “command+alt+shift+T”重复复制。其他也是一样的道理,动手画出来吧!





Image title

这是错误的演示,线段之间不整齐


…………………………………………………………………………………………………………………………………

好的,我们开始制作吧,

首先打开Adobe Photoshop,创建一个400*400像素的画布,然后可以打开(视图-显示-网络),这样就会自动分割出很多小格子,当然你也可以放弃使用,就像我习惯了靠眼睛判断它们。




Image title

首先画一条45°的线条,我比较喜欢使用5%的灰色,而不是黑色,

这样我可以使用黑色做阴影,并且可以使用“魔术棒”分辨范围。




Image title

复制一个,水平翻转



Image title

再复制一个,垂直翻转,这样我们就得到一个带有角度的方块儿了,

有没有感觉好艰难啊 哈哈~(魔性的笑声)



Image title

我知道这样会很烦,但是我不的不说,仍然要复制一个放到下面,

这里你要按住(shift键+鼠标左键)向下拖拽,保持对称。



Image title

天线三条垂直线后你会发现,边缘显得不是那么整齐,

让我们通过去除最左边的像素,保证像素的角落平滑一些。

(欧耶,一个方块就画完了,真特么难啊T T)



Image title

现在开始添加颜色,挑选你喜欢的任何颜色吧。




Image title

增加一个亮边儿,颜色值比当前颜色提亮10%即可。




Image title

用同样的方式填充三个面的颜色,颜色之间需要过度,上面最亮,左侧适中,右侧较暗,这个要靠自己把握了,我建议是它们之间降低10个色值。好了,我们的方盒子已经绘制完了。


其实这个方盒子只是作为参照物来使用,因为有了角度之后,我们可以决定其他物体的角度,未来我们要画汽车、直升机、房子、广场等等,这些都要严格参照这个盒子的角度来绘制。下面,我们来绘制一个人物。



Image title

人物要从最小的像素“眼睛”开始,我倾向绘制比较薄的身体和略微的大头,这样看起来更卡通一些不是吗?

开始画眼,眼睛占2个像素,间隔一个像素,那么左侧就应该是脸,也要间隔一个像素,按照这样的方式推延下去。

Image title

现在添加一个新层,画在眼睛下方两个像素的水平线,那就是嘴,下巴先用相同的方式连接起来,在做后面的处理。

Image title

太方的脸可不后看,我们四舍五入,让他看起来更圆滑一些。

Image title

用相同的方式,我们把头画出来。

Image title

注意我是怎样表现他的耳朵的

Image title

然后沿着左边下巴的位置画一条垂直线,在右侧画一条斜线

Image title

手臂的部分最少要留2个像素,因为手臂是圆的,可以同过明暗来表现,那么身体至少是4个像素来表现。当然,你可以尝试不同的比例。如果有更好的请告诉我哈^_^

Image title

下半身,我们将增加一些垂直线条。我喜欢在鞋底和腰围之间留下12像素(腿长)

Image title

现在,我将添加颜色,

1·如果你对皮肤色掌握的不是很好,那么可以使用色值#FFCCA5,这是我常用的颜色,

2·衣服和裤子的颜色可以按照你喜欢的颜色设定,不过为了增强细节,我把手臂部分露出,呈现一件T恤的效果。

3·是否看起来很怪?因为木有脖子嘛,脖子在头部下面会产生阴影,所以皮肤色要降10%,衣服的边缘需要更多细节,那么可以将边边缘的颜色降低10%。

4·好啦,剩下的细节可以像这样。

Image title

值得注意的是,头发部分可以通过不同的光,表现不同的发型。大家看,这些人物的头部形状几乎一样,只是那么几个小方块就可以变化出很多很多,怎么样?是不是很神奇呀!

Image title

最后把人物跟方盒子放到一起,他们的比例应该是这样的。大功告成!赶快到处一张图,上传给我吧!

…………………………………………………………

警告!前方高能!

…………………………………………………………


这些是看完本章自学成才的小超人们的作品…

Image title

有粉嫩系列的^_^

Image title

有DIY系列的╰( ̄▽ ̄)╮

Image title

有撩妹系列的_(:з」∠)_

Image title

有全家福系列的(⊙o⊙)…

·

·

·

·

·

·

·

最佳丧心病狂奖得主是!

Image title

宇智波·佐助,千鸟流???



最后,我要声明一下!SEI说小编只是设计的搬运工!老子也会做做图的好吗?

Image title



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


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


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


更多资讯-尽在SIK唉屁屁

Image title



更新:2016-07-12

收藏

245人已收藏

Sik死磕

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

  • 20

    作品

  • 1423

    粉丝

  • 2

    关注

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

    猜你喜欢

      2016-07-12 自译外文 教程 原作者: René 举报 15239 245 405 67

      我敢说你不会画这个方盒子→ →

      0.0°

      你确定要举报我敢说你不会画这个方盒子→ →

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

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

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      405
      245
      67

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

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

      登录

      手机号

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

      登录
      第三方账号登录