Photoshop设计3D立体效果的网站抬头

2016-02-16 05:37 27 1 收藏

今天图老师小编给大家展示的是Photoshop设计3D立体效果的网站抬头,精心挑选的内容希望大家多多支持、多多分享,喜欢就赶紧get哦!

【 tulaoshi.com - PS 】

效果图:

Photoshop设计3D立体效果的网站抬头,PS教程,图老师教程网

Step 1

创建一个 1000x750像素大小的文件,双击背景图层将其变为可编辑的图层,并打开图层样式颜色叠加,用#47382e叠加。

Photoshop设计3D立体效果的网站抬头,PS教程,图老师教程网

Step 2

打开标尺(视图标尺),按下图添加一些参考线

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

Photoshop设计3D立体效果的网站抬头,PS教程,图老师教程网

Step 3

用矩形工具创建一个矩形,将该图层命名为header.

Photoshop设计3D立体效果的网站抬头,PS教程,图老师教程网

Step 4

将前景色设为黑色,选择椭圆工具创建一个阴影区域,大小要高于白色的矩形。将椭圆形图层命名为shadow,并将其置于header图层下面。

然后打开滤镜转换智能滤镜,之后滤镜模糊高斯模糊,半径为10像素,并把不透明度设为60%,得到下图效果:

Photoshop设计3D立体效果的网站抬头,PS教程,图老师教程网

Photoshop设计3D立体效果的网站抬头,PS教程,图老师教程网

Step 5

选中header图层,双击打开图层样式,选择渐变叠加,按照下图参数设置。

Photoshop设计3D立体效果的网站抬头,PS教程,图老师教程网

Step 6

使用直线工具画一条亮红色直线,然后再用黑色画另外一条直线(1像素),之后将红线和黑线图层编组,组命名为 vDivider。打开图层图层蒙版 现实全部。

使用径向渐变工具,从黑色到白色,自上而下拉去,在组上添加渐变效果。

Photoshop设计3D立体效果的网站抬头,PS教程,图老师教程网

Step 7

使用文字工具创建导航栏(字体白色)。然后将所有标签编组,命名为White Links。复制这个组,将其置于white links组下面,将字体颜色设为黑色,

然后将其向上和向左移动1像素大小的位置。这样是为了制作3D效果。

Photoshop设计3D立体效果的网站抬头,PS教程,图老师教程网

Step 8

按照 Step 6的方法制作分栏线。

Photoshop设计3D立体效果的网站抬头,PS教程,图老师教程网

Step 9

选择所有分栏线图层将其编组,并命名为hDividers?,然后打开图层图层蒙版显示全部。使用线性渐变(黑-白)在蒙版做渐变效果

Photoshop设计3D立体效果的网站抬头,PS教程,图老师教程网

Step 10

保存下面的纹理图片,然后用ps打开,选择编辑定义图案,将其命名为 webPattern。复制header图层,命名为pattern。然后双击打开图层样式,

取消渐变叠加,打开图案叠加,选择之前我们创建的webpattern图案叠加,然在pattern图层上添加图层蒙版,在图层蒙版创建径向渐变效果。

Photoshop设计3D立体效果的网站抬头,PS教程,图老师教程网

Photoshop设计3D立体效果的网站抬头,PS教程,图老师教程网

Photoshop设计3D立体效果的网站抬头,PS教程,图老师教程网

Photoshop设计3D立体效果的网站抬头,PS教程,图老师教程网

Step 11

现在来添加LOGO和勺子。敲入Chinavisual.com,其中Chinavisual使用粗一些的字体。然后添加图层样式:

Photoshop设计3D立体效果的网站抬头,PS教程,图老师教程网

Photoshop设计3D立体效果的网站抬头,PS教程,图老师教程网

Photoshop设计3D立体效果的网站抬头,PS教程,图老师教程网

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

Photoshop设计3D立体效果的网站抬头,PS教程,图老师教程网

Step 11

下载勺子图片,然后添加图层样式

Photoshop设计3D立体效果的网站抬头,PS教程,图老师教程网

完工

Photoshop设计3D立体效果的网站抬头,PS教程,图老师教程网

来源:http://www.tulaoshi.com/n/20160216/1568699.html

延伸阅读
标签: PS PS基础
本教程主要使用Photoshop制作金属质感的3D立体字,教程主要使用滤镜工具来制作纹理配合笔刷的使用和素材的合成完成最终效果图,喜欢的朋友让我们一起来学习吧。 教程素材: 超酷的3D金属字PS教程素材 和 节点式PS滤镜Filter Forge 2.008 额外的200多个精品预置 最终效果 1、建立基本框架和文字 (1)新建文档1000×1000像素文件,设置分...
来源:PS联盟 作者:Sener PS自带的3D工具可以做出非常不错的立体字,不过纹理部分处理还是不够自然,尤其是转角处的纹理过渡不够自然。用手工的方法可以解决这个纹理,尤其是纹理部分可以自己按照笔画的弧度任意变形以适合个性化文字 。 最终效果 1、新建一个800 * 600像素的文件,选择渐变工具,颜色设置如图1,稍微斜一点拉出图2所示的线性...
来源:PS联盟 作者:Sener 这里的立体字使用手工制作的,相对来说要复杂一点。首先需要用钢笔勾出自己所需的文字形状,然后用图层样式做出质感。再根据文字做出立体面,渲染好立体面的颜色即可。 最终效果 1、新建一个1024 * 768像素的文件,选择渐变工具,颜色设置如图1,拉出图2所示的径向渐变作为背景。 图1 图2 2、打开图3所示的...
来源:红动中国 作者:当流星陨落 制作立体字制作学习一些透视原理是非常必要的。只有掌握好透视方法,我们才可以用较为正确的方法作出任何方位的透视图。 最终效果 1、打开PS,输入文字,并用一个灰色背景框住。字体最好是方正形,便于后期的处理。 2、将文字经行透视变形,并在背景层画好透视点、线。 3、将文字复制,移动到...
来源:PS联盟 作者:Sener 本教程介绍稍微复杂的立体字制作方法。文字部分的造型可能比较复杂,要把文字部分用一条类似彩带的线条做出来,而且要有一定的透视效果,制作的时候要反复尝试。 最终效果 1、新建一个1024 * 768像素的文档,选择渐变工具,颜色设置如图1,拉出图2所示的径向渐变作为背景。 图1 图2 2、打开图3所示的文字素...

经验教程

51

收藏

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