浅谈photoshop在网页布局设计中的意义与方法
- 格式:doc
- 大小:262.00 KB
- 文档页数:8
探究Photoshop在网页制作中的运用一、图片处理在网页制作中,图片的处理是至关重要的。
Photoshop提供了丰富的图片处理功能,可以对图片进行裁剪、调整大小、修饰、蒙版等操作。
这些功能可以帮助网页设计师对图片进行精细的处理,使其更好地适应网页的布局和风格。
Photoshop还提供了各种滤镜和特效,可以让图片呈现出更加生动和吸引人的效果。
在网页设计中,通常需要将图片按照一定的比例和尺寸进行裁剪和调整。
Photoshop的“裁剪工具”和“变换工具”可以帮助设计师轻松地完成这些操作。
Photoshop还提供了各种修饰工具,如画笔、橡皮擦、修复工具等,可以对图片进行润色和修饰,使其更加吸引人。
二、设计布局Photoshop的“矢量工具”和“形状工具”可以绘制各种图形和线条,用来设计网页的布局和元素。
图层功能可以帮助设计师对不同元素进行分层管理,使其更加清晰和易于编辑。
Photoshop还提供了丰富的色彩和样式选择,可以让设计师根据需求对网页的颜色和风格进行调整。
三、切片和导出在完成网页的静态效果图后,通常需要将其切片并导出为网页所需的各种图片和元素。
Photoshop提供了“切片工具”和“导出功能”,可以帮助设计师轻松地完成这些操作。
四、配合其他设计软件除了以上功能和应用,Photoshop还可以与其他设计软件进行配合,如Illustrator、Dreamweaver等。
在网页制作中,通常需要进行矢量图形的绘制和网页代码的设计。
Illustrator可以帮助设计师完成矢量图形的设计,而Dreamweaver可以帮助设计师进行网页代码的编辑和管理。
Photoshop与这些软件的配合可以帮助设计师更加高效地完成网页制作工作。
总结在网页制作中,Photoshop扮演着非常重要的角色。
它不仅可以用来处理图片,还可以设计网页的整体布局和风格。
它还可以帮助设计师轻松地完成切片和导出等操作。
与其他设计软件的配合更使其在网页制作中更加得心应手。
使用Photoshop设计网页界面和用户界面第一章:Photoshop设计网页界面和用户界面的概述Photoshop是一种专业的图像编辑软件,广泛应用于网页设计和用户界面设计。
本章将介绍Photoshop设计网页界面和用户界面的基本概念,包括设计原则、布局、颜色选择、字体使用等。
第二章:设计原则在设计网页界面和用户界面时,遵循一些基本的设计原则是非常重要的。
本章将介绍对比度、层次、一致性、简约性等设计原则的应用,以及如何平衡美观性和功能性。
第三章:界面布局界面布局是设计网页界面和用户界面的关键步骤。
本章将介绍常见的布局类型,如固定布局、流布局和响应式布局,并讲解如何选择合适的布局方式以实现用户友好的界面设计。
第四章:颜色选择颜色在网页界面和用户界面设计中起到重要的作用。
本章将介绍如何选择合适的颜色搭配,如何运用颜色心理学原理来传递信息和情感,以及如何使用Photoshop的颜色调整工具来优化颜色效果。
第五章:字体使用字体是界面中的重要元素之一,能够直接影响用户体验。
本章将介绍如何选择适合的字体类型和字号,并讲解如何使用Photoshop的文字工具进行字体样式的调整和设置。
第六章:按钮和导航设计按钮和导航是网页界面和用户界面中最常见的元素之一。
本章将介绍如何设计吸引人的按钮样式和导航结构,以及如何使用Photoshop的形状工具和图层样式来创建独特的按钮和导航效果。
第七章:图像和图标处理图像和图标是网页界面和用户界面设计中常用的元素。
本章将介绍如何使用Photoshop的图像处理功能来优化图像质量和文件大小,以及如何使用矢量图标库来创建可缩放的图标。
第八章:界面交互设计界面交互设计是确保用户界面功能和易用性的重要步骤。
本章将介绍如何使用Photoshop的切片工具和导出功能来生成交互式原型,并讲解如何使用Photoshop进行用户界面的动画设计。
第九章:网页界面和用户界面的优化在设计完成后,对网页界面和用户界面进行优化是必不可少的。
Photoshop在网页制作中的运用探索【摘要】网络的飞速发展,上网浏览、学习已经成为了现代人必不可少的需求,一个网站的优劣,内容充实、功能强大固然重要,页面的设计是否合理,颜色是否和谐,也是能否吸引观者目光,使其有兴趣继续浏览下去的重要因素。
一个成功的网站设计中,页面设计是非常重要的一环,Photoshop在网站设计中的页面设计和图像处理等环节发挥着重要的作用。
【关键词】网页制作;页面设计;布局Photoshop作为目前公认的,功能完善、性能稳定的平面图像处理软件,普遍应用于美术设计、二维广告设计、图像处理等领域,它拥有方便单独保存效果的图层工具、有利于浏览下载图片的切片工具、可以保存为矢量图形的钢笔工具等几大特色,在网站页面的设计中,发挥着越来越重要的作用。
1 Photoshop在网站页面设计上的应用首先,在网站的规划中,页面的布局直接影响到整个网站是否易于浏览、链接、功能区是否醒目、是否能迅速攫取观者眼球。
进行页面布局经常用到Dreamweaver的表格或者框架工具,这种Dreamweaver自带的工具简单、易于修改,很适合简单的页面设计。
但是对于背景复杂或者导航条、功能模块不是矩形的情况,就需要运用到Photoshop来进行布局设计了。
Photoshop的图层工具和强大的图像处理功能,能够对整个网站页面的效果进行完整的设计和修饰。
下面就Photoshop进行网页布局设计的流程进行简单地介绍。
1.1 首先新建一个图像文件宽度和高度取决于网站页面的大小,一般和浏览器的分辨率相对应,常用的分辨率是1280*800像素的话,图像宽和高就可以设定成1260*780,颜色模式为RGB(红、绿、蓝),这里指的是光的三原色,而不是绘画的三原色红、黄、蓝,太阳光经过棱镜折射为光的三原色红绿蓝,其他的颜色都可以由这三种颜色的光叠加而成,形成了最接近大自然的各种缤纷色彩,在Photoshop中,运用RGB 颜色的变化来表现光影的效果,能使处理后的图像作品尽可能贴近现实,使视觉效果能够与人的视觉感受形成一种沟通,产生心灵的共鸣。
如何使用Photoshop进行UI设计和网页布局章节一:Photoshop简介在今天的数字时代,设计师们利用各种工具来创造出令人印象深刻的用户界面(UI)和网页布局。
其中,Adobe的Photoshop是最具影响力的工具之一。
Photoshop是一款强大的图像编辑软件,广泛应用于UI设计和网页布局,为设计师们提供了无限创意的可能。
在本章中,我们将简要介绍Photoshop的界面和工具,以及如何使用这些工具进行UI设计和网页布局。
1.1 Photoshop界面Photoshop的界面由多个面板组成,包括工具栏、选项栏、图层面板、色彩面板等。
工具栏包含多个工具,如画笔、橡皮擦、文字工具等,而选项栏则用于自定义选定工具的属性。
图层面板允许您对图像进行分层处理,以便更好地控制和编辑它们。
而色彩面板可以帮助您选择和管理图像中的颜色。
1.2 Photoshop工具Photoshop提供了许多强大的工具,方便设计师进行各种操作。
以下是一些常用的工具:1.2.1 画笔工具画笔工具是设计师最常用的工具之一。
它允许您在画布上绘制各种形状和线条,并选择不同的笔画属性,如颜色、笔触大小和硬度。
1.2.2 文字工具文字工具可以在画布上添加和编辑文本。
您可以选择不同的字体、大小和颜色,以及对齐和缩放文本。
1.2.3 橡皮擦工具橡皮擦工具可以帮助您擦除画布上的图像。
您可以选择橡皮擦的大小和硬度,以及对图层进行擦除或遮罩。
1.2.4 形状工具形状工具允许您创建各种形状,如矩形、圆形、多边形等。
您可以选择填充颜色、边框颜色和粗细,以创建自定义的形状。
1.2.5 渐变工具渐变工具可以在画布上创建平滑过渡的颜色。
您可以选择不同的渐变类型和颜色,以及创建自定义渐变。
1.3 UI设计的基本原则在使用Photoshop进行UI设计时,有一些基本原则需要遵循,以确保最终的设计符合用户需求并具有良好的可用性。
1.3.1 简洁性UI设计应该尽量简洁,避免使用过多的元素和复杂的布局。
毕业设计论文Photoshop在网页设计中的应用作者姓名:吴明宇入学年月: 2011年9月学科专业:计算机应用技术指导老师:***2015 年 09 月 09 日Photoshop在网页设计中的应用摘要随着计算机技术的发展,图像处理以渗透我们的学习、生活和工作等各个方面。
图像以其视觉上的冲击力,已成为了现代社会传递信息的首选。
不论是在高级文化中还是在技工文化中,Photoshop课程都是非常重要的,Photoshop是图像处理软件中一款比较优秀的软件,我们运用它可以随心所欲的制作出符合自己意图的各种图片,随着电脑的大众化普及,越来越多的人们开始接触电脑,接触图像处理软件,并利用Photoshop等软件制作具有自己个性的桌面,电子相册等,来丰富自己的业余生活。
在制作各种有特色的图片的同时,需要增加各种点缀来美化自己的图片。
本文利用了Adobe公司的Photoshop软件,对计算机合成文件进行了一些尝试性的设计,设计出一幅图,对Photoshop中一些相关的工具进行了详细的讲解。
概述Photoshop的简介Adobe Photoshop,简称“PS”(其程序图标便是“PS”)是一个由Adobe Systems开发和发行的图像处理软件。
多数人对于Photoshop的了解仅限于“一个很好的图像编辑软件”,并不知道它的诸多应用,实际上,Photoshop的应用领域很广泛的,在图像、图形、文字、视频、出版等各方面都有涉及。
Photoshop掌握绘画的基础理论,学习色彩原理和选取颜色、范围选取、工具与绘图、图像编辑、控制图像色彩和色调、使用图层、路径、通道和蒙板的应用、滤镜等。
Photoshop的平面设计Photoshop在平面设计中扮演着极其重要的角色,它广泛应用于我们日常生活和学习工作的各个方面,首先浅谈一下Photoshop平面设计软件具有特点和常用的设计原则。
设计特点:根据Photoshop的功能和作用,总结其明显的特点。
信息记录材料 2020年12月 第21卷第12期206统,可以将传感器所收集的信息进行梳理,通过日常数据与故障数据的对照,能够快速找到故障点,极大地方便了故障的预防、检测和维修流程,甚至部分故障还可以实现智能化排除[2]。
3.4 实现电子产品设计优化现阶段,随着电子信息技术产业的振兴,行业发展日新月异,而市场的挑战也日趋激烈。
为提升产品的设计效率,必须依赖更优质的技术加以保障。
而智能技术的应用则刚好弥补了传统电子产品设计中的短板,借助现代电子产品设计智能系统,对相关产品进行模拟运行,避免了传统设计中实践检验的麻烦,不仅设计效率提升和成本降低,更可以及时地发现设计中的问题,提升电子产品结构的合理性及质量的可靠性,推动产业的进一步升级。
3.5 确保数据信息的准确性依赖智能技术在电子工程自动化控制中的应用,可大幅提升信息数据的收集效率,通过大量信息的整合与处理,使信息数据库得到充实,并形成更强大的数据分析能力,从而为实际生产提供更丰富的信息支持[3]。
在智能技术的应用中,主要利用计算机进行高速处理,其过程与传统计算方式类似,主要包括存储器、触发器、寄存器及加法器等。
各个设备之间通过协作,使所收集的各类信息得到快速综合,并反馈至主逻辑管理系统中,再利用智能控制系统进行进一步处理,此过程保证了数据的完整性和准确性,使生产质量得到全面保证。
4 结语综上所述,伴随智能技术的持续发展,其在电子工程自动化控制中的应用日益普遍,利用智能技术先进的控制优势,能够实现对自动化控制系统的优化,赋予其最显著的智能管理特征,使传统的人工控制被全面取代。
不仅如此,在智能技术的深度应用下,还将大幅提升生产与管理效益,适应社会的新要求,使其在未来具备更强的发展空间与竞争力。
【参考文献】[1]严庆伦.电气工程自动化控制中智能化技术应用分析[J].南方农机,2019,50(23):241.[2]刘德胜.电气工程自动化控制中PLC 技术的应用探究[J].当代化工研究,2019(16):58-59.[3]杨建中.电子工程自动化控制中的智能技术[J].信息与电脑(理论版),2019,31(17):13-14,17.作者简介:魏江(1981- ),男,江西南昌,专科,IE 工程师,研究方向:推动自动化和信息化对生产效率的系统性提升。
如何使用Photoshop创建完美的网页设计在当今数字化的时代,拥有一个吸引人且功能齐全的网页对于个人和企业来说都至关重要。
Photoshop 作为一款强大的图像编辑软件,为网页设计师提供了丰富的工具和功能,帮助他们将创意转化为令人惊艳的网页设计。
接下来,我将详细介绍如何使用 Photoshop 来创建完美的网页设计。
一、前期准备在打开 Photoshop 之前,我们需要先明确网页的设计目标和需求。
考虑网页的用途(是商业网站、个人博客还是在线商店?)、受众群体(年龄、兴趣、职业等)以及要传达的主要信息。
同时,收集一些灵感,浏览其他优秀的网页设计案例,分析它们的布局、色彩搭配、字体运用等方面的优点。
确定好设计方向后,根据常见的网页尺寸(如 1920x1080 像素、1366x768 像素等)新建一个文档。
在新建文档时,要注意分辨率设置为 72 像素/英寸,颜色模式选择 RGB 模式。
二、规划布局布局是网页设计的基础,它决定了网页的整体结构和内容的组织方式。
在 Photoshop 中,可以使用矩形选框工具、形状工具和参考线来规划布局。
首先,根据网页的类型和内容,确定是采用单列布局、两栏布局还是多栏布局。
例如,博客类网页通常采用两栏布局,一侧是文章列表,另一侧是文章内容;而电商网站则可能采用多栏布局,展示不同的商品类别。
然后,使用参考线来划分页面的各个区域,如页眉、导航栏、主体内容区、侧边栏和页脚等。
参考线可以帮助我们保持元素的对齐和比例协调。
在规划布局时,要考虑到用户的浏览习惯,将重要的内容放在显眼的位置,并且保证页面的平衡和对称。
三、色彩搭配色彩是网页设计中最具表现力的元素之一,它能够影响用户的情绪和对网页的第一印象。
选择合适的色彩搭配对于创建一个吸引人的网页至关重要。
首先,确定网页的主色调。
主色调应该与网页的主题和品牌形象相符。
例如,科技类网站可能会选择蓝色和灰色作为主色调,以传达专业和创新的感觉;而儿童类网站则可能会选择鲜艳的色彩,如粉色、黄色和绿色。
Photoshop在网页设计中的作用分析Photoshop是一种强大的图像处理软件,其在网页设计中起着至关重要的作用。
本文将分析Photoshop在网页设计中的作用。
Photoshop在网页设计中可以用来处理和编辑图片。
网页设计需要使用大量的图片素材,而这些图片素材常常需要进行裁剪、调整大小、修复瑕疵等处理。
Photoshop提供了丰富的工具和功能,使得用户可以很方便地对图片进行处理和编辑,满足网页设计的需求。
Photoshop可以用来设计网页的界面。
网页设计不仅要求界面美观,还需要考虑用户体验和交互性。
Photoshop的图层功能可以帮助设计师创作出复杂的网页布局,并快速进行调整和修改。
设计师可以使用各种形状、文字、图像来设计出适合网页的界面元素,如按钮、导航栏等。
Photoshop还可以用来进行网页的色彩处理。
色彩是网页设计中重要的组成部分,能够影响用户的视觉体验和情绪。
通过Photoshop的色彩调整和处理功能,设计师可以对网页的色彩进行修改,使得网页更符合设计师的意图,并且能够吸引用户的注意力。
Photoshop还可以用来设计网页中的图标和按钮。
图标和按钮是网页设计中常见的元素,用来引导用户进行交互操作。
Photoshop提供了丰富的绘图工具和图层样式,使得设计师可以创建出各种风格的图标和按钮,从而增加网页的视觉吸引力和用户体验。
Photoshop还可以用来生成网页设计的预览图。
在网页设计过程中,设计师需要和客户进行沟通和交流,以确保设计方向的准确性。
通过Photoshop的预览功能,设计师可以将设计方案呈现给客户,让客户了解和确认设计的效果,从而减少沟通和修改的次数。
Photoshop在网页设计中具有很大的作用。
它可以用来处理和编辑图片,设计网页的界面,进行色彩处理,设计图标和按钮,以及生成设计的预览图。
它的强大功能和灵活性使得设计师能够快速、高效地完成网页设计工作,提升网页的质量和用户体验。
Photoshop 网页设计网页结构布局网页布局是指对网页中的文字、图形等内容,也就是网页中的元素进行统筹计划与安排。
网页布局的方法有两种,第一种为纸上布局;第二种为软件布局。
Photoshop所具有的对图像的编辑功能,在网页布局的设计上更是得心应手。
不像用纸来设计布局,利用Photoshop可以方便地使用颜色,使用图形,并且可以利用层的功能设计出用纸张无法表现的布局意念。
“国”字型也可以称为“同”字型,是一些大型网站所喜欢的类型,即最上面是网站的标题以及横幅广告条,接下来就是网站的主要内容,左右分列一些两小条内容,中间是主要部分,与左右一起罗列到底,最下面是网站的一些基本信息、联系方式、版权声明等。
这种结构是网上最常见的一种结构类型,如图1-1所示。
图1-1 国字型网页布局2.拐角型网页布局拐角型结构与上一种只是形式上的区别,其实是很相近的,上面是标题及广告横幅,接下来的左侧是一窄列链接等,右列是很宽的正文,下面也是一些网站的辅助信息。
在这种类型中,一种很常见的类型,最上面是标题及广告,左侧是导航链接,如图1-2所示。
图1-2 拐角型网页布局3.标题正文型网页布局标题正文类型,即最上面是标题或者类似的一些东西,下面是正文,比如一些文章页面或者注册页面等就是这种类型的网页,如图1-3所示。
图1-3 标题正文型网页布局4.左右框架型网页布局这是一种左右为分别两页的框架结构,一般左面是导航链接,有时最上面会有一个小的标题或标志,右面是正文。
我们见到的大部分的大型论坛都是这种结构的,有一些企业网站也喜欢采用。
这种类型结构非常清晰,一目了然,如图1-4所示。
图1-4 左右框架网页布局5.上下框架型网页布局与上面类似,区别仅仅在于是一种上下分为两页的框架。
这种框架的网页上面是固定的标志和链接,下面是正文部分,如图1-5所示。
图1-5 上下框架型网页布局6.综合框架型网页布局该布局是上面两种结构的结合。
它是相对复杂的一种框架结构,较为常见的是类似于“拐角型”结构的,只是采用了框架结构,如图1-6所示。
浅谈Photoshop在网页布局设计中的意义与方法
摘要
当今网络已经成为人们生活的重要组成部分,由此一个新兴的专业---网页设计诞生了。
部分技工学校为适应这个职业对人才的需求纷纷开设了网络工程专业。
但是在培养网页设计人员的过程中一些教师由于缺乏网页设计实践经验,对Photoshop这个图象软件在网页设计中对网页元素的整合作用认识不足,没有使这个软件发挥其应有的作用。
本文针对这个现象,对Photoshop在网页设计和规划中的作用和意义以及运用Photoshop进行网页规划时应注意的问题作了论述,特别是对Photoshop的切片功能和操作方法做了详细的说明,这对于初学网页设计的人员来说更具有指导意义。
关键词:网页设计Photoshop 布局
现在是IT时代,几乎没有哪一行能和网络脱离关系,因此网站的规划与建设已经成为一项专门职业。
在网站规划建设中,网页布局设计是其至关重要的一环,它关系到网站能否吸引更多人的眼球,直接反映网站的点击率,而点击率正是网站的生命所在。
所以网页布局设计是否美观、规范、合理越来越受到网页设计师的重视。
网页布局设计的软件很多,如Dream weaver 、FrontPage 等都可胜任,但是初学者往往是一上手就使用Dreamweaver等进行规划布局,结果使网站建设延期,下载速度降低,更糟的是合同违约,失掉客户,造成不可估量的损失。
纠其原因,关键是忽视
了Photoshop 在网页规划布局中的作用。
初学者知道Photoshop 是图像处理软件,但只是把它用来解决一般图像裁切、调整、优化,而忽视它在网页布局设计中的重要作用。
一、Photoshop 在网页布局设计中的作用
通过以上案例,我们发现这些网站设计风格简约,页面布局规范,有章可循,栏目放置有序,主次关系分明,浏览速度很快,其实从专业角度看这些都是Photoshop的功劳。
1、Photoshop在网页布局计划中的作用
①布局灵活:Photoshop的灵魂是图层,每层可以放置不同的元素,图层之间可以相互链接,也可单独存放,每个图层上的图像位置可以随意挪动而不影响其它图层的图像位置,每个图层上的图像大小、色阶、亮度、饱和度透明度等可单独设置而不影响其它图层上的图像。
如此灵活的功能,完全可以让设计者随心所欲设计而不受任何约束,而Dreamweaver等软件给设计者提供出自由度降低很多,其效果也会大打折扣。
②修改方便:网站建设前期首先要与客户签定合同,签定合同时客户最关心的是自己的网站是什么样子,这时设计者不可能拿出建好的网站给客户演示,这样一是成本太高,合同能否签定还不一定;二是保护知识产权,有的客户拿走设计方案交给别的公司去做,自己岂不成了给别人做嫁衣裳。
最好的办法是拿出在Photoshop中做出的效果图给客户看。
一般情况下,客户一次满意率非常低,总会提出修改意见,而且还会不断地提出修改方案。
这时我们就可以利用Photoshop的强大功能按客户的要求方便地进行修改和优化,直到客户满意为止。
如果在Dreamweaver 下,每做一次大的修改,几乎跟重新设计一样费时费力,而且还不一定能达到客户要求。
③加快浏览进度。
一个设计不美观不规范的网站是没有生命力,同样一个打开、下载速度慢的网站也是没有存在的价值。
心理学研究表明,选择性越多,人的忍耐性越差;可选择性越大,
人的忍耐性越低。
在互联网高度发展的今天,同类网站多如牛毛,人们没必要在一个网站前停驻静侯你一点一点地下载、打开、测试、显示。
一般情况下,下载速度一旦超过10秒,人们会自动转向其它网站。
决定下载速度的因素很多,如服务器配置标准、网络传输介质、客户机的配置以及同时点击人数的多少等。
但是在这些条件相同时,网页大小及网页元素的优化和配置就是唯一的因素。
使用Photoshop设计的网页经过裁切后体积相对要小得多,相同的元素因为其格式变化也会大大提高下载速度,因此Photoshop就成了提高速度,提高点击率的制胜法宝。
二、用Photoshop设计网页布局应注意的几个问题
1、网页文档尺寸与分辨率。
网页文档一般为1007*600和708*800像素,分辨率为72像素,这是屏幕分辨率,太高的分辨率并不能增强效果,反而会降低下载速度。
一般情况下,大型网站不要超过3屏。
2、颜色:网站背景颜色与文件颜色要统一协调,一般不要超过两种,一些网站被批评为脏、乱、差,其要害是颜色搭配不合理,或者太多,给人一种不舒服的感觉。
3、字体,标题。
导航字体一般用黑体,正文一般用宋体,其它字体浏览器不兼容,可能造成调试时出错,给工作带来麻烦。
如果为增强页面效果用到其它字体,则最好在用Dreamweaver前在Photoshop切分及图片,字体的颜色设置要考虑到整个页面效果。
4、布局格式:虽然效果图是用Photoshop设计的,但一定要兼顾到Dreamweaver对页面布局的要求,Dreamweaver下网页布局是使用‘国’字形,还是其他模式,是否使用框架,使用
框架的类型是哪一种,都是在设计前要考虑到的。
否则会造成效果图与最后的网站布局出现出入,给客户和自身带来麻烦和损失。
5、图文搭配:一个好的网站是图片多好还是文字多好,这要视网站的功能、行业、目的而定,但有个原则就是图文合理配置,而图片则要按一定的空间分布进行和谐分布。
另外,图片大小要合乎美学原则,不能太大,一般用缩略图较好,如果要显示更多的图片细节,不妨给缩略图链接一个大的图片。
6、科学使用参考线。
参考线是设计页面布局的有效辅助工具,我们可以先用横参考线将网页布局分成几大版块,然后用竖参考线将每个板块按我们的思路分为几个小板块,最后再整体观察一下。
要精确定位网页元素,可用对齐参考线的方法来实现:“视图”—“对齐到”—“参考线”,而参考线的精确定位可以借助标尺和网格来实现,这里要注意的是网站的Logo和Banner 或者导航条等都是事先设计好的,有固定大小,在做这些区域时尺寸一定要按照这些元素尺寸设计,不能有丝毫差错,否则进入DreamWeaver整合时,则可能出现空边或撑开表格的现象。
三、“切片”工具是Photoshop通向DreamWeaver的桥梁。
利用Photoshop效果图最终与客户签合同后,还不是Photoshop设计网页布局的终结,而还有关键的一步,就是“切片”,只有正确地切片后,DreamWeaver才能对效果图进行有效的整合,Photoshop在网页布局中的积极作用才发挥到了极致。
要完成“切片”这关键的一步,应遵循以下原则:
1、必须依靠参考线。
设计时用到参考线,切图时更要用好参考线。
参考线能保证我们切出图在同一表格中的尺寸统一协
调,有效避免“留白”和“爆边”。
2、 Logo和Banner必切。
如果效果图中存在Logo和Banner,我们必须切片这部分,主要是为预先设计的Logo和Banner留下空间,在DreamWeaver整合时最好不用Logo和Banner的切片,而是直接用Logo和Banner原文档,这是提高Logo和Banner效果的需要。
3、虚线和转角形状必切。
虚线和转角形状在DreamWeaver 不能实现,只能使用Photoshop切片。
4、渐变必切。
这也是Dream Weaver实现不了的。
5、大图必切。
大的图像必须切分成均匀图,这样可以提高网页下载速度。
6、特殊文字效果必切。
除黑体和宋体外,其他字体必须切片。
DreamWeaver下最有效的字体只有宋体和黑体,其它字体浏览器也要能不兼容。
7、导航条必切。
一般情况下导航条都是特别设计的,其效果在Dream Weaver下不能实现,因此必须形成切片供后期使用。
8、有效存储切片。
存储切片的文件夹必须位于站点的根目录下,文件夹名必须是英文名字。
存储切片时用“文件—存储为web所用格式”命令。
切片存储格式要求一般存为Gif格式。
Gif 占用体积小。
要求较高的图像存储为JPEG格式,JPG格式显示更多的图片细节。
当然,网页布局的设计软件的使用依设计者习惯、爱好、风格不同而不一样。
笔者在此只是谈一下一般的规律,以供广大网页设计初学者参考。
【参考文献】
1.《使用Photoshop设计网站》北京阿博泰克北大青鸟
信息技术有限公司编著科学技术文献出版社 2008
年5月第一版
2. 《Photoshop 中文教程》电子教程下载地址
/tests/199/199439.html
3.《制作企业网站》北京阿博泰克北大青鸟信息技术有
限公司编著科学技术文献出版社 2008年5月第一
版。