当前位置:文章 > 版式解析大配图与文字提取
版式解析大配图与文字提取
ChiNa_威海_山岩 发布于 2018-07-04    分类:平面设计 教程/技巧     标签: photoshop 电商 教程 技巧 设计思维
浏览//评论
我们继续对第13期中的[color=#FF0000]大配图应用[/color]进行深入,上一期我们对[color=#FF0000]主体提取[/color]有了一定的了解,这一次我们针对[color=#FF0000]文字提取[/color]做一些讲解。 [align=center][img=山岩ps小课堂30_02.jpg]https://bdn.135editor.com/files/users/438/4388382/201807/r5RgcF7X_gzse.jpg[/img][/align] 文字为主的小版块跟分割型背景重叠摆放,画布四角有一些细碎的元素,使画面更加平衡。配图虽占主要体积,但由于版块的提取,在视觉上文案部分也不会太弱,可以说文字和配图的[color=#FF0000]重要性是差不多[/color]的。 [align=center][img=山岩ps小课堂30_04.jpg]https://bdn.135editor.com/files/users/438/4388382/201807/X6e8sRuV_ZE9E.jpg[/img][/align] [b]使用条件:[/b]突出主体某一属性特征时可以用的版式类型,文案数量相对适中,不要太少,太少的文案提取成一个版块,一方面不太好控制留白,一方面内容上也会相对单薄。使用一些单词(中英文皆可)、句子或者小符号,作为平衡空间用的装饰效果。 [b]版式特点:[/b]版式的核心特点是[color=#FF0000]文字部分的版块化提取[/color]。上一篇中,我们是通过主体提取的方式对大配图进行了升华,这次我们把思路从[color=#FF0000]主体提取改为文字提取[/color],但是由于文字本身的疏密构造和大小体积,直接提取会对阅读效果和视觉感官都有一定的影响,所以结合形状以文字版块的形式提取会更加合理,下图做了两种方式的对比效果,右侧文字更加突出,版面交代也更明确。 [align=center][img=山岩ps小课堂30_06.jpg]https://bdn.135editor.com/files/users/438/4388382/201807/FPGbbQPX_Rsd4.jpg[/img][/align] [b]注意细节:[/b] ①短文字的应用要注意标题、正文、装饰部分的[color=#FF0000]对比性[/color],尽量不要做成一个色调、一个粗细、一个大小、一个字体,这样会对阅读的主次和美观性都有一定的影响,尽量让标题醒目一些,正文规范一些,装饰英文虚弱一些。 [align=center][img=山岩ps小课堂30_08.jpg]https://bdn.135editor.com/files/users/438/4388382/201807/uXu7e7pE_qCOR.jpg[/img][/align] ②边角平衡用的装饰文字和图案不要太大,小巧一些,他们的作用只是[color=#FF0000]装饰和平衡[/color],并不需要非常突出,影响主体视觉,尤其一些英文部分,尽量不要大小或重量上超过中文,毕竟大部分浏览图片的买家还是以国人为主,识别的主次要有区分。 [align=center][img=山岩ps小课堂30_10.jpg]https://bdn.135editor.com/files/users/438/4388382/201807/2u87D22X_YZSM.jpg[/img][/align] ③如果当前版块没有任何轮播、翻转、按钮等作用,就尽量[color=#FF0000]不要[/color]选择含有类似意思的图标类型作为装饰。 [align=center][img=山岩ps小课堂30_12.jpg]https://bdn.135editor.com/files/users/438/4388382/201807/P6hKCmGz_ZzsQ.jpg[/img][/align] ④段落文字一定要注意字符的[color=#FF0000]间距和行距[/color]控制。 [align=center][img=山岩ps小课堂30_14.jpg]https://bdn.135editor.com/files/users/438/4388382/201807/dprXKFHI_mpPX.jpg[/img][/align] 文段中的字间距不能[color=#FF0000]太过疏远[/color],虽然单字识别性会提高,但是单词和句子的识别性会降低,导致[color=#FF0000]阅读的连贯性减弱[/color],极为加大内容理解的难度。同时,文段中的字间距也不能[color=#FF0000]太过接近[/color],尤其不能贴合到一起,字距太近会[color=#FF0000]影响单字的识别能力[/color],很容易找不到读到了哪个位置。我个人大部分情况下文字的间距会保持在[color=#FF0000]10到-25[/color]之间,具体大小根据不同字体和字符的大小变化会有波动,但不会太大。 [align=center][img=山岩ps小课堂30_16.jpg]https://bdn.135editor.com/files/users/438/4388382/201807/cMVayeA5_ZUQ4.jpg[/img][/align] 文段的[color=#FF0000]行距[/color]跟间距的道理相似,拉开太远会影响阅读的连贯,影响理解能力,离得太近会干扰上下两行的阅读,很容易串行,一般会以半个字符高度左右为准。 [align=center][img=山岩ps小课堂30_18.jpg]https://bdn.135editor.com/files/users/438/4388382/201807/HEudzOQw_dNXT.jpg[/img][/align] 在行距确认上,我个人有一个常用的小技巧,网页的[color=#FF0000]分辨率是以72为主[/color],而文字常用的[color=#FF0000]点[/color]这个单位,在72分辨率的时候正好是[color=#FF0000]1像素=1个点[/color],也就是说我们在字符中选择的行距是几点,它的实际就是多少像素。 [align=center][img=山岩ps小课堂30_20.jpg]https://bdn.135editor.com/files/users/438/4388382/201807/WZXEETAU_F3Bd.jpg[/img][/align] 而在软件中,行距并不是指上方文字底部到下方文字顶部的距离,而是指[color=#FF0000]上方文字的底部到下方文字底部[/color]的距离,拿行距30点为例。 [align=center][img=山岩ps小课堂30_22.jpg]https://bdn.135editor.com/files/users/438/4388382/201807/wPcwzKhI_TWjj.jpg[/img][/align] 所以行距的确认我们就在文字高度的基础上加上它[color=#FF0000]一半像素[/color]就可以了。因为像素和点一个大小,通过选区可以直接得到文字的高度。比如下方文字高度是50像素,那么行距我们就可以设置为50+50/2=75像素(不用太死,结合情况可以在这个数值周边有浮动)。 [align=center][img=山岩ps小课堂30_24.jpg]https://bdn.135editor.com/files/users/438/4388382/201807/HXaXyjHw_f9fv.jpg[/img][/align] 这里一定要注意,[color=#FF0000]字符的高度可不是字符的大小[/color],不能以文字大小的数值为准,要以像素框选的高度为准,比如我们设置的字符大小是60点,文字实际的高度是47像素,所以行距要在70左右,而不是90。 [align=center][img=山岩ps小课堂30_26.jpg]https://bdn.135editor.com/files/users/438/4388382/201807/jXEttUwp_cDrG.jpg[/img][/align] [b]配色思路:[/b]由于配图中的颜色比较明确,这里可以直接从配图中吸取颜色。之前提到过用色尽量[color=#FF0000]亮暗结合[/color],因为底是白色,所以搭配的颜色要尽量重一点,不过这里需要注意一个细节,像粉色,黄色,绿色,青色这种比较明艳的颜色,一定不要直接去吸图片中暗部的颜色,那样吸出的颜色会比较脏,最好是先吸明亮的部分,然后做一些饱和度和明度的调节。 [align=center][img=山岩ps小课堂30_28.jpg]https://bdn.135editor.com/files/users/438/4388382/201807/L4aXhC8U_WakY.jpg[/img][/align][align=center]直接吸取暗色部分,颜色暗淡[/align] [align=center][img=山岩ps小课堂30_30.jpg]https://bdn.135editor.com/files/users/438/4388382/201807/VkIW8pC2_OEvL.jpg[/img][/align][align=center]吸取亮部颜色,通过拾色器加深饱和度和明度,颜色重但是艳丽[/align] [b]网格思路:[/b]之前几篇文章中,文字部分的处理基本以对齐参考线为主。这里的文字部分依次由四个内容组成,标题、装饰、正文、英文,而且内容都比较少,一个高度基准里就能容下一个部分,所以在文字的排列上,我使用的处理方式是每一个文字部分,在相对应的每个高度基准(如果对20列参考线和高度基准不太明白,可以查看前两期文章的网格部分)当中做了[color=#FF0000]垂直居中[/color]。 [align=center][img=山岩ps小课堂30_32.jpg]https://bdn.135editor.com/files/users/438/4388382/201807/YYNKAc9R_qFxm.jpg[/img][/align] [align=center][img=山岩ps小课堂30_34.jpg]https://bdn.135editor.com/files/users/438/4388382/201807/CYknQumd_twFw.jpg[/img][/align] [b]延展思路:[/b]当前版式的核心特征是[color=#FF0000]文字部分提取成版块应用[/color],其次依然是贴合画布两侧配图的应用。 [b]延展方式:[/b] ①既然文字部分被提取成了一个版块,那么这个版块的位置、大小、形状、数量、填充方式都可以有不同变化,只要满足于跟后边的分割配图是重叠关系就可以。 [align=center][img=山岩ps小课堂30_36.jpg]https://bdn.135editor.com/files/users/438/4388382/201807/njqjXygA_PhCu.jpg[/img]文字版块位置、大小、填充变化[/align] [align=center][img=山岩ps小课堂30_38.jpg]https://bdn.135editor.com/files/users/438/4388382/201807/9TyLbebB_Ovng.jpg[/img][/align][align=center]文字版块形状、数量变化[/align] ②文字版块可以同配图同时贯穿于画布两侧, 也可以同时不接触画布。 [align=center][img=山岩ps小课堂30_40.jpg]https://bdn.135editor.com/files/users/438/4388382/201807/zkLjBmtc_ggKm.jpg[/img][/align][align=center]文字版块和配图都贯穿画布[/align] [align=center][img=山岩ps小课堂30_42.jpg]https://bdn.135editor.com/files/users/438/4388382/201807/sXngQXBw_PJcp.jpg[/img][/align][align=center]文字版块和配图都不贯穿画布[/align] ③结合上一篇版式中的主体提取,可以尝试主体提取、文字版块、配图和分割背景四者的集合形式。 [align=center][img=山岩ps小课堂30_44.jpg]https://bdn.135editor.com/files/users/438/4388382/201807/VEkZkr5x_I8IY.jpg[/img][/align]
收藏
 
分享到:
 
  • 直播课程:-
  • 视频课程:-
  • 粉丝:-
  • 回答:-
正在加载...

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