秒速赛车行业新闻

使用960网格系统设计一个网页模板

  :在photoshop中学习制作基于960网格系统的网页模板,你将会学到图层效果和定位元素相关知识。 最终效果预览   第一步 一般在Photoshop中制作网页模板的时候,我使用960网格系统。这个网格系统在web设计中相当流行。然而我仍然相信网格系统不应该被过度的依赖。用960的主要原因是它psd文件中自带的参考线可以大大提高web设计的效率。所以我推荐 ...

  在photoshop中学习制作基于960网格系统的网页模板,你将会学到图层效果和定位元素相关知识。

  一般在Photoshop中制作网页模板的时候,我使用960网格系统。这个网格系统在web设计中相当流行。然而我仍然相信网格系统不应该被过度的依赖。用960的主要原因是它psd文件中自带的参考线可以大大提高web设计的效率。所以我推荐到这里免费下载960。下载完成后用PS打开一个12行的psd文件(960_grid_12_col.psd),将会看到下面这个文件。

  如果参考线没有打开,请通过-视图显示-智能参考线和视图-对齐到-参考线打开,快捷键Ctrl+;。以下你看到的是我已经在图中间画好了一个黑色矩形,接下来所有的元素都将包含在这个矩形中。其实你没有必要画这个矩形,因为背景是白色的,如果你觉得有帮助,不妨画之。

  新建一个图层,选择渐变工具然后选择如下图白色到黑色的一个渐变效果。画的时候按住shift使渐变线绝对水平。如果效果上有差异,可以多试几次。

  选择矩形选定工具沿着参考线从左上到右下在第二步中的渐变图中选定如下区域。按ctrl+shift+I反选,然后按delete删除反选区域。

  新建一个图层组把两个边沿渐变矩形拖入其中,然后选定图层组,将不透明度设置为10%。

  接下来加入两边的虚线效果。如果只需要在css中使用dashed边框,那么这个虚线效果在PS中是没有必要制作的。一个聪明的办法是使用图形变换 工具;首先创建一个新图层,然后按Ctrl+T,然后把这个蓝色矩形稍微下移一些,然后连续按Ctrl+Shift+Alt+T。如果你感觉这个方法复杂 了,可以手动的创建每个蓝色矩形。然后选定所有蓝色矩形,按Ctrl+E将它们合并。然后复制这个图层到右边,做成两个对称的边沿。

  现在加入网页标题和标识性语言,使用960网格系统设计一个网页模板这里我使用到的字体是“Rockwell”。使用同样的蓝色。如果你熟悉色。

  • 秒速赛车平台logo图
  •   广州黄埔区科学城光宝路7号融达大厦
  •   +86 02066889888
  •   +86 02066889888
  • admin@dedecms51.com

网站地图

地图