• 微课视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
微课江湖
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 微课视频
  • photoshop
  • Fireworks
  • CorelDraw
  • Illustrator
  • Painter
  • Freehand
  • Indesign
  • flash
  • maya
  • autocad
  • 3dmax
您的位置:首页 > 平面设计 >Illustrator > Illustrator设计细腻的网页纹理背景教程

Illustrator设计细腻的网页纹理背景教程

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-05-23

佚名 向大家分享了Illustrator设计细腻的网页纹理背景教程,其中包含illustrator网页版,adobe illustrator,illustrator,illustrator cs6下载,illustrator教材等知识点,遇到此问题的同学们可以参考下

在我以前的文章中,聊到过关于两种不同的纹理图案。今天我们要学习使用AI制作其中一种纹理,而这种纹理不同于上一次教程里所教的纹理,它主要出现在网页设计中,作为网页背景而使用。通常这类纹理图案的特点是阴影和高光的过渡非常细腻,它的色彩游离于黑白灰之间。用这种只有黑白灰的气质格调打造的网站,会显得别具一格哦。

Illustrator设计细腻的网页纹理背景教程,破洛洛

也许你不认为一个小小像素会发生巨大的作用,但接下来我们要做的将会改变你的看法。

一、单个像素图

首先打开AI软件,新建一个文档,文档大小任意。在视图栏目下勾选“像素预览”,勾选这一选项后,当你将自己的图片缩放到足够大时,会出现像素格子,然后再勾选“对齐像素”,这样图案就会自动对齐像素,无需你再自己手动控制对齐了。

Illustrator设计细腻的网页纹理背景教程,破洛洛

在绘制像素图之前,或许你对这种微妙的背景纹理没有太大的印象,在 subtlepatterns 这个网站里,你会看到大量的这类纹理图。可以看到,当一个纹理平铺开来投入使用时的效果和单个像素图的制作过程的视觉效果会有略微的差别。

掌握像素对纹理背景的影响是需要长期积累的,那么,就从现在开始,我们先来画一个简单的像素图案吧。

画一个4*4 px的正方形,填充色为浅灰色。

Illustrator设计细腻的网页纹理背景教程,破洛洛

再画上两个2*1 px的长方形,填充为稍深的灰色,置放于下图所示的方位。

Illustrator设计细腻的网页纹理背景教程,破洛洛

画上两个2*1 px的长方形,填充为白色,置放于下图所示的方位。

Illustrator设计细腻的网页纹理背景教程,破洛洛

二、创建图案

完成后,选中刚刚做好的这个图案,然后点击对象>图案>建立。

Illustrator设计细腻的网页纹理背景教程(2),破洛洛

这时,会出现一个图案选项的属性面板,而画布则被图案所填满,你可以一边在属性面板中调整相应数值,画布上的图案就会发生相应变动。在此我用的是面板中的默认属性。

Illustrator设计细腻的网页纹理背景教程(2),破洛洛

而与此同时,在色板面板中就会出现新建的图案。

Illustrator设计细腻的网页纹理背景教程(2),破洛洛

完成后,点击左上角的【完成】按钮退出编辑。这时,左边还有个【保存副本】的按钮,如果你点击了保存副本按钮的话,这个新建图案将作为副本再次被放入到图案色板中,当你编辑原图案时,不会对这个副本造成影响,它类似于一种备份。

Illustrator设计细腻的网页纹理背景教程(2),破洛洛

三、再现图案

这时,图案已经做好了,在你的图案色板中你会找到它。那么,这时你可以画上一个较大的矩形,或任意的形状,点击图案填充。

Illustrator设计细腻的网页纹理背景教程(2),破洛洛

四、使用

现在,做好的图案现在只能在这个文档里使用,但如果你新建一个文档后,图案面板中不会有该图案的出现,因此,你需要做的是保存该图案。类似我刚刚画好一个填充为图案的矩形后,点击导出为PNG图片。再将该PNG图片在PS中定义为图案。

定义好图案后,你用PS制作任何背景时都可以直接选择填充图案即可。

Illustrator设计细腻的网页纹理背景教程(2),破洛洛

定义好的图案也可以继续返回AI进行修改,如果你想要纹理显得更粗糙,可以通过增强色彩对比效果,以及拉大像素格子间的距离来实现。

后记

通过大量这类纹理的练习,你会慢慢掌握关于像素的真理。没错,是真理。像素是组成图片的基本单位,而每个像素的性状的改变都会影响到整个图片的效果。细节决定成败,也是说的这个道理。

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • Illustrator设计细腻的网页纹理背景教程
  • Illustator制作网页超酷的长阴影效果 两种AI制作方法介绍
  • Illustrator设计网页11个使用技巧介绍(图文)

相关文章

  • 2017-05-23Ai怎么做一个纸折飞机的APP图标?
  • 2017-05-23入门:AI制作矢量亮光教程
  • 2017-05-23AI怎么设计螺旋花纹图标?
  • 2017-05-23AI绘制可爱的卡通女孩、萌妹纸教程
  • 2017-05-23ai怎么改变文字方向? AI设置文字方向的教程
  • 2017-05-23Ai简单绘制简单的垃圾桶标志
  • 2017-05-23AI手绘可爱板板糖卡通的商业海报
  • 2017-05-23ai制作收缩和膨胀效果图形
  • 2017-05-23AI制作标准图形技巧 如何用AI简单制作规范形体  
  • 2017-05-23AI简单绘制一条波浪线

文章分类

  • photoshop
  • Fireworks
  • CorelDraw
  • Illustrator
  • Painter
  • Freehand
  • Indesign
  • flash
  • maya
  • autocad
  • 3dmax

最近更新的内容

    • AI绘制绚丽漂亮的莲花图形
    • ai怎么给图形制作草稿图象效果?
    • Ai怎么画照相机按钮的图标?
    • AI将你想要的图案变成笔刷
    • Ai怎么绘制一朵大大的明黄色的花朵?
    • AI文件怎样转为cdr格式文件(二)
    • AI制作动感漂亮的三维线条背景教程
    • AI制作文字长阴影效果教程
    • ai怎么制作排列成五角星形状的文字?
    • AI cc 2017安装后分辨率太大不能自动调节该怎么办?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2015-2018 All Rights Reserved. 微课江湖 版权所有