网页制作实战项目五:根据网页效果图制作网页

了解网页制作全过程,能够根据网页效果图PSD源文件,切图并制作出网页。

【时间要求】 2 学时( 45 分钟× 2=90 分钟)

【上机内容】 能够根据网页效果图制作网页

1、设计人员根据用户需求制作页面效果图,源文件一般为PSD格式文件,可以保存为JPG格式图片。

2、如用户满意,则根据需要使用PS切片工具切出所需图片,否则返回第一步。

3、网页设计师根据页面效果图,利用所提供素材制作页面。

【上机目的】

1、 了解网页制作全过程,能够根据网页效果图制作出网页。

2、掌握DIV+CSS布局的方法和技巧

3、掌握PS切图技巧

【上机重点】

1 、PS切图技巧

2、DIV+CSS布局的方法和技巧

【上机难点】

如何根据效果图,切图并制作网页。

注意:

网页制作中,特别是效果图的制作可以使用多种工具,如:

Photoshop:图像处理、编辑、通道、图层、路径综合运用;图像色彩的校正;各种特效滤镜的使用;特效字的制作;图像输出与优化等,灵活运用图层风格,流体变形及褪底和蒙板,制作出千变万化的图像特效

CorelDraw:通过CorelDRAW9的全方面的设计及网页功能融合到现有的设计方案中,制作矢量的插图、设计及图像,出色地设计公司标志、简报、彩页、手册、产品包装、标识、网页及其它。

Illustrator:图形绘制、包装、宣传页的制作,让你更加方便地进行LOGO及CI设计

请在规定时间内制作出以下网页:

《web开发技术》实训项目六

页面效果图PSD源文件及切图下载:网页制作实战项目五:根据网页效果图制作网页PSD源文件及已切分的图片.zip

同学们应好好学习设计师设计的PSD源文件,图片已经帮大家切割好了,如果想自己练习切图的话,可以在PSD源文件里使用切片工具自己切割,同时思考为什么要这样切图!!用到的文字可以去PSD源文件里面复制。

参考案例:设计师网页效果图    最终网页浏览

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/1870.html

(15)
江山如画的头像江山如画管理团队
上一篇 2018年5月3日 下午9:06
下一篇 2018年5月8日 下午12:18

99%的人还看了以下文章

  • 网站设计的七个步骤

    一般初学者经过短暂的学习就可以学会制作网页,于是他们认为网页制作非常简单,就匆匆忙忙制作自己的网站,可是做出来之后与别人一比,才发现自己的网站非常粗糙,这是为什么呢?常言道:“性急吃不了热豆腐”。建立一个网站就像盖一幢大楼一样,它是一个系统工程,有自己特定的工作流程,你只有遵循这个步骤,按部就班地一步步来,才能设计出一个满意的网站。 初学网页制作从这里开始 …

    2020年6月13日
    6.7K0
  • 6个技巧让你的版面设计的脱颖而出!

    优秀的版面设计可以让一个普通的文档脱颖而出。本文给大家分享6个让你版面设计脱颖而出的技巧:对齐,聚拢,重复,对比,强调,留白。并通过实例讲解原有版面设计的不足,运用这6个技巧如何改进你的版面设计。

    2018年10月2日
    8.7K0
  • 从零开始做APP界面设计一:iOS 界面设计规范

    准备整理一套APP界面设计教程,可能会花费一段时间,请持续关注。 首先开篇我们介绍APP 界面设计,也就是新手最常遇到的问题:尺寸。 我们以iPhone 7为例讲解iOS 界面设计规范。 一、APP 界面设计工具 做APP 界面设计用的最多的就是PS和AI了,如果你是Mac用户,可以尝试一下Sketch,软件的版本当然是推荐高版本,因为功能更强大,作图的速度…

    2018年4月20日 网页设计
    7.1K0
  • web前端工程师需要掌握哪些知识,0基础学习Web前端课程大纲

    想从事Web前端开发,需要掌握哪些知识? 中文网页设计网今天给大家分享0基础学习Web前端的课程大纲,从入门到精通,帮助你快速成长为Web前端工程师。 Web前端基础课程大纲 第一阶段:HTML+CSS 第二阶段:JavaScript基础知识 第三阶段:DOM、BOM与事件 第四阶段:面向对象与数据交互 第五阶段:JavaScript实战 第六阶段:数据类型…

    2018年10月24日
    6.4K0
  • 网页设计之前端开发工具和学习资源大全(精)

    前端文档 MDN 官方文档:https://developer.mozilla.org/zh-CN/docs/Web 前端社区 GitHub stackoverflow 掘金 JS 学习资源 现代 JavaScript 教程:https://zh.javascript.info/ 阮一峰 JS教程:https://wangdoc.com/javascript…

    2023年1月18日
    7.2K0
  • 赞!UI设计师必须学习的3个色彩理论

    彩搭配在设计中很重要!不同的配色方案呈现出不同的效果,搞定配色!请学习最好的配色教程 色彩模式  1、RGB色彩模式。通过光的三原色相加混合产生的。显示器的所有色彩都是通过红色、绿色、蓝色这三原色混合来显示的。 2、CMYK 色彩模式。是指墨水或颜料的三原色加上黑色这四种颜色,混合后出现的色彩。CMYK是打印机等印刷设备使用的色彩模型。 3、索引色…

    2022年8月10日 网页设计
    3.6K0

发表回复

登录后才能评论