怎么用ps设计网页主页

制作主页是一项非常复杂的工作，跟创意合成有点类似。首先要根据客户的要求去找一些好的作品作为参考，找出一些灵感，然后搜集相关的素材，并按照自己的思路去慢慢溶图、渲染颜色，处理明暗及细节等。最终效果

一、网页首页模版创建

1、首先打开我们下载的ps软件，左上角选择文件-新建（快捷键ctrl+N），然后创建一个1920x3000的画布，网页设计分辨率选择72就可以，颜色模式我们选择RGB,点击创建；（注意宽度选择的是像素）

为什么我们要创建1920宽的呢，目前我们的显示器分辨率一般为1920px，所以创建1920px宽度的可以使我们的网页背景正好显示完整，左右不会出现空白。

2、接下来我们要将单位与标尺调整为像素，方便我们测量宽高。操作步骤为：编辑-首选项-单位与标尺（快捷键ctrl+K，找到单位与标尺）

3、选择 视图-标尺（快捷键ctrl+R）调用我们的刻度尺，方便直观的看到宽度和高度；左击刻度尺拖出2条参考线分别到360和1560刻度，使中间留有1200px的宽度。两个刻度尺中间的距离就为我们内容展示的区域，使用 （快捷键ctrl+; ）可以显示关闭刻度。

为什么要使用1200px的宽度呢，因为目前主流的网页设计主体内容宽度为980px和1200px，而1200px可以显示更多的内容，网页也可以显得更加的高端大气。

二、使用矩形工具制作黑色背景导航条：

1.选择“矩形工具”，设置填充色为“#333”，描边设为空；

2.创建“图层1”点击画布，在弹出的窗口中设置宽度1920，高度25，点击创建；

3.使用移动工具将导航条移动到左上角；

三、logo图片导入

1、使用文件-打开（ctrl+o），将logo图片打开；

2、ctrl+A选中图片，然后复制粘贴到当前页面中；

3、移动图片到指定的位置；

首页网页设计的制作方法

页面分为四层：框架、布局、模块、列表和数据块。

框架页面的框架基本上都是：“头”、“主体”、“尾”。还应在“头”的下面还要加个“菜单”。

布局（以下用#ID表示页面元素）#Head和#Foot里的就不说了，具体查看演示页面源码。布局说的是将#Main里的内容分成几大块。#Main里典型的左右结构，用#Layout_1，#Layout_2表示。如图

模块布局#Layout_1，#Layout_2里的块就是模块了，按我的理解，模块至少要有一个ID，Class则要视页面设计，给需要重用的加上。关于模块的ID名称，要取个有意义的名字，可以用#Col_1，#Col_2，。。。模块的Class名称用.cols_1，.cols_2，。。。

模块内部的如下图 ：

列表和数据块模块的主体是由列表组成的，而列表里则包含数据块。页面上的信息其实就是不同类型的列表。应将典型的列表方式提取出来，放在公用样式里（public.css）。需要定义到public.css里的列表至少要有以下三种：

.list-v 垂直列表方式 (图片和文字成垂直排列) .list-h 水平列表方式 (图片和文字成水平排列) .list-t 文字列表方式

数据块其实是微格式的一个变相应用，给不同的数据元素定义固定的结构。Tudou.com 需要定义的数据块有：

.mVideo (视频) .mList (豆单) .mUser (用户)

比如 .mVideo 应该是这样的：

最后，附上关键字表，就是一些用于公共定义的ID和Class名称。

网站首页设计有何要求

一、网站首页的必要元素 虽然首页元素根据企业性质的不同会做改变，但是基本的页面元素必须要具备。如：导航栏、LOGO、Banner、按钮、图片、文字。 1、导航栏 导航栏如果设计得恰到好处，是会给网页本身增色很多(千万不要太花哨，它属于功能物件，喧宾夺主就不好了)。导航栏有一排、两排、多排、图片导航和Frame 框架快捷导航(民主湖论坛就是这种)等等各种情况的设计。有时候是横排，有时候则是竖排。另外还有一些动态的导航栏，如很精彩的Flash导航。 2、LOGO LOGO是网站为了给大家一个比较直观的信息的表达工具。网站的LOGO，一般以静态的居多，也有动态的，但是LOGO的特点都是在表达网站的信息，是一个网站的直接的表现窗口。 3、Banner 是网站的广告展示，对于引起用户注意和记忆、增强画面效果有重要作用。 4、按钮 网页中的“用户登录”、“登录按钮”“More按钮”、“个股推荐”等等类似物件，通常都统称为按钮。它是引导用户进入其他页面的一个重要端口。

二、网站首页的整体规划 对网站首页设计的整体要求体现在： 1.有共性，才有统一，有细节区别，就有层次。 2.防止设计与实现过程中的偏差，不要定死具体要放多少条信息。 3.设计的各部分，要配合整体风格，夸张一点好像VI。 4.不仅页面上各项设计要统一，而且网站的各级别页面也要统一。 5.页面要“透气”，就是信息不要太过集中，以免文字编排太紧密。 6.不要有太多分散注意力的点。动态闪烁要适中。 7.页面留白部分，要根据平面设计原理来设计，请注意，分栏式结构不宜留白。 8.还要考虑到浏览器上部占用的屏幕空间，防止图片截断等造成视觉效果不好。 9.首页设计图片+导航，这是一种比较强的网站表达，可以根据时间的变化更改图片，一般用在专题网站上，如民主湖电台，还有很多公司的网页。

三、对网站首页功能易用性的要求 任何网站都要把这个问题放在第一位。不过大家请注意以下几点： 1.导航栏应最先调入，以便常客快速前往所需信息空间。 2.页面长度要短，使得用户在信息空间内可迅速移动。 3.导航设计方向要一致。支持导航的层次按钮应当从上到下或从左到右，但不要两者都用，不要混用方向。

四、网站首页设计要求体现出气氛情感表达 气氛会自然地激发出一种情感，不管它来自图片、颜色、标题或者是动态的广告，只要是来自页面，本身就具备了一种表达思想。气氛的表达是一个网站的灵魂所在，在浏览网页的是时候给人的第一感觉是最重要的，气氛情感也代表着整个网站的主题，是浏览者最容易所到感染的隐藏因素。