Photoshop中创建充满色彩的网页效果图.docx

Photoshop中创建充满色彩的网页效果图.docx

《Photoshop中创建充满色彩的网页效果图.docx》由会员分享，可在线阅读，更多相关《Photoshop中创建充满色彩的网页效果图.docx（41页珍藏版）》请在冰豆网上搜索。

Photoshop中创建充满色彩的网页效果图

photoshop中创建一个充满色彩的网页效果图

在这篇教程中，我将教给你如何在photoshop中制作一个简洁干净的网页效果图。

原始效果是由ThemeForest的kuntiz设计的。

我很感谢他允许我发布这篇教程。

一些需要的素材:

∙叶子素材

∙像素化蓝色矩形

Step1:

新建文档

在photoshop中，按住（Ctrl+N）新建一个文档。

设置大小为1200px*750px。

然后用渐变工具从上到下拉出一个渐变，颜色从#792700到#000000。

Step2:

在背景中添加一些颜色

新建一个图层，命名为”color.”，用笔刷工具，选择一个比较软的笔刷，大概直径为300px，我的颜色选择的是红色，蓝色和橙色，在这个图层中添随便画几笔。

Step3:

给背景添加一些纹理

现在我们要给背景增加一些纹理效果。

打开我们刚刚下载的叶子的素材图片，用移动工具把这个图片移动到我们的文档中。

右键单击该图层的缩略图（在图层面板中），选择“编组到新建智能对象土层中”。

然后选择滤镜>艺术化>胶片颗粒，按照上面的设置进行操作。

然后选择滤镜>像素化>马赛克，同样按照图中的设置进行操作。

设置该图层的渲染模式为“差值”（Difference），透明度设为30%，该土层命名为“texture”。

Step4:

创建黑色背景的内容区域

新建一个图层，选择圆角矩形工具，设置圆角度为3个像素，创建一个黑色的圆角矩形。

然后在图层面板中双击该图层，弹出图层样式面板，按照图中的设置给该图层设置阴影。

设置该图层透明度为70%，然后命名这个图层为“blackshape”。

Step5:

用群组（文件夹）来组织你的图层

按住ctrl键，选择你刚刚创建的所有的图层，然后点击Ctrl+G群组他们。

给这个新的群组（文件夹）命名为”background”。

Step6:

创建更多的群组（文件夹）

创建新群组，图层>新建>群组，然后命名为“home”。

然后在这个群组下创建另一个群组，命名为“logo”。

Step7:

创建logo和口号

在logo群组中，新建一个图层。

用文字工具，输入网站的logo文字，应用颜色是#f4f4f4。

双击该图层打开图层属性面板。

按照上面的设置进行操作。

然后新建另一个图层输入口号，应用颜色是#eeeeee。

Step8:

“Signup”和“login”按钮

好了，我们现在要在布局的右上角做两个按钮。

新建一个群组，命名为“Signup|Login”。

然后选择圆角矩形，创建一个小的矩形，就像我做的一样。

双击图层打开图层样式面板，按照上图的设置进行操作。

设置前景色为白色，用文字工具在你的按钮上写下“Signup|Login”。

设置文字这个图层的透明度为75%。

Step9:

创建1个像素高的蓝色线条

新建一个群组，命名为“Navigation”（导航）。

新建一个图层，命名为”Line”。

选择“单行选框工具”，在画布中单击创建一个像素高的选取。

填充颜色#406f94，然后删除内容区域以外的部分。

设置该图层透明度为40%。

Step10:

在导航条中添加一个渐变效果

创建新图层。

用矩形选区工具，创建一个选区，就像我做的一样。

（注意：

你可以利用标尺来帮助一创建这个选区）。

然后用渐变工具，设置渐变为#35423e到透明。

从底部向上填充渐变。

按下Ctrl+D清除选区。

然后，滤镜>杂色>添加杂色。

按照上图的设置进行操作。

命名这个图层为“gradient”。

在线条和渐变之间记得留下1个像素的高。

Step11:

写导航的字

选择文字工具，写下你的导航的文字。

然后双击打开图层样式面板。

按照上图设置。

我给文字添加了一个基本的渐变/阴影效果。

Step12:

创建导航文字之间的装饰分割

现在我们要创建一些分割线。

新建一个图层，选择单列选框工具，创建一个1个像素宽的选区。

然后用矩形选区工具，单击”与选区交叉”按钮（在状态栏的上面有个按钮），按照上图的操作化一个选取。

用白色填充选取。

然后ctrl+D删除选取。

Step13

双击该图层打开图层样式面板，创建渐变叠加。

该图层命名“line1″。

Step14:

Ctrl+J复制图层“line1″，然后命名这个新图层为”line2″。

用移动工具，向右挪动这个图层。

然后双击图层打开图层样式面板，按照上面的设置进行操作。

Step15:

把图层”line1″和“line2″转换成智能图层

按住Ctrl键，选中图层“line1″和”line2″。

然后点击右键，选择转换成智能对象图层。

设置这个智能图层为“separator”。

Step16:

创建蓝色高光

在图层”separator”下创建一个新图层。

用矩形选区工具创建一个选取（按照上图设置），然后填充颜色为#35423e。

右键单击该图层，把这个图层转换成智能对象图层。

点击滤镜>模糊>高斯模糊，按照图中设置。

点击滤镜>杂色>添加杂色，按照图中设置。

设置该图层透明度为60%，命名该图层为“highlight”。

Step17:

给图层”separator”创建蒙版

在图层面板中单击图层“separator”，点击图层>图层蒙版>显示全部。

选择渐变工具，在蒙版中，从顶部到分割线的中间部分，画一个从黑色到透明的渐变。

Step18:

复制分割线

按住Ctrl键，在图层面板中，点击图层”separator”和“highlight”。

然后用移动工具，按住Alt和Shift键拖拽。

这时候的效果就是复制移动了这两个图层。

向右移动到合适的位置。

重复以上操作。

Step19:

群组所有的分割线

选择所有的“separator”和“highlight”图层，按住Ctrl+G群组它们。

命名这个群组为”separators”。

Step20:

给活动页添加按钮效果

现在，我们要给当前（活动的）页面的导航文字，添加一个不同的背景，要和其他页面的导航文字作以区分。

用选区工具创建一个和我一样的矩形选取。

把这个图层放在文字图层的下面。

双击该图层打开图层面板，按照上图进行设置，添加一个渐变叠加。

命名这个图层为”activemenu”，设置图层透明度为50%。

Step21:

创建搜索条

新建群组（图层>新建>群组），命名为“search”。

把它放在群组”navigation”的上面。

用圆角选区工具，设置圆角为3px，创建一个圆角矩形，设置颜色为#104f59。

命名这个图层为“textfield”，设置透明度为80%。

Step22:

创建搜索按钮

用矩形选取工具创建一个矩形选区，如上图。

把它放在搜索条的右边。

双击图层打开图层样式面板。

添加渐变叠加。

然后给这个图层创建一个蒙版。

Step23:

在按钮上写“search”

用白色写文字“search”。

设置该图层透明度为75%。

Step24:

给搜索栏创建一个1像素宽的细线

用单列选框工具，创建需要的选取。

然后填充颜色#123036。

命名这个图层为“line”，把它放在图层“button”下面。

Step25:

创建一个蓝色矩形

创建一个新群组，命名为”Showcase”。

在里面再创建一个群组，命名为”background”。

用矩形选择工具，创建一个新矩形，填充颜色#219aad。

我的矩形是983px宽273px高（在创建举行之前你可以打开信息面板–窗口>信息，这样你就可以看到具体的尺寸）。

设置图层透明度为55%命名它为“bg4″。

Step26:

给这个蓝色矩形添加纹理效果

打开素材文件”像素化蓝色矩形”，把素材移动到我们的文件中。

放在蓝色矩形的上面。

设置该图层透明度55%，然后命名这个图层为“bg3″。

Step27:

给蓝色矩形添加渐变

按住Ctrl点击图层“bg4″的蒙版，这时创建了一个选取。

新建图层，用渐变工具，从选取的底部到顶部画一个从#56b8e5到透明的渐变。

然后Ctrl+D删除选区。

Step28:

创建一个小的蓝色矩形

新建图层。

用矩形选区工具，创建一个选区（如上图）。

用渐变工具，从选区的底部到头部，拖拽从#0f2b42到#2a607f的渐变。

Ctrl+D删除选区。

命名该图层为“bg1″。

Step29:

“Signup”按钮

创建新群组命名为“signupbutton”。

用圆角矩形工具，设置圆角为2px，创建一个圆角矩形（如上图）。

双击图层打开图层样式面板。

如上图设置，添加效果。

然后用文字工具写上“signup”，设置文字白色。

Step30:

“Learnmore”按钮

重复上面的操作，建立另一个按钮。

但是这一次白色的文字是“learnmore”。

然后创建一个新图层，用用户自定义形状，选择一个白色的箭头。

Step31:

在矩形的左边创建一个按钮

创建一个新群组，命名为”leftarrow”。

用椭圆工具l（U），创建一个圆形，填充颜色#406f94。

双击图层打开图层样式面板，按照上图设置。

Step32:

在蓝色圆圈中创建一个箭头

新建图层，用用户自定义图形，创建白色箭头。

双击打开图层样式面板，按照上图进行设置。

设置图层透明度为50%。

Step33:

在右边创建另一个箭头。

重复以上步骤，在矩形的右边创建对称的圆圈和箭头。

Step34:

创建特色图片

新建群组。

命名为“image”。

在这个群组中放置一个小的图片，命名这个图层为”image”。

双击打开图层样式面板。

按照上图设置。

Step35:

给你的图片添加阴影

点开图层>图层样式>新建图层，在原始图层上面新建了一个图层。

打开图层>图层梦般>显示全部，设置渐变，画一个黑色到透明的渐变，从小图片的底部到中间的位置。

给这个图层命名为“shadow”。

Step36:

添加文字

新建群组。

用文字工具添加一些文字，命名这个群组为“text”。

Step37:

创建白色矩形

新建群组，命名为“content”，在其中再新建一个群组，命名为“shadows”。

用矩形工具，新建一个矩形，填充白色，向上图一样。

命名这个图层为”whiteshape”，设置图层透明度为90%。

Step38:

添加顶部阴影

按住Ctrl单击图层面板上图层”whiteshape”的小缩略图，创建选取。

创建一个新图层，用渐变工具，画一个从#8f8f8f到透明的渐变，参照上图。

设置该图层透明度为50%，命名这个图层为”topshadow”。

然后用移动工具，向下移动2个像素。

Step39:

创建横向的阴影

新建图层，，用矩形工具，创建一个选区，如上图。

用渐变工具画一个从#8f8f8f到透明的渐变。

给这个图层创建蒙版，用一个直径较大的软笔刷，创建阴影。

设置该图层透明度为30%，命名该图层为“verticalshadow1″。

复制这个图层（Ctrl+J），命名这个新图层为“verticalshadow2″，并且把它移动到右边。

Step40:

创建横向线条

用直线工具（U）创建一个横向线条，如上图，高为1px，颜色#aebcc7。

命名为“line”。

Step41:

添加文字

选择文字工具，添加一些文字。

你也可以添加一些图片。

Step42:

给底部创建渐变

新建群组，命名为“footer”。

在里面新建一个图层，用选区工具（M）创建一个选区，如上图。

设置前景色为#555555，用一个直径比较大的软笔刷，在选取顶部的位置涂抹。

设置该图层透明度为50%，命名该图层为”gradient”。

Step43:

在底部，添加一个1个像素高的线条

新建图层。

按照以前的做法，创建一个1px高的线条，填充颜色黑色，设置图层透明度为15%，命名该图层为“line”。

Step44:

给底部区域添加文字

在底部添加一些文字

FinalResult

∙文章来自苏打苏塔设计量贩铺