以后地位: 首页 > 设计教程 > 网页设计教程 > Photoshop设计简洁慷慨的网页UI

Photoshop设计简洁慷慨的网页UI

本日,我将介绍如何创建一个干净的网络布局、一个漂亮的配景。开门见山,咱间接切入正题吧,菇凉帅哥咱咱们有兴趣的话,可以或许打开PS跟着做哟。

Photoshop设计简洁慷慨的网页界面

开端设置的文件

打开一个新的文档:外形尺寸1200×1640像素,分辨率为72像素/英寸。

咱咱咱们要创建基本的配景层。简略的在草稿上勾画出大概的布局与布局,可以或许或许看出页面最终的雏形,不过

在设计过程中,咱咱咱们可能会添加新的元素。

Photoshop设计简洁慷慨的网页界面

草稿上可以或许看出,咱咱咱们将创建5个分栏,在这里咱咱咱们将添加的内容。

添加的第一层,这将是咱咱咱们的配景,色彩#ededed。

在页面顶部绘制一个矩形定名为top1(应用矩形栅格化的图层(色彩#ededed),并添加杂色(滤镜>杂色>添加杂色0.5 – 0.8;高斯散布和单色)。再次绘制矩形,色彩#cddcec),栅格化的形状和添加杂色(滤镜>杂色>添加杂色0.5 – 0.8;高斯散布和单色)。添加一个渐变叠加(柔光,54%,从黑到白的90%,角度和缩放75%)。

接下来添加矩形(U),在中央新建一个矩形(色彩为#608bb6,高度400像素阁下),设置混合情势为色彩加深,并填充为75%,然后添加一个白色的描边1像素(图层样式)。

末了的底部页脚添加一个矩形形状,应用相同的对象和色彩,但如今设置混合线性光,不透明度为70%。

下面的最终结果。

Photoshop设计简洁慷慨的网页界面

步骤2 – 配景

给咱咱咱们的配景添加纹理。

添加一个新层(CTR + SHIFT + N),应用选框对象在画布顶部添加一个1像素的白线。(仔细看下图顶部有条白线)

Photoshop设计简洁慷慨的网页界面

如今打开一个新的文档12×1像素,配景层解锁并隐藏它。放大到3200%(最大),添加一个新图层,应用矩形选框对象添加两个1×1像素的正方形,填充色彩为#FFF和其余#000,如下图所示。然后抉择菜单>编辑>定义图案。

Photoshop设计简洁慷慨的网页界面

咱咱咱们制作了一个新的图案效果行将应用(这也是一个制作样式图案办法哦)

回到咱咱咱们的重要文件。创建一个新的图层,用矩形选框对象绘制一个全体画布那么大的选区,填充远景致,设置填充为0%,然后添加图层样式里的图案叠加。

Photoshop设计简洁慷慨的网页界面

如今是时候绘制云了!

您可以或许或许拉出5条辅助线(如图,办法,菜单>视图>新建参考线分离输入地位84px – 186px – 600px的- 1014px – 1118px),以划分工作区,然后应用椭圆对象添加一些形状(如图),然后把这几个形状图层都选中并编组。

Photoshop设计简洁慷慨的网页界面

复制这个组

并将复制进去的组转化为智能对象(点组然后右键即可看到),添加杂色。

如今,你必需应用一个图层蒙版隐藏超出部分的云(认真看下面的办法):Ctrl +单击“图层top1”那个图层缩览图(在“图层”面板中),出现选区,然后单击抉择已经添加杂色那个云的图层,关键的一步,单击添加矢量蒙版。

Photoshop设计简洁慷慨的网页界面

然后应用下面的样式。内阴影:混合情势抉择叠加,白色,透明度55%,全局光角度120°,距离5大小0。

出现云的白色投影。

Photoshop设计简洁慷慨的网页界面

如今,咱咱咱们画个漂亮的云彩阴影。复制云那图层,先清除图层样式,调剂地位向右侧下移低于本来的层,设置填充为0%,再添加下面的样式。

渐变叠加,线性,混合情势正常,角度90°。

Photoshop设计简洁慷慨的网页界面

分享到: 
Photoshop设计移动APP应用范例网站
Photoshop设计导航鼠标悬停状况效果
友情链接:我爱宝宝母婴网  中国太阳能光伏网  丰汇资讯新闻网  聚生IT新闻网  中学历史学习网站  中国江苏消防网  卢卡资讯网  德州新闻门户网  开磷百花人才网  红心音乐网