Web网页咨询框制作PS教程

今天教大家利用Photoshop制作网页在线咨询框,这个咨询框基本上网上医院中都会出现。大家可以借鉴的多找些这类的网站看看,不一定要跟我一样!

效果图:

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

步骤1

新建画布

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

步骤2

选择圆角矩形工具,属性栏设置“路径”属性,圆角化20,新建图层,绘制路径

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

步骤3

Ctrl+回车将路径变为选区

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

步骤4

选择渐变工具,编辑渐变颜色

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

步骤5

渐变编辑颜色如下

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

第一个色标:

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

第二个色标:

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

选择线性渐变,从上到下拖动

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

步骤6

Ctrl+T自由变换,单击右键――斜切,水平方向

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

步骤7

钢笔工具绘制

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

步骤8

Ctrl+回车转换选区,按Ctrl+Alt+shift单击图层1缩略图

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

步骤9

新建图层,选择渐变工具,调整渐变

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng
色标1:

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

色标2:

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

步骤10

做右上角的小圆

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

新建图层,绘制圆形,填充白色,图层样式描边(4)即可

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

步骤11

文字工具,单击输入X

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

步骤12

钢笔工具绘图,在右上角

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

步骤13

Ctrl+回车变选区,调整渐变,新建图层

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

色标1:

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

色标2:

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

色标3

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

步骤14

新建图层,钢笔工具绘制两个折角的位置

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng
Ctrl+回车,填充颜色,把图层拖动到下方即可

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

步骤15

找一个护士的素材,抠图

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

步骤16

文字工具录入文字,一个黄色投影,一个白色投影(自己排版效果)

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

步骤17

开始制作按钮
选择渐变工具、编辑渐变颜色

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng
色标1:

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

色标2:

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

色标3:

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

新建图层,绘制圆角矩形

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng
然后从上到下拖动渐变

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

步骤18

另一个按钮同样的方法
注意:在这说一个特殊的方法,因为再绘制圆角矩形不一定保证是相同大小的,所以我们复制上一个绿色的圆角矩形按钮,然后锁定透明像素即可修改

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng
然后使用渐变,调整渐变颜色,从上到下拖动即可

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

步骤19

文字工具,录入文字,添加投影效果

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

最终效果:

Web网页咨询框制作PS教程 ps教程  ruanjian jiaocheng

属性标签:

欢迎留言