You are on page 1of 3

信息与电脑

软件开发与应用 China Computer&Communication 2018 年第 1 期

Photoshop 在网页制作中的应用研究
刘红勤

(海南省工业学校,海南 定安 571200)

摘 要:在配合 Photoshop 进行网页美工设计期间,需要运用的知识点和技能很多,如颜色的协调性搭配、版面的


妥善性布局和人机交互过程的繁简特性等,都要设计工作人员预先规划。笔者主要在强调 Photoshop 在网页设计中应用
的规范原则基础上,结合实际探讨 Photoshop 在网页制作中的可靠应用措施。
关键词:Photoshop;网页制作;特殊字体
中图分类号:TP393.092;TP317.4  文献标识码:A  文章编号:1003-9767(2018)01-104-03

Research on the Application of Photoshop in Web Page Making

Liu Hongqin

(Hainan Industrial School, Ding’an Hainan 571200, China)

Abstract: For web page design during the cooperation with Photoshop, need to use the knowledge and skills really many, proper
layout coordination such as the collocation of color, layout, and human-computer interaction process simplified characteristics, is
necessary to design staff to improve pre planning. The main task of the author is to emphasize the application of Photoshop in the
design of web pages on the basis of the norms of principles, combined with the actual discussion of Photoshop in web production in the
reliable application of measures.
Key words: Photoshop; webpage making; special fonts

自从我国步入信息化时代之后,社会大众开始全方位 着缜密关联,包括表现形式的交相呼应、页面呈现风格的一
关 注 网 页 制 作 水 平。 相 比 之 下,Photoshop 应 用 于 网 页 制 致性等 [1]。这样一来,用户的视觉与心理等感官需求才能得
作工序流程,能够取得便利、快捷、精确的控制效果,同 到同步满足,感到整个页面浑然一体。
时能够迎合民众日渐多元化的审美需求,因此值得日后大
1.2 合理的造型组合模式
力推广。
利用 Photoshop 进行网页制作,为进一步凸显主题内
1 Photoshop 应用于网页制作中需要注意的规范原则 涵,最不可小觑的支持因素便是造型。画面上任何元素都

1.1 充实的画面内容 属于画面的基础性构成要素,尤其是点线面之间的搭配组
合。通常状况之下,能够运用的组合方式十分多,包括反
网页的画面设计工作要遵循严密性的规范守则,它要求
射、归纳、连续、重叠、交叉、韵律等,它们的特点各异。
技术人员在筛选与充实画面中各类元素的过程中,全面贯彻
在实际设计过程中,技术人员应保证结合实际选择适当的
落实统一、连贯、分割、对比、和谐的控制理念。 [2]
方式,目的是更加深刻表现主题内涵 。特别是经过点线
首先,统一性。其主张维持作品本身的整体一致状态,
面协调性融合之后,能够突出页面之中一系列重要元素以
任何作品想要被认可和推广应用,前提保障就是呈现出理想
及强化美感。长此以往,令网页制作企业的技术实力得到
化的整体应用效果。因此,在制作网页过程中,技术人员切
更多人员的认可,进一步为企业赢得更加理想化的形象与
不可盲目地孤立分散有关组成机理,否则只会令整个画面呈
地位。
现出凌乱无序的状态。
1.3 自然的色彩运用
其次,连贯性。即强调页面之间的相互关系。网页制作
过程中,内部不同类型的组成元素,在内容方面势必会存在 色彩是美丽与多元化的,其可以调动人员内心极为深刻

作者简介:刘红勤(1981-),女,河南驻马店人,本科,讲师。研究方向:中职计算机应用。

— 104 —
信息与电脑
2018 年第 1 期 China Computer&Communication 软件开发与应用

的感知欲望,如红色代表热情、象征生命力,黄色寓意高贵 现效果,需要维持背景透明状态,如在已保留背景色的位置
华丽,绿色映射出自然、和平等。实际上任何色彩都是借助 插入一类图像,这类图像只有在保证背景透明时才能更加自
红黄蓝这三类原色混合形成。由于颜色是透过光折射产生的, 然地在区域之中融合。而在借助 Photoshop 程序制作透明背
因此技术人员可以考虑借助颜色变化来体现光影效果,进一 景图像过程中,则需要依次完成以下环节。
步使网页制作成品更加贴合现实。 首先,在 Photoshop 程序之中打开图像资源,并借助选
区工具选定当中需要保留的图像,也就是抠图。如若此时原
2 Photoshop 在网页制作中的应用措施
图背景色过于单调,则可以考虑配合魔棒工具灵活选取背景
2.1 图像局部截取和尺寸的调试 色,操作完毕之后则操作选择 - 反向菜单,处理需要保留的
部分。
在制作网页过程中势必会用到某类图像的一部分,此时
其次,单击编辑 - 拷贝菜单复制选区内容,之后再单击
就需要技术人员截取图像局部,此时 Photoshop 软件应用的
文件 - 新建菜单来新建画布。需要注意的是,其间新建画布
便利灵活性便得到充分凸显,具体的处理细节将表现为以下
的背景内容要维持透明状态,确认无误之后,再单击编辑 -
几方面。
粘贴菜单来将选区内容融入新画布之中。
第一,在 Photoshop 程序之中打开原始图像资源。
再次,适度调整粘贴内容的尺寸,之后按压回车键,并
第二,在工具栏之中选定必要的工具,包括矩形或是
利用移动工具改动设计内容所在的位置。
椭圆形选框工具等,在图像上截取部分并建立选区。在此
最后,单击文件 - 存储菜单,将制作完毕的内容转化为
期间,为了确保当下截取的内容更为精准,技术人员在选
GIF 格式并加以妥善保存。这部分透明背景图像最终的呈现
择选区工具的同时,设定选区的固定大小、宽度、高度值
效果如图 2 所示。
等数据。如此一来,单击图像之后就能够顺利建立起固定
的选区。
第三,持续到选区设置完毕之后,技术人员则需要按住
选区并在内部进行拖拽,目的是令截取的内容满足预设要求,
之后单击编辑 - 拷贝菜单进行选区复制。
第四,单击文件 - 新建菜单,选择画布并设置选区的尺寸,
并粘贴在新画布之中。
第五,在新文件图像之中仍需结合实际完成后续操作,
包括文字添加等,之后再予以保存。这部分处理细节具体如
图 1 所示。

图 2 Photoshop 网页制作中背景透明图像的呈现效果演示

经过多次实践调查发现,这类工序直接决定网页整体画
面的协调状态和美感,制作人员在实际操作中一定要重视。

2.3 特殊字体的应用

在制作网页,尤其是处理当中的图像时,还必须匹配
适当的文字说明,包括广告宣传语亦或是导航文字等。这
图 1 利用 Photoshop 调整网页中图像尺寸的方法演示 部分工序流程完全可以借助 Photoshop 程序中的文字工具
网页制作过程中还存在一类常见的操作技巧,即图像 操作完成。大多数状况之下,图像上的文字都会用到特殊
尺寸的调整,就是说图像文件大小要尽量减小时,维持其 的字体,而系统默认状况之下是不具备这一系列字体的,
应有的清晰度,这样才不会影响后续的打开速度 [3]
。对应 这 便 需 要 技 术 人 员 提 前 在 网 站 上 下 载 安 装。 如 在 图 像 上
的工序流程则是在 Photoshop 程序之中打开图像资源,之 添 加 方 正 粗 倩 简 体 文 字 过 程 中, 便 需 要 依 次 做 好 以 下 准
后单击图像 - 图像大小菜单进行尺寸修改,调试完毕之后 备工作。
予以保存。 第一,通过网络下载方正粗倩简体字体。
第二,下载得到的字体通常都是 .ttf 格式的文件,通过
2.2 透明背景图像的设计
复制该类文件并粘贴在 C:\Windows\Fonts 之中,就可以顺
部分图像在融入网页的过程中,为了取得一定的视觉表 (下转第 108 页)

— 105 —
信息与电脑
人工智能与识别技术 China Computer&Communication 2018 年第 1 期

驾驶技术研发所使用的核心传感器与关键控制元件都是来 4 结 语
自发达国家的进口产品。例如,百度研发汽车自动驾驶技 总体来说,汽车自动驾驶集合了现代社会各种类型的高
术所使用的车载激光雷达是 Velodyne 公司的产品,车辆关 精尖产业,可以预判在未来的 5 至 10 年内自动驾驶汽车将
键控制元件为宝马的核心产品。 会得到质的飞跃,自动驾驶技术的成熟与法律政策完善都会
3 汽车自动驾驶的发展趋势 大力推动汽车自动驾驶的发展。自动驾驶将会带动交通运输
行业、物流产业出现革命性的改变,进而推动社会经济更好
伴随着汽车自动驾驶技术的发展,汽车产业必然面临重
更快发展。
大的内部结构调整与技术冲击。计算机行业、信息通信行业
以及汽车行业之间融合发展的趋势将进一步凸显。汽车自动
驾驶将成为展现国家工业雄厚实力的重要技术,其是技术 参考文献
密集型产业,是道路交通与工业制造中的新型设备,同时 [1] 陈柱峰 . 车联网技术在汽车自动驾驶技术上的应用研
也是国家经济发展的潜在增长点,其同时涉及计算机高端处 究 [J]. 科技风 ,2016(23):13.
理器、传感器、通信设备、人工智能等众多高新技术产业, [2] 郭路兵 , 梅志千 , 贺勇 . 基于 PreScan 软件的交叉路
将会成为展现国家工业竞争实力的重要产品。同时,互联网 口防碰撞控制系统仿真 [J]. 机械与电子 ,2014(2):22-26.
与传统汽车融合的发展趋势十分明显,互联网企业与传统汽 [3] 高兆明 , 高昊 . 信息安全风险防范与算法法则的价值
车企业之间的合作将会是弥补双方短板、实现自动驾驶的重 原则——自动驾驶汽车研发的两个实践哲学问题 [J]. 哲学动
要方式。 态 ,2017(9):77-83.

(上接第 105 页) 更加贴合用户要求的网页作品,为有关企业创造经济与社


利完成字体的安装。 会效益。
第三,之后选择重启 Photoshop 程序,就能够清晰地锁
定已安装完毕的字体,并加以灵活应用。
参考文献
3 结 语 [1] 周 婧 .Photoshop 网 页 设 计 技 巧 [J]. 科 技 创 新 与 应
综上所述,在网页制作工序流程之中有必要运用 Photoshop 用 ,2012,19(5):111-116.
软件,主要是该软件处理图像的功能非常强大,进一步为 [2] 洪颖 .Photoshop 在网页设计中的应用 [J]. 信息与电脑
用 户 展 现 全 新 和 多 元 化 的 美 感 效 果。 而 笔 者 在 此 阐 述 的 ( 理论版 ),2013,27(6):79-86.
Photoshop 网页制作应用要点,都是经过实践总结而来的, [3] 李丹 .Photoshop 在网页设计中的作用 [J]. 电子技术与
由于不够全面,日后需要持续完善。长此以往,可以制作出 软件工程 ,2015,31(4):134-145.

— 108 —