当前位置：首页 > 实用文档 > 其他范文> PS制作网页界面

PS制作网页界面

时间：2022-05-16 01:42:06 其他范文收藏本文下载本文

PS制作网页界面（精选6篇）由网友“麻烦加冰块”投稿提供，下面小编给大家整理后的PS制作网页界面，欢迎阅读!

PS制作网页界面

篇1：PS制作网页界面

1.打开Photoshop，创建新画布，大小根据个人网站需要而定，这里我们设置为900*650像素。打开素材1，使用移动工具（V）将背景素材拖动到刚刚创建的画布中。效果如图1(注：为了方便浏览素材和图片都已经压缩过了，制作的时候请以实际大小制作)

<图1>2.选择菜单：滤镜 >> 渲染 >> 光照效果。参数设置如图2，效果如图3

<图2>

<图3>

3.使用矩形选框工具（M）建立如图4所示的选区。新建一个图层填充为白色，按Ctrl + T 变形效果如图5

<图4>

<图5>

4.双击图层调出图层样式选择投影参数设置如图6，确定后按Ctrl + J 复制一层，按Ctrl + T 变换角度效果如图7

<图6>

<图7>

5.按Ctrl 点图层调出选区如图8，选择菜单：选择 >> 变换选区，按住Alt键，缩小选区如图9,再选择菜单：选择 >> 存储选区，将选区保存。

<图8>

<图9>

6.打开素材2直接拖进来，并调整大小，

选择菜单：选择 >> 载入选区，将之前存储的选区载入，选择 >> 反选，删除。效果如图11

<图10>

<图11>

7.新建图层，使用笔刷工具，并选择箭头笔刷，绘制图12所示效果。选择菜单：编辑 >> 变换 >> 变形。变形设置如图13，这个只适合cs2及以上版本。低版本的建议按效果图直接勾出来。

<图12>

<图13>

8.输入登录提示文字“Enter”。双击图层调出图层样式选择投影参数设置如图15，效果如图15

<图14>

<图15>

<图16>

9.自由变换（Ctrl + T），调整文字层的位置及角度如图17，输入网站版权申明文字如图18。双击图层调出图层样式参数设置如图19-20，效果如图21

<图17>

<图18>

<图19>

<图20>

<图21>

10.输入标题文字，并采用与“Enter”层相同的图层样式。完成最终效果。

<图22>

<图23>

篇2：PS制作简洁网页界面

本次的教程我们将用PS制作简洁网页界面效果，教程制作出的效果简洁大方，制作难度也不大，喜欢的同学可以试着做一下！

我们先来看看效果图：

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

下面是具体的制作步骤：

1.创建一个新的文档600 × 400像素

2.前景色为＃1592d7和背景颜色为＃136da2，选择渐变工具，径向渐变。

3.选择自定义形状

4.画出如图路径

5.新建一层，前景色设置为白色，选择钢笔工具，然后在路径上面右键，选择填充路径

6.右键路径，选择删除路径

7.现在去“滤镜>模糊>高斯模糊”，模糊了约9个像素的形状，然后单击确定。混合模式设置“软光”，不透明度为“30％”。完成标签的“背景条纹”层。

8.用柔角橡皮擦处理下目标位置

9.将图标拖入，放到指定目标

10.新建一层，取名：导航，然后用矩形选框工具拖出40-50像素高的矩形，填充黑色，矩形距离底部大概100像素高

11.将矩形填充改下10%

12.新建一层，选择矩形选框工具，并创建两个1个像素的线条对方，颜色最接近底部的白色和最上面的一个黑线之上，

最后，设置不透明度为50％。复制一层，放在底部

13.新建一层，创建按钮。选择矩形选框画个矩形，高度如图，宽度大小自己选中

14.填充黑色，取消选区，然后把填充改成0%，改图层样式

14.复制一层，取名：反光层，然后清除样式，重新设置样式。填充改成0%，其他样式如图

涉及到的渐变如下

最终：

15.新建一层，使用矩形选框工具画如图两个白色矩形

16.添加蒙板，填充黑白线性渐变

17.新建一层，画出如图路径，转化为选区，羽化2像素，填充白色，然后载入反光层选区，反选，删除，保留自己需要的，图层不透明度改成10%

23。最后复制几个，完成！

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

篇3：PS制作网站登陆界面

今天我们将在PS图像处理软件中学习怎么制作网站登录框及登录界面，网站登录设计对于现在大部分网站来说都是必须，而如何网站设计师们如何设计好一个网站登录输入框呢？下面看教程为你们解答，大家不妨试着按教程制作一下！

英文原创作者：Build Tutorial

原英文教程地址:www.webdesign.org/photoshop/web-layout/how-to-create-glossy-grass-login-panel.21753.html

翻译借助百度在线翻译，翻的不准大家去看原英文教程

以下为最终效果预览图

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

下面是具体的制作过程介绍：

1，创建一个新项目，分辨率为1280×1024像素，选择一个草的图片如下

2。现在选择圆角矩形工具（U），半径为10像素的形状像如下

3，

现在将填充不透明度21%像如下

4。现在选择圆角矩形工具（u），半径为10像素的形状像如下

5。现在选择圆角矩形工具（u），半径为4像素的形状像如下

6。打开图层样式，选择阴影，阴影下

7。现在选择圆角矩形工具（美），半径为4像素的形状像如下

8。打开图层样式，单击并选择渐变叠加并设置渐变叠加像如下

9。现在，选择文字工具（吨）和类型的文字一样，如下

10。现在，选择文字工具（吨）和类型的文字一样，如下

我希望你喜欢这个教程，我希望这些技术启发新的思路和想法为您的未来设计。

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

篇4：PS快速制作网页按钮

今天我们将学习如何在PS中设计制作一个白色的网页按钮，我们将首先创建的背景，然后我们用到很多层，层面板工具和其他有用的技术在本教程中.喜欢的朋友快来尝试制作一下吧！

效果图如下：

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

教程开始：

第1步：

分辨率1280 x 1024像素创建一个新项目

第2步：

现在选择圆角矩形工具（U）和半径300像素的形状像如下

第3步：

打开图层样式，选择渐变叠加，设置渐变叠加像如下

第4步：

现在选择圆角矩形工具（U）和半径300像素的形状像如下

第5步：

打开图层样式，选择渐变叠加，设置渐变叠加像如下

步骤6：

现在选择矩形选框工具（M）和圆形

步骤7：

现在选择图层样式，过去它的形状像如下

第8步：

现在选择矩形选框工具（M）和圆形

步骤9：

现在新建一个屋为笔刷工具，然后选择笔刷（b）类似如下

第10步：

现在选择文本文字工具（T）和类型如下的文本

我希望你喜欢这个教程，我希望这些技术已经启发了一些新的想法和观点，为你的下一个设计

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

篇5：PS制作网页字体方法

PS制作网页字体方法

1.更有质感的字

我们先看图片里这个LOGO,它显得更有质感,文字有一张向外伸展,不会死板地贴在网页上.如果你仔细观察,你会很容易发现文字的 brightkite都使用了色彩“渐变”.是的,文字的颜色都不是单色填充,而是“渐变”.”渐变”为什么看起来更有质感呢?这是因为这里模拟了大自然光照中的效果,即高光部分在文字的上方,而低光在下.同时也不要忽略了另一个细节,就是文字的“阴影”,.

那到底要怎么做呢?

留意图中的2跟3,如果你还不懂如何添加渐变.请在图层面板中双击”图层名”右边的空白处,或是点击下图中的第2个按钮(在图层面板下方)打开样式面板.

“渐变叠加”,然后按下图设置.渐变的颜色选择2个同色系但是有”深浅对比”的颜色.例如例子中,一个浅绿跟深绿.这样才能模拟光照效果.

好了,剩下阴影.还是一样在样式面板左侧点”投影”,然后按下图设置:

再看其他使用了这个方法的网站设计:

2.凹陷的字

照例我们看一个例子:

ALEX BUGA网站的LOGO,我觉得是凹陷字体的典范.而这样的字体效果很明显有一种凹陷在背景里的感觉,甚至文字像是刻在石头上一般. 如果你已经完成了第一个文字效果,那么接下来的内容对你是相当简单的.

1.首先输入文字,颜色填充为较背景更深的.颜色,例子中为#4e3400

2.添加”内阴影”样式,设置如下图:

3.添加”斜面和浮雕”样式,设置如下:

作品完成. 该效果需注意: