中文版Dreamweaver CC+Flash CC+Photoshop CC网页设计基础培训教程(新编实战型全功能培训教材)(txt+pdf+epub+mobi电子书下载)


发布时间:2020-09-13 09:39:57

点击下载

作者:数字艺术教育研究室

出版社:人民邮电出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

中文版Dreamweaver CC+Flash CC+Photoshop CC网页设计基础培训教程(新编实战型全功能培训教材)

中文版Dreamweaver CC+Flash CC+Photoshop CC网页设计基础培训教程(新编实战型全功能培训教材)试读:

前言

在信息传播如此发达的时代,网络已经成为获取信息的重要途径,也成为了生活中不可或缺的一部分。正因为这样,网页设计师作为一种新兴的职业正在飞速地发展着,吸引了一大批网页爱好者投身于网页设计的工作当中。由于网络是网页的基础,在网页的制作中需要严格地按照网络的具体要求来做,而且也需要通过使用相应的软件和语言进行配合。

目前在网页设计与制作中最常用也是最流行的软件非Dreamweaver、Photoshop和Flash莫属。这3款软件不仅功能强大而且易学易用,在行业中被称为“网页三剑客”,是多媒体网站设计与制作的梦幻组合,本书将分别介绍这3款软件的相关知识,讲解如何综合使用这3款软件并制作出优秀的网页作品。

内容安排

本书共19章,分为5篇,分别是了解网页设计篇、Photoshop CC篇、Flash CC篇、Dreamweaver CC篇和网站案例篇,由浅入深地向读者介绍了网页设计制作软件的相关知识点和操作方法。

了解网页设计篇(第1章):介绍了有关网页设计制作的相关基础知识,包括什么是网页设计、网页开发常用软件和技术、网站建设的基本流程等内容。通过对本篇的学习,读者可以对网页设计与制作有更加深入的了解。

Photoshop CC篇(第2章~第6章):简单介绍了Photoshop CC的工作界面和文件的基本操作方法,详细讲解了选区工具、基本绘图工具、矢量绘图工具的使用和处理文本、修改图像的技巧。通过对本篇的学习,读者可以掌握Photoshop CC的使用方法,以及常见网页元素的设计和表现方法。

Flash CC篇(第7章~第11章):简单讲解了Flash CC的基本操作方法和一些绘图工具、修改工具的使用方法,以及文本与对象的操作方法,重点介绍了各种不同类型的Flash动画的制作方法。通过对本篇的学习,读者可以掌握Flash CC软件的使用方法,并能够制作出网页中常见的动画效果。

Dreamweaver CC篇(第12章~第18章):详细介绍了Dreamweaver CC软件的操作方法和各知识点,包括网页文本的基本操作、创建站点、在网页中添加文本、在网页中插入图像、在网页中插入多媒体元素、各种不同类型网页链接的创建方法,还介绍了使用行为实现网页特效、CSS样式与Div+CSS布局、在网页中插入表单元素等网页制作高级功能。通过对本篇的学习,读者可以掌握Dreamweaver CC软件的操作方法和在网页制作过程中的各方面知识。

网站案例篇(第19章):通过一个完整的网站案例,按照从Photoshop设计网页、制作网页中的Flash动画、使用Dreamweaver制作HTML页面这样的整体流程,全面分析和介绍了网页设计的制作方法和技巧。通过对本篇的学习,读者能够掌握网页设计制作的流程,以及设计制作的方法和技巧,为学习和制作网页打下深厚的基础。

本书特点

本书由易到难、循序渐进地介绍了Photoshop CC、Flash CC和Dreamweaver CC的基本功能以及各种使用方法和技巧。并通过制作整体网站的案例向读者介绍了如何将这3个软件相互配合,制作出精美的网页。

全方位介绍网页设计制作软件

由具有多年网页设计经验的资深设计人员编写、分别对Dreamweaver CC、Photoshop CC和Flash CC这3款软件的基础知识和基本操作进行了介绍,帮助读者迅速地掌握网页制作、图像处理、动画制作的基本技能。

简单易学

本书结构清晰、语言流畅、案例丰富,对软件的各项功能和制作方法都有讲解。在案例的制作过程中还穿插了大量的提示和技巧,使读者能够更容易地理解和掌握各项功能和网页制作的方法,从而加深对知识点的理解。

网站资源

书中所述的视频教学内容和课程的PPT课件均已作为学习资料提供下载,扫描右侧二维码即可获得文件下载方式。视频文件包括相关案例的全程同步教学视频,PPT内容包括本书第1章~第19章配套课程的课件。其中,视频讲解清晰流畅,读者可通过书与视频教学相结合的学习方式,牢固掌握相关技能;PPT课件的结构完整,便于相关课程的讲师根据自己的实际需求完善课件,提高教学质量。

如果大家在阅读或使用过程中遇到任何与本书相关的技术问题,请发邮件至szys@ ptpress.com.cn,我们会尽力为大家解答。

读者对象

本书适合想进入网页设计领域的读者朋友与网页设计专业的大中专学生阅读,同时对专业设计人士也有很高的参考价值。希望读者通过对本书的学习,能够早日成为优秀的网页设计师。

本书在写作过程中力求严谨,但由于作者水平有限并受时间所限,书中疏漏之处在所难免,望广大读者批评指正。编者Dreamweaver、Flash、Photoshop教学辅助资源及配套教辅了解网页设计篇第1章 了解网页设计

本章介绍

要想成为网页设计高手,制作出精美的网站页面,首先需要熟练掌握网页设计相关软件的使用方法和技巧。常用的网页设计软件主要包括Dreamweaver、Photoshop和Flash。了解网页设计的一些基本概念和设计常识也是非常有必要的,这样可以使读者对网页设计有更加深入的了解。

学习目标

了解网页设计以及网页设计中的相关术语

理解“网页三剑客”以及它们之间的关系

清楚网站建设的基本流程1.1 什么是网页设计

网页设计是近年来在设计领域中兴起的,继报纸、广播、电视之后又一全新的设计媒介。网页设计代表着一种新的设计思路,作为一种为客户服务的理念,是对网络特点的把握和对网络限制条件的理解。1.1.1 网页设计概述

随着时代的发展、科学的进步以及审美需求的不断提高,网页设计已经在短短数年内跃升成为一个新的艺术门类,而不再仅仅是一门技术。与其他传统的艺术设计相比,它更突出了艺术与技术的结合、形式与内容的统一、交互与情感的诉求等特点。

在这种时代背景的要求下,人们对网页设计产生了更深层次的审美需求。网页不仅仅是把各种信息简单地堆积起来,达到能看或者表达清楚的目的,更要考虑通过各种设计手段与技术技巧,让受众能更多更有效地接收网页上的各种信息,从而对网站留下深刻的印象,催生消费行为,提升企业品牌形象。

随着互联网技术的进一步发展与普及,当今时代的网站更注重审美的要求和个性化的视觉表达,这也对网页设计师这一职业提出了更高层次的要求。一般来说,平面设计中的审美观点都可以套用到网页设计上来,利用各种色彩的搭配营造出不同氛围和不同形式的美。

但网页设计也有自己的独特性,在颜色的使用上,它有自己的标准色—“安全色”;在界面设计上,要充分考虑到浏览者使用的浏览器、分辨率等情况;在元素的使用上,它可以充分利用多媒体的长处,选择最恰当的音频与视频相结合的表达方式,给用户以身临其境的感觉以及比较直观的印象。这只是一个比较抽象的概念,在网络世界中有许许多多设计精美的网页值得去欣赏、学习和借鉴,如图1-1所示。图1-1

图1-1所示的网页,也仅仅是互联网海洋中众多优秀网页作品的一朵朵小浪花而已,但从以上作品中不难看出,好的网站应该给人以这样的感觉:页面干净整洁、内容条理清晰、设计水准专业、形式引人入胜。优秀的网页设计作品是艺术与技术的高度统一,它应该包含视听元素与版式设计两项内容;以主题鲜明、形式与内容相统一、强调整体为设计原则;具有交互性与持续性、多维性、综合性、版式的不可控性、艺术与技术结合的紧密性等5个特点。1.1.2 网页设计中的术语

在相同的条件下,有些网页不仅美观、大方,打开的速度也非常快,而有些网页却要等很久,这就说明网页设计不仅仅需要页面精美、布局整洁,很大程度上还要依赖于网络技术。因此网站不仅仅是设计者审美观、阅历的体现,更是设计者的知识面、技术等综合素质的展示。

下面向大家介绍一些与网页设计相关的术语,只有了解了网页设计的相关术语,才能够制作出既有艺术性又有技术性的网页。

因特网

因特网,英文为Internet。因特网是由许许多多遍布全世界的电脑组织而成的,当一台电脑在连接上网的一瞬间,它就已经是因特网的一部分了。网络是没有国界的,通过因特网可随时传递文件信息到世界上任何一个因特网所能覆盖的角落,当然也可以接收来自世界各地的实时信息。

在因特网上查找信息,“搜索”是最好的办法。比如可以使用搜索引擎“百度”,它提供了强大的搜索能力,只需要在文本框中输入几个需要查找的内容的关键字,就可以找到成千上万与之相关的信息,如图1-2所示。图1-2

浏览器

浏览器是安装在电脑中用来查看因特网网页的一种工具,每一个用户都要在电脑上安装浏览器来“阅读”网页中的信息,这是使用因特网的最基本的条件,就好像人们要用电视机来收看电视节目一样。目前大多数用户所使用的Windows操作系统已经内置了浏览器。

URL

URL(Uniform Resource Locater),中文含义是统一资源定位符,就是网页在因特网中的地址,访问网站需要用URL来找到网站的地址。例如,“网易”的URL是www.163.com,也就是它的网址,如图1-3所示。

HTTP

HTTP(Hyper Text Transfer Protocol),中文含义是超文本传输协议,是一种最常用的网络通信协议。如果想链接到某一特定的网页时,就必须通过HTTP协议,不论你是用哪一种网页编辑软件,在网页中加入什么资料,或是使用哪一种浏览器,利用HTTP协议都可以看到正确的网页效果。

TCP/IP

TCP/IP(Transmission Control Protocol/Internet Protocol),中文含义是传输控制协议/因特网互联协议,是因特网所采用的标准协议。只要遵循TCP/IP,不管电脑是什么系统或平台,均可以在因特网的世界中畅行无阻。图1-3

FTP

FTP(File Transfer Protocol),中文含义是文件传输协议,与HTTP协议相同,它也是URL地址使用的一种协议名称,用于指定传输某一种因特网资源。HTTP协议用于链接到某一网页,而FTP协议则用于上传或下载文件。

IP地址

IP地址是分配给网络上计算机的一组由32位二进制数值组成的编号,用于对网络中的计算机进行标识。为了方便记忆地址,采用了十进制标记法,每个数值小于等于225,数值中间用“.”隔开。一个IP地址对应一台计算机并且是唯一的,这里需要注意的是所谓的唯一是指在某一时间内唯一,在使用网络的这一时段内,这个IP是唯一指向正在使用的计算机的。如果使用动态IP,那么每一次分配的IP地址是不同的;如果是静态IP,它是固定将这个IP地址分配给某计算机使用的。网络中的服务器使用的就是静态IP。

域名

IP地址是一组数字,人们记忆起来不够方便,因此人们给每个计算机赋予了一个具有代表性的名字,这就是主机名,主机名由英文字母或数字组成。将主机名和IP对应起来,这就是域名,可以方便大家记忆。

域名和IP地址是可以交替使用的,但一般域名还是要通过转换成IP地址才能找到相应的主机,这就是上网的时候经常用到的DNS域名解析服务。

虚拟主机

虚拟主机(Virtual Host/Virtual Server)是使用特殊的软硬件技术,把一台计算机主机分成一台台“虚拟”的主机,每一台虚拟主机都具有独立的域名和IP地址(或共享的IP地址),有完整的Internet服务器(WWW、FTP、E-mail等)功能。在同一台硬件、同一个操作系统上,运行着为多个用户打开的不同的服务器程序,互不干扰;而各个用户拥有自己的一部分系统资源(IP地址、文件存储空间、内存、CPU时间等)。虚拟主机之间完全独立,并可由用户自行管理,在外界看来,每一台虚拟主机和一台独立的主机的表现完全一样。

虚拟主机属于企业在网络营销中的简单应用,适合初级建站的小型企事业单位。这种建站方式适用于企业宣传、发布比较简单的产品和经营信息。

租赁服务器

租赁服务器是通过租赁ICP的网络服务器来建立自己的网站。

使用这种建站方式,用户无须购置服务器,只需租用它们的线路、端口、机器设备和所提供的信息发布平台就能够发布企业信息,开展电子商务。它能替用户减轻初期投资的压力,减少对硬件长期维护所带来的人员及机房设备的投入,使用户既不必承担硬件升级负担又可以建立一个功能齐全的网站。

主机托管

主机托管是企业将自己的服务器放在ICP的专用托管服务器机房,利用它们的线路、端口、机房设备为信息平台建立自己的宣传基地和窗口。

使用独立主机是企业开展电子商务的基础。虚拟主机会受共享环境下的操作系统资源所限,因此虚拟主机将不能满足用户站点日益发展的要求,这时候用户需要选择使用独立的主机。1.2 网页设计常用软件和技术

要想制作出精美的网站页面,需要综合运用各种网页制作工具和技术,本节将向读者简单介绍网站开发时常用的软件和技术。1.2.1 网页图像处理软件——Photoshop CC

最常用的网页图像处理软件主要有Photoshop和Fireworks,其中Photoshop凭借其强大的功能和广泛的应用范围一直占据着图像处理软件的领先地位。Photoshop支持多种图像格式以及多种色彩模式,可以任意调整图像的尺寸、分辨率及画布的大小,使用Photoshop可以设计网页整体效果、处理网页中的图像效果、设计网站Logo、设计网页按钮和网页宣传广告图像等。本书主要用最新版本的Photoshop CC为读者进行讲解,Photoshop CC的工作界面如图1-4所示。图1-41.2.2 网页动画制作软件——Flash CC

Flash是一款非常优秀的交互式矢量动画制作软件,能够制作包含矢量图、位图、动画、音频、视频、交互式动画等内容在内的站点。为了引起浏览者的注意和兴趣,传递网站的动感和魅力,许多网站的介绍页面、宣传广告、按钮,甚至整个网站都是使用Flash制作出来的。用Flash制作的网页文件比普通网页文件要小很多,大大加快了网页的浏览速度,因此Flash是一款非常适合制作网页动画的软件。本书主要用最新版本的Flash CC为读者进行讲解,Flash CC的工作界面如图1-5所示。图1-51.2.3 网页编辑制作软件——Dreamweaver CC

Dreamweaver是网页设计与制作领域中用户最多、应用最广泛、功能最强大的软件,无论是在国内还是在国外,Dreamweaver都备受专业网站开发人员的喜爱。Dreamweaver用于网页的整体布局和设计,以及对网站的创建和管理,与Flash、Photoshop并称为“网页三剑客”。利用Dreamweaver可以轻而易举地制作出充满动感的网页,本书主要用最新版本的Dreamweaver CC为读者进行讲解,Dreamweaver CC的工作界面如图1-6所示。图1-61.2.4 网页标记语言——HTML

要想专业地进行网页的设计和编辑,最好还要具备一定的HTML语言知识。虽然现在有很多可视化的网页设计制作软件,但网页的本质都是由HTML语言构成的,要想精通网页制作,必须要对HTML语言有相当的了解。

HTML(Hyper Text Marked Language),中文含义是超文本标记语言,是一种用来制作超文本文档的简单标记语言。超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。1.2.5 网页特效脚本语言——Java Script

在网页设计中使用脚本语言,不仅可以缩小网页的规模、提高网页的浏览速度,还可以丰富网页的表现力,因此脚本语言已成为网页设计中不可缺少的一种技术。目前最常用的脚本有Java Script和VBScript等,其中Java Script是众多脚本语言中较为优秀的一种,是许多网页开发者首选的脚本语言。

Java Script是一种描述性语言,它可以被嵌入到HTML文件中。和HTML一样,用户可以用任何一种文本编辑工具对它进行编辑,并在浏览器中进行预览。同时,Java Script也是一种解释性编程语言,即当用户向服务器请求页面资源时,其源代码在发往客户端执行之前并不需要经过编译,而是将文本格式的字符代码随HTML一起发送给客户端,完全由客户端支持Java Script的浏览器来解释和执行。如图1-7所示为使用Java Script实现的网页特效。图1-71.3 网页三剑客”的关系

之所以将Dreamweaver、Photoshop和Flash称为“网页三剑客”,是因为通过这3种软件相互之间的无缝合作,可以设计制作出精美的网页。可以说“网页三剑客”是当今网页设计制作的必备工具。“网页三剑客”是相辅相成的关系,缺少其中任何一种软件都可能无法制作出精美的网页。在设计制作网页时,通常是使用Photoshop将网站页面设计出来,这样可以直观地看到整个网页所呈现的效果,便于对网页进行细化和修改,直至最终定稿;然后使用Flash将网页中相应的部分制作成Flash动画,通过Flash动画可以增强网页的表现力;最后在Dreamweaver中将设计好的网站页面制作成HTML网页。如图1-8所示为网页设计制作的基本流程。图1-8图1-9

在网页设计领域中,“网页三剑客”主要用于网页设计制作,最终的目的是制作成HTML页面,其中最重要的是网页制作软件Dreamweaver,通过Dreamweaver软件可以对网页的背景、文字、图像、动画等各种元素进行控制,并应用各种技术最终生成HTML页面。而图像处理软件Photoshop和动画制作软件Flash主要还是用于辅助网页设计制作的,使用Photoshop设计网页界面、处理网页图片等,使用Flash制作网页中的Flash动画。如图1-9所示为“网页三剑客”之间的关系。1.4 网站建设的基本流程

在开始建设网站之前就应该有一个整体的战略规划和目标,规划好网页的大致外观后就可以进行设计了。当整个网站测试完成后,就可以发布到网上。大部分站点需要定期进行维护,以实现内容的更新和功能的完善。1.4.1 前期网站策划

一件事情的成功与否,其前期策划举足轻重,网站建设也是如此。网站策划是网站设计的前奏,主要包括确定网站的用户群和定位网站的主题,还有形象策划、制作规划和后期宣传推广等方面的内容。网站策划在网站建设的过程中尤为重要,它是制作网站过程中所迈出的重要的第一步。作为建设网站的第一步,网站策划应该切实地遵循“以人为本”的创作思路。

网络是用户主宰的世界,由于可选择的对象众多,而且寻找起来也相当便利,网络用户明显缺乏耐心,并且想要迅速满足自己的要求,如果他们不能在一分钟之内弄明白如何使用一个网站,他们会认为这个网站不值得再浪费时间,然后就会离开,因此只有那些经过周密策划的网站才能吸引更多的访问者。1.4.2 规划站点结构

一个网站设计得成功与否、很大程度上取决于设计者规划水平的高低。网站规划包含的内容很多,如网站的结构、栏目的设置、网站的风格、网站导航、颜色搭配、版面布局、文字图片的运用等。只有在制作网站之前把这些方面都考虑到了,才能在制作时胸有成竹。1.4.3 收集网站相关素材

网站的前期策划完成以后,接下来就是按照确定的主题进行资料和素材的收集、整理。这一步也是特别重要的,好的想法如果没有内容来充实是肯定不能实现的。但是资料、素材的选择是没有什么规律的,可以寻找一些自己认为好的东西,同时也要考虑浏览者的情况,因为每个人的喜好都不同,如何权衡取舍,就要看设计者如何把握了。收集回来的资料一定要整理好,归类清楚,便于以后使用。1.4.4 网页的版式与布局分析

当资料的收集、整理完成后,就可以开始进行具体的网页设计工作。在进行网页设计时,首先要做的就是设计网页的版式与布局。现在,网页的布局设计变得越来越重要,因为访问者不愿意再看到只注重内容的站点。虽然内容很重要,但只有当网页布局和网页内容成功结合时,这种网页或者说站点才是受人欢迎的。取任何一面都有可能无法留住“挑剔”的访问者。

网页布局的方法有两种,第一种为纸上布局法,第二种为软件布局法。

纸上布局法。许多网页制作者不喜欢先画出页面布局的草图,而是直接在网页设计软件中边设计布局边添加内容。这种不打草稿的方法很难设计出优秀的网页来,所以在开始制作网页时,要先在纸上画出页面的布局草图。

软件布局法。如果制作者不喜欢用纸来画出布局图,那么还可以利用软件来完成这些工作。可以使用Photoshop所具有的对图像的编辑功能设计网页布局,利用Photoshop还可以方便地使用颜色、图形,并且可以利用层的功能设计出用纸张无法实现的布局概念。1.4.5 确定网页的主色调

色彩是艺术表现的要素之一。在网页设计中,根据和谐、均衡和重点突出的原则,将不同的色彩进行组合、搭配来构成美丽的页面。同时还应该根据色彩对人们心理的影响,合理地加以运用。按照色彩的记忆性原则,一般暖色较冷色的记忆性强;色彩还具有联想与象征的特质,如红色象征血、太阳,蓝色象征大海、天空和水面等。网页的颜色应用并没有数量的限制,但不能毫无节制地运用多种颜色。一般情况下,先根据整体风格的要求定出一到两种主色调,有企业形象识别系统(CIS)的,更应该按照其中的VI进行色彩运用。如图1-10所示为成功的网站配色。图1-10

在色彩的运用过程中,还应该注意的一个问题是由于国家和种族、宗教和信仰的不同,以及生活的地理位置、文化修养的差异等,不同的人群对色彩的喜好程度有着很大的差异。如儿童喜欢对比强烈、个性鲜明的纯颜色;生活在草原上的人喜欢红色;生活在闹市中的人喜欢淡雅的颜色;生活在沙漠中的人喜欢绿色等。设计者在设计中要考虑主要读者群的背景和构成,以便选择恰当的色彩组合。1.4.6 设计网站页面

在版式布局完成的基础上,将确定的功能模块(功能模块主要包含网站标志、主菜单、新闻、搜索、友情链接、广告条、邮件列表、版权信息等)、图片、文字等放置到页面上。需要注意的是,这里必须遵循突出重点、平衡协调的原则,将网站标志、主菜单等最重要的模块放在最显眼、最突出的位置,然后再考虑次要模块的摆放。1.4.7 切割和优化网页图像

整体的页面效果制作好以后,就要考虑如何把整个页面分割开来,使用什么样的方法可以使最后生成的页面的文件量最小。对页面进行切割与优化是具有一定规律和技巧的。1.4.8 制作网站HTML页面

这一步就是具体的制作阶段,也就是大家常说的网页制作。目前主流的网页可视化编辑软件是Adobe公司的Dreamweaver,它具有强大的网页编辑功能,适合专业的网页设计制作人员,本书将主要介绍使用Dreamweaver对网页进行设计制作。完成了这一步,整个网页也就制作完成了。1.4.9 开发动态网站功能模块

完成网站HTML静态页面的制作后,如果还需要动态功能的话,就需要开发动态功能模块。网站中常用的功能模块有新闻发布系统、搜索功能、产品展示管理系统、在线调查系统、在线购物、会员注册管理系统、统计系统、留言系统、论坛及聊天室等。1.4.10 申请域名和服务器空间

网页制作完毕,最后要发布到Web服务器上,才能够让众多的浏览者观看。首先需要申请域名和空间,然后才能上传到服务器上。

可以用搜索引擎查找相关的域名空间提供商,在他们的网站上可以进行在线域名查询,从而找到最适合自己的而且还没有被注册的域名。

有了自己的域名后,就需要一个存放网站文件的空间,而这个空间在因特网上就是服务器。一般情况下,可以选择虚拟主机或独立服务器的方式。1.4.11 测试并上传网站

网站制作完成以后,暂时还不能发布,需要在本机上进行内部测试,并进行模拟浏览。测试的内容包括版式、图片等显示是否正确,是否有死链接或者空链接等,发现有显示错误或功能欠缺后需要进一步修改,如果没有发现任何问题,就可以发布上传了。发布上传是网站制作中的最后一步,完成这一步骤后,整个过程就结束了。1.4.12 网站的更新与维护

严格地说,后期更新与维护不能算是网站设计过程中的环节,而是制作完成后应该考虑的。但是这一项工作却是必不可少的,尤其是信息类网站,更新和维护更是必不可少。这是网站保持活力、吸引力以及正常运行的保障。Photoshop CC篇第2章 Photoshop CC入门

本章介绍

Photoshop是一款具有强大功能的图像处理及绘图软件,涉及许多领域,几乎可以编辑所有的图像格式,能够实现对图像的复制粘贴、调整大小、色彩调整等操作。本章将对Photoshop CC的工作界面和基本操作进行相应的介绍。

学习目标

了解Photoshop在网页设计中的用途

认识Photoshop CC的工作界面

掌握Photoshop中文软件的基本操作

掌握图像编辑的辅助操作

掌握调整网页图像的方法

技能目标

掌握“新建一个网页常用尺寸的文档”的方法

掌握“在Photoshop中查看网页图像”的方法

掌握“修改网页图像大小”的方法2.1 “网页三剑客”之Photoshop

网页设计的特点在于将最先进的电脑技术应用于现代艺术设计之中,强调技术与艺术的高度融合。培养目标为网页设计师、平面助理设计师、三维图形辅助设计师等一专多能的实用、综合性人才。网页设计中应用最为广泛的软件是Photoshop,它已经成为网页视觉设计的标准工具。2.1.1 选择合适的网页图像处理软件

网页设计师所使用的工具,除了笔和纸,最主要的使用工具是计算机。对于网页设计师来说,当把大量精力花费在思考和创意上后,接下来的实施工作中就应该运用一些技巧来简化这些想法。一个好的想法,经常因为实现过程过于复杂而无法实现。工欲善其事,必先利其器。

能够处理网页图像的软件有很多,包括Photoshop、Fireworks、Illustrator等,在众多的网页图像处理软件中,Photoshop以其强大的图像处理功能、丰富的应用以及广泛的应用范围成为网页图像处理软件的首选。

Photoshop

Photoshop是一款具备强大功能的图像处理软件,它也是迄今为止使用范围最广泛的图像处理软件。Photoshop在网页设计上也发挥着重要的作用,通过该软件设计制作网页页面,再将设计制作好的页面通过Dreamweaver网页软件进行处理,便可以创建互动网站。在Photoshop中制作设计的页面不仅可以被网页制作软件使用,还可以使用Photoshop输出为网页和动画。

Fireworks

Fireworks是一款创建与优化Web图像和快速构建网站与网页界面原型的理想软件。Fireworks不但具备编辑位图图像与矢量图形的灵活性,还提供一个预先构建资源的公用库,并可与Photoshop、Illustrator、Dreamweaver和Flash软件集成。但是Fireworks软件的位图图像处理能力不及Photoshop强大。

Illustrator

Illustrator是Adobe公司推出的基于矢量图形绘制的设计软件,主要应用于出版、多媒体、UI设计、插画和网页设计等领域。Illustrator是一款矢量图形设计软件,而在网页中只能使用位图,所以其在网页图像处理中的应用并不是非常广泛,但可以使用Illustrator设计处理网站标志、图标等。2.1.2 了解网页图像处理软件——Photoshop

Photoshop是Adobe公司旗下最知名的图像处理软件,它可以将摄影图片、绘画、图形剪辑等结合在一起,并进行处理,使之产生各种绚丽甚至超越想象的艺术效果。Photoshop的应用领域非常广泛,在平面设计、网页设计、插画艺术设计、UI设计、数码照片后期处理、效果图、三维动画等领域均有涉及。

Photoshop的专长在于图像处理,而不是图形创作,需要区分一下这两个不同的概念。图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果,其重点在于对图像的处理加工;图形创作是按照自己的构思创意,使用矢量图形来设计图形,这类软件主要有Adobe公司的矢量绘图软件Illustrator。2.2 认识Photoshop CC工作界面

Photoshop CC的工作界面较Photoshop CS6而言没有太大的变化,依旧保持着简约、开阔的操作界面和快捷、便利的文档切换方法,使得页面在整体的视觉效果上更加精致和美观,下面我们将向大家介绍一下Photoshop CC的基本工作界面。

启动Photoshop CC后,会出现如图2-1所示的工作界面,其中包含文档窗口、菜单栏、工具箱、选项栏以及面板等模块。图2-1

菜单栏:菜单栏中共有文件、编辑、图像、图层、类型、选择、滤镜、3D、视图、窗口和帮助等11个菜单,包含了所有Photoshop CC操作所需要的命令。

选项栏:选项栏会根据所选工具或命令的不同而对应显示不同的设置选项。

工具箱:工具箱中包含了Photoshop CC中所有的操作工具,Photoshop CC更新了所有工具图标,并且增强了很多工具的功能。

状态栏:显示当前打开的文档的状态,包括了显示比例、文档大小、文档尺寸等。

图像窗口:图像窗口用来显示当前打开的图像文件,在其标题栏中显示文件的名称、格式、缩放比例及颜色模式等信息。

面板:面板中汇集了编辑图像时常用的选项和相关属性参数。默认状态下,面板显示在操作窗口的右侧,用户可以按照自身的操作习惯修改面板的排列方式。2.3 文件的基本操作

在开始对Photoshop CC的各项功能进行学习之前,首先需要了解并掌握的是一些关于图像文件的基本操作方法和技巧,其中包括文件的新建、打开以及保存等操作,掌握了这些基本操作可以为之后的图像编辑打下坚实的基础,从而能够快速并熟练地制作出精美的作品。

命令介绍“新建”命令:使用该命令可以在Photoshop中创建新的空白文档。“打开”命令:使用该命令可以在Photoshop中打开一个已有的文档进行编辑。“导入”命令:在Photoshop中可以通过“导入”命令将外部文件合并在一起。“置入”命令:“置入”命令与“导入”命令相似,可以通过该命令将外部文件合并在一起。“保存”命令:新建文档或对文档进行编辑处理后,需要对文档进行保存操作,通过执行该命令即可保存当前文档。“导出”命令:使用该命令,可以将Photoshop所创建的文档导出到其他软件和设备中。“关闭”命令:使用该命令,可以关闭Photoshop文档。2.3.1 课堂案例——新建一个网页常用尺寸的文档【案例学习目标】学习如何新建网页常用尺寸的文档。【案例知识要点】使用“新建”命令,打开“新建文档”对话框,使用“保存”命令,如图2-2所示。【效果所在位置】光盘\源文件\第2章\新建一个网页尺寸文档.psd。(1)安装Photoshop CC后,单击桌面左下角的“开始”按钮,在打开的菜单中选择“所有程序”,单击“Adobe Photoshop CC”选项,如图2-3所示。软件开始启动,界面如图2-4所示。图2-2图2-3图2-4(2)待软件启动后,即可进入Photoshop CC工作界面,如图2-5所示。执行“文件>新建”命令,弹出“新建”对话框,如图2-6所示。图2-5图2-6(3)在“预设”下拉列表中选择“Web”选项,如图2-7所示。在“大小”下拉列表中选择“1280× 1024”选项,如图2-8所示。(4)其他选项使用默认设置,如图2-9所示。单击“确定”按钮,即可新建一个尺寸大小为1280像素×1024像素的网页空白文档,如图2-10所示。(5)执行“文件>存储为”命令,弹出“另存为”对话框,浏览到需要保存该文档的文件夹,并设置文件名称,如图2-11所示。单击“保存”按钮,即可保存所新建的Photoshop文档,可以在保存位置看到该文件,如图2-12所示。图2-7图2-8图2-9图2-10图2-11图2-122.3.2 新建文件

在Photoshop CC中进行创作之前,首先需要创建新文件,然后才能在新建的文件中进行相应的操作。执行“文件>新建”命令,弹出“新建”对话框,如图2-13所示,为Photoshop创建画布。在“新建”对话框中可以设置文件的名称、尺寸、分辨率、颜色模式和背景内容等。

名称:该选项可以用来输入新文件的名称。如果不输入,则以默认名“未标题-1”为名。

预设:在该选项的下拉列表中存放了很多预先设置好的文件尺寸,如图2-14所示。用户可以根据自己的实际情况进行选择。

宽度/高度:该选项用来设定新建图像的宽度和高度,可以在文本框中输入具体数值;并且在输入数值之前应先确定文档尺寸的单位,然后在后面的文本框选择相应的单位。

分辨率:该选项可以用来设置图像的分辨率。根据作品的不同用途来设定,通常使用的单位为像素/英寸。图2-13图2-14

颜色模式:该选项可以用来设定图像的色彩模式,共有5种颜色模式供选择,可以从右侧的列表框中选择色彩模式的位数,其中包括1位、8位、16位和32位等4种选择。位数越高,图像的质量越高,但是对系统的要求也越高。

背景内容:在该选项的下拉列表中可以选择新图像的背景层颜色,其中包括白色、背景色和透明3种方式,效果如图2-15所示。另外,在选择“背景内容”选项之前应设置好工具箱中的背景色。图2-15

颜色配置文件:该选项可以用来设定当前图像文件要使用的色彩配置文件。

像素长宽比:该选项主要在图像输出到电视屏幕时起作用。电脑显示器上的图像是由方形像素组成的,当要输出用于视频的图像时,才会选择其他选项。图2-16

存储/删除预设:单击“存储预设”按钮,弹出“新建文档预设”对话框,如图2-16所示。输入预设的名称并选择相应的选项,可以将当前设置的文件大小、分辨率、颜色模式等创建为一个预设,使用时只需要在“预设”下拉列表中选择该预设即可;同时也可以使用“删除预设”按钮删除预设。

图像大小:用来显示新建文档的大小。2.3.3 打开文件

如果想将一个已有的图像放在Photoshop CC中进行编辑或调整等操作,首先需要将其打开。

在Photoshop CC中打开文件的方法有很多,既可以使用命令打开,也可以使用快捷键Ctrl+O打开,还可以直接将图像拖至软件界面中打开,用户可根据实际情况进行相应的选择。2.3.4 保存文件

在Photoshop CC中创建新文件、对文档进行编辑或者调整等相关操作后,应及时保存处理后的结果,避免因为断电或者死机等原因造成不必要的丢失。

需要保存正在编辑文件的操作,可执行“文件>存储”命令,或者按快捷键Ctrl+S对文件进行保存,图像会按照原有的格式存储;如果是新建的文件,则会自动弹出“存储为”对话框。

如果要将文件保存为新的名称和其他格式,或者存储到其他位置,可执行“文件>存储为”命令,或者按快捷键Shift+Ctrl+S,弹出“存储为”对话框将文件另存。2.3.5 导入文件

在Photoshop CC中,“导入”命令可以将视频帧、注释和WIA支持等内容导入到打开的文件中,因此,通过这种方法可以将外部文件合并在一起。

如果电脑配置有扫描仪并安装了相关软件,则可以在“导入”下拉菜单中选择扫描仪的名称,使用扫描仪扫描图像并将图像保存,然后再在Photoshop中打开;另外,对于数码相机中的图像文件,由于某些数码相机是使用“Windows图像采集”(WIA)导入图像,可以将数码相机连接到电脑,然后执行“文件>导入>WIA支持”命令,即可将照片导入到Photoshop CC中。执行“文件>导入”命令,在弹出菜单中包含了用于导入文件的命令,如图2-17所示。图2-17

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载