Photoshop制作苹果语音助理Siri图标动画教程.doc

免费素材 xs1Photoshop制作苹果语音助理Siri图标动画教程小图标，大智慧 乔布斯特意为siri图标注册了设计专利。本教程详细讲解了矢量形状工具结合蒙版的使用和技巧，这是在制作图标时经常要用到的。为让大家能看到更多的细节，我把图标做的很大很大 ：)思缘论坛会员Aman版权所有，转载问Aman程序: Adobe Photoshop CS6 iPhone 4s语音助理Siri图标 下载难度:中级预计完成时间: 60 分钟最终效果图以下是动画效果高清效果图第一步 新建文档按ctrl + N，新建一个文档，大小 1024x1024第二步 绘制大圆1、选择椭圆工具(U)，绘制一个900x900像素的大圆，并将其居中显示;2、双击大圆打开图层样式，选择渐变叠加，描边 参数如下图第三步 绘制中圆1、复制图层大圆，命名为中圆，设置形状的填充色为 #292929， 按ctrl+T将它大小缩小为 836x836 像素2、双击中圆打开图层样式，去掉渐变叠加和描边，选择斜面浮雕 内阴影，参数如下图第四步 绘制小圆1、复制图层大圆，命名为小圆，按ctrl+T将它大小缩小为 778x778 像素2、双击小圆打开图层样式，保持渐变叠加不变，去掉描边，然后添加斜面浮雕 投影样式，参数如下图第五步 添加金属质感的杂色1、点击图层面板下方的新建图层按钮，新建一个图层，命名为金属杂色;然后按住ctrl键，点击大圆缩略图获得大圆选区;然后填充颜色 #6666662、添加杂色，点击滤镜 -> 杂色 -> 添加杂色，输入数值 30，将图层不透明度改 8%，具体参数如下图所示第六步 添加金属质感的纹路这一步要用Adobe illustrator软件来制作金属纹路，很简单的，不会AI的同学可以按教程一下下点，当然你也可以跳过这一步;还可以点击这里下载金属纹路.ai1、打开AI，新建一个文档 大小 1024x1024;选择椭圆工具(L)，绘制一个900x900像素的圆;在外观面板中设置填充色为空，描边为黑色，大小0.25pt2、按ctrl+C，再ctrl+F，就复制了一个圆圈;然后将圆圈缩小到 32x32像素3、同时选择两个圆圈，点击对象->混合->混合选项，在弹出的对话框中选择指定步数，输了值130，然后点击确定按钮4、继续点击对象->混合->建立或按快捷键 alt+ctrl+B，此时就建立等间距的环形纹理，就像不锈钢器具上的纹理ok，金属纹路做好了，很容易的，把它拖到ps中吧第七步 调整金属纹理区域1、把上一步的金属纹路拖到ps中，命名为金属纹路，并将图层不透明度设为 25%2、选择图层金属杂色和金属纹路，按ctrl+G 编组，并命名为纹理3、接下来要用蒙版把不需要纹理的区域遮盖掉(即图中黑色圆环区域);首先我们先要获得圆环的选区，按住ctrl键，点击中圆，再同时按住ctrl+alt键，点击小圆，则获取到圆环选区4、选择选区工具(M)，右键点击圆环选区，选择选择反向，然后点击图层面板下方的添加图层蒙版按钮这一步文字说明比较多，是为了让初学能够明白，操作很简单用几个快捷键就完成;第八步 创建麦克风架子形状这一步要拉出参考线，才能精确绘制形状1、选择椭圆工具(U)，绘制一个320x320像素的大圆;2、选择椭圆工具(U)，再选择选项栏中的减去顶层形状，绘制一个258x258的圆;这样就绘制出一个圆环了3、选择矩形工具(U)，再选择选项栏中的减去顶层形状，任意大小，目的是减去上半部的圆环4、选择矩形工具(U)，继续绘制两个左右方形， 大小为 31x105像素，用相同方法绘制剩余的形状5、将最后的形成的形状命名为架子第九步 架子的样式1、将架子的形状填充色改为 #20202c2、双击图层架子，设置斜面和浮雕，内阴影样式，参数如下图所示第十步 麦克风的外形接下来我们要制作siri核心部分麦克风1、选择圆角矩形工具(U)，绘制一个大小190x410像素，半径100像素的圆角矩形，填充颜色为 #20202c，并命名为麦克风外形2、双击图层，添加斜面和浮雕，描边样式，参数如下图第十一步 麦克风的内形1、选择圆角矩形工具(U)，绘制一个大小166x386像素，半径100像素的圆角矩形，填充颜色为 #1B1227，并命名为麦克风内形2、双击图层，添加斜面和浮雕，外发光样式，参数如下图第十二步 麦克风的网洞1、选择椭圆工具(U)，绘制一个20x20像素的圆形，颜色填充为#000000， 命名为网洞，并添加斜面和浮雕样式，参数如下2、右键点击网洞图层，将它转换成智能对象;然后按ctrl+G编组，命名为麦克风网洞;3、复制多个网洞将它们均匀的分布在麦克风内形中第十三步 录音状态-光点1、选择椭圆工具(U)，绘制一个15x15像素的圆形，颜色填充为#ffffff， 命名为光点，并转换为智能对象2、复制多个光点"将它们均匀的分布网洞上;光点大小可以做细微调整;按ctrl+G将这些光点编组，命名为光点集3、选择所有光点将它们转换智能滤镜 滤镜 -> 转换为智能滤镜，然后点击滤镜 -> 模糊 -> 高斯模糊，输入值2.54、继续添加外发光图层样式，参数如下第十四步 录音状态-变色1、复制麦克风内形，命名为录音状态-变色，清除图层样式，将形状填充改为渐变,并设置描边属性，选项栏的设置如下，非cs6版本的同学可以跳过描边设置2、选择椭圆工具(U)，绘制一个圆在录音状态-变色的上方，命名为强光;将形状填充色为渐变，径向渐变，颜色从白到透明，并图层混合模式改为滤色;3、按住alt键，点击录音状态-变色与强光图层之间第十五步 添加蒙版，处理细节1、分别在录音状态-变色，麦克风网洞，光点集添加蒙版2、用画笔工具，颜色 #000000 ，在分别在蒙版上涂抹，涂抹位置在下图中标示考验你耐心的时候到了，图标品质在于你对细节的处理!第十六步 添加高光面1、复制"麦克风内形"，命名为"高光面"，按ctrl+shift+将图层顺序移到最顶层;并清除图层样式2、将形状填充色改为白色 #ffffff,把不透明度改为 43%3、用钢笔工具(P)，在高光面上添加节点和删除节点，如图所示4、双击网洞智能对象，将斜面和浮雕中的阴影模式的不透明度为 50%第十七步 制作光圈1、点击图层面板下方的创建新组按钮，建立一个编组，命名为光圈，并在这个编组中新建一个图层，命名为光圈外2、按住ctrl键，点击图层纹理上的蒙版，获得选区，然后选择选区工具(M)，右键点击选择选择反向，然后填充颜色 #ac33d03、双击图层光圈外，添加外发光样式4、新建一个图层，命名为光圈内，按住ctrl键，点击光圈外获得选区;然后填充白色 #ffffff;接着双击图层添加内发光样式，参数如图所示5、在新建一个图层，命名为光圈高光，填充白色，添加外发光样式第十八步 光圈细节处理1、分别在图层光圈外，光圈内，光圈高光上添加蒙版，用画笔工具(B)，黑色 涂抹细节，涂抹位置如下图所示2、新建一个图层，命名为光点，图层不透明度 85%，用画笔工具(B) 颜色#ffffff 硬度0%，在光圈的起始位置点击。大功告成，Siri图标做好了，工具很简单，效果不简单：) 接下来我们来制作siri图标的动画部分。siri动画效果 光圈转动第十九步 调整和合并图层1、除光圈编组外，将其他图层编为一组，命名为siri2、隐藏背景和siri，选择光圈，按ctrl+alt+shift+E，然后把盖印后的图层命名为运动光圈3、新建一个图层，命名为同心圆，按住ctrl键，点击大圆，获得选区，然后填充白色;然后将图层不透明度1%4、同时选择同心圆和运动光圈，按ctrl+E 合并图层，然后将它转换成智能对象5、复制编组siri，按ctrl+E 合并图层提示：同心圆的目的是让光圈用大圆同心转动，光圈转动就不会偏移了，这个一步很重要第二十步 在时间轴上做光圈转动1、cs6版本的同学，可以在窗口 -> 时间轴中打开面板;然后点击创建视频时间轴2、将时间刻度上的结束手柄拖到02：00f位置3、在时间轴上，点击运动光圈的"变换"按钮，设置起始位置4、在时间轴上，拖到时间手柄到01:00,然后点击"变换"按钮;接着按ctrl+T，将光圈转动160°5、在时间轴上，拖到时间手柄到01:28,然后点击"变换"按钮;接着按ctrl+T，将光圈转动到-20°6、最后按ctrl+alt+shift+S，导出动画gif，在弹出对话框中的动画循环选项为永远最终效果本教程到这里结束了，耐心的按教程做，相信你会有收获的 ：)25个你可能不知道的photoshop快捷键在阅读本教程前建议您安装Photoshop CS5，并且打开软件随时验证，还要在Photoshop首选项中启用OpenGL绘图。因为本文的许多快捷键仅仅存在于photoshop CS5。我相信很多设计师都有过目不忘的好记性，但看完再用，终究比不上边学边用，同时还可以验证本文中的快捷键是否正确。因为能力有限，错误之处还请大家指点，可随意转载,无需注明出处.以下为翻译正文：本文中列举了很多有用的Photoshop快捷键，使用这些快捷键可以加快您的工作流程。有一部分快捷键人们很少注意到，而另一些则被普遍使用，还有一部分仅仅存在于Photoshop cs5中。希望本文能对大家有所助益。1.拖动以缩放按下Ctrl+空格+鼠标单击并向左或向右拖动(Mac下为Command+空格+鼠标单击)，向左为缩小，向右为放大，这是一个仅使用一个快捷键就能快速对图像进行缩放的方法(该快捷键仅存在于Photoshop CS5，并且要启用OpenGL绘图。)注：在其他的Photoshop版本中，按下空格键+Ctrl键的同时在画布上框选一个区域，就可以快速放大该区域。2.HUD拾色器Alt+Shift+右击(windows)或者Control+Option+Command+单击(Mac)，一个漂亮的带有色轮的拾色器就出现了。(该快捷键同样仅存在于Photoshop CS5，并且要启用OpenGL绘图。使用选区工具时该快捷键不可用)注：你可以在编辑-首选项-常规对话框中设置HUD拾色器的样式。3.鸟瞰视图在把一张图片放大了很多倍在当前屏幕只能看到图片的局部的情况下，按下H键并单击画布可以快速的把图片按屏幕大小缩放以预览全局，此时不要放开鼠标，在手形光标的下面有一个黑色小框，将光标移动到你要在图片上放大的区域，此时放开鼠标，当前区域就被放大了。当您在调整一幅较大的图片中的很小的局部时，该快捷键会非常有用。注：该快捷键同样仅存在于Photoshop CS5中，也需要启用Open GL绘图。4.画笔尺寸和硬度Ctrl+Alt+鼠标右击(Windows)或者Control+Option+单击(Mac)，此时不要放开鼠标，向左/右拖动鼠标以缩小/放大画笔尺寸，向上/下拖动鼠标以增加/减少画笔的硬度。在Photoshop CS5中尺寸和硬度均可以调整，而在CS4中只能调整画笔的尺寸注：该快捷键同样需要启用Open GL绘图。5.画直线在拖动鼠标的同时按下Shift键，适用于绝大部分的绘图工具。(这个很多人都知道的)6.移动工具按下Ctrl键可以将当前工具临时切换为移动工具。7.同时缩放多个窗口的内容按Shift+Ctrl+空格(Mac环境下为Shift+Command+空格)的同时单击鼠标以同时放大多个窗口的内容，按下Shift+Alt+空格(Mac环境下为shift+Option+空格)的同时单击鼠标则是同时缩小多个窗口的内容。8.隐藏调板按下Tab键可以快速隐藏界面中的所有调板，再次按下Tab键就可重新显示调板。9.在MiniBridge调板中全屏浏览文件先点击窗口-扩展功能-MiniBridge，打开MiniBridge调板，选择一个包含很多图片的文件夹，在调板中点选一个文档，按下空格的同时按方向键，就可以在全屏的视图下浏览文档，该快捷键同样适用于Bridge。注：在Photoshop CS5中集成了MiniBridge调板。10.文本尺寸选取要修改尺寸的文本，按下Ctrl+Shift+,(或.)以减小(或增大)文本尺寸。Mac下的快捷键为Command+Shift+,(或.)11.将文本设置为全部大写选取文本，按下ctrl+shift+K。Mac下的快捷键为Command+Shift+K。12.字间距使用文本工具将光标放置在要调整间距的文字之间，按下Alt+左右方向键(Mac下为Option+左右方向键)以减小或增大文字的间距，每按一次将使文字间距减小或增大20个数值。而按下Ctrl+Alt+左右方向键则可以使文字间距减小或增大100个数值。(Mac下为Command+Option+左右方向键)13.行间距选取多行文本，按下Alt+上下方向键以减小或增大行距。Mac下的快捷键为Option+上下方向键。14.基线偏移选取文本，按下Shift+Alt+上下方向键以上下移动基线，Mac下的快捷键为Shift+Option+上下方向键。15.填充Ctrl+Backspace(Mac下为Command+Backspace)填充背景色，Alt+Backspace(Mac下为Option+Backspace)填充前景色。Shife+Backspace，打开填充选项。该快捷键同样可以快速修改文本对象或矢量形状的颜色。16.重置对话框打开一个对话框后，譬如曲线或色阶，按下Alt键(Mac下为Option)的同时点击取消按钮就可以重置对话框，比之于点击取消之后重新打开对话框可以大大节省时间和精力。17.不透明度和填充点选一个图层之后按下数字键可以快速调整被选图层的透明度，Shift+数字键可以快速调整图层的填充不透明度，譬如1代表10%，25代表25%，(在Photoshop cs5中还可以同时调整多个图层的不透明度和填充不透明度)若您选择的是绘画工具，按下数字键或Shift+数字键则可以调整绘图工具的不透明度或填充不透明度。18.反相Ctrl+I(Mac下为Command+I)可以快速地给图层或蒙版执行反相操作。19.切换