字体 文字 隶书 中国具有五千年文字历史,文字中所包涵的精髓,值得每一位设计师学习、继承与探究。设计师需要熟悉各种字体的风格特征,并能灵活运用字体进行编排设计,才能使作品的内容更清晰、更有条理地传达给读者。文字不仅具有阅读的固有功能,同时肩负塑造版面视觉风格的审美功能。在现代设计中常能够看到一些精心设计过的字体,以醒目而个性的形式出现,在进行信息传达的同时也被赋予了视觉个性,成为画面的焦点之一。字体是指文字的风格款式,也可以理解为文字的一种图形样式,不同的字体传达出不同的性格特征。目前各大字库提供了各种版本、各种类型的字体供设计师使用。正因为字体类型繁多,使得版面设计成了一种很具有挑战的设计工作,设计师必须不断感受与体会,来安排好这些数量有限、潜力无穷的基本元素。本期通过汉字的发展简史,分析汉字在各种设计案例中的使用,并为大家推荐视觉效果较好的相关字体。更多字体干货:超全整理!设计师必备的3类书法字免费资源(附下载链接)大家好,我是和你们聊设计的花生~之前在社群有小伙伴问有没有免费可商用的毛笔书法字体资源,有肯定是有的,但授人以鱼不如授人以渔,今天除了为大家推荐免费好用的书法字体,还会为分享给大家优质的书法字入门知识和教程,还有免费的资源网站,让你即使没有书法功底也有办法做出好看的书法字体 ~往阅读文章 > 一、甲骨文甲骨文是我国最早形成体系的文字形式,字形优美,变化丰富,甲骨文处于图像化符号和系统化文字的过渡期,强调物体的特征和对自然的模拟。应用案例:目前古文字已失去了信息传播的实用性价值,但也为设计师们打开了更为广阔的文字应用空间。在现代设计中更多是作为图形使用,应用于体现古老历史文明的特定内容中。1. 汉仪陈体甲骨文以甲骨文书法艺术为基础,融入了现代设计思维,赋予了这种古老文字强烈的时代气息,用“新”的方式再现出甲骨文文化。二、金文金文即铸造在殷商与周朝青铜器上的铭文,又叫钟鼎文。多为象形字以及由象形字合成的会意字,优美的文字像一幅幅图画,生动逼真。以战国时期中山国所出土方壶上金文为发想,取其线条的韵律感,保留重心偏高的特点,重组字体写法,创造出古为今用的现代金文,整体予人端庄优雅的形象。以西周〈大盂鼎〉金文为基础,结合青铜铭文、甲骨文实物,转译为易于识别的文字造型,并保留象形文字的图像趣味。三、大篆广义的大篆包括甲骨文、金文和六国文字。狭义的大篆指籀文,以周宣王时的太史籀所书而得名。石鼓文为大篆的代表。字体结构整齐,笔画匀圆,形体趋于方正。逐渐摆脱象形的拘束,奠定了方块字的基础。以大篆为原型制作的一款字体,字形浑厚,方圆兼备,笔势婉转通畅,优雅古朴。四、小篆由于战国时期各国的文字非常混乱,大大影响经济生产的发展以及文化教育的传播。因此,秦始皇在统一六国后,进行了具有历史意义的改革“书同文”,即统一文字。李斯以秦国文字大篆作为基础,去繁就简,同时吸收民间字体中的一些简体、俗体字的优点,进行规范,形成了一种新的字体——小篆。应用案例:小篆几乎完全脱离了象形文字,形体偏长,圆润整齐,成为十分美观的方块字体,有庄重肃穆、典雅堂皇之气,特别能营造传统古文字的典雅韵味。1. 华康新篆体设计师将传统篆书较难识别的部份略加修改,成为一般人也能看懂的“新篆体”。圆润均匀的线条,圆转的曲线笔势与颀长的字体结构,呈现出篆书独特的风格,五、隶书由于人们对信息传播的质量、速度有了更高的要求,小篆就逐渐演变成为笔画简化、更适合书写的隶书。隶书的出现,是书法史乃至文字史上的一次重大变革。初步形成了构成汉字基本要素的点、横、竖、撇、捺、提、钩、折的笔画特点。隶书书写效果略微宽扁,横画长而直画短,轻重顿挫富有变化,讲究“蚕头燕尾”、“一波三折”,极具艺术欣赏的价值。应用案例:隶书字形平整、质朴、雄劲,气度十分典雅,艺术感染力极强,现代设计中常常用来作为版面的标题。六、魏碑魏碑体是北魏时期产生的一种介于汉晋隶书和唐楷之间的新书体,又称为龙门体。魏碑体端正大方,质朴厚重,刚劲有力,笔画如同斩钉截铁一般充满气势。七、草书为了书写快捷和书者为了抒发自己的胸臆,产生了一种在隶书基础上演变而来,笔画连带,一气呵成,极富张力和艺术感染力的字体——草书。草书发展可分为带有隶书笔意,有章法可循的章草,进一步到不拘泥章法的今草,再到奔放不羁、气势万千的狂草三大阶段。应用案例:草书笔画连绵、自由、奔放、洒脱和率性,便于直接抒发书写者的思想情感。但因其识别性和易读性较低,一般作为标题或装饰元素使用,运用在浪漫情怀、充满动感的版面中。1. 钟齐柳江毛草字形潇洒飘逸,笔画连绵,行云流水,古朴优美,个性鲜明。Tips:如果安装后找不到字体,请搜索其名称「Liu Jian Mao Cao」八、楷书楷书盛行于唐朝时期,楷书同时吸取了篆书圆转笔画,也保留了隶书的方正平直。笔画挺秀均匀,字形端正,使汉字的结构大体的固定了下来。后人因为以这种字体作为学习书法的楷模,即称之为——楷书。应用案例:楷书字形端正、挺秀均匀、富有韵味,给人以传统、古朴和高雅感。楷体识别性和易读性较好,无论是标题用字或正文排版都可以胜任。1. 方正楷体(免费商用)形体方正,结构整齐,将章法严谨的楷书化作现代字体,整体清晰度佳、辨识度高,适用于一般内文、教科书、公文、告示等。九、行书行书没有楷书那样规范严肃,也没有草书那样奔放和难以识别,而是书写流畅,用笔灵活,字体如行云流水、婉约妍美、潇洒流畅,而且易识性强,时至今日,行书依然是最为使用和应用最广泛的字体之一。应用案例:行书与现代手写体相近似,笔画流畅飘逸,商业设计中常用于潇洒随兴的视觉效果,能营造出充满人文气息与浪漫的氛围。1. 禹卫书法行书笔法柔顺,飘逸有型,潇洒如风,是一个很有美感的书法字体。2. 钟齐志莽行书(免费商用)运笔灵动快捷,不像草书那么疯狂抽象,却也有着笔走龙蛇之感。Tips:安装后找不到字体,请搜索其名称「Zhi Mang Xing」。以上列举的各种字体,均是以不同时代书体为基础,进行规范化设计而成,在字体设计师的努力下,最大限度的保留了原字体的精神风貌、笔画造型特点、字形结构比例和审美特征等。文中展示字体只作为案例分析,版权归原作者所有,如需商用请购买正版字体。至此,书法界的主流书体都已经登上了历史舞台,最重要的书写介质——“纸张”开始普遍为人们使用,此后的汉字史,可以看作一场精彩又漫长的墨与纸的切磋。下期见!欢迎关注作者的微信公众号:「艺海拾贝Design」本篇来源:优设网原文地址:https://www.uisdc.com/history-of-chinese-characters
标题 个字 文字 如果大家喜欢看电影同时注意观察电影海报设计,会发现大量海报标题设计都偏爱错位排版。错位编排是通过对标题文字大小、位置和笔画的调整,打破固定的排版样式,让标题的排版更具个性化,是提升标题编排设计感和美感最简单最实用的设计技巧。本期分享 5 个常用的错位排版方法,学会这些方法你也可以快速设计出个性的标题排版。往期排版干货:为了让你学会「时间」排版,我做了50+案例示范在进行设计时,常常会涉及到“时间”的排版,比如展会日期、演出时间、活动促销时间等。阅读文章 > 此案例,所有文字字号大小一致,文字交错移动位置。第二个字“叉”往右边移动,第三个字“感”则往左偏移,第四个字“染”再往右偏移。每个字移动的距离不一样,这样会形成一定的节奏感。刚开始练习如果对偏移距离掌控不好,建议距离小一些,而且首字和末字字错位不要太大,可以很好地避免文字排版混乱的问题。还可以让字间距紧凑些,甚至可以让一些笔画连起来,整体感会更强。刚开始练习可以固定其中部分字体的大小,小号字和大号字穿插排列,小号字偏移的位置尽量控制在大字号范围内,保持文字组合的整体性。使用错位排版可以打破沉闷的对齐排版,营造文字编排的节奏感,增加标题设计的创意性、设计感和美感。错位编排的方式还有很多,这里只是简单总结 5 个常见的排版方式,希望能够帮助大家打开思路,设计出个性的标题排版。欢迎关注作者的微信公众号:「艺海拾贝Design」本篇来源:优设网原文地址:https://www.uisdc.com/dislocation-layout
路径 效果 文字 大家好,这里是和你们聊设计的花生。今天继续为大家带来 5 个实用的 AI 操作小技巧~上期回顾:学会这5个Ai小技巧,帮你快速提升操作效率!大家好,这里是和你们聊设计的花生~之前和大家分享了 4 期提升 Ai 文本排版效率的小技巧,很多小伙伴都说非常实用。阅读文章 > 一、批量修改同属性元素在 Ai 中我们有时需要批量修改某种的元素,那么如何快速选中在不同位置但具有相同属性的元素呢?非常简单,选择众多相同元素中的一个,点击顶部菜单栏的「选择-相同」,会有十几个选项可供选择,选择其中符合要求(比如“填色和描边”),就能将所有填色与描边与目标选项相同的选项同时选中,然后修改即可。这种方法也可以用来选择文本和符号等内容。二、快速重复变换在 Ai 中按住 Alt 键移动可以快速复制出同一个图形,此时如果按 Ctrl+D 键,可以快速重复这一操作,且复制出来的图形都是等距的。我们可以用这一方式快速制作重复图形或文字条。三、保留路径查找的可编辑性“路径查找器”是我们在 Ai 中常用的一项功能,觉得执行效果不好需要撤销重做。其实有一个方法可以让对象在执行路径查找后仍然保持可编辑性:在选中对象后,按住 Alt 键后再去点击路径查找器中的选项,这样选中的元素之间的位置仍然可以调整。点击“路径查找器”面板中的“拓展”结束这种可编辑状态。四、清除模糊效果的边框在 Ai 里给对象添加模糊效果时,会发现模糊效果像是被一个隐形的方框截断了,非常突兀。出现这种问题的解决办法为,在添加模糊效果之前,选择顶部菜单栏的「效果-文档栅格效果设置」,在弹出的窗口内将“选项”里的环绕对象数值适当调大一些(不能过大,可按实际情况调整),之后再添加模糊效果时,原本的方框就会消失了。五、路径文字的多重效果使用“路径文字”工具可以让文字按照特定的形状进行排列,而除了默认的文字效果外,我们还可以选中编辑好的路径文字,点击顶部菜单栏中“文字-路径文字”,选择倾斜、3D 带状、阶梯扥更多文字效果。好啦以上就是为大家推荐的 5 个冷门但实用的 Ai 小技巧,大家看完后有没有 Get 新技能呢? 喜欢本期推荐的话记得点赞收藏,也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问,可以在评论区提出,我会第一时间为大家解答 ~推荐阅读:掌握这5个Ai小技巧,帮你快速提升文字排版效率(二)大家好我是和你们聊设计的花生。阅读文章 > 这5款工具,让设计师工作效率提升 200%!(十一)大家好,这里是和你们聊设计的花生~ 最近又收集了好多超实用的效率工具,分享给大家,本期推荐的 5 个神器分别是: 打开即用!阅读文章 > 本篇来源:优设网原文地址:https://www.uisdc.com/5-ai-tips-6
图文 文字 矩形 在我刚大学毕业时,每次遇到折页设计都有点无从下手,有一次,我的总监跟我说,你可以试下先用色块将信息进行分组。这么一来,思路果然清晰了很多,后来我知道,并不是设计折页就一定要用色块,但它确实是一种高效的排版方式。与色块相对应的是线框,我把这二者统称为图文框,即可以用来插入文字或图片的排版神器,这是在版式设计中运用非常广泛的手法,大家肯定也用过,所以,今天我们就来聊聊,如何通过正确使用图文框来使你的设计变得更优秀?往期回顾:高手的平面课堂!用「线」排版必须做好的6个细节在做版式设计的时候,我们经常会用到一种元素来辅助排版——线,“线”具有区隔内容、强调信息、平衡版面、指引、组合、连接、装饰等诸多功能,能有效解决很多版式问题,但“线”的使用并没有表面上看起来那么简单,很多设计新人在用“线”排版时会出现:冗余、死板、不平衡、不美观等问题,所以,葱爷今天就来阅读文章 > 一、图文框的种类不同造型和形态的图文框,其气质以及用途也会有所差别,常用于排版的图文框有以下几种:1. 几何图文框几何图形是最简单的图文框,最常见的有矩形、圆形、椭圆形、圆角矩形等等,主要用于信息分组、信息强调。2. 异形图文框这类图文框常用于海报设计中,像一块补丁一样,把文字插入在画面中,有点拼贴艺术的感觉。3. 对话框对话框具有一定的指向性,常用于排版对话文案、海报标题、插入补充性文字等。4. 爆炸框爆炸框具有很强的视觉冲击力,以往最常用于商品价格之类的促销信息,近几年,爆炸框在海报设计中非常受欢迎,变成了一个很时尚的设计元素。5. 立体框即在平面图文框的基础上增加 3D 效果,这种图文框视觉效果更突出,而且可以加强版面的空间对比,是设计促销海报的不错选择。6. 虚线框虚线框比起线框在视觉上更精致、更可爱,如果你想用图文框进行排版,但又不想图文框很突出,或者是做与儿童相关的设计时,虚线框会是一个不错的选择。二、如何选择合适的图文框前面我们介绍了几种不同造型的图文框,但其实除了造型上的差异,图文框还有圆角和尖角、直线和曲线、填色和描边等方面的差异,我发现很多设计师经常会用错图文框,那么,该如何来选择正确的图文框呢?通常是根据视觉调性和内容的多少来选。如果想要高级、简约的效果,适合用几何形图文框,如矩形、圆形、椭圆形、拱门形等,而且一般是用描边图文框,当然描边自然不能太粗。如果想要时尚一点、酷一点,通常要用填色图文框,即我们平常所说的色块,而且图文框的轮廓最好是比较尖锐、硬朗的,比如直角矩形、平行四边形、尖角的爆炸框、像素图文框、不规则的多边形等等。当然,这类图文框的色彩搭配也很重要,通常是使用饱和度较高的对比色。如果想要视觉效果柔和一点、可爱一点,则更适合使用一些圆润、柔软的图文框,比如圆角矩形、圆形、云朵形、曲线异形等等。如果想要复古或中国风的效果,用中式、港式的图形框很容易出效果,这类图文框通常是描边图文框,或者是填色加描边双效果图文框,而且描边通常较粗。圆形、椭圆形、爆炸框之类的图文框,通常只适合文字比较少的情况,文字较多时,矩形框和异形框会比较适合。三、图文框的使用小细节图文框内的文字应该与图文框的边界保留一定的距离,通常来说,在文字是横排的情况下,文字离图文框的上下距离不得小于正文的行距,左右不得小于 1 个正文字符的宽度。当然,重点是视觉要舒适,要便于阅读,如果文字比较多、字号比较大,那么通常会排得比较满,即文字与图文框边界的距离会比较小,反之,则会比较大。如果想要视觉效果比较轻松、高级,那么图文框内的留白可以尽量多一点,比如网页和 UI 中的按钮设计通常就是这么做的。文本框内的文字排列方式,要尽量与文本框的形状相呼应,视觉上才会比较和谐,即矩形框的文字也要排成矩形,圆形框的文字要排成圆形。在下方的长图中,文字排版的轮廓形状基本都是跟所对应的图文框轮廓相呼应。四、如何避免版面变得死板?图文框内的文字尽量不要左右两端严格对齐,可以采用居中对齐或者左对齐等方式,不要把图文框塞得太满,尽量多留一点呼吸空间。给文字信息加上图文框还只是开始,如何排好框内的文字才是重点,要尽量把图文框内的排版做得精致一点。框内的文字必须有着丰富对比关系和清晰的层级关系,比如要有字号大小区分、颜色区分,可以给小标题增加小的图文框、用图文框突出某些重要词句、用线区隔信息、给信息进行分组、加一些装饰元素等等。图文框之间可以错位排版和叠加处理,不要每个图文框都严格对齐和均等分布;图文框之间也可以有大小对比、轮廓对比、方向对比、空间对比等,这样的版面才会有主次,有变化,视觉上不至于太单调。可以对图文框进行适当打破,使一部分元素或文字冲出图文框,比如把部分文字或图片元素叠加在图文框的边界处,创造出框里框外的对比效果,也可以加强版面的灵活性。注:最好不要把版面里的所有元素都放进图文框内。使用不规则图形作为图文框,或者将图文框和文字一同做旋转和扭曲,也可以有效打破传统、常规的视觉效果。结语图文框真的非常强大,结合不同的设计需求和其他设计知识,你可以创造出无限的可能,基本上可以解决大部分的设计问题,以上葱爷分享的内容只是九牛一毛,这些所谓的方法也绝对不是标准,因为设计是不存在标准的,所谓的经验和技巧只是能帮助经验不足的设计师可以更快做对、做好,如果你够强,所有的经验都可以打破。本篇来源:优设网原文地址:https://www.uisdc.com/layout-design
效果 文字 对象 Illustrator混合工具是在进行视觉设计时常使用的工具,熟练掌握可以轻易实现非常复杂和炫酷的效果!希望通过本期讲解,让你轻松驾驭混合工具,灵活运用并举一反三设计出更多优秀作品。选择需要混合的对象,按快捷键Ctrl+Alt+B即可进行混合。通常可以对两个或以上的对象进行外观(效果、填色、描边)、颜色、透明度的过渡。双击“混合工具”即可弹出混合选项菜单,“间距”分别有3个选项:平滑颜色、指定步数、指定距离。1、平滑颜色:自动计算混合的步骤数。2、指定的步数:自定义混合对象之间的数量。3、指定的距离:指定一个对象到下一个对象之间的距离。连接混合对象间的路径称为混合轴:混合轴可以通过相关路径工具进行编辑:还可以绘制新路径替换混合轴:框选对象和路径,执行“对象-混合-替换混合轴”命令。使用文字工具输入文字,填充白色,描边为黑色,大小选择1pt。复制一个字向右下角移动,描边改为0.5pt。选择两个文字按快捷键Ctrl+Alt+B进行混合。双击“混合工具”弹出混合选项菜单,“间距”选择”指定步数”:100。使用同样的方法制作其他三个文字的混合效果:最后加入文字排版:给“混合轴”添加新锚点,再使用路径工具进行调整,可以得到如下效果:使用同样的方法调整其它三个文字的混合效果,重新进行文字排版,第二个海报设计完成:重新绘制新路径,框选对象和路径,执行“对象-混合-替换混合轴”命令。得到新的混合效果:另一个字也使用相同的方法制作,最后加入文字排版,第三个方案设计效果:重新更改混合效果:前方文字填充改为无,描边为1pt的白色;后方文字缩小,把填充和描边都改为0,得到如下效果:其它文字也使用相同的方法制作,最后加入文字排版,第四个方案设计效果:利用混合工具还可以制作出很多有意思的效果,大家可以灵活运用并举一反三设计出更多优秀作品。作者:邓海贝来源:艺海拾贝Design(ID:YHSBds)
命令 文字 拖动 illustrator有很多便捷的功能,而且使用简单,今天的illustrator教程将教大家用Ai中的混合命令做酷炫的封面效果图,我们一起来学习吧!这种翻页效果也常见于海报设计中,如下:做法依然用到的是混合命令,接下来跟我动手做一下吧。教程/步骤第一步①打出想要呈现的文字,建议黑底白字。②对文字执行创建轮廓命令(ctrl+shift+O),如下:③选中文字后,用透视变换工具(E)单击定界框右上方(左上方也可以)的锚点,然后按住ctrl+shift+alt键的同时,向外拖动左键,完成透视。看下动图操作。第二步①将透视结果垂直向下复制一份,并适当压扁。②用混合工具(w)分别点击两个对象进行混合操作,之后双击混合工具图标,在弹窗中完成参数设置。③对混合结果执行对象-扩展命令,然后打开渐变窗口(ctrl+F9),点击线性渐变按钮,调整渐变角度为-90°,可将白色滑块适当向右拖动(让字体中的白色显示更多),如下:④右键取消编组,选中最上层文字,将其适当上移,让文字显示的更全一些。⑤将结果向下复制一份,利用镜像工具(O)将其垂直翻转(按住shift+左键从上向下拖动即可完成垂直翻转),然后对好位置即可。至此,这个字体翻页效果就做出来了。我们还可以继续调整细节,做出更多有趣的尝试。比如我们可以删掉其中的几个字母和数字(删除前记得取消编组),营造一种残缺的美感。也可以删除后重新做混合,营造一种不规则感。还可以将某些字母和数字改变颜色,强调主题。好啦,关于混合的酷炫玩法还有很多,大家一定要动手多尝试鸭~我们下期再见!作者:君小阳 来源:这logo怎么了(ID:wtf-logo)
线条 文字 粗细 在做版式设计的时候,我们经常会用到一种元素来辅助排版——线,“线”具有区隔内容、强调信息、平衡版面、指引、组合、连接、装饰等诸多功能,能有效解决很多版式问题,但“线”的使用并没有表面上看起来那么简单,很多设计新人在用“线”排版时会出现:冗余、死板、不平衡、不美观等问题,所以,葱爷今天就来讲讲,在使用“线”进行排版时需要注意哪些细节。平面干货:平面设计高手教程!全方位解锁「点线面」的运用方法(附实操案例)本文从点线面的定义、作用、设计方法帮你全方位科普点线面在版式设计中的运用,附上实操案例,基础差的平面设计师,这篇别错过了!阅读文章 > 一、线的种类常用于版式设计的“线”有 6 种:1. 长直线线条的长短没有一个明确的界定标准,我自己评估了一下,在中文版面里,线条如果长于 10 个正文的字符宽度,大概就可以称之为长线,否则就是短线。另外,长线用于区隔内容时,其长度一般是大于或等于内容的长度。2. 短直线短线用于区隔信息时,线条会比“文字行”短,短线还常用于组合信息,作用类似于大括号。上图的红色短线就是起到了组合信息的作用。3. 斜直线斜线的主要用于切割文字和图片、规范文字排版、填充空白等,比水平和垂直的线条更具动感。4. 折线折线常用于信息指引,比如产品的功能示意图、信息图表等,另外,用于区隔信息效果也不错。5. 曲线比如波浪线、弧线、或者螺旋线等等,曲线比直线更加柔和、活泼,常用于儿童、女性、或手写体为主的设计中。6. 虚线虚线具有低调、优雅、可爱的特性,常用在正文排版中用于区隔信息。二、线的粗细不同粗细的线条其效果和气质会有明显差异,所以需要根据具体的需求来设置线条的描边参数。细线条比较秀气和精致,如果版面的调性要求高端和优雅,所作用的文字“字重”以regular或light为主,那么细线会更加合适。线条的粗细值通常和其中小号字的较细笔画(衬线体参考横笔划)的粗细差不多。粗线条相对粗犷而显目,如果版面中主要文字的“字重”是medium或bold为主的无衬线体,那么使用粗线条比较合适。如果线条所作用的文字字号只有一种,线条的粗细值通常会比文字笔画略细一点点。而如果所作用文字的字号不只一种,线条的粗细值通常是介于大号文字与小号文字的笔画粗细之间。如果版面中的线条比较多,功能也不一样,那么最好区分一下线条的粗细,以使版面更加精致、层级更加清晰。比如在上图的报纸排版中,区隔报头与目录之间的线条是最粗的,甚至还用了两根线条;目录之间的线条,以及区隔目录与版位的线条要相对细一些;而版位里不同信息板块之间的分隔线是最细的;用于区隔导读和正文的线条又是比较粗的。另外,如果线条的目的是为了强调众多文字中的某些句词,通常也会使用较粗的线条。三、线的长短长线和短线的有些功能是一的,比如区隔内容,那到底什么时候要用长线,什么时候要用短线呢?主要依据是其所作用的内容的长短,通常来说,作用的内容比较长,那么用长线效果比较好;内容不一定只是文字,也可能是文字加图片,甚至是纯图片。如果所对应的内容比较短,则用短线效果会更好,短线的长度通常在所作用文字中“长句”的 1/3-1/5 之间。四、线的位置长线的起点和终点通常要与对应的图文两端对齐,或一端对齐、一端做出血处理,如果同类型的文字段落有长有短,则以最长的为准。短线则要与所对应文字的对齐方式统一,比如统一左对齐、右对齐、居中对齐。如果线条的作用是强调某些词句,那么其与文字的间隔会比较小,大概是线条粗细的1-2倍,甚至会与文字交叉;如果线条的作用是将不同组别的信息区别开,那么线条与文字的距离通常是大于等于 1 行文字的高度(横向区分),或者是大于等于 1 个字符的宽度(竖向区分);文字越少、空间越大,间隔也相应要更大。五、线的呼应关系在文字相对较多的版面里,我们好少看到只有一根线条的情况,因为有几条重复出现的线时,才能形成呼应,以及版面的统一性、平横性和节奏感;而版面中出现不同的线是为了呼应内容本身的结构,也是为了加强版面的对比关系。图三比图一和图二更加平衡、更加精致。六、打破线的束缚如果你希望版式的调性更加灵活和时尚,可以在图文与线之间适当做一些错位、叠加或者交叉的效果,就会有一种打破束缚的感觉。以上葱爷分享了版式设计中“线”的使用技巧和注意事项,当然,这些所谓的方法也觉得不是标准,设计是不存在标准的,所谓的经验和技巧只是能帮助经验不足的设计师可以更快做对、做好,如果你够强,所有的经验都可以打破。关于排版中的其他细节,我们后面慢慢聊。本篇来源:优设网原文地址:https://www.uisdc.com/line-design
文字 图形 元素 文字图形化,顾名思义就是使文字具备图形的特点,从而使文字变得更加美观、更具视觉冲击力,甚至是可以把文字的意义图像化,使设计更具说服力和打动力,这也是设计师很喜欢的一种设计手法。在海报设计中,通常是把主题或者关键字词设计成图形,然后把其作为画面的主视觉,这种做法既能使画面视觉更丰富,又能突出关键字词。 而关于文字图形化的做法,主要有以下四种:用图片元素组成文字即用与需要设计的关键词相关的图片元素,或者使用与品牌和产品相关的图片元素组合成某个关键字词。在执行的过程中,既要保证文字本身的识别性,也要保证组成元素的识别性。另外,要找到图片元素与文字笔画的共同点,尽量让图片之间的组合自然而巧妙。把文字当作场景比如把文字设计成建筑或者公共设施,让它成为生活场景中的一部分,并与人或其他事物发生互动,这种手法通常会把文字做成三维效果,然后在此基础上去添加相关的图片元素。注意,文字本身才是重点,所以添加的图片元素不要抢了文字的风头,同样也要根据文字笔画的特点来转化成与其造型比较吻合的场景,比如倾斜的笔画可以做成楼梯或者滑滑梯。把文字的笔画或造型设计成图形比如把文字的笔画替换成与其意义相关的图形,或者把文字的外观造型设计成跟其含义相关的视觉图形,比如象形文字就具有这样的特点。在海报设计中我们可以设计得更夸张、更复杂一点。图文结合用与文字相关的图形跟文字组合成一个主体,从而形成一个主视觉图形,比如在文字的笔画轮廓里或者是文字的「字怀」部分填充图形。字体的风格和搭配的图形要在风格上尽量做到统一,比如手写字通常会搭配插画元素,书法字体会搭配中国风元素,立体字会搭配 3D 素材或摄影素材。结语文字图形化虽然不是很新颖的设计手法,创意性也不是特别强,但在商业设计中确实有着不错的效果,当然真要做得好也没有想象的那么容易,对于文字本身的设计、图片素材的创作与选择、文字与图形的组合方式等等都具有比较高的要求。另外,你的设计到底最适合以上四种手法的哪一种,也要有准确的判断。如何让画面更精致?注意这6个版式细节这篇文章我们来讲讲在设计手机详情页时,会经常用到的一些排版小细节。阅读文章 > 欢迎关注作者的微信公众号:「葱爷」本篇来源:优设网原文地址:https://www.uisdc.com/4-graphical-skills
文字 插画 信息 大家好,我是和你们聊设计的花生~ 今天我们继续聊聊海报设计。海报设计中一个比较令人头疼类型是多文字海报。由于功能需要或者甲方要求,文字数量极多,但海报的版面有限,如何在其中合理有序地安排大量文字信息,就成了一个需要好好思考的问题。今天就为大家总结了多文字海报排版的 3 种常见思路,从中我们可以学习如何高效地排版多文字内容,并清晰地进行内容传达。纯文字排版在文字信息过多的情况下,减少或直接不要图片或装饰元素,为文字排版腾出更多的空间,是最简单直接的方法。纯文字排版非常考验设计师梳理文字信息的能力,需要做好文字信息层级的划分,并熟练运用排版四原则。1. 划分好文字信息层次划分我们能一眼从海报上获取的信息是有限,所以要对文字信息的重要程度进行排序。吸引注意力、展现重点信息的文字,比如主标题、副标题、时间地点、活动特色等,信息层级较高,所以字号及版面占比要够大,才能第一眼吸引目标观众的注意。对活动、人物、注意事项等的详细介绍,是为想进一步了解活动内容的人提供信息,属于次要内容。无需第一眼就能看清,在字号上不用太大。版式设计中的文字层级怎么学?来看高手的实例演练!编者按:看似简单的版式设计,细节其实非常多。阅读文章 > 2. 排版四原则排版四原则即亲密性、重复、对齐和对比,能帮助我们将文字信息清晰有逻辑地进行呈现。更多关于排版四原则的详细讲解可以看这里自学体系第一课!写给新人设计师的界面排版原则(上)前面的视觉体系和大家简单提到过传统平面排版的四大原则:亲密性、对比、重复、对齐。阅读文章 > 图文分离在海报中插入图片、插画或相应的装饰元素,可以更好地表达活动主题和内涵,海报风格也会更突出亮眼。图画与文字分开处理是其中最高效的一种方法——插入单个装饰元素,并根据元素特性安排文字的位置,非常灵活。这个“元素”也可以是图形化的主标题,这样处理是一举两得——画面内容更加丰富有趣,主标题的信息层级也得到凸显。如果是整版的图片或者插画,需要有足够的留白空间用来安排文字,或者通过处理图片为文字留出空间。无论图片或插画的形式如何,文字部分还是做好信息层级的划分,并遵循排版四原则。图文结合这里的图文结合并非简单的将文字与图片排在一起,而是用图示或者插画取代大段文字,以可视化的方式地信息传达出去。图文结合的方式很适合场景化或者流程化的内容表达,比文字更加直接易懂,也能让海报主题鲜明,形式统一。图文结合的方法可以完美的和 2.5D 插画结合,配合文字变形搭建一个完整的插画场景,非常有意思。图文结合的方式对设计师的手绘有一定要求。如果觉得有难度,我们也可以通过一些免费可商用的插画图标库来弥补,这样效率也更高。拯救手残党!2021年4月值得收藏使用的6款插画图库插画图库大都遵循着特定的某种风格,并且数量不如其他的图库那样数量丰富。阅读文章 > 拥有这15个插画图库,足以抹平你和插画师之间的差距!不会画画是很多设计师朋友的「硬伤」。阅读文章 > 总结以上就是 3 种常见且易学的多文字海报排版方法:纯文字排版、图文分离和图文结合。多文字排版的方法还有很多,但是无论是哪种方法,梳理文字的信息层级都是最基础也是最重要。做好这一步之后,结合排版四原则,海报内容就能清晰有逻辑,信息传达也会更高效。本篇来源:优设网原文地址:https://www.uisdc.com/poster-layout-design
文字 设为 间距 今天带来的是台湾设计师施博瀚分享的Adobe illustrator 学习教程施博瀚instagram主页:www.instagram.com/bohanshih一、快速完成“剪贴风”标题字1)输入你要的文字;2)使用效果→扭曲与变形→粗糙效果;3)进入视窗,尺寸设为2%、细部设为0、点设为「尖角」,按下确定;4)完成选取文字。二、如何制作渐层网点1)绘制一个图形使用渐层填色;2)使用效果→像素→彩色网屏,调整想要的像素大小,将4个色版的网角度数设为相同的,按下确定;3)回到渐层视窗,双击打开色标调色,使用CMYK模式;4)尽量维持使用2个色版进行调色,网点效果较乾淨,完成。三、如何制作渐层网点1)输入想要的文字;2)使用效果→模糊→高斯模糊,设定想要的模糊程度;3)使用矩形工具拉出两个细长的矩形;4)打开渐变工具视窗,间距使用「指定距离」并设定你想要的间距;5)选取两个细长矩形,使用物件→渐变→製作;6)渐变制作完成后,叠合在刚刚模糊后的文字上,完成。四、如何将照片转为纯色调1)在photoshop开启图片,使用影像→调整→渐层对应;2)进入视窗,直接点击渐层色带;3)出现渐层编辑器,双击色标来更换想要的颜色,按下确定,完成。五、如何制作飘移文字1)使用文字工具输入你要的文字,按滑鼠右键建立外框;2)使用检色滴管工具将文字填上背景色;3)再复制一个外框文字填为白色;4)双击渐变工具,设定间距为「指定距离」以及间距的数值;5)圈选两个外框文字,使用物件→渐变→制作,完成。
图层 文字 画笔 最终效果首先绘制草图,在纸上画或是用手绘板都可以。我这边用到了手绘板,在AI中,用画笔工具(B),描边为1像素,先大致勾出字形。要注意的是,一组字中,笔画要统一,比如「口」字部分都用了连笔,红箭头处的笔画也做了统一,都带了尖角。2、大致的字形确定后,用细一点的画笔(大约0.5像素描边)再勾一遍字形,确定下每个笔画的细节。四个字的命题,可以在排版上增加些变化,让中间2个字小一些,两边的字大一些。3、草图确定后,用钢笔工具把字形勾出来,勾形的过程中也要不断调整笔画锚点和细节,锚点尽量少一些,笔画的转折才会更流畅。4、字形勾完以后,选择所有笔画,打开窗口—路径查找器,点一下联集,合并所有形状,AI的部分就完成了。5、字效制作:打开PS,新建文件1000*660px,分辨率72,背景填充白色,点击创建。然后在AI中,选中文字,Ctrl+C复制,再到PS中,Ctrl+V粘贴,选择形状图层,点确定,将文字导入到PS里。6、将文字填充颜色#c18e40,双击「文字」图层,给文字添加图层样式——描边,描边大小2像素,描边颜色#361201。7、从网上找到一张金色的纹理素材,将纹理层拖到文字层上方,选中纹理图层,Ctrl+Alt+G,剪切到文字中。8、给「纹理」图层添加蒙版,选择PS自带的柔边画笔,调整大小和不透明度,将文字上半部分的纹理轻轻擦除一些,效果如下图所示。9、接下来给文字添加些立体效果。将「文字」层复制一层放到最上方,双击图层添加图层样式——斜面和浮雕,然后将图层的填充改为0,Ctrl+Alt+G剪切到「文字」层中。10、新建一层,剪切到「文字」层中,选择画笔工具,用柔边画笔,颜色#fff6a0,在文字的上半部分轻轻涂抹下,把文字提亮一些,再选择深一些的颜色#ceaa76,在文字底部涂抹下。11、接下来,给文字添加高光。把「文字」层复制一层,放到最上方,双击图层添加图层样式——斜面和浮雕,将图层的填充改为0,Ctrl+Alt+G剪切到「文字」层中。12、复制「文字」层,移到图层最下方,命名「文字2」,去掉这个图层上所有的图层样式,将文字填充颜色#4b2b1e。选择移动工具,再选中图层「文字2」,按住Alt键,再按键盘向下箭头,点7下,向下复制7个文字层,然后选择所有文字层,Ctrl+E合并,给合并后的图层命名为「厚度」。13、新建一层,剪切到「厚度」图层中,用柔边画笔,选择颜色#e77d41,在文字每个笔画的中间部分涂抹一下,让厚度层有一些反光。14、复制「厚度」图层,命名「厚度2」,将其移到图层最下方,添加图层样式——描边,描边大小为5像素,颜色选择黑色。新建一个图层,用黑色画笔,将文字的空隙处涂满,文字部分就完成了。15、将背景填充黑色,用钢笔工具绘制一个盾牌,双击图层添加图层样式。渐变叠加。16、色值从左到右分别是#e7c273、#4b2410、#fbdb96、#c3922f、#f1cf87、#fefaf5。17、描边点击图层样式的「加号」,可以添加多个描边效果,底部的上下箭头可以调整每个描边效果的顺序。这里给盾牌添加了3层描边。18、描边119、描边2描边320、复制盾牌,移到图层最上方,去掉所有图层样式,填充黑色,然后Ctrl+T,按住Alt键同比缩小居中。21、给复制出来的盾牌添加图层样式——内阴影,如之前所述方法,一共添加2层内阴影,参数如下。22、绘制一个白色矩形,剪切到黑色盾牌中,不透明度为35%。23、用钢笔工具,在盾牌后面绘制翅膀。给翅膀添加图层样式——斜面浮雕。24、两边翅膀图层样式的阴影角度有些不一样,其他参数一致,如下图所示。25、在翅膀和盾牌之间新建图层,绘制盾牌的阴影,色值为#553015,图层混合模式为「正片叠底」。26、将文字显示出来,在文字和盾牌之间新建图层,用画笔工具画出阴影,颜色为黑色,图层混合模式为「正片叠底」。27、绘制丝带用钢笔工具,把丝带的形状绘制出来。新建一层剪切到丝带中间部分,用柔边画笔工具,提亮丝带亮部,加深丝带的暗部。亮部色值#f89f17,暗部色值#920816。复制中间部分的图形,缩小居中,并添加图层样式——渐变叠加,让丝带的边缘有厚度一些。左右两侧的丝带,也是先做了一层渐变叠加,然后用钢笔工具勾出阴影的形状,剪切到图形中。28、用钢笔工具,选择路径,沿着丝带的弯曲度画一条路径,然后选择文字工具,将光标移到路径中间点击一下,再输入文字,让文字沿着路径排列。29、在黑色背景上新建一层,选择柔边画笔,色值#6d3927,放大画笔,在背景中间点击一下,绘制一个光晕。30、网上找一些光效的素材,用蒙版擦掉不需要的地方,放到文字上,图层混合模式为「滤色」。31、Ctrl+Shift+Alt+E盖印图层,打开滤镜——锐化——USM锐化,设置参数如下,然后再打开滤镜——杂色——添加杂色,让文字整体效果更精致一些。最终效果:
星火 文字 符号 什么?还有人不知道这种字体效果是怎么做的?好吧,就让可爱又迷人的星火君把这个方法分享给你们吧!开始学习啦!教程步骤1.打开ai输入文字。鼠标右键单击,选择变换——对称,之后选择水平,并点击复制。把文字镜像复制一个。2.符号面板整体旋转90°,并调出符号面板。选中文字,鼠标拖入符号面板备用。3.画圆用椭圆工具制作一个正圆之后选择效果——3D——凸出和斜角。勾选预览,调整角度和凸出厚度。之后点击贴图,勾选三维模型不可见,选择第3个面,符号选择我们刚刚拖进去的文字,也就是新建符号,点击缩放以适合,让文字贴合画面,点击确定。再稍微调整角度,调到合适的位置,就可以了。4.扩展外观之后对象——扩展外观。右键取消编组,再右键释放剪切蒙版。这样就可以随意更改文字颜色啦。看起来步骤很多,其实操作起来还是很简单的。everybody,学起来啊!那小分享就到这里吧,下期再见哦~原文地址:诗人星火宇宙(公众号)作者:星火君
图层 样式 文字 本文的文字效果都是用图层样式来完成的。首先选择好想要的文字,然后用多个图层样式,分别加上纹理、渐变、描边、投影、发光效果等;最后在底部加上适合的边框和背景。最终效果1、新建文件。打开PS软件,按Ctrl + N 新建文件,尺寸为1680 * 993像素,分辨率为72像素/英寸,然后点确定。2、填充背景色。把前景色设置为黑色,选择油漆桶工具,在背景上点击一下填充黑色。3、输入文字。在工具箱选择“横排文字工具”,然后在属性栏选择好字体,字体大小需要设置大一点,颜色为红色;在画布上点击一下输入文字,文字加好后按Ctrl + T 变形,稍微变斜一点。4、设置图层样式。点击图层面板下面的图层样式按钮,选择投影,参数及效果如下图。5、复制文字图层。按Ctrl + J 把当前文字图层复制一层,然后在文字缩略图后面鼠标右键选择“清除图层样式”,过程如下图。
文字 图层 盖印 本次教程将和大家分享下如何使用AI结合PS来制作一款微立体的卡通字体。接下来就让我们一起来看看吧。思路解析“双击666”有给你点赞,你很棒的意思,所以大致思路是将点赞的图形结合到文字中,做一款微立体的卡通字~~有了思路以后就让我们开始制作吧!实现软件AI、PhotoshopCC步骤展示1.字形绘制(1)首先绘制草图,这边直接用手绘板绘制~~打开AI,选择画笔工具(B),描边为1像素,先大致画出文字和图形的组合方式。这一步,主要能把心中的想法表现出来即可。(2)大致的草图确定后,用钢笔工具或画笔工具,在草图的基础上再细致的勾勒字形。这一步,需要确定好文字笔画的前后遮挡关系,这里要注意的是,线条和线条之间不要有空隙,勾完线以后用“直接选择工具”调整一下锚点,线条之间尽量闭合,后续上色会很方便。到这里,AI的部分就完成了,接下来就可以导入PS开始上色了。2.导入PS(1)打开PS,新建文件1000*660px,分辨率72,背景填充白色,点击创建。(2)在AI中,选中线稿,Ctrl+C复制,再到PS里,Ctrl+V粘贴,选择形状图层,点确定,将线稿导入到PS里,调整好位置和大小。(3)给背景填充颜色#13a1af,中间用柔边画笔工具提亮一些,色值为#42c5cf。3.字效制作(1)将“线稿”复制一层,得到“线稿2”右击“线稿2”图层,选择“栅格化图层”,我们先在这一层上色。然后把“线稿”层移到最上方,锁定。(2)选中“线稿2”图层,用魔棒工具(W),按住Shift键,点选文字部分如图,填充黄色#f2e326,爱心颜色为#f79e74。(3)双击“线稿2”图层,添加图层样式“内发光”,参数如下图,然后在“混合选项”中,勾选“将内部效果混合成组”,并去掉“将剪贴图层混合成组”前面的勾。(4)新建一层,剪切到“线稿2”图层中,找一支带颗粒的笔刷,色值为#f0cb25,在红圈圈处涂抹下,加强一下文字的黄色阴影。(5)选中“线稿2”图层,用魔棒工具(W),按住Shift键,点选文字的厚度部分如图,然后新建一层,命名为“厚度”,填充深绿#1593a2。(6)双击“厚度”层,添加图层样式“内阴影”,参数如下:(7)新建一层,用给文字填充颜色的方法,给文字周围的气泡填色#efefd5。然后隐藏绿色背景,Ctrl+Shift+Alt+E盖印文字,得到“盖印”层。在盖印出来的图层上,用橡皮擦工具擦除文字周围琐碎的装饰元素,然后双击“盖印”层添加图层样式“描边”,把“盖印”层移到所有文字层的最下方。(8)到这里,觉得文字的线稿有点细,我们把之前锁定的“线稿”层复制一层,分别向右、向上移动1像素,让文字的描边粗一些。然后新建一层,将文字红圈处填充黑色。(9)用钢笔工具,给文字绘制装饰线条,描边2像素,色值为#d6ad15。(10)选中图层“线稿2”,按住Shift键,用魔棒工具点选文字的黄色部分,然后打开“选择”—“修改”—“收缩”,收缩量为8像素,新建一层,用柔边画笔工具,选择白色,给文字绘制高光,效果如图:4.调整(1)用柔边画笔工具给文字绘制投影,然后在气泡中打上文案。(2)Ctrl+Alt+Shift+E盖印图层,打开“滤镜”—“锐化”—“USM锐化”,设置参数如下,然后再打开“滤镜”—“杂色”—“添加杂色”,给文字增加些颗粒感。最终效果展示:最后,感谢大家的阅读,教程中涉及到的参数、色值等,仅供参考,并不是唯一的标准,大家在练习的过程中,可以根据实际情况灵活运用。希望我的分享会对你有所帮助~~来源:字体帮
手写体 文字 黑体 今天主要给大家带来的是案例实操,为了让大家加深理解我会用一套文案去设计三个画面,让大家看一下变化的过程和思路,好啦闲话不多说下面进入今天的文章吧~这里使用了手写体的英文和黑体的字形。这样做既具备了黑体的高识别的特点,又用手写体的英文中和了调性不至于让文字看起来太过生硬,再加上适当的手写元素融合让信息组的层级也变得非常丰富。造型我们之前已经确定过了要保持曲线的形态,那么看了目前这个设计后我们就明确了内空间的形态,它需要又能承载主标题,又能以曲线的形态存在,最好能同时串联主体和主标题。还记得我们第一稿选择了上下分割构图后,主空间的结构调整为对角结构,这次我们给对角结构调整为上下结构。本次我们还是选用上下分割构图,在主空间内我选用和第一个类似的对角结构,但是左右要翻转一下。本期教程到这里基本就结束了,本次我们学习了如何使用图片,如何强化图片的思路,也知道了很多观察图片特征特点的方法。建议大家可以在私下积极尝试并且和我互动交流。最后谢谢大家的观看,我们下期再见。让设计立马变潮!收好这7个文字排版技巧我猜很多人在工作中都被客户或老板说过,设计不够时尚,其问题可能出在设计风格、色彩、画面元素、排版等方面,所以今天就来分享几个很潮的排版技巧:交叉文字色块即在两个或两个以上的长条色块上排一行文字,然后旋转色块使其交叉,大家对这种排版方式绝对不陌生,效果有点像电影中案发现场阅读文章 > 欢迎关注作者微信公众号:「视研设」本篇来源:优设网原文地址:https://www.uisdc.com/copywriting-design
图层 效果 文字 最终效果1、打开网站书法迷,输入“充能站”三个字,选择合适的字体下载。2、将下载的字体拖到Ai中进行简单的处理,根据字体字形以及负空间关系进行排版,加上UI(user interface)英文,如下图。3、打开PS,新建1000*660画布,将Ai中的文字复制到PS中(粘贴为智能对象),首先简单处理一下背景,我们直接在百度图片中找到一张合适的岩石素材,拖动到PS中,并将图层置于底层,效果如下。4、背景为纯黑白色,比较单调,我们来给背景上色,在背景图层上面新建一个图层,命名为“背景上色”,填充浅棕色(色值:#b6632f),并将混合模式改为“颜色”,效果如下。5、为了更加突出文字主体,我们将文字四周的背景压暗,在“背景上色”图层上面新建一个图层,命名为“背景压暗”,将图层混合模式改为“正片叠底”,颜色选择黑色,调整为合适的不透明度,用画笔在背景四周进行涂抹,效果如下。6、下面我们开始正式处理文字层,首先我们改变一下文字的颜色,将文字改为黄色,在“文字”图层上面新建一层,同时按住Ctrl+Alt+G制作剪切蒙版,用画笔工具将颜色调成黄色(色值:#efa100),在文字图层上面进行涂抹,效果如下。7、下面我们给文字图层增加厚度,选中文字图层,按住Alt键的同时按键盘的下方向键,移动并复制图层,重复8次以上操作,得到文字层厚度,将厚度图层合并并转化为智能对象,在文字厚度图层上面新建图层,制作剪切蒙版,用画笔涂抹,将文字厚度图层改为红色,效果如下。8、在文字厚度涂抹图层上面继续新建图层,并制作剪切蒙版,图层模式调整为“叠加”,用白色画笔在厚度图层上相应位置进行涂抹,给文字厚度增加更多细节,效果如下。9、给“文字”层添加图层样式,制作立体效果,在文字层右侧双击调出图层样式对话框,首先添加“投影”,“投影”相关参数设置如下图,继续添加图层样式“斜面和浮雕”相关参数设置如下,呈现效果如下图。10、下面我们在网上找一张金箔素材叠加在文字图层上面,将图层混合模式改为“叠加”,效果如下。11、在文字层上面新建一层,建立剪切蒙版,用白色和黄色画笔在文字边缘进行涂抹,制作光感效果,效果对比更强烈,效果如下。12、下面我们来处理英文字体,用之前同样的方法将英文字体改为黄色,然后建立图层蒙版,用画笔工具(选择66号画笔),颜色改为黑色,在图层蒙版上进行涂抹,擦掉英文的一部分,制作出一种若隐若现的效果,为英文图层添加投影,效果如下。13、下面我们为文字增加光效,当然可以从网上找素材直接添加即可,这里我们自己制作一个,新建一个图层,用选框工具画出一个矩形,填充黑色,然后执行滤镜——渲染——镜头光晕,调整合适的参数得到如下效果。将图层混合模式改为“滤色”,并擦除边缘比较生硬的地方,使其平稳过渡,并调整合适的位置,得到最终如下效果,那么今天的案例我们就制作完成了,你学会了吗?
调性 图片 文字 如果说设计师有一项技能是必须要学会的,那么对于图像的处理一定是一个离不开的话题。很多小伙伴私下找我聊天的时候都提到的不知道如何使用图片,不知道如何认识和发挥出这个图片的自身优势。这样的结果很容造成要么是图片和我们自己选择的元素不搭,或者更严重可能会造成自己设计的素材图形和图片部分互相干扰从而整个画面陷入失衡的状态。今天董掌柜准备用一篇文章来跟大家详细的讨论,一张图到手后我们该如何进行分析,以及如何针对图像信息的特点做出适合的操作。当然本文也会谈到关于解析图像问题的思路和应对方式。刚才说完了定位,那么预设是什么呢?预设指的是我们做好定位后针对其参考图片进行的特征分析,分析出来的特征结果是我们在做设计的时候要参考使用的。例如我们刚才提到的纪实陈述风格,通过观察我发现他可能有以下特征,第一他的文字都相对简单简约,字形偏细这意味着此种风格要以图片本身的内容为主,文字只是做说明作用和辅助作用。第二可以采用上下分割的形式让图文分离,避免文字干扰图片。第三,图片本身不适合有过于强烈的冲击力,相对柔和自然的图片会更适合此风格。这个时候难点就来了,面对这种特别相近的风格我们应该如何做出分析处理?首先我们要把设计分成四点,第一是文字维度,显然他的文字处理要比纪实风格复杂的多,但是又没有促销那么复杂,所以第一条就可以确定下来了,文字的复杂程度适中,文字的粗细偏细。第二就是主图的内容,可以看到安静清新的风格更多表现的是整体清新安静的气质,而非图片里的内容,图片只是作为加强调性的一个元素,如果仅仅从预设定位上考虑,说白了图片就是用来加强清新安静的视觉印象的。第三就是最明显的特征,也就是不管是标题还是辅助元素都会出现大量的手绘素材,用来拉近与观者的距离。第四则是画面会留有足够的留白空间不会堆积的特别慢,标题和主体不会形成强烈的对冲,这些就是我个人分析的过程。当获取到这些信息后,我们自己的设计就会轻松很多。如果做复古感的设计我们依旧是从这几个角度考虑,第一文字肯定是要选用相对老一些的字体,例如这里的字体就类似招牌体,如果是换成我们的图片我们可能会选用明朝体搭配古罗马体。第二图片内容不存在过于明显的现代元素即可。第三最明显的特征就是整体的饱和度不会特别的高,尤其是欧式的复古饱和度会更加的低。第四要使用复古对应时代的特殊元素来强化复古的视觉印象。视觉对比度其实就是项目调性的设计大方向,视觉对比度会随着项目展现欲望的增强而同时增强反之亦然。再简单点来说就是你想让人第一眼就注意到你还是想让人沉浸式的观察你的作品。一眼注意的显然更符合大部分的商业目的,他的传播力是相对比较强的,像是常规的促销打折,电商活动等等都采用高视觉对比度的设计。沉浸式观察更适合应用在场景中,比如咖啡店桌子旁的一张海报,又或者是展会中的一个视觉作品。当然并不是说沉浸式的只能用在场景里,可以是针对某一类小众人群的也是可以,因为其设计中出现的元素可能就会让对应的人群停留下来细细观看。所谓形式形态其实决定的就是画面元素的主要造型倾向。倾向分为直,曲,斜三种。直对应的情绪是正式、平稳、安静、和谐这类的项目调性。曲对应的是流畅、自然、自由、灵动、柔软、可爱等项目调性。斜则对应的则是动感、速度、对抗、不稳定感等调性的项目。形式形态在画面中的影响包括一下几个部分,第一是我们刚才提到的造型控制,第二是字形的选择,第三还包括信息的编排形式。造型的控制因素有很多,主体的形态,项目的调性,特殊风格甚至是信息的多少都可以成为造型的主要依据。还要提到的一点就是这几种可能会同时存在,并不是互相排斥的关系。光说可能大家没有这个概念,下面我给大家找一些具体的设计图一看就能理解了。字形方面就更好理解了,根据项目的调性确定字形的选用,字形的特征可以粗略的分为这几种,圆、方、斜、飞白、曲等。我们可以根据主体的形式形态去选择字体。结合上面的知识我们来做一下案例实操,看设计如何从无到有一步步的进行演变,还有对项目调性,文案内容的分析,尤其是针对图片的处理过程大家一定要尽可能的上手尝试一下。这里我刻意选择了非水墨的国风设计风格,水墨的大家肯定都会用了,这里我就做一个不依赖水墨素材的设计了。同样也可以走传统大气的感觉以图为主文字为辅,拉大文字和图片的大小差但是又不提升视觉的对比度,方法就是让标题别那么抢眼,让主体足够清晰,标题适当缩小拉高调性。这里大家可能会看蒙了,怎么比例差越大还越弱对比了。我们可以留心观察一下下面这组图,促销欲望越强的标题和主图大小就越接近给人一种叫卖的感觉因为到处都在放大给人视觉以膨胀感。而调性高级的设计往往标题都不会太大,即使标题面积大,其中的内白也会非常大,总之不会像促销性的设计标题一放在那,就感觉是一大片,这样才能给人告知的感觉,不会让人觉得很紧迫或者挑动你消费的欲望特别强。因为其形态更加类似长方形,我们的空间形态也是长方形,一个是横向的一个是纵向的,所以一定要先进行旋转,才能让主体最大限度的发挥作用,而不是因为其扁长的趋势造成画面的负空间,很多设计师都是第一步就已经在给自己找麻烦了,就是因为没有这种分析。 一图胜千言!如何给作品配图?图形在版面构成中,占有很大的比重,也有这样一说:一幅图片胜于千字。阅读文章 > 欢迎关注作者微信公众号:「视研设」本篇来源:优设网原文地址:https://www.uisdc.com/picture-material-use
阴影 文字 画笔 长阴影是扁平化风格里的阴影表达,它的夸张和象形手法非常到位地给予了阴影以别有洞天的形态。在UI设计中,当你想要让图标或LOGO变得更具吸引力,最好的方式就是增添上长阴影,其原有的平淡将被打破,带来更多丰富的视觉感受。为规则几何形制作长阴影应该并不算困难,然而,当我们面对的是并不能确定一以贯之的文字外形样式,所做的工作将会比较繁琐。今天我们就来和大家分享一种制作长阴影的方法,根据这个方法,任何形态的长阴影都能在短时间内完美绘制出来。先看看效果图一、制作长阴影画笔首先,让我们打开PS,新建一个680px*680px的文档,文档填充背景为青色,#b2ebda。STEP 01在网页设计中,我们大概会遇到需要特别突出文字的时候,如"促销"、“折扣”等,这时,先在画面中央安排好需要增加阴影的文字。这里我安排的是英文单词,但中文字体仍然适用,只是需要在字体风格上与此相匹配。我安排了两行字体,一行是较大的字体,字距较紧密,而下面一行的字体稍小,字距较宽。STEP 02图层面板中,将文字图层合并为一个组,并复制这个组。右键点击拷贝的文字组,并选择“合并组”,这时新的被复制的组就合并成一个图层。STEP 03在按住“Ctrl”键的情况下鼠标单击上一步我们所合并的图层,这时出现了以文字边缘为蚂蚁线的选区,也可以说这是文字的轮廓。保持选区的情况下,进入【编辑>定义画笔预设】,在弹出的对话框中填入画笔名称。这时,我们就新建了叫做“文字长阴影”的画笔。这个画笔将会成为我们的长阴影的基础形。刚制作完毕的长阴影画笔并不能立刻使用,大家可以试着选中这一画笔画出一条痕迹,没错,这就是我们通过画笔制作长阴影的思路关键,但是,很明显表现并不理想,画笔笔触里的间隔还看得分明,并没有连缀成片。STEP 04当然,我们要解决这一问题,这时让我们来调试画笔。点击画笔面板的图标,进入该新建画笔的参数。只需要将原有默认的间隔25%改为1%,就实现了连缀的问题。二、绘制长阴影STPE 05在画布上,用参考线标出一个十字形。首先确认画笔工具选中的是文字长阴影的画笔,然后用钢笔工具,由十字形的中心位置开始到画布的右下角画一条路径。新建一个图层,在这条路径上单击鼠标右键,点选“描边路径”,在描边路径中选择工具“画笔”。STEP 06将上一步绘制的长阴影图层移动到文字组的下方。由于这时文字和长阴影都是黑色,并不能看出层次,因此需要修改文字的颜色为#6cddbc。然后用选择工具移动文字组将其放置于和长阴影刚好契合的位置。STEP 07在长阴影的下方再新建一个图层,在这个图层绘制一个紫色的正圆。然后将长阴影的图层混合模式设置为“正片叠底”,透明度降至30%。STEP 08增加正圆的目的是为了突出文字,也让长阴影有一个界限。因此,这时需要为长阴影增加一个蒙版,这个蒙版的形状为正圆的形状,让超出正圆的部分的阴影不可见。确定好位置后再在图层上单击右键“应用图层蒙版”。三、润色处理这时长阴影就绘制完毕了吗?当然没有!为长阴影润色出更多的细节看上去是永无止境的。在此,我们只需要简单做一两步,也许就能让我们的阴影脱离“呆板乏味”的印象了。STEP 09投影的边缘模糊也许是比较接近拟物的做法,然而,我们不能简单运用高斯模糊就可以了,这会让长阴影(接近文字的部分)看上去失真,也失去了长阴影的魅力。这时,让我们进入【滤镜>模糊画廊>场景模糊】,场景模糊允许我们可以选择模糊的位置,并且增加多个模糊点。我们将设置两个模糊点,一个模糊点的模糊值为3、另一个为2。STEP 10接下来,让我们为长阴影内部增加一点层次,这个层次关系是:离文字越近,阴影就越深。因此稍远的部分逐渐就不见。现在让我们为长阴影图层增加一个蒙版,在蒙版上拉出一条黑白渐变。这一点相信已不用我多说,蒙版中黑色部分是不可见,而白色的部分是可见,灰色就是中间的透明过渡地带。这时长阴影的模糊处理就完成了。这时长阴影的模糊处理就完成了,比起整体模糊来说,场景模糊是非常灵活的处理方式。STEP 11仔细观察过投影的小伙伴都有体会,当你的影子被太阳拉长的时候,除了被拉长的影子外,你的身体自身还有一个投影。这里的文字也不例外。为文字增加投影,便利一点的做法是直接添加图层样式,但这样做法显然是比较粗暴的。我们的做法是先复制长阴影图层,然后在其复制层的蒙版上重新拉出黑白渐变,其黑色的部分更靠近文字。将这个图层的透明度降至5%。还可以再增加一个复制层,继续将蒙版中黑白渐变的位置往文字的顶部移动。长阴影的润色部分就暂告一段落了。STEP 12因为看上去文字,尤其是较大的文字在阴影的衬托下略显单薄,因此可以增加文字的“厚度”,为文字组添加“斜面与浮雕”的图层样式。最终效果如下:后记学习的任何阶段,我们都不应受困于标签。就像长阴影这个标签一样,它永远有无限探索的空间,如果你只对现状满意,那么灵感濒临枯竭也不会是短时间发生的事。
效果 图层 文字 今天我们讲述一下金属字的制作过程,主要使用PS图层样式来完成,希望朋友让我们一起来学习吧。先看看效果图:首先需要一张深色的背景图,可以选择某种质感,最好是皮质,能使得文字效果更好。我们选择一种线条相对较粗的字体,我选择的是Copperplate Gothic字体,大家可以去百度下载。文字内容的,我选择的就是DUIA,大家可以自行发挥。接下来我们要添加图层样式了,添加前,我们先复制当前文字图层,留着备用。在文字图层上,我们首先添加斜面浮雕效果,增加文字厚度,突显立体感,具体数据如下。由于文字本身颜色比较浅,所以效果不明显,接下来我们增加渐变叠加效果,让文字有些金属属性。为了强化金属感,增加描边效果。已经有点样子了,但还是不够,我们再添加内发光和光泽效果,可以感受到金属的光感。视觉效果在不断增强,由于金属性质已经加大了,就需要有外发光效果了。并且文字的立体化很是明显,必然会有投影,我们再增加投影效果。由此立体金属字制作完成!开玩笑的开玩笑的,这才哪到哪?!文字的金属质感倒是很明显了,但不够锐利,金属的纹理性不强,我们就需要在复制的文字图层下手了。首先我们还是添加斜面浮雕,但效果略有不同。刻画出锐利的视觉感受,不过颜色上有点尴尬!到这个时候,我们要想办法去掉色彩,但保留图层样式,这个问题很多人都要头疼了,不过方法其实很简单,只需要把图层面板中填充的值改为0即可,我们来看看效果。这个地方大家要注意,很多同学只知道调节不透明度,却不知道调节填充。这里我解释一下,不透明度是针对整体图层进行显示效果的编辑,无论是图层样式还是图形本身效果,都可以控制;但填充,只针对图形本身的填充内容进行显示效果编辑,不影响图层样式的显示。这个方法有木有很简单实用,大家赶快学起来吧!当然,这还不是最终效果,我们在复制的文字图层上添加图案叠加效果,增加文字的金属纹理。具体的图案大家可以自己寻找,最好是纹理性较强的金属背景。最后,为了增强整体文字的层级效果,再次添加投影。展示效果如下,已经做到金属性的特点,立体效果的文字了。我们也可以添加一些点缀,找到一些发光点,使其文字发光性更自然。这么添加未免太过于明亮,视觉效果反倒变差,我们调整图层模式为叠加,结合不同明度调节,使得整体更和谐。最终效果如下。