看上图，很简洁很干净的基于手机的图片社交页面的作品集，你是不是很喜欢？

那下面我们将介绍它的设计过程。

在这个设计过程中，我们将使用一些引人注目的图，干净的颜色和流畅的字体。

首先，我们开始创建一个web版本；

然后我会告诉你如何快速地适应手机视图。

教程步骤：

为了跟上我的步骤，可以下载以下：

• Mountains photo from Unsplash（下载山的图片从unsplash网站）
• Kaushan Script font from Font Squirrel（下载Kaushan Script字体从Font Squirrel网站）
• Lato font from Font Squirrel（下载Lato字体从Font Squirrel网站）
• Social media icons from Iconfinder（下载图标字体从 Iconfinder网站）
• Stock photos from Unsplash（下载图片从Unsplash网站）
• Stock photos from Refe（下载图片从 Refe网站）

开始动手吧！

先开始web端，web版本分3大部分组成。

第一步：文件的准备；

上图

1.新建。

2.分别建100px，600px和1100px三条垂直参考线。

3.建3个文件夹。

准备工作完成。

第二步：设计Header文件夹

1.用矩形工具画一个1200*600px的矩形区，下载山的图片，在ps里打开，并放图片在矩形图层的上面，并命名img。按ALT键放在山的图片层和矩形图片层，直到出现小的向下的剪头，然后释放。就有了一个遮罩。

CMT+T 缩放图片，  SHIFT等比例缩放图片。

中篇继续......