×
通知:*
帖子:680
回复:1774
精华:10
被赞:10908
查看资料发站内信
楼主 #1楼
serawea 发表于 2014-07-13

【教程】自定义逗游客户端个性化皮肤

  逗游推出了新版本,更换了全新的UI引擎,优化了个性化皮肤的效果,简化了制作过程,降低了制作难度,如果觉得官方皮肤不好看,可以轻松自定义你想要的皮肤。

 

  本教程适用于最新逗游客户端2.8.0版本,旧版版本的皮肤制作原理跟新版本的基本相同,可以参考这篇教程制作。

 

  这篇教程可以教喜欢个性化的逗游客户端用户自定义皮肤,原理非常简单,文章的内容主要还是以提供制作经验为主,可以让制作的皮肤更漂亮美观,尽量少的出现错误。教程可能写的比较长,但是因为原理很简单,所以看以遍就能明白,完全没有难度。


  制作原理:逗游客户端的皮肤全部放在skin文件夹下,我们只需要用相同名称、相同尺寸、内容不同的图片进行替换即可实现自定义皮肤。


  制作准备:有足够的素材,至少掌握一款图像处理工具(我用的是Adobe Photoshop CS6)


制作步骤:本次教程以制作一个 Fate stay night 的皮肤为例,效果图如下

 

此款自定义皮肤的下载链接:http://pan.baidu.com/s/1dDemSsL


  其中的某些制作步骤的顺序或者操作习惯可视自己的情况自行调整,下面我会尽可能说的详细。我们观察逗游官方的皮肤会发现,逗游的每款皮肤都有一个主题色调,在制作自定义皮肤之前我们就需要大体的想象出自己做出来的皮肤是什么样子的,尤其是确定好这个主题色调,这样做出来的皮肤才不会在各方面出现不协调的现象。


1.打开逗游安装文件夹,查看skin文件夹,里面是所有皮肤文件,全是图片文件,复制出其中的一个文件夹(不能是index文件夹),复制出来放在喜欢的位置,我们将要对这个文件夹进行编辑修改。那么我选择的是‘文件夹5’,我把他放在桌面方便编辑,同时备份一个‘文件夹5’ 以防止出错。


  接下来就可以对里面的文件进行修改,理论上可以修改里面的任何文件,但是为了减少步骤和保持逗游客户端的主体风格,大部分系统图标文件是没有必要修改的。我们要进行选择性修改,其余的保持原状即可。


3.首先修改的是名为‘main_btn_min.png’图片文件,这是最大、最重要、最突出主体的一个文件,将这个文件用Photoshop打开。


<异次元:查看这个文件,我们看到这是一个长条状的图片,皮肤运行的时候为了防止图片内容因为拉伸而变形,所以是采取从最左边读取图片像素,依次向后显示的办法应用在皮肤上。旧版本的逗游客户端皮肤文件中也有这个图片,但是有用户反映,在超大显示平上逗游客户端无法全屏显示...所以新版本的逗游皮肤把这个文件做的更长了,横向像素更多,以便适应更大的显示器....囧>

 

  这是一张4000x126像素的图片,图片的主要内容集中在从左边开始的大约900像素的范围内,这也是我们主要修改的地方。在修改的时候主题图案的位置要大体估算好,不必太精确,最右侧标尺线即是客户端小窗口化的最右边界,大约在34cm处。将素材图片打开,进行正式编辑。

 

Tips:在编辑主题图片位置的时候要注意调整的最佳。意思是说,图片的主要内容,比如说人物的脸,重要的标志性图标等不能在运行时被系统图标阻挡。如果被挡住的话要重

新调整位置。

 

制作的效果图如下,并且图片两边最好保证为纯色而不是图案,这样方便制作,具体原因见步骤5. 

 

并且为了突出皮肤的可识别性和主题标志,我们可以找合适的地方添加主题标志,推荐位置是:

 

主要皮肤图片基本制作完成,剩下的就是位置调试,现在可以将图片导出为同名的.png文件,放入客户端皮肤文件夹5,替换文件后试运行,查看效果,试运行结果如下:

 效果还不错,图片位置也正好合适,不需要再进行调试,至于图片最左边为什么有空白没有修改,在步骤5中做出解释。

那么到现在为止,最重要的一部分已经修改完成。

这个帖子给 4 名网友带来帮助
帖子:680
回复:1774
精华:10
被赞:10908
查看资料发站内信
沙发 #2楼
serawea 发表于 2014-07-13
Re:【教程】自定义逗游客户端个性化皮肤

4.修改名为‘main_wizardbtn_icons.png’ 的图片文件,这是最大的系统图标文件。

 

皮肤运行原理:在皮肤运行的时候是按照坐标依次读取图案的,所以修改的时候按位置替换就行。皮肤文件夹里系统图标特别多,对系统图标的修改目前建议只修改这一个就行,或者这个也不需要修改,视情况而定。

 

第八个黑色的影子就不用替换了,保持原状就好或者直接删除。是删除而不是对图片裁剪,不能改变图片尺寸。如果你有其他创意可以进行修改。

 

修改完成的图片文件如下:

 

运行效果如下:

[本帖由 serawea 于 2014-07-13 19:12:04 重新编辑]
帖子:680
回复:1774
精华:10
被赞:10908
查看资料发站内信
板凳 #3楼
serawea 发表于 2014-07-13

5.修改名为‘main_frame.png’ 的图片文件。又是一个奇怪形状的图片文件,这个文件就是客户端左右两边和最下边的狭长条形部分。

皮肤运行原理:图片尺寸16x657像素,图片沿着一条纵向中心线左右各8个像素区域对称,横向左边8个像素列正常显示,右边7个像素列正常显示,第9个像素列横向拉伸显示。

 

这就是在第3步修改banner图片后试运行时最左边和最右边剩下的空白地方。前面说过,banner图片画标记的地方最好是能做成纯色,否则就要在这个文件最上部填充8个像素宽的图片,来延续banner图片在客户端皮肤运行时两侧的显示不足。如果填充为纯色就方便制作了。

 

6.修改名为“gamemanager_manage_dlg_mainwnd.png” 的文件,这是对话框的主窗体文件。这个文件主要是修改标题栏背景,可以只修改颜色,使它适应主色调,也可以添加纹理。

 

下面是我制作的,即适应了主色调(黯红、黑),又填充了纹理。

 

7.修改名为 gamemanager_lb_bkgnd.png 的图片文件。因为文件是灰色纯色,所以根据修改原则(修改原则见下文),这个文件可以不修改。如果修改的话可以填充纹理。

修改后:  运行效果:

[本帖由 管理员(serawea) 于 2014-08-26 19:31:42 重新编辑]
帖子:680
回复:1774
精华:10
被赞:10908
查看资料发站内信
#4楼
serawea 发表于 2014-07-13
Re:【教程】自定义逗游客户端个性化皮肤

8.批量修改,经过上面的操作,这个皮肤文件的主体已经基本完成,接下来就是修改一些带有大面积色块的按钮类图标,修改色调使之与主题颜色相符。

修改原则:纯白色或者灰色图片文件可以不用修改,带有主题颜色的图片文件必须修改;在修改时可以只更改颜色,也可以填充纹理或者其他效果。

下面列出一些重要的,建议尽量修改的图片文件:

A:把颜色调整为主题颜色    B:填充纹理或其他效果    C:可以不进行处理

 

看起来需要修改的文件很多,但其实大多数只要修改颜色即可,操作起来很快,并没有难度。

allmenubkgnd.png    A

allmenuline.png    A

btt_03.png    AB

gameinstall_progress.png    AB

gamemanager_btn_bigview_bg.png    AC

gamemanager_manage_dlg_btn_blue.png    AB

gamemanager_menu_btn_gnd.png    AB

header.png    A

HeaderBg.png    A

listViewMenu.png    A

main_btn_banner.png    AB

main_btn_max.png    AB

main_btn_min.png    AB

main_btn_restore.png    AB

main_menu_btn_bk_gnd.png    AB

main_rb_btn.png    AB

progress.png    AC

tag_btn.png    AB

user_btn.png    A

user_btn_ID.png    A

vScrollBarTemp.png    A

 

举例说明:

   最左侧选项背景

    常规按钮图标

 经验槽

[本帖由 serawea 于 2014-07-13 19:43:29 重新编辑]
帖子:680
回复:1774
精华:10
被赞:10908
查看资料发站内信
#5楼
serawea 发表于 2014-07-13
Re:【教程】自定义逗游客户端个性化皮肤

9.修改名为 main_wizardbtn_bkgnd.png 和 main_wizardbtn_current_selected.png 的文件。这两个文件也是极其凸显个性化的文件,可以进行修改也可以保持原状。

 

皮肤运行原理:原理是按坐标读取。

main_wizardbtn_bkgnd.png 文件分为四部分,从左到右依次是“非选中状态、鼠标指向状态、左键点击状态、选中状态”,而main_wizardbtn_current_selectd.png 则是选中状态,同第一个文件的第四个状态,两者共同组成选中状态。

 

我对这两个文件的修改是:

 

运行效果图如下:

选中背景是个星芒阵的背景图案,这个图案建议是镂空的图案,这样更美观也不至于过度阻挡背景图片。另外,这张选中背景图片制作时尽量做成半透明,只是建议。

再例如:

[本帖由 serawea 于 2014-07-13 20:03:40 重新编辑]
帖子:680
回复:1774
精华:10
被赞:10908
查看资料发站内信
#6楼
serawea 发表于 2014-07-13
Re:【教程】自定义逗游客户端个性化皮肤

10.最后一步,制作index索引图片。

这个过程非常简单,从skin的index文件夹里找到编号是5的index图片,替换为主题图片。然后将所有已经制作好的皮肤文件夹5替换原来的文件夹5,这样点击客户端的换肤图标,找到自己制作的皮肤,运行即可。

 

[本帖由 serawea 于 2014-07-13 19:59:47 重新编辑]
帖子:680
回复:1774
精华:10
被赞:10908
查看资料发站内信
#7楼
serawea 发表于 2014-07-13

  教程到此为止,完成之后就是一款自定义的个性化皮肤。想要什么风格的皮肤自己可以轻松制作,对于喜欢个性化的人来说,你的客户端皮肤就是独一无二的。

  我们可以交流经验,分享皮肤,轻松自定义个性化皮肤就是这么简单。

 

注意事项:在替换原始皮肤文件,使用自定义文件时可能会遇到这种情况如下图,index图片不能替换,文字重叠的现象。这个不用担心,即使出现这种情况皮肤依然能够正常使用。造成这种现象的原因是因为前几个index图片文件客户端总会联网下载获取导致的。可以替换后几个皮肤文件就没有这种情况,当然了,不管怎么样,都不会影响皮肤的使用。

 

 

 

 

DOTA2黑鸟---殁境神蚀者http://pan.baidu.com/s/1mg7eUEG

 

刺客信条4黑旗http://pan.baidu.com/s/1c0zTDq4

 

海贼王one piece  http://pan.baidu.com/s/1pJ6sVEF

 

DOTA2自然之力--大树与小鹿http://pan.baidu.com/s/1dDEeQTb

 

火影忍者NARUTO http://pan.baidu.com/s/1sjPRJkT

 

英雄联盟LOL http://pan.baidu.com/s/1jGKaxHs

 

[本帖由 管理员(serawea) 于 2014-08-24 20:01:52 重新编辑]
帖子:93
回复:700
精华:1
被赞:383
查看资料发站内信
#8楼
王淦 发表于 2014-07-15
Re:【教程】自定义逗游客户端个性化皮肤
占楼备用...至于以上文字...看不懂
[本帖由 王淦 于 2014-07-15 16:45:43 重新编辑]
帖子:680
回复:1774
精华:10
被赞:10908
查看资料发站内信
#9楼
serawea 发表于 2014-07-15

呃...看不懂.....我要重新改写教程么....

空之境界--两仪式 http://pan.baidu.com/s/1eQGfgAm

[本帖由 管理员(serawea) 于 2014-08-13 18:26:43 重新编辑]
帖子:17
回复:156
精华:0
被赞:525
查看资料发站内信
#10楼
淡颜熙丶 发表于 2014-07-21
Re:【教程】自定义逗游客户端个性化皮肤
 信息量太大,已榨干我有限的智商