网站元素打造

一、WEB网页元素设计

1、 网页端综合概述

PC就是 私人电脑 (personal computer)

**网站(Website)**开始是指在因特网上根据一定的规则，使用HTML（标准通用标记语言下的一个应用）等工具制作的用于展示特定内容相关网页的集合。简单地说，网站是一种沟通工具，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。

网页设计（WEB design，WUI），是根据企业希望向浏览者传递的信息，进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，对于提升企业的互联网品牌形象至关重要。网页设计是网站项目的重要组成部分。

网站和网页的关系：网站是一个整体，网页是一个个体，一个网站是由很多网页构建而成。网站和网页的关系就像家庭和家人一样。

2、网站的组成部分

以网站以视觉展示内容分为：LOGO、导航、banner、图标、按钮、图片等
网站组成以整个网站的组成分为：域名—>空间—>设计—>程序

3、网页以功能区分分为

设计网页的目的不同，应选择不同的网页策划与设计方案。
功能型网站：作用是为了解决用户所需的一些功能和需求。
信息型网站：作用是为了用户获取所需信息和资讯。
形象型网站：是一个企业、单位或组织对外进行宣传的一个网络窗口。
个性型网站：是在形象型的基础上有更加美观的动效和复杂的程序，视觉冲击力更强，交互效果更好。
网页元素设计理论
WEB元素包括：导航、按钮、图标、装饰条、边框
网页元素风格：平面、体积、光效、凹面

二、按钮理论

1按钮的基本形态

按钮的基本形态：①有区别于背景的外框②有对应的文字和图标 ③可以点击·按钮尽可能看起来比较饱满
按钮的尺寸：·尺寸应该适中
文字的大小：按钮的文字不能和按钮本身挤在一起，按钮本身也不能与其他网页元素挤在一起。它需要充足的margin(外边距)才能更加突出，也需要更多的padding(内边距)才能让文字更容易阅读。
按钮与背景：按钮的颜色应该区别于它周边的环境色，因此它要有高对比度的颜色。
按钮本身的颜色：按钮做为需要触动浏览者（用户）来进行点击，本身效果需要更加醒目而突出。
按钮状态：常规做一个按钮需要做出他的两种状态，有的需要做出按钮的三种状态，link：正常状态 hover：鼠标滑过 visited：鼠标点击

三、按钮制作

1 平面类按钮

绘制按钮通常使用形状工具（放大缩小不失真）
一般网页按钮的圆角半径为3~10px 常见为3px、5px

2 体积类按钮

体积类按钮在绘制时要遵循要遵循上浅下深的原则（光源在上）
给按钮添加描边可以更加区分跟背景的颜色，使按钮变得更加整体
需要注意：描边一般为1px，选择内部描边，并且颜色比本身颜色深一些
体积类按钮做高光使用图层样式里的内阴影，角度为90度，2px，白色选择叠加模式，适当降低透明度

3光效类按钮

掌握光效设计技法：①使用渐变工具绘制一个从有颜色到透明的径向渐变
②ctrl+T（自由变换）压扁
③使用选框工具框选一半的位置删除不取消选框
④反选选框ctrl+shift+I并向下移动一像素
⑤使用橡皮擦透明度调整为50%并擦除选框内有像素部分
⑥取消选框

4投影类按钮

投影的制作方法：一个是直接用图层样式做，另一个是新建图层绘制投影

5内凹类按钮

内凹类制作方法：使用图层样式，上方为内阴影黑色（正片叠底）下方为投影白色（叠加

四、复杂类网页元素

1. 导航

导航效果制作方法和按钮一样，需要注意导航条会有鼠标滑过效果和鼠标点击效果

2. 复杂效果–加载条

在制作复杂效果时注意整体要保持一种风格
复制粘贴图层样式：选择做好图层样式的图层右键复制图层样式，选择需要粘贴的图层进行粘贴
PS cc2015版本中可以对一个图层添加多个相同的图层样式
解决办法：转智能对象或编组
如果图层用了三个叠加的图层样式，那么剪切蒙版无法实现效果
解决办法：转智能对象或编组
层面板选项中透明度与填充
透明度：会降低图层的整体透明度，包括图层样式效果
填充：降低图层的透明度（图形图像填充），不包括图层样式效果
·旧版本的ps在使用微软雅黑字体时，无法清晰显示。而ps cc增加了WindowsLCD的文字
选项，编辑文字时选择WindowsLCD，就可以在PS中获得文字外观的真实预览