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

给各位Illustrator软件的使用者们来详细的解析分享一下设计细腻的网页纹理背景的制作教程。

教程分享:

一、单个像素图

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

 


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

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

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

 


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

 


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

 


二、创建图案

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

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

 


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

 


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

 


三、再现图案

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

 


四、使用

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

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

 


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

好了,以上的信息就是小编给各位Illustrator的这一款软件的使用者们带来的详细的设计细腻的网页纹理背景的制作教程解析分享的全部内容了,各位看到这里的使用者们,通过大量这类纹理的练习,你会慢慢掌握关于像素的真理的,那么现在大家就去按照小编的教程自己去试试吧。

时间: 2024-10-26 02:46:34

Illustrator设计细腻的网页纹理背景制作教程的相关文章

Illustrator设计时尚典雅的无缝拼贴制作教程

给各位Illustrator软件的使用者们来详细的解析分享一下设计时尚典雅的无缝拼贴的制作教程. 教程分享:   来让我们开始教程吧!无缝拼贴图案样式一直都是设计师的宠儿,现在也十分受欢迎,在很多领域都有应用,我相信在很久很久的以后,无缝拼贴图案还是会继续流行下去. 我这里有几个小窍门,可以让创建无缝拼贴图案的过程变得更加容易.像素图案不同于其他图案,图案中的每个边缘都十分锐利,没有模糊的边缘,这就要求图案中的像素数是整数.在AI中,额可以打开像素预览模式(预览 > 像素预览).在这个模式下,我

Illustrator设计一幅肯德基广告单页制作教程

给各位Illustrator软件的使用者们来详细的解析分享一下设计一幅肯德基广告单页的制作教程. 教程分享: 首先来看一下最终效果图:   本幅广告页面我们很常见,就是一幅肯德基广告页面.在现实生活中,同学可以细心观察身边的事物,别人发的宣传页或者是路牌广告,户外广告都可以做为练习的素材.第一步:制作背景:选择矩形工具,绘制长形区域,在这里我不指定其大小,因为每个广告页面都有规定大小设置,那么在做的时候可以尝试性的自由创建大小.绘制好矩形后,用钢笔工具画中间的那一个线条,然后分割成上下二部分,如

Illustrator设计细节丰富的404错误页面制作教程

给各位Illustrator软件的使用者们来详细的解析分享一下设计细节丰富的404错误页面的制作教程. 教程分享: 一.创建新文档然后设置网格 首先ctrl+n创建新文件,从单位下拉菜单中选择像素,在宽度框中输入600,在高度框680,然后单击高级按钮,从上至下依次选择RGB,屏幕(72ppi),并勾选使新建对象与像素网格对齐,然后单击确定. 启用网格(视图–显示网格)和对齐网格(视图–对齐网格).编辑>选项>指南>网格,enter 5 in the Gridline every box

Illustrator设计绷带缠绕木乃伊文字特效制作教程

给各位Illustrator软件的使用者们来详细的解析分享一下设计绷带缠绕木乃伊文字特效的制作教程. 教程分享: 首先我们使用文字工具(T)创建如下文字,文字内容不限于教程中的文字,建议使用自己喜欢的字体,以及没有描边效果的字体样式,这样能更好的表现文字被缠绕的效果!   单一色彩无法表现文字的质感,所以我们选择线性渐变填充文字,(ctrl+F9)打开渐变控制面板,我们选择相同颜色的不同明暗度在垂直方向做渐变,以表现文字的明暗效果.在这里还是建议你选择自己喜欢的色彩.   现在得到了我们所需要的

Illustrator设计立体三维线条字母标志制作教程

给各位Illustrator软件的使用者们来详细的解析分享一下设计立体三维线条字母标志的制作教程. 教程分享: 第1步创建一个新的文档. RGB色彩模式.   接下来创建一个背景. 使用矩形工具(M)创建一个矩形,填充为黑色.(可以直接用ctrl+2进行锁定背景.)   第2步创建一个路径,看起来像字母S,使用椭圆工具(L),创建一个圆圈,无填充和一个白色的描边颜色.   接下来找到对象>变换>移动,使用移动完整复制另一个圆,然后在对话框中单击"复制"按钮.   第3步使用

Illustrator设计简约风格GOOGLE手机壁纸制作教程

给各位Illustrator软件的使用者们来详细的解析分享一下设计简约风格GOOGLE手机壁纸的制作教程. 教程分享:   第一步:图案形状 1.新建rgb颜色模式文档.600*800px,72ppi.我们先创建图案背景.使用矩形工具(m)建一个25*25px的正方形. 2.然后使用"直线段"工具(),在正方形的中心点一下,然后按住alt+shift键,拖拽到角以绘制出一个完美的45度角,从角到角划分正方形. 3.另一边也是同样的操作.选择所有图形元素,打开"路径查找器&qu

Illustrator设计漂亮证卡变幻线制作教程

给各位Illustrator软件的使用者们来详细的解析分享一下设计漂亮证卡变幻线的制作教程. 教程分享:   废话咱就少说开始干活!咱们先打开Illustrator软件.什么版本都无所谓.色彩选择RGB因为我是放电脑上看的!   选择矩形工具在画布里画一个矩形,执行渐变填充!   选择渐变,并点中渐变滑块!   这是制作背景你可以选择你喜欢或者需要的背景色制作!   我在这里背静渐变角度调成了-90度!基本OK!然后就CTRL+2快捷锁定背景!   然后就去掉前景色无,边框色可自己选择我这里选白

Illustrator设计长拖影宝石图标效果制作教程

给各位Illustrator软件的使用者们来详细的解析分享一下设计长拖影宝石图标效果的制作教程. 教程分享: 一.绘制钻石 在我眼中,绘画是一件非常有趣的事,它在还原我们生活的基础上又添加上我们对世界的想象(如果你足够有想象力的话).因此,请想象一下你曾经见过的钻石的样子.它是什么形状?它是光芒万丈还是星星点点?它是什么颜色? 问了自己这几个问题之后,你再打开AI软件,绘制出你心中所想的钻石的样子.但请记住,扁平化的创作首先是去掉高光.阴影,因此你的色彩搭配是很关键.另外,你的图形要精准得当,这

Illustrator设计三维弹簧效果图样实例制作教程

给各位Illustrator软件的使用者们来详细的解析分享一下设计三维弹簧效果图样实例的制作教程. 教程分享: 第1步创建一个新的文档. RGB色彩模式.   接下来创建一个背景. 使用矩形工具(M)创建一个矩形,填充为黑色.(可以直接用ctrl+2进行锁定背景.)   第2步创建一个路径,看起来像字母S,使用椭圆工具(L),创建一个圆圈,无填充和一个白色的描边颜色.   接下来找到对象>变换>移动,使用移动完整复制另一个圆,然后在对话框中单击"复制"按钮.   第3步使用