虎课网为您提供字体设计版块下的公益网站该如何优化设计？图文教程，本篇教程使用软件为无，难度等级为中级拔高，下面开始学习这节课的内容吧！

本节课讲解【公益网站的优化设计】，同学们可以在下方评论区进行留言，老师会根据你们的问题进行回复，作业也可以在评论区进行提交。

那我们开始今天的教程吧。

1、本期要优化设计的网站是国外的一个公益网站，我们先来预览下原网站，看起来不是特别好。

2、打开【Photoshop】软件，新建图层（快捷键：Ctrl+N）将LOGO载入进来，然后填充【白色】，如图所示。

3、在左侧的【工具栏】中我们找到【文本】工具，输入文字内容并且修改字体的样式。

4、返回网页设计软件（XD），然后在右侧的设计面板中勾选【Layout】的勾选，打开参考线。

5、左侧的菜单栏中选择【文本】工具，将标题的内容进行输入。

6、使用【形状】工具创建一个矩形，矩形的大小不需要填充满整个屏幕。

7、然后根据矩形的大小，将图片载入进来放置在矩形的内部。

8、将背景图片载入到【Photoshop】软件，使用【钢笔】工具绘制【路径】，具体如图示。

9、选择图层在效果器中点击【滤镜】-【模糊】-【高斯模糊】效果设置它的【半径】数值。

10、在效果器中添加【曲线】效果（快捷键：Ctrl+M），选择曲线根据画面颜色来调整【曲线】的效果，具体如图示。

11、将图片进行替换，然后在左侧的菜单栏中选择【文本】工具，将标题的内容进行输入。

12、继续加载图片进来，然后使用【文本】工具，将标题的内容进行输入。

13、返回到网页中，将网页中的素材图片进行另存为，在这里老师不喜欢这个点击按钮，重新设计一个。

14、在左侧的【工具栏】中找到【文本】工具，输入文字内容并且修改字体的样式，使用【形状】工具创建一个矩形，并修改颜色。

15、网页优化就完成了，来预览一下。

16、本课作业内容具体如图所示，同学们不要忘记提交作业哦。

以上就是公益网站该如何优化设计？图文教程的全部内容了，你也可以点击下方的视频教程链接查看本节课的视频教程内容，虎课网每天可以免费学一课，千万不要错过哦！