本文关键词：ps做网站首页导航栏
做这行15年了，见过太多小白被PS劝退。
尤其是搞网站的时候。
一提到要自己做个首页导航栏。
心里就发慌。
觉得非得是美术生才行。
其实真没那回事。
我带过的徒弟，很多连色号都分不清。
照样能做出好看的导航。
今天不扯那些虚的。
就聊聊怎么用最笨的办法，搞定这个事。
先说个误区。
很多人喜欢把导航栏做得特别花哨。
五颜六色，特效满天飞。
结果用户打开网站。
第一反应是：晕。
导航栏是干嘛的？
是给人看的，不是给人玩的。
简洁，才是王道。
你看那些大厂官网。
腾讯，阿里。
哪个导航栏不是白底黑字？
或者简单的灰底。
反而显得高级。
所以，别在PS里搞太多图层效果。
投影、外发光，能省则省。
省下来的时间，去研究排版。
我一般怎么开始？
先定尺寸。
这个很重要。
现在的屏幕虽然大，但浏览器窗口也就那么宽。
导航栏高度，建议定在60到80像素。
太矮了，字挤在一起。
太高了，占地方。
首页首屏就没了。
用户得往下滑才能看到内容。
这体验太差。
我在PS里新建画布。
宽度1920像素。
高度80像素。
背景填个浅灰色。
f5f5f5 这种。
看着舒服，不刺眼。
接下来是文字。
字体选什么？
别用宋体，别用楷体。
用黑体。
微软雅黑，或者思源黑体。
字重选Regular或者Medium。
别用Bold，太粗了，看着累。
字号14px或者16px。
居中排列。
间距调一下。
字母之间，或者汉字之间，留点呼吸感。
我见过很多人，字挨着字。
像豆腐块一样。
看着就头疼。
导航栏一般有几个栏目？
首页，关于我们，产品展示，联系我们。
大概4到6个。
别太多。
多了用户记不住。
少了显得单薄。
这就得看你公司业务了。
对齐，对齐，还是对齐。
这是PS做网站首页导航栏的核心。
打开参考线。
把每个栏目对齐。
可以用PS的自动对齐工具。
但最好自己肉眼检查一下。
有时候软件会抽风。
看着对齐了，其实偏了一像素。
这像素，在屏幕上看不出来。
但在高清屏上，有点模糊感。
所以，多检查几遍。
颜色搭配。
别搞渐变。
除非你是做艺术网站。
普通企业站，纯色最好。
主色调，选你品牌色。
比如蓝色。
导航栏背景白色。
文字黑色。
鼠标悬停的时候，文字变蓝色。
或者背景变浅蓝。
这就够了。
简单明了。
用户知道哪里可以点。
不需要搞什么动态效果。
动态效果是前端代码的事。
PS只管静态图。
别越界。
很多人问，图标怎么做？
如果导航栏要加图标。
去网上找现成的。
别自己画。
除非你是插画师。
找那种SVG格式的。
导入PS。
矢量图，放大不失真。
放在文字左边。
距离文字5个像素。
这样看起来很整齐。
比你自己画的歪歪扭扭的强一百倍。
最后导出。
别直接存PSD。
那是源文件。
给前端用的，要PNG或者JPG。
PNG透明背景。
JPG有背景。
看你需要。
一般导航栏是长条形的。
可以切片导出。
或者整体导出。
整体导出方便前端写代码。
切片导出，如果背景复杂，可能有点麻烦。
建议整体导出。
文件名要规范。
nav_home.png。
别叫 新建图层1.png。
前端看到会骂人的。
说实话，ps做网站首页导航栏真的不难。
难的是你不敢动手。
我刚开始做的时候，也怕搞砸。
后来发现，搞砸了重来就行。
反正又不要钱。
多试几次，手感就来了。
别总想着一步到位。
先做个简单的。
再慢慢加细节。
比如加个下划线。
鼠标悬停时，文字下面出现一条短线。
这个效果，在PS里用形状工具画个矩形。
放在文字下面。
颜色选品牌色。
透明度调低点。
看着就精致。
还有个小技巧。
做个深色模式的导航栏。
现在很多人喜欢深色模式。
你把背景改成#333333。
文字改成白色。
悬停时，文字变亮一点。
这样一套设计，两个版本。
客户会觉得你很专业。
其实工作量没增加多少。
就是换个颜色而已。
别听那些专家说，导航栏要创新。
创新是死路一条。
用户习惯了左边是Logo，右边是菜单。
你非要搞个中间Logo，下面菜单。
用户得找半天。
体验极差。
遵循惯例，才是最好的设计。
当然，Logo可以稍微有点设计感。
字体改改，颜色换换。
这就够了。
总之，别把ps做网站首页导航栏想得太复杂。
它就是一排字，几个色块。
把它排整齐，颜色配舒服。
就成功了。
剩下的，交给前端去写代码。
你只管出图。
别纠结像素级完美。
肉眼看着顺眼就行。
毕竟，用户是来看内容的。
不是来研究你导航栏对齐的。
如果你还是搞不定。
或者想做个更炫酷的。
可以找我聊聊。
我帮你看看。
毕竟，吃饭的家伙，不能丢。
有问题，随时问。
别自己在那死磕。
浪费时间。
