网站建设教程 项目式 教学课件 ppt 作者 赵建保 许统德 刘琳 task05

任务5 制作网站设计稿,任务教师：,2019/5/25,1,网站建设教程(项目式),学习六步曲,任务导入 任务目标 任务实施 知识拓展 强化训练 学习成果评估,任务导入,现在，是你展示美术设计能力和Adobe Photoshop软件操作能力的绝好机会，用你的设计思维和双手，来设计制作广州沃媒达信息科技有限公司（以下简称“沃媒达”）网站设计稿吧！,任务目标,核心技能 设计稿内容规划 设计稿版式设计 制作首页设计稿 制作内页设计稿,核心知识 设计稿内容与结构 网站首页版式类型 网站色彩设计 网站UI设计,任务实施,一、设计稿内容规划 二、设计稿版式设计 三、设计稿色彩设计 四、制作首页设计稿 五、制作内页设计稿,一、设计稿内容规划,1首页内容规划 Logo区块内容 导航搜索区块内容 Banner区块内容 栏目区块内容 版权区域内容,一、设计稿内容规划,2内页内容规划 内页Banner区 导航提示区 左侧栏目导航区块 右侧内容显示区块,二、设计稿版式设计,1.首页版式布局,二、设计稿版式设计,2.内页版式布局,三、设计稿色彩设计,网站风格以严谨、理性、大方为上，配色多以冷色系为主,四、制作首页设计稿,1新建文件,四、制作首页设计稿,2Logo区块制作 3导航区块制作,四、制作首页设计稿,4Banner区块制作,四、制作首页设计稿,5内容区块制作,四、制作首页设计稿,6版权区域制作 7保存首页效果图,五、制作内页设计稿,1Logo与导航区域制作 2内页Banner区制作,五、制作内页设计稿,五、制作内页设计稿,1Logo与导航区域制作 2内页Banner区制作 3制作内页导航提示条 4制作内页导航链接效果,知识拓展,首页设计稿内容构成 Logo Banner 导航栏 首页栏目 版权申明,知识拓展,网站色彩设计 1色彩分类与属性 色彩可分为非彩色和彩色两大类 彩色具有色相、明度、饱和度3个属性。,色相变化,明度变化,饱和度变化,知识拓展,2色彩的冷暖 任何色光均可由红、绿、蓝3种颜色混合而成，而红色是暖色，判断色彩的冷暖主要看红色的成分多少。,知识拓展,3色彩意象 色彩意象用来描述人眼看到色彩后产生的心理感觉。 红色、橙色、黄色、绿色、蓝色、紫色和黑色的色彩意象。,知识拓展,4RGB色彩模式 RGB模式使用RGB颜色模型，其红（Red）、绿（Green）、蓝（Blue）分量的取值从0到255，共256种强度值。,知识拓展,5网页安全色,知识拓展,6网页配色过程 （1）寻找行业网站配色标准 （2）访问者审美倾向 （3）确定网页的主色调 （4）选择辅助色彩,知识拓展,7网页配色原则 （1）色彩要有可读性 （2）色彩要鲜明 （3）色彩要独特 （4）色彩有相关性 （5）色彩要协调统一,知识拓展,8交互式配色软件ColorKey XP,知识拓展,9十大行业配色推荐,知识拓展,网站UI设计原则 （1）首先考虑功能，然后才是表现 （2）从用户的视角看问题，使用用户的词汇进行描述 （3）不要向用户暴露实现细节 （4）使常用的用户任务简单化,知识拓展,网站UI设计原则 （5）保持一致性，引导用户的使用习惯 （6）设计应响应需求 （7）灵活性 （8）个性化,强化训练,参照本任务的任务实施，设计IT网站首页设计稿和某一内页设计稿 工作过程为：内容规划版式布局设计色彩设计Photoshop设计稿制作 在Photoshop中制作网站首页设计稿和网站内页设计稿，将设计稿保存为PSD格式,学习成果评估,谢 谢！,