网页制作+PS笔记

静态页面制作的流程
    大部分情况下，网页设计与制作人员需要实现的是静态页面。

    1、观察图纸

    拿到一张设计图，不要立即就是用软件来划分切片和输出图片，应先观察一下图纸，对页面的布局、配色有一个整体的认识，而在对设计图达成一个初步的了解之后，就会对如何在HTML页面里面布局有了规划，而根据这个规划再来对设计图进行分割输出，以免匆匆切分之后又发现在HTML里面无法实现或者效果不好而返工。

    2、拆分图纸

        （1）分离颜色。其中一般包括3部分配色：页面主辅颜色搭配的基本配色、普通超级链接的配色和导航栏超级链接的配色。

        （2）提取尺寸。按照设计图的尺寸来搭建网页才会符合图纸上的设计。

        （3）分离背景图。背景图可能是大面积重复的图案，也可能就是一张图片，一般和内容没有关系的装饰性图片都可以考虑制作成背景图。

        （4）分离图标及特殊边框。小图标及花边可以给网页增添细节和亮点，边框在理论上讲其使用方法和背景图片类似，不过根据情况往往需要单独输出。

        （5）分离图片。内容相关的图片，比如新闻报道的图片、讲解操作步骤的图片等。

    3、组装

    就是把分离出来的元素按照一定的方法组合成与设计图效果类似的页面。

详细分析：
    1、观察图纸

        比如，网站的主色调是绿色和白色，配以黄绿色和少量的成色，文字为黑色（配色采集）。绿色是一种非常具有亲和力的颜色，它代表的是自然、生命、活力与健康，是使用比较广泛的颜色之一。黄绿色和成色的使用，则使整个网站显得朝气蓬勃。

    2、设计分析。

        （1）首页（2）内容页

    3、布局分析

        （1）首页    

                    页面整体（body）有一个灰色的背景色；

                    内容部分同页顶部有一段距离，可以通过设置页面（body）的填充（padding）来实现；

                    页面整体在窗口中左右居中显示，可以通过设置层（div）的边界（margin）来实现；

                    内容整体有一个1px宽的边框，可以通过设置表格的边框（border）来实现；

                    网站标识的背景有条状底纹，且上下分别有一条白色的许仙，需要输出背景图；

                    网站标识和语言版本选择部分采用了特殊字体，要作为图片输出；

                    栏目列表部分为无序列表，类型为“方块”；

                    重点内容层（id=h_text）和语言选择层（id=ver）为上下顺序。

    4、拆分图纸

    通过观察图纸，已经对网页的版式与颜色有了基本的认识，下面要把制作HTML页面需要的“原料”分离出来。这些原料一般包括尺寸坐标、颜色、背景图、装饰性的线框、特殊字体的文字、装饰图片等。

        （1）分离颜色

            配色提取基本可以分为基本配色、普通链接配色和当行部分配色3种。基本配色包括页面、分栏、表格等的背景色，边框及装饰线条等的颜色，普通文字的颜色等。普通链接配色指的是普通文字中间出现的连接，包括内容目录和文字内出现的链接等。导航部分配色实质页面内栏目及导航条部分的配色，这部分对于访问者来说往往是使用率比较高的，设计者一般会对导航部分进行特别的背景色和链接配色设计加以突出，因此在这里单独提出来进行处理。

    5、拆分首页

        通过分析首页设计图，需要提取出组装页面用的布局尺寸、背景图、边框及装饰线、特殊插图等“元件”。

            所说的“尺寸”，包括了CSS盒模型中的边界（margin）、边框（border）、填充（padding）、宽度（width）、高度（height）以及XY坐标等。

            浏览器会自动对背景图进行重复显示，可以通过设定CSS来控制背景图的显示方式，比如只按纵向重复或者只按横向重复等，灵活地使用背景图。同时还有一种情况要使用到背景图，就是特殊样式的边框、阴影、装饰线等。

    6、组装

PhotpShop特效设计过程记录
1、文字投影
    首先，添加文字，选择右下角【添加图层样式】->【阴影】，进行设置。也可以选择【图层】菜单，选择【图层样式】。

2、图像合成
    首先打开两幅图，选择要合成的区域（如嘴），移动到另一个图像上，此时可以按下键盘上的数字调整透明度，调整好位置后再按0就又变成完全不透明了。然后为选择区域加一个蒙版，利用这个蒙版进行融合。选择画笔工具，调换前景色和背景色，然后就可以融合边缘了。最后将两个图像进行调色处理，步骤是点击图像->调整->色相和饱和度。如果在擦除的过程中擦多了，还可以对调前景色和背景色然后擦回来。

3、用【快速蒙版】选择边缘模糊程度不同的区域
    首先在图片上选择大致的选择区域，点击【快速蒙版按钮】，可以看到选择的区域为白色，未选择的区域为粉红色。用画笔工具进行扩充或缩小选区，这里可以调整前景色和背景色来选择扩充或者缩小。最后再点击【快速蒙版按钮】即可。

4、 快捷键
    ctr+J ：复制图层    ctr+T ：选择选区大小（自由变换）

    ctr+shift+alt+E ：合并图层并拷贝，合并后的图层放在最顶层

    按alt+双击背景 ：解除背景锁定

    ctr+I：背景的反向颜色

5、做有金属光泽的球
    首先，在层上建立原型的选区，选择渐变工具，双击设置颜色为黑白，拖动左下角颜色到三分之一处，在左下角新建颜色块，在大概三分之二处吸取颜色，确定，设置反向，在圆球选区的左上角向右下设置颜色变换。即可。

6、使用剪贴蒙版
    依然是把选择好的区域拽到背景图层，选择背景，用任何颜色画出要约束的区域，单击上面的图层，创建剪贴蒙版。快捷键：ctr+shift+G