![创意VC:畅游VC网页设计观点与实例教程](https://wfqqreader-1252317822.image.myqcloud.com/cover/956/22691956/b_22691956.jpg)
设计观点
1 页面中的素材创作
素材说
通常我们都会认为素材对设计起辅助作用,实际上,素材对设计其实也有制约和限制的作用,特别是游戏类的页面设计更明显。我们经常会因为需求方没有提供素材或者是没有合适的素材而不得不修改原本想好的设计方案。下面就跟大家探讨一下在游戏页面设计中素材的创作方法。我把他们分为绘制、叠加、拼接几种方法。配合下面的实例(举例多为专题页面,此创作方法同样适用于官网的设计)为大家详细说明一下。
1.绘制法
绘制法是用一些绘制工具(选择最擅长的),这里推荐矢量图形工具配合图层样式
,根据页面风格来制作一个新的素材。Photoshop里面的矢量图形工具大家要多多利用,它不仅可以绘制各种矢量素材,同时也加强了图形的可编辑性。
在许多韩国网页设计中,这种绘制素材的实例也非常多。
注意
当确定了页面风格和版式后,自己要有清晰的概念,我们具体需要哪种素材,切莫出现对素材加工好后才发现与页面风格冲突,得不偿失。
![](https://epubservercos.yuewen.com/AEA282/11261881804984806/epubprivate/OEBPS/Images/figure_0011_0003.jpg?sign=1739189958-qcDlE65OJAdi5NGl2MwxG1FbQfo2rToh-0-5328d51a88585feccd79c20ec037b553)
用矢量工具绘制杂志,做出书页的厚度,同时处理好光影以及质感,在绘制这类素材的过程中如果觉得没把握,可以去网上找一些实物图片参考。
![](https://epubservercos.yuewen.com/AEA282/11261881804984806/epubprivate/OEBPS/Images/figure_0012_0001.jpg?sign=1739189958-oI0uK32wtkcW7bRmSDrwhD9JTjL4sg8I-0-0695c9983c091dce25deb2fc5cbea7d2)
矢量工具绘制图素,很典型的扁平化风格设计。颜色对比明快鲜亮,信息更明了突出。
2.叠加法
叠加法是用实物材质图片与带有肌理的背景或图形相叠加来制作一个新的素材。这种制作方法适合一些贴近写实风格的页面。
![](https://epubservercos.yuewen.com/AEA282/11261881804984806/epubprivate/OEBPS/Images/figure_0013_0001.jpg?sign=1739189958-igAvYxEBupYUxF5yB895wwMiBIpG0kBL-0-85e6373c3efe5b6c69f6397ce9ed2392)
人物和物品按透视关系摆在空间里,并用木纹素材做成透视的地板,添加裂纹,从而打造一个场景。在制作这类写实素材时要注意处理好透视关系和材质本身的特性。
![](https://epubservercos.yuewen.com/AEA282/11261881804984806/epubprivate/OEBPS/Images/figure_0013_0003.jpg?sign=1739189958-m489VlxLOtc9NDy0jRm66l85tpcZFpGd-0-559db476b98b8f17fc9ff22fdbae5f2b)
用木纹打造桌面,叠加光影效果,以及游戏棋盘的平摆效果。突出主题,功能和目的明确,游戏氛围也更浓。
3.拼接法
拼接法是提取完整图片里面的部分元素拼接成一个新的素材。这样做的好处是能保持与游戏风格的统一性,也节省了制作时间。
![](https://epubservercos.yuewen.com/AEA282/11261881804984806/epubprivate/OEBPS/Images/figure_0014_0001.jpg?sign=1739189958-FugrCaC81kjEB3PFajwcoz4MJ7LI3RBp-0-6a55b437bf7b8d705a75d3fc091f529c)
用草坪的素材制作成4个按钮,用木纹效果制作Slogan(标语)、按钮以及画面主体素材。效果统一,并且让视线集中。
![](https://epubservercos.yuewen.com/AEA282/11261881804984806/epubprivate/OEBPS/Images/figure_0014_0003.jpg?sign=1739189958-pcWX8NCt9LMHo9zTqGbFPmB0NQryfWBo-0-ff09ea875e54a8aa3bd371d003e37288)
用冰雪元素和人物素材拼接在一起,打造整个雪地场景,使这个页面代入感和真实性很强。
实践
下面是用上述素材创作的方法在平时工作中一些实践作品,让我们来逐一进行分析。
作品1
![](https://epubservercos.yuewen.com/AEA282/11261881804984806/epubprivate/OEBPS/Images/figure_0015_0001.jpg?sign=1739189958-sxajWe9I1e2px117rR52wTKqoKdolwLZ-0-d361e8a42d966e0ea99972c8ed2ba502)
这是《鹿鼎记》的回顾专题,主要是各个阶段的资料片回顾。需求方要求以一本书做翻页Flash来表现效果,所以运用的是绘制法,绘制了一本书作为整个专题的主视觉。
下面详细介绍一下书本的绘制步骤。
01首先因为不确定哪种书本的造型最适合这个专题,需要去网上搜集一些书本图片,理性的把它们分类,找出与专题风格最相符的书本造型。
![](https://epubservercos.yuewen.com/AEA282/11261881804984806/epubprivate/OEBPS/Images/figure_0016_0001.jpg?sign=1739189958-MGm2OhZ6Zsl8BBhGfXbkuKm6W6h2NsYX-0-867985d40ac1768eda5588842352cbc3)
古典书本,适用武侠风专题
![](https://epubservercos.yuewen.com/AEA282/11261881804984806/epubprivate/OEBPS/Images/figure_0016_0002.jpg?sign=1739189958-7ZRzFmxalPGoaZo8w3qqmHpoWBrU9bvE-0-3718c239505f49d65366207bed0e1f4d)
破旧书本,适用暗黑风专题
![](https://epubservercos.yuewen.com/AEA282/11261881804984806/epubprivate/OEBPS/Images/figure_0016_0003.jpg?sign=1739189958-feGLQyOpNmGCnRGNVrTpugAU2NoLA0Ap-0-6fb005d8bd537f479a882f97ba532e00)
介于前两者之间,比较适合本专题
02确定书本的基本造型后开始进行绘制。
![](https://epubservercos.yuewen.com/AEA282/11261881804984806/epubprivate/OEBPS/Images/figure_0016_0004.jpg?sign=1739189958-1YNrsUIBzCwQxel4CuBW9R61kuHkRbel-0-b44140f256f5224033d1d557854e84c0)
定义矢量基本形
![](https://epubservercos.yuewen.com/AEA282/11261881804984806/epubprivate/OEBPS/Images/figure_0016_0005.jpg?sign=1739189958-KHzlzKkJkjNtbfcmwbm1gVImZTQ0Mn5N-0-cb3fbd9147a77183636841a2da49d4ad)
填充颜色、图案样式
![](https://epubservercos.yuewen.com/AEA282/11261881804984806/epubprivate/OEBPS/Images/figure_0016_0006.jpg?sign=1739189958-aZxmxsQU1Iu8KrktEXTWWAZBG60Alrgu-0-9b6a94e81fa1965bc5a9f028922cef59)
丰富书本细节
![](https://epubservercos.yuewen.com/AEA282/11261881804984806/epubprivate/OEBPS/Images/figure_0016_0007.jpg?sign=1739189958-lt9R37fS6SMVqbWzdMf6JhLZgDA0VsMS-0-b31ca5d5abb898fafe0ab311dceb3087)
完善内容,调整细节
03按照上面的步骤进行绘制,完成最终效果。
![](https://epubservercos.yuewen.com/AEA282/11261881804984806/epubprivate/OEBPS/Images/figure_0016_0008.jpg?sign=1739189958-nI3QvdbHy3tt8bhj1lUiLbyoVse0fqLn-0-328bab37a41a27d1057d4bcf2e66e725)
作品2
![](https://epubservercos.yuewen.com/AEA282/11261881804984806/epubprivate/OEBPS/Images/figure_0017_0001.jpg?sign=1739189958-UeG160Rtdd0BzI0bton2pHKAzcNdce0a-0-358f7fec50fd4bd17350deb2032e42a7)
这是《鹿鼎记》的猛将职业专题,根据猛将钢筋铁骨绞肉机的职业特点,运用叠加法把内容版块制作成炽热钢铁的感觉。
下面详细介绍一下钢铁素材的制作步骤。
01首先搜集一些写实的材质图片,选择适合本专题的材质。
![](https://epubservercos.yuewen.com/AEA282/11261881804984806/epubprivate/OEBPS/Images/figure_0018_0001.jpg?sign=1739189958-5aR6gm2FymugbaKldcheVTZb3lrkuEsE-0-0e598523d3a3bb92d9304a5da1f74a40)
纹理过于平整,适合材质类的按钮制作
![](https://epubservercos.yuewen.com/AEA282/11261881804984806/epubprivate/OEBPS/Images/figure_0018_0002.jpg?sign=1739189958-ohEJAZ1qfLkjCey79G0SF25IIQTgrUif-0-4661c176cb16e617552dd544e7d1b39b)
纹理裂痕清晰明显,表现力强,适合本专题
02开始拼接制作。
![](https://epubservercos.yuewen.com/AEA282/11261881804984806/epubprivate/OEBPS/Images/figure_0018_0003.jpg?sign=1739189958-EaDZdw2Gfrf8sAa5dRo4LAPYj4XtO9Pj-0-ede8ffe5798866305a925c94ea5089da)
将石头材质与有图案的底图进行叠加,直至叠加出理想的效果
![](https://epubservercos.yuewen.com/AEA282/11261881804984806/epubprivate/OEBPS/Images/figure_0018_0004.jpg?sign=1739189958-8Kz5KyQpVzrhdOh1U0JlJFsOX3Bu93f5-0-daea3364b0c933b4c2db5bc06ba22676)
叠加之后开始调整细节,反复叠加光影效果,最后将板块边缘用橡皮或者钢笔之类的工具调整出裂痕,这样效果会更真实
03按照上面的步骤进行制作,完成最终效果。
![](https://epubservercos.yuewen.com/AEA282/11261881804984806/epubprivate/OEBPS/Images/figure_0018_0005.jpg?sign=1739189958-RTQtB8Mpk5tt5vjrMUzCsBg7dL5gvdb7-0-75530b8623bedbff8a73c01ac5f2404c)