0
点赞
收藏
分享

微信扫一扫

注重细节!Photoshop打造Web2.0风格…


看到效果图,蛮以为一个小图标应该很容易就能搞定,没想到需要这么多步骤。细节,细节,还是细节!切记!OK,开始我们这次的教程。先上效果图:


注重细节!Photoshop打造Web2.0风格…_图层


图1

  老规矩,看到效果图:分析!分析!再分析!我们将怎么完成这个图标的制作呢?经观察得:

  一:背景制作(灰白色,加一条高光线)。这步应该比较简单。
  二:图标的雏形(关键地方,颜色的搭配漂亮,因为给你第一感觉就是色彩。高光,浮雕,影子等细节的制作,看上去很立体就是这些因素造成的啦!) 
  三:邮件图标的添加(这个跟第二步类似)
  四:文字的添加(关键点,文字排版,图层样式的设置。)

  这都是我自己主观的分析。嘿嘿,仅供参考。我觉得最关键的就是:色彩的搭配了,图标影调的分布!

  准备素材:​​字体下载​​

  第一步:

  新建一个文档200×200px。背景色:白。分辨率:72dpi。现在给按钮做辅助线,Ctrl+R显示辅助线,在尺寸区域里面按住鼠标左键,把拽辅助线拉下来。如下图:


注重细节!Photoshop打造Web2.0风格…_图层


图2

  按快捷键:Ctrl+Alt+C,打开调整画布大小的窗口。设置如下(画布扩大区域颜色的选则,窗口最下面的那个选项):


注重细节!Photoshop打造Web2.0风格…_图层


图3

  下面是效果图:


注重细节!Photoshop打造Web2.0风格…_图层


图4

  第二步:制作背景

  作者使用的是灰白色的渐变:#f2f2f2—#c5c5c5。


注重细节!Photoshop打造Web2.0风格…_图层


图5

  注意这步小技巧:作者在背景上新建一层空白图层,命名为“backlight”,使用小笔刷在背景中间和顶部分别画一个小光圈。


注重细节!Photoshop打造Web2.0风格…_图层


图6

  调整这层大小如下图,OK,我们的背景搞定!


注重细节!Photoshop打造Web2.0风格…_图层


图7

  第三步:

  新建一层,按U,选择圆角矩形工具,羽化值:10。如下图画,重命名为“button bg”。


注重细节!Photoshop打造Web2.0风格…_图层


图8


关键部分:图层样式的设置

  投影:


注重细节!Photoshop打造Web2.0风格…_图层


图9

  渐变叠加:


注重细节!Photoshop打造Web2.0风格…_图层


图10

  描边:


注重细节!Photoshop打造Web2.0风格…_图层


图11

  现在得到的效果:


注重细节!Photoshop打造Web2.0风格…_图层


图12

  第四步:

  关键是高光和阴影的制作。在按钮下面添加一层,使用矩形选取工具画个阴影:


注重细节!Photoshop打造Web2.0风格…_图层


图13

  重命名为:“shadow”。影子太生硬了,必须模糊一下。滤镜—高斯模糊—13。


注重细节!Photoshop打造Web2.0风格…_图层


图14

  按快捷键Ctrl+T调整阴影大小,位置,不透明度30%


注重细节!Photoshop打造Web2.0风格…_图层


图15

  在按钮图层上面,新添加一层并命名“Highlight”(高光)。设置图层混合模式为:叠加。选择白色笔刷,在按钮上部单击一下。如下图。


注重细节!Photoshop打造Web2.0风格…_图层


图16


效果还不是很满意,复制一层,混合模式改回 “正常”,按Ctrl+T改变大小和位置。如下图:


注重细节!Photoshop打造Web2.0风格…_图层


图17

  效果:

注重细节!Photoshop打造Web2.0风格…_图层


图18


​​http://pcedu.pconline.com.cn/sj/pm/photoshop/rm/1004/2094568.html​​



举报

相关推荐

0 条评论