网页web端设计方法流程总结

网页web端设计方法流程总结，内容相对还是比较喜欢详细的，大家可以借鉴，欢迎收藏！

网页web端设计方法流程总结

Photoshop

矢量图形绘制

基本图形

矩形

圆角矩形

椭圆

多边形

复杂图形

对基本图形进行组合或运算

编辑路径上的锚点

添加锚点

删除锚点

转换锚点

调节锚点位置

调节曲线点控制手柄

钢笔工具

比例关系

百分百%

宽高比

计算公式：宽除以高

黄金分割

1:1.618

1:1:2:3:5:8:13:21

图层关系

同一个图层

颜色、效果全部相同

可以进行矢量运算

多个图层

颜色、效果可以不同

不能进行矢量运算

视图控制

按住Alt键旋转鼠标滚轮

Ctrl+1

检验作品正确的标准

Ctrl+0

三大基本操作

对齐（2个或2个以上对象的位置关系）

移动工具（V）

对齐到画布

在图层面板中选中需要对齐的两个图层

Ctrl+A

在移动工具的属性中对齐

固定对齐

获得固定位置对象的选区

在图层面板中选择需要对齐的对象

对齐

多个对象对其

在图层面板中选择多个图层

对于已经固定位置的对象，先编组

在移动工具的属性中对齐

路径选择工具（A）

对齐到画布

在画布中选中需要对齐的矢量图形

在路径选择工具的属性里选择“对齐到画布”

对齐

复制

拖拽图层到新建图层按钮上

Ctrl+J

使用移动工具V，按住Alt键拖拽

复制到新的图层

使用移动工具A，按住Alt键拖拽

使用移动工具A，选中路径，按Ctrl+C复制，Ctrl+V黏贴

复制到同一个图层

变换

数值变换

坐标位置

宽度高度

旋转角度

斜切

高级变换

连续变换

连续变换并复制

对图层组及多个图层无效

解决方法

先Ctrl+J

再Ctrl+Shift+T

效果制作

图像渐隐效果

针对于矢量图形，使用矢量图形填充

色标只有两个并且颜色相同

调整的是透明色标

使用图层蒙版来制作

添加图层蒙版

用渐变填充蒙版

黑透白不透，调节渐变（按住shift鼠标在造型蒙版上拉渐变效果）

描边效果

自己画

图层样式

描边

内发光

外发光

同时做4个边

投影

内阴影

只能做1个或2个

色彩搭配

有色彩和无色彩

有色彩

色相

饱和度

亮度

无色彩

亮度

HSB

H

S

B

色调

HSB的基本色

黑色

白色

高亮高饱

高亮中饱

高亮低饱

中亮高饱

中亮中饱

中亮低饱

低亮高饱

低亮中饱

低亮低饱

常用配色技巧

同色相搭配

同色调搭配

从照片中吸取颜色

高级配色技巧

同色相搭配

同色调搭配

图像合成

图像素材处理

位图素材只能缩小，不能放大

一定要等比例缩放

尽量转换为只能对象

背景和前景的亮度对比要大

图像素材的选择

视觉的流程

必须是高清大图

多个素材的高光和阴影的角度要一致

贴图

色相色调尽量一致

图片必须大于矩形的尺寸

注意视觉的方向

把图片全部显示

贴图类型

统一高度

全身照片

半身照片

文字排版设计

颜色

字体

字号

字符间距

行高

对齐方式

基线对齐

字符宽高

文字修饰

加粗

倾斜

下划线

删除线

英文大小写

文字转曲

文字结合图形

结合圆角矩形

集合椭圆形

……

WEB界面设计规范

基本规范

尺寸单位

像素（PX）

百分百（%）

颜色模式

RGB

分辨率

72

网页图像格式

GIF

JPG

PNG

文字规范

常用字体

宋体

微软雅黑

正文

特殊字体

做成图片

适用场合

LOGO

按钮

导航

常用字号

12PX

……

16PX

边缘设置

宋体12-16PX

宋体＞16PX

微软雅黑任何字号

导航设置

构成要素

图形

文字

图标

网页的安全宽度

基本概念

屏幕分辨率

浏览器窗口的宽度

网页内容的宽度

计算公式

屏幕分辨率的宽度-浏览器垂直滚动条的宽度（20px）=网页的内容宽度

三种情况

浏览器窗口宽度“大于”网页的内容宽度

浏览器窗口宽度“等于”网页的内容宽度

浏览器窗口宽度“小于”网页的内容宽度

1024×768

1000px

……

950px

1366×768

1300px

1100px

1000px

……

950px

1440×900

1400px

1300px

1200px

……

950px

网格化布局

分析方法

从上到下

从左到右

从外到内

Gif动画制作

动画类型

视频

Flash动画

Gif动画图片

最大颜色数量为256种

支持背景透明

支持动画

适用场合

卡通图

LOGO

线框图

颜色少于256种的情况

优化方法

选择恰当的颜色数量

同时观察图像的清晰程度和文件量

动画的原理

利用人的视觉暂停现象

动画制作技巧

打开为动画

逐帧（状态）动画

选择动画命令

移动动画

旋转动画

改变大小

改变透明度

共享图层

作用：用来制作动画中没有动画效果的内容

共享图层是一个新的图层

在状态中共享

图像的导出及优化

选择恰当的图像格式

根据选择的格式对图像进行优化

WEB界面设计流程

要求

保留

网页的结构

更换

LOGO

图片

文字

颜色

换色相

吸取其他网站的颜色

导航

LOGO

按钮

换色调

常用色彩

中高饱和度

网站的主色调

LOGO

导航

按钮

重点文字

低饱和度的颜色

背景

辅助色

制作流程

分析

网格结构

色彩

主色调

色相

色调

适用范围

LOGO

导航

重点文字

按钮

图标

辅色调

黑色

白色

灰色

内容宽度

制作

创建画布，宽度=网页内容宽度+留白

确定网页的内容宽度

矩形工具

参考线

根据模块搭建页面结构

添加效果

添加内容

文字

图片

输出

切片

得到网页中所有的图像素材

优化

选择恰当的图像格式

针对格式进行优化

输出到网站的网点

编码

WEB设计流程

需求

产品经理

交互

交互设计师

视觉

GUI视觉设计师

前端

网页制作（美工） 重点：区分每种语言（语法符号）

HTML（结构语言）

符号

尖括号<>

标签名用尖括号包含

斜杠/

标签的结束

感叹号!

提示性的说明

空格

分隔属性

等号=

给属性赋值

引号“”

包含值

常用标签

页面结构标签

结构分析

总结：父子级、兄弟（同胞）级 parent父级 children子级 siblings同辈

<div></div>容器

CSS（修饰）

怎么使用CSS

用html的style属性来书写css 例如：

使用<style></style>标签标记 如： <style> CSS语法 </style>

选择器的定义

标签名

例如： div{CSS}

类名

例如： .man{CSS}

用html标签的class属性来调用类名

id

例如： #head{CSS}

用html标签的id属性来调用

复合定义

分组定义

用逗号表示“和”

辈分定义

用空格表示“里”

伪类定义

：hover

鼠标经过

：active

鼠标按下

优先级

标签级别（父子关系）

通常子级会继承父级属性（不是所有属性都可以继承）

子级优先

CSS选择器定义

id>类>标签

同定义级别下后派生的优先级高

符号

冒号

给属性赋值

分号

分隔属性

空格

是多个值得分隔

属性

文本颜色

color颜色

文本对齐

text-align水平方向对齐：left/right/center

文本修饰

text-decoration

字体大小

font-size大小

字体系列

font-family:字体名称

字体样式

font-style:normal;font-style:italic（斜体）

字体强调

font-weight:normal;bold(加粗)

边框

border：颜色 粗细 类型

背景颜色

backgroud-color

背景图像

backgroud-image:erl（"图片地址"）

外边界

margin

margin-top（上）

margin-right

margin-bottom（下）

margin-left

默认布局级别

父子（兄弟）间上下边界共用

浮动布局级别

兄弟间边界是叠加的

显示类型

display：inline 内联

display：block 块

溢出

overflow：visible

overflow：hidden 隐藏

技巧1：处理子级浮动后父级没有高度的问题

技巧2：默认布局级别父子间共用边界的问题

overflow：auto 自动

overflow：scroll 滚动

CSS3属性

盒投影

box-shadow

标准布局

布局有三大布局级

上下安置

默认级

块，默认情况下有宽度，由直接父级决定

块，默认情况下没有宽度，由子级内容决定高度

左右安置

浮动级

float：left float：right float：none

clear：left clear：right clear：both

层级安置

定位级

position：fixed 固定

position：absolute 绝对 （可以参考父级为定位的对象）

position：relative 相对 （既保留原位置又晋升为定位值）

Z-index 层数

坐标

left

top

right

bottom

JAVASCRIPT（行为）

编程语言

点语言

“.”可以理解为“的”

使用javascript

编程基础

变量

数据类型

数值型

字符型

字符被“”包含

布尔值

true 是

false 否

比较运算

大于 ＞

小于 ＜

等于 ＝=

声明变量

var 变量名 =初始值

数组

声明数组

var 数组名= new Array()

语句

条件语句

if（）{}else{} 如果（条件）{}【成立时执行】，否则{}【不成立时执行】

函数

function 函数名（）{}

常用的提示方法

prompt("初始提示"，“新”)

定时方法

setInterval(变化，时间)

setTimeout（变化，时间）

jquery特效类库

安装调用jquery.js文件

独立语

$() $解释为文档 ()里面放的标签对象 .理解为“的”

常用方法

选择器

：first

：last

：eq（索引）

：even

：odd

事件

鼠标单击

click()

鼠标进入

mouseenter()

窗口离开

mouseleave()

窗口改变

resize()

滚动

scroll()

表单焦点事件

focus()

表单焦点离开事件

blur()

效果

显示/隐藏

show() hide()

淡入/淡出

fadeIn() fadeOut()

滑动

slideDown() slideUp()

动画

animate()

捕获，设置

text()

html()

val()

添加元素

append() 内部结尾处插入

prepend() 内部开头处插入

before() 外部开头处插入

after() 外部结束处插入

删除元素

remove() 删除被选元素（及其子元素）

empty() - 从被选元素中删除子元素

获取/设置类

addclass()

removeclass()

toggleClass()

css() 获取/设置属性

遍历

parent() 父辈级

children() 子级

siblings() 同胞

next() 下一个

prev() 前一个

first() 第一个

last() 最后一个

length 数组个数属性

index() 显示同级元素为第几个

$（元素组）index(元素)

flash

绘画

形状

方便相交图形进行运算

组

不让形状相交

元件

方便存储修改及交换使用

动画

关键帧

F5

延长帧

F6

补间

补间动画

必须是元件才能做补间

补间形状

传统补间

注意：先转元件

技巧

引导动画

被引导的必须是传统补间

引导线只能是形状对象

遮罩动画

遮罩层上必须放填充颜色，边框是不能做遮罩（将线转为填充，改变-形状-）

前端工程师