怎样设计童谣课banner

hello 宝宝们，欢迎来到这个 softler 的 涂层魔法，今天要给大家分享的是如何用 ps 制作产品 banner 图。好啦，话不多说，我们现在开始吧！ 新建一张画布，利用油漆桶工具填充背景，拖入产品主体，放置到合适的位置。双击图层，添加图层样式，添加一个投影数值可以参考我的。 利用文字工具，添加一个大标题，放置在产品的左侧， 然后 ctrl 加 j， 复制一层拖， 拖入到文字上方，然后双击图层，添加图层样式，添加描边数值可以参考我的。然后再将填充改为零。 新建图层，用矩形选框工具拉一个矩形，用渐变工具填充渐变颜色， 放在两个文字图层的中间，增加层次感。 左侧的小标题也用同样的方式， 在画布上方和下方添加和主题相关的英文。 在画布的空白处添加一些文案和图片装饰 这个徽章。徽章的图片给我们，给他同样的添加一个图层样式， 双击图层，点击鞋面和浮雕 数值依旧可以参考我的。然后添加一个内阴影，添加投影，使我们的徽章看着更立体。 在自定义形状工具里找到棋盘格， 找到棋盘格工具，在画布当中空白处 添加在空白处，使海报的画面更加的丰富。 好啦，今天的分享到这就结束啦，我们下一期见，拜拜！

上一期视频我分享了一个为卖果汁的商户设计的一个动向，那这次呢，我会把这个效果运用到了一个卖羽绒服的一个商户当中，然后我会为他来设计一个的定制的一个动画效果。 ok， 那 我们看一下效果。首先第一个是我们当我们点击这样的一个网站的时候，都是一个橙色的一个羽绒服， 还有一个层次的背景，当我的鼠标向下滑动时，它会跳出一个灰色的羽绒服和灰色的一个背景，而在当我的鼠标再向下滑动时，它就会呈现了一个白色还有红色，而这样的一个动画效果就是我今天想要分享的一个设计思路。 我们回到了 element 的 一个编辑页面，首先我们会看到我们这个动效其实是有两层不 不同的移色轴的页面来进行一个叠加的。首先第一个是我们包装了全部，把全部文字包装在一个文字的一个容器当中，然后我们的一个文字容器我们会把它的移色轴的一个方向设为九十九。 然后啊第二个是我们的一个图片的一个勇气，那我们这里的图片有些其实就是放上我们的一个产品图片就 ok 了。 然后这个的一个产品的勇气我们这里没有设定我们的一切走的方向，目的是为了让他跟文字勇气，他有一个错峰的一个分层，那就相当于是我们在完成动画的时候，他们两个成绩不会相互的影响。 ok， 那在这里呢要重点说的其实是我们的一个 java script 的 一个代码，那其实 java script 的 代码这次的代码我没有说是自己去编排，那这次呢？我是让青米来，然后全权的帮我去实现这样的一个效果。 我只要告诉君美兰我想要设计的一个效果，包括我们的一个预览图片的一个位置去到哪里，然后他就会生成了这样的一个效果给我。那么在这里呢，我要重点说一下的是，我们在设置一个转场的一个背景颜色的时候，其实是这个代码在起了一个作用，然后当我如果是把代码的 参数颜色参数把它修改，然后我们保存一下，然后我们预览看一下我们的一个代码的一个颜色，那就会发现其实我们的一个产品的背景颜色就已经发生了改变，由原来的一个橙色变成了现在的一个红色。 ok， 那 我现在把我们的代码改回来，然后接下来我们再看一下我们其他的一个代码的一个布局情况，那我们的 css 代码当中，我们会封装了我们的一个产品的一个图片，它所放映的一个位置 应该是在哪里的？首先这里我会看到了我们的一个主要产品的一个定位，那当我如果是设计为十的时候，我们会发现我们的一个主要产品其实是向上的一个偏移，然后当我如果是我 把它修改一下，反而五十的一个 percent， 那 它的一个产品就会向下，然后我们把它调为原来的代码的一个位置，然后第二个就是我们的一个 stan 的 一个图片，就是相当于是这里的一个灰色的一个产品， 那在这个产品呢，我会把它我们在这里再调整一下它的一个预值，那就会发现我们的一个产品就会飞到上面了，然后我们把它调整回去，然后接下来他又就回到了底下底部的一个位置。 ok， 以下就是这次视频的全部内容，我们下期视频再见。拜拜。

hello， 大家好，今天分享一个教育类 app 的 首页优化案例，这是客户给的首页框架布局原型图，他把运营 banner 直接放在了页面最顶部。 但现在很多主流大厂 app 早就放弃顶部 banner 位了。道理很简单，用户打开首页，第一眼就撞见营销感十足的大幅广告 banner， 本能会下意识忽略，直接划走，最终导致这个位置点击率特别低，运营资源完全被浪费。所以这次我直接调整了布局， 把 button 从顶部下移，放在金刚区下方，这个位置处于用户自然浏览动线的中断，用户看完功能分类，进入内容浏览阶段，注意力是主动且集中的，不会把它当成强行推送的广告。同时旁边搭配两款功能或运营小卡片， 一主两次的组合形式，既盘活了运营位，又丰富了页面层次，不会显得单调。大家看看顶部金刚区，圆形里所有图标尺寸完全统一，看着规整，但缺少主次区分。这次我特意把它做了大小质感双重差异化设计， 一方面是视觉节奏的考量，一强一弱，搭配页面不会显得拥挤花哨，看着更透气。另一方面也用质感帮用户做隐性区分，下意识分清核心常用功能和次要拓展功能。 下方增加了滑动指示器，暗示图标支持左右滑动，既利用空间放下更多分类，又不会让整个金刚区显得杂乱，兼顾了功能数量和视觉美感。回过头再来看一下运营区，这里我采用浅色系， 一是落化广告感，柔和配色，不让用户产生抵触心理。二是守住视觉层级，运营位只是过渡区，不能抢了上方核心功能和下方课程内容的风口。三是贴合教育产品清爽专业的调性， 浅色系衬托内容更清晰，颜值和实用性兼顾。再来看课程 type 区，我给选中状态加上了蓝色对勾式下划线，一方面造型更有设计感，提升界面精致度。另一方面结合教育产品的属性，对勾自带以选择靠谱优选的心理暗示 和精选好客的文案含义完美契合，用户一眼就能定位自己的浏览位置。下面是核心的课程卡片部分，原型里是封面占位图，完全无法激发用户的点击欲望。 我补充了用户最关心的所有信息，讲师头像和评分、课时数和学习人数，建立课程的可信度，课程标题和简介明确课程内容，还有原价现价、 vip 折扣标签，用红色突出优惠， 直接刺激用户的下单欲望。同时用卡片间距和模块区分，把信息层级拉的清清楚楚，用户扫一眼就能抓住重点。接下来再优化下底部导航， 整个页面就优化完成了。其实教育类 app 的 首页优化从来不是单纯的视觉优化，而是每一处改动都围绕用户的浏览路径，帮用户更快找到课，更信任的课程，更愿意下单。你觉得优化的怎么样？欢迎评论区留言。好了，今天的分享就到这，我们下期再见！

这是产品原型图，你直接扔给 ai， 它能给你出一个界面，而且这些全部都是可以复制到飞格玛里边直接编辑的。你如果觉得这里边是图标、斑点啥的不精致，你直接套用这个模板，你把这里边元素你再稍微换一下，也都是 ai 升的。这全都是咱同学直接做出来的，包括这里边图片、风格啥的，一张中国风的这些界面，嘎一下就出来了， 非常有风格。你按照这样的思路，你看咱同学延展的这些界面，包括图标，包括这些斑的图，甚至带到下边一套一套的这些徽章， h 五界面，你看去吧，包括理念啥的，人家写的也嘎嘎好使，包括现在咱们这一套一套的，跟你说很快就能做出来。你像这种运动风格的对不对？潮流风格的， 暗黑社交风格的，还有包括这种轻质感风格，你瞅去吧，咋做咋有，但是你光做界面不行，你还得有亮点，没有亮点你就做不出差异化。你看咱同学做的这些小亮点、小徽章、小吉祥物啊，全是 ai 辅助 u i 做的，这都同学作业，对于 ai 加 u i 感兴趣的同学，左下角有试听课，赶紧过来听一下，你说才几块钱，你说你嘎一下就变厉害了，为啥不来听？你瞅瞅这质量多甜。

什么是 banner 图？很多独立站首页一打开就是一张超大的 banner 图，下面随便摆几个产品就完事了。这个做法很影响流量转化效率。 banner 图是用户进站后第一眼看到的东西，它的任务不是好看，是让访客在几秒内搞清楚三件事，你是谁，你卖什么？你有什么优势？光有它还不够。 首页往下走，要快速建立信任，客户评价、合作品牌以及媒体报道，这些社会背书放上去，然后再展示热卖产品和核心优势，这样才能把流量接住，而不是看一眼就走。首页是你的线上门面，做对了流量才赚得动。关注我，了解独立站更多精彩内容！

这是优化前的整个界面，这是优化之后的界面，这里面到底发生啥？给你一下拆解一下子。首先第一步就是版本图的优化，一定要把你的元素给我精简，这元素太多了，你就直接稍微精简化一下，这都 ai 直接升就完事了。你看一下精简完之后的，不用整那些乱七八糟的，整太多之后太乱了，你放你的界面里面，他也看着很乱。 其次就是磁片区，你看这图标咱们能不能稍微质感统一一下，大小统一下子把你的质感做的稍微简洁一点。你看优化完之后的磁片区，你瞅瞅复杂度，这个是不是稍微简洁很多？再有金刚区的图标，你看这图标有的是描线的，有的是面性的，有的是描线加面性的， 包括这些又太复杂了，所有的统一度都不够，稍微给他统一下，这种统一度，你看直接就高级了。你只需要把刚才这三点一优化，你看看直接就高级了。你只需要把刚才这三点一优化，你看看同学之间的进步，咔一下你就厉害了。

哈喽，宝宝们晚上好，我是猫粮贵，那今天想要给大家介绍的呢，是我们即将上线的一款小程序， 小程序的名字叫做猫进卡次元，点进来之后呢，可以看到上面有轮播的 banner， 同时在主页还有的就是关于美卡的推荐。 接下来是重磅展示的环节，来到我们的小卡盒及区域，按照系列、年份、色系、特殊卡背、多人卡等等我们进行了一个区分。这里我们以新音荣耀卡包为例，虽然大家可以看到第一排都是 n 开头的卡， 但是呢我们的排列顺序也是按照他的卡的编号排列的，为什么奶黄包会在第一张的 n， 因为他的序号是最靠前。 其次关于小卡的命名，因为我的这个文化水平有限，所以如果大家有更好的命名方式，像奶黄包一样可爱的名字的话，欢迎多多投稿。 目前卡面的图片还在完善当中，大家能看到的我们从新一一直做到台历，一直做到去年的四亿的卡包，然后往下又就由奔跑一，奔跑二，奔跑三，呃，一直到什么时候为止呢？到立夏， 比如说想要具体查看某一张卡，点开它有卡面卡背。接下来是我们的卡特功能，这个卡特功能就是为了记录我有哪些卡，然后我们的排序方式有多种多样的，可以根据需求来进行选择， 具体的功能如何使用呢？当我们点开图件，下面会出现我想要或者是加入卡册的按钮，点击我想要就说明我想要收这张卡，那如果我把它放进卡册里面，就说明我已经拥有了，这个时候再点开我们的卡册，你就会发现在图片里面加入的卡已经出现在了卡册当中，同时还可以记录你的入手价格， 比如说我有不止一张的卡，我负数了，那么也可以一次增加，不同负数的价格也可以不一样， 那当我们再回到卡册页面的时候，就会发现数量和价格都会有变化。接下来是我们最引以为豪的， 我们放了很多进去，有一些是微型机之前出过的，有一些是市面上可以大家在各个平台买到的。那这个功能怎么使用呢？具体来看，我们选择小樱桃的卡套，那点开这个卡套之后呢，中间有一个加号，那么我们就可以挑选小卡，此时此刻我挑选一张肆意的卡放进去， 他就会给你模拟生成卡和这个卡套到底匹不匹配，能不能出片。好，如果我想换一张小卡的话，我就再回到途径里面去选择，我可以继续换，一直换，换到满意为止。 最后在我们的主页有两个功能，第一个是我想要，就是可能大家薪水但是还没有收到手的小卡，第二个就是我的开销计算我总共买这些东西花了多少钱，并且我们的开销也是可以通过系列来进行筛选的，请大家多多支持，多多提出宝贵意见。

这梦幻的科技 banner 动态效果图，不用 ae， 不 用 ps， 只需要找到我们的剪辑搭子，选底下最中间的 ai 创作，把喜欢的艺术作品放进去，一句话描述一下想要的视频形式， 稍等一会就自动生成出来了，顺势就能编辑剪映迎来 ai 升级。这是在剪同款模板之后，借 ai 能力再一次降低普通人的创作门槛，大家就算不会剪辑，也能做出有内容感的好作品了， 轻轻松松，设计感拉满！

一张随手拍等于一整套电商物料，今天教你一个绝招，只要一张手机随手拍的产品图，一个人半天就能搞定一整套电商营销物料！全程不用会任何设计软件，先上传你随便拍的产品图， 选择智能精修模式，输入简单提示词，自动抠图、调光影、去瑕疵，秒变专业级产品图。 再用这张精修图切换到批量生成模式，输入简单指令，电商海报、节日 banner、 活动海报，一次性可以出十张，挑最好的用就行。 最后生成详情页，按照产品卖点和使用场景依次生成每一篇内容，还能直接编辑文字，修改文案，拼起来就是完整的详情页。 你看这个排版，还有这些小字的清晰度，真正解放双手的电商的工具。我把产品精修海报、详情页的全套通用提示词模板都整理好了。关注我，每天一个实用 ai 技巧，让你做电商更轻松！

你看这同页作业，这个是没破出型的，你看这个破出就行了，它整个设计感一下子就不一样了，这个规规矩矩的，这个一下就让人感觉非常的有冲击力。所以我们在做斑点或者头图的时候，一定要想办法做一些小破型，这效果嘎嘎出来。那你要是做不了破型，你至少做点啥，你做点小毛玻璃小效果， 让它透过去一点点，就这么一点点细节，它都比你没有细节要强上非常多。要么如果你破不出去，那你就做异形，你比如你将这个卡片就比较普通， 那你看左边这个，我至少做一个这么常规的这么一个小异形，虽然没有东西破出去，但至少我在形状上面是差异化的。如果这两个全都是一个普通的正方形，我跟你说那它效果肯定设计感就没了。所以你记住刚才这三个点，同学们，以后你再做这种小班的图时候，你也绝对厉害，这都是同学作业，关注蔡仁老师，每天给你分享点这些小干货，你一个月咔一下就厉害了。

啊。