网页设计PS.docx
- 文档编号:29855470
- 上传时间:2023-07-27
- 格式:DOCX
- 页数:13
- 大小:1.04MB
网页设计PS.docx
《网页设计PS.docx》由会员分享,可在线阅读,更多相关《网页设计PS.docx(13页珍藏版)》请在冰豆网上搜索。
网页设计PS
网页设计PS
PhotoshopCS5网页设计
00课程介绍2
01创建文档2
02缩放与抓手工具3
03使用图形工具构画简单的图形4
04利用渐变工具创建渐变效果11
05文字工具的使用17
06工作区21
07理解图层24
08图层样式127
09图层样式230
10画笔工具36
11使用图片素材44
12图层蒙版与剪贴蒙版47
13创建镜像效果52
14图层的融合58
15创建页面之间阴影分隔线62
16设计网站的菜单背景(两个图层的合并)65
17设计漂亮的按钮70
18理解图片格式78
19使用切片工具分割设计好的网站页面81
网页设计PS
00课程介绍
Photoshop
是目前被广泛使用的图形处理软件,在这个课程里我们会从最简单的创建文档开始,然后在
了解常用的工具去勾画简单的图形,为文字添加效果,为图形添加样式,帮助不同的图片融
合在一起,介绍一些流行的网页设计效果,最后将用photoshop去设计一个漂亮的网页。
01创建文档
首先打开photoshopcss5用ctrl+n或者点击左上角的文件下的"新建”按钮创建一个文档,弹出一个对话框。
在名称中输入“演示网页”,在预设中选中“web”。
大小设为1280*1680
像素,其他设置不变。
如下图所示:
这样就得到一个空白的文档,photoshop提供了很多了工具,但网页设计只要用到其中很小
的一部分工具和功能就能完成大部分的工作。
网页设计PS
选中图层,然后按组合键alt+backspace键,即可将选中的颜色铺在创建空白文档上。
如下
图所示
02缩放与抓手工具
在设计网页时,常常需要放大显示页面来调整一些细节,并且需要查看页面的不同位置,
也会要缩小页面来查看一下网页设计的全局,这里就要用到缩放和抓手工具。
网页设计PS
缩放工具
可以改变设计页面预览的比
例。
可以在工具栏看到缩放工具,选中之后可以看到一个放大镜样的图标,点击鼠标左键后就可以放大设计页面显示比例。
了。
可以按住alt键,然后滚动鼠标的
可以先选中缩放工具
滑轮,在放大和缩小之间来回的切换。
如果想查看页面的实际尺寸,
网页设计PS
,然后点击工具属性栏中的“实际像素”或者“适合屏幕”按钮,就可以看到页面的实际尺寸,或者用快捷键ctrl+0。
如下图所示:
当设计页面大于可视窗口时,就要用到抓手工具
来万便的浏览页面的不同位置,该工具的快捷键为h。
当启动抓手工具之后就可以用鼠标方便的拖拽页面。
下面来介绍下使用缩放工具和抓手工具的最佳方法。
无论在使用什么工具时,只要按住空格键就可以将当前工具切换为抓手工具。
然后,在按住空格键的
同时在按住alt键,抓手工具就会变为缩放工具,按住鼠标的左键左右拖动鼠标就可以放大和缩小页面(往左移动是缩小,往右移动是放大),松开alt键后就会变回抓手工具,松开空格键后又会变成之前使用的工具。
03使用图形工具构画简单的图形
图形工具是网页设计中常用到的工具之一,可以使用它勾画网页的布局,设计按钮等等。
在工具栏中可以看到图形工具。
右键点击该图标,如下图所示
首先选中一个矩形工具,然后在上方的颜色选框中选中想要的颜色,这里选中白色。
如下图
所示:
□□尸曰站13样式1st顏色:
按住鼠标左键拖动就可以创建边框。
如果想要创建一个正方形,按住shift键后在拖动鼠标。
如下图所示:
克*fl。
LI矣汩飙⑴笳IAJ低卅I瞅:
4|fl|igfl•Mi•M*耳
■'CO世u少3(・・••才■・□-」『E*(]杆衣0”
■王.示i玉萍、计n軒八°
注意上图的右侧,除了一个绿色的背景图层外,还有一个形状图层,即之前创建的图层。
Ps允许将不同的元素放置在不同的图层上,这样就能方便的对不同的元素进行修改了。
这里继续看上图中的形状图层。
形状图层的左边显示的是这个图层的颜色,旁边是这个图层的
形状。
如果要改变这个图层的颜色,可以双击左边这个白色的图层,
然后在拾色器中选中要替换的颜色。
这里在创建一个新的图层。
新创建的图层一般都在最上面。
用鼠标在拖拽形成一个新的方(这里不能按住shift,否则会在原来的图层上继续创建一个正方形)。
如下图所示:
这里可以看到,新建的图层在图层i上面,覆盖了图层i的一个角,如果想让图层i在上面可以用鼠标选中图层1,网上拖动,拖动到图层2的上面即可,如下图所示:
如果不想要图层了,可以按住鼠标左键然后拖动要删除的图层到右下角的垃圾桶中。
如下图所示:
接下来选择一些其他的图形工具区创建一些图形。
右键点击图形工具,选中自定义图形工具,
如下图所示:
然后点击工具的属性栏中的下拉按钮,选中ps的图形库中所存在的图形,如下图所示:
八D口ooo/眞■伽:
iQQcj『«a|aTSI在点击旁边的小三角,可以看到更多的图形分类,如下图所示:
这里选中全部,可以显示出全部的图形。
这里我们选中一个小猫的图形,然后按住shift键,这样就能保证所创建图形的比例。
如下图所示:
再来看看其他图形工具。
这次我们选中“圆角矩形工具”,如下图所示:
U拒羽工具u
。
圆甬矩形工具uO橢團工具u
—爭边时工具U/肓线工具U
■X自走畛状工具U
选中这个工具之后,可以在工具属性栏中设置图形半径,半径就是圆角的大小,半径值越大
这个圆角也就越大。
这里可以先设定这个半径值为5px。
拖动鼠标,如下图所示:
可以看到下面新建的半径为40px的图形的四个圆角比之前5px的图形的四个圆角要更明显、更大些。
删掉这两个图层。
下面用圆角矩形工具画一个网页的主页面的布局,将半径设置为20px,颜色选为白色,然
后按住ctrl+O,将页面放置为适合的页面。
然后拖动鼠标再这个页面上创建一个主页面的圆角矩形,然后再用圆角矩形创建一个导航菜单的背景。
如下图所示:
更改下矩形的颜色,然后再将图层1移动到最上方,如下图所示:
最后,按住ctrl+s来保存这个文件。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 PS