常用软件Photoshop在网页设计中的应用与方法
小标 2018-03-06 来源 :网络 阅读 803 评论 0

摘要:现在已经进入数字化信息时代,随着网络的飞速发展,人们的生活逐渐迈向了新时代,无法想象,哪天没有了网络会怎样,呵呵,开个玩笑了,网络只会一天比一天精进,所以网络知识的普及是必须的!

现在已经进入数字化信息时代,随着网络的飞速发展,人们的生活逐渐迈向了新时代,无法想象,哪天没有了网络会怎样,呵呵,开个玩笑了,网络只会一天比一天精进,所以网络知识的普及是必须的!


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)选择文字工具,在按钮上添加文字并设定文字样式等。通过这些设置能做出满足一般需求的立体渐变效果按钮,更多的效果可以在图层属性里面继续设置,如内阴影、外发光等。

另外,网页中有些按钮当鼠标放上去时换成另外一个按钮,两个按钮大小一致,区别就在颜色或文字颜色上。其实第二个按钮的制作很简单,只要把第一个按钮的图层复制,修改背景色或文字颜色即可。


本文由职坐标整理并发布,了解更多内容,请关注职坐标常用软件Photoshop频道!


本文由 @小标 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程