网页色块分割设计（网页色块分割设计）

本文目录一览：

• 1、如何正确地使用色块排版?
• 2、网页美工的切图设计技巧
• 3、网页设计中图像切图技巧
• 4、平面设计中使用色块排版的技巧

如何正确地使用色块排版?

◇◆ 色块颜色不要太多 ◆◇如果一个版面中的色块比较多，就要尽量控制颜色的数量，因为颜色一多就容易花，一般情况下把色系数量控制在四种之内为最佳（同一色系的颜色可以有深浅变化。

突出重点 突出重点信息的方式有很多，把它放在色块中也是一种不错的方法，文字和色块要使用对比色。▲上图的色块是为了突出折扣信息。▲上图的色块是为了凸现标题。

色块内的元素排版要有细节 很多设计师以为把信息分类排在色块里就万事大吉了，其实每个色块都是一个小版面，里面各元素的排版也十分讲究，比如不要把色块填得太满、文字要有大小对比，还可以用一些小元素进行装饰。

网页美工的切图设计技巧

1、在切图时，同一块中的内容是完整的，也就是说，要保证完整的一部分在一个块内，例如某区域的标题文字，网页的LOGO，网页的广告，网页的导航区等可以分别是一个独立的块，这样做的目的是方便日后网页编程和修改。

2、打开设计图 首先要打开设计师提供的设计图，通常设计图是一个psd文件，其中包含了所有需要切割的元素。选择需要切割的元素 在打开的设计图中，选择需要切割的元素，比如按钮、图片、文字等。

3、步骤如下：首先我们需要用到的文件就是psd的文件了，一般都是由设计师来完成的，我们切图也就是切psd文件，因为psd文件是分层的，所以想切哪里切哪里。

4、切勿随意篡改设计：没有按照栏目的逻辑来设计页面，也没能为网站的内容进行良好的呈现。这种行为只是单纯的为了自己能在网页设计时方便，从而随意的消减了很多网站的内容。

5、打开PS，点击切片工具，如下图所示。点击切片工具，可以将图片切割成所需的大小，如下图所示。剪切图片后，点击导出特殊网页使用的格式，如下图所示。输入属导出web的格式页面，并按住shift键选择所有部分。

6、创意网页美工设计技巧 小调整而非重设计 了解三分法的栅格的运用方式之后，你还需要明白更重要的一点：三分法带来的并非是一个无可挑剔的网页设计架构，而是一个用来微调现有设计的布局测试框架。

网页设计中图像切图技巧

1、日常工作中常用的图形图像处理软件有Photoshop、Flash、Firework等，这些软件中都有切片工具，但是在网页制作时，图形图像处理软件首选使用Firework。因为DREAMWEAVER中只要对图像双击，系统会自动调用Firework软件。

2、网页美工的切图设计技巧 一定要做好网页宽度的设置设计，一般网页宽度有760PX、900PX、1000PX等，最好不要超过1200PX的宽度，高度没有限制。大多数做网站的公司都有一个比较合理的标准。

3、所以在切图的时候，把原图放大300%以上再切。将整个大图切割后，选择所有一系列切片，然后使用软件中的图像优化工具，即菜单栏中的“窗口”下拉菜单“优化”命令，对所有小切片进行优化，即可解决上述问题。

4、首先，一定不要急于的去切图，一定要先整体的浏览一下，做到心里有数 整体的把控是非常重要的事情。

5、PS切图的步骤 下面是PS切图的基本步骤：打开设计图 首先要打开设计师提供的设计图，通常设计图是一个psd文件，其中包含了所有需要切割的元素。

平面设计中使用色块排版的技巧

1、突出重点 突出重点信息的方式有很多，把它放在色块中也是一种不错的方法，文字和色块要使用对比色。▲上图的色块是为了突出折扣信息。▲上图的色块是为了凸现标题。

2、色块颜色不要太多 如果一个版面中的色块比较多，就要尽量控制颜色的数量，因为颜色一多就容易花，一般情况下把色系数量控制在四种之内为最佳（同一色系的颜色可以有深浅变化。

3、◇◆ 色块要有张弛 ◆◇张弛其实就是指要有大小对比，如果版面中有多个色块时，那最好要有大小的区分，而不是所有色块一样大或差不多大。上图三个色块把版面均等分成三份，虽然不难看，但感觉缺乏主次和设计感。

4、色块内的元素排版要有细节 很多设计师以为把信息分类排在色块里就万事大吉了，其实每个色块都是一个小版面，里面各元素的排版也十分讲究，比如不要把色块填得太满、文字要有大小对比，还可以用一些小元素进行装饰。

5、不要太单调 统一是设计中的一大重要原则，但如果只有统一，那整版面就会很单调、没有生气，所以在用色块排版时也要注意保持变化。比如不要把所有的内容全部放进色块中，比如色块的方向、大小、轮廓、空间要有变化等等。