当前位置:文章 > 设计元素构成与应用方法(二)
设计元素构成与应用方法(二)
ChiNa_威海_山岩 发布于 3月23日    分类:网页设计  教程/技巧     标签: photoshop 电商 教程 技巧 设计思维
浏览//评论
上期我们提到了图片构成的四个元素 [color=#FF0000][b]【1】背景【2】主体【3】文字【4】装饰。[/b][/color] [align=center][color=#FF0000][b][img=山岩ps小课堂17_02.jpg]http://image.135editor.com/files/users/417/4175834/201803/duvkKWVO_HmrZ.jpg[/img][/b][/color][/align][align=center]我们继续剩下的内容~[/align] [align=center][img=山岩ps小课堂17_04.jpg]http://image.135editor.com/files/users/417/4175834/201803/ewtOsJN4_y7Dz.jpg[/img][/align] 文字在图片应用中有三种比较常见的形式——[color=#FF0000][b]文字为主、图文并重、文字为辅[/b][/color]。文字为主和图文并重的图片大体有两种表现形式——[b][color=#FF0000]排版为主、特效为主[/color][/b]。而以文字为辅的图形因为文字不需要太过突出,多以排版形式为主,极少使用特效去影响主体。 [align=center][img=山岩ps小课堂17_06.jpg]http://image.135editor.com/files/users/417/4175834/201803/YPOyc9j5_fQB7.jpg[/img][/align] [align=center][color=#ff0000][b]文字为主——排版为主[/b][/color][/align][align=center][size=14px](想要突出文字,但文案字数过多,又不想单调排列的时候可首选)[/size][/align] [align=center][size=14px][img=山岩ps小课堂17_08.jpg]http://image.135editor.com/files/users/417/4175834/201803/7HJpHw6G_SDvX.jpg[/img][/size][/align][align=center][color=#FF0000][b]文字为主——特效为主[/b][/color][/align][align=center][size=14px](想要突出文字,并且具有明确的主标题,文案字数较少的时候可首选)[/size][/align] [align=center][size=14px][img=山岩ps小课堂17_10.jpg]http://image.135editor.com/files/users/417/4175834/201803/3KugSF54_qF9U.jpg[/img][/size][/align][align=center][color=#FF0000][b]图文并重——排版为主[/b][/color][/align][align=center][size=14px](图片跟文字都要兼顾,尤其是电商领域极为常用)[/size][/align] [align=center][size=14px][img=山岩ps小课堂17_12.jpg]http://image.135editor.com/files/users/417/4175834/201803/79jGhD9T_aQ2I.jpg[/img][/size][/align][align=center][color=#ff0000][b]图文并重——特效为主[/b][/color][/align][align=center][size=14px](想要突出表达某一文字,但又需要融合场景或产品,需要较高的技术能力)[/size][/align] [align=center][size=14px][img=山岩ps小课堂17_14.jpg]http://image.135editor.com/files/users/417/4175834/201803/zSjAhdvH_Vn7O.jpg[/img][/size][/align][align=center][color=#FF0000][b]文字为辅[/b][/color][/align][align=center][size=14px](以图片为主,往往是满版形式,文字作为辅助在图片四周分布,不会使用夸张的特效)[/size][/align] 下边方法来了,很多朋友在做文字的排版时总觉的自己的文字非常的别扭,但又找不到适合的解决方法,其实[color=#FF0000][b]文字的排版[/b][/color],简单来说只需要注意以下两点即可——[color=#FF0000][b]团结性与对比性[/b][/color]。文字在应用中大部分情况下一定不是单个存在的,而会是以一种组合的形式出现,而通俗来讲这个文字的组合就好比咱们身边的朋友圈,团结性——好朋友肯定是团结友爱,激情四射的;对比性——每个人的体貌,性格都不同,或高矮,或胖瘦,有张扬有内敛…… 关于[color=#FF0000][b]团结性[/b][/color]——通俗来讲就是各种大小文字集结在某一个集体里,我们在做文字的时候需要做的就是让这群家伙在一个合理的限定范围之内各种抱团,大部分情况下这个限定范围可以用一个矩形去表示,我们从上边的例图中每种选择一个来看: [align=center][img=山岩ps小课堂17_16.jpg]http://image.135editor.com/files/users/417/4175834/201803/4KpUfVBu_PIXG.jpg[/img][/align][align=center][img=山岩ps小课堂17_17.jpg]http://image.135editor.com/files/users/417/4175834/201803/TfRzKGzq_ATTF.jpg[/img][/align] [img=山岩ps小课堂17_19.jpg]http://image.135editor.com/files/users/417/4175834/201803/WjZ3QU3C_Whr4.jpg[/img] 在制图过程中我们不要吝啬[color=#FF0000][b]参考线[/b][/color],尽量让图片中的文字元素找到集体感,让团结的爱不仅在小范围内传播,也要扩散到更广阔的大集体中,这样画面才不会丢失整体。也许你现在回头去看你的一些作品会发现很多文字正在散兵游勇,单独作战,而只需要简单的几条参考线,你就会发现团结的力量是多么的伟大。 对比性是文字排版的核心,没有对比的文字看起来呆滞死板,而有了对比之后的文字会更具有观赏性和灵动性。而跟我之前提到的人的体貌性格特征一样,文字的对比用来用去也无非就是那么几点,[color=#FF0000][b]大小对比,高低对比,粗细对比,颜色对比,松紧对比[/b][/color];有的朋友又会问,那这些对比我即便是知道了但是也不知道怎么用好啊,其实这也是很简单的一个问题,就跟我们身材各异的人,总归能买到合适的衣服一样,在大部分情况下这些对比也都是有规律和方法可循的。首先我们需要了解在我们团结友爱的文字集体,主要是由[color=#FF0000][b]主标题、副标题、描述、正文、其他[/b][/color]几位成员组成的。 在文字形状部分,主标题就像是个别领导,膀大腰圆,所以会比较大,比较粗;而副标题由于长期跟领导混所以也会比较大一坨,但是要突出领导的地位还是会收敛一些;最后就是描述部分,描述就好比职员,肯定是不可以抢领导的风头的所以会跟领导完全相反又小又细;而正文就好比平头百姓,都是比较平平凡凡,但是可能会有各别领导眼中的“愤青”会在百姓这个集体中做一些反常的举动;其他其实是最可怜的,用时下比较流行的说法就是临时工,有时候需要在那个位置上,而有时候可以直接去掉。而在颜色部分,往往都是主标题占据主导,要么最亮要么最暗,其余的文字颜色都要配合主标题的颜色进行挑选和更改。当然,部分图片可能会有多个领导班子,县长、市长、省长……说了这么长,我们用图片去明确一下这种关系。 [align=center][img=山岩ps小课堂17_21.jpg]http://image.135editor.com/files/users/417/4175834/201803/KJzqaX7Q_Pg7W.jpg[/img][/align][align=center][color=#FF0000][b]多领导体系电商[/b][/color][/align][align=center][size=14px]上图为了节省时间我就不一一标注了…… 大家应该能感受到…… [/size][/align] 如果看到这里你还是觉得对于文字的排版无从下手的话,我再提供一个更简单的方法,虽然死板但是不会出现太多的错误,以后可以在这个基础上不断完善、不断提高,以电商banner为例,我们的排版可以围绕[color=#ff0000][b]主标题的字数多少[/b][/color]来应用两种方法,当然电商中段落数量尽量不要[b][color=#ff0000]少于三句超过五句[/color][/b],如果不够三句可以把其中觉得是主标题的那段翻译成英文字,现在翻译英文方式很多,而且也没有必要害怕对不对,没有人那么闲跟你在英文对错上较真,实在对英文没有把握,翻译成拼音也是可以的;如果文案过多,也不要紧,我们可以把除了主副标题以外的文案都当做是描述来处理,方法后边我会去讲,我们先以这三段话做例子【一周不重样】【出街就要吸引眼球】【作为女人必须时尚精致】首先先不要考虑那么多,直接在画布上打上文案。 [align=center][img=山岩ps小课堂17_23.jpg]http://image.135editor.com/files/users/417/4175834/201803/rysu2DCU_7DsU.jpg[/img][/align] 比如“一周不重样”是主标题(主标题字数少),就要选择一种又粗又大的字体,一般这种字体名字中都带“黑”“粗”“劲”字。选择另外一段作为副标题也应用这个字体,最后剩余的一段选择细体,一般也就是带“细”“纤”字的字体,如果你能在这个时候考虑到女性要用柔和的字体,男性可以使用刚硬的字体就更好。 [align=center][img=山岩ps小课堂17_25.jpg]http://image.135editor.com/files/users/417/4175834/201803/vrB7vJBt_NGbr.jpg[/img][/align] 在文字两边建立参考线,并将文字以参考线为基准ctrl+T两边对齐,记住要按住shift保持等比例,并保持每句话之间的间距一致。 [align=center][img=山岩ps小课堂17_27.jpg]http://image.135editor.com/files/users/417/4175834/201803/UP4qHFjb_FgUh.jpg[/img][/align] 在文字两边建立参考线,并将文字以参考线为基准ctrl+T两边对齐,记住要按住shift保持等比例,并保持每句话之间的间距一致。 [align=center][img=山岩ps小课堂17_29.jpg]http://image.135editor.com/files/users/417/4175834/201803/2V5REmGI_CBGm.jpg[/img][/align] 根据主次将文字颜色进行细微调整,但目的是要让主标题更突出。 [align=center][size=14px][img=山岩ps小课堂17_31.jpg]http://image.135editor.com/files/users/417/4175834/201803/QV9KZb7Z_2pDW.jpg[/img][/size][/align] 最后我们可以在这个基础上再进行微调,比如增加一些形状进去增强设计感,改变某几个字的颜色显得俏皮,拉大某几句之间的间距使排版灵动,增加一些其他的文字元素丰富内容等等,其实方法变来变去真的就是固定的那么几个,只是看你平时怎么去积累他们,并且在使用的时候注意好[color=#ff0000][b]对齐、居中、对比[/b][/color]等细致的问题。还要补充一点是英文字母除了特殊情况[color=#ff0000][b]尽量使用大写[/b][/color],以保证高度是一致的,文字要团结~嗯! [align=center][img=山岩ps小课堂17_33.jpg]http://image.135editor.com/files/users/417/4175834/201803/sUNfGGq3_XBAd.jpg[/img][/align] 主标题字数较多的情况,方法与上边讲的大体相同,只是对齐的方式可以使用左右对齐或者中心对齐。还是上边那三句,我们改用出街就要吸引眼球作为主标题来排列,我省去中间的步骤,直接看最后的结果,大家肯定能看明白。 [align=center][img=山岩ps小课堂17_35.jpg]http://image.135editor.com/files/users/417/4175834/201803/hdhhRMhf_dBOk.jpg[/img][/align] 由于我觉得很重要,在这里再提一下我曾经在别的教程中有提到的关于文字使用中需要避免的三个问题——[color=#ff0000][b]字体的选择[/b][/color]:很多朋友没有很强的做字能力,所以常常会使用现成的字体,但是我们一定要搞清楚文字所在的环境,去找到合适的字体,比如很多人爱用的霹雳体,如果是比较喜庆的场面,你用这种字体做文字肯定在效果上是很突兀的,再比如比较正规的、严肃的场合,用一些娃娃体,少女体也肯定是驴唇不对马嘴。 [align=center][img=山岩ps小课堂17_37.jpg]http://image.135editor.com/files/users/417/4175834/201803/VcfBpI24_dmCV.jpg[/img][/align] [b][color=#ff0000]字体的种类:[/color][/b]一张图片中不要使用过多的不同字体,这样不仅会让主次不明确,而且也会显得特别的乱,最好把字体数量控制在三四个左右,既有变化性,也不会很混乱。 [align=center][img=山岩ps小课堂17_39.jpg]http://image.135editor.com/files/users/417/4175834/201803/nSZaUXFJ_9L6L.jpg[/img][/align] [color=#FF0000][b]字体的颜色:[/b][/color]有些颜色过于艳丽的海报往往会让观者难受的要死,一般情况下撇几眼就会不想再看下去,颜色使用不当不仅会让眼睛疲劳,甚至会影响观看者的情绪。 [align=center][img=山岩ps小课堂17_41.jpg]http://image.135editor.com/files/users/417/4175834/201803/wjpyBJY9_GPWQ.jpg[/img][/align] [align=center][b]对于上方部分对您造成的一切不适,本人概不负责 [/b][/align] [b]关于文字特效的部分一两句话也不可能讲明白,之前文章做过讲解,也会在后续的教程中提到,这里不再赘述。[/b] [align=center][img=山岩ps小课堂17_43.jpg]http://image.135editor.com/files/users/417/4175834/201803/SIBQKNEz_2Ftm.jpg[/img][/align] 装饰元素在图片中不一定必须出现,但是一旦出现就要让画面变得精彩起来,很多人可能会对装饰元素感到迷茫,不知道如何去应用才会合适,希望接下来的文章会让你改变这种状态。 装饰元素大概分为以下几种——[color=#ff0000][b]文字装饰、光效装饰、几何形状及线条装饰、实物装饰[/b][/color]。 [b][color=#ff0000]文字装饰[/color][/b]要与正常的文字排版区分开,一般用来装饰的文字很多情况下我们不会去看它写的什么,甚至都看不清它写的什么,它仅仅只是为了装饰图片效果而放在那里的,在电商描述板块和摄影类作品中比较常见: [align=center][img=山岩ps小课堂17_45.jpg]http://image.135editor.com/files/users/417/4175834/201803/6mktdXwI_nhM9.jpg[/img][/align] [b][color=#ff0000]光效装饰[/color][/b]与我们上期提到的光的应用基本雷同,这边不去纠结,不过这里我需要额外说点题外话,很多人愿意跟别人要素材,我个人是这么理解要素材这件事情的。只有自己亲手下的素材才是自己的素材,该用的时候你能想起来你素材库里有这么个东西,能真正帮到你,况且在你寻找某一素材的时候可能会找到其他更让你有灵感的东西(至少我很多时候都是会遇到这种情况);别人给的素材,顶多就是让你的素材库多了点东西罢了,很多都是记不住的,到该用的时候你还是不知道你原来有这么个东西。素材库这种设计师的命门,不是用来跟人比较自己有多少多少G的,而是让你作图的时候能更灵活、更方便的,请记住!那是[b][color=#ff0000]你的素材库[/color][/b]。 作为一个设计讲师,很多时候对一些设计师的小陋习愿意多说点东西,如果冒犯了个别朋友,请您谅解。 [b][color=#ff0000]几何形状及线条[/color][/b]是装饰中比较常见的一种效果,应用起来更多的是[b][color=#ff0000]点线面的结合[/color][color=#ff0000](或者叫填充与描边的结合)[/color][/b]难点不是怎么应用而是怎么去想,我在这边提供给大家一种思维方式——从简单到复杂,学会联想。以点为例。一段话的前方可以放一个点作为小装饰,那么这个点我们就可以展开更多的思维。 [align=center][img=山岩ps小课堂17_47.jpg]http://image.135editor.com/files/users/417/4175834/201803/v57hWeeS_SKWx.jpg[/img][/align] 图片中的点大部分时候还是与线配合使用,把上边的联想再应用到点线结合上。 [align=center][img=山岩ps小课堂17_49.jpg]http://image.135editor.com/files/users/417/4175834/201803/uG2y5mMQ_vhvh.jpg[/img][/align] 面的应用平时可以多做[color=#ff0000][b]画形延伸[/b][/color]的练习,比如画一个圆,然后不断对个圆进行补充和修改,不仅能开拓思维也能在平时作图中作为参考。 [align=center][img=山岩ps小课堂17_51.jpg]http://image.135editor.com/files/users/417/4175834/201803/gyr4S2E5_3xnF.jpg[/img][/align] 晶格化效果,也是比较常用的面的形式。晶格化软件网上貌似很多,但是我都没有用过,所以不在这里做误导,我个人平时有三种方法做晶格化的东西。 第一个是直接应用素材。 [align=center][img=山岩ps小课堂17_53.jpg]http://image.135editor.com/files/users/417/4175834/201803/bfDfxnXC_Js85.jpg[/img][/align] 第二个是通过滤镜——像素化——晶格化(ps本身的晶格化效果不是很突出,但是作为晶格背景来说还是可以接受的)。首先做一个渐变,颜色不要太深。 [align=center][img=山岩ps小课堂17_55.jpg]http://image.135editor.com/files/users/417/4175834/201803/MPOY7RfG_EPu3.jpg[/img][/align] 使用晶格化命令,数值自己拿捏。 [align=center][img=山岩ps小课堂17_56.jpg]http://image.135editor.com/files/users/417/4175834/201803/cBwAfa3u_Gj6p.jpg[/img][/align] 第三个是制作小范围的晶格效果的时候通过剪切蒙版去完成。 [align=center][img=山岩ps小课堂17_57.jpg]http://image.135editor.com/files/users/417/4175834/201803/fpKbJO7A_SnGR.jpg[/img][/align] [color=#FF0000][b]想要改变颜色可以建组后,剪切一个色相饱和度调整层,并勾选着色即可。[/b][/color] 想要改变颜色可以建组后,剪切一个色相饱和度调整层,并勾选着色即可。 还有就是自定义形状了,一些常用的符号,箭头,对话框,条框等等都可以通过下载得到 [align=center][img=山岩ps小课堂17_59.jpg]http://image.135editor.com/files/users/417/4175834/201803/PwutYqra_Rwyb.jpg[/img][/align] 说了这么多我们看看一些实例中几何形状及线条的应用。 [align=center][img=山岩ps小课堂17_60.jpg]http://image.135editor.com/files/users/417/4175834/201803/WUPVOCjs_jhfp.jpg[/img][/align] [color=#FF0000][b]实物装饰[/b][/color]是很多图片常用的手段,实物装饰没有太多的难点,只要累积了一定的素材基本都可以完成,我在这边说一说实物装饰的几种常见用法。 [color=#FF0000][b]装饰元素出现在画布边缘并且不显示全貌[/b][/color],既能保证画面不空洞,又不会太过抢掉主体;这种手法需要注意虚实变化,多用高斯模糊做一些虚化,效果会更明显。 [align=center][img=山岩ps小课堂17_62.jpg]http://image.135editor.com/files/users/417/4175834/201803/Z7Lawsyr_AvPB.jpg[/img][/align] [color=#FF0000][b]画面中应用若干实物装饰点缀[/b][/color],丰富画面的同时让画面的主题更明确。(我们要搞清楚主体跟主题的区别;主体是某个物体,而主题是画面所要表达的含义,两者是截然不同的)。 [align=center][img=山岩ps小课堂17_64.jpg]http://image.135editor.com/files/users/417/4175834/201803/6D4bX8An_DONA.jpg[/img][/align][align=center][img=山岩ps小课堂17_65.jpg]http://image.135editor.com/files/users/417/4175834/201803/3PmuJLUa_VZcT.jpg[/img][/align] [color=#FF0000][b]使用实物散落效果[/b][/color]是非常主要的实物元素应用的手法,通过实物的虚实散落来影响整体画面,这种方法不需要散落物数量的多少,而是需要注意大小变化、虚实变化、角度变化等,而且最好有部分散落物是超出画面的,以增加整个图片的延伸感 [align=center][img=山岩ps小课堂17_67.jpg]http://image.135editor.com/files/users/417/4175834/201803/wt2pPvDG_f4xF.jpg[/img][/align] 虚实效果可以通过滤镜——[b][color=#FF0000]模糊中的高斯模糊或动感模糊[/color][/b]去实现。 [align=center][img=山岩ps小课堂17_69.jpg]http://image.135editor.com/files/users/417/4175834/201803/yeNrdRJK_777p.jpg[/img][/align] 关于设计元素的构成与应用方法讲到这里,两篇近2万像素的长文,能对大家有一点帮助我就灰常开心了~ 以上例图如有冒犯请私信我~
收藏
 
分享到:
 
  • 直播课程:-
  • 视频课程:-
  • 粉丝:-
  • 回答:-
正在加载...

Copyright © 2015 xuehui.com All Rights Reserved 长沙维联文化传播有限公司 版权所有(建议使用1280以上分辨率、IE8以上版本浏览器访问)