利用PhotoShop制作超酷网站登录按钮_网页logo教程

查查发表于 2007-5-5 07:54:31

利用PhotoShop制作超酷网站登录按钮

效果图： 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112701407.jpg"> 首先利用钢笔工具绘制如下形状并用纯色填充。 图层 >> 图层样式 >> 渐变叠加，并按下图设置渐变条。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112710300.jpg">选择减淡工具，并将选择100像素的软笔刷在图形正中涂抹出如下立体效果。
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112713404.jpg">
选择加深工具，笔刷大小同上，涂抹图形底部。
按住Ctrl并点击图形层获得选区，选择 >> 修改 >> 收缩，收缩量2像素，反选，图像 >> 调整 >> 色阶，调整出高光边缘。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112715709.jpg">反选，向上移动选区。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112718362.jpg">图像 >> 调整 >> 色阶，得到如下效果。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112720169.jpg">同上，得到如下效果。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112722374.jpg"> 选择减淡工具，设置笔刷大小为30，涂抹图形边缘，得到发亮效果。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112723982.jpg">选择加深工具，继续加深图形下半部分。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112725206.jpg">现在在球体图层下面建立一个新图层，然后按CTRL单击球体图层载入选区，用变换选区命令将选择区扩大一些并填充一个单色。双击刚建立的用单色填充了的图层用以打开图层样式设置，选中渐变叠加样式作出一个从黑色到深灰色的垂直渐变。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112727174.jpg"> 在背景层上面建立一个新的图层，用椭圆选框工具从球体中心位置作出正圆选区在用黑色填充取消选择。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112729634.jpg">在用椭圆选框工具逐一选中并删除该层中不需要的部分。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112731338.jpg">现在回到球体下那个用渐变样式编辑了的图层，在它上面建立一个新的空白图层然后用链接将2者链接起来后按CTRL+E与起合并。（为什么要这么做？原因我前面已经讲过这里不在赘述）在用减淡工具对边缘进行高光部分的亮度处理。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112733917.jpg">现在选中背景图层上的用黑色填充的图层，双击打开其图层样式设置，设置渐变叠加样式：渐变编辑器中的设置为深灰-灰-深灰-灰-深灰。在在上面建立一个空图层链接后合并。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112735368.jpg">在用加深减淡工具加大局部对比，画笔大小50象素。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112738484.jpg">在保持此图层选择区是选中的情况下，执行选择-修改-收缩命令，收缩2个象素值；接着执行选择-反选，用图象-调整-色阶命令，将外部边缘的亮度值调的低一些。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112740235.jpg">现在在背景层上建立一个新图层，用多变形套锁工具作出和以下相类似图象。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112743629.jpg"> 在这个刚作好的图层上执行选择-修改命令修改2个象素。用色阶命令将选择区中的亮度值调的低些。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112745289.jpg"> 用加深工具对内部加深处理。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112748284.jpg">在用选择-变换选区命令将选择区缩小些，在用加深工具进行加深处理。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112750187.jpg">继续重复以上步骤，直到认为满意为止。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112753414.jpg"> 现在按CTRL+J把此图层复制出4个放置在图象中的合适位置。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112758248.jpg">在背景图层上建立一个新图层，在用钢笔工具作出线状的路径转换成选区后用深点的天蓝色填充，注意不要取消选择。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112805559.jpg">在保持选择情况下执行选择-修改收缩命令，收缩3个象素。对“线”内部的颜色用减淡工具进行处理到合适的亮度；在执行选择-反选命令对“线”的外部进行暗调处理。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112807777.jpg">在把线的这个图层也多复制几个合并后移动到图象中的合适位置。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112810709.jpg">
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112812892.jpg">现在来添加文字，在最顶部的图层上建立文字图层。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112815290.jpg">按CTRL+J把文字图层复制一份，执行编辑-变换-垂直翻转命令，移动到合适位置在设置图层混合模式为叠加 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112818466.jpg"> 现在把文字图层与其文字倒影层一起合并在用橡皮擦工具擦除多余的部分。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112821543.jpg"> 现在双击此图层打开图层样式设置做以下设定： 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112824285.jpg">以上就是这个教程的全部制作经过，到此全部结束，在来看看结果吧。 
<IMG alt="" src="http://www.cgfancy.com/Article/UploadFiles/200609/20060927112701407.jpg">
 <script language="JavaScript" src="http://www.16xx8.com/bbs/10.js"></script>

天际发表于 2007-8-22 15:28:29

不错，很不错，谢谢楼主的分享！！！

页: [1]

ps教程论坛's Archiver

利用PhotoShop制作超酷网站登录按钮