情境1书法家庄辉个人网站模板效果图的设计与制作剖析.

《情境1书法家庄辉个人网站模板效果图的设计与制作剖析.》由会员分享，可在线阅读，更多相关《情境1书法家庄辉个人网站模板效果图的设计与制作剖析.（40页珍藏版）》请在金锄头文库上搜索。

1、机械工业出版社,基于工作过程的网页设计与制作教程,主编：张洪斌 季春光 刘万辉,机械工业出版社,基于工作过程的网页设计与制作教程,主编：张洪斌 季春光 刘万辉,情境1：书法家庄辉个人网站模板效果图的设计与制作,基于工作过程的 网页设计与制作教程,第四章 网站的色彩与布局,1. 项目展示与项目目标 2. 项目资讯 3. 项目计划与决策 4. 项目实施 5. 项目检查与评估 6. 强化拓展实训:画笔的使用技巧,项目展示与项目目标,1项目展示与项目目标,掌握色彩的基本理论 了解网页配色的原则 掌握网页常用的配色方法 掌握网页版式布局的要点 掌握网页版式布局的方法 了解网页版式构成的类型 了解网页布局

2、结构 深入学习效果图的设计方法,色彩的基本理论: RGB颜色,网页颜色主要有3种基本颜色组成的，他们是红（Red）、绿（Green）、蓝（Blue），其他的颜色是由这3种颜色调和而成的。 例如，黄=红+绿，紫色=红+蓝，白色=红+绿+蓝 用3个十六进制数来表示红、绿、蓝3种颜色的含量，组成一个6位的十六进制数，就是RGB颜色。 例如，红色为FF0000，绿色为00FF00，黄色为FFFF00，白色为FFFFFF。,关键知识点一：色彩的基本理论,2. 项目资讯,色彩的基本理论: 色环,红 橙 黄 绿 青 蓝 紫 红,2. 项目资讯,关键知识点一：色彩的基本理论,色彩的基本理论: 颜色的三要素,色

3、相：即是颜色的相貌称谓，如红色、橙色、黄色、绿色等。 纯度：也称饱和度。彩度，是指颜色的鲜艳程度，即颜色的色素含量。如果纯度高，则色彩艳丽，否则颜色淡灰。正红色、正黄色、正蓝色等都是纯度极高的颜色，而灰色则是纯度最低的颜色。 明度：也称亮度，是颜色的明暗程度，是各色相中白色的含量。白色是明度最高的色调，白色的明度为100%，黑色的明度为0%。,关键知识点一：色彩的基本理论,2. 项目资讯,颜色代表的含义,l 红色 是一种对视觉器官产生强烈刺激的颜色，在视觉上容易引起注意，在心理上容易引起情绪高昂，能使人产生冲动，愤怒，热情，活力的感觉。 红色的具体表现是：火、血、心、苹果、夕阳、婚礼、春节等。

4、 红色的抽象表现是：热烈、喜庆、危险、革命、女性等。,l 橙色 橙色也是一种对视觉器官产生强烈刺激的一种颜色，由红色褐黄色组成，比红色多些明亮的感觉，容易引起注意。 橙色的具体表现是：橙子、柿子、桔子、橘子、秋叶、砖头、面包等。 橙色的抽象表现是：快乐、温情、积极、活力、欢欣，热烈，温馨，时尚、食欲等。,l 黄色 黄色也是一种对视觉产生明显刺激的颜色，容易引起注意。 黄色的具体表现是：香蕉、柠檬、黄金、蛋黄、帝王等。 黄色的抽象表现是：光明、快乐、豪华、注意、活力、色情、快乐，希望，智慧等。,2. 项目资讯,颜色代表的含义,l 绿色 绿色是对视觉器官的温和，所以一般人都知道眼睛疲劳的时候，看着

5、绿色有调节和恢复的作用，介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。 它和金黄，淡白搭配，可以产生优雅，舒适的气氛。 绿色的具体表现是：草、植物、竹子、森林、公园、地球、安全信号等。 绿色的抽象表现是：新鲜、春天、有生命力、和平、安全、年轻、清爽、环保。,l蓝色 蓝色是对视觉器官的刺激较弱，在光线不足的情况下不易辨认，具有缓和情绪的作用。所以情绪的波动时，看着蓝天和海洋，可以让人心情平静，它和白色混合，能体现柔顺，淡雅，浪漫的气氛。 蓝色的具体表现是：水、海洋、天空、游泳。 蓝色的抽象表现是：稳重、理智、高科技、清爽、凉快、自由等。,2. 项目资讯,颜色代表的含义,l 紫色 紫色

6、由蓝色和红色组成，对视觉器官的刺激正好综合强弱，形成中性色彩。 紫色的具体表现是：葡萄、茄子、紫菜、紫罗兰、紫丁香等。 紫色的抽象表现是：神秘、优雅、女性化、浪漫、忧郁等。,l褐色 褐色是橙色中加入了一定比例的蓝色或黑色所形成的暗色，对视觉器官刺激较弱。 褐色的具体表现是：麻布、树干、木材、皮革、咖啡、茶叶等。 褐色的抽象表现是：原始、古老、古典、稳重、男性化等。,2. 项目资讯,l 白色 白色的自然日光是由多种有色光组成的，白色是光明的颜色。 白色的具体表现是：光，白天、白云、雪、兔子、棉花、护士、新娘等。 白色的抽象表现是：纯洁、干净、善良、空白、光明、寒冷等。,黑色 黑色对视觉器官的刺激

7、最弱。 黑色的具体表现是：夜晚、头发、木炭、墨、煤等。 黑色的抽象表现是：罪恶、污点、黑暗、恐怖、神秘、稳重、科技、高贵、不安全、 深沉，神秘，寂静，悲哀，压抑等。,l灰色 灰色是白色与黑色的组成，对视觉器官刺激微弱。 灰色的具体表现是：金属、水泥、砂石、阴天、乌云、老鼠等。 灰色的抽象表现是：柔和、科技、年老、沉闷、暗淡、空虚、中性、缺乏生命力、中庸、平凡、温和、谦让、中立和高雅的感觉。,2. 项目资讯,关键知识点一：色彩的基本理论,2. 项目资讯,关键知识点二：网页配色的原则,1）强调特色，个性鲜明,2）总体协调，局部对比,2. 项目资讯,关键知识点二：网页配色的原则,3）遵循艺术规则，合

8、理搭配,2. 项目资讯,关键知识点三：网页的配色方法,1）底色与图形要协调,使用暖色配色的网站,使用冷色配色的网站,2）需要考虑整体色系,2. 项目资讯,关键知识点三：网页的配色方法,3）善用色彩的调和,4）善用色彩的对比,2. 项目资讯,关键知识点四：网页版式布局的要点,1）实用功能 网页内容的主次一定要从网页的版式上体现出来，网页设计要突出重点内容。 网页的导航一定要清晰，这和网页的版式设计有着非常重要的联系。 网页的版式布局设计决定了网页的布局，布局合理和逻辑性也是网页版式设计的要点。 2）审美功能 网页的版式要具有整体性、一致性，总体来讲就是统一。 要合理地划分整个页面，安排页面各组成

9、元素，即分割。 通过合理运用矛盾和冲突，使设计更加富有生机和活力，即对比。 当然再次也要考虑是功能优于形态？还是形态优于功能？,2. 项目资讯,关键知识点五：网页布局类型的确定方法,1）把内容放入自己喜欢的网页类型中,某企业网站的结构布局图,2. 项目资讯,关键知识点五：网页布局类型的确定方法,1）把内容放入自己喜欢的网页类型中,淮信科技有限公司培训中心的网站,2. 项目资讯,关键知识点五：网页布局类型的确定方法,2）草绘出几个不同的网页类型的模板,2. 项目资讯,关键知识点五：网页布局类型的确定方法,2）草绘出几个不同的网页类型的模板,2. 项目资讯,关键知识点五：网页布局类型的确定方法,2

10、）草绘出几个不同的网页类型的模板,2. 项目资讯,关键知识点五：网页布局类型的确定方法,2）草绘出几个不同的网页类型的模板,2. 项目资讯,关键知识点五：网页布局类型的确定方法,2）草绘出几个不同的网页类型的模板,3. 项目计划与决策,书法家庄辉个人网站模板页效果图设计项目主要是在书法家庄辉个人网站主页的基础上设计内容子页面。模板页设计也要配合主界面同时能够反映出书法艺术的文化气息，在保证功能完善的基础上考虑形态。本项目以褐色为主色调反映网站的特征，采用水平与垂直结合的分割方式，采用左侧导航进行布局。,4. 项目实施,1）启动Photoshop 软件,新建 “书法家庄辉个人网站模板效果图.ps

11、d”文件，宽度和高度为996像素，分辨率：72像素/英寸，颜色模式：RGB颜色，背景颜色填充为褐色（#6d4418）。 2）执行“视图”“标尺”命令显示标尺（快捷键），然后执行“视图”“新参考线”命令，在弹出“新建参考线”对话框中分别添加水平（65px，250px，896px）和垂直（160px）的四条参考线，如图所示。,水平65px,水平250px,水平896px,水平160px,4. 项目实施,3）打开图片“无名山人.tif”文件，执行“图像”“调整”“反相”命令（快捷键），使用“移动工具”将“无名山人.tif”图像拖至效果图中，执行“编辑”“自由变换”命令（快捷键）调整“无名山人作品集”

12、大小和位置使其放在效果图的左上角。 4）新建一个图层命名为“褐色背景”，设置前景色为褐色（c99011），使用“矩形选框工具”选择第1条和第2条水平参考线中的矩形区域，使用快捷键填充前景色，效果如图所示。,4. 项目实施,5）打开图片“夕阳.tif”文件，使用“移动工具”将“夕阳.tif”图像拖至效果图中，执行“编辑”“自由变换”命令（快捷键）调整“夕阳”图片大小和位置，调整图层“夕阳”在“褐色背景”图层之上，把鼠标放在图层“夕阳”与图层“褐色背景”之间，鼠标会变成形状，然后点击鼠标左键完成图层的剪贴蒙版技术，效果如图b所示。,a）,b）,4. 项目实施,6）采用第5步的方法将“松树.jpg”

13、执行同样的操作，如图所示（松树在夕阳之上）。,4. 项目实施,7）选择“松树”图层，设置该图层的混合模式为“变暗”模式，在图层面板点击“添加图层蒙版”按钮，按键盘上的键恢复前景的黑色与背景的白色，使用画笔工具（采用柔角画笔，大小稍大些如300px）设置蒙版效果，如图中a和b所示，选择“夕阳”图层，在图层面板点击“添加图层蒙版”按钮，使用画笔工具设置蒙版效果，如图中c和d所示，整个设置完成后的效果如图中e所示，f图为是设置完成后图层之间的关系。,a）,b）,C）,d）,e）,f）,4. 项目实施,8) 使用“横排文本工具”输入“中国书法家协会会员”（字体：方正大黑简体，大小：36点），同时对“中

14、国书法家协会会员”图层设置描边效果（颜色为白色，粗细为3像素），设置完成后的效果如图所示。,4. 项目实施,9）设置前景色为浅褐色（edd15e），添加一个新层并命名为“布局线”，首先执行“选择”“全选”命令（快捷键）完成全部选择，然后执行“编辑”“描边”命令，用前景色进行描边，大小为1像素。使用“单行选框工具”，按住键，参照参考线（图4-12）依次选取横向的3条横向选区，调整使用“单列选框工具”，仍然按住键，沿着纵向的辅助线继续选择单列选区，如图a所示，松开键，按键来填充选区，然后用橡皮（或其他方法也可以）删除纵向的0-250以及896-996之间的线段，如图b所示。,a,b,4. 项目实施

15、,10）在左侧导航区使用“横排文本工具”输入“网站首页 个人简介 书法作品 国画作品 楷书作品 篆书作品 草书作品 行草作品 扇面作品 联系方式”（颜色：白色，字体：方正大黑简体，大小：14点，在后期编辑一般采用宋体），调整位置后如图所示。,添加导航文字的效果,4. 项目实施,11）新建一个图层，命名为“方框”，然后使用“矩形选框工具”选取一个宽4像素，高4像素的正方形选区（样式为：固定大小，宽4像素，高4像素），然后填充为白色。调整方框图层的位置在“网站首页”正前方，在图层面板，使用鼠标左键将方框拖至“新建图层”按钮即可完成一个方框的复制，共复制9个方框，将最后复制的方框放在“联系方式”正前

16、方，按住选择“方框”到“方框 副本9”，在图层面板点击“连接图层”按钮完成图层“方框”到“方框 副本9”的连接，使用使用“移动工具”，在属性状态栏中点击“左对齐”按钮和“垂直居中分布”按钮后10个小方框就整齐的布局在导航文字的前方，如图所示。,给导航文字添加小方框符号,4. 项目实施,12）新建一个图层，命名为“主标题”，然后在效果图右侧使用“矩形选框工具”选取一个宽9像素，高35像素的正方形选区（样式为：固定大小，宽9像素，高35像素），然后填充为浅褐色（#edd15e），使用铅笔工具在小矩形下方划一条浅褐色（#edd15e）的横线，最后添加文本“草书作品”（与导航相同），效果如图所示。,4. 项目实施,13）打开图片“竹兰生意气.jpg”文件（如图a，图像宽和高都为440像素），首先执行“选择”“全选”命令（快捷键）完成全部选择，然后执行“编辑”“描边”命令，将前景色设置为6d4418，位置设