日式风格的无缝纹理制作

   将某个场景的图案,按照随机的方式罗列整个画布上,这就形成一种纹理式样的图案。而这类纹理图案有两种表现,第一种是细微的质感纹理,这类纹理大部分运用到网页的背景上,它显得比较低调,主要色调为黑白灰;第二种就是以图案为独立细节进行随机散布的图案纹理,如下图。


  此类图案纹理能铺开整个画布,直接强调主题,虽然直接运用网页布局的很少见,但也能在制作某个广告图或者某个特别修饰的场景里使用。

  今天我们要学习的就是第二种以图案为独立细节的图案纹理,早已有类似thepatternlibrary这样的网站给你提供了精美的图案纹理下载,但是设计时与实际需要的细节还是差之毫厘,那么,自己动手打造一张无缝的图案纹理就显得至关重要。

  一、制作准备

  1、AI软件;

  2、已完成的手稿图;

  3、配色方案;

  二、画上细节图

  1、梳理细节

  这里细节图是随机图案组成的“细胞”或“肌理”,那么,肌理的美感度会很大程度上影响到最终效果。所以,我们在这里会要求大家先完成手稿。

  手稿可以任意发挥,根据你要创作的主题来画出你认为最适合“出场”的细节。手稿可以用铅笔在纸上绘画,也可以自己用wacom画。这里我用的方式是利用wacom直接绘画。

  注:wacom是手绘数位板的别称

  这里要强调的是配色方案,因为细节图是由多个物件所组成,因此,会涉及到多种颜色,而色彩的搭配就十分重要,因此充分的准备工作需要的是一份配色方案,在绘画时就能轻松运用上适合的颜色,也不会因为色彩的凌乱而头痛了。

  给大家先看看我准备的配色方案:


  这里我要做的是日式古典的纹理,那么无论是配色还是物件的选择都会倾向日本古典的风格。

  2、绘制图案

  从日本旅行的照片中,选择了几个作为典型的日本印象的物件构图:樱花、灯笼、矮竹、扇子、石头。

  下面我将一一采用AI软件进行绘制。关于物件的绘制,这里相信大家会采用各自喜欢的画法,我将省略实际绘制的过程,以保证每个读者创作时更加开放自由。AI矢量软件对于几何图形的构造有足够的优势,因此绘画时可以尽量选择运用几何图案进行巧妙的组合、裁切等方式。

  我对于AI软件绘制图形的使用感受是,这就像我们小时候做过的剪纸手工作业一样,运用基本的几何图形,手脑并用,可以拼贴出任何具形的图案。而软件的精细程度和各种效果的运用就可以让整个图案达到出彩的效果。

  在绘制的过程中可以先暂时用随机的颜色搭配,待所有物件都绘制完成组合在一起时,再重新根据配色方案调色。

  樱花的绘制过程:


  日本扇子绘制过程:


  灯笼的绘制过程:


  矮竹的绘制过程:


  石头的绘制过程:


  三、构图与无缝处理

  将所有物件都绘制完成后,我们开始进行组合构图,最好玩的时候到了!

  AI新建一个大小适宜的文档,将刚刚画好的物件都放置于画布上。因为绘制时我们并没有考虑色彩的整齐搭配,而现在需要做的就是根据我们的配色方案调整色彩。

  这是调色前:


  根据配色方案调色后:


  然后选中所有的物件,点击对象>图案>建立。这时会出现图案创建选项面板,你可以在这个面板中进行选择调试,做出你最想要的纹理图案。比如复制新的樱花,增加圆点装饰,降低某些细节的透明度,重新上色等。

  这里需要注意的要点是:

  1)你的图案创建面板设置中,为了保持图案为无缝,这里的拼贴类型要选择“网格”2)我在这里设置的图案大小是300px*300px,以确保每个物件都能完美地展示出来3)尽量不要留有空白,这样能使整个图案显得饱满丰富

  你将在这里马上看到整个图案的最终效果。完成后点击左上角的完成后。你将在色彩面板中看到你刚刚创作的无缝纹理图案,双击它会弹出设置面板,你还可以继续修改。


  这时,那么这个无缝纹理图案就做好了。


  四、运用

  你可以试着画上一个300px*300px矩形,这个矩形的大小与刚刚设置的图案大小一致。然后选择图案填充后,导出为一个png格式的图片。

  保存PNG图片有个好处是保留了透明背景,那么这个图案的运用将会更加灵活,因为底色可以根据不同的情况而做出改变。在PS软件中定义好该图案,实际运用时增加渐变背景或其他纯色背景,如下图。


  五 结语

  制作纹理图案的过程中,你要训练的是自己对整个画面的美感平衡的能力,设计是对每个素材之间关系的平衡,包括它们的色彩、距离、结构……而这些都需要你步骤三中通过尝试而获得一个最佳点。教程里我没有再进一步美化这个图案,但你要记得设计是没有终点。希望你能做得更好!

分类:

  • PS入门教程
时间: 2024-10-29 07:41:53

日式风格的无缝纹理制作的相关文章

Secret of Photoshop 纹理篇(无缝纹理制作)

一.纹理基础--无缝纹理制作 经常在各大论坛上看到有关无缝纹理制作的提问,因为无论在制作3d贴图,还是网页低纹,或者定义photoshop的patten,对纹理的无缝衔接都有很高的要求.当然,使用某些插件比如kpt 3.0和Auto FX P/G Patten等都可以实现制作无缝纹理,不过其实使用Photoshop本身的滤镜也可以很方便地实现无缝纹理制作. I.无缝的基础--offset 滤镜利用offset 移动以及复制边界像素的强大功能,是无缝衔接的第一大秘诀.下面我们通过一个例子来说明of

Secret of Photoshop 纹理篇(无缝纹理高级制作)

高级 二.无缝纹理制作高级技巧 现在和大家讲讲无缝纹理的一些高级技巧. (一)十字选择法在通常情况下,许多纹理光进行offset处理,算然可以实现边界的接合,但是在图片中心会出现难看的接痕,通过学习下面这个范例我们可以学会如何消除这些接痕.1 新建一个大小为500X500dpi的文件.2 选择filter->other->clound,如图一.(在这里用clound只是随意生成纹理来试验十 字选择法.) 图一  3 选择filter->other->offset,水平和垂直的距离各

用PS制作日式迷幻和风图腾效果

到底这一个底图要叫什么呢?老实说梅干也不是很清楚,看起来有点像日式风格,又有点不像,但管它是什么风格,当梅干第一眼看到这个底图时,令梅干眼睛为之一亮,觉得这底图看起来很特别,也蛮有味道的,便迫不急待的想知道这是如何製作出来的,结果!阿咧-怎字跟鬼画符一样,好在梅干会阿一ㄨㄟ喔(狗屁!梅干那会日文,见鬼了)!马上就心动把它给买回家了,就在那一堆歪七八的文字中,把这图给作出来了,且令梅千感到神奇的事,竟然全部都是用Photoshop 内建的素材,且那些素材还是平常你看都不想看它一眼的,竟然也可以作这

用PhptoShop做日式动漫CG

这两天有网友问我"日式动漫CG是怎么做出来的",我一下说不出个所以然来,正好这两天没作业比较闲,便动手做了个教程出来,帮助新手们了解日式动漫CG的制作步骤. 事先声明,这套技法不是我想出来的(没那么好本事),而是从我买的一本引进版日本动漫CG教材里学到的.因为版权问题,不好直接扫描上来,便自己做了一份简易的,没有什么太精妙的绝活,对高手大概没什么用处,不过我个人觉得对新手还是蛮有用的. 示范的CG我用的是漆原大师的原画,他的原画特色就是色彩异常鲜明,层次特别清晰,非常适合用来做范画.人

Xbox One负责人回应推特用户问题:将会引入日式RPG

对于不少玩家来说,Xbox One就意味着以FPS.赛车和体育类为主的美式游戏,而相比于Xbox One,PS4和WiiU就更大程度上意味着日式风格的作品.虽然各家都在努力扩大旗下主机的销售人群,但一直以来Xbox One都似乎和日式RPG无缘.不过根据微软Xbox部门负责人Phil Spencer的说法,这种情况一定会在Xbox One上有所改善. 不久前一位名为Darrenmc62的推特用户率先发问:"希望你能回答我的问题:在将来我们会在Xbox One上玩到日式RPG吗?"不久后

Illustrator设计精致无缝纹理图案效果制作教程

给各位Illustrator软件的使用者们来详细的解析分享一下设计精致无缝纹理图案效果的制作教程. 教程分享: 将某个场景的图案,按照随机的方式罗列整个画布上,这就形成一种纹理式样的图案.而这类纹理图案有两种表现,第一种是细微的质感纹理,这类纹理大部分运用到网页的背景上,它显得比较低调,主要色调为黑白灰;第二种就是以图案为独立细节进行随机散布的图案纹理,如下图.   此类图案纹理能铺开整个画布,直接强调主题,虽然直接运用网页布局的很少见,但也能在制作某个广告图或者某个特别修饰的场景里使用. 今天

风格体验两不误?日式网页就是这样

  日本文化是一种严谨谦和的态度,这种态度在网页的设计中也有着显而易见的体现.在视觉设计上,日式网页大多为清新自然的主调;在用户体验上,更是能让用户感受到无形的体贴和温暖. 清新雅致的水彩,亦或是充满日本元素的小装饰,总之,日式网页设计能让我们从小细节中就准确的分辨出来,低调却不平庸也许是最恰当的形容词了. 以下是AnyForWeb为大家搜集的充满日本本国特色的网页设计,希望能为大家带来启发和灵感. 1.Good Design Company的网站首页完全颠覆了传统意义上的首页,网站将大多数客户

photoshop制作菱形编织图案的无缝纹理背景教程

给各位photoshop软件的使用者们来详细的解析分享一下制作菱形编织图案的无缝纹理背景的教程. 教程分享: 效果图:   这个是用了颜色查找功能后的展示图:   新建文件,并设置其大小为210像素×414像素   Ctrl+R调出你的标尺工具 在上边标尺出右键选择单位为像素   放大画布到800%左右,选择"矩形选框工具",绘制一个矩形选区,矩形位置(99,0)到(108,3),填充颜色#92c6de   移动矩形选区,向右移动3像素,向上移动6像素,继续填充浅蓝色#92c6de  

Illustrator设计精致无缝纹理图案绘制教程

给各位Illustrator软件的使用者们来详细的解析分享一下设计精致无缝纹理图案的绘制教程. 教程分享: 将某个场景的图案,按照随机的方式罗列整个画布上,这就形成一种纹理式样的图案.而这类纹理图案有两种表现,第一种是细微的质感纹理,这类纹理大部分运用到网页的背景上,它显得比较低调,主要色调为黑白灰;第二种就是以图案为独立细节进行随机散布的图案纹理,如下图.   此类图案纹理能铺开整个画布,直接强调主题,虽然直接运用网页布局的很少见,但也能在制作某个广告图或者某个特别修饰的场景里使用. 今天我们