1、网页设计流程
网页设计的两大要点是：整体风格和色彩搭配。
确定网站整体风格
在这里，我提供给大家一些参考经验：
1．将你的标志logo，尽可能的放在每个页面上最突出的位置。
2．突出你的标准色彩。
3．总结一句能反映贵站精髓的宣传标语！
4．相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的！
网站的整体风格及其创意设计是最难以学习的，难就难在没有一个固定的模式可以参照和模仿。给你一个主题，任何两人都不可能设计出完全一样的网站。
R、G、B就是Red、Green、Blue（红，绿，蓝）三种颜色，RGB模式就是由这三种颜色为基色进行叠加而模拟出大自然色彩的色彩组合模式。我们日常用的彩色电脑显示器、彩色电视机等的色彩都使用这种模式。
1、 矢量图
矢量图又叫做向量图，是用一系列计算机指令来描述和记录一幅图，一幅图可以解为一系列由点、线、面等到组成的子图，它所记录的是对象的几何形状、线条粗细和色彩等。生成的矢量图文件存储量很小，特别适用于文字设计、图案设计、版式设计、标志设计、计算机辅助设计（CAD）、工艺美术设计、插图等。矢量图只能表示有规律的线条组成的图形，如工程图、三维造型或艺术字等； 常见的矢量图处理软件有CoreIDRAW、AutoCAD、Illustrator和FreeHand等。
2、位图
位图又叫点阵图或像素图，计算机屏幕上的图你是由屏幕上的发光点（即像素）构成的，每个点用二进制数据来描述其颜色与亮度等信息，这些点是离散的，类似于点阵。 位图在放大到一定限度时会发现它是由一个个小方格组成的，这些小方格被称为像素点，一个像素是图像中最小的图像元素。也就是我们俗称的马赛克。
bmp：是未经过压缩的用点阵来表示的真彩图片,占用磁盘空间较大
gif：是经过压缩的,只能表示256种颜色,占用磁盘空间小,常用来演示色彩单一的成块的卡通图案,GIF还有一种可以表示连续的动画。
png：是fireworks的图片格式
jpg：也称为jpeg,是有损压缩格式但是它表示的颜色比较丰富,一般用来显示真彩的照片或图案。
作为设计者和客户（这里指各站长），如果事先没有明文协议的话设计者有权不提供源文件。
VI是Visual Identity的缩写，中文译为“企业视觉识别”。VI是CI计划的静态识别符号，是企业理念视觉化传达的载体，因此它项目最多，效果最为直接。VI作为视觉识别，它是外在表现，固然需要具有美感，但VI必须是MI的体现，直接反映企业的理念。因此VI设计包含这样一些原则：即充分传达企业理念、人性原则、民族性原则、简洁抽象及动态原则、员工参与原则、法律原则、艺术性原则和个性原则。
CI是Corporate Identity的缩写，中文译为“企业形象”。CI计划，是指企业有目的、有计划、战略性地创造出所希望的自身形象，由此提高企业的社会知名度，最终得到自己最适合的经营环境。
而logo只是网站或企业一个标志。
网页色彩搭配
1．用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。
2．用两种色彩。先选定一种色彩，然后选择它的对比色。
3．用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。
在网页配色中，还要切记一些误区：
1．不要将所有颜色都用到，尽量控制在三至五种色彩以内。
2．背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。
网页设计工具
图像处理设计：
adobe PhotoShop（外语简称：PS、其程序图标便是它的外语简称）是一个由Adobe Systems开发和发行的图像处理软件。 Adobe Photoshop有两个发行版本：标准版Adobe Photoshop和扩展版Adobe Photoshop Extended，扩展版除包含标准版所有功能之外，还增加了3D处理功能、动画图形编辑功能和高级图像分析功能。 Adobe只支持Windows操作系统和Mac OS操作系统版本的Photoshop ， 但Linux操作系统用户可以通过使用Wine来运行Photoshop CS6。
Fireworks，跟Photoshop一样都是图像处理软件，但Fireworks偏向于对网页的处理。
StylePix（单位：Hornil）跟PhotoShop一样都是图象处理软件，可以处理光栅及矢量图形。
动画设计：
Adobe Flash，前称Macromedia Flash，外语简称Flash，前身FutureSplash，既指Adobe Flash Professional多媒体创作程序，也指Adobe Flash Player。
网页代码编辑器：
Adobe Dreamweave（前称Macromedia Dreamweaver）用于编辑HTML、ASP、JSP、PHP、CSS、XML、JS的页面制作工具；是Adobe公司的著名网站开发工具。它使用所见即所得的接口，亦有HTML编辑的功能。有支持Mac和Windows两个系统的版本。
Amaya（单位：万维网联盟）用于编辑HTML、CSS、数学标记语言、可缩放矢量图形的工具。
2、UI设计中的切图是怎么切
UI切图一般都会用到专门的软件，比如我们用的摹客，Sketch、Adobe XD、PS的设计稿都支持，设计师只需在设计稿上进行切图标记，然后用摹客的插件上传到平台，就可以自由下载和使用切图了。以PS的插件为例：
1.安装摹客的PS插件，安装好之后在PS的「窗口>扩展功能」找到摹客插件，选择并打开：
2.标记切图：在完成的设计稿上，选中需要切图的图层或编组，点击「标记切图」。当图层或编组的名称前增加了“-e-”，「标记切图」变为「取消切图标记」，就可以了。
3.标记切图后，点击插件的上传按钮，开发工程师就可以在摹客平台自主下载不同尺寸和平台的切图了。
摹客的这些切图和标注等功能都是免费的，可以使用。
3、前端开发需要学习设计吗？
前端开发不需要学习设计，只需要掌握“切图”技能就可以了。
1. 设计师与前端工程师的关系：
在一家企业中，前端工程师与设计师在岗位上是独立的，业务上有联系：
设计师根据产品经理提供的产品原型图进行适当分析，再设计出一套前端开发人员能够使用的设计图（PSD图）；
前端工程师根据设计师提供的PSD图，进行切图工作，并使用具体的HTML、CSS、JavaScript代码实现网站的还原。
2. 前端工程师工作中的“设计”模块
寻找出PSD图中的图片元素，将其切下来（简称切图）之后进行适当的处理，将图片存储为合适的格式，有时还需要进行背景图合并的操作。
提示:网页设计并不是前端开发工程师的工作。
资料来源：《HTML5布局之路》
4、你好，今天我去面试ui设计工作，那个人问我:你回答一下什么是切图？我说:切图？？不就是拿刀切吗？我
脑洞挺大的，要是能把设计学深了，估计前途无量。先了解自己想要从事的设计行业的相关理论知识吧，不要什么设计类型都看一遍，设计那么多种，每一种涉及到的领域都很多。网页设计好后的切图是将设计稿切成便于制作成页面的图片。有利于交互，形成良好的视觉感。切图为后端编程者带来方便，提高效率，让网页稿有了交互性，实现平时看到的各种各样的功能，画面浏览速度快，有利于优化等。
5、UI设计中关于设计规范，切图和尺寸的几点疑
切图严格来说并不是Ui设计师的工作
而是前端工程师的工作
指的是将设计师的设计转化为网页
是一种将设计师的“理想”转化为“现实”的工作
将psd进行切片重组 利用div+css js等等前端开发代码来生成网页的一种技术
6、我现在很苦恼，自己是学习网页设计专业的，从事网站前端工作，设计加切图调整兼容，但是不怎么会写js，但
好久没有回答问题了
UI分为三方面：游戏、网页、手机。你如果不想去做手机UI，还是想继续在网页方面发展，可以选择做网页UI设计师，但根据你的情况，你要学手机UI了，但是没关系，你学完了之后，根据你的经验和掌握的，你完全可以向GUI设计师方向发展。
这样手机UI你也可以设计，网页方面你也可以主攻。
7、网页制作，是不是都是先切图，再DIV+CSS啊
如果单纯的说网页制作的话，分为以下步骤：
1、对所做的网站进行策划
2、对策划好的网站用专制图软件进行设属计
3、吧设计好的网站文件进行切图
4、按照设计图对网站开始用div+css进行排版
这是大致流程，一般网站都是这么做的！
8、前端开发工程师需要学习设计吗？
前端开发工程师是Web前端开发工程师的简称，2007年才真正开始受到重视的一个新兴专职业。Web前端开发技术是一个先属易后难的过程，主要包括三个要素：HTML（标准通用标记语言下的一个应用）、级联样式表和JavaScript。
前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。
9、前端新手需要写页面。但是老师要求先用photoshop先切图。需要一个会切图的大神帮下忙，非常感谢
你其实可以直接用专业的前端切图工具，比如摹客的PS插件来完成切图。摹客支持Sketch、Adobe XD、PS的设计稿，设计师只需在设计稿上进行切图标记，然后上传就可以下载所有切图了。
以PS为例，主要是这样操作：
1.在摹客官网安装并打开插件
插件安装好后打开PS，在「窗口>扩展功能」找到摹客插件，选择并打开。使用摹客平台账号登录。
2.标记切图
在完成的设计稿上，选中需要切图的图层或编组，点击「标记切图」。将在名称前增加“-e-”，「标记切图」变为「取消切图标记」，则标记切图完成。
3.上传至摹客
标记切图后，一键将设计稿上传至云端项目中，开发工程师就可以自主下载切图，只需在右侧面板中选中切图，点击即可下载。
摹客切图支持：
1.切图压缩：在右侧面板中选中切图
2. 切换平台和选择倍率：iOS、Android、Web
3. 下载选中切图，一步到位。
10、关于网页制作的，什么是切图，切图要达到什么目的，用什么工具来切
制作网页，很多的时候，首先要用图片处理软件制作出网页的效果图。效果图做好是一幅完整的图片，不可能把这一整张的图片都用在网页里。把效果图中有用的部分剪切下来作为网页制作时的素材，这个过程就是切图。（当然是用剪切、选择工具也可以，但是用切片工具处理更精确。）
切图的目的就是更加精确的进行网页布局。
photoshop、fireworks等软件都带有切片工具。