当前位置首页 > 网站建设> 正文

用Photoshop做网页设计图的教程有哪些

photoshop是处理图片的软件，并非做网页的。
网页需要格局，代码等。如果只是拿PS做一张图，再用firework去隔，会很简单，很枯燥的。
再学学dreamweaver

PS网页设计布局有四种方式分别是?

网页设计的布局有哪几种？

1.“国”字型：

2.拐角型：

3.标题正文型：

4.左右框架型：

5.上下框架型：

6.综合框架型：

7.封面型：

8.Flash型：网页设计

9.变化型：网页设计

DIV+CSS和table两种布局方式，DIV+CSS布局运行速度快，科学，但难学，table布局简单，运行加载慢，做网站不科学，各有利弊。

PS中的web就是在web中使用的图片格式，包括JPG、PNG、GIF，这类文件压缩比高,文件体积小，上传和下载速度快，适合web传播。

web的本意是蜘蛛网和网的意思，在网页设计中我们称为网页的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本、超媒体、超文本传输协议等。

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

一、网页首页模版创建

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、移动图片到指定的位置

photoshop里可以设计网页外观，然后切片，最后输出成网页。但这样出来的所谓静态网页就是个个小图片的集合。真正要形成个网页，需要用网页软件做后期的很多调整，ps其实只做网页外观设计工作。