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

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

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

【 tulaoshi.com - PS 】

效果图:

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

Step 1

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

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

Step 2

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

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

Step 3

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

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

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

Step 4

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

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

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

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

Step 5

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

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

Step 6

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

使用直线工具画一条亮红色直线,然后再用黑色画另外一条直线(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教程,图老师教程网

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

Step 11

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

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

完工

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

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

延伸阅读
【PS文字特效】用PS光与影强化3D立体字3D效果 文字特效是Photoshop中一个重要的应用,各路高手都有大量讲述打造特色效果字体的教程,其中不少都是以3D立体为主的,要在平面的图像中表现出立体效果,其实并不是一件很难的事情,重要的是用户自己要对立体感有认识,本教程旨在帮助大家建立基本的立体感,为大家学习其他3D效果打下基础。教程...
来源:PS联盟 作者:Sener PS自带的3D工具可以做出非常不错的立体字,不过纹理部分处理还是不够自然,尤其是转角处的纹理过渡不够自然。用手工的方法可以解决这个纹理,尤其是纹理部分可以自己按照笔画的弧度任意变形以适合个性化文字 。 最终效果 1、新建一个800 * 600像素的文件,选择渐变工具,颜色设置如图1,稍微斜一点拉出图2所示的线性...
标签: PS PS基础
本教程主要使用Photoshop制作金属质感的3D立体字,教程主要使用滤镜工具来制作纹理配合笔刷的使用和素材的合成完成最终效果图,喜欢的朋友让我们一起来学习吧。 教程素材: 超酷的3D金属字PS教程素材 和 节点式PS滤镜Filter Forge 2.008 额外的200多个精品预置 最终效果 1、建立基本框架和文字 (1)新建文档1000×1000像素文件,设置分...
标签: 电脑入门
想制作简单的3D课件,却对专业的3D软件望而生畏?不必苦恼,用Powerpoint也可解燃眉之急。只要巧妙利用它的三维设置功能,同样可以完成3D效果的逼真课件。 制作三维立体图 首先,插入平面自选图形,如矩形、圆形等。然后,单击绘图工具栏上的〔三维效果样式〕按钮,为自选图形选择一种立体效果。 打开三维设置工具栏 单击〔三维效果样式〕按...
来源:PS联盟 作者:Sener 这里的立体字使用手工制作的,相对来说要复杂一点。首先需要用钢笔勾出自己所需的文字形状,然后用图层样式做出质感。再根据文字做出立体面,渲染好立体面的颜色即可。 最终效果 1、新建一个1024 * 768像素的文件,选择渐变工具,颜色设置如图1,拉出图2所示的径向渐变作为背景。 图1 图2 2、打开图3所示的...

经验教程

424

收藏

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