首先，我们将创建三个独立的文件夹来组织页面头部的各个组件：Logo、Navigation Bar 和 Search Bar。接下来，我们开始构建头部的基本结构。
1. 使用矩形工具创建一个960px x 50px的矩形，填充颜色任意，因为之后我们会添加图层样式。应用以下图层样式：
– 渐变叠加：起始颜色#353535，结束颜色#505050
– 描边：颜色#081010
2. 对于Logo，选择Helvetica Black字体，大小设定为24pt。应用以下图层样式：
– 投影：颜色#000000
– 渐变叠加：起始颜色#92b4b5，结束颜色#ffffff
3. 距离Logo右侧208像素的位置，使用矩形选框工具创建一个1像素宽的选区，然后用渐变工具（前景色为#4F4F4F）自下而上拉出透明渐变。接着，创建一条1像素宽的线条，填充颜色为#081010，作为分隔线。
4. 导航栏的每个链接两侧应有18像素的间距。使用14pt大小的Helvetica Regular字体输入链接文本（如“世界”、“商业”等），确保它们与分隔线保持正确的距离。复制文字图层，将副本的颜色改为#1b1b1b，并向上移动1像素以创建下划线效果。
5. 为搜索栏，使用圆角矩形工具创建一个半径为20像素的形状，颜色为#363636，放置在合适位置。然后，为其应用以下图层样式：
– 内阴影：颜色#4f4f4f
– 投影：颜色#000000
6. 最后，导入并调整大小的搜索图标，将其放在设计中预设的位置。
通过这些步骤，你将构建出一个包含Logo、导航栏和搜索栏的高效头部布局。记得在整个过程中保持元素间的间距和对齐，以实现整洁有序的设计。
相关文章
