如何用Adobe Illustrator制作细节丰富的网页404错误页面 AI设计技巧介绍
七、创建工具提示
①使用矩形工具(M),创建一个65 *25PX的矩形,填充颜色为R =60 G =36 B =21以及把它作为显示在下面的图像。

②确保您的棕色矩形保持选中,在外观面板上,选择现有的填写以及使用复制所选项目按钮(指向的蓝色圆圈如下图),复制它。选择新的填充,效果>转换为形状>矩形。进入如下图所示的属性,单击确定,然后转到效果>扭曲以及变换>变换。进入下图所示的属性,然后单击确定。

③重新选择你的棕色造型,注意在外观面板上,确保整个路径被选中,选择效果>风格化>阴影。进入如下图所示的属性,然后单击确定。

④使用文字工具(T),添加“Go Back”一段文字,将颜色设置在R =172 G =68 B =0以及把它作为显示在下面的图像。同样使用OpenSans字体,使其字体设置为粗体,大小设置为11像素。重新选择这个黄色的文本加棕色形状,按下Ctrl-G。

⑥ 重复补齐你的小提示(Ctrl-C> Ctrl -F),选择复制,并把它显示在第一个图像.看黄色部分的文字,用“Go Home”代替现有文本。重复此步骤,按照下面第二张图中显示的添加第三个提示“Contact Us”,并增加了棕色形状的宽度75像素。

八、加入背景及一些微妙的阴影
选择矩形工具(M)和然后点击您的画板来打开矩形窗口。在高度框中输入610在宽度框中,690,然后单击确定按钮。确保生成的形状保持选中,并设置其颜色在R =35 G =31 B =32。接下来,您将需要居中,所以打开对齐面板(窗口>对齐)。
设置对齐到画板(打开弹出菜单,进入显示选项,如果你不能看到对齐到部分,如图下图),请确保你的形状被选中然后只需单击水平居中以及垂直居中对齐按钮。你的正方形应该如下图所示覆盖整个画板。最后,只需按Shift键 – 控制 – 使你的矩形变黑。

②重新选择主要的黄色矩形,然后在外观面板上,确保整个路径被选中并添加如下图所示的四个阴影效果。

最后恭喜你完成该页面,以下为应该显示的结果

以上就是利用Adobe Illustrator制作细节丰富的网页404错误页面全过程,虽然内容有点多,但介绍非常详细,相信只要大家有耐心地看完本篇教程,一定会学到很多知识点!
相关文章
- 这篇教程是向脚本之家的朋友介绍PS绘制一个漂亮创意的扁平插画风格404页面方法,教程绘制出来的页面非常的漂亮,而且作者也做了详细的制作步骤,很不错,推荐过来,一起来2015-09-15
是一段实现了漂亮的蓝天白云404错误页面的代码,此段代码适用于所有网页使用,有兴趣的朋友们可以前来下载使用2015-01-15网站中404页面到底有什么用?探讨404页面的作用和如何设置
建站的时候都会考虑404页面,但是404页面对于网站到底有什么用?随着网站内容的增多,还有相应内链的复杂度增加,都会造成死链问题。所以借助于404页面的提示作用,就能够2014-11-05
纯CSS3实现的精致的占领月球404错误页面效果源码,是一段适应于网页出错或者找不到网址的情况下显示的代码,比较适合娱乐的场合使用。404就是当页面找不到时,显示的页面。2014-10-31- 本文主要讲诉在做网站优化时我们要学会利用错误页面,例如我们网站可能出现的404错误页面,以及在制作404页面是需要注意到的问题2014-08-27
404 not found是什么意思?为什么会出现404 not found页面以及如何解决
我们在浏览网页的时候,有时候页面中会提示404 not found,那么404 not found是什么意思?导致网页中会出现404 not found页面的原因有哪些?针对此问题,本文就为大家进行2014-07-30你眼中的404页面未必返回404状态码 404页面如何正确设置
404页面存在的意义就是告诉浏览者和搜索引擎所请求的页面不存在或是链接错误,你这检查只能说明用户看到的是404页面,而对于搜索引擎呢?会对这个页面返回404状态码吗2014-07-05- 相信网上有很多关于404页面的制作帖子了,这里我要总结的是根据自己这一次网站被降权而总结的404自定义错误页面的制作,绝对超级详细2014-01-12
- 在SEO学习的过程中,404页面是其中必须要掌握的一个SEO技巧,正确使用404页面对网站绝对是有益无害的2011-05-13
jquery实现的火箭动画效果的404错误页面,比较适合娱乐的场合使用。404就是当页面找不到时,显示的页面。2010-12-12





最新评论