photoshop网站制作（ps网站制作教程）

本文目录一览：

• 1、如何使用ps制作网站页面
• 2、怎么用ps设计网页主页
• 3、PS切图的流程（网页制作）
• 4、如何用photoshop制作网页界面
• 5、PS制作网站
• 6、用photoshop设计网页首页时，设置多少精度网页图片精度高？

如何使用ps制作网站页面

网站页面流程 —— 先做好规划（导航、轮播图、页脚等等），然后界面先用ps设计出来、切图，再用代码（html+css+js）敲出来，挂到网站上~~就这样

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

PS切图的流程（网页制作）

我们在制作网页的时候常常需要上传图片，如果图片比较大此时我们就需要对图片进行切片处理，下面我们就来看看使用ps是如何进行切图的吧。

首先将ps打开然后按下Ctrl+O键就会弹出打开对话框，在打开的对话框内我们找到需要的图片，如图所示：

打开图片之后在工具箱内找到裁剪工具，如图所示：

点击裁剪工具下面的三角箭头，在其子级菜单哪里找到切片工具，如图所示：

点击切片工具我们就可以根据自己的需要对图片进行切片处理了，如图所示：

如何用photoshop制作网页界面

photoshop制作网页界面的一般流程为新建文档

文档尺寸为浏览器全屏后减去下拉条等元素的宽度，一般为1000px。高度一般为三到四屏。高度设置成五屏、六屏的也有。一般考虑的用户的阅读耐受力，太多屏的高度会影响用户阅读。多了建议做跳转。

设计好文档尺寸，然后就是网页设计工作了。在网络资源丰富的今天，web页面的设计素材网站是丰富的。昵图网、我图网、爱给网、68design网里有很多设计素材。

最后，记得保存您的网页界面文件。

PS制作网站

一般来说，用ps做整个网站的页面风格（就是一个网页的图片），然后用ps里面的切片命令，将页面切成在html+css+javascript里可以引用的图片文件。能做的就这些。还有就是网站的页首了。

用photoshop设计网页首页时，设置多少精度网页图片精度高？

Photoshop制作网页效果图的几个注意点：\x0d\x0a第一点：新建文件尺寸大小； 制作网页效果图，首先就是要新建文件，那么要建多大的合适呢？这可不是随便乱定的，一般我们是要根据目前绝大部分显示器的最佳分辨率来定。在比较早些时候，17英寸为主流显示器，最佳分辨率为1024*768，所以考虑到网页在显示器上能有最好的显示效果，一般都定在1003px以下（这个数据是由显示器最宽1024px减去浏览器右侧滚动条宽21px和到1003px）。如果你的网页超过这个尺寸，那当网页即使最大化显示的时候，内容也不能完全呈现，底部就会显示水平滚动条，这样会影响用户体验！ 目前来说19英寸分辨率达到1280以上的宽屏显示器已经成为主流，因此现在很多网页都开始做得更宽，比如可以做成1200px宽的，但为了能让1024分辨率下都能有好显示，建议还是定为1003px以下，比如960，980都是合适的。如果不确定应该设置多少合适，可以打开参考网站，看看他们是设置多少。 如何查看别人的网页尺寸呢？很简单，使用截图工具把网页截下完整的宽度后使用Photoshop用选区工具框选宽度就能在信息面板里显示出来了！ \x0d\x0a第二点：字体与字号； 字体方面，在浏览器里显示的字体是调用操作系统里的，因为绝大部分操作系统都有宋体、黑体、微软雅黑、Arial、Tahoma这几种字体，所以在网页效果制作时，尽量使用这些字体，如果不使用这些字体，那到在把网页效果图做成网页的时候就没法做出这种字体效果了；如果非要使用其他字体，那么在做成网页的时候只能以图片的形式来显示出来，不过考虑到图片文件都偏大，会让网页打开速度降低，所以尽量不要以这种形式显示。 \x0d\x0a第三点：关于颜色； 不同的操作系统会有不一样的调色标准，因在Web上就有定义了一个安全色表，以期能让符合这个色表定义的颜色，在不同显示设备上都能有同样的显示效果。不过对于不是对色彩十分严谨的网页效果来说，不需要这么严格执行，所以关于颜色，我们直接使用Photoshop里默认的颜色就可以了，当然，如果你所设计的网页对于色彩十分看中，那请认真按照Web安全色标准设计。 \x0d\x0a第四点：网页效果图里填充的内容； 在制作网页效果的时候，很多地方要填充文字内容，这个时候有些初学者为了方便操作，直接把同样的内容复制使用，最后整个网页上看起来就会显得怪怪的。这里大家在填充内容的时候，最好是使用不一样的信息，或者干脆直接从其他网页上截取内容填充。\x0d\x0a第五点：要注重细节处理； 因为你制作出来的效果图，最终是做为网页的制作依据，因此在效果图上，每个模块的间距都要精确到像素、文字摆放的位置等也要准确到位。 \x0d\x0a第六点：保存的图片格式； 效果图制作好后，建议保存成png格式。不要存jpg格式，因为这个格式对图片压缩比较大，会丢失细节。

photoshop网站制作的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于ps网站制作教程、photoshop网站制作的信息别忘了在云尚网络www.ysfad.net进行查找喔。