设计网页的步骤网页设计步骤怎么写

文章插图
小伙伴们好，最近小跳发现有诸多的小伙伴们对于设计网页的步骤这个都颇为感兴趣的，那么小跳今天就来为大家梳理下具体的一些信息一起来看看吧。
1、打开PS，新建一个名为“XXX Studio”的空白文档，在预设大小下拉列表中选择“1024 x 768”，设置模式为“RGB颜色” ，内容为“白色”，点击“确定”完成文档创建。
【设计网页的步骤网页设计步骤怎么写】2、新建一个图层，命名为“框架” ，用这个图层实现整个网页的整体布局。首先选择“矩形选择工具”，然后将矩形的宽度设置为1024 ，高度设置为80，在文档的上下框中选择一部分内容，用黑色填充。
3、从而使整个网页呈现“宽屏”效果。
4、在背景层上面新建一层，命名为“背景色” 。单击矩形选择工具，将宽度设置为400，高度设置为768，然后在窗口的左框架中选择一个部分，并用深绿色填充。然后点击“矩形选择工具”，
5、将宽度设置为624，高度设置为768，然后选择窗口右边框的一部分内容，用浅绿色填充。用两种颜色饱和度稍有差异的颜色填充，以便产生更明显的对比。
6、在“框架”层的顶部创建一个名为“主体元素”的新层。打开一张事先准备好的百合图片，双击“背景”图层转换为“0层”，点击“魔棒”工具，在图片的白色区域点击，选中白色区域。
7、按DEL键删除白色区域。然后将图片拖放到图层“主体元素”上。
8、然后选择矩形选择工具，设置宽度为624，高度为768 ，然后在窗口中选择花朵右侧的一部分，调整其亮度和对比度，使花朵左右两侧呈现明显的对比。调整此页面的细节并添加一些导航栏。
9、信息提示、版权信息等。最后制作完成的页面。
10、选择切片工具，然后对内容进行切片。分割的好处是有利于文件在网络上的传输，同时在使用切片工具分割内容时，最好将需要替换为文本内容的部分独立分割出来。分割完成后的效果。
11、找到保存文件的位置，打开工作室。html文件，在内容区点击鼠标右键，选择“查看源文件”，发现对应的网页内容已经生成。至此，使用PS设计网页内容完成。
本文到此结束，希望对大家有所帮助。

设计网页的步骤 网页设计步骤怎么写

设计网页的步骤网页设计步骤怎么写