当前位置:主页 > 平面设计 > PS教程 > 制作实例 > 按钮制作

最新发布

铜质按钮
铜质按钮

铜质材质是一种反光材质,它具有明显的固有色,并且围绕光滑表面产生的反光区域颜色也会随其固有色的变化而产生改变。铜质按钮容易使人联想到机械、工业和工程技术,适合用在与这些内容相关的网页中。如图3-38所示,为本实例的完成效果。图3-38  本实例完成效果在制作铜质材质的按钮的过程中,需要注意的是,铜为带有固有色的金属,它在光的照射下,反光区域的颜色会随其固有色的变化而产生改变,找到这种材质的最显要特点,在其细节处加以强化和深入刻画,这样所绘制出的铜质材质按钮才更具生命力。在具体绘制的过程中使用“渐变”工具和添加“斜面和浮雕”图层样式效果的方法来创建立体效果,使用“色相/饱和度”命令来调整图像的颜色,特别要注意把握形体颜色的色相和对比关系,如图3-39所示,为本实例的制作流程。图3-39  本实例制作流程(1)运行Photoshop,执行“文件”→“新建”命令,打开“新建”对话框,参照图3-40所示设置对话框,创建一个“铜质按钮”的空白文档。图3-40  “新建”对话框(2)在“路径”调板中新建“路径 1”,使用工具箱中的“钢笔”工具,参照图3-41所示绘制路径。

5 次浏览
水晶材质按钮
水晶材质按钮

水晶给人以晶莹剔透的视觉印象,本实例制作的水晶材质的按钮,就要抓住水晶本身特殊的质感,模拟水晶的外观材质特征,做出光润透明的按钮效果。如图3-2所示,为本实例的完成效果。图3-2  本实例完成效果在本实例的完成效果中可以看到模拟水晶质感的按钮晶莹剔透,惹人喜爱。在绘制前应先来分析物体的色彩、明暗、光影变化和光泽变化,然后再通过绘制局部形状、设置颜色、添加透明效果的方法来制作。在绘制过程中要注意光线的统一,这样整幅画面不会出现太乱的情况。如图3-3所示,为本实例的制作流程。图3-3  本实例制作流程(1)启动Photoshop,执行“文件”→“新建”命令,参照图3-4所示对打开的“新建”对话框进行设置,完毕后单击“确定”按钮,创建一个名为“水晶材质按钮”的新文档。图3-4  设置“新建”对话框(2)设置前景色为天蓝色(R55、G162、B255),按下<Alt+Delete>键,使用前景色填充背景。接着单击“图层”调板底部的“创建新图层”按钮,新建“图层 1”。使用工具箱中的“钢笔”工具,在视图中绘制出如图3-5所示的路径。

6 次浏览
游戏网页按钮
游戏网页按钮

本实例制作的按钮特效,带有凝胶按钮的质感特点。按钮造型简洁大方,并且这些按钮在暗绿色背景的衬托下发出幽幽的光亮,成为画面中较为引人注目的部分。如图4-53所示,为本实例的完成效果。图4-53  本实例完成效果本实例的画面以暗绿色调为主,给人一种和谐统一的视觉印象,按钮发出幽幽的绿光,又给人一种诡异,但又充满未知的探索欲望。在制作按钮特效的过程中,应用图层样式效果,为图形设置立体效果和光影变化,然后进一步对按钮图像进行编辑和修饰,来加强这种光泽变化。文字的处理使之与按钮相互结合,成为一个整体,其中对文字的细节调整,打破了文字呆板的视觉效果,在统一中又有变化。如图4-54所示,为本实例的制作流程。图4-54  本实例制作流程(1)运行Photoshop,执行“文件”→“打开”命令,打开本书附带光盘\Chpater-01\“游戏背景.jpg”文件,如图4-55所示。图4-55  打开素材图像(2)选择工具箱中的“圆角矩形”工具,然后设置选项栏,接着在视图中绘制两个大小相同的圆角矩形路径,如图4-56所示。

4 次浏览
电子科技网页按钮
电子科技网页按钮

本实例的按钮形状被设计成电子屏幕的样式,用以体现电子科技的设计主题。画面效果科技感强烈,并且加强的空间透视关系使画面充满动感。如图4-385所示,为本实例的完成效果。图4-31  本实例完成效果在制作过程中,为了能够准确地表现出画面的透视关系,我们使用添加辅助线手段先来绘制出透视线,在透视线的基础上来制作图像,这样制作可以使画面的透视关系比较准确,避免画面出现凌乱,多个透视点的情况。然后结合使用“加深”工具、“画笔”工具、“色相/饱和度”命令、“亮度/对比度”命令等来绘制出图像的明暗关系。如图4-32所示,为本实例的制作流程。图4-32  本实例制作流程(1)运行Photoshop,执行“文件”→“新建”命令,打开“新建”对话框,参照图4-33所示设置对话框,创建一个新文档。图4-33  设置“新建”对话框(2)单击“图层”调板底部的“创建新图层”按钮,新建“图层 1”,设置前景色为黑色,选择工具箱中的“直线”工具,参照图4-34所示在视图中绘制出辅助线。

2 次浏览
广告公司网页按钮
广告公司网页按钮

广告公司网页按钮的造型简约、重点突出,色彩构成清新、淡雅,背景画面的构图元素也比较简洁。这样的画面效果,往往能在吸引人们注意的同时,快速、准确的传达广告信息。如图5-76所示,为本实例的完成效果。图5-76  本实例完成效果本实例的按钮效果具有强烈的金属光泽,时尚现代,主体物简洁明快,主要分为圆环的制作和圆球的制作。使用渐变颜色可以用来表现金属的立体效果及光影变化,通过使用极坐标命令将直线形图像变为圆环图像。在通道中结合滤镜命令制作出圆环图像上的光泽变化,使用此方法制作出的光泽效果真自然。通过设置图层样式的方法对圆环图像的细节部分进行进一步的调整。如图5-77所示,为本实例的制作流程。图5-77  本实例制作流程(1)运行Photoshop,执行“文件”→“打开”命令,打开本书附带光盘\Chapter-05\“背景06.jpg”文件,如图5-78所示。图5-78  打开背景素材(2)在“图层”调板中新建“图层 1”,选择工具箱中的“矩形选框”工具,在视图中绘制一个矩形选区。然后使用“渐变”工具,在选区内由上至下绘制线性渐变色,接着再将选区取消,如图5-79所示。

4 次浏览
科幻电影网页按钮
科幻电影网页按钮

本实例科幻电影网页按钮的造型设计比较独特,带有浓厚的科幻色彩,给人一种新奇、怪异的视觉印象,很容易引起人们对未知世界的无限遐想。如图5-34所示,为本实例的完成效果。图5-34  本实例完成效果在本实例的构图方式上将主体物的视觉元素延伸到页面边框以外,突破页面的局限,营造出空间的视觉张力,给人以更多的想象空间,而画面的主色调以黑、紫为主,这两种颜色都是营造神秘氛围的最好选择。在绘制的过程中主要使用路径工具来编辑路径形状,为图像设置图层样式,使图像具有立体效果和光影变化,最后对图像进行修饰调整。如图5-35所示,为本实例的制作流程。图5-35  本实例制作流程(1)运行Photoshop,执行“文件”→“打开”命令,打开本书附带光盘\Chpater-01\“时尚背景.jpg”文件,如图5-36所示。图5-36  素材图片(2)使用工具箱中的“椭圆”工具,配合<Shift>键,绘制一个正圆路径,然后使用“添加锚点”工具,在路径上添加锚点,接着使用“直接选择”工具,对路径形状进行调整,如图5-37所示。

6 次浏览
恐怖小说网页按钮
恐怖小说网页按钮

恐怖小说网页的按钮制作,要能从按钮的形状和样式上体现恐怖小说网页的特点,能够配合网页信息营造出一种恐怖的视觉效果。如图5-2所示,为本实例的完成效果。图5-2  本实例完成效果本实例的按钮最后效果给人一种恐怖的视觉印象,其中按钮上的纹理图像是体现这种效果的最重要因素。在绘制过程中采用应用图层样式和绘制图像相结合的方式,创建的按钮的立体效果。此外按钮的上的纹理图像,是综合应用多种滤镜效果创建的,并调整图层的混合模式来加强这种纹理的表现。如图5-3所示,为本实例的制作流程。图5-3  本实例制作流程(1)运行Photoshop,执行“文件”→“打开”命令,打开本书附带光盘\Chapter-05\“背景05.jpg”文件,如图5-4所示。图5-4  打开背景素材(2)结合使用工具箱中的“钢笔”工具、“矩形”工具、“圆角矩形”工具和“椭圆”工具,参照图5-5所示,将图像的各部分组成路径绘制出来。

4 次浏览
珠宝饰品网页按钮
珠宝饰品网页按钮

本实例根据珠宝饰品网页的内容特点,将按钮样式制作成逼真的钻石按钮,使得所要传达的信息更加直观。在璀璨夺目的钻石按钮的衬托下,整幅画面更显得光艳、亮丽。如图6-2所示,为本实例的完成效果。图6-2  本实例完成效果本实例的按钮以钻石为原型,通过钻石图像和其他图像的完美结合使画面的效果华丽夺目。由于钻石样式按钮特有的切割方式,材质特点,制作起来较为复杂,因此在绘制前应认真的观察和分析,讲究绘制的方法,重点对钻石内部的纹理变化、以及钻石璀璨的光泽变化效果进行绘制。在绘制过程中通过将滤镜工具和绘图工具等相结合的方法来表现钻石丰富的光影效果。如图6-3所示,为本实例的制作流程。图6-3  本实例制作流程(1)运行Photoshop,执行“文件”→“新建”命令,打开“新建”对话框,参照图6-4所示设置对话框,创建一个名为“珠宝饰品网页按钮”的空白文档。图6-4  “新建”对话框(2)执行“文件”→“打开”命令,打开本书附带光盘\Chapter-06\“背景图像.jpg”文件,使用“移动”工具,将背景图像拖移到“珠宝饰品网页按钮”文档中,生成“图层 1”,并调整背景图像的位置,如图6-5所示。

5 次浏览
玻璃试管
玻璃试管

效果预览 设置渐变,然后拖选出一个矩形选区,新建一个图层,并使用反射渐变作出左图所示图像拖选另一个矩形选区,并用中等灰色填充,如左图所示利用第一步技巧来做其余部分复制当前层,然后选择edit/transform/flip vertically菜单命令,分别放置在顶部和底部, 接着选择Filter/sharpen/unsharp mask 使它们突出一点拖选出一个矩形选框,新建一个图层,置于底下,然后再次填充。

6 次浏览
导航按钮制作
导航按钮制作

第1步:新建一300×56背景为黄色的文档,新建层Layer1,绘制图形并填充白色如图: 第2步:将上图所选区域在通道里快照保存为Alpha1通道,然后执行Select―Modify-Contract(选择―修改―收缩)命令缩小所选区域3 Pixels如图:第3步:新建层Layer2,按Ctrl+Shift+I键反选区域,用黑色填充所选区域如图: 第4步:在Layer2,按Ctrl+A键选择全部, 按Ctrl+X键剪切所选(这将清空Layer2),回到Layer1加载保存的Alpha1通道,按Ctrl+Shift+V键将剪切的图形与Layer1的图形合并新建一层,撤销所有选择,结果如图:第5步:对新建层执行Filter―Blur―Gaussian Blur(滤镜―模糊―高斯模糊)命令,参数设置3.5Pixels,结果如图:第6步:再加上嵌入线条、文字如图:

7 次浏览
共计71条记录 上一页 1 2 3 4 5 6 7 8 下一页