2.使用渐变工具，从黑色＃000000至透明，按住shift键，从下至图片中间拖拽，并设置透明度为60%。

3.继续使用渐变工具，设置颜色从＃37056b至＃ff01fc（颜色可按自己喜好调），并拖拽渐变从图片左上角至右下角，设置透明度为20%。

4.输入文字，输入作品集名，用 Kaushan Script字体，大小为21px，颜色为＃ffffff，行高26pt，离图片的顶部50px。

5.增加图标，设置为白色，并为相应的图标添加图层样式如下。

确保文字和图标在一个水平线上。

6.输入正文的文字，

标题用：字体： Lato (Black)；字号：36px；例子：HELLO! I'M JONATHAN

副加文字：字体：Lato (Regular)；字号：16px；例子：I love to travel all around the world and design beautiful things. 

放在参考线中间。

第三步：设计photos文件夹

1.使用矩形工具，绘制一个1200*880的矩形，颜色填充：＃eeeeee；

2.添加描述文字，文字离上图80px；

设置字体： Lato (Bold) ；字号：12px；颜色：#9b9b9b；字间距：270px；例子：LATEST PHOTOS；

3.增加一些很酷的图片。

在这个页面我想一行展示4张图，宽度为1000px，所以每个图250px，但我们还需要在图片中间留间距20px，所以最终我们图片的宽度为（1000px－60px）／4  =  235px。

用矩形工具，按住shift键拖拽235px＊235px的矩形，图片可以从 unsplash.com 或 getrefe.tumblr.com这2个网站找。

CMD+T可对图片等比例缩放你想要的图片大小。

4.为图片添加遮罩层，用渐变工具从黑色到透明，并设置透明度为60%；

增加文字 “likes” 离左边与下边分别为15px的留白；字体：Montserrat；字号：13px；

使用矩形工具，在图片下画一个白色区域，并添加文字在上面，

字体：Montserrat；字号：12px；颜色：灰色＃808080；

5.按CMD+J或鼠标右键编组，并命名，图片与图片之间的距离设置为20px；

图片可从unsplash.com 和 getrefe.tumblr.com网站找。

第四步：设计contact文件夹

1.输入文字；

标题：文字：Lato (Black)；字号：36px；颜色：#565d64；

描述文字：Lato (Regular)；字号：16px；颜色：#565d64；

2.矩形工具，画一矩形按钮，看上去要足够干净，平衡。

3.版权线。

线高为1px；水平线的颜色为灰 #e0e0e0；离周围空间90px的留白，并写入文字，

字体： Lato (Bold)；字号：12px；颜色：深灰 #9b9b9b. 字间距：270px；

好了，完成了web版。

下篇将描述手机版的设计过程。