论文部分内容阅读
当今世界已进入了一个数字化阅读的新时代，数字阅读已经成为一种潮流，并以其便捷的优势不断发展，同时也刺激了数字阅读技术的飞速更新。本文通过介绍如何用Adobe Mouse CC实现视差滚动效果页面和通过Adobe Illustrator CC轻易变换文字向读者展示数字化阅读技术独特的影响力和艺术效果。
用Adobe Mouse CC实现视差滚动效果
网络世界五彩缤纷，网页设计师通常需要尝试新方法来吸引读者眼球。如今，这就意味着设计师们要使用HTML5， CSS3和 JavaScript技术来达到意想不到的效果。视差滚动允许读者通过滚动鼠标实现不同的元素（如背景，图像，文本）在一个页面的不同方位以不同的速度移动，这样会提高读者阅读文章内容的积极性，也会让读者产生深度的遐想。举个例子，当读者在一个航空网站页面上向下滚动鼠标，会看到页面背景缓慢移动的云彩，然后一架飞机穿过天空中的云彩出现在读者的眼前，会让读者仿佛置身其中。了解视差滚动设计最好的办法就是看它的实践应用。以下是使用Adobe Mouse CC做的几个较好好网站页面的范例：Paul Surridge 网页设计师通过来回跳转的图文说明来介绍作者保罗·凯里奇小说的特点；Slick-allax 这个范例显示视差滚动设计可以编入一个商业网站中；Breathe 文字和图片在这个冥想为主题的站点上下左右来回穿插移动就是运用视差效果设计；Aaron Lawrence Design这种自我推销式的网站运用大量色彩移动组合来实现页面的变换。
接下来，本刊将向读者展示一些视差滚动设计的例子，并告诉读者何时（或者何时不使用）去使用这项技术，让读者尝试技术革新力量的影响力，并向读者展示如何在Adobe Mouse CC 里操作它。
何时使用视差滚动技术
出于尝试新鲜事物的缘故，设计者们可以使用一项新的技术。（当阴影效果技术引入到Adobe Design的时候，读者就可以看到傻瓜们到处使用这个技术。）但是在互联网领域，读者必须考虑的特别周全，因为读者体验关系到网站的发展，只是说读者可以使用视差滚动技术但并不意味着可以滥用这项技术。许多类型的网站受益于视差滚动效果。除了让网站有更多的互动，视差滚动还可以让读者在网站停留更长时间，让网站富有故事性，让想法变成行动，增加层次感和深度性。
视差滚动技术原理
视差滚动技术依赖于HTML5， CSS和 JavaScript。比如在一张被标记使用HTML5标签如和属性如enterSpeedY的图片的内容中添加视差滚动效果，实际上视差滚动效果来自于Javascript（JQuery 或者另一个插件），让读者在高级选项里一探究竟（见图1）。
如果快速预览让读者停了下来，那么读者并不孤单，视差滚动技术可以更快更复杂这就是为什么它如此的令人振奋。Adobe Mouse CC 可以运用视差滚动技术到读者的网页。这意味着，读者可以实现视差滚动而不必再写一连串的代码。
制作属于自己的页面
如果读者想尝试使用这一技术，那就需要安装Adobe Mouse CC。如果没有，只需从Adobe创意云下载并安装免费的30天试用版软件。然后跟随本教程，下载样本文件（ZIP，146 KB），将其解压缩并保存到SourceSansParallaxType的文件夹。如果想看文件最终版本，在Adobe Mouse CC里打开文件SourceSanspro_final.muse的程序，或访问 SourceSansPro sample site 网站。
按照下面的步骤运用视差滚动技术到一张重复的背景图像当中：
1.打开Adobe Mouse CC，选择文件>打开网站。在SourceSansParallaxType文件夹导航到SourceSansPro_start.Mouse网站文件，点击打开。
2.在计划模式下，双击主页面缩略图以实现在设计模式下打开页面（见图2）。
3.点击控制面板中的浏览器链接，选择填充选项卡，单击选择背景图像图标旁边的图像字段（见图3）。导航到> IMG SourceSansParallaxType文件夹，选择Arrow.png的文件，然后单击打开。
4.在浏览器填充选项中，从配置菜单选择展开图和验证滚动效果可用。选择滚动选项卡并打开滚动移动选项（参见图4）。
在web浏览器中滚动移动设置来控制浏览器填充图像的运动相对于垂直滚动，读者可以同时管理水平和垂直运动，包括浏览器填充图像的移动速度。
顶部的两个选项控制背景图像的垂直运动，底部的两个选项控制背景图像的水平移动。
值为0表示当移动浏览器垂直滚动条时背景图像不移动，值为1表示选择的背景图像的移动方向（上，下，左，或右）会和浏览者移动滚动条保持相同的速度。
注意：在Adobe Muse CC里， 读者可以在页面使用视差滚动效果为背景填充内容或者元素，背景填充内容需要水平或者垂直拼贴，滚动运动效果只适用被拼贴图像的方向。
页面属性不能是 一个或者一组小部件。读者并不能将滚动效果定义为100%宽，固定项目，或者内置属性（比如图片粘贴在文本框里用来创建自动换行栏）
5.点击单选按钮旁边指向下方的箭头，改变垂直速度值设置为1（见图5）。现在向下的垂直运动将和垂直滚动保持同样的速度。水平移动值设置为0，这意味着它将不能水平移动。
6.点击任意位置关闭掉浏览器填充菜单然后选择视图>点击预览模式预览效果，在文档窗口垂直滚动。
7.选择查看>设计模式返回到A-Master页面。在控制面板中单击“浏览器填充链接，选择“填充”选项卡，单击选择背景图片图标旁边的图像字段并选择一个图像文件，导航到> IMG SourceSansParallaxType的文件夹。选择Absurdidad.png的文件，并单击“打开”（见图6）。 8.选择文件>保存网站，然后选择文件>关闭页面。
按照下面的步骤使用图像添加视差滚动效果设计到页面上：
1. 在计划模式下，双击主页缩略图来打开它，向下滚动，直到读者找到文本说明，“SITE CREATED WITH ADOBE MOUSE”（参见图7）。
2. 选择文件>放置在输入对话框中，导航到SourceSansParallaxType > Img文件夹。 选择MuseLogo. png文件，并单击打开。单击以图片放在文字为“SITE CREATED WITH ADOBE MUSE ”之上（参见图8）。
3. 使用选择工具，拖动图像到中心位置（见下一页图9），智能指引将帮助读者将图像与文本“ADOBE MUSE”左侧边缘保持在同一直线上。
4. 在选中的图片上，在控制面板里点击效果链接，然后在最右边点击滚动运动选项卡，打开滚动运动选项，改变关键位置值为31272 px（参见图10）。
注意T形句柄的处理，从顶部延伸到所选择的图像（见图10红色箭头所指位置）。T形句柄的顶点位置代表关键位置，即页面上该区域的元素将在滚动后自己定位位置。使用这个句柄来设置，将会发生的移动在T顶点的位置达到浏览器窗口顶部位置之前或者之后。
提示：在设计中读者也可以改变关键位置，通过拖动选项工具中的T形句柄来更直观地放置关键位置。
5. 在这一步中，停在移动前的关键区域，设定速度在运动发生在滚动发生之前，点击箭头旁边的单选按钮，设置垂直值为0。点击箭头旁边的单选按钮，点击后设置水平速度0.5（参见图11）。现在Adobe Muse图标将从左向右移动，当关键位置到达浏览器窗口的顶端，它会停留在它目前停留在页面上的位置。
6. 现在读者可以控制移动的方向和速度，这会发生在关键位置到达浏览器顶部之后。如前所料，在关键区域设置后读者就可以如此操作。点击箭头旁边的单选按钮，设置垂直滚动速度为1，设置水平滚动速度为0（参见图11）。
7. 点击任意地方关闭效果菜单，选择视图>预览模式预览效果。读者必须以向下滚动的方式直到在文件创建看到文本和标志。
8. 选择视图>设计模式返回到主页。
就是这样。现在读者们已经了解了在Adobe Muse CC里关于视差滚动效果页面设计的基础知识。并可以将它运用到自己的一些设计中去。
这只是开始
这些例子覆盖了视差滚动效果设计的许多关键概念。若想了解更多的内容，读者可以在SourceSansPro_final. Muse的主页选择不同的对象查看，在控制面板中点击效果链接查看滚动运动选项，在设置里进行简单的试验，看他们如何在滚动页面时影响对象移动。使用选择工具，选择文本“site created with ”然后单击效果链接。在效果选项，单击滚动运动按钮，在关键选项前的运动项，单击指向右方的箭头旁边的单选按钮，预览页面或者在浏览器中预览（文件>在浏览器中预览页面），或者在Adobe Muse CC下选择预览模式查看。
字体形式是任何数字阅读设计的一个关键因素，从选择合适的字体为企业形象做一个独特的风格，到为一场音乐会的海报或者杂志封面做的设计。然而一旦读者的设计投入应用，那么再去手动更改单个字符费时又费力，因为单词过去一直被视为统一的整体，因此想迅速调整和修改单个字符几乎是难如登天。
最近， AI CC里的新触摸式创意工具工作，可以让字母作为单独的对象。想象一下，现在可以选择一个字母或者字符，一个单词，甚至一段话，改变他们的字体，大小，旋转并移动被选择的部分（在其他文字中间），还是简单又熟悉的四方盒图标，就像是里面装满了为读者们带来全新设计字体功能和乐趣的礼物。
而且，这还不是全部。该工具被称为触控式的一个原因就是它能够兼容触摸屏和直接接触的设备，包括Win8的触摸屏电脑，新帝24HD液晶数位屏，在AI CC里你不需要触摸设备来使用这项新功能，但如果拥有一个，它会使触摸式工具使用起来更直观更方便。
转变文本
图1展示了AI CC里的一个文本对象，这里使用了Trajan Pro 字体对其进行了简单的设计，数字8是一个单独的对象，而Tropical Treks是一个文本对象。
这里需要转变一些字符来创造一个关于8个户外冒险家的营销设计，在使用触摸式工具之前，不得不将文本创立一个外框或者将每个字母当做一个单独的文本对象。但是现在有了触摸式工具，就可以编辑或者转变这些字符好像他们是单个的对象，并且文字是鲜活的（可编辑的）。
首先选择触控式工具，会发现在工具栏或者字符面板里有一个字体工具选项或者通过使用快捷键Shift+F7。
接下来，这里会使用触摸式工具在单词Tropical选择字母A，使用范围框句柄，可以转变选择的字符。四角边框上的节点让读者可以按比例，水平或者垂直自由移动。边界框顶端的节点可以自由的旋转选中的部分。
如读者在图4中看到的那样，在旋转字母A后，让它后其余的字母保持在同一条水平线上，将字母L左移一些让它看起来适中。
如图5所示，使用触摸工具也可以移动或缩放其余的字母来达到一个整体的设计。
在图6中，可以看到关于“Terrific Treks”最后版本的变化，但仍旧保留了之前的变换外观。最好的部分是整个字段仍旧是鲜活的，这里还可以编辑或者改变内容。
增加复杂性
使用触摸工具，读者可以非常自如地实现文本从简单到复杂的转变，下面的示例开始使用的是Mesquite Std字体的logo。
使用触摸式工具，可以很轻松的转变这些字符和旋转这个单词。
接下来将添加一张木板照片在该文本下面和一些纹理在文本上一层。106页下方的图片显示了完成的最终标志。
用Adobe Mouse CC实现视差滚动效果
网络世界五彩缤纷，网页设计师通常需要尝试新方法来吸引读者眼球。如今，这就意味着设计师们要使用HTML5， CSS3和 JavaScript技术来达到意想不到的效果。视差滚动允许读者通过滚动鼠标实现不同的元素（如背景，图像，文本）在一个页面的不同方位以不同的速度移动，这样会提高读者阅读文章内容的积极性，也会让读者产生深度的遐想。举个例子，当读者在一个航空网站页面上向下滚动鼠标，会看到页面背景缓慢移动的云彩，然后一架飞机穿过天空中的云彩出现在读者的眼前，会让读者仿佛置身其中。了解视差滚动设计最好的办法就是看它的实践应用。以下是使用Adobe Mouse CC做的几个较好好网站页面的范例：Paul Surridge 网页设计师通过来回跳转的图文说明来介绍作者保罗·凯里奇小说的特点；Slick-allax 这个范例显示视差滚动设计可以编入一个商业网站中；Breathe 文字和图片在这个冥想为主题的站点上下左右来回穿插移动就是运用视差效果设计；Aaron Lawrence Design这种自我推销式的网站运用大量色彩移动组合来实现页面的变换。
接下来，本刊将向读者展示一些视差滚动设计的例子，并告诉读者何时（或者何时不使用）去使用这项技术，让读者尝试技术革新力量的影响力，并向读者展示如何在Adobe Mouse CC 里操作它。
何时使用视差滚动技术
出于尝试新鲜事物的缘故，设计者们可以使用一项新的技术。（当阴影效果技术引入到Adobe Design的时候，读者就可以看到傻瓜们到处使用这个技术。）但是在互联网领域，读者必须考虑的特别周全，因为读者体验关系到网站的发展，只是说读者可以使用视差滚动技术但并不意味着可以滥用这项技术。许多类型的网站受益于视差滚动效果。除了让网站有更多的互动，视差滚动还可以让读者在网站停留更长时间，让网站富有故事性，让想法变成行动，增加层次感和深度性。
视差滚动技术原理
视差滚动技术依赖于HTML5， CSS和 JavaScript。比如在一张被标记使用HTML5标签如
如果快速预览让读者停了下来，那么读者并不孤单，视差滚动技术可以更快更复杂这就是为什么它如此的令人振奋。Adobe Mouse CC 可以运用视差滚动技术到读者的网页。这意味着，读者可以实现视差滚动而不必再写一连串的代码。
制作属于自己的页面
如果读者想尝试使用这一技术，那就需要安装Adobe Mouse CC。如果没有，只需从Adobe创意云下载并安装免费的30天试用版软件。然后跟随本教程，下载样本文件（ZIP，146 KB），将其解压缩并保存到SourceSansParallaxType的文件夹。如果想看文件最终版本，在Adobe Mouse CC里打开文件SourceSanspro_final.muse的程序，或访问 SourceSansPro sample site 网站。
按照下面的步骤运用视差滚动技术到一张重复的背景图像当中：
1.打开Adobe Mouse CC，选择文件>打开网站。在SourceSansParallaxType文件夹导航到SourceSansPro_start.Mouse网站文件，点击打开。
2.在计划模式下，双击主页面缩略图以实现在设计模式下打开页面（见图2）。
3.点击控制面板中的浏览器链接，选择填充选项卡，单击选择背景图像图标旁边的图像字段（见图3）。导航到> IMG SourceSansParallaxType文件夹，选择Arrow.png的文件，然后单击打开。
4.在浏览器填充选项中，从配置菜单选择展开图和验证滚动效果可用。选择滚动选项卡并打开滚动移动选项（参见图4）。
在web浏览器中滚动移动设置来控制浏览器填充图像的运动相对于垂直滚动，读者可以同时管理水平和垂直运动，包括浏览器填充图像的移动速度。
顶部的两个选项控制背景图像的垂直运动，底部的两个选项控制背景图像的水平移动。
值为0表示当移动浏览器垂直滚动条时背景图像不移动，值为1表示选择的背景图像的移动方向（上，下，左，或右）会和浏览者移动滚动条保持相同的速度。
注意：在Adobe Muse CC里， 读者可以在页面使用视差滚动效果为背景填充内容或者元素，背景填充内容需要水平或者垂直拼贴，滚动运动效果只适用被拼贴图像的方向。
页面属性不能是 一个或者一组小部件。读者并不能将滚动效果定义为100%宽，固定项目，或者内置属性（比如图片粘贴在文本框里用来创建自动换行栏）
5.点击单选按钮旁边指向下方的箭头，改变垂直速度值设置为1（见图5）。现在向下的垂直运动将和垂直滚动保持同样的速度。水平移动值设置为0，这意味着它将不能水平移动。
6.点击任意位置关闭掉浏览器填充菜单然后选择视图>点击预览模式预览效果，在文档窗口垂直滚动。
7.选择查看>设计模式返回到A-Master页面。在控制面板中单击“浏览器填充链接，选择“填充”选项卡，单击选择背景图片图标旁边的图像字段并选择一个图像文件，导航到> IMG SourceSansParallaxType的文件夹。选择Absurdidad.png的文件，并单击“打开”（见图6）。 8.选择文件>保存网站，然后选择文件>关闭页面。
按照下面的步骤使用图像添加视差滚动效果设计到页面上：
1. 在计划模式下，双击主页缩略图来打开它，向下滚动，直到读者找到文本说明，“SITE CREATED WITH ADOBE MOUSE”（参见图7）。
2. 选择文件>放置在输入对话框中，导航到SourceSansParallaxType > Img文件夹。 选择MuseLogo. png文件，并单击打开。单击以图片放在文字为“SITE CREATED WITH ADOBE MUSE ”之上（参见图8）。
3. 使用选择工具，拖动图像到中心位置（见下一页图9），智能指引将帮助读者将图像与文本“ADOBE MUSE”左侧边缘保持在同一直线上。
4. 在选中的图片上，在控制面板里点击效果链接，然后在最右边点击滚动运动选项卡，打开滚动运动选项，改变关键位置值为31272 px（参见图10）。
注意T形句柄的处理，从顶部延伸到所选择的图像（见图10红色箭头所指位置）。T形句柄的顶点位置代表关键位置，即页面上该区域的元素将在滚动后自己定位位置。使用这个句柄来设置，将会发生的移动在T顶点的位置达到浏览器窗口顶部位置之前或者之后。
提示：在设计中读者也可以改变关键位置，通过拖动选项工具中的T形句柄来更直观地放置关键位置。
5. 在这一步中，停在移动前的关键区域，设定速度在运动发生在滚动发生之前，点击箭头旁边的单选按钮，设置垂直值为0。点击箭头旁边的单选按钮，点击后设置水平速度0.5（参见图11）。现在Adobe Muse图标将从左向右移动，当关键位置到达浏览器窗口的顶端，它会停留在它目前停留在页面上的位置。
6. 现在读者可以控制移动的方向和速度，这会发生在关键位置到达浏览器顶部之后。如前所料，在关键区域设置后读者就可以如此操作。点击箭头旁边的单选按钮，设置垂直滚动速度为1，设置水平滚动速度为0（参见图11）。
7. 点击任意地方关闭效果菜单，选择视图>预览模式预览效果。读者必须以向下滚动的方式直到在文件创建看到文本和标志。
8. 选择视图>设计模式返回到主页。
就是这样。现在读者们已经了解了在Adobe Muse CC里关于视差滚动效果页面设计的基础知识。并可以将它运用到自己的一些设计中去。
这只是开始
这些例子覆盖了视差滚动效果设计的许多关键概念。若想了解更多的内容，读者可以在SourceSansPro_final. Muse的主页选择不同的对象查看，在控制面板中点击效果链接查看滚动运动选项，在设置里进行简单的试验，看他们如何在滚动页面时影响对象移动。使用选择工具，选择文本“site created with ”然后单击效果链接。在效果选项，单击滚动运动按钮，在关键选项前的运动项，单击指向右方的箭头旁边的单选按钮，预览页面或者在浏览器中预览（文件>在浏览器中预览页面），或者在Adobe Muse CC下选择预览模式查看。
字体形式是任何数字阅读设计的一个关键因素，从选择合适的字体为企业形象做一个独特的风格，到为一场音乐会的海报或者杂志封面做的设计。然而一旦读者的设计投入应用，那么再去手动更改单个字符费时又费力，因为单词过去一直被视为统一的整体，因此想迅速调整和修改单个字符几乎是难如登天。
最近， AI CC里的新触摸式创意工具工作，可以让字母作为单独的对象。想象一下，现在可以选择一个字母或者字符，一个单词，甚至一段话，改变他们的字体，大小，旋转并移动被选择的部分（在其他文字中间），还是简单又熟悉的四方盒图标，就像是里面装满了为读者们带来全新设计字体功能和乐趣的礼物。
而且，这还不是全部。该工具被称为触控式的一个原因就是它能够兼容触摸屏和直接接触的设备，包括Win8的触摸屏电脑，新帝24HD液晶数位屏，在AI CC里你不需要触摸设备来使用这项新功能，但如果拥有一个，它会使触摸式工具使用起来更直观更方便。
转变文本
图1展示了AI CC里的一个文本对象，这里使用了Trajan Pro 字体对其进行了简单的设计，数字8是一个单独的对象，而Tropical Treks是一个文本对象。
这里需要转变一些字符来创造一个关于8个户外冒险家的营销设计，在使用触摸式工具之前，不得不将文本创立一个外框或者将每个字母当做一个单独的文本对象。但是现在有了触摸式工具，就可以编辑或者转变这些字符好像他们是单个的对象，并且文字是鲜活的（可编辑的）。
首先选择触控式工具，会发现在工具栏或者字符面板里有一个字体工具选项或者通过使用快捷键Shift+F7。
接下来，这里会使用触摸式工具在单词Tropical选择字母A，使用范围框句柄，可以转变选择的字符。四角边框上的节点让读者可以按比例，水平或者垂直自由移动。边界框顶端的节点可以自由的旋转选中的部分。
如读者在图4中看到的那样，在旋转字母A后，让它后其余的字母保持在同一条水平线上，将字母L左移一些让它看起来适中。
如图5所示，使用触摸工具也可以移动或缩放其余的字母来达到一个整体的设计。
在图6中，可以看到关于“Terrific Treks”最后版本的变化，但仍旧保留了之前的变换外观。最好的部分是整个字段仍旧是鲜活的，这里还可以编辑或者改变内容。
增加复杂性
使用触摸工具，读者可以非常自如地实现文本从简单到复杂的转变，下面的示例开始使用的是Mesquite Std字体的logo。
使用触摸式工具，可以很轻松的转变这些字符和旋转这个单词。
接下来将添加一张木板照片在该文本下面和一些纹理在文本上一层。106页下方的图片显示了完成的最终标志。