查看: 5772|回复: 3

[教程] 【难度一颗★】制作伪像素风格的窗口皮肤(XP)

[复制链接]
梦石
0
星屑
60
在线时间
936 小时
注册时间
2008-2-14
回帖
930

开拓者

发表于 2014-2-13 22:05:51 | 显示全部楼层 |阅读模式

加入我们,或者,欢迎回来。

您需要 登录 才可以下载或查看,没有账号?注册会员

×
本帖最后由 断电 于 2014-2-13 22:11 编辑

因为想要改造一下自己游戏的窗口皮肤,搜了一下没有发现心仪的素材之后,决定自己动手试一下,没想到出乎意料的简单 所以干脆凑一篇教程出来好了。

这次教程想要实现的是制作出具有一定的像素风格的窗口皮肤,方法的适用范围很小,总之大家先看看吧。

首先了解一下XP中窗口皮肤的素材尺寸:192*128

那么我们现在PS中新建一个大小为192*128的空白画布,计算了一下之后,划分横4竖6(每格32像素)的切片作为参考线。

但是具体部件如何摆放还是有点迷茫,于是我从安装文件中把默认的窗口皮肤拖进来作为参考。在最下面新建一个图层填充为黑色作为背景。

为了教程清楚我用字母标记了一下每个部分的代号,好了现在参考图已经完成。

1.jpg

先来做B部分,即窗体的外框。我用到的方法是先绘制然后使用图层样式。由于想要实现的是伪像素风格,在新建的画布上(当然也可以在原画布上新建一个图层绘制,个人习惯)用大小为1的铅笔工具(纯黑色,透明度100%)绘制外框的转角,大家发挥一下想象力就好。
2.jpg
非常简单吧(抱歉我真的没什么想象力)。
之后设置图层样式(这里的各种参数啊颜色啊什么的希望大家自己试一试,就不给出具体颜色了)。
未标题-3.png
缩小后的看下效果,如果觉得还不满意就继续用铅笔工具点一点。拖到有参照物的画布里面看看有什么要修改的,修改一下之后把这个外框补齐(转角复制成四分放在四角,然后中间画线连接)如下。
5.jpg
用同样的方法画出剩余的CDEF部件(因为图层样式中的描边会使线条变得圆滑饱满,所以你会发现随便涂一涂就有可能有很棒的效果)
4.png
(一张图告诉你图层样式的重要性 发完才发现D部分我是用白色画的( ̄▽ ̄") 所以这里看不见了ORZ)
要特别注意的是CEF三个部分一定要拖到参考图上对齐位置。
A部分大家随意发挥一下好了,我填充了一个最简单的半透明黑色。
最终效果:
skin.png
用在游戏中的效果(边框内侧加了灰色的衬线,另外边框的亮度调高了一些):
截图.png
还不错吧。

希望大家可以尝试一下,用自制素材的心情其实是有点小得意的~

不知道会不会有人交作业呢

评分

参与人数 5星屑 +447 赞 +1 收起 理由
yueshiguili112 + 1 我很赞同
myownroc + 150 求更多教程的说
进击の虎叔 + 30 点赞
美丽晨露 + 255 教程发布
jklpgh + 12

查看全部评分

接稿,UI(已接)/立绘(已接)
无偿/有偿皆可,有偿速度会更快^q^
作品请见相册,有意请发私信:)

发表于 2014-2-15 12:01:51 来自手机 | 显示全部楼层
好厉害,回去我就交作业

点评

禁止发言是怎么回事?!!  发表于 2014-8-26 17:40
回复

使用道具 举报

梦石
0
星屑
2826
在线时间
2634 小时
注册时间
2013-1-16
回帖
5453

贵宾

发表于 2014-4-16 17:10:15 | 显示全部楼层
看了版规发现可以回帖……于是来交作业
001.png

评分

参与人数 2星屑 +45 收起 理由
野生君IR + 15 塞糖
断电 + 30 作业糖QAQ感谢支持

查看全部评分

(Created by @喵kano)


施工现场:hotege.github.io
回复

使用道具 举报

梦石
0
星屑
125
在线时间
152 小时
注册时间
2014-8-23
回帖
109
发表于 2014-8-26 17:34:40 | 显示全部楼层
交作业,好厉害……长知识惹
这是吾辈自己做的
还有自己的渣渣游戏

自己做的渣游戏

自己做的渣游戏

自己动手做的菜单风格

自己动手做的菜单风格

点评

非得说出了么Orz……  发表于 2014-8-26 17:58
这种程度的水印是可以用橡皮擦掉的吧···  发表于 2014-8-26 17:41

评分

参与人数 2星屑 +65 收起 理由
野生君IR + 15 交作業是好孩子,塞糖
喵kano + 50 塞糖

查看全部评分

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

Powered by Discuz! X5.0 © 2001-2026 Discuz! Team.

在本版发帖返回顶部