论坛站务软件水平考试华为认证计算机等级PMP认证思科认证Photoshop3DMAX编程语言移动开发系统运维产品运营淘宝营销办公软件Ps修图云计算大数据摄影就业

<section class="yead_editor"> <section class="yead" style="padding: 0.5em 1em; border: 1px solid #000000; color: #a6a6a6; font-family: inherit; font-size: 1em; text-decoration: inherit; margin-top: 2em; margin-bottom: 2em; box-sizing: border-box;"> <section style="border: currentColor; text-align: center; line-height: 1.4; margin-top: -1.4em; box-sizing: border-box;"> <section class="yead2" style="border-color: #ffffff; color: #000000; padding-right: 24px; padding-left: 24px; font-family: inherit; font-size: 20px; text-decoration: inherit; display: inline-block; box-sizing: border-box; background-color: #feffff;"> <section style="box-sizing: border-box;">编者按</section> </section> </section> <section style="padding: 16px; color: #202020; line-height: 1.4; font-family: inherit; font-size: 1em; box-sizing: border-box;"> <p style="margin-bottom: 10px; box-sizing: border-box;"><span style="color: #525252; line-height: 25.2px; letter-spacing: 0.25px; background-color: #ffffff;">你是否曾经想过设计一个漂亮的网页，但是却不知道怎样入手？说实话，几年前我也是这样。当我浏览网页的时候我看到这么多好看的网页，我就希望自己有技术创作这样的设计作品。</span></p> </section> </section> </section> <p style="color: #525252; line-height: 1.8; letter-spacing: 0.25px; font-family: Tahoma, Verdana, 宋体; font-size: 1.2em; margin-top: 20px; margin-bottom: 20px; white-space: normal; word-wrap: break-word !important; min-height: 1em; max-width: 100%; box-sizing: border-box !important; background-color: #ffffff;">今天我可以这么做了，而且我将教你怎么做这样的设计！从根本上，对于这种设计你需要一点photoshop的操作技能和观察细节的能力。通过以下的教程，我将会指出其中极细微的细节之处，而这些细节讲使你的网页设计漂亮起来。打开photoshop，我们开始啦！</p> <p style="color: #525252; line-height: 1.8; letter-spacing: 0.25px; font-family: Tahoma, Verdana, 宋体; font-size: 1.2em; margin-top: 20px; margin-bottom: 20px; white-space: normal; word-wrap: break-word !important; min-height: 1em; max-width: 100%; box-sizing: border-box !important; background-color: #ffffff;">先看效果图</p> <p><img src="/Public/forum/ueditor/image/20151202/1449054306178741.jpg" alt="1449054306178741.jpg" /></p> <p style="color: #525252; line-height: 1.8; letter-spacing: 0.25px; font-family: Tahoma, Verdana, 宋体; font-size: 1.2em; margin-top: 20px; margin-bottom: 20px; white-space: normal; word-wrap: break-word !important; min-height: 1em; max-width: 100%; box-sizing: border-box !important; background-color: #ffffff;">第一步 &mdash; 下载960网格模板</p> <p style="color: #525252; line-height: 1.8; letter-spacing: 0.25px; font-family: Tahoma, Verdana, 宋体; font-size: 1.2em; margin-top: 20px; margin-bottom: 20px; white-space: normal; word-wrap: break-word !important; min-height: 1em; max-width: 100%; box-sizing: border-box !important; background-color: #ffffff;">我一直以来做的设计几乎全部是基于960网格模板的. 因此在我们开始创作之前，先下载这个模板. 你能在<strong style="word-wrap: break-word !important; max-width: 100%; box-sizing: border-box !important;">960.g</strong><strong style="word-wrap: break-word !important; max-width: 100%; box-sizing: border-box !important;">s</strong>上找到这些模板. 下载之后解压zip里面关于PSD的模板. 你会发现有两种规格: 一个是12栏式的而另一个是16栏式的. 他们的区别就像名字所说的，一个是按12栏分布一个按16栏. 更详细的介绍一下吧, 如果你的设计里面分3个区块你就选择12栏式的,那是因为12能被3整除; 同理假如你的设计分四个区块, 你可以选12栏式或者16栏式，那时因为12和16都可以被4整除. 你会发现这个技巧将用于下面教程.<br style="word-wrap: break-word !important; max-width: 100%; box-sizing: border-box !important;" />第二步 &mdash; 构造你想象的结构</p> <p><img src="/Public/forum/ueditor/image/20151202/1449054330497203.jpg" alt="1449054330497203.jpg" /></p> <p>在我们打开PSD网格模板创作前, 我们首先需要先构造一下想象中的结构. 从上面的这张图，你可以看出来：因为在一个排版中又有排版，所以这是一个有点复杂的结构.<br style="word-wrap: break-word !important; max-width: 100%; box-sizing: border-box !important;" />第三步</p> <p><img src="/Public/forum/ueditor/image/20151202/1449054357729126.jpg" alt="1449054357729126.jpg" /></p> <p>构造了结构之后我们继续. 打开16栏式的PSD模板文件. 打开 &ldquo;图像 >画布大小&rdquo; . 把画布的宽度设置为 1200px 高度设置为 1700px .把背景色设置为 #ffffff 既白色.<br style="word-wrap: break-word !important; max-width: 100%; box-sizing: border-box !important;" />第四步</p> <p>用长方形工具在顶部画一个宽100%高大概80px的长方形. 用颜色： #dddddd 填充它.<br style="word-wrap: break-word !important; max-width: 100%; box-sizing: border-box !important;" />第五步</p> <p>在长方形那层上面创建一个新层. 按住CRTL键鼠标点击长方形层. 长方形就被选中了，然后把目标移至刚建的新层上. 选择半径 600px 的软笔刷（如图）, 把其颜色设置为白色, 然后就像图片所示那样在选框上边缘点几下. 通过这个技巧你画出了一个微妙的照亮效果. 你现在可以把这两层联合起来了.<br style="word-wrap: break-word !important; max-width: 100%; box-sizing: border-box !important;" />第六步</p> <p>建一个新层，再用长方形工具如图所示在上端画一个深灰色的小长方形.<br style="word-wrap: break-word !important; max-width: 100%; box-sizing: border-box !important;" />第七步</p> <p><img src="/Public/forum/ueditor/image/20151202/1449054413323685.jpg" alt="1449054413323685.jpg" /></p> <p>在距离上端长方形500px处开始画一个宽 100% 高 575px 的长方形. 设置其由 #d2d2d0到 #ffffff 的渐变色, 角度为-90,缩放为100%<br style="word-wrap: break-word !important; max-width: 100%; box-sizing: border-box !important;" />第八步</p> <p><img src="/Public/forum/ueditor/image/20151202/1449054438263040.jpg" alt="1449054438263040.jpg" /></p> <p>在距离上端长方形500px处开始画一个宽 100% 高 575px 的长方形. 设置其由 #d2d2d0到 #ffffff 的渐变色, 角度为-90,缩放为100%<br style="word-wrap: break-word !important; max-width: 100%; box-sizing: border-box !important;" />第八步</p> <p><img src="/Public/forum/ueditor/image/20151202/1449054460335938.jpg" alt="1449054460335938.jpg" /></p> <p>&nbsp;</p> <p>&nbsp;</p>

论坛站务软件水平考试华为认证计算机等级PMP认证思科认证Photoshop3DMAX编程语言移动开发系统运维产品运营淘宝营销办公软件Ps修图云计算大数据摄影就业