怎么制作网站搜索引擎,怎么用PS做搜索框?

用户投稿 网站制作定制 5 0

关于“怎么制作网站搜索”的问题,小编就整理了【1】个相关介绍“怎么制作网站搜索”的解答:

怎么用PS做搜索框?

用PS做搜索框的步骤流程(以Adobe Photoshop CS6为例):

1、打开Adobe Photoshop CS6软件,并新建网页(ctrl+n)。如图所示。

 怎么制作网站搜索引擎,怎么用PS做搜索框?

2、选择颜色如图,这里的背景色是效果需要,一般做网页搜索框是不需要这一部的,填充(alt+del),如图所示。

 怎么制作网站搜索引擎,怎么用PS做搜索框?

3、选择圆角矩形工具(u),设置半径5像素,画合适大小矩形框,根据网页大小而定,选择前景色填充,颜色也是根据网页整体色调而定,命名图层为搜索框外框,如图所示。

 怎么制作网站搜索引擎,怎么用PS做搜索框?

4、给搜索框外框图层添加图层样式,内阴影、渐变叠加、描边;效果如图所示。

 怎么制作网站搜索引擎,怎么用PS做搜索框?

5、复制新建搜索框外框图层(Ctrl+j),调整大小(ctrl+t),填充颜色为白色,调整图层样式,如图所示。

 怎么制作网站搜索引擎,怎么用PS做搜索框?

6、选择自定义形状工具,追加全部图形,拉到最下面选择放大镜,画合适大小的放大镜在右边,选择颜色填充,设置图层样式,并右击图层选择栅格化图层。如图所示。

 怎么制作网站搜索引擎,怎么用PS做搜索框?

 怎么制作网站搜索引擎,怎么用PS做搜索框?

7、到此网页搜索框制作完成,效果如图所示。

 怎么制作网站搜索引擎,怎么用PS做搜索框?

注意事项

混合模式设置:

【内阴影】混色模式 正常 fc4242。不透明度 100。距离 2。大小 0。

【渐变叠加】混合模式 柔光。不透明度 30。

【描边】大小 1;混合模式 正常。颜色 fc4242(搜索框外框填充颜色)。

放大镜混合模式设置:

【投影】不透明度 51。角度 90。距离 3。大小 3。

【颜色叠加】混合模式 正常 444748。

用PS做搜索框的步骤流程(以Adobe Photoshop CS6为例):

1、打开Adobe Photoshop CS6软件,并新建网页(ctrl+n)。如图所示。

 怎么制作网站搜索引擎,怎么用PS做搜索框?

2、选择颜色如图,这里的背景色是效果需要,一般做网页搜索框是不需要这一部的,填充(alt+del),如图所示。

 怎么制作网站搜索引擎,怎么用PS做搜索框?

3、选择圆角矩形工具(u),设置半径5像素,画合适大小矩形框,根据网页大小而定,选择前景色填充,颜色也是根据网页整体色调而定,命名图层为搜索框外框,如图所示。

 怎么制作网站搜索引擎,怎么用PS做搜索框?

4、给搜索框外框图层添加图层样式,内阴影、渐变叠加、描边;效果如图所示。

 怎么制作网站搜索引擎,怎么用PS做搜索框?

5、复制新建搜索框外框图层(Ctrl+j),调整大小(ctrl+t),填充颜色为白色,调整图层样式,如图所示。

 怎么制作网站搜索引擎,怎么用PS做搜索框?

6、选择自定义形状工具,追加全部图形,拉到最下面选择放大镜,画合适大小的放大镜在右边,选择颜色填充,设置图层样式,并右击图层选择栅格化图层。如图所示。

 怎么制作网站搜索引擎,怎么用PS做搜索框?

7、到此网页搜索框制作完成,效果如图所示。

 怎么制作网站搜索引擎,怎么用PS做搜索框?

工具/原料

PhotoShop软件

1、新建网页(ctrl+n)如图尺寸。

 怎么制作网站搜索引擎,怎么用PS做搜索框?

2、选择颜色如图,这里的背景色是效果需要,填充(alt+del)。

 怎么制作网站搜索引擎,怎么用PS做搜索框?

3、选择圆角矩形工具(u),设置半径5像素,画合适大小矩形框,根据网页大小而定,选择前景色填充,颜色也是根据网页整体色调而定,命名图层为搜索框外框,如图所示:

 怎么制作网站搜索引擎,怎么用PS做搜索框?

4、给搜索框外框图层添加图层样式,内阴影、渐变叠加、描边;如图:

 怎么制作网站搜索引擎,怎么用PS做搜索框?

5、复制新建搜索框外框图层(Ctrl+j),调整大小(ctrl+t),(调整大小时按住shift键等比例缩放,或者画一个矩形框也行),填充颜色为白色,调整图层样式,如图:

 怎么制作网站搜索引擎,怎么用PS做搜索框?

6、选择自定义形状工具,追加全部图形,拉到最下面选择放大镜,画合适大小的放大镜在右边,选择颜色填充,设置图层样式,如图:

 怎么制作网站搜索引擎,怎么用PS做搜索框?

 怎么制作网站搜索引擎,怎么用PS做搜索框?

7、到此网页搜索框制作完成,如果要彰显个性,放大镜的图案可以自己画,而且这样做改颜色特方便,直接填充其他颜色就行了。最后PS网页搜索框完成效果:

 怎么制作网站搜索引擎,怎么用PS做搜索框?

到此,以上就是小编对于“怎么制作网站搜索”的问题就介绍到这了,希望介绍关于“怎么制作网站搜索”的【1】点解答对大家有用。

上一篇 丰城app网站制作招聘,妇幼保健院在手机上怎么挂号?

下一篇当前分类已是最新一篇

抱歉,评论功能暂时关闭!