Photoshop打造彩色玻璃导航菜单

许多网页元素都可以使用Photoshop来制作完成,今天我们就来学习一下如何用Photoshop来打造质感 十足的彩色玻璃按钮,并用按钮组成漂亮的导航菜单,最后再在Photoshop中将导航菜单输出为HTML网页 文件。

本文以Photoshop CS2中文版为例,其它版本的Photoshop在操作步骤上可能会略有差异。先看一下最 终效果。

最终效果

具体操作步骤如下。

1.启动Photoshop CS2中文版,按Ctrl+N打开“新建”对话框,根据需要稍做设置(大小应该能放得下 将来的导航菜单)后,单击“确定”按钮新建一个文档。

2.单击图层面板下方的“创建新图层”按钮新建一个图层。选择工具箱中的“圆角矩形工具”,在选 项栏中将其半径设置为15px,然后在新图层上画一个如图1所示的圆角矩形。

图1

3.现在对上述形状应用如下图层样式。

投影:

图2

时间: 2024-10-02 16:47:46

Photoshop打造彩色玻璃导航菜单的相关文章

Photoshop打造玻璃导航菜单

本文以Photoshop CS2中文版为例,其它版本的Photoshop在操作步骤上可能会略有差异.先看一下最终效果. 最终效果 具体操作步骤如下. 1.启动Photoshop CS2中文版,按Ctrl+N打开"新建"对话框,根据需要稍做设置(大小应该能放得下将来的导航菜单)后,单击"确定"按钮新建一个文档. 2.单击图层面板下方的"创建新图层"按钮新建一个图层.选择工具箱中的"圆角矩形工具",在选项栏中将其半径设置为15px

用Fireworks轻松打造滑动导航菜单

  用Fireworks 8,我们可以轻松打造滑动菜单,为网页增添一点酷酷的特效. 先看一下最后效果: 1.打开FW 8.0 (我用的是8.0,当然其它版本也是一样的. 2.新建一个文档.大小760X400像素. 3.用矩形工具画一个渐变的矩形,这里这个矩形是要做为导航条的背景,所以你可以调配自己喜欢的颜色. 4.然后我用直线工具画了两条线见下图,做为分隔线来用. 5.然后按住Shift+G把这两条线组合成对象,复制这个对象,从窗口对齐面板最后见下图: 6.来这几部就比较关键了,按下快捷键Ctr

纯CSS打造的导航菜单(附jquery版)_jquery

方式一:直接编写代码实现 效果如下: 代码如下: 复制代码 代码如下: <html> <head> <title>无需表格的菜单</title> <style> <!-- body{ background-color:#ffdee0; } #navigation { width:200px; font-family:Arial; } #navigation ul { list-style-type:none; /* 不显示项目符号 */ m

用Photoshop制作创意导航菜单

最终效果: 1.打开一幅素材为手的图片,用PS把手从图片中扣出. 2.创建一个新的图层,使用椭圆选区工具画一个圆形,将图新层放到手图层下面并进行填充. 3.复制该圆形图层,按比例进行放大,并放到第一个圆形的下面,填充为不同的颜色.

Photoshop实例教程:绘制iphone风格导航菜单

本教程学习如何用Photoshop打造专属于你自己的iphone风格导航菜单,主要用到了图层样式来完成的,下面让我们一起来学习吧. 先看效果图. 新建文档450x450像素,背景填充#32363c,新建图层画一个白色矩形. 把不透明度改为6%,类似下图效果. 新建图层,前景色#5b6573在顶部再画一个矩形. 复制6层,改变颜色,1.2.7同一颜色,3为红色,其它为白色. [1] [2]  下一页

Photoshop制作游戏网站顶部导航菜单

本文将教你用Photoshop绘制一个超酷的游戏网站的顶部导航菜单,大家看下面的具体制作步骤: 最终效果如下: 首先我们准备一张素材图片: 创建一新文档,然后当作背景来使用 新建立涂层,绘制一个填充色为#050505大小为1000 x 18 px矩形.然后再建一新涂层,绘制1 px 线条,填充seiko为#0D0D0D. 添加游戏名字.

Photoshop简单绘制圆角矩形导航菜单按钮

形状工具画一个圆角矩形: 添加一个锚点并删除这个新添加的锚点: 选择左下角的2个锚点: CTRL+T并将中心点定位到左边线: 右键,水平翻转: 同理翻转右边: 适用: Photoshop简单绘制圆角矩形导航菜单按钮

Photoshop打造Win7风格网站导航

一个Windows 7风格的导航菜单制作教程,下面是简单的制作步骤. 做了一个Windows 7风格的导航菜单.下面是简单的制作步骤.   制作背景 (1)新建一文件,大小自定,这里是600*400为例.设置前景色:#1592d7,背景颜色:#136da2, 选择径向渐变工具.从中间拖动得到下面效果:   (2)添加散射光条文.新建一层,左边工具栏选择-圆角矩形按钮-自定义形状按钮.找到下面这个形状,如果没有可以点击右边的小箭头,追加形状.   选中并在图层上拖动得到如下效果: 前景色设为白色(

PS制作iphone风格网页导航菜单教程

教程学习如何用Photoshop打造专属于你自己的iphone风格导航菜单,主要用到了图层样式来完成的,下面让我们一起来学习吧.         三联推荐:photoshop7.0迷你版免费下载    |  Photoshop CS5 中文免费下载  |  photoshop免费下载 先看效果图. 新建文档450x450像素,背景填充#32363c,新建图层画一个白色矩形. 把不透明度改为6%,类似下图效果. 新建图层,前景色#5b6573在顶部再画一个矩形. 分类: PS入门教程