今天心血来潮，想搞个网站的设计图玩玩，就用Photoshop搞起来。

第一步：打开软件，创建模板

我这个人，喜欢先有个大概的框架。第一件事就是打开Photoshop，新建一个文件。我记得网页设计好像有个常用尺寸，就随便选个1920x1080像素的，分辨率72，背景色白色，反正是个草图，先这样。

第二步：画几个框框

我开始用矩形工具画框框。网站嘛大概就是上面一个导航栏，中间一个大大的banner图，下面再分几个区块，放点产品、介绍之类的。我就用矩形工具，咔咔咔，画几个大方框，表示一下各个区域。

我还用不同的颜色来区分这些方框，这样看着清楚些。比如，导航栏我用个深灰色，banner图用个浅灰色，下面的区块用白色或者浅浅的灰色。

第三步：加点渐变效果

光是几个色块，看着有点单调。我就想加点渐变效果，让它看起来有点层次感。我选中一个矩形，然后点渐变工具，选个黑白渐变，稍微调整一下角度和颜色，感觉还不错。

然后，我就把这个渐变效果复制到其他几个矩形上，稍微改改颜色，这样整个页面看起来就没那么死板。

第四步：放点文字

我开始往里面加文字。导航栏上，我用文字工具写上“首页”、“产品”、“关于我们”、“联系我们”之类的。banner图上，我也写一句大大的标语，表示一下网站的主题。

下面的区块，我也分别写上一些标题和简短的介绍文字。字体嘛我就随便选个微软雅黑，大小也随便调调，看着顺眼就行。

第五步：搞点参考线

为让各个元素对齐，我拉几条参考线。按住Ctrl+R调出标尺，然后从标尺上拖出几条横线和竖线，把页面分成几个区域。这样，我在摆放元素的时候，就可以有个参照，不会乱七八糟的。

第六步：尝试几个插件（失败告终）

做到这里，我突然想起来，网上好像有很多Photoshop的插件，可以用来做网页设计。我就去搜一下，找到几个，像什么HTML Block、Page Layers、Velositey之类的。

我下载几个试试，结果发现，要么是版本不兼容，要么是操作太复杂，搞半天也没搞明白。我还是放弃，继续用我的“土办法”。

第七步：调整细节

我又花一些时间，调整一下细节。比如，把文字的行距、字间距调调，把各个区块的间距也稍微调整一下，让整个页面看起来更舒服些。

我还用用吸管工具，从一些网站上吸取一些颜色，用到我的设计图里，让它看起来更“专业”一点。

总结一下

今天用Photoshop画网站设计图，虽然方法比较“土”，但还是挺有成就感的。这只是一个草图，离真正的网站设计还差得远。不过通过这回实践，我对Photoshop的几个常用工具，像矩形工具、文字工具、渐变工具、参考线等等，又熟悉一些，也算没白忙活。

以后有时间，我再研究研究那些插件，看看能不能找到更方便快捷的方法。或者，干脆去学学Figma、Sketch之类的专业UI设计软件，哈哈！