第6章网页设计中按钮的制作及应用与呈现.ppt

第6章网页设计中按钮的制作及应用,第6章网页设计中按钮的制作及应用,,,,,,,,,一、按钮与网页的关系,按钮是网页中必不可少的基本控制部件，在各种网页中都少不了按钮的参与。因此在网页设计中按钮的设计也是十分重要的，通过它可以完成很多任务，以下将详细讲解按钮在网页中的作用以及与网页的关系。网页按钮一般可以分为动态按钮和静态按钮两种。它们出现的方式是多种多样的,可以是文字，可以是抽象或具象的图形，可以是普通的图片，也可以是其他网站和公司的产品标识或LOGO。,一、按钮与网页的关系,1、文字按钮 文字按钮在网页的布局中可以达到“线”或“点”构成元素的作用。无论是哪种构成元素，它所起到的作用都是平衡画面，简单地说，就是平衡画面的黑白关系、疏密关系、色彩关系等等。文字横向或是纵向的排列，使文字组合成为一个线性的元素，或是一个点的元素参与到网页的整体构图中，如图4-1所示。,一、按钮与网页的关系,1、文字按钮 白色按钮是以“线”的方式嵌入其中的，黑色的按钮是以“点”的方式，完成的效果如图4-2所示。,一、按钮与网页的关系,2、图片按钮 图片形式的按钮广泛应用在商业网页或是个人网页中。一般用于展示产品图片或是新闻索引，也可以体现出网页个性的一面。在网页的布局中，可以起到“面”或“点”构成元素的作用，如图4-3所示。其中图片所占位置起到了“面”的作用，使画面的黑白关系得到了调和。图片是产品的照片，连接后是单独产品的介绍，这种手法也是现代商业网页中较为常用的。,一、按钮与网页的关系,2、图片按钮 如图4-4所示，图片按钮是以“点”的形式出现在网页中的，按钮在网页中起到了平衡网页构图关系的作用。图片是一张新闻图片，主要是引导一个事件的说明。,一、按钮与网页的关系,2、图片按钮 在许多网页中，为了突出个性，往往会使用一些特殊的图片作为按钮，如图4-5所示。,一、按钮与网页的关系,3、图形按钮图形按钮也是网页中较为常见的一种按钮。与文字按钮类似，它在网页布局安排中起到的也是“点”或“线”的作用。图形按钮的样式较多，在这里把它分成由网页框架派生而出的图形按钮和相对独立的图形按钮两种。,一、按钮与网页的关系,3、图形按钮 (1)由网页框架派生出的图形按钮 这是网页中最为常见的一种按钮样式，它一般与网页的框架联系在一起，成为一个整体，如图4-6、图4-7所示。,一、按钮与网页的关系,(1)由网页框架派生出的图形按钮 在制作这种按钮时，注意按钮的颜色要与框架的颜色统一和谐，使其能够融入网页的框架之中。在形式上要符合网页整体的规划，这种依附于框架的按钮往往是由框架的形式所决定的。所以在制作之前要充分考虑框架与按钮的造型关系是否统一。,一、按钮与网页的关系,(2)相对独立的图形按钮 这也是网页中常见的按钮样式。但与上一种不同，它脱离了框架的依附而独立存在，这种按钮制作起来更为灵活，更能发挥设计者的想象力。它的造型一般来说不受限制，可以是椭圆形、矩形、三角形，更可以是一些不规则的形状，如图4-8、图4－9所示。,一、按钮与网页的关系,(2)相对独立的图形按钮 在图形按钮中，也有一些较难区分的按钮样式。这些按钮样式无疑会给网页带来另类的气息，更张扬了网页的个性，如图4-10、图4-11所示。,一、按钮与网页的关系,4、标识性按钮标识性按钮是商业网站中经常使用的一种按钮样式，应用十分普遍。尤其是在公司网页宣传、产品宣传等情况下应用较多。标识性按钮一般是一个公司的标识，也可是网站的logo、产品的商标等等。它的出现完全是为了宣传，所以对整个网页形象所起的作用不大，一般会以“点”的形式出现在网页之中，起到丰富网页内容的作用。在应用时，要注意它的出现尽量不要过于花哨，所占面积不能过大，若面积过大，会影响整个网页的风格布局。,一、按钮与网页的关系,4、标识性按钮 观察下面两张网页，第一个构图、颜色尚可，但是由于标识按钮过大，以至于网页没有重点。第二个虽然内容一样，但效果明显要好一些，因此各个部分的主从关系也是很重要的，如果没有特殊需要，按钮一般在构图中的体积应避免过大，起到点缀的作用即可，如图4-12、图4-13所示。,一、按钮与网页的关系,4、标识性按钮 在有些网站的设计中，把标题性的按钮放置在统一的地方，这种方法既可以突出按钮，又可以合理分割网页的构图，如图4-14所示。该网页把所有的标题按钮放在了网页的右 侧，不仅规划出 了按钮的区域， 使按钮更突出， 又合理安排了画 面，不至于使画 面过于凌乱。,一、按钮与网页的关系,5、按钮的混合运用各种按钮都有自身的特点，但并不是任何形式的按钮放在一起都是和谐的，在同一个网页中，主要按钮出现的形式不应超过三种。太多的形式会使网页显得过于杂乱，风格不统一。但即便是按钮的形式很少，也未必会达到统一的效果，使按钮在网页中和谐统一有以下几种方法。,一、按钮与网页的关系,5、按钮的混合运用 (1)以一种按钮为主,无论网页中有多少种按钮，只有一种形式的按钮是占绝大多数的，如图4-15所示。虽然网页中的按钮样式非常丰富，但数量及面积占大多数的只有左侧的一排按钮。,一、按钮与网页的关系,5、按钮的混合运用 (2)形式统一 为了让网页中的按钮和谐，这也是比较常用的手法，如图4-16、图4－17所示。这两个网页中无论是文字按钮、图片按钮，还是图形按钮都有着同样的颜色或被统一的颜色包围着，所以在视觉上非常和谐。,二、文字按钮的制作,文字按钮在网页中应用时，一定要注意不能喧宾夺主，游客会不自觉地把注意力集中到漂亮夺目的按钮上，网页最重要的内容却会被忽略。我们制作的是可以装饰网页的按钮，只要起到了点缀的作用即可。 1、一般按钮的制作,最终效果,二、文字按钮的制作,1、一般按钮的制作 步骤： (1)一新建一个200x100像素的背景层，将前景色设为白色。 (2)建一个图层，单击（圆角矩形）工具，将半径设为5像素，绘制一个圆角矩形路径。 (3)执行“编辑”→“描边”命令，描边宽度为1像素，颜色为黑色，如图4-18所示。,二、文字按钮的制作,1、一般按钮的制作 步骤： (4)双击“图层1”，弹出“图层样式”对话框，选择“内阴影”和“斜面和浮雕”选项，各项参数设置如图4-19所示。,二、文字按钮的制作,1、一般按钮的制作 步骤： (5)单击工具箱中的（魔棒）工具，在圆角矩形内部的空白部分单击，选中该空白部分，如图4-20所示。 单击（渐变）工具，选择线性渐变，将起始颜色设为灰色（R:199、G:196、B:196）终止颜色设为白色，在选区中拖动鼠标产生渐变效果。 (6)单击(横排文字)工具，输入“登录”，打开“字符”面板，设置文字效果，单击选择工具，移动文字至适当的位置，最终效果如前所示。,二、文字按钮的制作,2、立体按钮制作,最终效果,二、文字按钮的制作,2、立体按钮制作 步骤： (1)新建一个文档，大小为200x100像素，然后新建一个图层。 (2)建一个图层，单击（圆角矩形）工具，将半径设为5像素，绘制一个圆角矩形路径。 (3)将路径转换为选区，并填充颜色（R:104、G:244、B:72）。效果如下左图，并自由变换效果如右图：,二、文字按钮的制作,2、立体按钮制作 步骤： (4) 单击（自由钢笔）工具，在按钮的上部勾勒一条路径，然后转化为选区，新建一个图层，用白色填充选区，效果如图4-28所示。,二、文字按钮的制作,2、立体按钮制作 步骤： (4) 单击（自由钢笔）工具，在按钮的上部勾勒一条路径，然后转化为选区，按delete键删除选中的区域。效果如图所示：,二、文字按钮的制作,2、立体按钮制作 步骤： (5)将渐变设为从前景色到透明，从选区的顶部到底部做出渐变，取消选择，如图4-31所示。,二、文字按钮的制作,2、立体按钮制作 步骤： (6)在图形右下脚用钢笔工具画出条形选区，将渐变设为从黑色到透明，从选区的顶部到底部做出渐变，取消选择，如图所示。,二、文字按钮的制作,2、立体按钮制作 步骤： (7)合并除背景层以外的图层。选中合并后的图层，单击右键弹出“图层样式”对话框，选中“投影”复选框。 (8)添加文字图层，输入“Home”，将它移至“图层1”之上，复制文字层，将底部的文字层填充为和按钮相同的颜色，图层混合模式为“颜色减淡”，用半径为1.0像素的高斯滤镜稍加模糊，再将上部文字图层的不透明度设为60％。最终效果如前。,三、图形按钮的制作,最终效果,三、图形按钮的制作,步骤：,投影,四、动态按钮的制作,动态按钮在网页中具有不可替代的作用，它的特点是醒目，能丰富活跃页面，吸引浏览者。能传达更多的信息，对浏览者有导向作用。那么怎样才能使按钮动起来？在PhotoshopCS中要切换到ImageReady界面制作Gif动画，或者利用“翻转”命令的6种状态制作翻转按钮，下面举两个例子来说明动态按钮的制作以及在网页中的运用。,四、动态按钮的制作,1、翻转按钮的制作,最终效果,四、动态按钮的制作,1、翻转按钮的制作 步骤：,四、动态按钮的制作,1、翻转按钮的制作 步骤：,图层样式内发光,四、动态按钮的制作,1、翻转按钮的制作 步骤：,图层样式描边,四、动态按钮的制作,1、翻转按钮的制作 步骤：,复制,四、动态按钮的制作,1、翻转按钮的制作 步骤：切换到ImageReady界面，制作翻转按钮，翻转按钮可以根据不同的情况制作六种不同 的图像。 Normal：初始化图像。 Over：鼠标指针移入翻转按钮区域时显示的图像。 Down：按下鼠标左键时显示的图像。 Click：单击鼠标时显示的图像。 Out：鼠标指针移出翻转按钮区域时显示的图像。 Up：单击鼠标右键或双击鼠标时显示的图像。 在翻转按钮制作时使用几个状态取决于页面风格的需求。,四、动态按钮的制作,1、翻转按钮的制作 步骤：用切片工具，分割出五个按钮区域，我们选择其中一个切片区域，进行状态设置，在翻转面板中设置Over状态，切换到Photoshop界面，在“图层样式”对话框中调整按钮颜色，效果如图4-56所示。,四、动态按钮的制作,1、翻转按钮的制作 步骤：设置Down状态，如图4-57所示，切换到Photoshop界面，在“图层样式”对话框中调整按钮颜色，去掉“渐变叠加”选项，勾选“颜色叠加”选项，设置参数如图4-58所示。,四、动态按钮的制作,1、翻转按钮的制作 步骤：依次把其他按钮制作好，在ImageReady界面中，执行“文件”→“存储优化结果”命令保存，就可以在IE浏览器观看翻转按钮的效果了。用在网页中的效果如图4-60所示。,四、动态按钮的制作,2、GIF动态按钮的制作 使用GIF动画制作动态按钮是网页中经常用到的手法，一般在ImageReady中进行编辑，它是利用两张以上的图片进行简单的转换，循环播放，从而使网页具有动感和活力。 步骤：1/调入网页背景图片,四、动态按钮的制作,2、GIF动态按钮的制作 步骤：选择与反相,二、文字按钮的制作,4、动态按钮的制作 (2) GIF动态按钮的制作 步骤：编辑动画祯后存储优化结果,五、综合实例,最终效果,五、综合实例,步骤：,背景填充颜色 （R:2、G:124、B:110） 矩形填充颜色 （R:117、G:195、B:162） 描边2像素填充色 （R:3、G:100、B:89）,渐变（R:240、G:245、B:244）,五、综合实例,步骤：,白色描边3像素,五、综合实例,步骤：,图层样式投影,五、综合实例,步骤：,五、综合实例,步骤：,投影与描边（R:104、G:21、B:46）,五、综合实例,步骤：,五、综合实例,步骤：标识的制作。新建图层后单击（自定形状）工具，在属性栏上单击形状后的下三角按钮，在形状下拉列表中选择“月亮”形状，在网页中拖出该形状，在“路径”面板上转换为选区，填充颜色为（R:70、G:210、B:144）。 双击标识图层，在弹出的“图层样式”对话框中勾选“投影”、“斜面和浮雕”复选框，得到如图4-86所示的效果。,五、综合实例,步骤：单击（文字）工具，在网页文件中输入“月亮湾摄影中心”字样，在“字符”面板上调整字体的样式、大小、颜色、字间距，其中字体的颜色设置为（R:157、G:250、B:211），效果如图4-88所示。,五、综合实例,步骤：,绘制按钮,五、综合实例,步骤：在网页中拖出“新月框”形状，在路径面板上转换为选区，填充颜色为（R:5、G:105、 B:94），双击“新月框”图层，在弹出的“图层样式”对话框中勾选“斜面和浮雕”复选框， 参数设置如图4-91所示。在图层面板上复制3个“新月框”图层，并将其内容分别移至相应 的位置，效果如图4-92所示。,Thank You !,www.themegallery.com,