设计好看的清洁和功能网络布局是一个重要的组成部分,网页设计师的生活。在本教程中,我们将创建一个干净的和专业的网络布局在Photoshop中从头开始。沿途你可以学习有用的方法来创建设计。所以开始吧!
预览的最终结果
创建一个专业的网页布局Photoshop教程
资源
-
功能图标设置——wefunction.com (替代)
-
Twitter图标——iconeden.com
-
贝巴的字体——dafont.com
步骤1:模型
在开始设计之前,我们需要计划的要求,外观和功能。然后我们需要把这些想法融入可视化布局来执行它们。模型和线框是大大有助于创建布局有很大的灵活性。这是一个最佳实践和高度鼓励。
下面我把一只使用灰色色调。这样我们从现场消除颜色。这样我们就可以集中精力整个布局,避免扰乱了颜色。让自由快速改变和重新安排的事情。一个模型可以详细为你想要的。为此我要与下面的一个。简要定义的布局和内容。
第2步:设置画布
我们有一个蓝图布局。让我们一起把设计!我们将创建一个960像素宽的布局。创建一个新文档为1200 x 1500。
这是一个960像素宽的布局,所以我们需要通过添加指南定义工作区域。按Ctrl +一个选择整个文档。
去挑选>变换选区。缩小选择960像素宽。这是工作区域的布局。
导行添加到选择。
我们需要创建一些填充物之间的边界,稍后我们将添加的内容!再次选择主动选择变换选区。调整920像素宽的选择。这意味着20像素填充每一方共计40像素填充。
添加选择指南。
步骤3:创建标题
让我们创建布局的头!465像素高的做一个选择。
选择填充一个灰度值,后使用图层样式添加颜色和梯度。整个设计遵循这个保持视觉层次。
将梯度添加到标题。双击图层缩略图。选择渐变叠加。创建以下2颜色梯度。使用的设置。
它应该是这样的。
下一个需要添加标题的一大亮点。创建一个新层按Ctrl + Alt + Shift + N。选择一个软刷和一个直径600 px。选择画笔的颜色# 19535。点击一次头的中心。
做出选择的110像素的高度。
点击删除键删除选中的部分。看起来像下面。
缩小垂直按下Ctrl + T。
我们需要确保标题的突出点是完全集中。选择层,头和突出并按“V”转向移动工具。在选项面板选择水平居中对齐按钮。
新建一个图层,画一个像素强调线条与颜色# 01 bfd2使用铅笔工具。
使用梯度面具隐藏边缘顺利。选择渐变工具,创建以下选项面板的梯度。
运用以上梯度。
步骤4:创建纹理模式
现在创建一个简单的检查模式和适用于标题。选择铅笔工具,将画笔大小设置为2像素,并添加两个点触摸彼此的角落。关掉背景和选择的点。选择编辑>定义图案。
创建一个新层,并将其突出以下层。选择的区域我们想应用模式。按Shift + F5加载对话框。选择刚刚创建的模式。和好的。
选择充满了这种模式。仔细看看。
混合模式顺利进入头部。添加一个图层蒙板模式层。选择一个软刷和油漆用一个大的软笔刷。挑选# ffffff刷颜色。减少和颜料画笔的不透明度到60%。如果你发现它太强大然后单独调整图层的不透明度。
很好地混合。
第五步:添加标识
背景几乎完成。现在添加标志类型。之前添加类型添加一个强调保持后面的标志。选择一个软刷和# 19535。添加一个点。
添加类型。我使用的字体是“贝巴”。免费*载下**。
微妙的影响应用到标志。
第六步:导航
添加导航链接。
创建导航按钮。使用矩形选框工具。填充任何颜色。然后低填充不透明度为0。
双击图层缩略图,选择渐变叠加。使用这些设置。
第七步:滑块的内容
做出选择是580 x 295像素。
选择填充灰色基调。
把你想使用的映像。剪辑我们上面创建的基础层。
滑块现在添加阴影效果。创建一个新层。选择笔刷工具,设置直径为400像素。打开画笔面板,降低圆度。使用以下设置。
设置画笔颜色# 000000和添加。
应用一些高斯模糊软化边缘。
选择底部的一半阴影和删除它。
重新定位的影子就在滑块上面。
我缩小它垂直。下一个集中到滑块对齐。选择选项面板上的两层,单击对齐水平中心按钮。
重复的影子和垂直旋转它。把它放在滑块的底部边缘。
使用矩形Marqee工具创建滑块控制按钮。# 000000。
低的按钮不透明度到50%
打开汽车的形状从选择面板并选择这个箭头。将其添加到按钮。
添加一个地带。# 000000。
降低不透明度到50%。
在这里我们可以添加描述项目。
第八步:添加一些受欢迎的线
一个欢迎和一些关于网站的描述。
第九步:完成了头
我们几乎完成了头。让我们添加一个微妙的阴影效果完成的事情!创建一个影子就像我们先前创建使用画笔工具。
离开1 px头和阴影之间的差距。
第十步:应用梯度背景
创建一个浅灰色白色的渐变。
创建一个新层以下标题和应用梯度。
步骤11:添加滑块旋转控制
创建旋转控制。
内阴影应用到一个控制滑块来表示当前的活动项目。
步骤12:创建内容分频器
选择铅笔工具和画1像素线。浅灰色(# aaaaaa)。
使用梯度面具隐藏边缘顺利。
13步:添加的主要内容
是时候进入实际内容的部分。这是一个3列布局。我们需要创建3等于列一些填充物。我做了一个简单的计算和可利用空间分为3等于宽度盒25像素填充。
添加引导线框。然后把盒子。这些列。
添加一些特色服务。下降的图标图标集。维护对象之间的距离的函数。
让我们创建一个简单的“阅读更多”按钮。选择圆角矩形工具画出形状。确保它是一个形状图层。
应用渐变叠加和中风的按钮。
复制按钮。
我们将添加一些最近的工作项。我画了三个图片夹框和应用3像素中风。
视频图像在箱子上。
我之前创建的影子像我们一样,放在盒子下面。
添加一些项目描述。
让我们创建Twitter提要。Twitter鸟图标。
添加了一个推特宣布。
创建一个按钮推文。
应用这些风格。
添加文本。
步骤14:创建页脚和完成
做出选择的页脚,装上一个灰度值。
应用颜色叠加。
最后添加页脚导航和版权信息。这就结束了会议。看看最终的图像。
最终结果
