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

了解网页制作全过程,能够根据网页效果图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)
江山如画的头像江山如画管理团队
网页制作实战项目四:使用DIV+CSS制作网页
上一篇 2018年5月3日 下午9:06
平面排版 CRAP原则-人人都可能成为设计师
下一篇 2018年5月8日 下午12:18

99%的人还看了以下文章

  • 你需要知道的色彩基础知识

    色彩基础知识 光与色彩 色彩三要素 色彩的冷暖 色彩深度 光与色彩 1666年,牛頓以三棱镜分解太阳光,发現看似无色的光线,经过三棱镜時,会依其波长和折射关系, 依序分为紅、橙、黃、绿、青、蓝、紫七色光。 光的物理性质:波长:产生色相的区別波长短的偏蓝,波长长的偏红振幅:产生明暗的区別振幅大的偏亮,振幅小的偏暗 【练习】哪一個较偏蓝?以下哪一個较亮?  人类…

    2018年1月27日
    7.9K0
  • 网页制作实战项目二:爱的天空

    网页制作实战项目二:爱的天空网页制作实战项目二:爱的天空网页制作实战项目二:爱的天空网页制作实战项目二:爱的天空

    请加入网页设计交流群:208047327 ,在项目制作过程中有任何问题,可以在群内讨论,或进入本站问答社区互动。 【时间要求】 2 学时( 45 分钟× 2=90 分钟) 【上机内容】 《爱的天空》主页面及心情日志页面制作 【上机目的】 1 、巩固表格布局的方法和技巧 2 、掌握HTML及CSS的使用 【上机重点】 1 、表格布局 2 、HTML及CSS的使…

    2018年4月12日 网页设计
    16.8K0
  • 网页制作实战项目三:运动会页面制作

    【时间要求】 2 学时( 45 分钟× 2=90 分钟) 【上机内容】 运动会页面制作 【上机目的】 1 、掌握表格布局的方法和技巧 2 、掌握HTML及CSS的使用 【上机重点】 1 、表格布局 2 、HTML及CSS的使用 【上机难点】 1、导航条的制作 2、CSS的使用 【上机内容】 请在规定时间内制作出以下网页:(要求要符合网站建设的规范!) 所需素…

    2018年4月19日
    12.7K1
  • 网站策划:如何定位网站主题

    网站策划、网页设计首先遇到的问题就是定位网站主题。所谓网站主题也就是网站的题材类别,具体就是该网站是什么类型的,什么性质的,主要内容是什么……

    2020年2月18日
    4.6K0
  • 平面排版 CRAP原则-人人都可能成为设计师

    CRAP是四项基本设计原理,包括对比(Contrast)、重复(Repetition)、对齐(Alignment)、亲密(Proximity)  对比(Contrast) 避免页面上的元素太过相似、如果元素不相同,就让它们截然不同元素包含字体、颜色、大小、线宽、形状、空间等根本目的:增强页面效果, 有助于信息的组织如何实现:通过字体选择、线宽、颜色、形状…

    2018年5月8日
    20.2K1
  • opencv 图像旋转 cv2.rotate和np.rot90案例精讲

    OpenCV 方法 OpenCV 中带有一个旋转图像的函数 cv2.rotate rotate(src, rotateCode[, dst]) -> dst参数:src:输入图像rotateCode:旋转方式1、cv2.ROTATE_90_CLOCKWISE:顺时针 90 度2、cv2.ROTATE_180:顺时针 180 度3、cv2.ROTATE_…

    2022年12月1日
    9.8K0

发表回复

登录后才能评论