1、图像局部截取和图像尺寸调整
做网页设计时经常要用到的某张图像一部分,这就需要截取图像的局部。图像局部截取的方法很多,但使用Photoshop操作起来更方便。具体操作步骤如下:
(1)在Photoshop中打开原始图像;
(2)在工具栏中选择相应的选区工具,如矩形选框工具或椭圆选框工具,在图像上需要截取的局部建立选区。为了截取更精确,通常在选择选区工具以后,在工具选项栏中“样式”里设定选区的尺寸,如“固定大小”,并设定宽度和高度值,这样单击图像就可以建立固定尺寸的选区;
(3)建立好选区后,可以将鼠标按住选区内部拖拽移动选区位置,使截取的内容符合需要;
(4)单击菜单“编辑-拷贝”或者我们熟悉Ctrl+C复制选区内容;
(5)单击菜单“文件-新建”或按下快捷键Ctrl+N新建画布,此时画布的尺寸默认就是选区的尺寸,单击菜单“编辑-粘贴”或按下快捷键Ctrl+V将选区内容粘贴到新画布中;
(6)在新文件图像中根据需要进一步操作,如添加文字等,最后将新文件保存。
注:图像尺寸的调整也是网页设计中的常用操作,网页中的图像文件大小在保证清晰度的情况下应该尽量小,不然会影响网页打开速度,所以页面中用到的图像都有调整到相应尺寸。在Photoshop中打开图像,单击“图像-图像大小”菜单或者Ctrl+Alt+I进行尺寸修改,调整完后保存即可。
2、透明背景图像的制作
有些图像放在网页中需要背景透明才能达到效果,比如在已有背景色的区域放置一个图像,这个图像只有背景透明才能融合在区域中。在Photoshop中制作透明背景图像可以通过以下步骤来操作:
(1)在Photoshop中打开原图像,使用选取工具将需要保留的图像部分选中,如果原图像背景色单一,可以使用魔棒工具很方便地选取背景色,然后单击菜单“选择-反向”反向选中需要保留的部分;
(2)单击菜单“编辑-拷贝”或按下快捷键Ctrl+C复制选区内容,单击菜单“文件-新建”或按下快捷键Ctrl+N新建画布,注意新建画布的“背景内容”项选择“透明”;
(3)单击菜单“编辑-粘贴”或按下快捷键Ctrl+V将选区内容粘贴到新画布中;
(4)按下快捷键Ctrl+T适当调整粘贴内容的尺寸,调整完后按回车键,还可以使用移动工具调整内容的位置;
(5)单击菜单“文件-存储”或按下快捷键Ctrl+S保存为gif或png格式文件。
3、图像融合
图像融合是指将两张或更多的图像合成一张图像,这个操作在网页设计中也经常用到,比如给网页做个banner图像或背景图像等,下面以两张相同高度图像拼接融合为例来说明操作过程,基本步骤如下:
(1)在Photoshop中打开第一张图像,然后使用移动工具将第二张图像拖进来并调整到合适的摆放位置;
(2)如果两张图像的色调不太一致,可以对色相、饱和度等属性进行调整;
(3)选择第二张图像所在图层,建立蒙版,选择渐变工具从两张图像的结合处拖拽形成黑白渐变,再适当调整不透明度。
4、图像倒影和阴影制作
图像倒影效果在网页中也很常见,倒影不仅增强图像的立体感觉,也使得图像表现力更强。倒影效果一般分为平面倒影和立体倒影,平面倒影的制作可以通过以下步骤实现:
(1)在Photoshop中将需要做倒影的素材导入文档,按下快捷键Ctrl+J复制该图层;
(2)单击菜单“编辑-变换-垂直翻转”将翻转的图层拖至原始图层的下方;
(3)为翻转的图层添加图层蒙版,选中渐变工具并选择线性渐变,在图层蒙版上拖出渐变就产生了倒影效果。
阴影效果也是常用的图像效果,具体实现步骤如下:
(1)把需要做阴影效果的图层复制并建立选区,填充为黑色;
(2)按下快捷键Ctrl+T并右键单击鼠标选择“扭曲”,拖动鼠标调整阴影的形状和大小;
(3)减少阴影图层的透明度,然后单击菜单“滤镜-模糊-高斯模糊”,再把阴影图层放置在原图层的下面。
5、特殊字体的使用
文字是图像处理中频繁使用的元素,网页设计中的图像上通常都需要添加一些文字内容,如广告宣传语、导航文字等。文字的添加可以使用Photoshop的文字工具来完成,通常图像上的文字都采用特殊字体,而计算机中默认情况下却都不具备这些字体,这就需要我们去网上下载所需字体并安装在计算机中才能使用。举例说明,比如我们要在图像上添加一种“方正粗倩简体”的文字,很明显,计算机中默认没有该字体,我们必须进行以下步骤操作:
(1)从网上下载“方正粗倩简体”字体。可以在百度中搜索“字体下载”关键字,很多网站都提供字体下载;
(2)安装字体。下载的字体通常是一个.ttf格式的文件,直接复制该文件,打开C:WindowsFonts文件夹并进行粘贴,这样就完成了字体安装;
(3)重启Photoshop软件,可以看到字体列表中就有了新安装的字体,当然,计算机中的其他软件都可以使用这种字体。当然如果你有能力的话也可以自己设计字体,但是对一些初中级的学生来说,下载是最好的办法了,省去了很多时间,你懂的!
6、绘制网站LOGO
网站标志或称LOGO,它是一个网站的名片,是能够体现网站形象的一个重要元素。一个好的网站LOGO能够体现出网站的内涵并能传递给浏览者一些关于网站的理念信息。一般来说,网站LOGO的设计是很重要的,它不仅要契合网站同时也要独具个性,能吸引网站浏览者。网站LOGO可以采用Photoshop软件进行绘制,具体可以采用以下步骤:
(1)新建画布,使用钢笔工具大致勾画出LOGO轮廓路径;
(2)选择“转换点工具”,将某些直线路径转换为曲线并调整相应的弧度;
(3)选择“直接选择工具”,根据需要移动一些锚点的位置,通过曲线弧度调整逐步达到设计效果;
(4)按下快捷键Ctrl+Enter,将路径转换为选区,然后对选区进行填充;
(5)根据需要添加文字等内容并保存文档。
7、网页绘制和切图
Dreamweaver等网页设计软件在图像处理方面的功能很弱,只使用该软件进行网页设计会给网页美观带来局限性,所以通常先采用图像处理软件绘制网页效果图,然后采用切图等手段转换为网页。绘制网页的工具很多,Photoshop是一个很不错的选择,方法如下:
(1)首先新建一个画布,在当前普遍1024*768以上分辨率的情况下,画布的宽度设为1002像素以内就能保证用户打开网页时不会出现水平滚动条,画布高度根据网页实际内容需要设定,接下来在新建的画布上绘制网页的界面,网页各个部分采用分层和分组,便于修改。
(2)网页绘制好后,需要利用切片工具和切片选择工具对图像进行分割,切割图像的原因是在浏览器中,一组小幅图像比单个大幅图像下载起来要快速得多,而且也便于网页在Dreamweaver软件中编辑。网页切片时一般要借助辅助线作为参考以确保切图的精确程度,网页中输入的文字部分在切图时可以先隐藏。
(3)单击菜单“文件-存储为Web和设备所用格式”来保存文件,Photoshop会自动生成一个名为images的文件夹用于存放所有图片。
8、各式线条的使用
线条在网页设计中是不可或缺的元素,线条应用得当会使网页布局清晰、层次分明,比如曲线增强网页的灵活性和流动性,具有时尚感、飘逸感,而直线的应用则使网页显得简洁、大方和严谨,不同线条的使用会起到意想不到的效果。一般来说,网页设计中经常用到直线、曲线、虚线和立体分割线等,下面我们简单介绍一下:
(1)直线
在Photoshop中绘制直线一般有两种方法,一种是使用画笔工具或铅笔工具,根据直线粗细需要设置好主直径,按住鼠标进行绘制,如果要绘制水平或垂直直线,需要按住Shift键然后绘制。
(2)曲线
Photoshop中绘制曲线一般会用到钢笔工具、转换点工具和直接选择工具等,先用钢笔工具画出大致路径,再用转换点工具将直线变为曲线并调整弧度,如果锚点的位置需要移动,则再使用直接选择工具移动,最后得到满意的曲线。
(3)虚线
绘制虚线一般使用画笔工具或铅笔工具,根据要绘制的虚线的粗细选择画笔的主直径,然后设置画笔属性面板中的“间距”值,这样就可以绘制出虚线,如果要绘制水平或垂直虚线还可以在绘制时按住Shift键。
(4)立体分割线
优秀的网站设计在细节方面的处理都是照顾十分周全的,立体分割线看起来有一种凹进去的感觉,形成一种很好的分隔的感觉。立体分割线其实是由两条粗细均为1px的直线组成的,首先绘制一条比背景色暗的直线,然后再绘制一条比背景色亮的直线,线条色彩可选用与背景色同一色系的颜色,两条线并列排在一起,形成立体凹陷的感觉。
9、背景图片制作
在制作网页的时候,经常需要给网页设置背景图片。除了可以到网上下载背景图片外,利用Photoshop强大的功能也同样可以制作出自己喜爱的背景图案。自制的背景图像种类很多,这里以制作一种无缝图案背景为例来说明:
具体操作步骤如下:
(1)打开Photoshop,新建宽160、高120,背景为白色,分辨率为72像素/英寸的空白文档;
(2)在工具箱中选择自定义形状工具并找到图1中所示的形状,在画布中间绘制出该形状,绘制时可按住Shift键保持同宽高比例,然后将绘制的形状放在文档的正中间;
(3)复制形状图层,对复制的图层执行菜单“滤镜-其他-位移”命令,完成图案的位移操作。位移的“水平”和“垂直”参数值是根据图像尺寸来设置的,一般为图像“宽度”和“高度”值的一半,本例“水平”设置为80,垂直设置为60。设置完后图像如图2所示;
(4)执行菜单“文件-存储”命令,将文件存储为GIF格式的图像。打开Dreamweaver软件,将该图像以背景图片平铺在网页中,可以看到网页背景的效果。
10、按钮制作
按钮是网页设计中常用的元素,经常用在导航、跳转等链接位置。设计精美的按钮能让网站浏览者眼前一亮,目前网页中常用的按钮一般都带有一些立体、渐变效果,这类按钮可以大致通过以下几步来实现:
(1)在Photoshop中新建画布,绘制一个圆角矩形;
(2)双击该圆角矩形图层面板,打开图层属性窗口,单击勾选左侧“斜面和浮雕”选项,并在右侧设置相应的属性值;
(3)单击勾选左侧“渐变叠加”选项,在右侧设置渐变颜色及其他属性值;
(4)单击勾选左侧“描边”选项,在右侧设置描边颜色、粗细、位置、不透明度等属性值;
(5)选择文字工具,在按钮上添加文字并设定文字样式等。通过这些设置能做出满足一般需求的立体渐变效果按钮,更多的效果可以在图层属性里面继续设置,如内阴影、外发光等。
另外,网页中有些按钮当鼠标放上去时换成另外一个按钮,两个按钮大小一致,区别就在颜色或文字颜色上。其实第二个按钮的制作很简单,只要把第一个按钮的图层复制,修改背景色或文字颜色即可。