QQ登录

只需一步,快速开始

登录 | 注册 | 找回密码

河海大学奋进网

查看: 420|回复: 0

[网页设计] 从设计到制作过程(一)

[复制链接]
  • TA的每日心情
    无聊
    2017-3-14 09:22
  • 签到天数: 11 天

    [LV.3]自带板凳

    发表于 2016-12-3 00:04:08 | 显示全部楼层 |阅读模式

    第一步:下载960网格模板

    我一直以来做的设计几乎全部是基于960网格模板的. 因此在我们开始创作之前,先下载这个模板. 你能在960.gs上找到这些模板. 下载之后解压zip里面关于PSD的模板. 你会发现有两种规格: 一个是12栏式的而另一个是16栏式的. 他们的区别就像名字所说的,一个是按12栏分布一个按16栏. 更详细的介绍一下吧, 如果你的设计里面分3个区块你就选择12栏式的,那是因为12能被3整除; 同理假如你的设计分四个区块, 你可以选12栏式或者16栏式,那时因为12和16都可以被4整除. 你会发现这个技巧将用于下面教程.


    第二步:构造你想象的结构

    在我们打开PSD网格模板创作前, 我们首先需要先构造一下想象中的结构. 从上面的这张图,你可以看出来:因为在一个排版中又有排版,所以这是一个有点复杂的结构.

    第三步

    构造了结构之后我们继续. 打开16栏式的PSD模板文件. 打开 “图像 >画布大小” . 把画布的宽度设置为 1200px 高度设置为 1700px .把背景色设置为 #ffffff 既白色.

    第四步

    用长方形工具在顶部画一个宽100%高大概80px的长方形. 用颜色: #dddddd 填充它.

    第五步

    在长方形那层上面创建一个新层. 按住CRTL键鼠标点击长方形层. 长方形就被选中了,然后把目标移至刚建的新层上. 选择半径 600px 的软笔刷(如图), 把其颜色设置为白色, 然后就像图片所示那样在选框上边缘点几下. 通过这个技巧你画出了一个微妙的照亮效果. 你现在可以把这两层联合起来了.

    第六步

    建一个新层,再用长方形工具如图所示在上端画一个深灰色的小长方形.

    第七步

    在距离上端长方形500px处开始画一个宽 100% 高 575px 的长方形. 设置其由 #d2d2d0到 #ffffff 的渐变色, 角度为-90,缩放为100%

    第八步

    现在我们如第五步那样添加照亮效果. 这个技巧我们将很频繁地使用;因此下次用到的时候我只提示是第五步的效果 .

    在当前层之上简历一个新层. Ctrl+鼠标点击这个大的长方形. 选择 600px的软笔刷, 设置颜色为白色,如图所示对选区的边缘点击多下.

    第九步

    在页首长方形块底端画一条1px的灰蓝色的线, 混合属性中添加阴影效果. 阴影参数: 正底叠加, 透明度: 65%, 方向: -90, 距离: 1px , 宽度: 6px. 之后再建一个新层,在灰蓝色线下面画一条1px的白线.通过这种方式,我们就可以创建一个轮廓鲜明的边缘. 可以说在你的设计中,你可以把这个技巧用于其他色块.






    回复

    使用道具 举报

    发表回复

    您需要登录后才可以回帖 登录 | 注册 人人连接登陆

    本版积分规则

    Archiver|手机版|联系奋进|小黑屋|河海大学奋进网 ( 苏ICP备10093430号-1   

    Copyright 2013 最新最精彩-社区论坛 版权所有 All Rights Reserved.

    Powered by Discuz! X3.2 Copyright
    © 2001-2013 Comsenz Inc.    All Rights Reserved.

    Archiver|手机版|联系奋进|小黑屋|河海大学奋进网 ( 苏ICP备10093430号-1   

    GMT+8, 2017-5-25 09:19 , Processed in 0.226755 second(s), 38 queries, Gzip On.

    快速回复 返回顶部 返回列表