photoshop网站制作（ps网页版在线制作）
本文目录一览：
如何使用ps制作网站页面
网站页面流程 —— 先做好规划（导航、轮播图、页脚等等），然后界面先用ps设计出来、切图，再用代码（html+css+js）敲出来，挂到网站上~~就这样
教您怎样用Photoshop制作一个漂亮的网页
第一步 首先新建一个文档。我创建的是宽1100px高1100px的文档。这个文档可以用于宽为1024px的站点，仍然还有空间去决定在可视区域之外如何布置，这样在更大屏幕下也很好的适应。
现在第一步先创建一个美观抽象背景。我们使用从#1b204c到#472373这两种颜色按照线性递减绘制背景。
第二步 现在我们要一个吸引眼球的背景，足够抽象到不会干扰人阅读文字。很走运，在GoMedia’s Arsenal站点里有一张很棒的免费水彩图片，点击“freebie（免费赠品）”区，你就能找到两张水彩图片；我们要的是绿色那张。
现在这样很开心了，你按下CTRL+I将图片反置，会在黑色为底的背景上呈现漂亮的粉紫色，这样就更酷了！
第三步 现在把处理过的水彩图片拷贝到主画布上，按下CTRL+T键，将其调整到适当大小。这里我们要将右边淡化为黑色（这样在后面我们可以更方便地编辑我们的 HTML代码）。另外，我们也不想在竖直方向过长，因此最好擦掉一些超出的地方。选取一个画刷，选用黑色擦去底下部分。
注意最好选取带有一些纹理的画刷，这样擦去部分不会显得很明显。如果你向下滚动画刷列表，有一个Photoshop自带的像图例中的画刷。这个画刷也能用，当然你可能有其他更漂亮的画刷，用起来更加自如。
你选中以后，在右边和底下区域黑色填充，这样这层就覆盖在整个画布上了。
photoshop怎么制作网页
打开PS，新建空白文档，从预设大小下拉列表中选择 “1024 x 768”，模式设计为“RGB颜色”，内容设置为“白色”，点击“好”按钮完成文档的创建工作。
新建一名称为“框架”的图层，利用该图层实际整个网页的整体布局。首先选择“矩形选择工具”，然后将矩形的宽度设置为1024，高度设置为80，在文档的上下两侧各框选一部分内容并填充为黑色，从而使整个网页呈现“宽屏幕”效果。
在背景图层的上方新建一新图层，并命名为“背景颜色”。点击“矩形选择工具”，设置“宽度为400，高度为768，然后在窗口的左侧框选一部分内容，填充一种深绿色。然后点击“矩形选择工具”，设置“宽度为624，高度为768，然后在窗口的右侧框选一部分内容，填充一种浅绿色。填充两种颜色饱和度有一点差别的颜色，目地是产生较为明显的对比。
在“框架”图层之上再新建一图层，名称为“主体元素”。打开一张事先准备好的图片，双击“背景”图层将其转换为“图层0”，点击“魔术棒”工具，在图片白色区域内点击，选择白色区域后，按下DEL键删除白色区域。然后拖放图片到图层“主体元素”上
然后选择“矩形选择工具”，设置“宽度为624，高度为768，然后在窗口中选择花朵右侧的一部分内容，并调整其亮度和对比度，使花朵的左右两侧呈现明显的对比。
对该页面进行细节的调整，增加一些导航栏，信息提示内容和版权信息等内容，最终制作完成的页面如图所示。
选择“切片”工具，然后对内容进行切分。切分的好处是有利于文件在网络上传输，同时在用切片工具划分内容时最好将需要被文字内容替换的部分进行独立分割。
怎么用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、移动图片到指定的位置；
如何用photoshop制作网页界面
photoshop制作网页界面的一般流程为新建文档
文档尺寸为浏览器全屏后减去下拉条等元素的宽度，一般为1000px。高度一般为三到四屏。高度设置成五屏、六屏的也有。一般考虑的用户的阅读耐受力，太多屏的高度会影响用户阅读。多了建议做跳转。
设计好文档尺寸，然后就是网页设计工作了。在网络资源丰富的今天，web页面的设计素材网站是丰富的。昵图网、我图网、爱给网、68design网里有很多设计素材。
最后，记得保存您的网页界面文件。
photoshop网站制作的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于ps网页版在线制作、photoshop网站制作的信息别忘了在易优之家进行查找喔。
发表评论
暂时没有评论，来抢沙发吧~