基础教程

  1. 1

    教程说明

    本章节教程主要介绍如何在魔秀制作平台页面来发布一个简单的主题。

    教程中所有标记有“青色”的地方可以查看相关解释说明,以此来帮助大家更容易理解整个过程中可能遇到的疑问。

  2. 2

    素材准备

    一个手机主题是由桌面壁纸、锁屏壁纸列表背景、图标和第三方底版等多种元素图片组合而成。具体内容如下图。

    提示:以上图片仅为展示。

  3. 3

    准备工作——注册(已有魔秀账号可忽略此步骤)

    使用电脑打开浏览器,打开魔秀官网http://www.moxiu.com/选择注册一个新账户

    注册完成以后,回到网站首页,选择制作主题,就可以开始制作了

  4. 4

    制作及上传

    点击图中圈中的按钮,进入制作平台

    节点列表中的每个节点需要自己找素材,制作为最佳尺寸的图片后上传

    提示:每个节点的右侧均有该节点的尺寸,图片格式,最佳大小等,不可使用平台上提供的素材,拓展图标可不上传

  5. 5

    预览及发布

    上传所有节点图标,点击"预览"检查。

    点击"直接发布"

    填写主题名称及其他信息,点击"发布“按钮

    发布成功后,可点击"查看主题"

    结束

壁纸尺寸除了网站上提供的1440*1280外720*1280也同样适用~两者的区别在于在于1440*1280的壁纸随屏幕左右切换而切换,而720*1280的壁纸是固定的。

第三方底板

图标的美化部分除了我们比作的20个图标之外,还要制作一个通用样式的底板图片来美化或装饰我们手机中的其他图标。
底板有三张图片分别是:前蒙版、后蒙版和遮罩。

进阶教程

  1. 1

    了解锁屏

    (1) 锁屏时间页面

    (2) 锁屏密码页面

  2. 2

    制作锁屏包

    (1) 锁屏包前身是个文件夹--asset,解压缩之后变成锁屏包

    基础样式锁屏包点击下载(1)

    心型样式锁屏包点击下载(2)

    (2) asset中分别包含了字体文件夹,锁屏部件文件夹以及代码文件

    提示:字体文件夹无需更改,代码文件可先不更改

    (3) 打开xhdpi文件夹,其中包含锁屏中的各个部件,各个部件其实是由图片组成的,按照以下教程中的图片格式和尺寸制作好,放入文件夹内即可

    提示: xhdpi 文件夹内所有图片的名称均不可变

    (4)时间部件

    提示:时间数字图片:大小为 150*150 像素,格式为 PNG 。时间冒号图片:大小为 100*150 像素,格式为 PNG。时间背景图片:大小为 720*330 像素,格式为 PNG。

    (5)数字密码部件

    提示:数字密码图片大小为140*140像素,格式为PNG

    (6)数字计数点部件

    提示:密码计数点图片大小为26*26像素,格式为PNG

    (7)滑动解锁部件

    提示:滑动解锁图片大小为720*140像素,格式为PNG

    (8)工具和相机部件

    提示:工具和相机图片大小为60*60像素,格式为PNG

    (9)锁屏壁纸

    提示:壁纸图片大小为720*1280像素,格式为jpg

    (10)全部替换完毕后,重新打包压缩成zip格式的压缩包/p>

  3. 3

    上传锁屏包

    (1) 点击"微锁屏"开始上传

    (2) 选择你自己制作好的锁屏包

    (3) 上传后,出现预览画面,说明锁屏包没有问题上传成功了

    提示:如果预览效果自己比较满意可以跳至第 6 步骤!

    (4) 调整整个时间部件位置及日期等颜色,点击"修改配置"展开代码窗口

    (5) 代码简要修改说明:我们只修改其中位置控制位置颜色的属性,根据提示我们可以轻而易举的做到。什么事标签?一般的形式写法为:,下文提到的wingetControl 标签,指的就是下图中第 2 行代码

    找到widgetControl标签里里面"x"和"y"的属性值,修改和调整时间部件的位置。

    提示:"x"的数值越小表示向左偏移,越大则向右偏移。(可为负值),"y"的数值越小表示向上偏移,越大则向下偏移。(0~1000)

    修改日期星期等颜色,找到日期和星期的标签中的fontColor属性修改自己喜欢的颜色

    提示:能写标签可以修改颜色?标签中含有fontColor的属性,颜色格式#000000(16进制)

    (6) 修改参数后可以点击"预览效果"查看修改后的效果,满意后点击"保存修改"

    (7) 选择其中一个页面当作你的主题预览页面,点击预览图即可,点击按钮,将选中图片片设置为主题预览图

    (8) 关闭,完成锁屏上传

  4. 4

    上传图标及壁纸

    (1)点击"预览"检查,无问题后直接发布

    (2)点击"直接发布"

  5. 5

    发布

    填写主题名称及其他信息,点击"发布"按钮

    (2)点击"查看主题"

    (3)结束

微锁屏制作

  1. 1

    准备工具

    (1) 锁屏数字制作模板 suoping.psd点击下载

    (2) Photoshop 软件

  2. 2

    模板说明

    此模板为photoshop文件,以便于快速批量导出锁屏包必要图片元素。模板包含:时间数字/分隔符;工具箱/相机图标;密码输入状态指示;密码盘按钮正常/按下;解锁提示条;

    如何隐藏切片?Ps 菜单:视图》显示》切片。(取消对勾即隐藏,并不会影响导出保存,通常我们不需要显示它)

    模板的辅助图层分别为背景色、文字说明和网格;你可以对他们进行隐藏显示或更改颜色,使背景色更接近你所创作的壁纸颜色来参考数字或按钮在锁屏上的预期效果!

    参考范围:细心同学一定会发现每个方格中有些圆环和斜线!绘制大小一定不超过最粗标识线,一般建议数字大小控制在超过小圆范围(太小可能影响使用体验);按钮绘制建议在大圆范围内

  3. 3

    制作

    用你自己的创意来绘制这些图标。模板不受图层方法影响,尽情发挥!

    贴出一张设计师全部画完的图片

    图层面板参考

  4. 4

    导出

    首先,隐藏不需要显示的图层!例如:参考网格。确保背景和其它不需要的显示的图层隐藏

    然后,快捷键:Ctrl+Alt+Shift+S!菜单操作:Ps菜单:文件》导出》存储为Web所用格式。出现以下界面,选择格式为PNG-24;保留透明度;点击存储。

    选择所有用户切片,点击保存

    出现此提示,点击确定。

    现在你的图片已经全部保存好了,并且全部按照应有的名称命名好。

图标教程

  1. 1

    准备工具

    (1) 基础图标模板 tubiao.psd点击下载

    (2) Photoshop 软件

  2. 2

    模板说明

    此模板为photoshop文件,以便于快速批量导出桌面所需元素。模板包含:必做图标;第三方底板、遮罩、蒙版;指示器。

    参考范围:绘制图标形状建议不要小于红色边线,否则可能会因为实际显示图标过小而看不清;蓝色是推荐的图标大小范围 。

  3. 3

    制作

    用你自己的创意来绘制这些图标。模板不受图层方法影响,尽情发挥!

    贴出一张设计师全部画完的图片

  4. 4

    导出

    首先,隐藏不需要显示的图层!例如:参考网格。

    确保背景和其它不需要的显示的图层隐藏

    然后,快捷键:Ctrl+Alt+Shift+S!菜单操作:Ps菜单:文件》导出》存储为Web所用格式。

    出现以下界面,选择格式为PNG-24;保留透明度;点击存储。

    选择所有用户切片,点击保存

    出现此提示,点击确定。

    现在你的图片已经全部保存好了,并且全部按照应有的名称命名好。

数字锁屏案例

  1. 1

    打开锁屏制作模板

  2. 2

    在相应的位置制作相应的图片

    (1) 时间数字图片:尺寸:150*150PX(只要不要超过模板的框即可,所有锁屏部件图片制作原理相同)

    (2) 工具图片:尺寸:60*60PX;工具箱:利用笔刷或者是矢量图形制作工具箱;形状相机:利用笔刷或者是矢量图形制作相机形状

    (3) 密码计数点图片尺寸:26*26px;输入状态;未输入状态

    (4) 数字密码图片;尺寸:140*140px;点击前:未点击数字密码按钮时展示图片;点击后:点击数字密码按钮时展示图片

    然后在背板上方输入数字

    注意:数字密码图片可以根据主题元素个性设置,可以是文字或者其他形状。但是数字密码图片中必须包含数字提示性元素,否则会导致用户不清楚密码按钮代表数字,无法解锁。

    (5) 滑动解锁部件;尺寸:720*140px;滑动解锁部件可以根据主题中含有的元素自行设置,可以是矢量图形,卡通形象或者文字。

    (6) 时间背景图片;尺寸:720*330px;间背景图片为非必要设计,如果未设计,可直接保存透明图片即可。以上部件图片全部制作完成后,将参考线组隐藏

  3. 3

    图片保存

    同时按住ctrl+shift+alt+s

    将文件储存在自己的文件夹中,示例中储存在名为“锁屏”文件夹中

  4. 4

    锁屏壁纸

    尺寸:720*1280;格式:jpg;准备一张锁屏壁纸,要求与桌面壁纸风格搭配,可与桌面壁纸一致。保存在images文件夹中。

    注意:锁屏壁纸文件名称必须为l_widget_wallpaper.jpg

  5. 5

    锁屏壁纸

    选择一种锁屏模板,解压文件点击下载

    将制作准备好的锁屏部件图片全部选中复制

    打开文件夹中的xhdpi文件夹

    返回上一级文件夹asset,并压缩该文件

  6. 6

    上传锁屏包

    打开魔秀主题制作平台

  7. 7

    修改时间位置

    X,Y的原点为页面的左上角,即X越大,时间部件整体向右移动,Y越大时间部件整体向下移动。

  8. 8

    修改字体颜色

    将所有带有fontcolor字样的RGB值改为与壁纸搭配的颜色。

    选择预览图

    在一下两张图片当中选择点击一张图片作为预览图,示例中选择右侧密码页作为预览图

    设置完成后关闭即可

    数字锁屏就制作完成了~~

图标案例

  1. 1

    打开基础图标制作模板

  2. 2

    更改基础图标矢量图形颜色

    此模根据主题颜色为基础图标的矢量图形选定颜色。

    点击fx,选择颜色叠加

  3. 3

    图标底板设计

    初期制作主题,可以通过设计图标底板,来实现图标的变化。根据主题整体为图标设计一个底板,可以是矢量形状也可以是线框等等。示例中设计为矢量形状底板。

    初选择无填充,描边颜色与图标矢量图形一直,3像素,样式为虚线

    所有图标的底板是一致的,只需将刚刚制作的图形复制移动即可(按住Alt键拖动图层)

    将图标底板置于基础图标样式1下方

  4. 4

    文件夹图标制作

    文件夹图标一般与图标底板的形状一致,但形状必须是非填充形状。

  5. 5

    文件夹图标制作

    (1) 前蒙版:前蒙版与图标底板形状一致,但形状必须为填充形状。

    (2) 后蒙版:后蒙版一般与图标底板的形状一致,但形状必须是非填充形状。

    (3) 遮罩:遮罩为图标的装饰,为非必要设计,若未设计可直接保存一张透明的PNG图片即可。

  6. 6

    指示器制作

    (1) 选中:填充形状

    (2) 未选中:未填充形状

    全部图标和节点制作完成

  7. 7

    保存

    将参考线组隐藏

    保存(Ctrl+Alt+shift+S),

    选择保存在自己的文件夹内(示例保存在新建文件夹内),切片选项选择所有用户切片。

  8. 8

    图标上传

    打开制作平台,选择批量上传

    选择刚刚制作好的图标

    左侧自动匹配无误,点击确认,图标上传完成。

Top