用PS怎么做出导航栏的效果

作者&投稿:文届 (若有异议请与网页底部的电邮联系)
用PS怎么做出导航栏的效果??~

对所要编辑的目标进行切片划分,右键点击——编辑切片选项——填入url——存储为html格式

其实很简单。先用矩形选框工具画个适当长的条子,填充那个选好的颜色,在用钢笔再画出一个的角。CTRL+回车成为区域后直接填充刚才填充的颜色。然后在复制个角,分别放到长条子适当的地方(两边)。(当然将另一个角CTRL+T后右击水平翻转下再放到另一边。)。然后选中长条子图层,右击混合选项,将投影设置下,角度80度左右,距离、扩展和大小适当的调整就OK!(如图)

  1. 打开PS,新建一文件,大小设置为“200*800”,背景色设为“透明”。

  2. 选择“工具栏”中的“圆角矩形工具”项,并设置合适的“半径”(如20像素),然后在绘图区域进行绘制,可以通过按键盘组合键“Ctrl+T”对其进行调整。

  3. 切换至“路径”面板,点击“将路径作为选区载入”按钮。

  4. 接着返回“图层”面板,选择“工具栏”中的渐变工具,并设置合适的渐变色进行填充。

  5. 接着双击该图层,为其添加“浮雕 图层样式”

  6. 新建一个“图层2”,接着选择“圆角矩形工具”,将半径设置为“10像素”,并绘制如图所示的图形。然后切换至“路径”面板,点击“将路径作为选区载入”按钮,然后返回图层面板,填充一种纯色。

  7. 双击“图层2”,为其添加“图层样式”

  8. 接着将“图层2”拖动到“新建图层”按钮上以创建“图层2 副本”,接着选择“移动”工具将“图层2 副本”移动到合适的位置。

  9. 按住键盘上“Ctrl”键不放的同时,点击“图层2 副本”以选中该图像,然后为其填充另一种颜色。

  10. 基本的导航栏结构已经做好。接下来创建切片。点击“工具栏”中的“切片”工具,然后对整个图像区域进行划分。

  11. 最后点击“文件”→“存储为Web所有格式”项,选择文件类型为“JPEG”格式,接着点击“存储”按钮,在打开的“另存为”窗口中将“存储类型”设置为“网页和图像”,最后点击“保存”按钮。



步骤阅读
方法/步骤
[图]>01
打开PS,新建一文件,大小设置为“200*800”,背景色设为“透明”。
共3图[图]>02
选择“工具栏”中的“圆角矩形工具”项,并设置合适的“半径”(如20像素),然后在绘图区域进行绘制,效果如图所示:
可以通过按键盘组合键“Ctrl+T”对其进行调整。
[图]>03
切换至“路径”面板,点击“将路径作为选区载入”按钮。
共3图[图]>04
接着返回“图层”面板,选择“工具栏”中的渐变工具,并设置合适的渐变色进行填充。
[图]>05
接着双击该图层,为其添加“浮雕 图层样式”,参数如图:

共3图[图]>06
新建一个“图层2”,接着选择“圆角矩形工具”,将半径设置为“10像素”,并绘制如图所示的图形。然后切换至“路径”面板,点击“将路径作为选区载入”按钮,然后返回图层面板,填充一种纯色,如“黄色”。
共3图[图]>07
双击“图层2”,为其添加“图层样式”,参数及效果如图所示:
共2图[图]>08
接着将“图层2”拖动到“新建图层”按钮上以创建“图层2 副本”,接着选择“移动”工具将“图层2 副本”移动到合适的位置。
[图]>09
按住键盘上“Ctrl”键不放的同时,点击“图层2 副本”以选中该图像,然后为其填充另一种颜色,如“红色”。
共2图[图]>10
至此,基本的导航栏结构已经做好啦。下面我们来创建切片。点击“工具栏”中的“切片”工具,然后对整个图像区域进行划分,其中的一种分割方式如图:
共3图[图]>11
最后点击“文件”→“存储为Web所有格式”项,选择文件类型为“JPEG”格式,接着点击“存储”按钮,在打开的“另存为”窗口中将“存储类型”设置为“网页和图像”,最后点击“保存”按钮。
到此,利用PS制作导航栏的过程完成。在下一讲中,小编将教大家将导航栏图片放入网页中的夜方法。
经验内容仅供参考,并受版权保护。
本条经验由feifeidown编写


网页设计ps画布最佳大小是几×几像素 导航栏呢?
中间内容区大小不能小于1000px,一般是1000-1200,高度不限制,导航栏是通栏,根据最大的分辨率来,一般1920差不多了。操作方法如下:1、首先单击【文件】按钮,在菜单中选择【新建】命令。2、在新建文档对话框中,设置文档的详细信息,单击【创建】按钮。3、然后单击工具箱中的【圆角矩形工具】。4、在...

ps工具栏不见了怎么调出来
先找到顶部导航栏的“窗口”选项。再在下拉的选项栏中选择工具,此时左边的工具栏就出现了。工具\/原料:华硕DN20 win10 PS2019 1、首先,分析一下工具栏消失的原因很可能是用户不小心点到了图中的“×”,如果是,那以后要注意一点。2、这是工具栏消失的截图。3、那么,此时就先找到顶部导航栏的“...

PS 制图,导航栏是长方形,如何均等分成8块。
这个问题很好解决哦,你把这整个图用切片工具切一下,然然后单击右键,选择划分切片,水平和竖着方向随你选,它会自动计算的。

PS怎么弄标题?
网页中 这叫导航栏 在PS中可以生成单个 或者整体 单个可以弄成 动态的 整体就需要在DW中圈选每个标题的图片范围然后添加链接。

PS求教 苹果官网的导航栏
一般做网站的导航条,基本用的都是图层样式

ps中如何让导航栏隐藏
按Tab键,清爽界面。自由选择,可以全屏。

ps顶部导航栏有两层
有两层。ps软件是Adobe系统公司开发的,根据查询Adobe系统公司官网显示,ps顶部导航栏有两层。ps是由AdobeSystems开发和发行的图像处理软件,主要处理以像素所构成的数字图像。

新浪网站导航栏的那个“竖丨”怎么画出来的?就是隔开栏目之间的那个丨...
那个就是个图片啊,ps里面先画笔,然后斜面与浮雕效果啥的就行了

ps如何画定位线ps怎么画定位线
ps定位线快捷键?ctrl加上R键是定位线快捷键,具体的方法如下 1.首先打开PS,在PS导航栏中点击视图中的显示网格。2.然后显示网格的快捷键为Ctrl+R键。3.在导航栏的编辑中,点击首选项选择网格。4.调整网格线参数后点击确定即可。注意事项:1.网格线参数可自由调整。2.快捷键为Ctrl+‘。

ps怎么添加历史记录面板ps怎么添加历史记录面板图标
方法如下:一、双击PS图标进入Photoshop主页,点击导航栏的“编辑(E)”:二、在“编辑”弹出的菜单栏中选择“首选项(N)”和“性能(E)”:三、在弹出的“首选项”窗口中,我们可以看到右侧有一个“历史记录状态”,我们可以下拉右侧以选择更多的记录次数:四、设置完成后返回Photoshop主页,就可以点击...

顺德区18534719564: 怎么用photoshop制作导航栏 -
愚翔复方: 先做出一个,调还间距,Ctrl+J复制,Ctrl+T自由变换移动距离,Ctrl+Shift+Alt+T等距复制多个

顺德区18534719564: 网页导航条用ps怎么做 要详细一点的 -
愚翔复方: 忘了写文抄字描述就发了,步骤为:1、新建一个矩形选区,就是设置好你想做的导航条的宽和高2、填充你想要的颜色3、写上你想要做的导航栏目4、对你的背景层进行浮雕效果,在涂层下方 这个图标,设置你想要的背景样式,看起更有立体感5、然后在对 这个就是你的zd导航之间的分隔线进行设置浮雕,如上面最后一幅图6、再对你做好的导航条进行切片

顺德区18534719564: 怎样用PS制作一个导航栏?麻烦说一下具体步骤. -
愚翔复方: 就是PS 制作一个啊 比如首页 公司简介 产品展示 联系我们 等 一般的960 980 1002的宽度 高度最好在200以内吧

顺德区18534719564: 如何用Photoshop制作网站的“导航栏” -
愚翔复方: 网站的“导航栏”作为网页设计中的重要组成部分,扮演着极为重要的角色.网页导航栏设计的成功与否,在很大程序上决定着整个网页的美观程度.用Photoshop设计“导航栏”,不仅讲究ps技术,更在于发挥你的创造力和想象力,这是学习ps最难之所在.具体制作过程见网上教程.

顺德区18534719564: 你好,请问怎么样用PS制作导航条,越详细越好啊,谢谢了
愚翔复方: http://www.xker.com/tag.php?/Photoshop%B5%BC%BA%BD%CC%F5/ 这里非常的详细,各种导航条

顺德区18534719564: 在ps中做一导航条,怎么操作才能成为网片中的一个图片 -
愚翔复方: 切片工具!!

顺德区18534719564: 谁能告诉我这个导航栏的背景用PS怎么做?谢谢各位了,就是导航栏最下边的木头背景
愚翔复方: 给你P好了,还好图片像素不是很大. 用PS这图片还可以,不损像素无限放大哦! 无比强大的软件最好自己去学学

顺德区18534719564: 用PS 怎么做出那种鼠标移动经过变色的变色导航栏?就是拍拍店铺那种导航栏、或者不是PS做出来的?
愚翔复方: 你说移动变色的导航是用代码写的,并不是PS就有完成的,PS只能做图

顺德区18534719564: PS做导航条背景,请问如图中黄圈中的竖条怎么做的? -
愚翔复方: 你可以用系统带有画图程序 编辑一下,再另存为jpg格式,占的空间只有70k以下 先选择改的文件,点右键编辑,"另存为",确定即可. so easy~

顺德区18534719564: 利用Photoshop制作导航条时需要用到渐变,矩形工具吗
愚翔复方: 这个根据你实际要做的导航的情况来看的 要想效果好的话 用渐变当然更好了 也不一定非要用渐变才能出好的效果!!!!

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网