TOUMA的用户体验设计

TOUMA的用户体验设计

 
   

创建一个简洁的个人网页

写说说:

最终效果


第一步

为了方便布局,我们将要使用到960s栅格系统(从这里下载)。下载完成后,打开”960_grid_12_col.psd”文件并隐藏粉红色条纹的可见性。

这个文件小于我们最终的设计。因此,我们选择图像>画布大小修改宽度和高度。

我们还需要打开标尺和参考线。因此我们将视图>显示额外内容/标尺/对齐勾选上(这样元素就便于和我们的参考线对齐了)。

 第二步

我们现在来创建背景。在图层面板中,将背景图层重命名为”bg”。

双击“bg”图层得到图层样式面板,点击颜色叠加设置如下:其中的颜色为dbdbdb

新建图层”noise”,将其填充为白色(#ffffff)以后,选择滤镜>杂色>添加杂色>数量:50%,分布:平均分布。将图层混合模式更改为:正片叠底,将图透明度降低为10%。

使用矩形工具创建一个柔和的阴影效果。创建一个1350×1558像素的矩形,将填充不透明度设置为0%,在混合选项面板中,设置投影效果为如下图片所示:

第三步

让我们开始创建页头部分。使用矩形工具(U)创建一个780×170像素的矩形,填充为#5bb2e4(你也可以选取其他颜色,比如#7db22。整个教程里的颜色都是统一的)。然后设置如下图层样式。


第四步

现在给页面增加标题。选取水平文字工具(T),键入你的网站名称,使用如下文字设置(当然你可以根据自己喜欢做不同设置):

添加副标题。选取水平文字工具(T),键入你的副标题,使用如下文字设置:

第五步

我们来开始创建区块。使用矩形工具(U),创建一个1350×360像素大小的矩形,命名为”personal_bg”。打开混合选项面板设置投影、内阴影以及颜色叠加,如下图所示:

第六步

现在给我们的个人照片部分创建一个方框。使用矩形工具(U),创建一个220×220像素大小的矩形,填充为#ffffff。给它应用如下图所示的图层样式:

第七步

创建社会性图标方框,使用圆角矩形工具(U),创建一个45×165像素大小的矩形,半径:5像素,将其命名为”Social Box”,填充为#5bb2e4。现在创建折角。使用同样的工具创建一个20×20像素大小的矩形,半径:5像素,命名为”Social fold”,将其放置于”personal_bg”图层的下方。然后按下Ctrl+T将其翻转45度。现在应用如下混合选项设置:

第八步

现在放置社会性网站图标。首先下载这些矢量社会性网站图标,然后如下图放置五个图标(24×24像素):

第九步

现在创建”联系”按钮。使用矩形工具(U),创建一个170×50像素大小的矩形。填充为#5bb2e4,命名为”contact”。选择此图层的矢量蒙板,选取”添加锚点工具”,在矩形的左边中间处创建一个锚点。然后选择”转换点”工具,在同一锚点处单击并将其移动到左边,添加如下混合选项效果:

现在将”social fold”图层复制一遍,命名为”contact fold”(很显然它必须放置于”personal_bg”图层的下方)。

第十步

现在给”联系”按钮添加文字。选取水平文字工具(T),键入你的文字,使用如下设置:

第十一步

给区块部分添加标题。选取水平文字工具(T),键入你的文字,使用如下设置:

第十二步


选取水平文字工具(T),键入你的文字,使用如下设置:

第十三步

如同上一步创建区块一样,使用矩形工具(U),创建一个1350像素宽,不定高度(取决于内容)的矩形,将其命名为”content_bg”,然后将其放置于如下图所示的”personal_bg”的下方。

第十四步

给该板块写上名称和内容。名称颜色与前面的主颜色同,内容颜色为灰色

其中涉及到的混合选项为:

第十五步

现在创建分布图层。直接复制上面的contact图层,改变大小到适当,调整位置(注意对齐),复制Contact fload图层,类似的,改变位置以适应整个布局。键入三个部分的文字,添加如下样式得到效果:

第十六步

如同上面的步骤一样,创建一个区块。然后键入相应的文字(注意对齐和样式和上面的文字设置一样)。

第十七步

创建文字输入区域。使用矩形工具(U),创建一个210×33像素大小的矩形,填充为#f4f4f4。打开混合选项面板,应用如下图所示的值:(右边的大区域的尺寸为300×200像素)

第十八步

现在创建”发送信息”按钮。使用矩形圆角工具(U),创建一个210×33像素大小的矩形,半径:5像素,填充为#5bb2e4。混合选项效果如下图所示:

最后,为”发送信息”按钮创建文字。

第十九步

使用矩形工具创建最后的条纹部分“border”。创建一个1355×15像素大小的矩形,填充为#5bb2e4

第二十步

最后给这些图层适当编组,稍作休整得到最后效果图:

========关于写说说=======

乐于分享的移动UI设计师。

偶尔敲点代码。

偶尔翻译一些外文。

勤劳的木偶,快乐的小丑。

新浪微博@写说说

有好合作请联系我~

---------------------------------

觉得说说君的分享挺靠谱?推荐给身边的小伙伴吧~

添加 写说说 微信号:【xssjane】

您也可以通过扫描下方二维码快速添加:







 
 
评论
 
 
热度(10)
  1. TOUMA的用户体验设计写说说 转载了此文字
  2. oO泡泡写说说 转载了此文字