个人网站首页导航栏PS制作教程

导航栏是网站的“脸面”，它决定了用户的第一印象，并直接影响网站的可用性，我们将设计一个包含Logo、主导航菜单、行动号召按钮和移动端菜单图标的完整导航栏。

个人网站首页导航栏ps制作教程
（图片来源网络，侵删）

准备工作：构思与规划

在打开PS之前,先花几分钟思考一下：

  1. 风格定位： 你的网站是什么风格？（极简、科技感、复古、艺术、商务？）导航栏的风格需要与整体网站保持一致。
  2. 色彩方案： 确定主色调、辅助色和文字颜色，导航栏背景色会比页面主体深，以形成区隔。
  3. 字体选择： 选择1-2种字体，一种用于Logo（可艺术化），一种用于导航菜单（需清晰易读）。
  4. 布局规划： 想象一下导航栏的布局，通常是：
    • 左侧： Logo
    • 中间： 主导航菜单（首页、作品、博客、联系等）
    • 右侧： 行动号召按钮（如“联系我”、“开始项目”）

新建PS画布

  1. 打开 Photoshop，点击 文件 > 新建。
  2. 尺寸设置：
    • 宽度： 1920px (这是一个标准的桌面端宽度，可以覆盖大部分显示器)。
    • 高度：80px (这是一个常见的导航栏高度，你可以根据设计调整，如60px, 100px)。
    • 分辨率： 72像素/英寸 (网页设计标准)。
    • 白色 或 透明，我们先设置为白色，方便设计。
  3. 点击 创建。

绘制导航栏背景

  1. 新建图层： 在图层面板底部，点击 新建图层 图标，养成好习惯，每个大元素都在新图层上操作。
  2. 选择工具： 选择 矩形选框工具。
  3. 绘制选区： 在画布顶部拖动，创建一个与画布等宽、高度为 80px 的矩形选区。
  4. 填充颜色： 设置你的前景色为你选择的导航栏背景色（例如深蓝色 #1E3A5F），然后按 Alt + Delete (Win) / Option + Command + Delete (Mac) 填充前景色。
  5. 取消选区： 按 Ctrl + D (Win) / Command + D (Mac) 取消选区。

设计Logo

  1. 新建图层： 再新建一个图层，命名为 "Logo"。
  2. 输入文字： 选择 文字工具，在画布左侧输入你的名字、缩写或品牌名。
    • 字体： 选择一个你喜欢的字体（无衬线体如 Montserrat，衬线体如 Playfair Display）。
    • 大小： 调整字号，使其在视觉上平衡（28-36px）。
    • 颜色： 设置文字颜色为浅色（如白色 #FFFFFF），确保在深色背景上有足够对比度。
  3. 添加图形（可选）： 如果你想在Logo旁加一个图标，可以使用 形状工具（如圆角矩形、圆形）或钢笔工具绘制，然后与文字组合。

制作主导航菜单

  1. 新建图层： 新建一个图层，命名为 "Menu"。
  2. 输入菜单项： 使用 文字工具，在Logo右侧依次输入菜单项，如 "Home", "About", "Works", "Blog", "Contact"。
  3. 调整样式：
    • 字体： 选择清晰易读的无衬线字体（如 Lato, Roboto, Open Sans）。
    • 大小： 通常比Logo字号小一些（如 16-18px）。
    • 颜色： 白色或浅灰色。
    • 间距： 使用 字符 面板（窗口 > 字符）调整字间距，使菜单项之间有舒适的间距，你也可以使用 移动工具 手动拖动文字来调整间距。

创建行动号召按钮

  1. 新建图层： 新建一个图层，命名为 "CTA Button"。
  2. 绘制按钮形状：
    • 选择 圆角矩形工具。
    • 在顶部属性栏设置一个合适的 半径（如 5px）。
    • 在导航栏右侧拖动绘制一个圆角矩形。
  3. 填充颜色： 设置一个与背景色形成对比的前景色（如亮橙色 #FF6B35），然后填充形状。
  4. 添加按钮文字：
    • 新建一个文字图层,输入按钮文字，如 "Let's Talk"。
    • 设置文字颜色为白色,并调整字号，使其在按钮内居中。
  5. 对齐与居中：
    • 选中按钮形状图层和文字图层,按 Ctrl + G (Win) / Command + G (Mac) 将它们编组。
    • 使用 移动工具，在顶部属性栏点击 垂直居中 和 水平居中，让按钮完美地位于导航栏右侧。

添加交互效果（悬停状态）

一个专业的设计会考虑到交互效果,我们制作一个鼠标悬停时按钮变亮的简单效果。

  1. 复制按钮组： 在图层面板中，按住 Alt 键拖动 "CTA Button" 组，复制一个副本，重命名为 "CTA Button - Hover"。
  2. 修改颜色： 选中副本组的圆角矩形图层，降低其不透明度至 80%，或者选择一个更亮的颜色，这样，当用户鼠标悬停在网页上时，按钮就会变亮。
  3. 隐藏悬停状态： 为了在最终导出时只显示默认状态，点击 "CTA Button - Hover" 组旁边的 眼睛 图标，将其隐藏，你可以在制作网页时，通过CSS代码来控制这个悬停状态的显示。

制作移动端菜单图标

这个图标通常在桌面端是隐藏的,只在移动设备上显示。

  1. 新建图层： 新建一个图层，命名为 "Mobile Menu Icon"。
  2. 绘制图标：
    • 选择 矩形工具。
    • 在导航栏最右侧（或Logo旁边）绘制三个水平小矩形，代表菜单，它们之间要有均匀的间距。
    • 你也可以使用 形状 > 菜单 工具直接绘制。
  3. 样式调整： 设置图标的颜色为白色，并调整其大小和位置，使其看起来协调。

导出切图

设计完成后,需要将各个元素导出为网页可用的图片文件。

个人网站首页导航栏ps制作教程
（图片来源网络，侵删）

  1. 使用“导出”功能（推荐）：

    • 选中你需要导出的图层（例如Logo、按钮图标）。
    • 点击 文件 > 导出 > “导出为”。
    • 在右侧设置面板中：
      • 格式： 选择 PNG-24 (支持透明背景) 或 JPG (如果背景不透明)。
      • 透明度： 如果导出PNG，务必勾选此项。
      • 缩放： 可以设置为 2x 或 3x，以提供高分辨率的图片，用于高DPI屏幕（如Retina屏）。
    • 点击 导出，保存文件。

  2. 使用“切片”工具（传统方法）：

    • 点击 文件 > 导出 > “存储为Web所用格式” (Legacy Save for Web)。
    • 使用 切片选择工具，在画布上框选出你想要导出的每个部分（Logo、每个菜单项、按钮等）。
    • 在右侧设置面板中,选择格式为 PNG-24，并勾选 透明。
    • 点击 存储，在弹出的窗口中选择“仅限切片”，然后保存。

总结与最终效果

完成以上步骤后,你的PS画布应该看起来像这样：

你得到了什么？

个人网站首页导航栏ps制作教程
（图片来源网络，侵删）
  • 一个精心设计的导航栏视觉稿。
  • 导出的Logo图片（.png）。
  • 导出的按钮图片（.png）。
  • 对整个布局和尺寸的清晰理解。

下一步：

将这个PSD文件和导出的图片交给你的网页开发者,或者如果你自己会HTML/CSS，就可以根据这个设计稿开始编码了，你可以用CSS实现我们之前做的悬停效果，而不需要PS里的那个隐藏图层。

希望这份教程对你有帮助！祝你设计顺利！