<dd id="rcs5i"><tr id="rcs5i"></tr></dd>
    <div id="rcs5i"></div>

    <div id="rcs5i"></div>

      1. <div id="rcs5i"></div>

        当前位置: 首页 > 设计教程 > 网页设计教程 > Photoshop设计简洁大方的网页UI

        Photoshop设计简洁大方的网页UI

        今天我将介绍如何创建一个干净的网络布局一个漂亮的背景开门见山咱直接切入正题吧菇凉帅哥们有兴趣的话可以打开PS跟着做哟

        Photoshop设计简洁大方的网页界面

        开始设置的文件

        打开一个新的文档外形尺寸1200×1640像素?#30452;?#29575;为72像素/英寸

        我们要创建基本的背景层简单的在草稿上勾画出大概的布局与结构可以看出页面最终的雏形不过

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

        Photoshop设计简洁大方的网页界面

        草稿上可以看出我们将创建5个分栏在这里我们将添加的内容

        添加的第一层这将是我们的背景颜色#ededed

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

        接下来添加矩形(U)在中间新建一个矩形(颜色为#608bb6高度400像素左右)设置混合模式为颜色加深并填充为75%然后添加一个白色的描边1像素(图层样式)

        最后的底部页脚添加一个矩形形状使用相同的工具和色彩但现在设置混合线性光不?#35813;?#24230;为70%

        下面的最终结果

        Photoshop设计简洁大方的网页界面

        步骤2 – 背景

        给我们的背景添加纹理

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

        Photoshop设计简洁大方的网页界面

        现在打开一个新的文档12×1像素背景层解锁并隐藏它放大到3200%(最大)添加一个新图层使用矩形选框工具添加两个1×1像素的正方形填充颜色为#FFF和其他#000如下图所示然后选择菜单>编辑>定义图案

        Photoshop设计简洁大方的网页界面

        我们制作了一个新的图案效果即将使用(这也是一个制作样式图案方法哦)

        回到我们的主要文件创建一个新的图层用矩形选框工具绘制一个整个画布那么大的选区填充前景色设置填充为0%然后添加图层样式里的图案叠加

        Photoshop设计简洁大方的网页界面

        现在是时候绘制云了!

        您可以拉出5条辅助线(如图方法,菜单>视图>新建参考线?#30452;?#36755;入位置84px – 186px – 600px的- 1014px – 1118px)以划分工作区然后使用椭圆工具添加一些形状(如图)然后把这几个形状图层都选中并编组

        Photoshop设计简洁大方的网页界面

        复制这个组

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

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

        Photoshop设计简洁大方的网页界面

        然后应用下面的样式内阴影混合模式选择叠加白色?#35813;?#24230;55%全局光角度120°距离5大小0

        出现云的白色投影

        Photoshop设计简洁大方的网页界面

        现在我们画个漂亮的云?#23460;?#24433;复制云那图层先清除图层样式调整位置向右侧下移低于原来的层设置填充为0%再添加下面的样式

        渐变叠加线性混合模式正常角度90°

        Photoshop设计简洁大方的网页界面

        分享到: 
        Photoshop设计移动APP应?#32654;?#22411;网站
        Photoshop设计导航鼠标悬停状态效果
        ڿ¡

        <dd id="rcs5i"><tr id="rcs5i"></tr></dd>
          <div id="rcs5i"></div>

          <div id="rcs5i"></div>

            1. <div id="rcs5i"></div>

              <dd id="rcs5i"><tr id="rcs5i"></tr></dd>
                <div id="rcs5i"></div>

                <div id="rcs5i"></div>

                  1. <div id="rcs5i"></div>