如何用Photoshop 制作网页?该从哪里入手呢?
发布网友
发布时间：2022-09-25 03:29
共4个回答
热心网友
时间：2023-09-15 06:22
【页面构成】
一个网页通常来说会有一个导航条（nav），一个页脚（footer）和一个内容区域（body）。各个页面（二级页面）通过导航条的链接来访问。通过内容区域的链接和列表来访问其他详细页面（*页面）。因此，通常，一个简单的CMS（内容管理系统，也可简单称之为新闻系统或博客）,通常有【首页index.html】【列表list.html】【正文/详情show.html】三个页面组成。
【页面模块区域】
知道了页面的结构和组成，就可以在页面的内容上入手了。内容的设计和制作有一定的规范，简单说，就是链接看上去可以点击，按钮看上去像个按钮，文本框看上去可以输入，保留默认控件的识别性和可用性（单选、复选，手机端通常为左右滑动式，PC端则常委纽扣式，这种是符合设备操作体验的变化和设计），注意观察网页范例，可以整理出诸如【页面头部：logo+导航+其他】【主导航】【下拉菜单】【搜索框】【幻灯片】【文字列表】【图片列表】【选项卡/滑动门列表】【评论列表】【表单区域】等多种展示方式的模块。
【页面规划和设计】
严格意义上讲，页面的设计除了根据设计师的创意来设计外，还包含一个需求分析设计。需求分析是根据实际的需求（假设我是做新闻的，我希望多以列表的形式展示；我是做商城的，我希望多以图文列表的形式展示等）分析来设计展示形式，以内容的权重（哪个模块更重要或更有意义）来布局。设计师创意则相对灵活，只需要把整理好的模块按照你的想法布局就可以。
页面的尺寸，严格说是没有*的，但，常规布局的页面（如微博、腾讯等一些门户）都是按照显示器的实际尺寸（适应1024*768的分辨率）来设计的，这个就是960grid栅格，flash整站则没有太多要求（它可以适时缩放，就像播放的电影），手机端的设备则需要考虑普通的分辨率尺寸（320*480等）。
因此，设计师通常是建立一个尺寸比较适中的新文档，然后建立对应的尺寸的页面文档，后者作为辅助图形拖入第一个文档中，然后开始建立辅助线，比如：新建1440*3000的文档，保存之。再建立960*3000的文档，按下【V】键，点击文档，不松开鼠标拖动到第一个文档中，使用对齐方式居中顶对齐，从标尺拖出辅助线即可。
【细节和效果】
页面设计不同于排版，页面的设计还是需要适当考虑到实际的制作的，有些效果看上去很炫很酷，但通过代码是无法实现的（网页通常都会书写程html文件使用），那么，我们就需要对一些效果有所了解，知己知彼，才能游刃有余。
良好的视觉效果，可以让站点看上去更有冲击力和亲和力（不同的风格有不同的感受），而视觉效果的设计除了活用素材混合模式、滤镜和调色外，还需要你有一定的审美情趣，以前是说【眼高手低】，而今，就要说【眼低手高】了，很多效果看到懂，就是想不到，总是看到别人的东西的时候大呼【这样也可以啊？】
细节的把握是比较锻炼的，这点推荐你去看一下图标和UI设计的一些案例【iconfans】，你可以学会如何使用铅笔调整像素级的细节，也可以学会使用钢笔画笔绘制天马行空的图形，还可以学会输出清晰、锐利的图形图像，还可以学会设计更有体验意义的模块和结构（不要小看体验和设计，试想，太小的文字或图标，看不清不说，相信你也点击不到，而这就是体验）。
【其他】
PS网页设计除了要求你具有设计的功底，还需要你有良好的工具使用习惯，这里主要说2点——【素材整理和图层操作】。
素材整理，PS中比较灵活的素材就是【字体】【笔刷】【样式】【图案】，其中【样式】尤为重要，你出来使用网上下载的素材外，平时自己经常使用的也可以新建到样式列表中，并且，注意及时备份你的样式列表（偶尔重装一下系统或换一台电脑，你应该不想再建样式库吧）。图案通常可以快速的铺设一些复杂的背景纹路（如：古典图案和格子、像素点阵等）和图片背景（如：木纹背景），字体还用说吗？
图层操作，图层操作除了简单的图层样式控制外，你还要学会使用【Ctrl+G】，图层打组，图层打组可以很好的管理你的图层和设置（一个网页通常会有N多个图层，打组可以压缩图层列表的高度，还可以把相关的模块整合在一起），给予适当的命名，你大海捞针就变的轻松多了~~~
暂时这么多，大早晨的光给你码字了~~追问非常感谢！！写的非常好。但是还是不知道该怎么下手。。愁啊。。谢谢你
追答建议学习方法：由小及大，由浅入深，由简入繁。层层递进。
结构（入门）——效果（进阶）——效率（提升）——质量（提升）——规范（发散思维）
【小模块练习】学习模块的组成和内容样式的设置（字号、字体、边框样式、对齐方式）；
【小页面设计】模块的排版、页面模块对齐；
【大页面设计】页面整体布局、页面整体模块对齐。
学会简单的模块设计和页面排版，就可以着手效果的表现了，多看插画素材，多学PS特效设计。
接下来就可以学习图标和图片细节的处理了。
如果你打算从事美工工作或业余，也可以尝试切图（不要用PS自带的切图，很产生很多冗余图片碎片，而且，其代码乱七八糟）。
其实切图的过程就可以学习html+css布局了，当你学习完jhtml的基本制作，其提高部分就是整合压缩和标准化，整合压缩就是把图片压缩，把结构精简，标准化就是代码排版标准，标签语法用法标准，浏览器兼容性好。
网页学习的后期进阶就是页面的优化，除了上面提到的整合和标准，就是交互封装和交互创新，以及页面框架研究（有开源的UI布局框架，如jquery-mobile等，可以很简单轻松的制作多平台站点页面）。
再进阶就是创新开发了，开发基于html的高级应用，如web-app等，当然，你也可以扩展研发其周边产品，如交互框架、开发工具等。
热心网友
时间：2023-09-15 06:22
热心网友
时间：2023-09-15 06:23
热心网友
时间：2023-09-15 06:23
热心网友
时间：2023-09-15 06:22
【页面构成】
一个网页通常来说会有一个导航条（nav），一个页脚（footer）和一个内容区域（body）。各个页面（二级页面）通过导航条的链接来访问。通过内容区域的链接和列表来访问其他详细页面（*页面）。因此，通常，一个简单的CMS（内容管理系统，也可简单称之为新闻系统或博客）,通常有【首页index.html】【列表list.html】【正文/详情show.html】三个页面组成。
【页面模块区域】
知道了页面的结构和组成，就可以在页面的内容上入手了。内容的设计和制作有一定的规范，简单说，就是链接看上去可以点击，按钮看上去像个按钮，文本框看上去可以输入，保留默认控件的识别性和可用性（单选、复选，手机端通常为左右滑动式，PC端则常委纽扣式，这种是符合设备操作体验的变化和设计），注意观察网页范例，可以整理出诸如【页面头部：logo+导航+其他】【主导航】【下拉菜单】【搜索框】【幻灯片】【文字列表】【图片列表】【选项卡/滑动门列表】【评论列表】【表单区域】等多种展示方式的模块。
【页面规划和设计】
严格意义上讲，页面的设计除了根据设计师的创意来设计外，还包含一个需求分析设计。需求分析是根据实际的需求（假设我是做新闻的，我希望多以列表的形式展示；我是做商城的，我希望多以图文列表的形式展示等）分析来设计展示形式，以内容的权重（哪个模块更重要或更有意义）来布局。设计师创意则相对灵活，只需要把整理好的模块按照你的想法布局就可以。
页面的尺寸，严格说是没有*的，但，常规布局的页面（如微博、腾讯等一些门户）都是按照显示器的实际尺寸（适应1024*768的分辨率）来设计的，这个就是960grid栅格，flash整站则没有太多要求（它可以适时缩放，就像播放的电影），手机端的设备则需要考虑普通的分辨率尺寸（320*480等）。
因此，设计师通常是建立一个尺寸比较适中的新文档，然后建立对应的尺寸的页面文档，后者作为辅助图形拖入第一个文档中，然后开始建立辅助线，比如：新建1440*3000的文档，保存之。再建立960*3000的文档，按下【V】键，点击文档，不松开鼠标拖动到第一个文档中，使用对齐方式居中顶对齐，从标尺拖出辅助线即可。
【细节和效果】
页面设计不同于排版，页面的设计还是需要适当考虑到实际的制作的，有些效果看上去很炫很酷，但通过代码是无法实现的（网页通常都会书写程html文件使用），那么，我们就需要对一些效果有所了解，知己知彼，才能游刃有余。
良好的视觉效果，可以让站点看上去更有冲击力和亲和力（不同的风格有不同的感受），而视觉效果的设计除了活用素材混合模式、滤镜和调色外，还需要你有一定的审美情趣，以前是说【眼高手低】，而今，就要说【眼低手高】了，很多效果看到懂，就是想不到，总是看到别人的东西的时候大呼【这样也可以啊？】
细节的把握是比较锻炼的，这点推荐你去看一下图标和UI设计的一些案例【iconfans】，你可以学会如何使用铅笔调整像素级的细节，也可以学会使用钢笔画笔绘制天马行空的图形，还可以学会输出清晰、锐利的图形图像，还可以学会设计更有体验意义的模块和结构（不要小看体验和设计，试想，太小的文字或图标，看不清不说，相信你也点击不到，而这就是体验）。
【其他】
PS网页设计除了要求你具有设计的功底，还需要你有良好的工具使用习惯，这里主要说2点——【素材整理和图层操作】。
素材整理，PS中比较灵活的素材就是【字体】【笔刷】【样式】【图案】，其中【样式】尤为重要，你出来使用网上下载的素材外，平时自己经常使用的也可以新建到样式列表中，并且，注意及时备份你的样式列表（偶尔重装一下系统或换一台电脑，你应该不想再建样式库吧）。图案通常可以快速的铺设一些复杂的背景纹路（如：古典图案和格子、像素点阵等）和图片背景（如：木纹背景），字体还用说吗？
图层操作，图层操作除了简单的图层样式控制外，你还要学会使用【Ctrl+G】，图层打组，图层打组可以很好的管理你的图层和设置（一个网页通常会有N多个图层，打组可以压缩图层列表的高度，还可以把相关的模块整合在一起），给予适当的命名，你大海捞针就变的轻松多了~~~
暂时这么多，大早晨的光给你码字了~~追问非常感谢！！写的非常好。但是还是不知道该怎么下手。。愁啊。。谢谢你
追答建议学习方法：由小及大，由浅入深，由简入繁。层层递进。
结构（入门）——效果（进阶）——效率（提升）——质量（提升）——规范（发散思维）
【小模块练习】学习模块的组成和内容样式的设置（字号、字体、边框样式、对齐方式）；
【小页面设计】模块的排版、页面模块对齐；
【大页面设计】页面整体布局、页面整体模块对齐。
学会简单的模块设计和页面排版，就可以着手效果的表现了，多看插画素材，多学PS特效设计。
接下来就可以学习图标和图片细节的处理了。
如果你打算从事美工工作或业余，也可以尝试切图（不要用PS自带的切图，很产生很多冗余图片碎片，而且，其代码乱七八糟）。
其实切图的过程就可以学习html+css布局了，当你学习完jhtml的基本制作，其提高部分就是整合压缩和标准化，整合压缩就是把图片压缩，把结构精简，标准化就是代码排版标准，标签语法用法标准，浏览器兼容性好。
网页学习的后期进阶就是页面的优化，除了上面提到的整合和标准，就是交互封装和交互创新，以及页面框架研究（有开源的UI布局框架，如jquery-mobile等，可以很简单轻松的制作多平台站点页面）。
再进阶就是创新开发了，开发基于html的高级应用，如web-app等，当然，你也可以扩展研发其周边产品，如交互框架、开发工具等。
热心网友
时间：2023-09-15 06:22
热心网友
时间：2023-09-15 06:23
热心网友
时间：2023-09-15 06:23
