ps网页设计教程

详细操作

打开PS，新建空白文档，名称设置为“feifei工作室”，从预设大小下拉列表中选择 “1024 x 768”，模式设计为“RGB颜色”，内容设置为“白色”，点击“好”按钮完成文档的创建工作。

新建一名称为“框架”的图层，利用该图层实际整个网页的整体布局。首先选择“矩形选择工具”，然后将矩形的宽度设置为1024，高度设置为80，在文档的上下两侧各框选一部分内容并填充为黑色，从而使整个网页呈现“宽屏幕”效果。

在背景图层的上方新建一新图层，并命名为“背景颜色”。点击“矩形选择工具”，设置“宽度为400，高度为768，然后在窗口的左侧框选一部分内容，填充一种深绿色。然后点击“矩形选择工具”，设置“宽度为624，高度为768，然后在窗口的右侧框选一部分内容，填充一种浅绿色。填充两种颜色饱和度有一点差别的颜色，目地是产生较为明显的对比。

在“框架”图层之上再新建一图层，名称为“主体元素”。打开一张事先准备好的百合花图片，双击“背景”图层将其转换为“图层0”，点击“魔术棒”工具，在图片白色区域内点击，选择白色区域后，按下DEL键删除白色区域。然后拖放图片到图层“主体元素”上，位置如图所示。

然后选择“矩形选择工具”，设置“宽度为624，高度为768，然后在窗口中选择花朵右侧的一部分内容，并调整其亮度和对比度，使花朵的左右两侧呈现明显的对比。

对该页面进行细节的调整，增加一些导航栏，信息提示内容和版权信息等内容，最终制作完成的页面如图所示。

选择“切片”工具，然后对内容进行切分。切分的好处是有利于文件在网络上传输，同时在用切片工具划分内容时最好将需要被文字内容替换的部分进行独立分割。分割完成后的效果如图所示。

找到保存文件的位置，打开"feifei工作室.html"文件，然后在内容区域内点击鼠标右键，选择“查看源文件”，就会发现对应的网页内容已经生成。至此，利用PS设计网页内容完成。

用户类似问题：

问题1：photoshop和网页设计的教程书哪本好

我向你推荐一个网站http://www.51zxw.net/study.asp?vip=6839953 不论你是学习PS还是学习网页设计亦或者是其他的知识这里都有详细的视频教程，这里的很多知识可是书本上没有的，我学ps和Dreamweaver8就是从那里学的 >>详细

问题2：如何用Photoshop做网页设计

如果是给个人做，怎么做都无所谓。如果是在公司里给客户做。这一步不可少，出了效果图后，要给客户看。等客户确定不再修改时再做网页，目的就在于防止客户反复修改，动布局！ 另外会做网页效果图，代表你的设计能力。用dreamweaver直接做的后果... >>详细

问题3：网页制作视频教程ps+Dreamweaver做首页的

学用DreamWeaver做ASP http://zhidao.baidu.com/question/87237722.html PS讲课录像网址：http://www.youku.com/playlist_show/id_2482704_ascending_1_page_1.html 另外你可以到 新浪 网下载安装 2008正式版的UC 然后进入网页房间，面对面的听... >>详细

问题4：求photoshop网页设计视频教程

关于这个,我开始也是在网上找,不过确实找不到全面的,(应该是学好基础就可以慢慢照着设计网页效果图了)你可以看看大师之路网站里的,把这里的基础学好,肯定可以自己开始设计了 GoLive的视频教程里有切片的介绍 至于画网页你可以先找喜欢的网页,截... >>详细

问题5：谁有Photoshop网页制作的教程

ps 并非制作网页 它是个图片处理工具，它只是设计网页的样式而已 因为它作图功能强大，为了网页美观一般用ps先生成网页初样 真正做网页的还是Dreamweaver 或者其他一些软件了 你用ps把制作出一张漂亮的网页的过程，其实就是作图的过程了 然后再... >>详细