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

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

  • 怎么知道哪些字体是侵权的?免费可商用字体有哪些?免费字体打包下载

    怎么知道哪些字体是侵权的?免费可商用字体有哪些?免费字体打包下载怎么知道哪些字体是侵权的?免费可商用字体有哪些?免费字体打包下载怎么知道哪些字体是侵权的?免费可商用字体有哪些?免费字体打包下载怎么知道哪些字体是侵权的?免费可商用字体有哪些?免费字体打包下载

    字体版权一直是很多设计师的雷区,一不小心就容易触犯。125建设网和大家一起来弄清楚:免费可商用字体到底有哪些?怎么知道哪些字体是侵权的? 怎么知道哪些字体是侵权的? 可以在360查字体:https://fonts.safe.360.cn网站上检查自己电脑上哪些字体是免费可商用的,哪些是商用需要授权的。 免费可商用字体有哪些? 1. 思源黑体(推荐) 思源黑体…

    2023年1月18日 网页设计
    7.1K0
  • Table布局 VS Div+CSS布局,选哪个?

    Table布局 和 Div+CSS布局的争论,过了7-8年了,今天看到一篇文章《为什么我们不建议用Table布局》,又想发表下自己的见解,供初学网页制作的新手参考。 《为什么我们不建议用Table布局》节选: Table要比其它html标记占更多的字节。 (延迟下载时间,占用服务器更多的流量资源。) Tablle会阻挡浏览器渲染引擎的渲染顺序。 (会延迟页面…

    2018年12月21日
    5.7K0
  • 汉字发展简史:甲骨文-金文-大篆-小篆-隶书-魏碑-草书-楷书-行书

    汉字发展简史:甲骨文-金文-大篆-小篆-隶书-魏碑-草书-楷书-行书汉字发展简史:甲骨文-金文-大篆-小篆-隶书-魏碑-草书-楷书-行书汉字发展简史:甲骨文-金文-大篆-小篆-隶书-魏碑-草书-楷书-行书汉字发展简史:甲骨文-金文-大篆-小篆-隶书-魏碑-草书-楷书-行书

    中国具有五千年文字历史,文字中所包涵的精髓,值得每一位设计师学习、继承与探究。设计师需要熟悉各种字体的风格特征,并能灵活运用字体进行编排设计,才能使作品的内容更清晰、更有条理地传达给读者。

    2023年1月18日 网页设计
    22.5K0
  • 如何提升设计价值——方法篇

    如何提升设计价值——方法篇如何提升设计价值——方法篇如何提升设计价值——方法篇如何提升设计价值——方法篇

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

    2023年1月16日 网页设计
    9.1K0
  • 从零开始做APP界面设计二:App界面设计尺寸

    从零开始做APP界面设计二:App界面设计尺寸从零开始做APP界面设计二:App界面设计尺寸从零开始做APP界面设计二:App界面设计尺寸从零开始做APP界面设计二:App界面设计尺寸

    Android SDK模拟机的尺寸 屏幕大小 低密度(120) 中等密度(160) 高密度(240) 超高密度(320) 小屏幕 QVGA(240×320) 480×640 普通屏幕 WQVGA400(240×400) WQVGA432(240×432) HVGA(320×480) WVGA800(480×800) WVGA854(480×854) 600×…

    2018年4月21日 网页设计
    8.7K0
  • web前端开发需要哪些技能?

    做WEB前端开发需要掌握哪些知识和技能? 中国网页设计通过对大型软件企业及IT培训机构(Oracle)的调研,把web前端开发需要的技能点列举如下。 HTML HTML简介 HTMl结构 HTML常用标签 HTML框架 HTML表格标签 HTML表单 HTML多媒体 CSS css简介 css的基本使用 css选择器 css常用样式属设置 CSS定位与DIV…

    2018年7月17日
    6.9K0

发表回复

登录后才能评论