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

了解网页制作全过程,能够根据网页效果图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%的人还看了以下文章

  • 网页设计色彩搭配:红色

    标准红色的RGB值分别是255、0、0。红色在网络上出现的频率可以说是比较高的,无论是传达吉庆的信息还是商业上的应用,是一种极具有表现力的色彩。 红色容易让人联想到太阳、热血、婚姻、喜庆,给人的感觉当然富有吉祥、吉祥、活力、激动、火暴等寓意。 如图所示: 图 红色基调 红色的波长最长,穿透力最强,感知度也最高。 它经常用来表现太阳、火焰、热血、花卉等,具有积…

    2021年2月4日 网页设计
    11.1K0
  • 网页设计中字体运用的12个技巧一超实用!

    文字、文本排版是日常网站设计工作中经常用到,看似简单的文字,实际上排版也是很有讲究。 1. 了解字体的性格 每个字体都有性格,人们比较喜欢一些有特色的东西。那么这些被喜欢的存在什么规则呢,了解你的目标人群,知道你文档的用途,选择一类字体,使用你的目标人群所期望的字体,是你的文档的用途所需要的字体。 更多请阅读:网页设计字体篇:字体的性格 2. 避免使用默认字…

    2019年10月26日 网页设计
    10.7K0
  • 网站首页的设计

    网站首页从根本上说就是全站内容的目录,是一个索引。但只是罗列目录显然是不够的。 网站首页设计步骤 首先要确定首页的功能模块,即确定需要在首页上实现的主要内容和功能; 其次设计首页的版面; 最后处理技术上的细节。 设计网站主页必须遵循的5点基本原则 1、要简单   能吸引浏览者注意的时间是短暂的。 你的网站应该下载速度很快。如果你的网站为了给人留下深刻印象而包…

    2018年3月15日
    5.1K0
  • 如何提升设计价值——方法篇

    设计≠艺术,设计从诞生之初就是为“解决问题”而存在。在体验设计场景,如果业务方是“需求提出者”,那产品经理和设计师就是从不同视角切入的“问题解决者”,而用户既是“需求源头”,又是“方案验证者”和最终“价值创造者”。下面我们详细解读设计价值与业务/用户/产品三方的关系.

    2023年1月16日 网页设计
    8.3K0
  • 最完善的前端开发流程(详解)

    前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理。理论上,面向用户的产品里,所有问题(包括产品、设计、后端、甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题、计算问题、安全问题等)暴露在后端,这就意味着前端起到了至关重要的承载和连接作用。 一、前端开发流程 需求评审 一般在做需求评审时,PRD里只有交互稿,尚未有视觉稿。…

    2023年1月18日
    5.5K0
  • 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.5K0

发表回复

登录后才能评论