简介
在本教程中,我们将使用 960个网格系统。 来吧,下载并解压缩归档文件。 然后打开“960_grid_24_col.psd”的Photoshop文件(你会发现文件夹里面的“Photoshop”的文件夹中“位于里面的”模板)。
当你在Photoshop中打开。PSD的文件,你会看到一些红色条(其中24,更精确)。 这是网格系统,我们将使用。 您可以隐藏在“24上校网格”组图标,点击红色的眼睛吧。
在这个教程中我将要求您创建具有一定形状尺寸。 打开信息面板(窗口>“信息),当您创建一个形状,你会看到这个面板的宽度和形状高度精确您的。 这个。PSD文件也有一些指引,将是非常有用的。 要激活他们去查看“>显示>”参考线,或者使用快捷方式 按Ctrl / Cmd的+;。
现在,我们介绍了使用960网格系统的基础知识,我们可以继续创建实际的网络布局。 让我们开始吧!
最终图像预览
这是布局,我们要创建。 点击下面的图片看到全尺寸的版本。
第1步
当你打开“960_grid_24_col.psd”在Photoshop文件,去图像>“画布大小,并使用从下图中的设置来增加我们的文件的尺寸。
点击“创建新的填充或调整图层”从图层面板(半白半黑圈),选择素色底按钮,并使用颜色#d2e9f2。
第2步
创建一个新的组(“图层>新建”>集团)并将其命名为“顶吧”。 然后选择 矩形工具 (U)和矩形创建一个829ea8在#顶部颜色布局的高度10px和。 命名此层为“顶吧”。
选择 直线工具 (ü),设置权重1px颜色#6b838c和创建水平的线在底部的矩形,你前面创建使用。 命名此层为“1px线”。 按Ctrl / Cmd的+ J复制这一层。 更改线条颜色为#的新a2c2cd,选择 移动工具 (V)和向上箭头打一次移动一个像素就这一层。
第3步
使用 矩形选框工具 (M)来创建一个矩形选择下方的顶部。 然后创建栏“集团下的一个新的层”的顶部,选择 渐变工具 (G)和拖动顶部向底部选择一个黑色的,从透明的渐变。 按Ctrl / Cmd的+ D来取消选择。 命名此层为“梯度”,并将其混合模式为叠加50%。
第4步
更详细教程请到:http://www.grafpedia.com/tutorials/design-modern-blog-layout-photoshop 学习。。
转载请注明:夜阑小雨 » 在Photoshop设计一个布局现代博客