字体与版式设计项目式教程（AI协同）课件

项目9版式设计中的图片——设计女包Banner字体与版式设计项目式教程（AI协同）（微课版）高等院校艺术设计精品系列教材学习目标学习目标说明知识目标熟悉图片的基本知识，以及图片在版式设计中的表现形式掌握图片编排要素和处理方法技能目标能够基于实际版式设计需求选择适合的图片表现形式能够灵活在各种设计作品中应用图片进行编排能够运用AIGC技术高效率处理图片素养目标善于用图片记录生活中的美，并将其运用在版式设计中具备图片鉴赏能力，能运用内容合适、画面美观的图片制作版式设计作品培养利用图片传递信息和搭建视觉层次的能力项目描述莉芮尔（LYRIELLE）自创立以来始终坚持“以匠心雕琢细节，以设计表达态度”的理念，每一款包袋均由手工匠人耗时数十小时精心打磨，从选材、剪裁到五金配件的定制，品牌均严格遵循“功能性与美学并重”的原则，确保消费者能满意。Banner是品牌在网店中展示商品的重要工具，可以通过美观的设计向消费者传递信息，使消费者对商品产生购买兴趣，对莉芮尔这类依赖视觉吸引力的手工箱包品牌而言至关重要。出于这一考量，莉芮尔计划为即将发布秋冬款红色单肩包制作兼具信息密度与视觉美感的Banner，并传递出“暖意、质感、艺术”的秋冬款箱包设计理念。项目目标项目名称女包Banner应用软件AIGC工具、Photoshop格式要求psd格式展板尺寸950像素×600像素作品数量1个设计内容在有限的版面中展示3张不同角度的同款女包图，以及品牌和女包信息文字设计要求①Banner中的图片表现形式丰富，整体性强②Banner中的文字层级清晰，编排美观且合理③Banner以奶油色调（如淡黄色）为主色调，营造柔和、舒适、自然、简约的氛围配套资源素材\项目9\四角星.png、女包正面图.jpg、女包背面图.jpg、女包俯视图.jpg效果\项目9\尤加利叶.png、女包正面图（处理后）.png、女包背面图（处理后）.png、女包俯视图（处理后）.jpg、女包Banner.psd知识分解9.1认识图片9.2图片在版式设计中的表现形式9.3图片的编排要素9.4图片的处理9.1.1图片的形态按照形态特征，图片可分为图像与图形两大类。▲图像▲图形图像通常指位图图像，基本构成单元是像素（每个像素包含位置、色相和亮度信息），通过摄影设备和手绘形式获取。单位面积上的像素越多，图像细节越丰富图像图形图形通常指矢量图形，通过数学公式和计算机技术定义形状，由点、线、面等图元(图元是矢量图形的基本构成单位)组成。其核心特性是缩放无损，适合制作Logo、图标等需要多尺寸应用的内容9.1.2图片的风格▲夸张图片1．夸张图片夸张是对客观事物的某些特征进行突出、强调和夸大，以改变人们通常的认识，使形象更具独特性和表现力的艺术手法。夸张图片是以现实为基础，通过夸大或缩小事物的某个特征来强化视觉效果或情感表达的图片风格。▲符号图片2．符号图片符号是一种通过高度提炼和概括来承载和传递特定意义或信息的抽象或具象标记，它通过形式与含义的关联实现信息交流。符号本身自带象征意义和文化共识，因此在版面中使用符号图片能赋予版面相应的情感表现，同时起到装饰版面的作用。9.1.2图片的风格▲具象图片3．具象图片具象是指人对某个事物（如自然、人类、器物和动物等）的外形进行归纳与总结，并将其以高度凝练的形象展示出来，从而呈现出写实的视觉效果。▲抽象图片（图源：乔治·布拉克）4．抽象图片抽象与具象相反，抽象在归纳与总结某个事物的外形时，会脱离该事物原有的形态，以一种无意识的形态展现出来，传递出回味无穷的视觉感受。知识分解9.1认识图片9.2图片在版式设计中的表现形式9.3图片的编排要素9.4图片的处理9.2.1出血图片出血图片又称满版图片，是指画面铺满整个版面和出血区域的图片，其视觉呈现范围取决于版面尺寸和出血设置。出血图片的外形由版面形状决定，常作为版面视觉的核心，并且能够打破传统版心设置的局限，赋予设计动态张力与自由奔放的视觉节奏，强化视觉冲击力。在版式设计中运用出血图片时，图版率会达到100%，此时可借助图片画面的意境营造相应的氛围。若出血图片的画面具有空间感，那么版面也会获得空间感。◄《大圣归来》电影海报（图源：黄海）该电影海报采用与电影情节、角色相关的满版图片，搭配具有设计感的电影标题文字，再添加其他电影相关信息的方式进行制作。这种设计方式的核心是借助满版图片的画面意境和内容吸引观众走进电影院观看影片。9.2.2去底图片去底图片又称褪底图片，是指将图片中的某个物体沿着其边缘进行裁剪，以此将该物体从图片背景中脱离出来，形成透明背景样式的图片，该操作通常需要经由软件处理和计算机合成获得。去底图片能有效地突出内容，进一步增强内容在版面中的表现力，并将人们的视线集中在该内容上。并且去底图片的视觉表现力更加自由、个性，能使版面显得活泼、轻松、有趣。▲《温故非遗展》系列海报该系列海报中使用的图片都是去底图片，图片自身的色彩和海报背景色的反差形成了强烈的视觉冲击，同时突出了图片的存在，可以让人们率先关注标题文字和去底图片，并在内容上产生关联，从而明确每张海报的核心内容。9.2.3形状图片形状图片是指在版面中使用一定的形状限定显示范围的图片，如在版面中显示为矩形、圆形、三角形和梯形等几何形状的图形。又称角版图片，该图片在外形上呈现矩形的样式，具有规整的外形结构，可以维持版面的平衡关系矩形图片在版面中使用圆形图片，能够传达出一种友好、包容的氛围，让人感到舒适和放松圆形图片在版面中灵活运用三角图片的形态、方向和组合方式，能够精准传递版面的情感基调与信息层级，同时增强视觉冲击力和记忆点三角形图片在版面中运用梯形图片可以传达出一种既可靠又富有创新的精神，使人在感受到稳定的同时，也能被其独特的形态所吸引梯形图片9.2.3形状图片▲书籍内页设计在该书籍内页中，图片分别以矩形、圆形、三角形和梯形的形式呈现。即使其他元素的布局保持不变，视觉观感也产生了明显差异，如使用矩形图片的内页设计更正式、使用三角形图片的内页设计更个性。9.2.4图案图片图案图片是一种通过重复、变形或组合特定元素形成的，具有装饰性、象征性或功能性的图片，其核心特征在于元素的规律性排列与形式美感。图案图片无固定外形，其显示范围通常受版面形状制约，若将图案图片铺满版面，则该图片的显示范围即等同于版面区域，此时也可将其视为满版图片。▲《反响》专辑（图源：谢略酷）该专辑采用灰色为底色，上面添加了由白色线条组成的几何图案，几何图案具有的现代感和简洁美感，能够迅速吸引人们的视线，并打造出精致的视觉效果。知识分解9.1认识图片9.2图片在版式设计中的表现形式9.3图片的编排要素9.4图片的处理9.3.1图片的位置在版面中添加图片后，图片便具有了位置属性。合理规划的图片位置，不仅可以引导观众按照既定的浏览顺序观看版面内容，还能够使版面的层次更加清晰、结构更具条理性。在文字更为重要的版面中，可将图片置于关键文字的下方，或放在次要文字的上方；在图片更重要的版面中，宜将图片放置于版面的左上角区域或中心位置。此外，把图片置于版面的对角线上，能够使版面的视觉效果更显灵动与独特，营造出一种贯穿整个页面的阅读顺序。借助图片的位置还可以划分版面空间。◄图片的位置（图源：花瓣）在该版面中，底部的图片面积更大，色彩更浓烈，但是右上中部区域的图片凭借位置优势，更易被人率先注意。9.3.2图片的面积图片在版面中的显示范围便是其所占面积。图片面积影响着版面率和图版率，因此设计师可以利用图片面积来有效控制版面的视觉丰富度。若版面中的图片包含重要信息，则需要有意识地放大展示；若版面中放置多张面积不一的图片，这些图片之间会形成面积对比关系，这种对比关系不仅会影响画面内容信息的传递顺序，还会为版面营造出节奏感。▲图片的面积（图源：GDC2013届提名奖；Pengguin）在该版面中的重心位置放置面积最大的图片，称为视觉重心。而左下角放置的多张面积较小的图片，被整齐的呈横向排列，表现出版面的规整。9.3.3图片的方向图片的方向通常由画面中人物或动物的视线方向、行进方向，或具有方向性的线条构成。这种方向会形成具备视觉导向功能和力量感的某种视觉动势，以引导观众关注动势消失区域。▲图片的方向（图源：GDC2013年提名奖；Pengguin）这两张图片的方向都源于鳄鱼嘴部的朝向，左图朝向宽敞、右图朝向拥挤，形成不同的视觉观感。9.3.4图片的数量图片的数量能影响版面带给人的氛围和印象，通常一张图片会使版面显得简洁、单纯及格调高雅；多张图片可以让版面显得丰富，丰富程度与图片数量成正比。需要注意的是，如果使用多张图片，那么图片与图片之间的距离也会在一定程度上影响视觉效果，如间距较大会显得版面松弛，间距较小会显得版面严谨。若所有图片之间保持相同的间距，会使版面效果较为规整。▲图片的数量（图源：朱赢椿、皇甫珊珊）在该版面中，虽然运用了多张不同内容的图片，但是每张图片的大小和图片之间的间隔均相等，这种编排手法有效保证了视觉上的规整。9.3.5图片的组合方式在版式设计中，图片的组合大致可以分为块状和散点两种方式。▲散点组合（图源：设计团队StudioMarieZieger）块状组合是指将图片以规整的方式进行排列，形成块状面的视觉效果，使版面表现出强烈的秩序性与简洁性块状组合散点组合散点组合是指将多张图片四散排列在版面中，使版面表现出轻松、活泼的视觉感受知识分解9.1认识图片9.2图片在版式设计中的表现形式9.3图片的编排要素9.4图片的处理9.4.1裁剪图片1．使用Photoshop裁剪图片使用“裁剪工具”可以直接将图片裁剪成矩形或正方形。选择该工具后，图片将被裁剪框包围，拖曳裁剪框可调整裁剪框范围；也可以在工具属性栏中选择预设的裁剪比例或尺寸，按“Enter”键或单击按钮完成裁剪操作01路径是一种不包含像素的轮廓，可以将其转换为形状或选区（选区是一种用于限定操作范围的区域的功能，选区外的图像不受影响，只能编辑选区内的图像)。路径可以根据轮廓线条的类型分为直线路径和曲线路径，也可以根据起点和终点的情况分为开放路径和闭合路径02裁剪功能路径功能9.4.1裁剪图片“矩形工具”、“椭圆工具”、“三角形工具”和“多边形工具”分别可以创建矩形、圆形、三角形和多边形路径。▲使用“椭圆工具”裁剪图片具体操作方法为：选择任一工具，设置工具模式为“路径”，在图片上拖曳鼠标指针便可以创建路径，然后单击鼠标右键，在弹出的快捷菜单中选择“建立选区”命令，在打开的对话框中单击按钮，可将路径转换为选区，然后按“Ctrl＋J”组合键将选区内的内容复制出来，隐藏原图层，便可查看完成裁剪后的图片效果。9.4.1裁剪图片2．使用AIGC工具裁剪图片Midjourney中文站和创可贴等AI工具也提供了图片裁剪功能（不同AIGC工具中，处理图片功能的名称可能不一样，后续不再提示），设计师只需上传要裁剪的图片，设置需裁剪的比例便可执行裁剪。▲使用Midjourney中文站裁剪图片但是这种功能只能将图片裁剪为不同比例的矩形图片，如Midjourney中文站支持将图片裁剪为1∶1、2∶3、3∶4、16∶9等多种常见比例，也支持自定义图片比例。9.4.2抠取图片1．使用Photoshop抠图按钮和按钮。在Photoshop中打开图片，图像编辑区中将显示上下文任务栏，在其中单击按钮，Photoshop将自动识别图像中的主要对象并为其创建选区。单击按钮，Photoshop将自动识别图像中的背景并将其删除，从而保留并抠取出主要对象。对象选择工具。适用于快速抠取简单的对象，如该对象与背景的边界清晰、不含毛发。选择“对象选择工具”后，在图像编辑区内按住鼠标左键不放并拖曳鼠标指针，绘制一个框选区域，Photoshop将自动为区域内比较明显的对象创建选区。快速选择工具。适用于快速选择指定区域的对象。使用“快速选择工具”时，在图像编辑区中按住鼠标左键不放并拖曳鼠标指针，Photoshop将自动为拖曳轨迹处的图像创建选区。▲使用“快速选择工具”抠取图片9.4.2抠取图片魔棒工具。适用于抠取纯色背景上的对象。选择“魔棒工具”后，在工具属性栏中设置“容差”参数（用于设置识别颜色的范围，该数值越大，所识别的区域也就越广），然后在图像编辑区中单击鼠标左键，Photoshop将根据单击处像素的颜色创建选区。钢笔工具。适用于抠取形状复杂的对象。选择“钢笔工具”后，需要将工具模式设置为“路径”，然后沿对象轮廓绘制路径，闭合路径后将路径转换为选区，便可抠取图片。“主体”命令。适合抠取轮廓明确且与背景有反差的对象。执行“选择—主体”命令，无需设置参数，Photoshop即可自动识别图像中的主体对象，并为其创建选区。9.4.2抠取图片2．使用AIGC工具抠图▲使用removebg抠取图片美图设计室、图可丽、创可贴、removebg、文心一言、Midjourney中文站等AIGC工具都具有抠图功能，而且操作方法基本相同。以使用removebg抠图为例，只需在removebg网站首页上传图片，该工具便可自动去除背景，实现一键抠图。9.4.3调色图片1．使用Photoshop调色执行“图像—调整”命令，在打开的子菜单中存在大量用于调整色彩的子命令，选择任一命令，在打开的对话框中设置参数，单击按钮便可以调整图片色彩。“亮度/对比度”命令。用于调整图片的亮度和对比度。“曝光度”命令。用于调整曝光不足或曝光过度的图片。“阴影/高光”命令。用于调整包含特别暗或特别亮区域的图片，使图片亮度平衡。“曲线”命令。用于综合调整图片的色彩，使图片更具有质感。视觉效果的构图方式。“替换颜色”命令。用于将图片中的某种色彩替换为另一种色彩。“色阶”命令。用于调整图片的明暗对比效果、阴影、高光和中间调。“自然饱和度”命令。用于调整图片色彩的整体饱和度或某种颜色的饱和度。“色相/饱和度”命令。用于调整图片全图或单个通道的色相、饱和度和明度。“色彩平衡”命令。用于调整图片中整体色彩的分布，以校正图片的偏色问题。“照片滤镜”命令。用于调整图片的色彩偏向，使其具有统一的色调。9.4.3调色图片▲使用“自然饱和度”命令调色图片2．使用AIGC工具调色图可丽、美图云修Pro、像素蛋糕等AIGC工具都支持调色，操作方法基本相同。只需要在工具网站中上传需要调色的图片，选择“色彩调整”“一键美化”等类似的调色选项，便可以获取调色后的图片。▲使用图可丽为图片调色9.4.4其他常用的AIGC图片处理功能随着AIGC技术的成熟，还出现了更多用于处理图片的新功能，且多数功能仅需上传图片，然后设置参数便能智能完成处理。多张图片的画面进行无缝融合，使它们可以自然地融为一体，可以带来创意性、新奇的视觉表现图片融合转换图片风格可以将图片从原始风格转换成另一种风格，进而带来全新的视觉体验转换图片风格局部重绘会只修改设计师限定区域的画面内容，其他区域的画面内容将保持原样，同时使修改的画面与原画面自然地融合局部重绘智能消除会只消除设计师限定区域的画面内容，其他区域的画面内容将保持原样，同时消除内容后的画面与原画面自然地融合智能消除去水印会去除图片上的文字形式或图片形式的水印，并且自动补全水印区域的内容，使去除水印后的图片效果自然去水印背景替换会先抠取出图片的主体物，然后为主体物替换新背景，新背景将与原主体物自然地融合背景替换智能扩展会将一张图片按照等比例或自由角度进行扩展延伸智能扩展图片变清晰会按照设计师设定的放大倍数来提升图片的清晰度图片变清晰9.4.4其他常用的AIGC图片处理功能▲图片融合▲局部重绘▲智能消除▲图片变清晰▲背景替换项目实施本项目的实施主要包含使用AIGC生成和处理装饰图片、使用AIGC和Photoshop处理女包图片、使用Photoshop布局版面3个任务。任务9.1使用AIGC生成和处理装饰图片（1）生成装饰图片进入即梦AI官网的“生成”页面，在文本框中设置创作类型为“图片生成”，选择模型为“图片4.0”，选择比例为“1∶1”，输入“红色背景，由黑色线条绘制出偏向一侧的尤加利叶的轮廓，尤加利的枝条细长优雅、叶片圆润饱满”提示词，单击按钮生成图片，选择其中满意的一张图片下载。▲生成装饰图片尤加利叶由于枝条细长优雅、叶片圆润饱满的特点，经常在文艺、高雅氛围的作品中出现，这里可将其运用在女包Banner中。可先使用即梦AI生成仅用线条勾勒尤加利叶外形的图片，再使用图可丽抠取主体物并去除水印，以便作为女包Banner中的装饰。任务9.1使用AIGC生成和处理装饰图片（2）抠图和去水印进入图可丽的“抠图”页面，单击按钮上传生成的图片，此时图可丽将自动抠取主体物，并去除左上角的水印，单击按钮切换抠取模式后，右下角的水印也将被去除，单击按钮下载图片。▲抠图和去水印任务9.2使用AIGC和Photoshop处理女包图片（1）扩展女包正面图进入Midjourney中文站官网的“工具箱”页面，选择“AI扩图”功能选项，进入操作页面，单击“自由扩展”选项卡，单击按钮打开“打开”对话框，选择“女包正面图.jpg”文件，单击按钮，等待上传成功后，设置生成尺寸为“9∶16”，单击按钮，接着下载生成的扩展图。女包图片的大小不一，其中正方形状的正面女包图片需要剪裁为细长的椭圆形，因此为保证女包能完整展示，需要先扩展再裁剪图片；女包背面图根据设计需要制作成去底图片；女包俯视图需要和处理后的两图片一同调色，使色彩更鲜艳。▲扩展女包正面图任务9.2使用AIGC和Photoshop处理女包图片（2）去除墙上的瑕疵进入Midjourney中文站官网的“AI消除笔”编辑页面，上传扩展后的女包正面图，涂抹墙壁上的瑕疵，设置模型选择为“增强模型”，单击按钮，下载处理后的图片。▲去除墙上的瑕疵（3）裁剪女包正面图使用Photoshop打开处理后的女包正面图，选择“椭圆工具”，设置工具模式为“路径”，拖曳鼠标指针绘制一个椭圆形路径，单击鼠标右键，在弹出的快捷菜单中选择“建立选区”命令，打开“建立选区”对话框，单击按钮将路径转换为选区后，按“Ctrl＋J”组合键复制选区内容，隐藏原图层，查看裁剪后的椭圆形图片。▲裁剪女包正面图任务9.2使用AIGC和Photoshop处理女包图片（4）抠取女包背面图进入图可丽的“抠图”页面，单击按钮上传“女包背面图.jpg”文件，此时图可丽将自动抠取主体物，单击按钮下载图片。▲抠取女包背面图（5）调色女包俯视图使用Photoshop打开女包俯视图，执行“图像—编辑—自然饱和度”命令，打开“自然饱和度”对话框，设置自然饱和度为“+13”，单击按钮。执行“图像—编辑—亮度/对比度”命令，打开“亮度/对比度”对话框，设置亮度为“+11”，对比度为“15”，单击按钮。▲调色女包俯视图任务9.2使用AIGC和Photoshop处理女包图片（6）调色其他女包图按照与步骤（5）相同的方式和数值，依次在Photoshop中调整裁剪后的女包正面图和女包背面去底图的色彩。▲调色其他女包图任务9.3使用Photoshop布局版面（1）布局女包图片使用Photoshop创建名称为“女包banner”、尺寸为“950像素×600像素”、分辨率为“72像素/英寸”、颜色模式为“RGB颜色”的文件。依次添加处理好的3张女包图片，并调整大小和方向。复制俯视角度的女包图片，与原图片创建剪贴蒙版，然后水平调整位置，使女包尽量居中显示在设置的范围内。在布局Banner版面时，首先利用图片的面积、方向和组合方式来编排3张女包图，然后绘制纯色矩形和纯色拱形图形，强化图片整体性的同时，打破四角锋利的Banner边缘设计，营造出奶油般柔软的视觉效果，最后在图片与图片之间的间隔处灵活添加文字。▲布局女包图片任务9.3使用Photoshop布局版面（2）绘制纯色矩形选择背景图层，设置前景色为“#fdf5ec”，按“Alt＋Delete”组合键填充颜色。选择“矩形工具”，设置填充为“#fcefe2”，在女包背面图位置绘制矩形，然后调整图层顺序。再在女包正面图位置绘制矩形，然后调整图层顺序和不透明度为“64%”，使绘制的两个矩形成为女包背面和正面图的纯色背景。▲绘制纯色矩形（3）绘制纯色拱形图形选择“矩形工具”，取消填充，设置描边为“#fcefe2”，描边粗细为“35.8像素”，围绕图像编辑区绘制一个等大的矩形描边，打开“属性”面板，单击按钮取消边角的链接，分别设置左上角和右上角的数值为“60”。▲绘制纯色拱形图形任务9.3使用Photoshop布局版面（4）调整拱形图形向下拉伸拱形图形定界框，使其底部描边位于图像编辑区以外；继续向上拉伸定界框并拉宽拱形的宽度，减少与左侧、顶部图片的重叠面积。▲调整拱形图形（5）输入品牌名称文字选择“直排文字工具”，设置字体为“方正中粗雅宋_GBK”、字体大小为“20点”、文字颜色为“#000000”，在女包正面图右侧输入“LYRIELLE莉芮尔”文字。▲输入品牌名称文字任务9.3使用Photoshop布局版面（6）输入女包品类文字选择“横排文字工具”，设置字体为“站酷庆科黄油体”、字体大小为“34点”、文字颜色为“#000000”，在女包背面图下方输入“斜跨手拎二合一女包”文字。调整字体大小为“24点”，在该文字下方输入“ShoulderBag”拉丁文字。打开“字符”面板，单击“全部大写”按钮，设置字距为“400点”。▲输入女包品类文字（7）输入其他女包信息文字选择“横排文字工具”，设置字体为“等线”、字体大小为“18