在Photoshop中制作CSS动画精灵

  • 知识需要:图形编辑,CSS,基本HTML
  • 需要:支持CSS3的浏览器(Safari,Chrome,Firefox,IE10 +),Photoshop或其他图像编辑器
  • 项目时间: 6个小时
  • 下载源文件

本文首次出现在.net杂志的第229期 - 全球最畅销的网页设计师和开发者杂志。

当网页设计师掌握新的CSS3功能时,网页设计已成为一个未知的前沿,许多新技术等待发现和开发。草案规范中最令人兴奋的方面之一是无需编写脚本即可进行动画制作。虽然这提供了大量的机会,但仍然有一个良好的老式预渲染图形的地方。实际上,减少页面加载时间的常用技术 - CSS精灵 - 可以回归到接近原始含义的东西,并用于创建复杂的翻书式动画。

如果您不熟悉该术语,精灵是指存储在单个外部文件中的一组图形。许多大型网站使用一个背景图片来加载所有图形,依靠背景位置CSS属性将每个图形放在正确的位置。精灵术语起源于8位游戏,并且指的是图形被加载并用于在游戏中呈现动画的方式。在本教程中,我们将使用与那些开创性游戏设计师相同的方法,创建一个复古风格的角色,并使用具有六个不同角色位置的精灵来动画他。

通过在不同位置之间翻转,我们将创造运动的印象并使我们的角色具有动感。最后,我们将他置于永久动画背景上,并进行适当的视差滚动。我们将使用我们的图像编辑器(我们使用Photoshop,但任何位图编辑器都可以)和CSS - 不需要编写脚本来完成所有这些工作。

1.透明度

在Photoshop或其他图像编辑器中创建文档。使它高于宽,以适合直立的角色;我们选择300px高,200px宽。确保您的文档具有透明背景 - 我们稍后需要在文字后面看到。

2.概述

勾勒出角色的基本轮廓,将每个身体部位分成不同的层。不要担心细节 - 先在纸上绘图,扫描图像并将其用作指南,或者只需从填充的椭圆形旋转开始形成基体即可。

3.首先

从头开始工作。我们在这里选择了一个忍者角色,所以黑色椭圆形就像角色的头部一样。使用套索工具绘制并填充肤色,添加眼缝。添加眼球,瞳孔和捕捉灯,使他们看起来活着。

老派

我们想要复古的感觉,所以不要过于担心完美的渐变和平滑过渡 - 你甚至可能想要选择铅笔工具并故意为你设计中的每个元素添加像素化效果。做你觉得最好的事情。

5.阴影

我们可以使用一些简单的阴影来使角色看起来更加3D。对于每个面部元素,使用吸管工具对源颜色进行采样;使用设置为“阴影的乘法”的画笔在顶部绘画,并设置为“高亮显示屏幕”。

6. 8位效果

要获得全开8位效果,请使用笔触设置为1px的图层样式勾勒每个元素的轮廓。确保将笔划设置为“正片叠底”,并在“图层样式”对话框中降低效果的不透明度,以使其不会过于强烈。

7.调整

添加一些额外的整体着色并继续调整,直到您对2D精灵内部生活的3D角色感到高兴。这个过程可能需要几个小时,所以不要灰心并坚持下去,直到找到有效的方法。

8.细节

添加最终细节,例如绑束带,耳朵和额外的眉毛阴影。确保定期放大和缩小以获得角色头部的不同视角。您必须定期查看100%才能感受到设计的最终外观。

9.身体部位

对每个body元素重复此过程。我们使用白色设置为屏幕来构建体阴影,并使用铅笔工具轻拍以创建像素化肌肉效果。这使得身体看起来太轻,但我们稍后会反驳。

10.肢体层

正确掌握角色至关重要。对于我们的忍者,右腿和手臂最靠近相机,左侧肢体位于身体后方。定位您的图层,以便当肢体在身体后面移动时,它们会被正确遮挡。立即获取它以避免头痛!

11.加入抛光剂

优化您的设计,确保所有单个元素协同工作并创建一个连贯的整体。一旦开始定位最终动画帧,对整体设计进行编辑将是一件麻烦事,因此在继续下一步之前,请确保您满意。

12.开始位置

将肢体,手和脚,身体和头部定位到步行动画的第一个位置。我们决定用左脚引导,所以右脚与右臂一起向后拉,左脚和手臂都向前。倾斜躯干以匹配。

13.组图层

选择构成正文的所有图层(不包括头部),然后对它们进行分组。命名此位置1.复制组,重命名复制位置2,并将第一组的不透明度降低到20%左右,这样就可以将起始帧与第二帧进行比较。

14.动议

改变头部,手臂和腿部的位置以表明运动。我们在六个帧中设置了一个完整的步骤,我们将向前和向后播放以创建一个完整的周期。因此,当我们到达第4位时,我们应该越过腿。

15.增加职位

复制并重新定位四次,直到您有六个不同的身体位置,每个位置在动画中显示不同的帧。您可能需要稍后返回并调整肢体位置以获得最佳效果,因此请保存文档!

16.出口巴布亚新几内亚

将六个不同的物体导出为透明的PNG,与头部一起。确保每帧移动头部一点 - 这将有助于销售动画!请记住,此动画将循环播放,因此每个帧的头部位置应该接近前一个。

17.安排框架

创建比主角色文档宽六倍的新文档。将六个帧导入并排列到这个单个图像中,直到您完成对齐为止。使用Photoshop的分布水平中心功能来实现这一点。

18.添加样式

打开开始文件,添加一组样式来定义忍者的宽度,高度和背景图像。我们在启动HTML文档中包含了第一个动画;您可能需要根据角色的尺寸调整值。调整设计和动画品味。

19.关键帧

你会在提供的代码中注意到我们有一组样式来分配基本的字符属性,以及一组主要字符样式声明使用的动画关键帧。这些间隔定位背景图像,因此我们得到了一个flipbook效果。

20.粗暴起来

默认情况下,浏览器将平滑地为值之间的background-position属性设置动画。我们不希望这样,所以我们在每次切换之前都创建了“保持关键帧”。这些设置使用比下一帧少1/1000%的设置,以避免闪烁和伪影。

21.地面工作

在Photoshop中,为背景和前景创建元素。我们使用了一些Illustrator符号在一个图像中创建了一个草地,在另一个图像中创建了大型植物,在第三个中创建了较小的植物,在第四个中创建了地球的横截面。这些必须是无缝图像。

22.动画

返回HTML和CSS。添加关键帧以将背景动画从0px 0px设置为0px -1200px。为每个地面元素创建样式,根据与相机的接近程度以不同的速度放置和应用关键帧。我们的目标是视差效应。

23.视差

早期视频游戏中使用的另一种暗示深度的技术,其工作原理是靠近相机的物体看起来移动速度比远离物体更快。以不同的速度添加和滚动我们的地面元素,我们可以创建视差并建议深度。

24.天空是极限

对背景天空重复此过程(您不需要为此设置动画),以及两层云 - 一层距离相机比另一层更近,以完成视差效果。添加HTML和CSS代码以将这些内容放入您的页面。

25.测试时间

彻底试用您的页面并调整时间以获得最佳效果。要特别注意忍者走过的草的速度 - 它需要匹配,以便草以适当的速度移动,使忍者的脚步看起来正确。

26.契约

添加最后的蓬勃发展,并以忍者头衔为游戏灵感主题点头。我们下载了一个免费的Ninja字体(包含在教程文件中),并在Illustrator中创建了一个带有漂亮3D效果的标题,以补充我们的其他艺术作品。创建CSS以将其导入您的页面。

27.生活

使用与角色动画相同的方法为title元素的比例和不透明度设置动画。将比例和不透明度设置为0到80%,然后将两个属性的比例调高为1(100%)。尝试适合的时间 - 在6到10秒之间适合我们!

28.接下来的步骤

你已经完成了由CSS3驱动的动画,但是你不必停在这里 - 你可以使用它:目标选择器或脚本将此动画转换为简单的平台游戏,或使用类似的动画方法创建简单的交互式视频图像,随着时间的推移巧妙地改变。尝试并尝试突破界限!



翻译字数超限