PS网页设计:酷炫的黑色风格

2016-03-19 02:09 96 1 收藏

想要天天向上,就要懂得享受学习。图老师为大家推荐PS网页设计:酷炫的黑色风格,精彩的内容需要你们用心的阅读。还在等什么快点来看看吧!

【 tulaoshi.com - PS 】

PS网页设计:酷炫的黑色风格

最终效果图

Photoshop设计简单黑色网页模板界面12

新建750x600尺寸的画面。背景颜色暗灰色,新建图层在上部画出一个黑暗的矩形,如图。

Photoshop设计简单黑色网页模板界面1

创建一个新的画布,800 × 800。让前景色设为白色和黑色两种颜色,并渐变。选择“滤镜扭曲”。效果应该类似于下面的图片。

Photoshop设计简单黑色网页模板界面2

现在,选择”滤镜扭曲”极坐标。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

Photoshop设计简单黑色网页模板界面3

复制你的层,将模式设置为“叠加“。现在选择”滤镜扭曲”涡形旋转。

Photoshop设计简单黑色网页模板界面4

合并的图层和调整颜色(选择你喜欢的颜色),我选择了蓝色/紫色。

Photoshop设计简单黑色网页模板界面5

复制图像回到之前的设计页面,张贴到上方的黑色背景上,切割大小合适。

Photoshop设计简单黑色网页模板界面6

现在我们将创建导航菜单。选择在您的标题图片基地薄矩形,拉伸图像的整个长度,见下文。

Photoshop设计简单黑色网页模板界面7

新建图层,使用渐变工具,使你的新选择一个灰色的渐变,以接近顶部的光色

Photoshop设计简单黑色网页模板界面8

上方大概选择减少2像www.Tulaoshi.com素,再新建图层作相反渐变效果。

Photoshop设计简单黑色网页模板界面9

我们将作出一种新的内部镶嵌按钮,所以使用矩形选择工具,在渐变条上选择一个框框。上下像数留1像素。

Photoshop设计简单黑色网页模板界面10

填充渐变矩形按钮,后反复复制几个,并给予按钮选择编辑一个黑暗的边框。

Photoshop设计简单黑色网页模板界面1

在按钮上添加一些导航文章。

Photoshop设计简单黑色网页模板界面2

现在选择顶上方的标题图片,如下所示的灰色部分。

Photoshop设计简单黑色网页模板界面3

在顶部新建图层,做个渐变效果。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

Photoshop设计简单黑色网页模板界面4

现在添加网页名称或logo。

Photoshop设计简单黑色网页模板界面5

为了使它看起来像是渐变镶嵌效果,我们将使用相同的导航菜单制作方法,Ctrl键单击文字层,以获得您的文本选择。在文字层下创建一个新的层,并选择“选择修改展开”。展开5像素或您自己选择,在于选择另一个渐变和上方相反的方向。

Photoshop设计简单黑色网页模板界面6

现在好了吗?想下面写上标题文字。

Photoshop设计简单黑色网页模板界面7

现在选择刚才制作的顶部效果图层,进行全选。使用圆形选择工具,按住ALT键,删除如下所示为您的选择椭圆形。

Photoshop设计简单黑色网页模板界面1

看看选择效果,“选择“图像调整”,进行调整对比度和亮度,调整亮一点。

Photoshop设计简单黑色网页模板界面2

创建一个新层,并选择“编辑描边”,看看下面的效果吧~~  

Photoshop设计简单黑色网页模板界面3

选中上右下三个要删除部分,并将其删除,(我们只要左边)如下所示。

Photoshop设计简单黑色网页模板界面4

我们的logo标题应该要的是这样的效果。

Photoshop设计简单黑色网页模板界面5

现在制作下面的内容部分。选择圆角矩形工具

Photoshop设计简单黑色网页模板界面6

新建一个图层,拖出两个如下图一样的矩形。

Photoshop设计简单黑色网页模板界面7

选择两个矩形,并在顶部制作出渐变的效果来。

Photoshop设计简单黑色网页模板界面8

选择“编辑描边”,并添加一个暗灰色的边框选择

Photoshop设计简单黑色网页模板界面9

在黑色边框内添加灰边效果 

Photoshop设计简单黑色网页模板界面10

现在给两个矩形添加阴影效果。填充黑色,选择"过滤模糊高斯模糊"。

Photoshop设计简单黑色网页模板界面11

添加内容,OK,仅此而已!简单的效果出来了~~~。

Photoshop设计简单黑色网页模板界面12

来源:http://www.tulaoshi.com/n/20160319/1901157.html

延伸阅读
我有特别的网页对比技巧,如果你想突出网页上的某个内容,最简单有效的方法就是让暗色包裹整个界面,然后利用从优设学来的配色技巧,让你的重点变得一眼可见,光说不练假把式,今天我们精选了20个巧妙利用亮色突出内容的黑色背景网站,保证让你点赞。 Q Ideas LOUIS XIV Energy Bay Street Biergarten Visage FLIPP Circl...
PS网页设计:新手学习蓝色风格 来源:图老师 最终效果 第1步:新建文件(Ctrl + N,大小为1200 × 1200px;透明背景   第2步:创建头部,新建图层(ctrl+shift+N)大小为1200x120px 填充颜色,选择图层样式 渐变叠加 第3步:在第2步层下新建层,使用渐变工具(G) 第4步:选择视图 新建参考线 ;在以下两个位子...
这个时代,最不能容忍的就是没有创意,除了扁平化设计、复古设计、拟物设计、还有神马可以注入到我们的页面设计中呢? 嘿!还记得我们初中时候的几何课么?显然,有很多设计师已经不愿意提及这段不堪回首的往事?角边角、边角边、边边边!哈哈,好吧瞧我还记得这些概念!那么今天我们要谈的就是如何把这些几何元素运用到网页设计中。 其实web...
先看效果图。 新建文档1280x1024像素,背景白色,建新层,填充黑色,添加图层样式。 效果如下。 建新层,画一个黑色圆角矩形。 添加图层样式。 效果如下。 建新层,用钢笔画出下图所示路径,转为选区填充白色,图层模式叠加,不透明度20%,填充75%。 建新层,用矩形工具做如下选区,填充0082f0,去掉选区用...
PS酷炫的双重曝光效果   双重曝光技法日益流行,甚至很多相机也支持这一功能。 利用PS打造专属的双重曝光效果,可玩性很高,但是流程往往复杂。 本教程,将教你简易打造双重曝光效果,仅仅七步就能完成。 步骤1 首先用PS打开城市图像,作为背景。 这是城市夜景图。 然后通过文件置入,导入女子图像...

经验教程

164

收藏

88
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部