版式设计——简单7种图片排版方式

时间：2023-09-29 23:42:01 | 来源：网站运营

时间：2023-09-29 23:42:01 来源：网站运营

版式设计——简单7种图片排版方式：

今天带给大家的一个在设计中处处都会运用到的版式设计，版式设计的应用范围，涉及到报纸、刊物、书籍（画册）、产品样本、挂历、展架、海报、易拉宝、招贴画、唱片封套和网页页面等平面设计各个领域设计！

首先我们来了解一下什么叫———版式设计


版式设计是现代设计艺术的重要组成部分，是视觉传达的重要手段。表面上看，它是一种关于编排的学问；实际上，它不仅是一种技能，更实现了技术与艺术的高度统一，版式设计是现代设计者所必备的基本功之一。


版式设计是指设计人员根据设计主题和视觉需求，在预先设定的有限版面内，运用造型要素和形式原则，根据特定主题与内容的需要，将文字、图片（图形）及色彩等视觉传达信息要素，进行有组织、有目的的组合排列的设计行为与过程。

当然版式设计是设计编排的一个总体的介绍，但是我们不能一口就想吃掉一大碗吧！就像猪八戒吃人生果一样一口吞掉却没有尝到人生果的味道，做设计也是一样，我们不能急于求成，不能一下就想学会所有的技能，想要一步登到大神的位置，每个成功的人都是经历苦练的来的，只有一步一步的脚踏实地的走，我们才能体会到其中的道理，才能正真的成长！




前面我们也介绍了版式设计是将文字、图片（图形）及色彩等视觉传达信息要素，进行有组织、有目的的组合排列的设计行为与过程！




今天我们就着重介绍其中“图片（图形）”在版式设计中运用的多种设计技巧！


话不多说，开始我们正题的进入吧！





第一种：平铺图片
平铺图片：指的就是将图片铺满整个画面，充当版面设计中的整个背景，这样的设计方式多用于书面封面的设计





注意：

01：使用平铺图片的版式设计的时候最好选择图片具有吸引力的，且突出主题的图，且文字不利于太多，因为图片铺满整个画面已经很饱和，文字太多太杂的话就会使整个画面太混乱，找不到重点！


02：如果图片是表达主题的，那么文字排版最好不要影响主图的视觉中心，选择主题空缺位置等不会影响主题阅读和识别性的位置排版即可




案例演示：




版式结构分析：

对于这样的版式，图片的选择是主题中心图居于图片的中心位置，那么我们就要选择主题图周围空白的区域进行文字的编排，这样就不会影响图片的美观以及识别性。











第二种：图片居中排版
图片居中排版：指的就是将图片居中放在画面中的中间一个位置，且让四周留白的对应位置的留白保持一致


注意：

01：同样的我们在做设计的时候要知道表达的主题是什么，并且我们要找到最能表达主题的设计方式，有的主题可能使用图片会更加能够表达主题的中心思想，但是有的可能是文字才能更好的渲染出主题的目的，所以我们要考虑我们设计中的目标！

02：文字排版我们最好还是能突出主题，并且做到大标题小文章的设计原则，能够一眼让用户看到我们的主题，


03：文字的选择我们最好也不要选择太多的文字样式，最好保持在3种文字以内！


案例演示：




版式结构分析：

这个版式我可以通过案例演示的设计稿一眼就能看出图片居中为主题中心，那么对于文字的排版我们可以选择在图片的周围空白区域随意排版，因为周围的留白已经足够编排文字，我们最好选择在留白区域排版文字，这样就有助于使整个版面设计不会缺失平衡，

也不例外的是有时候设计需求需要，文字部分也可以和图片重叠！根据实际情况而定，不过大多数还是排在留白区域为最佳！








第三种：图片平铺+色块+文字
图片平铺+色块+文字：指的就是将图片平铺在版面中，可以是和第一种一样的全铺，也可以是非全铺，再就是在图片上加一个有颜色的色块，在把文字叠加在色块上


注意：

01：根据图片的颜色我们最好选择和图片颜色差距较大的色块作为分割的色块，这样才有利于区分图片和色块

02：色块最好设置为透明的，这样既不会影响主题的突出，还能看到主题图片的完整性，透明度的调整最好不要太大也不要太小，根据图片实际情况而调整

03：色块上的文字我们也是最好要选择和色块颜色差距较大的，这样才有利于文字的识别性和突出性


案例演示：

版式结构分析：







这个版式设计虽然我们的视觉中心都是在版面的中心区域（也就是淡蓝色矩形区域）和第二张一样的视觉中心，但是不同的是，我们这里底部是全铺图片，矩形是作为图片和文字的一个分割层，起到引导用户视线的效果，目的就在于让用户能够看到我们的主题文字，所以这里的文字部分才是主题目标。




第四种：图片任意排版


图片错落排版：指的就是将图片放在版面中的任意位置，不居中


注意：

01：图片与主题要搭配，图片占据版面的大小和位置可以随意一些，不用那么拘束，能更好的展示设计感，图片图形可以是几何图形中的各种图形，不同场景可以搭配不一样的图形排版

02：文字排版大小粗细区分，错落有致，看似无序实则有序，包括留白位置做到要具有呼吸感

03：图片的选择最好是要有引导性的视觉指示！可以根据人物或者其它主题的视线/方向引导用户看下一个位置的内容信息！


案例演示：

版式结构分析：




这里我就只拿一种排版方式做版式结构分析，这种类型的版式设计，一般也是图片为用户的第一视线，图片也是和主题搭配的，并且留白的位置也是相对于较多，那么文案的排版我们最好还是不要影响图片的效果，合理的运用留白的位置，保证图片的美观和识别性，才能使整个版面达到美观的效果





第五种：图片出血排版
图片出血排版：指的就是将图片放在版面中四周可以不留出血（出血指间隔）可以是出血1边、2边、3边

注意：

01：图片的大小位置都是靠版面边缘的，可以是1边，2边，3边，根据需求选择合适的图形大小和形状以及出血的数量

02：文字排版同样不能影响图片主题的阅读效果

案例演示：




版式结构分析：




我们可以在图片上排版文案，但是我们需要根据图片的主题中心位置而定，我们需要保留图片主题，不影响图片主题的识别性和美观性，在图片的非重点区域排版一些相关联的文案，这样既不会影响图片还能达到引导用户浏览图片文字的效果





第六种：图片分割排版分割
图片分割排版：指的就是将图片分割成几个图形组合形成，不影响图片识别的完整性

注意：

01：图片分割图形的选择也是多种多样，根据需求可以随意变化，可以是规则的图形，也可以是不规则的图形，还可以是物体轮廓，文字样式

02：文案排版同样不能影响图片的美观和识别性





案例演示：




版式结构分析：




这里还是拿的第一个案例做版式结构分析，每一张图片都会有一个对应的位置是图片视觉的中心，那么我们如果需要在图片上做一些文案的排版，我们都要注意做到不影响图片主视觉的部位！





第七种：图片跨页排版分割
图片跨页排版：指的就是图片占据在版面的两个面，大小随意

注意：

01：图片的选择最好是横构图的，并且图片的视觉中心最好不要在跨线边缘，不同排版方式的图片选择不一样的构图方式，视觉效果会更佳

02：对于文案较多的，我们尽量做到有大标题和小标题，便于用户直接找到自己感兴趣的话题进行下一步浏览！




案例演示：

版式结构分析：

对于跨页的排版方式也是有很多种，可以出血几条边，也可以在版面中的各个位置，同样的也是要根据自己需求实际情况而排版，图片和文案交错排版会使整个版面更加美观和有呼吸感，最好不要一块全是图片的堆积，另一块全是文案的排版


其实在我个人而言，版式设计中，不管是怎么排版，图片都是第一吸引用户视线的，所以图片的选择我们一定要紧扣主题并且要选择有一定美观性和吸引力的图片，想要吸引用户的眼球，那么就一定要有一处优势，不管是图片还是文字排版等各种方式！只要能吸引到用户就可以啦！


今天主要介绍的就是图片在我们设计中的7种不同的排版方式，主要需要注意的点有：




01：图片的选择要和主题呼应

02：图片要美观

03：图片识别性要强
04：图片和文案排版要合理
05：文案要做到大标题小文章
06：排版要合理运用版面空间

07：版面要有呼吸感





你学会了吗？看到这里就动手练习一下吧！
加班分享的干货，喜欢就免费给一个小 吧！





好啦！今天的图片的排版方式分享就到这里啦，希望对你们有所帮助