首页 > 范文大全

PS制作一个网页水晶图标

时间：2023年07月09日

来源：哈密瓜精油a

编辑：本站小编

收藏本文

下载本文

下面是小编为大家整理的PS制作一个网页水晶图标，本文共9篇，仅供参考，大家一起来看看吧。本文原稿由网友“哈密瓜精油a”提供。

篇1：PS制作一个网页水晶图标

这篇教程教的朋友们用PS制作一个网页水晶图标，教程制作的图标很漂亮，转发过来和的朋友们一起分享，先看看最终的效果图：

FEVTE编注：更多PS教程讨论交流和PS作品请到论坛PS交流区，地址：bbs.fevte.com/forum-51-1.html

在这个教程里，我们将学习如何制作一个水晶般的Web2.0徽章，制作过程主要先制作出徽章的形状，然后使用图层样式和图层混合模式制作出光泽效果。

具体的制作步骤如下：

1、运行你的photoshop创建一个新文档，在这个教程里，我使用了400 ×400PX尺寸的大小，然后填充淡淡蓝色和一些渐变效果，并添加了一些简单的扫描线，如图所示。

2、在photoshop工具箱中选择“多边形工具”，如图所示。

在顶部的属性栏中单击“填充像素”按钮

打开“多边形选项”对话框，选择“星形”，缩进边依据为“25%”，如图所示。

然后设置你喜欢的颜色，新建一个图层，然后设置好的多边形工具拖画出一个星形的徽章图案，如图所示。在教程里我使用了颜色# 4fb2ea。

3、选择“图层―图层样式”，分别设置外发光、内发光、渐变叠加这3个图层样式，如图所示，

效果如图所示。

4、创建一个新图层，然后按着Ctrl键，单击图层面板中星形图层的缩略图层载入选区，如图所示。

在菜单栏中执行“选择―修改―收缩”命令，输入你认为合适的像素，效果如图所示。

在新图层中的选区中填充白色，接着选择“椭圆选框工具”，然后在键盘的方向键按下左箭头和下箭头一次，最后按Delete键删除，效果如图所示。

设置图层的混合模式为叠加，降低不透明度约70%左右。创建一个新图层，然后再次载入星形选区，填充一白色到透明的渐变效果，效果如图所示。

使用多边形套索工具选择右下角部分，然后删除，如图所示。

设置图层的混合模式为柔光，不透明度60%左右，如图所示。

5、最后使用文字工具输入你文字，你还可以为文字图层添加一个投影图层样式，这样就大功告成了。Photoshop教程完毕。

FEVTE编注：更多PS教程讨论交流和PS作品请到论坛PS交流区，地址：bbs.fevte.com/forum-51-1.html

篇2：PS制作水晶风格博士帽图标

本教程详细介绍透明水晶风格博士帽图标的制作方法，制作的效果非常逼真，细节也处理得相当不错。不愧为国外大师的作品。

最终效果

第一步首先创建一个新文档，背景色选用浅灰色(#d6d6d6)。

第二步让我们用形状工具（矩形）来制作整个图标的基础。颜色现在来说无所谓，因为我们现在只是用它来做为标准。

第三步用变形工具（Ctrl T）将我们创建这个形状旋转九十度，然后减小它的高度

第四步现在我们需要设置这个形状的中点，使用Ctrl R打开标尺，按照下图设置你的辅助线。

第五步现在将刚才的形状复制一层，并将复制后的图形向上移动使复制后得到的形状的下端对齐原来的形状的上端，然后再在复制后的形状的顶端添加辅助线。然后你就可以把复制的形状删除掉。

第六步现在使用钢笔工具创建菱形的左侧，使用橙色（#FEB624）填充。

第七步现在使用第六步的方法来创建菱形的右半部分，但是现在填充的颜色改为更暗一点的橙色（#E49E11）。

第八步现在移动蓝色的图层到所有图层的上部。然后移动形状的位置，像我那样。然后使用变形工具将它变得大一点。

第九步这个形状将是整个帽子的顶部。将它命名为Top part并且使用较为亮的橙色（#FFD931）填充。然后复制一层。

第十步向Top part 的复制图层命名为border，使用（#EB14F00）填充，现在移动Top part图层到border图层的上面。

第十一步选中border图层，现在按一下“向下键”，将使这个形状向下移动一个像素。接下来按住“Alt键”的同时按“向下键”四次，这步操作将会复制border图层四次。

第十二步现在合并所有的border图层，现在你可以关闭辅助线了，因为我们已经不需要它们了。到“视图〉显示〉参考线”，设置它们不显示。

第十三步帽子的形状画完了，现在我们需要让它看起来更漂亮一点，

我们从最上面开始。选择Top part图层，然后在所有的图层上面创建一个新图层。为前景选择橙色。在图层浮动栏里面选择Top part，按住Ctrl点击，形成选区。在刚创建的图层上使用渐变工具做一个垂直填充。

第十四步现在我们来制作边缘的高光反射。我们使用钢笔工具来完成它，具体你可以看下面的示意图，然后将图层的透明度改为30%。

第十五步接下来我们要修改菱形的右半部分，首先使用十三步的方法形成菱形右半部分的选区，创建一个新图层，使用渐变工具做一个从左到右的渐变填充（#E37A05）。

第十六步菱形的左侧我们将使用一个不同的方法，边缘使用高光反射。同样30%的透明度，具体参看示意图。

第十七步现在我们需要给左半部分添加一些光照。同样创建新图层，Ctrl点击，渐变填充，将图层的叠加效果给魏叠加。

第十八步接下来让我们制作顶端的阴影。这个阴影会表现在椎形体的上面。创建一个新图层，并将图层移动到border的下面，命名为shadow1。使用钢笔工具做一个形状类似我那样。设置透明度为30%。

第十九步在Top part的中央做一个橙色（EC54400）的圆。然后使用变形工具适当的减小它，并减小它的高度。

第二十步现在使用钢笔工具制作一个形状类似于示意图中的形状。

第二十一步制作一个小的蓝色的圆在刚才我们制作的形状的下端。

第二十二步这将是我们的最后一件事情了。这里我们将用到画笔工具和钢笔工具。让我们在蓝色的小圆圈图层下面创建一个新图层。使用钢笔工具在图层上面画一条垂直的路径。

第二十三步使用下面的画笔设计和颜色（#EE4C05）。

第二十四步选择路径右击选择描边路径。

第二十五步重复上一步，但是每一次我们创建一个新的描边，并使它们在不同的图层。同样，要使用不同的颜色

第二十六步现在你可以合并所有的图层，给它命名为mot。现在我们剩下的工作就是给它添加投影了。

第二十七步剩下的事情包括：更多的高光，使它更加闪耀，制作一个反射，给它加一个投影，加一个地板。回头浏览一下前面的步骤，我所有用的的仅仅是画笔工具，钢笔工具和渐变填充。

篇3：Fireworks 制作水晶图标

效果图：

路径制作这么一个图形，然后拉渐变

复制一个在上面，稍微偏移些，如图拉渐变

加滤镜

加高光：也是复制一份，用‘刀’切割一半

制作笔：

制作出笔尖与笔杆中间的骨线

复制一个，用“刀”切一半，然后拉渐变

最后影阴制作

篇4：PS绘制MSN水晶图标

这篇教程教的朋友们用PS绘制MSN水晶图标，教程难度一般，绘制的效果很漂亮，转发过来和的朋友们一起学习这个UI设计教程。先看看效果图：

FEVTE编注：更多鼠绘教程讨论交流和鼠绘作业提交请进入论坛PS鼠绘交流区：bbs.fevte.com/forumdisplay.php?fid=51&filter=type&typeid=90

绘制步骤如下：

一、新建130x130文档,72px 二、新建画一个圆制作头部，填充颜色#78B00A；如下图

三、复制第一部的层,ctrl+t 自由变换，高度和宽度设为95%；设置渐变颜色，如下图：

再设置图层样式；如下图：

拉个径向渐变，如下图：

四、新建一层，用钢笔勾画出如下图:

设置渐变颜色，

渐变填充，如下图；

五、新建一层，继续用钢笔勾画轮廓，做出高光；如下图：

设置渐变颜色，如下图：

然后填充，

六、新建一层，用钢笔勾画，如下图：

设置渐变颜色；

拉个如下图的渐变；

七、新建一层，做反射光，做出如下图效果；

八、制作体部，回到最底部新建一层，钢笔勾画轮廓；

填充颜色；（不要取消选区）

九、新建一层，选择-》收缩1px；然后填充如下图颜色；

十、新建一层，按ctrl+g 与下层组合，用钢笔画出如下图，ctrl+enter转为选区；然后羽化5px;再填充颜色，不要取消选区，如下图：

十一、新建一层，ctrl+g 与下层组合，选择-》收缩2px;设置渐变颜色；

拉出如下图：

十二、新建一层，用钢笔勾画出如下图效果；

然后转为选区，调整渐变颜色，拉出如下图效果：

十三、新建一层，继续用钢笔勾画如下图，

转为选区，拉出如下图效果；

十四、做出如下头部的反射光，稍微调整；如下图：

十五、钢笔勾画出手部，如下图：

转为选区，填充颜色（不要取消选区），如下图：

收缩1px，新建一层，再填充黄色，如下图：

十六、用涂抹、减淡、模糊工具做出如下图；

十七、新建一层，钢笔勾画如下图：

转为选区，做出如下图渐变；

再新建一层，选择-》收缩1px;径向渐变填充如下图颜色；

在新建一层,用勾画并转为选区做出如下图的效果:

十八、新建一层到图的最底层，用钢笔勾画如下图；

转为选区，填充#78B00A；如下图：

新建一层，选择-》收缩1px;填充#F0FC00；

新建一曾，在选择-》收缩1px,设置渐变颜色，如下图：

拉个径向渐变，如下图；

十九、阴影部分：画个椭圆，羽化5px;

然后设置渐变，如下图：

拉个径向渐变；

二十、完成，效果图如下:

FEVTE编注：更多鼠绘教程讨论交流和鼠绘作业提交请进入论坛PS鼠绘交流区：bbs.fevte.com/forumdisplay.php?fid=51&filter=type&typeid=90

篇5：PS制作漂亮的绿色水晶箭头图标

最终效果

1、先用钢笔勾出一个箭头的路径，

2、按CtrlEnter把路径转为选区，切换到通道面板，新建一个通道，然后填充白色，按Ctrl D取消选区，执行：滤镜模糊高斯模糊，数值为4.3左右，按Ctrl L调色阶把左右两个黑色三角形箭头想中间靠拢，使得轮廓变清晰，圆角完成。

3、按Ctrl点击通道载入选区，回到图层面板，新建一个图层，填充颜色：#02A600。

4、复制该层，并锁定复制层，然后选择渐变工具颜色设置为从：#CCFF2F到#25CA00的渐变，然后拉出径向渐变，并把图层向上移动4个像素。

5、用钢笔工具勾出高光路径。

6、新建一个图层，用3像素的硬画笔执行路径描边，然后用橡皮工具擦掉两端部分，

7、勾出一个三角形选区，新建一个图层，选择渐变工具颜色设置为从白色到透明，然后由左向右拉出线性渐变。

8、复制上面的不做的渐变图层，把图层的不透明度改为：68%，并把下面那个渐变层的图层混合模式改为“柔光”。

9、按Ctrl点图标主体载入选区，新建一个图层，执行2像素的描边颜色为：#037B02。

10、在尾部拉出一个2像素高的选区，新建一个图层，用渐变拉出白色到透明的径向渐变，作出尾部高光细节。

11、新建一个图层，并放到最下层，做一个黑色到透明的径向渐变，然后按CtrlT压扁并拉长。

12、放到箭头下面的位置，把图层的不透明度改为：30%，完成最终效果。

篇6：PS制作水晶字

这篇教程教的朋友们用PS制作水晶字，教程制作难度一般，主要通过图层样式和曲线调节来实现晶莹剔透的水晶效果。转发过来和的朋友们一起学习这篇教程。先看看最终的效果图：

FEVTE编注：更多PS文字效果教程讨论交流和作业提交请到论坛文字效果交流区：bbs.fevte.com/forumdisplay.php?fid=51&filter=type&typeid=86

具体的制作步骤如下：

1、新建500 * 350像素文档，填充黑色，输入文字(字体：Gill Sans Ultra Bold)，填充绿色：#4a9c1d，

2、为文字图层依次添加图层样式，参数设置如下图：

3、选择文字选区，选择-修改-收缩4像素，新建图层。

4、将前景色设为白色，选择渐变工具，选前景至透明，在选区中由上至下拖出渐变。

5、使用椭圆选区工具框出选区，删除。

最终效果：

FEVTE编注：更多PS文字效果教程讨论交流和作业提交请到论坛文字效果交流区：bbs.fevte.com/forumdisplay.php?fid=51&filter=type&typeid=86

篇7：PS制作水晶文字效果

先来看看最终的效果图：

FEVTE编注：更多PS文字效果教程及PS制作的文字效果作品交流请到论坛PS文字效果交流区，地址：bbs.fevte.com/forumdisplay.php?fid=51&filter=type&typeid=86

第一步：

新建一个文档，大小为:600X400像素，然后使用渐变工具，选择径向渐变，颜色为：#e1e9c5和#88a816，从中心往外拉，

然后输入字母，这里就用我自己的网站名，我这里使用的是Cooper Std字体，不知道这个字体是不是默认的，

大家也可以用其他字体代替。

第二步：

输入字母后设置他的填充为0。现在我们开始做。这里是重点，根据下面的图设置图层混合样式就可以做出第一个效果来。

第三步：

现在我们做第二个效果：

按照从上面第二部设置混合样式开始。

最终效果图：

FEVTE编注：更多PS文字效果教程及PS制作的文字效果作品交流请到论坛PS文字效果交流区，地址：bbs.fevte.com/forumdisplay.php?fid=51&filter=type&typeid=86

篇8：PS制作漂亮水晶

今天的这篇教程向朋友们介绍PS制作漂亮水晶效果，教程属于初级教程，学习制作难度不大，喜欢的朋友快来学习一下吧！

教程最终效果图

FEVTE编注：更多PS滤镜教程讨论交流和作业提交请到论坛PS滤镜交流区，地址：bbs.fevte.com/forumdisplay.php?fid=51&filter=type&typeid=87

具体的制作步骤如下：

1、选钢笔工具出勾出我们的水晶图案，再转换成选区，为此，我们先在背景层上新建一个层，并勾出一个像我下面这样的选区，

2、使用浅蓝色填充选区。3、确保选区被选中，执行“滤镜风格化浮雕效果”，使用下图中的设置参数：你的图片看起来应该像这样：4、现在我们希望去掉那些难看的颜色，为此，新建一个层并用浅蓝色填充，将图层模式改为“颜色”。现在你的图形应该和我的看起来差不多：5、合并颜色图层和水晶图层，并复制该层。执行“编辑变换旋转”，旋转你复制的水晶，使它看起来像下面这幅图片一样。6、现在降低不透明度，以便它像下面这样：7、再次复制图层并旋转，使它类似下面的图片：8、我们现在要将水晶做得更具吸引力，选择工具面板中的“减淡工具”，如图：

FEVTE编注：更多PS滤镜教程讨论交流和作业提交请到论坛PS滤镜交流区，地址：bbs.fevte.com/forumdisplay.php?fid=51&filter=type&typeid=87