Photoshop CS5 网页设计

PhotoshopCS5网页设计目录00课程介绍.....................................................................................................................................201创建文档.....................................................................................................................................202缩放与抓手工具.........................................................................................................................303使用图形工具构画简单的图形.................................................................................................404利用渐变工具创建渐变效果...................................................................................................1105文字工具的使用.......................................................................................................................1706工作区......................................................................................................................................2107理解图层...................................................................................................................................2408图层样式1...............................................................................................................................2709图层样式2...............................................................................................................................3010画笔工具...................................................................................................................................3611使用图片素材...........................................................................................................................4412图层蒙版与剪贴蒙版...............................................................................................................4713创建镜像效果...........................................................................................................................5214图层的融合...............................................................................................................................5815创建页面之间阴影分隔线.......................................................................................................6216设计网站的菜单背景（两个图层的合并）...........................................................................6517设计漂亮的按钮.......................................................................................................................7018理解图片格式...........................................................................................................................7819使用切片工具分割设计好的网站页面....................................................................................8100课程介绍Photoshop是目前被广泛使用的图形处理软件，在这个课程里我们会从最简单的创建文档开始，然后在了解常用的工具去勾画简单的图形，为文字添加效果，为图形添加样式，帮助不同的图片融合在一起，介绍一些流行的网页设计效果，最后将用photoshop去设计一个漂亮的网页。01创建文档首先打开photoshopcss5用ctrl+n或者点击左上角的文件下的“新建”按钮创建一个文档，弹出一个对话框。在名称中输入“演示网页”，在预设中选中“web”。大小设为1280*1680像素，其他设置不变。如下图所示：这样就得到一个空白的文档，photoshop提供了很多了工具，但网页设计只要用到其中很小的一部分工具和功能就能完成大部分的工作。第一个任务是更改背景颜色。选中拾色器，选中颜色。如下图所示：选中图层，然后按组合键alt+backspace键，即可将选中的颜色铺在创建空白文档上。如下图所示：按快捷键ctrl+s保存。02缩放与抓手工具在设计网页时，常常需要放大显示页面来调整一些细节，并且需要查看页面的不同位置，也会要缩小页面来查看一下网页设计的全局，这里就要用到缩放和抓手工具。缩放工具可以改变设计页面预览的比例。可以在工具栏看到缩放工具，选中之后可以看到一个放大镜样的图标，点击鼠标左键后就可以放大设计页面显示比例。如果想缩小页面显示比例，可以点击左上角的图标，在点击鼠标左键就可以缩小页面的显示比例了。可以按住alt键，然后滚动鼠标的滑轮，在放大和缩小之间来回的切换。如果想查看页面的实际尺寸，可以先选中缩放工具，然后点击工具属性栏中的“实际像素”或者“适合屏幕”按钮，就可以看到页面的实际尺寸，或者用快捷键ctrl+0。如下图所示：当设计页面大于可视窗口时，就要用到抓手工具来方便的浏览页面的不同位置，该工具的快捷键为h。当启动抓手工具之后就可以用鼠标方便的拖拽页面。下面来介绍下使用缩放工具和抓手工具的最佳方法。无论在使用什么工具时，只要按住空格键就可以将当前工具切换为抓手工具。然后，在按住空格键的同时在按住alt键，抓手工具就会变为缩放工具，按住鼠标的左键左右拖动鼠标就可以放大和缩小页面（往左移动是缩小，往右移动是放大），松开alt键后就会变回抓手工具，松开空格键后又会变成之前使用的工具。03使用图形工具构画简单的图形图形工具是网页设计中常用到的工具之一，可以使用它勾画网页的布局，设计按钮等等。在工具栏中可以看到图形工具。右键点击该图标，如下图所示：首先选中一个矩形工具，然后在上方的颜色选框中选中想要的颜色，这里选中白色。如下图所示：按住鼠标左键拖动就可以创建边框。如果想要创建一个正方形，按住shift键后在拖动鼠标。如下图所示：注意上图的右侧，除了一个绿色的背景图层外，还有一个形状图层，即之前创建的图层。Ps允许将不同的元素放置在不同的图层上，这样就能方便的对不同的元素进行修改了。这里继续看上图中的形状图层。形状图层的左边显示的是这个图层的颜色，旁边是这个图层的形状。如果要改变这个图层的颜色，可以双击左边这个白色的图层，然后在拾色器中选中要替换的颜色。这里在创建一个新的图层。新创建的图层一般都在最上面。用鼠标在拖拽形成一个新的方形（这里不能按住shift，否则会在原来的图层上继续创建一个正方形）。如下图所示：这里可以看到，新建的图层2在图层1上面，覆盖了图层1的一个角，如果想让图层1在上面可以用鼠标选中图层1，网上拖动，拖动到图层2的上面即可，如下图所示：如果不想要图层了，可以按住鼠标左键然后拖动要删除的图层到右下角的垃圾桶中。如下图所示：接下来选择一些其他的图形工具区创建一些图形。右键点击图形工具，选中自定义图形工具，如下图所示：然后点击工具的属性栏中的下拉按钮，选中ps的图形库中所存在的图形，如下图所示：在点击旁边的小三角，可以看到更多的图形分类，如下图所示：这里选中全部，可以显示出全部的图形。这里我们选中一个小猫的图形，然后按住shift键，这样就能保证所创建图形的比例。如下图所示：再来看看其他图形工具。这次我们选中“圆角矩形工具”，如下图所示：选中这个工具之后，可以在工具属性栏中设置图形半径，半径就是圆角的大小，半径值越大这个圆角也就越大。这里可以先设定这个半径值为5px。拖动鼠标，如下图所示：在将半径改为40px。拖动鼠标，如下图所示：可以看到下面新建的半径为40px的图形的四个圆角比之前5px的图形的四个圆角要更明显、更大些。删掉这两个图层。下面用圆角矩形工具画一个网页的主页面的布局，将半径设置为20px，颜色选为白色，然后按住ctrl+0，将页面放置为适合的页面。然后拖动鼠标再这个页面上创建一个主页面的圆角矩形，然后再用圆角矩形创建一个导航菜单的背景。如下图所示：更改下矩形的颜色，然后再将图层1移动到最上方，如下图所示：最后，按住ctrl+s来保存这个文件。04利用渐变工具创建渐变效果这里我们来学习一个网页设计师长要用到的渐变工具，渐变就是从一种颜色过渡到另外一种颜色，使用ps可以创建出比较复杂的渐变效果。在工具栏中可以找到这个渐变工具，右键点击该图标，选中渐变工具。如下图所示：在文件中选中“新建”，点击确定，创建一个新的文档。在工具的属性栏中可以选中渐变的类型，默认的类型是线性渐变，也就是从一种颜色平行的过渡到另外一种颜色。如下图所示：在前景色和背景色中可以指定渐变的两种颜色。这里我们选中两种颜色。在拾色器中首先选中前景色为一种潜绿色，在选中后景色为一种深绿色。在将鼠标放置在渐变开始的位置。拖动鼠标，如下图所示：松开鼠标，如下图所示：这样就得到了一个简单的由浅绿色过渡到深绿色的线性渐变。下面来创建一个更加复杂的渐变。在工具属性栏中点击下拉的三角形，这里都是ps定义好的预设，选择这里面的预设可以创造出不同的渐变效果。如下图所示：之