用PS制做960网格的网页模板

  用 Photoshop 创造 960 网格的网页模板 Photoshop 网格计划呢,平常显得很井然典范,有时看上去也对照专业。但网格计划相对来说也是比 较杂乱的,往往必要精准的衡量和栏目划分。960 Grid System/960 网格体例,信誉时时彩平台开户这是一套可 以让你火速创修网格计划的器械,之因而叫 960,即是说模板的宽度是 960 像素。而之因而 用 960 像原来做为标 准,是由于 960 像素宽拥有高度的灵便性。这日咱们就来教公共创造 一个 960 Grid System 的网页模板。(960 Grid System 官方网站:) 960 Grid System 的性格是将 960 像素的网页分为 12 列的组织和 16 列组织。12 列组织将 总宽分成 12 份,每份的宽度是 60px,而 16 列的组织分成 16 份,每份的宽度是 40px,每 个人把握边距都是 10px,从而每列形成 20px 的清闲。 先看最终成绩图 遵守 960 Grid System 的界说,咱们找一张 960 像素,12 等份,每个人把握边距都是 10px。 这里缩幼了图片,公共做的时期遵守 960 像素去切割,去 960 grid system 官方网站能够 下载组织好的素材。(参见960 grid system的官方网站先容。) 新修图层,巨细为填充中心的 10 等份,并与把握盈余的两个“等份”相距 5 像素。填充为 为玄色。 接着新修一个图层,为把握各增加白到玄色的渐变色,成绩如下: 删除中心的玄色图层。 接下来把中心的十等份通盘删除吧。当然,你能够埋伏中心的十等份,下面的操作能够参 考这十等份来调度地位。 增加一条竖立的虚线,正在网页创造的时期,这条虚线能够利用 dashed border 来创造,这 里只是用 ps 来做成绩罢了。 告终文字和导航,导航的地位这里能够参考之前“十等份组织”的约莫地位来组织。 为了使读者晓得正在第几页,咱们把眼前标签换一个色彩。 增加 RSS 阅读标签的图片。 . 插入头图、文字 好下面咱们来对应一下十等份的地位! 底色并复造 右侧增加 75*75 像素的图片 咱们再给这些图片加上一个像素天蓝色边框,正在网页切割时期咱们能够直接写 CSS 就能够 了。 加上其他文字,咱们我方做 960 Grid System 就告终了! 本实例原来创造起来很是浅易,首要是依据 960 Grid System 的组织,掌管好每一个元素 的定位