Photoshop+Illustrator平面设计立体化教程（微课版）（Photoshop2021+Illustrator2021）课件 项目9商业设计案例

新形态立体化精品系列教材商业设计案例项目9Photoshop+Illustrator平面设计立体化教程（微课版）（Photoshop2021+Illustrator2021）情景描述项目9商业设计案例自入职以来，米拉已经积累了许多设计经验，工作态度认真、仔细，能够按时完成任务，且不少设计作品的视觉效果也受到了客户的夸赞，这表明她已经具备了较好的职业能力，于是她向老洪申请转正。老洪十分认可米拉的工作能力，但仍需按照公司转正流程来考核米拉，他要求米拉独立、高效地完成5个商业设计案例，并强调这些任务需要以客户为中心，具备很强的商业性、实用性和创新性，要求米拉综合运用Photoshop和Illustrator中的各种功能进行操作。米拉能够成功完成这些商业设计案例，就达到了成为一名正式设计师助理的标准，公司也能顺理成章地批准她的转正申请。目录“翱籁”企业UI设计

任务9.1“节能减排”公益海报设计任务9.2任务9.3海鲜礼盒包装设计任务9.4《觉醒：AI的异想世界》科幻类书籍装帧设计保温杯主图和详情页设计任务9.5【案例背景及要求】1．案例构思【案例分析及制作】（1）App首页●

图像设计：由于客户提供的图像具有亮度不足、色彩昏暗的问题，因此可在Photoshop中对其进行调色和美化处理。●

色彩设计：由于客户提供的企业Logo色彩为蓝色，因此App中背景的主色调可选择蓝色，文字主要颜色为黑色和白色，更清晰、易识别。●

布局设计：在首页界面中，清晰、合理的层级结构方便用户理解信息，通过客户提供的资料，将页面的层级结构整理为搜索、海报、图标分类、胶囊Banner、周边推荐5大板块，通过圆角矩形布局板块位置。1．案例构思（2）企业官网首页●

图形设计：考虑到画面的美观性和统一性，可在Illustrator中绘制出网站首页中的图标，图标不仅要样式美观，而且尽量与App首页中的图标风格一致，让网站与App有统一性。●

文本设计：为加强各个区域的相关性，可为界面中的文本统一选择“思源黑体CN”字体，该字体线条简洁、字形方正、笔画清晰明了、外形规整，符合商务风格严谨、正式的特点。●

色彩设计：由于客户提供的企业Logo色彩为蓝色，因此可选择蓝色作为主色，使用白色和灰色作为辅色，形成简洁明快的色彩搭配效果，提供良好的浏览体验。1．案例构思本案例的参考效果如图所示。App首页

网站首页（2）企业官网首页2．制作思路1调色图像3绘制图形制作App首页时，可先在Photoshop中调整图像颜色，然后在Illustrator中使用“圆角矩形工具”绘制圆角矩形划分版块，并将调色后的图像置入形状中创建剪切蒙版，然后结合各种图形绘制工具，以及“路径”面板、“符号”面板和形状生成器，依次绘制出App首页中顶部的状态栏和分类图标，再输入文本信息，变形并美化主题文字，最后添加素材图片，输入其他文字，制作过程参考下图所示。2布局页面

4变形主题文字2．制作思路1绘制分类图标

制作企业官网首页时，可先在Illustrator中绘制出网站首页中的分类图标，然后在Photoshop中美化客户提供的图像，再结合形状工具组和文字工具组从上至下依次制作出网站多个板块，制作过程参考下图所示。2调色图像2．制作思路3制作导航栏、搜索框和Banner板块4制作热门景点和旅游攻略板块5复制会议区域介绍卡片6制作其他介绍卡片目录“翱籁”企业UI设计

海鲜礼盒包装设计任务9.3“节能减排”公益海报设计任务9.2任务9.1任务9.4《觉醒：AI的异想世界》科幻类书籍装帧设计保温杯主图和详情页设计任务9.5【案例背景及要求】1．案例构思【案例分析及制作】●

图像设计：为了符合客户需求，可以现实元素为灵感，将太阳能发电光伏板房屋、水力发电塔、风车等融合成一个拥有绿水青山、使用着节能技术的美丽生态岛，然后将节能灯泡作为一个建筑融入生态岛中，并将灯泡中的内部零件替换为绿色树苗，象征着节能举措带来的希望。●

文本设计：需要展示海报主题文本“节能减排”，呼吁大众参与其中，文本可选用“节能从我做起”“携手共建

美好家园”等文案。●

色彩设计：根据海报主题，选用代表环保的绿色作为文本和装饰形状的颜色，使用偏向环保、自然氛围的色彩作为辅助色，如蓝色、黄色、白色。1．案例构思“节能减排”公益海报参考效果如上图所示。2．制作思路1制作立体底面3制作背景和装饰制作公益海报时，可先在Illustrator中使用椭圆工具绘制圆形，然后利用“3D”效果制作出立体底面，继续使用钢笔工具、矩形工具等绘图工具绘制出主体图形，并将部分图形制作出渐变效果，使图形效果更美观。运用形状工具组绘制图形和置入叶子素材作为装饰，制作过程参考下图所示。2制作主体图形4置入主体图形2．制作思路5输入文本6添加“投影”图层样式7添加装饰目录“节能减排”公益海报设计任务9.2海鲜礼盒包装设计任务9.3“翱籁”企业UI设计

任务9.1任务9.4《觉醒：AI的异想世界》科幻类书籍装帧设计保温杯主图和详情页设计任务9.5【案例背景及要求】1．案例构思【案例分析及制作】●

图像设计：客户提供的产品是虾，为更加直观地表现虾的形象，同时也更有创意，考虑在Illustrator中运用“素描”效果及图像描摹相关操作来设计虾的形象。●

文本设计：需展示出商品名称“冷冻大虾”，可选择字体风格简洁典雅、庄严稳重，的方正粗倩简体，该字体的笔画对比强烈，端庄大气，适合作为标题字体。●

色彩设计：礼盒一般是送人，因此为营造吉祥、喜庆的氛围，选用红色作为主色，给人强烈的视觉冲击，并采用大量白色作为辅助色，黑灰色为点缀色，可以增加礼盒包装的高级感。●

布局设计：需要制作礼盒外包装和手提袋两个部分，礼盒外包装用以承装商品，而手提袋便于消费者携带。1．案例构思“海鲜”礼盒包装参考效果如上图所示。2．制作思路1抠取虾素材制作时，可在Photoshop中先抠取虾素材，然后在Illustrator中运用“素描”效果及图像描摹操作制作出虾的描摹效果；使用钢笔工具、椭圆工具、剪刀工具和路径文字工具，以及描摹的虾图像制作包装上的标志，修改包装折边颜色，完成包装正面的制作；使用相同的方法，制作包装底盒和手提袋，制作过程参考下图所示。2制作虾的描摹效果2．制作思路3绘制包装外壳展开图6完成包装正面5绘制装饰图形

4复制图像2．制作思路7制作包装标志

8制作包装底盒和手提袋目录“节能减排”公益海报设计任务9.2海鲜礼盒包装设计任务9.3任务9.4“翱籁”企业UI设计

任务9.1《觉醒：AI的异想世界》科幻类书籍装帧设计保温杯主图和详情页设计任务9.5【案例背景及要求】1．案例构思【案例分析及制作】●

图像设计：封面背景可考虑采用具有神秘感的太空图片，然后将书籍重点“AI”文字以立体化的形式作为主体图像展示，呈现出独特的视觉效果。●

文本设计：需要展示出书籍名称、作者、出版社、价格、推荐人推荐语等必要的文字信息，可加大书籍名称文本的字体大小，加深读者对书籍的印象。●

色彩设计：为了表现出未来感和神秘感，可选择以蓝绿色为主色调，为了使整个色彩设计更加丰富和有层次感，还可以黄色作为辅助色，以红色、白色和黑色为点缀色。1．案例构思《觉醒：AI的异想世界》科幻类书籍装帧参考效果如上图所示。2．制作思路1制作背景制作书籍装帧时，可先在Photoshop中通过调整不透明度、色调和对比度制作书籍封面的背景；在Illustrator中置入背景并输入文字，利用“凸出和斜角”命令制作出三维透视效果，然后为文字设置渐变颜色再混合文字；通过绘制矩形和输入文字完成封面的制作；新建书脊和封底画板，复制封面背景，然后输入文字和添加素材，制作过程参考下图所示。3完成书籍封面2制作三维效果文字

2．制作思路4制作书脊和封底背景5完成书脊和封底目录“节能减排”公益海报设计任务9.2海鲜礼盒包装设计任务9.3“翱籁”企业UI设计

任务9.1任务9.5任务9.4《觉醒：AI的异想世界》科幻类书籍装帧设计任务9.5保温杯主图和详情页设计【案例背景及要求】1．案例构思【案例分析及制作】（1）主图●

图像设计：在客户提供的图像素材中，选择正面、美观的图像作为主图的主体图像。●

文本设计：由于主图画面有限，因此只需添加“暖暖冬日

温意流淌”宣传语，以及“不锈钢长效保温”商品卖点文字。●

色彩设计：由于商品素材的色彩以粉色为主，因此在制作主图时，主色仍以粉色渐变为主，并使用在视觉上与之协调的白色为辅助色。●

布局设计：需将图像置于主图右侧，在主图左侧放置文字信息，布局成左文右图的形式。1．案例构思保温杯主图参考效果如上图所示。（1）主图1．案例构思【案例分析及制作】（2）详情页●

图像设计：详情页图像可分为焦点图、卖点图、参数图、细节图、场景图。在制作焦点图时，采用与主图相似色调的保温杯场景图作为背景。●

文本设计：详情页各个版块的标题文字的字体、字号、颜色、装饰都保持一致，标题文字可放大处理，效果更直观；其他文字以黑体类字体为主。●

色彩设计：各个版块均以图片展示为主，在空白处添加文字说明；卖点图前半部分以三行两列图标展示为主，以文字进行说明，后半部分以图片为主，文字为辅。1．案例构思保温杯详情页参考效果如上图所示。（2）详情页2．制作思路1抠图

制作主图时，可先在Photoshop中抠取出保温杯图像，然后在Illustrator中使用形状工具组绘制图形，使用渐变、投影来美化图形，打造立体场景；置入保温杯和Logo素材，利用“椭圆工具”和“羽化”效果制作保温杯图像阴影，并为其添加“投影”图层样式；复制Logo素材，绘制椭圆图形作为装饰，使用文字工具组输入文字信息，结合文字属性和渐变圆角矩形美化文字，制作过程参考下图。4添加与美化文字2搭建场景3置入素材2．制作思路5制作卖点图标8添加卖点图标6制作焦点图

7添加矩形和投影2．制作思路12输入数据文字9复制和修改标题文字14添加素材10绘制形状和置入图片11添加文字、形状和图片13绘制底纹和装饰图形15制作参数图2．制作思路16制作细节图17复制和修改标题文字18绘制圆角矩形并置入素材感谢聆听Photoshop+Ill