怎么用ps设计网页主页？网页制作和PS关系

本文目录

• 怎么用ps设计网页主页
• 网页制作和PS关系
• 怎样用PS做网页
• 在Photoshop中如何制作网页
• 怎么用ps做网页设计
• 怎么使用PS制作一个网页

怎么用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的一种是制作网页的图片处理工具。

1. 网页设计前期，需要通过ps里设计出一效果图来，比如网站的首页效果图。

2. 效果图设计好后需要在ps里进行切割出一小块的图片来。以供以后进行网页的排版。这时，ps主要任务完成，以后要涉及到图片处理再在PS里操作。

3. 网页制作进入到布局排版阶段，可以使且另一网页处理工具Dw,可以在里面 DIV+Css处理网页。最后制作成一个真正的网页

怎样用PS做网页

布局就不好说了 要看设计者的喜好、习惯、网站的功能、设计风格来定了。接下来就是切图了，切图是个很麻烦但又很关键的步骤。切图前必须考虑好图片大小（大图为了浏览时能顺利打开最好切割成N小快），是否为背景图（有的图很大，但实际上都是小图片的平铺效果，所以遇到这种图只取小图，在网页中设为背景就可以了）。除此之外还要考虑是否可以用图片以外的元素代替，比如有的纯色块完全没必要用图片，只要在网页中调整表格的颜色就可以得到相同的效果。photoshop有专门的切割工具，按需要把设计好的网页切割好后用ctrl+alt+shift+s保存，就会生成一个html文件了，你会发现html的图片文件夹里已经有你切好的一块一块的小图片。浏览这个web页面，显示的效果和ps中的完全一致，似乎布局已经完成了。但Dreamweaver现在才刚刚开始排的上用场，因为网页毕竟不是纯粹的图片，还需要文字、flash、声音等元素的添加，Dreamweaver要做的就是继续完善你的页面，图片越少越好，该删的删、该设背景的设为背景该用表格颜色代替的用颜色代替。哇塞 想想都麻烦归根结底 photoshop 是用来构图设计的，而Dreamweaver是为了完成并完善图片到网页的转换过程。以上虽然也是我从网上找来的，不过跟我用的方法差不多。如果你有这个基础，应该能看懂的。

在Photoshop中如何制作网页

soso问问里答案： 首先是在Photoshop中制作网页的框架。网页中的元素有很多，像Banner条、文本框、文字、版权、Logo、广告等。尽量把这些相对独立的元素放在不同的图层中，这样方便以后的再。 不过图层一多，就显得很凌乱，可建立多个图层组来进行管理。单击图层面板右上角的小三角按钮，从弹出菜单中选择“新建组”，在随后出现的对话框中为新建组取一个名称（如：“网页顶部”），确定即可。这时图层面板中多出一个文件夹图标，即图层组。把相关联的图层都拖放到同一组中，比如网页顶部的所有元素，标题、菜单、Logo等都放到“网页顶部”组中。同样方法可以建立多个组，在组的下面还可以建立子组。 点击图层组前面的小三角，就可以像文件夹一样展开或折叠它，这样图层面板就显示干净利落得多，要修改某个元素也能很容易找到。对同一组中的所以图层可以方便地进行统一操作，如整体复制、删除、隐藏、合并等。 小提示： ★如果你想借鉴某个网页的设计，不妨把它截成图片放在最下面的图层中，再拉出多个参考线划出网页的大致版式，再在此基础之上边参考边制作自己的网页。 从Photoshop到Dreamweaver的转换 在Photoshop中设计好之后，下面就要用切片工具把它转换成网页。有些人在切片之前喜欢合并图层，其实没有必要，合不合并图层对最终生成的网页没有多大影响，反而会妨碍以后的修改。 第1步：我们最终需要的，只是Photoshop中制作的图形和框架。选择切片工具（快捷键为K），把需要的每个图形独立切分出来。每切分出一个图形，在它的左上角会显示出切片编号。 第2步：在工具箱右击切片工具，从弹出菜单中选择“切片选择工具”，用它可以选取、移动切片，并可以调整切片的大小。右击某个切片还可以删除或划分这个切片。 第3步：切分出所有图片后，执行“文件→存储为Web所用格式”命令，打开存储对话框，根据需要设置好图片的格式、调色板等参数后，点击右上角“存储”按钮调出保存对话框，选择HTML网页格式，使用默认设置，选择“所有用户切片”，保存即可。 第4步：在Dreamweaver中打开刚才保存的网页，添加文字并进行各种修改就可以了。怎么样，简单吧！注意：Photoshop导出的实际上就是一个大的表格，所有空白的地方也都会转换为图片填充，在DW中时，直接删除这些图片再添加相应的内容即可。 小提示： ★在Photoshop中好图形后，点击工具箱最下面的按钮（快捷键为Ctrl+Shift+M），可以转到ImageReady里进行，在这里，切片工具的功能更为强大，输出的图形控制也更丰富。

怎么用ps做网页设计

根据楼主的提问可以把问题分成2块理解第一层怎么用PS软件设计网页这个的话，一般你看上好看的网站之后保存为图片格式导入到PS软件，调整好网页的大小，针对性的地方进行修改便可。第二层的理解是你不知道怎么把把设计好的网页导出为WEB所有格式。简单的图片格式的保存为网页格式的话第一、在PS里面设计好网页第二、利用切片工具把网页切成一块一块，要想提高页面访问速度的话就切片切的小一点第三、保存为WEB所有格式 （图片及HTML） 这样的话你直接打开HTML的话就形成了页面访问的网页了。

怎么使用PS制作一个网页

你好!准确的说，ps是制作网页的其中一个软件之一,制作网页有专用的“网页三剑客”：PS、DW、flash。想要做网页的话，你起码要会前两个，其中ps在网页制作里面的作用主要就是：划分切片+图片处理。 划分切片：就是将你在ps里面做好的网页版面进行合理的划分，划分为一个个小的切片，然后用DW对这些切片进行布局。 图片处理：这个很好理解，就是对网页图片进行优化+处理，以节省空间和达到你想要的图片效果。 最终的网页文件是在DW这个软件里面完成的，单靠ps做不出来一个完整的网页。