很多刚入行的设计小白，一听到“用PS做网站搜索框”，脑子里全是那种花里胡哨、带光效、带阴影的复杂效果。听我一句劝，别整那些虚的。现在的网页设计趋势是极简，是干净。你搞个搜索框像个大按钮似的，用户找东西能找得着吗？
咱们今天不聊那些高大上的理论，就聊怎么在PS里把这个看似简单的搜索框做得既好看又实用。这玩意儿看着简单，细节全是坑。
先说思路。做搜索框，核心就两点：边框的质感，和输入提示文字的排版。别一上来就画矩形，那样太死板。
第一步，定尺寸。别凭感觉，去扒几个大站的搜索框看看。一般来说，高度在32px到40px之间最舒服，宽度看你的导航栏留多少空间。我一般习惯先建个300x40px的画布。背景色选个浅灰，比如#f5f5f5，别用纯白，纯白在白色背景上会隐形，用户会以为那里没东西。
第二步，画边框。这是关键。很多新手直接用矩形工具，然后加描边。结果呢？描边会占位置，导致内部空间变小，文字挤在一起。正确的做法是，画一个矩形，填充色设为透明，然后加一个1px的描边。描边颜色选深灰，比如#dcdcdc。注意，描边位置选“内部”，这样能保证你的内容区域不被挤压。这时候你会发现，边框有点生硬。
第三步，做圆角。直接改矩形的圆角半径，5px到8px最合适。太圆像胶囊，太方像按钮。这时候，搜索框的雏形就有了。别急着加阴影，加阴影容易显得脏。除非你的背景是纯白，否则轻微的内阴影能增加一点立体感，让搜索框看起来像是“凹”进去的，这样用户就知道这里能点。
第四步，处理图标。搜索框左边通常有个放大镜图标。别去网上随便下个PNG贴上去，那样清晰度不行，还容易有色差。直接在PS里用钢笔工具或者形状工具画一个。放大镜的柄和圈的比例要协调，柄不要太粗，不然显得笨重。颜色用深灰，和边框呼应。图标位置要垂直居中，稍微偏左一点，给右边的文字留空间。
第五步，写提示文字。Placeholder文字，就是那个灰色的“请输入关键词”。字体选无衬线体，比如微软雅黑或者PingFang SC。字号别太大，12px到14px就够了。颜色一定要浅，比边框颜色再浅一点，比如#999999。这样用户输入文字时，对比度才够。记住，文字要垂直居中，这点很多人容易忽略，导致看起来歪歪扭扭。
说到这，你可能觉得，这不就是做个静态图吗？对，但你要知道，前端开发拿到这个图，是怎么切图的。你做的搜索框，最好做成切片，或者用CSS3直接写出来。如果你非要切图，记得把放大镜图标单独切出来，背景透明。这样前端可以用CSS控制图标的颜色，方便后期换肤。
很多人问，用PS做网站搜索框，怎么做出那种高级感？其实高级感来自克制。别加渐变，别加投影，别加描边。就靠颜色、间距和字体来撑场面。你想想，淘宝、京东的搜索框，哪个不是简简单单？
还有一点，别忽视状态。搜索框有默认状态，有聚焦状态，有输入状态。在PS里，你可以多建几个图层组，分别画出聚焦时的边框颜色变化，比如变成品牌色。这样前端开发才知道，用户点进去的时候，边框要变色。
最后，导出图片。别直接存PSD，那是给你自己看的。导出时，选PNG-24，保留透明通道。如果是背景透明的部分，一定要检查边缘有没有锯齿。有时候PS的抗锯齿做得不好，边缘会有白边，切图后看着就脏。
总之，用PS做网站搜索框，不是比谁做得花哨，而是比谁做得得体。简单、清晰、好用，才是王道。你按照这几步走，做出来的东西，绝对比那些花里胡哨的强百倍。别嫌麻烦，细节决定成败。下次再有人让你做个搜索框，别慌，按这个思路来，保证不出错。
本文关键词：用PS做网站搜索框
