在PS里将网页尺寸设置为760x770，下面是我们需要使用的图片，本文的网站设计也是采用开放式的排版，这种版面的好处是给人一种行云流水的流畅感，以图片与文字之间无形的结合来突出网站整体的版面结构

继续我们的制作，用PS里的圆角矩形工具，颜色#b90306，制作如下图形放入网页的左边

添加阴影图层样式

同样的方法制作颜色为#9e553a的圆角矩形图形

依然使用之前的图层样式制作阴影

再制作一个小图形，随后将开始的图片放入网页中，同时复制图片中咖啡的效果，使整张图片处于网页的中部，并将网页分割成左右两半

制作如下小矩形，用来制作圆角矩形之间的连接圆环

为其添加图层样式

编辑 > 变换 > 变形

在变形选框中选择如下"上弧"形状

完成后的效果图

翻转角度，将完成的圆环放在圆角矩形之间

用椭圆工具制作黑色小圆圈

完成后你会看到的效果因该如下图，看上去是不是很逼真

再次导入一张图片，为了和网页整体风格协调，我们将图片四角制作成圆角矩形

添加阴影样式

完成后的效果图

我们在其中一个图形上制作搜索条，用圆角矩形制作搜索条背景

使用椭圆工具制作黑色小圆

使用自定义形状中的箭头修饰搜索条

我们这里用自定义形状制作一个简单的LOGO，先用椭圆矩形工具制作如下形状

将圆角矩形形状旋转45度，还是使用自定义形状中的叶片形状，颜色使用背景的红色

这样简单的修饰后一个LOGO就完成了，再加入LOGO文字以及网站的内容文字与图片，整个网站设计到此结束

websbook.com翻译.转载请保留此链接