PS绘制一个简洁现代的web按钮

10/11/2015来源:Photoshop教程人气:2088

  本教程在photoshop中用简洁快速的方法制作了一个灵活的、流行的web按钮,并让大家对PS中的颜色,渐变色,图案等基本操作进行了更深层次地掌握。希望对设计者们有所帮助。

  预览

PS绘制一个简洁现代的web按钮 三联

  第1步:创建Photoshop文档

  该按钮大小(宽x长)170像素x50像素。我们的画布大一点,比如设为600像素x600像素

Create the Photoshop Document

  第2步:创建基本形状

  用圆角矩形创建一个圆角半径为5像素,大小为170像素x50像素的形状。

Create the Photoshop Document

  第3步:为基本形状应用图层样式

  按钮的外观主要取决于图层样式,该方式灵活性高,方便日后对按钮进行修改,比如说修改颜色等等。双击图层面板上的基本形状图层即可打开图层样式窗口。

Give the Base Shape a Layer Style

  该形状将运用到两种图层效果:渐变叠加和描边。

  渐变叠加

  色标#1-颜色:#2877ac,位置:0%

  颜色#1中点百分比-位置:40%

  色标#2-颜色: #87bfe6,位置:95%

  颜色#2中点百分比-位置:95%

  色标#3-颜色: #c2def1,位置:100%


Gradient Overlay

  描边

  描边颜色使用的是渐变叠加中使用过的深蓝色(#2877ac),这会使按钮的底部呈现出漂亮的效果。

  第4步:为按钮创建对角线图案

  为按钮创建一个对角线图案。在PS中的图案中创建一个4像素x4像素的文档,新建文档的快捷键为crtl+N。

Giving the Button a Diagonal Line Pattern

  使用缩放工具(Zoom Tool)放大(如此小的文档不放大很难看清)。创建一个新图层并删掉默认的白色背景图层。

Giving the Button a Diagonal Line Pattern

  在工具面板中找到铅笔工具(Pencil Tool),长按住Shift键,从画布左上角到右下角的方向画一条白色对角线,这样画出来的对角线非常标准。

Giving the Button a Diagonal Line Pattern

  进入编辑>定义图案,将对角线保存成图案。

  回到主文档。找到图层面板,按住Ctrl键,鼠标左键点击基本形状图层中的矢量蒙版缩略图,载入按钮形状选区(选区就是也可以进入选择>载入选区)。

  在基本图形上层,为对角线图案创建一个新图层。确保矩形选区处于载入状态。用之前制作的图案填充所选区域,具体操作步骤:进入编辑(Edit)>填充(Fill),在自定图案(Custom Pattern)旁的下拉菜单中选择之前制作好的图案。

Giving the Button a Diagonal Line Pattern

  为了不遮住描边样式和按钮顶部的淡淡的水平高光,我们要把对角线图案的边缘裁掉2像素。具体步骤:进入选择(select)>修改(Modify)>收缩(Contract),搜索量(Contract By):2像素。反选选区(选择》反向),一定要对对角线图层进行操作,然后按下键盘上的Delete键删掉所不需要的区域(译者注:反选即是保留了所需要的部分,将要裁掉的2像素区域选出来,然后删掉)。

  为了让线条看起来精细,我们为对角线图案图层应用柔光(Soft Light)的图层样式,并降低该图层的不透明度到20%。

  第5步:添加文本

  使用横排文字工具(Horizontal Type Tool )键入“Buy Now”文本,字体选用 MuSEO Slab 500,大小24pt,颜色为白色(#ffffff)。

Add the Text

  在图层面板,双击文本图层打开图层样式窗口,为该图层添加投影,投影颜色为深蓝色(#2877ac)。

Add the Text

  第6步:添加箭头标记

  为了让按钮呈现出动态效果(表示前进或跳转到Buy Now页面),我们为其添加一个简单的图标。找到自定义图形工具(Custom Shape Tool),在选项栏中的形状下拉菜单中找到Arrow2(下图所示)这个箭头图案、

Add a Left Arrow

  在按钮右边画出这个形状,大小为13像素x13像素,与Buy Now文本中的小写字母等高。

Add a Left Arrow

  用移动工具进行适当的移动,直到文本和图标在按钮中居中即可。

Add a Left Arrow

  第7步:制作按钮的悬停效果

  按钮制作完成了。但是还要接着制作按钮的悬停效果(比如说:用户将鼠标放在按钮上方时,按钮呈现的效果)。

  除了背景图层外,将选择的图层拖放到名为Normal的组内。快捷键:Ctrl+G或选择图层>创建组。

Create the Hover State

  复制Normal组的内容,易名为Hover,将Hover组内所有的内容拖放到原始按钮的下方。

Create the Hover State

  双击Hover的基本形状图层副本打开图层样式窗口,将按钮的渐变效果反向。可以通过渐变叠加中的反向选项实现。这里我选择使用手动微调色标以达到更好的效果。

  色标#1-颜色: #87bfe6,位置: 0%

  颜色#1中点百分比-位置:40%

  色标#2-颜色: #2877a ,位置: 95%

  颜色#2中点百分比-位置:40%

  色标#3-颜色: #4c9fd7 ,位置: 100%

Create the Hover State
Create the Hover State

  第8步:裁剪并保存

  用矩形选取工具(Rectangular Marquee Tool)圈住两个按钮创建一个选区(下图所示);该选区的大小必须为170像素x100像素,因为稍后的CSS中会用到这个。这就是我们所说的CSS精灵。感兴趣可以去看看我的朋友Chris Coyie在CSS精灵上的教程。

Cropping and Saving

  一旦选中之后,进入图像(Image)>裁剪(Crop)

  隐藏背景图层。

  进入文件(File)>存储为Web和设备所用格式(Save for Web & Devices),勾选上透明度,选择PNG-8,然后以web_button.png的文件名保存在放置HTML文档同一个文件夹或目录当中。

Cropping and Saving

  第9步:HTML

  在存放web button的同一个文件夹或目录中,创建一个名为web_button的HTML文档。

HTML

  在源代码编辑器中打开HTML文档。(有些编辑器是操作系统默认的,如微软的Notepad程序)

  如下图的HTML文档的代码所示,为Buy Now创建一个超链接。

  在浏览器中预览HTML文档,看起来很枯燥。

第10步:CSS

我们换掉枯燥的文字链接,改用刚刚制作好的图片作为链接。

注意:外部样式表(external style sheet)是体验CSS最佳的方式。但是本教程选用内部样式,因为一个元素使用外部样式太小题大作了。

红线部分是解释CSS的工作方式,请仔细阅读。

打开浏览器预览。多关注CSS伪类(CSS pseudo-class ),其本身就具有动态表现效果。在键盘上反复地按住Tab键操作按钮,将鼠标悬停在按钮上,观察它的变化是否实现了预期的悬停效果。

文件下载

slick_modern_web_button (Zip, 0.03 MB)(jaysming)