查看: 6578|回复: 2
上一主题 下一主题 跳转到指定楼层

[转载][中级教程]Photoshop设计网页导航菜单模板教程

291

主题

1691

存在感

346

活跃日
喵~离线 手残事多网卡。
 7 

SOS团四星级★★★★

发帖: 6343
SOS币: 11022
注册: 2009-07-30
访问: 2024-02-29

楼主
发表于 2012/07/20 | 编辑
关键词:Photoshop教程,设计网页,导航菜单,模板教程
如何设计与PSD模板标题导航菜单教程
许多网站管理员/设计师专家图标/横幅图形设计,但只有10%个是与设计好一个非常好看的网站模板。今天我们要学习如何设计一个模板头有标志和导航菜单和部分内容区。一个很容易遵循在Adobe Photoshop CS3/CS5与PSD教程。
持续时间:30分钟。
本教程为设计前沿网网友Alin翻译,转载必须注明作者和出处。转载请不要打上贵站水印。否则被追究责任不关本站的事
英文原创作者:psdpoint.com
原英文教程地址:http://psdpoint.com/design-template-header-navigation-menu-tutorial-psd.html
翻译借助百度在线翻译,翻的不准大家去看原英文教程

效果图

图片需登录后查看


步骤1:创建一个新项目,分辨率为1280×1024像素,画一条水平线带使用矩形选框工具(m)。

图片需登录后查看


Step 2: 现在打开图层样式>渐变叠加,设置它的颜色就像下面显示。

图片需登录后查看


Step 3: 现在创建SITENAME/标志的形状,选择圆角矩形工具(U),半径为10像素下面显示.

图片需登录后查看


Step 4: 对于这个新的形状,再打开图层样式>渐变叠加设置属性,如下面的截图上色。

图片需登录后查看


Step 5: 要添加一些阴影,按下面的图设置阴影属性.

图片需登录后查看


Step 6: 用于显示网站名称,选择圆角矩形工具(u),半径为4像素的形状像如下.

图片需登录后查看


Step 7: 下一步,我们使用矩形选框工具(M).

添加一个黑暗地带的导航菜单边框,如下图所示

图片需登录后查看


Step 8: 现在选择这层并且复制粘贴(CTRL + V)和划分导航菜单 如下.

图片需登录后查看


Step 9: 现在我们要添加导航菜单文本给出截图使用文本文字工具(T).

图片需登录后查看


Step 10: 下一步,我们要添加子菜单条,使用圆角矩形工具(U)创建半径为10像素的形状像以下

图片需登录后查看


Step 11: 打开其图层样式,单击并选择渐变叠加,设置如下设置.

图片需登录后查看


Step 12: 现在选择自定义形状工具(U),并作出如下图的形状

图片需登录后查看


Step 13: 再次选择“文本文字工具(T)和类型如下的文本.

图片需登录后查看


Step 14: 现在,关于我的右侧漂浮,选择圆角矩形工具(U),半径为10像素的形状如下喜欢.

图片需登录后查看


Step 15: 现在复制图层样式,从子菜单层,并粘贴到我的浮动层.

图片需登录后查看


Step 16: 关于about me文字使用下面显示的文本文字工具(T).

图片需登录后查看


Step 17: 现在我们将添加横幅模板下的导航使用圆角矩形工具(U)。

图片需登录后查看


Step 18: 现在选择一个banner图片.

图片需登录后查看


Step 19: 打开其图层样式,并选择以下设置阴影.

图片需登录后查看


Step 20: 选择创建一个角落的形状Ploygonal套索工具(L).

图片需登录后查看


Step 21: 现在复制其他层和粘贴图层样式,像如下图层样式.

图片需登录后查看


Step 22: 现在选择文本文字工具(T)和类型样品的文字或任何其他文本.

图片需登录后查看


最后效果图如下:

图片需登录后查看

54

主题

597

存在感

752

活跃日
 10 

SOS团之究级水库!!

1楼
发表于 2012/07/20 | 编辑
膜拜0.0
话说这个版本和高中学得好像不太一样

291

主题

1691

存在感

346

活跃日
喵~离线 手残事多网卡。
 7 

SOS团四星级★★★★

2楼
发表于 2012/07/20 | 编辑
引用第1楼ingge20092012-07-20 10:22发表的“”:
膜拜0.0
话说这个版本和高中学得好像不太一样


导航其实也是一种设计……
全部一样的话有什么意思
这次转的只是转的导航的其中一个做法而已

关于我们|无图版|SOSG WIKI

Copyright © 2006-2024 SosG.Net
Total 0.012030(s) query 8, Gzip enabled,  沪ICP备07006640号-3