时代华奥

你的位置:首页 > 知识库 > 设计知识 > 正文

drkiller:标志设计与网页的整合

时间:2012-08-05    来源:深圳时代华奥    分类:设计知识

> 客户沟通
客户要求
客户需要做一个旅游产品相关的商务网站——明日旅游,需要设计一个标志以及与此风格统一的网站。网站的设计选择WIN8风格,并在设计中兼容未来的平板及手机用户浏览。

解决思路
设计分析:WIN8兼容触屏的设计风格很时尚,而且图形丰富、视觉冲击强、简约、清晰,模块性强。
对应方案:针对这些特点网站标志的风格应该具有视觉强烈、新锐、个性、非常规、表现性强。因此标志应有以下图形特点:1、颜色鲜明、丰富;2、线条对比强烈、;3、整体有视觉张力、构型独特。针对新建网站知名度低的弱点,标志设计形式选择字图结合,在保持视觉表现力的同时能快速地提高其知名度。
以上沟通用了约一周时间,在与客户达成基本一致后作者才开始进行设计构思,构思在周末放松的生活中进行,用了两天得到设计Idea——日出之象,中间为“明”字。

> 草图制作

STEP01初稿草图
首先用碳素钢笔在笔记本上画了一个小小的设计草图。 用碳素笔是颜色便于观察,用钢笔是因为其与纸张的摩擦系数较大,便于精确控制线条,画初稿比较合适。图形画得比较小有利于提高工作效率。

STEP02精稿草图
制作思路:初稿由于是随性所画,其中的比例、布局可能存在较大误差,所以需要通过软件中的规范图形作参考来重新绘制精稿草图。

1、在Illustrator中用多个圆形画出标志中间部分的辅助线,画圆时注意图形中各部分的大小、间距等比例,尽量让图形在整体上均匀平衡。

2、用路径查找器中的“减去顶层”命令制作出“月”形图案,并把“日”、 “月”形图案分别用Ctrl+8结合填充黑色,以准确观察标志的整体效果,并仔细调节各部分的粗细、间距等,让图形布局均衡。

3、火焰形外沿是一个极费时间的图形,由于现在只是确定焰形的大小比例不必精细制作,只需要用钢笔工具勾出个大概即可,主要通过白箭头工具调节焰顶的位置以确定它们的高度。中间的白色图形是用多角形简单制作的,用于确定中间圆形的大小比例。

4、把“明”字图形复制到Photoshop中粘贴,并把图层不透明度调低,成为一个制作草图的参考图形。

5、用铅笔工具在新建图层中画出草图的轮廓,一些比例不恰当的地方可以适当调整一下。这个过程有三种制作方法:(1)把“明”字参考图形打印出来,在纸上用笔画好后再扫描入电脑,这个方法复杂但线条最好控制;(2)直接在Photoshop中用鼠标绘制,这个方法很难控制好线条但效率很高;(3)直接在Photoshop中用数位板绘制,这个方法很好很快也较贵。

6、用较大的笔刷把中间上黑色,以便接近真实地观察图形的粗细、间距等比例,上色中还可以对图形进行精细的比例调节。

7、把不需要的图形擦掉以便下一步制作。

8、按照前面的初稿草图比例仔细地画出日珥的焰形,这个过程需要大量仔细的工作,制作中要注意它的整体布局的均衡性。

9、上黑色以最后确定整个设计草图的形态是否可取。

>精稿制作
STEP01单色精稿制作
1、回到Illustrator,置入刚才的手绘稿,用钢笔工具勾出标志的外形,勾的时候通常线条设细一些,颜色用一个与背景色差异较大的鲜艳色以便观察。

2、外形线条的处理追求一种石碑刻纹的风格以便与网站的时尚风格形成对比,所以细节并不都是平滑的,多有一些“残缺美”的形状。

3、完成后整体ctrl+8结合上色,观察整体形态,细节处可以用白箭头精确调节。中间的几条“残缺”痕迹是三角形图形与标志用路径查找器中的“减去顶层”命令制作。

4、对比不同的字体,从中找出一款比较适合的。

5、与标志图形一起组成标志组合。

STEP02彩色精稿制作
1、直接给标志图形加一个简单的圆形彩色渐变,以便基本判断一个合适的彩色色调,这个过程可能需要反复尝试。

2、把标志图形设为白线,并用Ctrl+Shift+]置前,背景制作一个黑矩形用Ctrl+Shift+[置后,然后用Ctrl+2把它们都锁定。

3、打开菜单:窗口>画笔库>毛刷画笔>毛刷画笔库,并打开RGB基本色板。

4、选择画笔工具、适当的毛刷画笔、适当的线条粗细、适当的RGB色,刷吧!这个过程可以奔放一点,也比较考验对颜色的感觉。

5、毛刷画笔有部分叠加和覆盖效果,所以可以象画油画一样反复往上叠画,可以由中间渐渐向四周扩散的顺序来进行。

6、绘画的过程中注意整体的颜色变化,让色彩在整体上体现一种规律的美感。

7、画火焰时注意笔触应该顺着火焰的方向描绘,这样更能体现出火焰的纹理特点。

8、整个绘制的过程很象小时候的涂鸦,很随性很爽的说,呵呵。

9、在看似杂乱的色块中其实都是暗藏规律的,看这些线条的方向与标志的形状大都比较吻合。

10、把所有画笔笔刷部分全选Ctrl+G群组并置后,把标志图形置前,同时选择这两个部分用Ctrl+7制作蒙版。

11、设计问题:观察完成的彩稿,发现中间的“明”字图形并不清晰,感觉很零碎不整体。这是由于标志中部为多个不同颜色的径向发散色块,它们分割并弱化了“明”字图形,所以需要进行设计处理。

12、解决办法:作者的处理思路是对“明”字图形内的彩色块重新进行描绘,用Ctrl+Alt+7解除蒙版,描绘的颜色变化依然与标志整体的变化尽量保持一致。当然如果你有更好的处理方法我们将乐于见到,因为作者也想向你学习。

13、笔刷的方向顺应“明”字形状,以强调标志的核心信息。

14、重新把笔刷图形群组并制作蒙版后观察标志,对遗漏的区域或不好的颜色进行反复修改,这个过程可能需要反复多次。

15、黑色背景下的彩色标志组合。

16、作者第一次把设计提交给客户看的时候把标志放得很大而且背景为黑色,这样的好处是标志内部丰富的色彩笔触会比较细致、鲜明地展现出来,结果正如作者意了的那样——客户高兴地说:“如果印在广告衫上效果一定不错。”

工作经验小结:有时设计本身并不需要多么高明的手法或多么高超的创意,很多时候我们会发现生活中多数成功的品牌形象都是恰当、平实而耐看的,这说明比创意、手法更重要的是读懂客户,给一个客户想要而(由于不够专业)他又无法准确表达的设计,创意、手法只要略微超过他们的想象就足已!由于客户的不专业和表达的不准确,作为设计师会“读”、能“懂”就显得非常重要,这是一项具有巨大职场优势的技能。

17、设计问题:白色背景下的彩色标志组合设计有一个难点——标志边缘部分的黄色与白色非常接近,这会弱化标志在背景下的视觉感受,这需要进行设计处理。
解决办法:作者的处理思路是在标志底下加一个深色投影效果,当然这一定不是唯一的办法。制作过程:把标志复制后解除蒙版、删除内部笔刷内容,填充白色,并用菜单:效果>风格化>投影 来制作。

18、然后把投影图形置后,与原标志对齐,完成白色背景下的彩色标志组合。

>网页应用
1、把标志制作成左右横向组合并以适当的大小、位置置于网页中。
设计问题:右上角的标志并不十分突出,特别是中间蓝紫色的“明”字图形部分,而且由于颜色较多标志缺乏整体感,这需要进行设计处理。

解决办法:作者的处理思路有三个,(1)重新绘制“明”字图形部分,把颜色明度提高,特别是紫蓝色部分与网页背景比较接近,需要尽量压缩面积比例,把颜色画得单纯一点,删除过多的杂色以强调“明”字的整体视觉效果;(2)把标志的颜色饱和度提高以加强“明”字图形部分的视觉感受;(3)对标志整体外缘加一个深色描边和投影以加强标志的整体感和视觉突出感。(也许你突然有了更好的点子,那就马上把它们实现出来吧!)

1、重新绘制的要点是让颜色更亮、更简单、更有整体性。

2、在颜色变化的过渡上要自然,而且与整个标志的色彩要成为一个整体。

3、把标志复制解除蒙版并填充任意一个饱和度最高的彩色,并在透明度面板中把叠加模式设为“饱和度模式”。

4、标志的色彩、特别是中间蓝紫部分立刻鲜艳了许多,同白色背景组合一样,给标志下做一个有投影的图形,并多设一个黑色描边,并在描边面板中把“边角”选项设为“圆角连接”,这可以让黑色描边在轮廓线条转角处更均匀。

5、最后全局观察网页,我们的问题的确有了明显改善。

6、这是单色标志的网页方案,将用于客户想强调内容而不是品牌的时候(也许是在明日旅游知名度很高的时候?)。

设计问题经验小结:设计工作中总是会随着工作进度或客户沟通而出现一个个不可预测的设计问题,这很考验设计师的智慧,通常在工作中会发现以下两类处理方式:

方式一:
不成熟有态度的设计师第一反应通常是“找问题”,和客户一起分析设计状态和使用矛盾,并通过网络、同事、前辈等途径尽可能找出解决方案,客户会很累,感觉这个设计师不太靠谱,但认可设计师的工作态度;

不精明老板反应:“如果每单都象你这么个做法公司怎么挣钱?我需要的是你迅速解决客户、迅速收款,我不关心过程,我要的是结果、结果!”

精明老板反应:“你怎么能这样麻烦客户,你自己工作的问题要学会自己解决。”同时暗想——能力不足但态度很好,可以培养;

成熟有态度的设计师第一反应通常是“直面问题、迂回应对”,和客户的决策人物作有效沟通并准确把握客户对设计项目的商业意图,找出众多问题中最重要的,同时调动自己适合的资源(人脉特别是专业人仕的人脉、同事、物质、协作单位、简单有效的市场调查等等),靠大家和自己的努力把问题比较好地优化或解决,并与客户进行真诚而务实的修改提案,在这个过程中把公司上下一心协作努力的过程真情而宛转地传达给客户,让客户明白这个结果背后的汗水,项目完成后向老板申请从这项业务的利润中拿出适当的一小部分让参与其中的同事可以小搓一顿以增加团队的凝聚力和战斗力;

不精明老板的反应:“我满意你搞定了这个客户,但我不太满意你的时间和你投入的资源,这增加了我们的成本,至于你说的请大家搓一顿,我会考虑的。”

精明老板的反应:“吃海鲜可能比较困难,但好伦哥是没问题的,你带大家去吃,回来拿发票来我这报帐。”同时暗想——有设计能力,会沟通客户,能协调资源、整合团队,是个管理和项目运作的人才,设计二部主管的空缺有着落了。

方式二:
不成熟没态度的设计师第一反应通常是“找理由”,给客户找出一堆出现问题的“必然”性和“合理”性,不知行业世道的客户(这样的人非常少见!)或客户公司底层工作人员会不乐意的被迫妥协,结果很可能——这是我们能从这个客户挣到的最后一单,当然更有趣的结果是有经验的客户根本不鸟你!

不精明老板的反应:通常只要收到钱而没收到投诉都会相安无事,但如果是没钱收或丢了客户的话那后果就……

精明老板的反应:事后能细致觉察到问题所在并会直接或间接地对设计师提出批评,并且会把所有重要业务转交给别的设计师;

成熟但没态度的设计师第一反应通常是“找台阶”,给客户提醒时间、成本的紧张,分析市场竞争、企业生存、行业环境、政府政策等等因素(你觉得晕吗?客户也是!),并巧妙地回避问题本身同时强调设计中的优点和这些优点在市场营销中的优势……(这个过程因人的口才不同而长短各异。)最后加上很多带着“你如果接受你就是圣人”、“不接受你就是傻X”观点的溜须拍马,结果很可能——客户有点迷糊、似懂非懂(但又不愿承认自己不懂。)而且会比较舒服地为设计卖了单,当然如果他面对的是一位懂行、精明的客户(这样的客户多在大型或知名企业,普通小企业比较少见。)结果就更有趣了,客户会让设计公司换人或者直接换设计公司,这时设计师会在公司内散布许多客户的坏话而给自己一个台阶;

不精明老板的反应:“你太牛X了,这么难搞的客户你三言两语都能收款,下次我一定让你接宝洁的单!”

精明老板的反应:“不错,月未拿提成吧。”同时暗想——这位设计师有口才无品行,能用且用,不能用则弃,绝不能让他进核心管理层。

上一篇:网页配色技巧分享 下一篇:让你的线框原型更具沟通能力的10个方法
关于我们
服务项目
作品案例
资讯中心
业务关键词
旗下品牌
时代华奥——高端网站建设服务机构 邦设计——VIS/标志设计、画册/宣传设计、产品包装设计 馋猫网——提倡饮食健康资讯平台
 
扫描二维码即可访问当前网站
深圳平行进口车
咨询热线
大客户热线