Photoshop设计移动APP应用类型网页黑色风格网站教程

2016-03-19 01:53 14 1 收藏

下面图老师小编跟大家分享一个简单易学的Photoshop设计移动APP应用类型网页黑色风格网站教程教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

【 tulaoshi.com - PS 】

最终效果

Photoshop设计移动APP应用类型网站,图老师

教程所需素材

所有素材打包下载:http://urlxf.qq.com/?JRbqE37

第一步

新建(Ctrl + N)一个 1200 x 1150 px,背景为:#FFFFFF的文档。使用“矩形选择工具”(M)画一个 1200 x 220px的矩形框,然后填充颜色(此颜色不做固定要求)。

Photoshop设计移动APP应用类型网站,图老师

接下来,我们把刚刚创建的图层命名为“header”。使用“圆角矩形工具”(U)并设置半径为20px。

Photoshop设计移动APP应用类型网站,图老师

画一个950 x 60px 的圆角矩形

Photoshop设计移动APP应用类型网站,图老师

命名圆角矩形图层“Navigation“。重新选择圆角矩形工具(U)然后在“Navigation“右上方再次拖出一个圆角矩形作为搜索框。把该层命名为 “Search”。

Photoshop设计移动APP应用类型网站,图老师

第二步

选择 “Header” 图层 按照如下设置添加”图层样式“

投影设置:不透明度:34%;角度:90度;距离:5px; 大小:5px;

Photoshop设计移动APP应用类型网站,图老师

渐变叠加

Photoshop设计移动APP应用类型网站,图老师

在“Header”图层上方建立一个发光图层并命名为“Header Glow”. 选择 “Header”图层并执行命令 “图层 载入选区”选择 “渐变工具” (G) “镜像渐变”. 如图所示。

Photoshop设计移动APP应用类型网站,图老师

然后把刚刚设置的图层透明度降低为“15%”

Photoshop设计移动APP应用类型网站,图老师

导航制作

选择 “Navigation”然后添加下面的图层样式使用以下设置。

Photoshop设计移动APP应用类型网站,图老师

Photoshop设计移动APP应用类型网站,图老师

Photoshop设计移动APP应用类型网站,图老师

在内部导航栏中使用文字工具(T)添加一些文本链接

Photoshop设计移动APP应用类型网站,图老师

在每一个导航项之间,创建两个像素的线条 一条黑、一条白。如下图所示

Photoshop设计移动APP应用类型网站,图老师

然后把刚刚的线条的混合模式设置为“叠加”。

Photoshop设计移动APP应用类型网站,图老师

接下来,我们将创建一个悬停状态的导航项(即选中状态)。选择缩放工具(Z)然后缩放到一个导航,画一条白色#ffffff的线条。如下图所示

Photoshop设计移动APP应用类型网站,图老师

设置该线条的图层样式,如下图所示。

Photoshop设计移动APP应用类型网站,图老师

设置完成后的效果如下图所示。

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

Photoshop设计移动APP应用类型网站,图老师

选择搜索图层按照下图所示的设置为其添加图层样式。

Photoshop设计移动APP应用类型网站,图老师

Photoshop设计移动APP应用类型网站,图老师

Photoshop设计移动APP应用类型网站,图老师

样式设置完后,利用“自定义形状工具”(U)添加一个搜索图标,并在左边用文本工具(T)输入“Search...”.

Photoshop设计移动APP应用类型网站,图老师

完成头部,接下来我们将添加网站名称及标语。

Photoshop设计移动APP应用类型网站,图老师

创建一个新图层,利用选框工具(M)

一旦选择了填充(G)选定区域与任何随机颜色,然后添加一个渐变叠加使用以下设置。

Photoshop设计移动APP应用类型网站,图老师

背景创建完成后,我们将在左侧添加文本信息,右侧添加图像。

Photoshop设计移动APP应用类型网站,图老师

需要的图像教程盒子已经打包上传。

复制下载到的素材:htc_pad_2_by_esintitasarim-d325zed.jpg Ctrl+T 变形工具调整大小。

Photoshop设计移动APP应用类型网站,图老师

打开下载到的素材放大镜拖动到HTC PAD2的底部

Photoshop设计移动APP应用类型网站,图老师

再次打开HTC素材置于放大镜图层的下层,设置为剪切蒙板.然后移动(V)HTC较大版本图层直到如下图所示。

Photoshop设计移动APP应用类型网站,图老师

创建底部导航

新建一个图层,如下图所示(蓝色区域)

Photoshop设计移动APP应用类型网站,图老师

在刚刚添加的图层中,设置渐变叠加。使用下图参数进行设置。

Photoshop设计移动APP应用类型网站,图老师

利用文本工具添加导航名称,并用头部导航所使用的线条设置为该导航添加设置。最终效果如下图。

Photoshop设计移动APP应用类型网站,图老师

最后上面的子标题添加一个指向上的小箭头。还可以使用多边形套索工具(L)创建。

Photoshop设计移动APP应用类型网站,图老师

创建内容区域

选择矩形选框工具(M),然后选择在最后一点的白色区域,如下所示。

Photoshop设计移动APP应用类型网站,图老师

设置前景色为# cecece和背景色设置为# ffffff,选择渐变填充工具(G)然后拖动一个线性渐变的 顶部选择向下几个像素。

Photoshop设计移动APP应用类型网站,图老师

选择矩形选框工具,在顶部创建两个1像素线条,就跟头部导航的一样。创建完成后设置透明度为50%

Photoshop设计移动APP应用类型网站,图老师

在剩下的空间我们开始建立内容,如下图所示。

Photoshop设计移动APP应用类型网站,图老师

建立底部

For the footer simply select the “Rectangular Marquee Tool” (M), drag a selection out at the bottom of the cantulaoshivas then fill (G) the selection with the color black #000000. Inside of the footer add your copyright information and maybe a small textual navigation.

页脚只需选择矩形选框工具(M),将一个选择出底部的画布然后填充(G)选定区域使用黑色# 000000。并在页脚添加你的版权信息。

Photoshop设计移动APP应用类型网站,图老师

结论

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

谢谢参与本教程,如果你按照本教程制作完成的作品。可以发布在教程评论上面。

Photoshop设计移动APP应用类型网站,图老师

 

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

延伸阅读
大标题、大背景、要留白、用纯色、越薄越好。今天腾讯游戏的莫同学总结了简约风格设计的五个关键要素,有案例有详述,方法可靠,令人信服,这波简约潮流挡不住,有干货就赶紧学起来吧。 莫:随着网页技术的不断发展,网页设计的趋势在改变,扁平化、响应式、视觉差滚动、卡片式等给设计师带来了更多的发挥空间。简约的设计,也以其简洁直观、...
标签: PS PS教程
本文由 中国 龟爬树(邓志峰) 原创,转载请保留此信息!   1、新建一个150X150像素的透明文档,用矩形选择工具选取一个方形区域,并填充白色,如下图 2、点击右键设置图层样式如下图 渐变叠加 描边 3、再新建一个6X6像素的文档,用铅笔工具画斜线如下图: 4、现在选择菜单项,编辑--定义图案,取...
标签: PS PS基础 PS效果
网站制作中导航栏的设置非常重要。漂亮的导航按钮和菜单会给网站增色不少。下面介绍一款精致的水晶风格按钮的制作。作者不仅介绍了按钮的制作还介绍了文字部分的制作方法,非常值得学习。 最终效果 1、创建一个新文件600  * 140px。现在选择圆角矩形工具制作一个圆角矩形如下图。 2、应用层样式:内发光,混合模式:滤色,方法:...
PS网页设计:黑色超酷风格推荐给大家,简单易学,有问题论坛讨论。图老师 最终效果:    黑色和红色是永远经典的搭配,很多国外网站都是这种风格,  今天临摹个了,写出过程,跟有疑惑的同学一起学习下。 新建一850px*830px的文件,前景色 #3b3b3b,背景色 #181818,“渐变”--“径向梯度”从上向下,实现以下效果: ...
杂志风格的网站是近年来很受欢迎的一种设计形式,特别是对于一些门户类型的杂志风格网站来说,将内容与设计很好的融合在了一起,有时候也经常被一些门户设计所参考。 不过除了门户外,其他类型的杂志设计风格也多种多样,总的一个特点就是杂志风格网站大多都会使用大量的图片或者类型报纸的排版形式,本文中的网站虽然都属于杂志风格,不过设...

经验教程

571

收藏

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