cellz教程之图片的导入和编辑工具
cellz中的图片导入方式,直接拖入、通过本地资源拖入、通过图形填充拖入、 刷新功能的使用。以及如何使用工具对图片进行编辑。骚年,快来涨点知识^-^
查看全部
cellz中的图片导入方式,直接拖入、通过本地资源拖入、通过图形填充拖入、 刷新功能的使用。以及如何使用工具对图片进行编辑。骚年,快来涨点知识^-^
如何实现视差滚动效果
要想在cellz中实现视差滚动的效果,我们通常可以用两个交互组件来实现:状态集和滚动。
a.状态集,建立两个状态集,双击状态集1,首先为状态1设置一个手势方向,并在右侧的属性面板中设置关联>目标对象(选择状态2)>关联方式(与状态1相反), 这样就 查看全部
要想在cellz中实现视差滚动的效果,我们通常可以用两个交互组件来实现:状态集和滚动。
a.状态集,建立两个状态集,双击状态集1,首先为状态1设置一个手势方向,并在右侧的属性面板中设置关联>目标对象(选择状态2)>关联方式(与状态1相反), 这样就形成了一个同时正向和反向播放的视差滚动效果。
b.滚动,建立两个滚动控件,为滚动1设置一个固定的滑动方向(水平/垂直),再选中滚动2,在交互设置>关联>目标对象(滚动1)>关联方式(与滚动1相反)中做相应的设置。也可以实现视差滚动的效果。
a.状态集,建立两个状态集,双击状态集1,首先为状态1设置一个手势方向,并在右侧的属性面板中设置关联>目标对象(选择状态2)>关联方式(与状态1相反), 这样就形成了一个同时正向和反向播放的视差滚动效果。
b.滚动,建立两个滚动控件,为滚动1设置一个固定的滑动方向(水平/垂直),再选中滚动2,在交互设置>关联>目标对象(滚动1)>关联方式(与滚动1相反)中做相应的设置。也可以实现视差滚动的效果。
列表
列表是什么?新闻客户端的新闻列表就是一个典型的列表。
列表主要是为了满足相同格式内容的日常性更新。比如你需要实现一个公告板、产品展示或者资讯更新的时候,你最想要的就是一个列表,可以通过后台更新数据,而不需要更新客户端或者你的网页。
进入cellz中你的个人中 查看全部
列表是什么?新闻客户端的新闻列表就是一个典型的列表。
列表主要是为了满足相同格式内容的日常性更新。比如你需要实现一个公告板、产品展示或者资讯更新的时候,你最想要的就是一个列表,可以通过后台更新数据,而不需要更新客户端或者你的网页。
进入cellz中你的个人中心,找到数据管理里的“列表”分类,创建一个新列表前,需要定义每条信息有哪些展示元素,所以你需要先设置一个数据块来定义。设置好数据块与列表后,你需要编辑列表,填入每条需要展示的内容。你可以预先多创建几条,以方便查看列表的效果。
在cellz中创建一个列表,将列表的ID填入列表的ID输入框中,点击获取。
你会发现Cellz帮你创建了一个列表,列表下有数据块的定义。拖动列表框设置列表的展示区域,然后设置数据块的展示形式。
预览,你将发现列表已经展示了你在数据管理后台中设置的信息了。
列表主要是为了满足相同格式内容的日常性更新。比如你需要实现一个公告板、产品展示或者资讯更新的时候,你最想要的就是一个列表,可以通过后台更新数据,而不需要更新客户端或者你的网页。
进入cellz中你的个人中心,找到数据管理里的“列表”分类,创建一个新列表前,需要定义每条信息有哪些展示元素,所以你需要先设置一个数据块来定义。设置好数据块与列表后,你需要编辑列表,填入每条需要展示的内容。你可以预先多创建几条,以方便查看列表的效果。
在cellz中创建一个列表,将列表的ID填入列表的ID输入框中,点击获取。
你会发现Cellz帮你创建了一个列表,列表下有数据块的定义。拖动列表框设置列表的展示区域,然后设置数据块的展示形式。
预览,你将发现列表已经展示了你在数据管理后台中设置的信息了。
Cellz能导出哪些格式
Cellz可以导出多种格式,如:MIX、M4C、 HTML及图片
MIX与M4C都是我们自定义的文件格式。
其中,MIX格式主要使用在APP打包或者数字内容出版。没错,如果你需要生成一个APP,或者在手机、iPad(android平板)上以一个APP或者 查看全部
Cellz可以导出多种格式,如:MIX、M4C、 HTML及图片
MIX与M4C都是我们自定义的文件格式。
其中,MIX格式主要使用在APP打包或者数字内容出版。没错,如果你需要生成一个APP,或者在手机、iPad(android平板)上以一个APP或者在APP中展示你的创作,那么以mix的格式导出是最合适不过的了。导出后,通过cellz.cn的个人中心打包服务来生成APP,或购买官方书架实现你的交互富媒体内容常态化出版。
而m4c格式是cellz.cn指定上传的文件格式。通过cellz的“发布”功能,将导出的m4c工程文件上传到cellz.cn,通过分享对应的作品链接,就完成你作品的发布了。
导出HTML是cellz的高级功能,需要付费用户才能使用。
导出图片,这个功能似乎比较鸡肋,我们是想提醒你,cellz本质上是可以作为一个排版软件使用的。
MIX与M4C都是我们自定义的文件格式。
其中,MIX格式主要使用在APP打包或者数字内容出版。没错,如果你需要生成一个APP,或者在手机、iPad(android平板)上以一个APP或者在APP中展示你的创作,那么以mix的格式导出是最合适不过的了。导出后,通过cellz.cn的个人中心打包服务来生成APP,或购买官方书架实现你的交互富媒体内容常态化出版。
而m4c格式是cellz.cn指定上传的文件格式。通过cellz的“发布”功能,将导出的m4c工程文件上传到cellz.cn,通过分享对应的作品链接,就完成你作品的发布了。
导出HTML是cellz的高级功能,需要付费用户才能使用。
导出图片,这个功能似乎比较鸡肋,我们是想提醒你,cellz本质上是可以作为一个排版软件使用的。
界面
cellz的界面设计十分的简洁,顶端主要是基础工具栏及交互组件,左侧是页面与图层列表,右侧则展示的是你设计过程中常用的工具属性控件。中间是制作区。
页面
在cellz中页面左右两侧都有分布,左边主要是一个页面列表,右侧则是页面的设置面板。添加多个页面可以直接 查看全部
cellz的界面设计十分的简洁,顶端主要是基础工具栏及交互组件,左侧是页面与图层列表,右侧则展示的是你设计过程中常用的工具属性控件。中间是制作区。
页面
在cellz中页面左右两侧都有分布,左边主要是一个页面列表,右侧则是页面的设置面板。添加多个页面可以直接单击页面列表中的“+”按钮,拖动页面也可直接进行嵌套。
说明:在不同对象的属性面板中缩略图的下方都有一个刷新标识。 在原路径下,使用其他设计软件修改原素材存储后,单击此选项,工程文件中也会相应改变。
“页面名称”的修改除了可以在页面的设置面板中修改外,还能在左侧的页面列表中,双击“页面页”直接修改。
制作区
缩放
制作区的缩放,除了可以通过调整缩放比的数值大小来查看对象或设计效果,也可以单击鼠标右键,利用页面缩小、页面放大、原始尺寸来进行调节。我们还创建了一系列快捷键来帮助实现这个效果,command+“-”缩小;command+“+” 放大;command+0回到原始大小。
如果你想通过移动页面来查看对象或效果,长按空格键,当鼠标箭头变为“手”的形状时,拖动鼠标,抓取想要查看的对象。
标尺
cellz中的标尺是默认打开的状态,你可以根据需求选择刻度值,并任意拖动它来设置自己的起始点。
你可以在标尺上任一位置单击鼠标,添加参考线。若想移动参考线,你需要在标尺中选中参考线再拖拽它。若想隐去标尺,单击右上角标尺项,标尺则隐去;清除标尺参考线,鼠标拉动红线至标尺边侧末端。
参考线
参考线在cellz中是自动存在的,当你在调整一个图层大小或移动一个图层的位置时, cellz会自动显示出一条两个不同图层对齐的红色参考线,利用该线就可以使图层对齐。
出血线
cellz默认的出血线设置是36px,你可以在页面属性板上根据自己的实际需求调整。在终端运行时,出血线的设置是为了更好的适配不同屏幕,保证你的内容不被裁切掉。
测量
同参考线一样,当你在调整一个图层的大小或位置时,页面上会自动出现一些标有数值的红线,这便是选中图层与相近图层间的间距值。
当你拉动某一对象,移动到就近图层距离相等的情况,cellz将会给你提示,以方便你归置图层的位置。
为了方便你的排版工作,cellz默认开启了位置吸附。对于细节位置调整,你可以通过箭头按键微调位置。
资源管理器
在cellz的左上角有一个“资源管理器”,它主要是用来管理你设计时使用的素材文件,它会分类别将素材存储在文件夹中,方便你编辑时随时提取素材资源,单击它,会弹出一个资源整合分类的界面,里面包含了本地各类资源,你可以利用图片、音频、视频来切换每个存储目录里的文件类型,直接选中文件,拖入编辑区即可。
值得注意的是,cellz支持多种文件格式的资源输入,如PNG、JPG、GIF和PSD分层文件。若你的MAC系统是OS X10.9以上的,你将发现cellz无比强大的psd解析功能,它会将你的psd文件分层创建,以便你可以在cellz中根据需要再次编辑这些图层。
页面
在cellz中页面左右两侧都有分布,左边主要是一个页面列表,右侧则是页面的设置面板。添加多个页面可以直接单击页面列表中的“+”按钮,拖动页面也可直接进行嵌套。
说明:在不同对象的属性面板中缩略图的下方都有一个刷新标识。 在原路径下,使用其他设计软件修改原素材存储后,单击此选项,工程文件中也会相应改变。
“页面名称”的修改除了可以在页面的设置面板中修改外,还能在左侧的页面列表中,双击“页面页”直接修改。
制作区
缩放
制作区的缩放,除了可以通过调整缩放比的数值大小来查看对象或设计效果,也可以单击鼠标右键,利用页面缩小、页面放大、原始尺寸来进行调节。我们还创建了一系列快捷键来帮助实现这个效果,command+“-”缩小;command+“+” 放大;command+0回到原始大小。
如果你想通过移动页面来查看对象或效果,长按空格键,当鼠标箭头变为“手”的形状时,拖动鼠标,抓取想要查看的对象。
标尺
cellz中的标尺是默认打开的状态,你可以根据需求选择刻度值,并任意拖动它来设置自己的起始点。
你可以在标尺上任一位置单击鼠标,添加参考线。若想移动参考线,你需要在标尺中选中参考线再拖拽它。若想隐去标尺,单击右上角标尺项,标尺则隐去;清除标尺参考线,鼠标拉动红线至标尺边侧末端。
参考线
参考线在cellz中是自动存在的,当你在调整一个图层大小或移动一个图层的位置时, cellz会自动显示出一条两个不同图层对齐的红色参考线,利用该线就可以使图层对齐。
出血线
cellz默认的出血线设置是36px,你可以在页面属性板上根据自己的实际需求调整。在终端运行时,出血线的设置是为了更好的适配不同屏幕,保证你的内容不被裁切掉。
测量
同参考线一样,当你在调整一个图层的大小或位置时,页面上会自动出现一些标有数值的红线,这便是选中图层与相近图层间的间距值。
当你拉动某一对象,移动到就近图层距离相等的情况,cellz将会给你提示,以方便你归置图层的位置。
为了方便你的排版工作,cellz默认开启了位置吸附。对于细节位置调整,你可以通过箭头按键微调位置。
资源管理器
在cellz的左上角有一个“资源管理器”,它主要是用来管理你设计时使用的素材文件,它会分类别将素材存储在文件夹中,方便你编辑时随时提取素材资源,单击它,会弹出一个资源整合分类的界面,里面包含了本地各类资源,你可以利用图片、音频、视频来切换每个存储目录里的文件类型,直接选中文件,拖入编辑区即可。
值得注意的是,cellz支持多种文件格式的资源输入,如PNG、JPG、GIF和PSD分层文件。若你的MAC系统是OS X10.9以上的,你将发现cellz无比强大的psd解析功能,它会将你的psd文件分层创建,以便你可以在cellz中根据需要再次编辑这些图层。
图层
所有的组件(包括基础组件图片,图形,文字,钢笔画出来的路径,或交互组件中的状态集,动画,滚动)以及组件所构成的组,在cellz中,都叫图层。
一般来说,图层属性一般分为:显示属性,操作属性。
显示属性包括:位置,尺寸,透明度,锚点, 旋转,初始时隐藏,基于。
查看全部
所有的组件(包括基础组件图片,图形,文字,钢笔画出来的路径,或交互组件中的状态集,动画,滚动)以及组件所构成的组,在cellz中,都叫图层。
一般来说,图层属性一般分为:显示属性,操作属性。
显示属性包括:位置,尺寸,透明度,锚点, 旋转,初始时隐藏,基于。
基于
默认属性是其父节点,你可以设置为基于“屏幕”。 如果基于屏幕,可实现公共图层,公共图层可以在多个页面显示,当切页的时候,公共图层并不会随着页面移动。
图层的层级编辑,在结构数中拖动图层,可以让图层归属于某一个组,或某状态集的某状态下,或拖动改变其显示层次。
结构列表
添加图层
在cellz中添加图层最简单有效的方式就是在形状工具栏选中某个图形,当浮动在制作区的光标右下角出现一个十字图案,单击且拖动鼠标,就完成形状图形的添加。
复制图层
复制图层的3种方式:
单击鼠标右键,选择拷贝、粘贴或选择复制,复制出一个对象;
鼠标右键选择拷贝、原位粘贴,得到一个完全叠合的对象;
使用快捷键,command+C拷贝/ command +V粘贴/command+Duplicate;按住option,拖动组件,可复制出一个重叠的图形;
同时多选图层
从你想要选中的对象区域开始拖动鼠标,你会发现随着你的拖动,红色虚线的范围会囊括你将要选择的对象,这时松开鼠标,每个对象上都呈现了8个小手柄,那么多个图层就被选中了。
你也可以在结构列表中,先选中一个对象,再按住shift键,选择最末尾的对象,那么他们之间的所有对象都被选中了。
移动图层
你可以选中任一图层,单击鼠标来移动它。而在左侧结构列表中,你可以使用快捷键来进行图层顺序的移动。Command+option+上箭头,表示图层向前移动;Command+option+下箭头,表示图层向后移动。
为图层重命名
双击结构列表中的某一图层,默认文字被选中后,你就可以直接更改默认图层名了。
更改大小
单击图层,出现在图层上的8个手柄就可以帮你改变图层大小,你可以拖动任一个手柄来调整。
拖动图形某一边中间的手柄只会调整到图形的长或宽,想要同时调整,可直接拖拽图形的某个角。
图层的锁定和隐藏
在结构列表中,当你将鼠标轻放在图层上,将会出现显示和未锁定的图标。将选择的对象隐藏,那么它将不再设计区内显示,你可以根据设计需求来关闭或打开这个设置,同理,选择锁定后,你将无法使用鼠标来移动它,双击也不能进行编辑。
图层的编辑
拖动图层改变图层位置,拖动边框改变图层的大小, 按住shift,等比缩放大小。
图层的选中: 在操作区,只能选中最外层的图层。 command+鼠标选择,表示穿透,可选择组内图层,或状态内图层。
组
你可以为多个图层创建组,并在结构列表中呈现为一个图层。并且你也可以为多个组再次创建成一个组。单击组,拖拽移动或缩放组,来改变组内图层的大小。同时双击组内的图层也可以修改组内每一个独立的图层属性。
想要创建组,你需要先选中一个或多个图层,然后右键选择“创建为”>“组”,当然你也可以直接在结构列表里拖拽图层,移动他们的顺序或者直接移动到不同的组里去。
对齐
属性面板顶端有一排对齐的设置按钮,右边的6个按钮是多个图层相对他们本身的所在位置对齐,只有一个图层的情况下是无法使用对齐方式来调整图形的。
左边两个按钮分别是垂直平均分布和水平平均分布,比如水平平均分布,最左和最右的两个图层会留在原位置,其他图层则会均匀的分布在他们中间。
一般来说,图层属性一般分为:显示属性,操作属性。
显示属性包括:位置,尺寸,透明度,锚点, 旋转,初始时隐藏,基于。
基于
默认属性是其父节点,你可以设置为基于“屏幕”。 如果基于屏幕,可实现公共图层,公共图层可以在多个页面显示,当切页的时候,公共图层并不会随着页面移动。
图层的层级编辑,在结构数中拖动图层,可以让图层归属于某一个组,或某状态集的某状态下,或拖动改变其显示层次。
结构列表
添加图层
在cellz中添加图层最简单有效的方式就是在形状工具栏选中某个图形,当浮动在制作区的光标右下角出现一个十字图案,单击且拖动鼠标,就完成形状图形的添加。
复制图层
复制图层的3种方式:
单击鼠标右键,选择拷贝、粘贴或选择复制,复制出一个对象;
鼠标右键选择拷贝、原位粘贴,得到一个完全叠合的对象;
使用快捷键,command+C拷贝/ command +V粘贴/command+Duplicate;按住option,拖动组件,可复制出一个重叠的图形;
同时多选图层
从你想要选中的对象区域开始拖动鼠标,你会发现随着你的拖动,红色虚线的范围会囊括你将要选择的对象,这时松开鼠标,每个对象上都呈现了8个小手柄,那么多个图层就被选中了。
你也可以在结构列表中,先选中一个对象,再按住shift键,选择最末尾的对象,那么他们之间的所有对象都被选中了。
移动图层
你可以选中任一图层,单击鼠标来移动它。而在左侧结构列表中,你可以使用快捷键来进行图层顺序的移动。Command+option+上箭头,表示图层向前移动;Command+option+下箭头,表示图层向后移动。
为图层重命名
双击结构列表中的某一图层,默认文字被选中后,你就可以直接更改默认图层名了。
更改大小
单击图层,出现在图层上的8个手柄就可以帮你改变图层大小,你可以拖动任一个手柄来调整。
拖动图形某一边中间的手柄只会调整到图形的长或宽,想要同时调整,可直接拖拽图形的某个角。
图层的锁定和隐藏
在结构列表中,当你将鼠标轻放在图层上,将会出现显示和未锁定的图标。将选择的对象隐藏,那么它将不再设计区内显示,你可以根据设计需求来关闭或打开这个设置,同理,选择锁定后,你将无法使用鼠标来移动它,双击也不能进行编辑。
图层的编辑
拖动图层改变图层位置,拖动边框改变图层的大小, 按住shift,等比缩放大小。
图层的选中: 在操作区,只能选中最外层的图层。 command+鼠标选择,表示穿透,可选择组内图层,或状态内图层。
组
你可以为多个图层创建组,并在结构列表中呈现为一个图层。并且你也可以为多个组再次创建成一个组。单击组,拖拽移动或缩放组,来改变组内图层的大小。同时双击组内的图层也可以修改组内每一个独立的图层属性。
想要创建组,你需要先选中一个或多个图层,然后右键选择“创建为”>“组”,当然你也可以直接在结构列表里拖拽图层,移动他们的顺序或者直接移动到不同的组里去。
对齐
属性面板顶端有一排对齐的设置按钮,右边的6个按钮是多个图层相对他们本身的所在位置对齐,只有一个图层的情况下是无法使用对齐方式来调整图形的。
左边两个按钮分别是垂直平均分布和水平平均分布,比如水平平均分布,最左和最右的两个图层会留在原位置,其他图层则会均匀的分布在他们中间。
基础组件
钢笔
在cellz中除了在形状中选择现有的图形工具来添加图形,你还可以用钢笔工具绘制您自己的形状。
单击选择钢笔工具,在设计区单击任意位置,以创建自定形状的第一个节点,移动鼠标再次单击,出现第二个节点,你会看见有线条连接了两点,接着继续单击别处且长按鼠标,拖拽 查看全部
钢笔
在cellz中除了在形状中选择现有的图形工具来添加图形,你还可以用钢笔工具绘制您自己的形状。
单击选择钢笔工具,在设计区单击任意位置,以创建自定形状的第一个节点,移动鼠标再次单击,出现第二个节点,你会看见有线条连接了两点,接着继续单击别处且长按鼠标,拖拽节点可绘制曲线。
多次添加后,若要停止绘制并封闭形状,你可以按下回车键,cellz将为你自动封闭该路径,生成一个图形,或者你也可以点按添加的第一个节点,也将生成一个封闭图形。
若要停止绘制并保持形状打开状态,以便稍后处理它,那么你可以按esc键退出编辑模式,cellz将生成一条非封闭路径。
对于选择和添加新节点的操作方法同图形工具是一样的。
图形
在cellz中提供了多种不同的形状供你使用,基本的图形有矩形、圆形、多边形等,它的添加方式和图层的添加方式是一样的,详见图层添加。
编辑图形
单击形状,选择矩形,按图层的添加方式添加好对象,双击它开始编辑,你会看见之前出现在图层上的手柄现在变成了4个小圆点,当鼠标移至圆点,会出现钢笔工具,单击并拖拽这些点来改变图形。并且你也可以在图形上单击来添加新的点,要想删去新加的点,只需再次单击它,当它变成一个实点时,然后按backspace键。
如果你想将一条直线变成曲线,先双击一个点,它的两端会出现2个实点,拉动这2个点来改变他的弯曲度。
矢量点
矢量点有几种不同的模式,他们决定了图形之间会出现怎样的线条。
双击编辑图形时,右侧属性面板会出现四种不同的点模式:
根据路径产生的固定夹角
锚点间独立,分开控制长度,互不影响
两个锚点到主点之间的距离是独立的,单向调节长度,但他们仍保持180°
两个锚点会与主点距离相同,双向调节,并始终保持180°
通过“形状”添加一个“矩形”,你可以通过设置圆角属性来将它变成不同的圆角,比如你可以将一个矩形任意的两个角设置成圆角,而其他两个仍保持为直角。
填充
cellz中的填充方式有三种,颜色填充、渐变填充和图片填充,你任意选择其中的一种,单击选项,都会出现一个相关设置的属性面板。
颜色填充
颜色填充里有这些填充方式,色轮、颜色滑块、颜色调板、图像调板、蜡笔色,除了这些固定的方式以外,你也可以通过下方的拾色器吸取其他的色值。
渐变填充
在cellz中想要给图形设置渐变填充,选中图层,切换填充方式,下方会出现渐变填充的属性面板,依次是填充的类型、角度、渐变线、色标。
线性渐变
当你选择了线性渐变,你会发现图层上出现了一条渐变线,渐变线上的点其实就是一个色彩滑块,且形成一个平滑色彩过渡。想要改变滑块的颜色,单击选中它,在“色标”>“色值”中去选择颜色,或在方框里输入一个色值。
想要添加滑块,你可以在属性面板的色标中单击添加,删除即再次单击选中它,backspace删除。
径向渐变
如果你选择径向渐变,那么渐变线上左边的第一个点便会是径向渐变的中心,末端的点则会决定渐变的范围。添加和改变色值与上面的线性渐变方法相同。
翻转
在渐变填充的属性面板中有一个“翻转”的选项,你可以单击它,来改变渐变的方向。
图片填充
你也可以选择图片文件通过铺满或平铺的方式来进行填充。
铺满:图像被放大直至充满整个区域
平铺:图像被不断重复直至铺满整个选区
图片的编辑
选中一张图片,双击它进入编辑模式,你会发现出现了一个矩形选区且在右上侧出现了三个编辑工具。
要退出对图片的编辑,只需单击图片外任一点,或按下escape键即可。
遮罩
cellz中的遮罩可以取两个图形的公共值,若给这个两个图形填充了色值,那么,所取的公共部分的颜色会以上层颜色为准进行填充。
形状编辑
cellz中的形状编辑,其实就是通常所说的布尔运算,我们共有4种不同的形状编辑:
合并:即得到两个矢量区域的总和。
减去顶层:顶层矢量区域会从下一层的图形上移去(减去顶层图形的同时,也相应移去与下层相交的部分)
相交:保留原图形重叠的部分。
排除重叠:只保留原图形不重叠的部分,它与“相交”是相反的。
文本
添加文本
从工具栏中选中文本工具,单击设计区任意点或拖动光标添加文本图层,添加完成后,双击文本图层,就可以键入文本内容了。
值得一提的是,在cellz的文本工具中有个很好用的功能,当你在文本框内键入的文字内容超出文本框大小时,在它的右下方有一个十字小框,双击它,那么会重新弹出一个文本框,多余的内容页会自动移至这个文本框内,并自动形成一个关联效果。
删除文本
你既可利用鼠标右键中的“删除”项来进行删除,也可使用快捷键Delete来进行删除。
文本框属性栏
当你选中一段文本,你仍可以设置它的基本属性,如位置>尺寸>背景颜色>旋转。
背景色:整个文本框的背景颜色;
旋转:旋转是按照顺时针方向进行的,白色圆圈内的小圆点既可作为文本框旋转时角度的预览也可以拉动它直接改变文本框的旋转角度。
文本的输出类型
在Cellz中文本的导出类型有四种,图片、文本、单行、输入框。
图片与文本,当你为文本内容设置了较为生僻的字体格式,若选择导出为“图片”则文本内容将输出为一张png或JPG的图片,文本格式不会发生改变,而选择导出为“文本”则会发生一定的变化(比如字体样式)。对于网页不能支持的中文字体,就可以使用此功能。
单行与输入框,若你将文本导出设置为“单行”,那么你在预览的时候一定会发现,只能单行显示和输入文字,而设置为“输入框”则可以根据文本框的大小来显示和输入内容。
外扩:在左右上下中设置相同或不同的数值,(锁定则表示同比缩放,未锁定时你可以自行设置每个数值大小)文本框的背景填充会根据这个数值向周围进行一个外扩。
创建段落样式
想要在文本中创建一个新的段落样式,你需要先选中一个文本框或选中文本框内的内容,然后在属性>文本信息>文本>段落样式中单击下方的“+”添加段落样式,并且你也可以选中新填加的样式,右键重命名样式名称或进行添加样式的删除。
文字绕排
你可以通过设置被绕排对象的绕排属性来设置绕排类型。可被绕排的对象可以是图形或文字。
音频
同视频文件一样,音频也可以直接拖进页面里,或者你也可以选择“本地文件”上传文件来添加音频。音乐的类型有两种,背景音乐和音效,为了区分他们,你也可以理解成他们播放的效果一个是循环播放,一个只播放单次。
注:音频为MP3格式
这里,我们主要讲下“在线”音频的添加,必须使用Google chrome查找一个在线音频,点击最末端的“自定义并控制Google chrome>开发者工具”(图1),播放选中音频,页面下方会出现一些工具栏(图2),你主要查看size和time的大小,来判断抓取正确的音频链接。
图1
图2
视频
与音频的种类和添加方式相同,视频也分为本地和在线视频(视频格式需为MP4格式),不同的是在视频里有两个不同的设置项:
全屏播放:视频全频播放 (注:在iOS设备上,若设置为手动播放,则会默认为全屏播放)
显示控制台:播放视频时,单击视频将显示播放进度条
在cellz中除了在形状中选择现有的图形工具来添加图形,你还可以用钢笔工具绘制您自己的形状。
单击选择钢笔工具,在设计区单击任意位置,以创建自定形状的第一个节点,移动鼠标再次单击,出现第二个节点,你会看见有线条连接了两点,接着继续单击别处且长按鼠标,拖拽节点可绘制曲线。
多次添加后,若要停止绘制并封闭形状,你可以按下回车键,cellz将为你自动封闭该路径,生成一个图形,或者你也可以点按添加的第一个节点,也将生成一个封闭图形。
若要停止绘制并保持形状打开状态,以便稍后处理它,那么你可以按esc键退出编辑模式,cellz将生成一条非封闭路径。
对于选择和添加新节点的操作方法同图形工具是一样的。
图形
在cellz中提供了多种不同的形状供你使用,基本的图形有矩形、圆形、多边形等,它的添加方式和图层的添加方式是一样的,详见图层添加。
编辑图形
单击形状,选择矩形,按图层的添加方式添加好对象,双击它开始编辑,你会看见之前出现在图层上的手柄现在变成了4个小圆点,当鼠标移至圆点,会出现钢笔工具,单击并拖拽这些点来改变图形。并且你也可以在图形上单击来添加新的点,要想删去新加的点,只需再次单击它,当它变成一个实点时,然后按backspace键。
如果你想将一条直线变成曲线,先双击一个点,它的两端会出现2个实点,拉动这2个点来改变他的弯曲度。
矢量点
矢量点有几种不同的模式,他们决定了图形之间会出现怎样的线条。
双击编辑图形时,右侧属性面板会出现四种不同的点模式:
根据路径产生的固定夹角
锚点间独立,分开控制长度,互不影响
两个锚点到主点之间的距离是独立的,单向调节长度,但他们仍保持180°
两个锚点会与主点距离相同,双向调节,并始终保持180°
通过“形状”添加一个“矩形”,你可以通过设置圆角属性来将它变成不同的圆角,比如你可以将一个矩形任意的两个角设置成圆角,而其他两个仍保持为直角。
填充
cellz中的填充方式有三种,颜色填充、渐变填充和图片填充,你任意选择其中的一种,单击选项,都会出现一个相关设置的属性面板。
颜色填充
颜色填充里有这些填充方式,色轮、颜色滑块、颜色调板、图像调板、蜡笔色,除了这些固定的方式以外,你也可以通过下方的拾色器吸取其他的色值。
渐变填充
在cellz中想要给图形设置渐变填充,选中图层,切换填充方式,下方会出现渐变填充的属性面板,依次是填充的类型、角度、渐变线、色标。
线性渐变
当你选择了线性渐变,你会发现图层上出现了一条渐变线,渐变线上的点其实就是一个色彩滑块,且形成一个平滑色彩过渡。想要改变滑块的颜色,单击选中它,在“色标”>“色值”中去选择颜色,或在方框里输入一个色值。
想要添加滑块,你可以在属性面板的色标中单击添加,删除即再次单击选中它,backspace删除。
径向渐变
如果你选择径向渐变,那么渐变线上左边的第一个点便会是径向渐变的中心,末端的点则会决定渐变的范围。添加和改变色值与上面的线性渐变方法相同。
翻转
在渐变填充的属性面板中有一个“翻转”的选项,你可以单击它,来改变渐变的方向。
图片填充
你也可以选择图片文件通过铺满或平铺的方式来进行填充。
铺满:图像被放大直至充满整个区域
平铺:图像被不断重复直至铺满整个选区
图片的编辑
选中一张图片,双击它进入编辑模式,你会发现出现了一个矩形选区且在右上侧出现了三个编辑工具。
要退出对图片的编辑,只需单击图片外任一点,或按下escape键即可。
遮罩
cellz中的遮罩可以取两个图形的公共值,若给这个两个图形填充了色值,那么,所取的公共部分的颜色会以上层颜色为准进行填充。
形状编辑
cellz中的形状编辑,其实就是通常所说的布尔运算,我们共有4种不同的形状编辑:
合并:即得到两个矢量区域的总和。
减去顶层:顶层矢量区域会从下一层的图形上移去(减去顶层图形的同时,也相应移去与下层相交的部分)
相交:保留原图形重叠的部分。
排除重叠:只保留原图形不重叠的部分,它与“相交”是相反的。
文本
添加文本
从工具栏中选中文本工具,单击设计区任意点或拖动光标添加文本图层,添加完成后,双击文本图层,就可以键入文本内容了。
值得一提的是,在cellz的文本工具中有个很好用的功能,当你在文本框内键入的文字内容超出文本框大小时,在它的右下方有一个十字小框,双击它,那么会重新弹出一个文本框,多余的内容页会自动移至这个文本框内,并自动形成一个关联效果。
删除文本
你既可利用鼠标右键中的“删除”项来进行删除,也可使用快捷键Delete来进行删除。
文本框属性栏
当你选中一段文本,你仍可以设置它的基本属性,如位置>尺寸>背景颜色>旋转。
背景色:整个文本框的背景颜色;
旋转:旋转是按照顺时针方向进行的,白色圆圈内的小圆点既可作为文本框旋转时角度的预览也可以拉动它直接改变文本框的旋转角度。
文本的输出类型
在Cellz中文本的导出类型有四种,图片、文本、单行、输入框。
图片与文本,当你为文本内容设置了较为生僻的字体格式,若选择导出为“图片”则文本内容将输出为一张png或JPG的图片,文本格式不会发生改变,而选择导出为“文本”则会发生一定的变化(比如字体样式)。对于网页不能支持的中文字体,就可以使用此功能。
单行与输入框,若你将文本导出设置为“单行”,那么你在预览的时候一定会发现,只能单行显示和输入文字,而设置为“输入框”则可以根据文本框的大小来显示和输入内容。
外扩:在左右上下中设置相同或不同的数值,(锁定则表示同比缩放,未锁定时你可以自行设置每个数值大小)文本框的背景填充会根据这个数值向周围进行一个外扩。
创建段落样式
想要在文本中创建一个新的段落样式,你需要先选中一个文本框或选中文本框内的内容,然后在属性>文本信息>文本>段落样式中单击下方的“+”添加段落样式,并且你也可以选中新填加的样式,右键重命名样式名称或进行添加样式的删除。
文字绕排
你可以通过设置被绕排对象的绕排属性来设置绕排类型。可被绕排的对象可以是图形或文字。
音频
同视频文件一样,音频也可以直接拖进页面里,或者你也可以选择“本地文件”上传文件来添加音频。音乐的类型有两种,背景音乐和音效,为了区分他们,你也可以理解成他们播放的效果一个是循环播放,一个只播放单次。
注:音频为MP3格式
这里,我们主要讲下“在线”音频的添加,必须使用Google chrome查找一个在线音频,点击最末端的“自定义并控制Google chrome>开发者工具”(图1),播放选中音频,页面下方会出现一些工具栏(图2),你主要查看size和time的大小,来判断抓取正确的音频链接。
图1
图2
视频
与音频的种类和添加方式相同,视频也分为本地和在线视频(视频格式需为MP4格式),不同的是在视频里有两个不同的设置项:
全屏播放:视频全频播放 (注:在iOS设备上,若设置为手动播放,则会默认为全屏播放)
显示控制台:播放视频时,单击视频将显示播放进度条
交互组件
交互组件是cellz为你设计的复合容器类组件。该类组件具备一定的基础交互特性,也具备容器的特征。你可以通过多个交互组件的关联与嵌套实现丰富交互方式。
开关
开关在cellz中是最基础的交互组件。开关主要可以用来控制交互的触发事件,为“开”和“关”设置不同的触 查看全部
交互组件是cellz为你设计的复合容器类组件。该类组件具备一定的基础交互特性,也具备容器的特征。你可以通过多个交互组件的关联与嵌套实现丰富交互方式。
开关
开关在cellz中是最基础的交互组件。开关主要可以用来控制交互的触发事件,为“开”和“关”设置不同的触发行为,可以展现出不同的交互效果。
移动设备上的开关有两种状态,“普通”和“按下”。当我们新建一个开关,在左侧的结构列表中,就会出现这2个状态。
创建开关
在工具栏选“开关”,拖动鼠标绘出一个开关选区,将图层直接拖拽到结构列表中“普通”或“按下”的状态里。
拖动对象到设计区 ,选中它们,选择右键菜单中的“创建为”>“开关”,那么这2个对象分别被设定为“普通”和“按下”状态。
网页
cellz中的“网页”组件除了可以将网页连接到电子刊物内部显示,还能嵌入HTML文件。
网页的创建:单击工具栏中的“网页”,拖动绘制一个选区,按照需求选择嵌入网页的形式。
本地:首先需要你先选择好要键入的web,右键“将页面存储为”,在存储位置找到文件,并将文件集中到同一个文件夹,“选择本地文件”上传该文件夹中的默认文件即可。
嵌入式HTML:自行输入HTML 。对其修改,请先选择“清除”再进行操作。
说明:在存储网页资源时,有的网页只会出现一个文件,而有的会出现2个,上传时你只需选择默认的那个文件即可。
滚动
创建滚动
创建滚动有两种方式:
点击交互工具栏中的“滚动”,设计区出现创建滚动的选区,直接拖拽对象到这个选区内(只适用于图片和图形),调整属性>尺寸>高来控制滚动的显示范围。
拉动对象到设计区,按选中图层的方法将这些对象选中,右键>创建为>滚动。
滑动方式
• 连续滚动
• 均匀分页
• 吸附点分页
这里我们主要来说下吸附点分页的设置。
按上步骤添加滚动,选择“吸附点分页”的滚动方式,双击对象,出现蓝色竖条区域,在你想要重点展示的区域单击添加点,那么在滚动显示时,会自动停放在这些点上,以达到重点显示的效果。删除这些点,单击当它变大时,删除即可。
状态集
状态集以状态数为单位,一个状态集下可以存在多个状态,并且在这些状态里还可以嵌入状态集,每个状态可以呈现当前状态下的所有内容,并在编辑栏下的状态列表中依次显示。
创建状态集
同滚动的添加相同,你可以点击交互组件栏中的“状态集”,拖动鼠标添加一个空白的状态集,然后在将对象拉进状态集选区,或先将图片拉到设计区后,右键“创建为”状态集。
状态数的相关设置
双击对象,弹出状态数的编辑,状态数是依次排列的,你可以通过直接键入具体数字来添加状态数,也可以直接点击“+”来添加,改变某个状态的位置,长按并拖动鼠标。
状态集的交互效果
关于状态集的交互方式,下面我们罗列出一些基本的应用场景,更多的应用你可以在设计的过程中慢慢发现它的各种功用。
渐变
应用场景:
• 状态间的渐变切换,图片轮播
• 触发事件,可以通过两个幻灯片状态,来触发一组内容切换,比如点击图标,出现详细内文
• 淡入淡出动画,可以快速的实现元素的淡入淡出
纵向吸附:沿垂直方向,由下向上切换图片。
应用场景:
• 状态间的切换
• 配合状态集关联的一种方式
横向吸附:沿水平方向,由右至左切换图片
应用场景:
• 状态间的切换
• 配合状态集关联的一种方式
3D翻转X:沿X轴,按正方向进行翻转
应用场景:
• 状态间的3D翻转效果
3D翻转Y:沿Y轴从右往左进行翻转
应用场景:
• 状态间的3D翻转效果
• 配合某触发事件
缩放
应用场景:
• 状态间的弹出切换,缩放效果
• 触发方式
• 缩放动画的快速实现
弹出
应用场景:
• 状态间的弹出切换,重点展示
• 触发事件
• 关联对象
• 弹出动画的快速实现
飞驰:首个状态呈现切换时,第二个状态迅速弹出
应用场景:
• 图片间的呈现状态
交换:首个状态向下淡出,第二个状态垂直方向移出
覆盖:图片切换时,第二个状态迅速覆盖首个状态
动画
创建动画
在cellz中创建动画的方式也有两种,首先你可以在交互组件中选择动画,拖拽鼠标,出现动画的空白选区,将对象拉到选区内;另一种你可以先将对象拉到设计区内,选中对象,选择右键菜单栏中“创建为”>“动画”。
两种创建方式都是双击进行编辑,点击右侧下角“+”添加多个新的路径,拖动路径帧可以设置曲线路径,调整每一帧的位置、旋转、锚点等,来改变路径的运动方向,创建出丰富的效果。
动画里可以嵌套动画,同时可以嵌套状态集、视频、音频等其他组件,便于制作更深层次的动画和交互。
动画设置
通过对动画/动画帧的设置,不仅可以改变动画播放的时间、播放控制,同时可以设置交互组件之前的关联、触发,还可以在“交互设置”中利用 “自动播放”、“点击”、“悬停”来控制动画的播放。
需注意的是,在动画中有3个较为特殊的属性。动画中的旋转值可以设置负数;添加关键帧时,位置与前一帧重叠,且会延续上个对象的属性,如旋转值、锚点等;动画中可以更改锚点的位置来改变动画运动的路径。
开关
开关在cellz中是最基础的交互组件。开关主要可以用来控制交互的触发事件,为“开”和“关”设置不同的触发行为,可以展现出不同的交互效果。
移动设备上的开关有两种状态,“普通”和“按下”。当我们新建一个开关,在左侧的结构列表中,就会出现这2个状态。
创建开关
在工具栏选“开关”,拖动鼠标绘出一个开关选区,将图层直接拖拽到结构列表中“普通”或“按下”的状态里。
拖动对象到设计区 ,选中它们,选择右键菜单中的“创建为”>“开关”,那么这2个对象分别被设定为“普通”和“按下”状态。
网页
cellz中的“网页”组件除了可以将网页连接到电子刊物内部显示,还能嵌入HTML文件。
网页的创建:单击工具栏中的“网页”,拖动绘制一个选区,按照需求选择嵌入网页的形式。
本地:首先需要你先选择好要键入的web,右键“将页面存储为”,在存储位置找到文件,并将文件集中到同一个文件夹,“选择本地文件”上传该文件夹中的默认文件即可。
嵌入式HTML:自行输入HTML 。对其修改,请先选择“清除”再进行操作。
说明:在存储网页资源时,有的网页只会出现一个文件,而有的会出现2个,上传时你只需选择默认的那个文件即可。
滚动
创建滚动
创建滚动有两种方式:
点击交互工具栏中的“滚动”,设计区出现创建滚动的选区,直接拖拽对象到这个选区内(只适用于图片和图形),调整属性>尺寸>高来控制滚动的显示范围。
拉动对象到设计区,按选中图层的方法将这些对象选中,右键>创建为>滚动。
滑动方式
• 连续滚动
• 均匀分页
• 吸附点分页
这里我们主要来说下吸附点分页的设置。
按上步骤添加滚动,选择“吸附点分页”的滚动方式,双击对象,出现蓝色竖条区域,在你想要重点展示的区域单击添加点,那么在滚动显示时,会自动停放在这些点上,以达到重点显示的效果。删除这些点,单击当它变大时,删除即可。
状态集
状态集以状态数为单位,一个状态集下可以存在多个状态,并且在这些状态里还可以嵌入状态集,每个状态可以呈现当前状态下的所有内容,并在编辑栏下的状态列表中依次显示。
创建状态集
同滚动的添加相同,你可以点击交互组件栏中的“状态集”,拖动鼠标添加一个空白的状态集,然后在将对象拉进状态集选区,或先将图片拉到设计区后,右键“创建为”状态集。
状态数的相关设置
双击对象,弹出状态数的编辑,状态数是依次排列的,你可以通过直接键入具体数字来添加状态数,也可以直接点击“+”来添加,改变某个状态的位置,长按并拖动鼠标。
状态集的交互效果
关于状态集的交互方式,下面我们罗列出一些基本的应用场景,更多的应用你可以在设计的过程中慢慢发现它的各种功用。
渐变
应用场景:
• 状态间的渐变切换,图片轮播
• 触发事件,可以通过两个幻灯片状态,来触发一组内容切换,比如点击图标,出现详细内文
• 淡入淡出动画,可以快速的实现元素的淡入淡出
纵向吸附:沿垂直方向,由下向上切换图片。
应用场景:
• 状态间的切换
• 配合状态集关联的一种方式
横向吸附:沿水平方向,由右至左切换图片
应用场景:
• 状态间的切换
• 配合状态集关联的一种方式
3D翻转X:沿X轴,按正方向进行翻转
应用场景:
• 状态间的3D翻转效果
3D翻转Y:沿Y轴从右往左进行翻转
应用场景:
• 状态间的3D翻转效果
• 配合某触发事件
缩放
应用场景:
• 状态间的弹出切换,缩放效果
• 触发方式
• 缩放动画的快速实现
弹出
应用场景:
• 状态间的弹出切换,重点展示
• 触发事件
• 关联对象
• 弹出动画的快速实现
飞驰:首个状态呈现切换时,第二个状态迅速弹出
应用场景:
• 图片间的呈现状态
交换:首个状态向下淡出,第二个状态垂直方向移出
覆盖:图片切换时,第二个状态迅速覆盖首个状态
动画
创建动画
在cellz中创建动画的方式也有两种,首先你可以在交互组件中选择动画,拖拽鼠标,出现动画的空白选区,将对象拉到选区内;另一种你可以先将对象拉到设计区内,选中对象,选择右键菜单栏中“创建为”>“动画”。
两种创建方式都是双击进行编辑,点击右侧下角“+”添加多个新的路径,拖动路径帧可以设置曲线路径,调整每一帧的位置、旋转、锚点等,来改变路径的运动方向,创建出丰富的效果。
动画里可以嵌套动画,同时可以嵌套状态集、视频、音频等其他组件,便于制作更深层次的动画和交互。
动画设置
通过对动画/动画帧的设置,不仅可以改变动画播放的时间、播放控制,同时可以设置交互组件之前的关联、触发,还可以在“交互设置”中利用 “自动播放”、“点击”、“悬停”来控制动画的播放。
需注意的是,在动画中有3个较为特殊的属性。动画中的旋转值可以设置负数;添加关键帧时,位置与前一帧重叠,且会延续上个对象的属性,如旋转值、锚点等;动画中可以更改锚点的位置来改变动画运动的路径。