怎么做DSTT主题啊

2020-04-16 综合 106阅读
DSTT皮肤制作指南:http://bbs.levelup.cn/showtopic-559538.aspx
DSTT烧录卡的兼容性与易用性已经有目共睹,然而对于一款新上市的烧录卡来说,尽管其界面充满创新,将许多功能都以小图标的形式展现于玩家面前,然而却略显单调。对此,Raeca也曾向开发小组不止一次的进行抱怨,故写就这篇教程着重于DSTT皮肤各元件要素的“解释”,并非专业性的“设计”教学以及PHOTOSHOP使用指南,望各路UI达人勿见笑。
【制作指南】
对于已经拥有DSTT的玩家一定已经十分了解DSTT的界面设计,但这里为了能让其他还未拥有DSTT的玩家也能快速入门,这里还是要对DSTT的皮肤进行一番的介绍。首先,DSTT的皮肤分为上下屏两个部分,其中上屏显示ROM详细信息;而下屏则为ROM列表,所有图片均为24位BMP图片构成,使用诸如PHOTOSHOP等较为通用的图片编辑软件即可进行设计与制作(请勿修改原始图片的尺寸大小以免造成显示错误)。
上屏幕 下屏幕
上屏的元件构成比较简单,仅为bgUp.bmp(TTMenu\skin\default\)一张图片。所以在制作的时候相对比较简单,而细节处能够发挥的便是背景图片与图片与文字间的配合:对于图标,不妨可以在图标周围设计出别具一格的能够与背景相适应的边框,这样就不会令图标显得那么的突兀,而文字背景部分则需要注意定义skin.ini内的文字的颜色与背景层的颜色与ALPHA值,以免与背景相混淆而无法看清(官方默认皮肤就有这个缺点)。
上屏各区域的定位坐标与范围,大家可以根据该图与实例照片进行制作,其中红色区域为相应的范围,而青色则为其边距,可以直接将其套用到PHOTOSHOP中间进行制作。
相对于上屏,下屏幕的构成则复杂的多,制作时重心则需要放在在各个按钮图标的设计与背景的配合上(由于元件较多,相应文件的对应位置请参考后问附录部分的说明),如果是UI设计的老手便一定会知道,通过按钮图片的两种状态的加工能,显示诸如半透明等多种效果,并且尽管所有的按钮以及图标均是规则的矩形,但却可以通过与背景图片重叠与裁切实现许多特殊形状以及效果的按钮设计。下屏元件尺寸及位置(红色及黄色为范围尺寸,青色为边据,数字以像素为单位)。除此以外,由于滚动条可以进行拖动,所以需要制作两张不同的图片来进行显示。
选项列表 金手指列表 系统设置
除了主界面之外,下屏在进入选项菜单后界面的顶部的选项卡与底部的状态栏都会发生变化,头部则由“系统设置”变为了“选项”与“金手指”,两个选项卡,而底部的状态栏则变为了BACK与CANCEL两个按钮。所有选项卡的按钮均为同一套图片,而文字则是内核加载。而底部的按钮的文字则分别由不同的图片进行显示,在制作时需要进行注意。另外,菜单背景与主界面背景采用的是相同的图片,所以不可以对列表区域进行过多的修饰,以免进入菜单后出现“不和谐”的情况。
简单的说明了上下屏的结构。现在总结整个皮肤的制作流程:
首先应该有一个清晰的思路,明确自己要制作一个怎样的界面,比如制作一个《最终幻想4》的皮肤;
然后便是寻找相应的素材,一般的可以采用游戏的原画以及壁纸(对于高阶的设计师,则可以使用模拟器截取游戏画面进行分解);
接下去整理素材,按照先背景后图标的顺序进行设计与制作;
当制作好之后别忘了要在真实的环境下进行测试,检查各个画面是否正确显示,如果有不满意的地方要及时地进行修整;
最后,当然是打包与发布,让其他玩家也能分享你的杰作。
下面是相关模板的下载与详细的文件说明,相信能对大家有所帮助,快开始动手设计只属于你自己的皮肤吧。
【相关文件下载】
官方1.07内核以及默认皮肤:
http://www.ndstt.com/download/ttmenu_v1.07.zip
上下屏元件模板(BMP及分层PSD)以便大家制作皮肤时进行参考比对:
http://raeca.wiioh.com/wp-content/uploads/2007/12/default_raeca.rar
【相关元件说明】
文件说明(microSD:\TTMenu\skin\default)24位的位图格式(*.BMP 24Bit)
bgUp.bmp——上屏幕背景图(256×192)
bgDown.bmp——下屏幕背景图(256×192)
arrowUp.bmp——屏幕右侧滚动条上端(14×14)
arrowDown.bmp——屏幕右侧滚动条下端(14×14)
scrollBarBg.bmp——屏幕右侧滚动条背景(16×1,填充)
scrollBarOn.bmp——屏幕右侧滚动条,拖拽(14×21)
scrollBarOff.bmp——屏幕右侧滚动条(14×21)
underLine.bmp——栏头下划线(256×4)
statusBar.bmp——底部状态栏(256×16)
chtOn.bmp——金手指条目,复选框已选中(13×13)
chtOff.bmp——金手指条目,复选未选中(13×13)
folder.bmp——金手指条目,有扩展选项(13×13)
comboBox.bmp——下拉框(16×16)
radioOn.bmp——金手指条目,单选已选中(13×13)
radioOff.bmp——金手指条目,单选未选中(13×13)
checkbox_on.bmp——单选已选中(13×13)
checkbox_off.bmp——单选未选中(13×13)
tableBtnOn.bmp——选项卡,未选中(64×20)
tableBtnOff.bmp——选项卡,选中(64×20)
BtnOn.bmp——系统选项按钮,未选中(96×20)
BtnOff.bmp——系统选项按钮,选中(96×20)
back.bmp——返回上一级按钮(72×16)
cancel.bmp——取消当前设置按钮(72×16)
save.bmp——保存设置(72×16)
start.bmp——开始按钮,未使用(72×16)
nextbtn.bmp——扩展选项(16×16)
icocheat.bmp——金手指(16×16)
icodmaread.bmp——DMA加速(16×16)
icodownplay.bmp——Downloadplay游戏(16×16)
icosoftreset.bmp——软复位(16×16)
skin.ini文件的作用是对窗口中的各组件的色彩进行控制,例如字体的颜色,选中某rom后字体变成什么色等等
附件中的软件用途是在可视化的情况下对skin.ini进行编辑,这比大家对着一堆数字"凭空猜想"效果要方便得多
附件: TTMenu+Skin+Customizer+v1.07+Rev+2.2.zip (2008-1-20 16:07:42, 31.56 K)
该附件被下载次数 402
软件需要微软的Microsoft .NET Framework2.0 环境
下载页面http://dl.pconline.com.cn/html_2/1/82/id=10637&pn=0&linkPage=1.html
进去去以后选:“下载:2.0 简体版”那一项下载后安装即可。
1.软件主界面
上屏部分
上图中个选项意义:
1.图中黑灰色(有透明效果)部分的颜色
2.图中文字颜色
3.应用,预览效果
4.保存
下屏部分
1.(图中被选中部分)文字颜色
2.(图中未选中部分)文字颜色
3.(图中)选中条目的背景颜色
分别为上屏和下屏的壁纸,要求256×192的24位色BMP图像
有关颜色代码,可以点击窗口中的colour convert按照RGB配色方式获取,
但是我们推荐使用更加直观的photo shop 的拾色器,如下图
引用:
skin.ini文件设置说明(microSD:\TTMenu\skin\default\skin.ini)
[TITLE_BAR]
;RGB为24位色,ALPHA为不透明度 范围0~100
RGB=9F6206
ALPHA=40
[SEL_RECT]
;设置选中框填充色 范围0~31
RGB=674A06
ALPHA=40
[SEL_BOX_LINE]
;设置选中边框颜色 范围0~31
;The color of select, value range is 0-31
;Alpha value range is 1-32
RGB=000000
ALPHA=25
[TEXT]
RGB=000000
[TEXT_SEL]
;设置选中被选中的文字颜色 范围0~FFFFFF
;The color of select, value range is 0-100
RGB=FFFFFF
[CLIENT_RECT]
;设置选中被选中的文字颜色 范围0~31
;The color of select, value range is 0-31
RGB=FFFFFF
ALPHA=20
[SCROLL_BAR]
;设置选中被选中的文字颜色 范围0~31
;The color of select, value range is 0-31
RGB=9F6206
ALPHA=15
[MSG_RECT]
;9F6206
BG_RGB=000000
BG_ALPHA=25
TEXT_RGB=FFFFFF
注1:ALPHA值数字越小,则效果越加透明。
注2:相应的颜色代码可以在PHOTOSHOP的拾色器内获得。
声明:你问我答网所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流。若您的权利被侵害,请联系fangmu6661024@163.com