为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

1.1.   为图片添加九宫格信息

在UI编辑器中添加一张图片

为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

使用Photoshop打开这张图片

为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

放大这张图片,使用切片工具,选取LeftTop(左上角固定不变的位置)

为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

双击切片,找到尺寸信息

为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

将尺寸信息填入图片九宫格信息中(PS:为了方便截图,把属性窗口移到文件视图旁边)

为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

选取RigthTop(右上角固定不变的位置)

为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

填入RightTop信息

为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

选取LeftBottom(左下角固定不变的位置)

为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程 为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

填入LeftBottom信息

为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

选取RightBottom(右下角固定不变的位置)

为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程 为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

填入RightBottom信息

为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

选取LeftMiddle(左中固定不变的位置。PS:除去左上角、左下角,其余均属于左中位置,任意选取一块即可)

为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

填入LeftMiddle信息

为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

选取RightMiddle(右中固定不变的位置)

为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

填入RightMiddle信息

为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

选取TopMiddle(上中固定不变的位置)

为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

填入TopMiddle信息

为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

选取BottomMiddle(下中固定不变的位置)

为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程 为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

填入BottomMiddle信息

为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

选取Middle(中间固定不变的位置)

为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

填入Middle信息

为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

上一篇:SpringBoot技术栈搭建个人博客【后台开发】


下一篇:Django 中bootstrap的引用