首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

干货!UI界面中阴影绘制完全攻略!

场景01.按钮 我们可以为按钮使用阴影来显示一些不同的状态,例如悬停状态。也可以在默认状态下使用它。关键在于,使它们在整个按钮布局中保持平滑,柔软和融合。 ?...带有阴影的提示图形 场景04.活动项目(如开关) 当涉及到活动状态(例如切换或选定的列表项)时,一种不错的做法是为它们提供视觉层次结构,例如颜色,当然还有阴影。另外,使它们简单而柔软。 ?...总之,使用阴影的规则就是,是背景与阴影,以及其它UI元素平滑融合。使用不透明度,模糊数值以及X或者Y轴偏移量,直到获得更加平滑的阴影位置。另外,不要让阴影过分夸张,这会分散用户的注意力。 ?...彩色的阴影效果 黑暗场景阴影的运用 如果元素具有颜色,并且它处在黑暗的背景下,一般情况下,是建议使用阴影的。但是如果你一定要用,则可以使用具有小于10%的透明度设定,并且颜色跟随主色调来。...比如按钮为绿色,则可以为按钮设定一个更深的绿色阴影,加上小于10%的透明度数值。如下图,左侧的按钮阴影很自然,右侧的则有一层模糊的效果,显得不够漂亮。 ?

2.4K20

Figma技巧超全合集!40+隐藏技能!快收藏!(第一辑)

需要注意:Windows 中 Cmd 为 Ctrl,Option 为 Alt 01.按住CMD裁剪图像 您可以通过单击 Cmd 按钮来裁剪图像。...04.CMD后按数字键(改变不透明度) 选择一个元素单击 cmd 按钮后,您可以通过单击 1 和 9 之间的按钮更改不透明度。(键 1 为 10%,键 9 为 90%)。你可能知道这一点。...但除此之外;如果快速按 0 两次,不透明度将为 0%。或者,如果您快速按下两个键,它将采用这些键的值(例如,8 和 9 提供 89% 的不透明度。)...此外,可以在扰乱顺序/比例的情况下相互更换元件。 07.拖动+空格:如果要更改所选区域的位置,可以在选择区域后使用空格键。...单击左侧面板中元素旁边的图标,该元素将出现在画布上居中。 18.Cmd+Option + S 添加版本历史。Figma 已经自动添加了版本历史。

2.7K30
您找到你想要的搜索结果了吗?
是的
没有找到

Flutter质感设计之底部导航

themeData.primaryColor : themeData.accentColor; } // 返回值,创建不透明度转换 return new FadeTransition( // 控制子控件不透明度的动画...左上角 end: FractionalOffset.topLeft, ).animate(_animation), // 返回给定动画,该动画接受由此对象确定的值 // 子控件:创建控制子控件的颜色,不透明度和大小的图标主题...child: new IconTheme( // 用于子控件中图标的颜色,不透明度和大小 data: new IconThemeData( // 图标的默认颜色 color: iconColor, /...类的列表的值 for (NavigationIconView view in _navigationViews) // 在存储不透明度转换的列表中添加transition函数的返回值 transitions.add...(view.transition(_type, context)); // 对存储不透明度转换的列表进行排序 transitions.sort((FadeTransition a, FadeTransition

3K21

前端特效开发 | JS实现聚光灯看图效果

具体如下所示: // 当鼠标悬停在列表项上时... $('.spotlight ul li').hover(function(){ //...找到它里面的图像,添加活动类,更改不透明度为1(...无透明度) $(this).find('img').addClass('active').css({ 'opacity' : 1 }); // 获取其他列表项,更改其中的图像的不透明度为我们在...,如下操作: // 当鼠标离开无序列表时... $('.spotlight ul').on('mouseleave',function(){ // 找到图像并将不透明度更改为1(完全可见)...,更改不透明度为1(无透明度) $(this).find('img').addClass('active').css({ 'opacity' :...1 }); // 获取其他列表项,更改其中的图像的不透明度为我们在Spotlight对象中设置的一个 $(this).siblings

4.3K50

Google Earth Engine (GEE) ——Earth Engine Explorer (EE Explorer)使用最全解析(8000字长文)

尝试添加新图层通过对图层重新排序使用可见性图标交替可见性来更改图层可见性。 删除图层 单击数据列表中的数据层名称以显示层设置对话框。 单击垃圾箱按钮,该图层将从您的数据列表和地图中删除。...请注意,您可以通过单击应用按钮来预览更改,这将更改地图以反映您的更改,同时保持图层设置对话框打开准备好进行调整。...单击保存按钮更改应用到地图图层显示关闭图层设置。您应该会看到植被颜色从绿色变为红色的戏剧性变化。 对比度、亮度和不透明度 数据范围 可以使用范围(最小值和最大值)和伽玛参数调整图像的对比度和亮度。...使用上面调整的数据范围,再次打开图层设置尝试将 Gamma 设置为较低的值,例如 0.75。 应用更改,您会注意到对比度进一步增加。 不透明度 不透明是缺乏透明度的条件。...在下面的示例中,不透明度已设置为 0.6,它隐约地显示了底层的 Google Maps 地形图层。

19610

Adobe Photoshop,选择图像中的颜色范围

请参阅调整蒙版不透明度和边缘。 2.从“选择”菜单中,选取了以下选项之一: 肤色选择与常见肤色类似的颜色。启用“检测人脸”,以进行更准确的肤色选择。 示例颜色启用吸管工具,并从图像中选取示例颜色。...为了有助于您进行选择,请确保将显示选项设为“选区”,选择选区预览以在文档窗口中查看选区。 4.单击“存储”按钮,在“存储”窗口中为肤色预设键入文件名,然后单击“存储”。...文末教程彩蛋 调整蒙版不透明度和边缘 使用“属性”面板可以调整选定图层或矢量蒙版的不透明度。“浓度”滑块控制蒙版不透明度。使用“羽化”,可以柔化蒙版的边缘。 其他选项特定于图层蒙版。...更改蒙版密度 在“图层”面板中,选择包含要编辑的蒙版的图层。 在“图层”面板中,单击“蒙版”缩览图。缩览图周围会显示一个边框。 在“属性”面板中,拖动“浓度”滑块可调整蒙版不透明度。...单击选项栏中的选择遮住。您可以使用选择遮住工作区中的选项修改蒙版边缘,并以不同的背景查看蒙版。 在“选择遮住”工作区中单击“确定”,将更改应用于图层蒙版。

11.1K50

ps双重曝光

也就是图层1 下面) 3.将我们事先准备不好的大雁图拖入过来, 按ctrl t 选中图层按住shift ctrl 键 将图片中心点缩小放大;之后我们再次回到图层2 按住ctrl键 鼠标左键单击 图层1 使人物轮廓显示在...再次回到图层2副本,按住alt键的同时点击图层蒙版按钮,创建蒙版。...高光模式) 5d15fb851248f38153.jpg 5d15fb852187678942.jpg 5d15fb8535ee449806.png 6.接下里我们添加一个纯黄色背景,图层混合模式为柔光,不透明度为...25%; 5d15fc2dd1a0050708.jpg 5d15fc2de1ec746912.jpg 5d15fc2e20eec58439.jpg 7.在次添加一个渐变映射图层,根据喜好,更改颜色。...图层混合模式为柔光,不透明度25% 5d15fcbc837b489892.jpg 5d15fcbc933f659358.jpg 5d15fcbcb25b087694.jpg 5d15fcbcba27252516

67410

jquery nicescroll 配置参数

配置参数 当调用“niceScroll”你可以传递一些参数来定制视觉方面: cursorcolor - 十六进制改变光标颜色,默认值是“#000000” cursoropacitymin - 改变不透明度非常光标处于非活动状态...(scrollabar“隐藏”状态),范围从1到0, 默认为0(隐藏) cursoropacitymax - 改变不透明度非常光标处于活动状态(scrollabar“可见”状态),范围从1到0,默...认值是1(完全不透明) cursorwidth - 像素光标的宽度,默认值为5(你可以写“加入5px”太) cursorborder - 游标边框css定义,默认为“1px的固体#FFF” cursorborderradius...grabcursorenabled,显示“抢”图标的div touchbehavior = true时,(默认:true) autohidemode,如何隐藏滚动条的作品,真=默认/“光标”=只进游标隐藏/ false =隐藏背景...hidecursordelay,设置在微秒淡出滚动条的延迟时间(默认值:400) directionlockdeadzone,在对方向锁定激活像素死区(默认值:6) nativeparentscrolling,检测内容底部,让家长来滚动

4.1K80

是的!Figma也可以用时间轴做超级流畅的动画了

它将立即更改数值,而不会进行任何转换。让我们尝试一下,我们依然选择将矩形从Frame的左侧移动到右侧。选择最后一个关键帧打开关键帧面板,然后更改缓动功能查看结果。 ? 线性运动 ?...4.5 自动更新关键帧按钮 如果此按钮处于活动状态,则在对Motion面板进行聚焦之后,关键帧值将在当前时间位置自动更新。...确保自动更新关键帧处于活动状态。转到0ms时间位置,然后在Figma中将矩形宽度更改为0。您会注意到它将被设置为1。最小值为0.01,但是1足够了。...为了使他们全部动起来,我们必须把矩形和文本放置在新的框架中。 但为什么不是组呢?我们会在下文说明。 ? 转到“Motion”面板,在0ms和500ms上添加Y和不透明度的关键帧。 ?...移至0ms,将帧下移30并将其不透明度更改为0%。确保自动更新关键帧处于活动状态。转到Motion等待1秒钟,直到更新关键帧。现在转到500ms,并将关键帧缓动功能更改为缓出。 点击播放,赞!

17.4K34

PS|如何制作‘时空门’?

图3.2 3.3 置入铁轨图片,‘自由变换’调整合适位置(可降低不透明度) ? 图3.3 3.4 位置调整完成,右键该图层点击‘创建剪贴蒙版’ ? 图3.4 前 ?...图3.8 3.8 新建图层,使用‘黑画笔’渐进涂抹铁轨末端——使之更真实;再涂抹图片左右两角——突出镜头。(画笔硬度为0,可适当降低不透明度) ? 图3.9 ? 图3.10 ?...图3.14 3.10 为了真实,在使用橙色画笔在镜头左右地板增加光线(降低不透明度,画笔硬度为0) ? 图3.15 3.11 通过‘快速选择工具’选取小孩 ?...图3.17 3.13 为了使小孩跟能融入图层,在其身上增加光线与阴影(新建图层,使用黑、白画笔涂抹,降低不透明度更改图层为‘滤色’) ? 图3.18 ?...图3.19 3.14 接下来做孩子的背影,复制孩子的图层,点击‘色相/饱和度’(注意此时需点击‘此调整剪贴到此图层’,使调整只影响当前图层),使其明度降低为0 ?

79030

做不好阴影和模糊?UI设计师看这一篇就够了

觉得有用,记得点赞,分享给小伙伴。 ? 01.阴影(Shadow) ? 投影(Drop Shadow) 外阴影(或阴影)很容易在UI中使用。...典型的阴影依赖于与中心(x,y或两者)的偏移,即模糊和不透明度。在上图的示例中,阴影在Y轴上向下移动了20个点,然后进行了Blur(模糊)操作。 ?...默认黑色阴影通常太生硬,尝试使用原色派生出来的颜色作为阴影 改善这种问题的最佳方法,是将其从黑色(默认)更改为基于原色的较深阴影。在上面的示例中,阴影为深紫色,不透明度降低。 ?...这种样式的唯一用例是表单输入(表单字段和复选框或单选按钮)和Neumorphism风格中的拉伸形状。在某些情况下,它们可用于使对象看起来更逼真,但应适度使用。 ?...在此示例中,具有90%不透明度和背景模糊的正方形叠加层位于图像的右侧。如您所见,当将三个白点放置在“投射”背景模糊的对象下时,它们会发生不一样的变化。

2.9K21

PDF Plus for Mac(PDF处理工具)

PDF Plus Mac中文版功能介绍合并PDF文档添加/删除PDF文档更改PDF文档的合并顺序立即将所有PDF文档合并到一个PDF文件中以批处理方式拆分PDF文档添加/删除PDF文档以页面和/或页面间隔分割...)字体类型(从20种精选字体中选择)字体大小(更改文本的字体大小)不透明度使文本更不透明或透明)旋转(以一定角度旋转文本)阴影(通过添加阴影效果使文本更加可见)笔触(通过添加笔触效果使文本更清晰可见)...)不透明度使图像更不透明或透明)旋转(以一定角度旋转图像)质量(增加或降低图像质量)位置(您可以在以下位置中选择:左下,右下,左上,右上和居中)X偏移(用于图像的精确水平定位)Y偏移(用于图像的精确垂直位置...为加水印的PDF文件赋予有意义的名称-将水印的PDF文件保存在您选择的文件夹中以批量模式将PDF文档转换为图像图像格式:JPG,JPEG,JPE,JP2,JPX,PNG,TIFF,TIF,GIF,BMP更改...JPG,JPEG,JPE,JP2和JPX格式的图像质量多页支持GIF和TIFF图像格式调整图像大小更改其DPI和打印尺寸为图像命名将生成的图像保存在您选择的文件夹中以批处理模式编辑PDF属性添加/删除

2K30

基础渲染系列(十一)——透明度

本文重点: 1、用着色器挖洞 2、使用不同的渲染队列 3、支持半透明材质 4、结合反射和透明度 这是关于渲染的系列教程的第十一部分。之前,我们使着色器能够渲染复杂的材质。...但是这些材质一直都是完全不透明的。现在,我们将添加对透明度的支持。 本教程是使用Unity 5.5.0f3制作。 ?...1.2 挖洞 对于不透明的材质,将渲染通过深度测试的每个片段。所有片段都是完全不透明的,写入深度缓冲区。透明度让这里变得更复杂。 实现透明性的最简单方法是使其保持二进制状态。...在DoRenderingMode内部检测到更改时,请确定正确的渲染队列。然后,遍历所选材质更新其队列替代。 ? 1.6 渲染模式tag 另一个细节是RenderType标签。...因此,当alpha为1时,它看起来就像一个不透明的表面。 ? (Adding 代替 fading) 3.1 预乘Alpha 为了使明度再次起作用,必须手动考虑alpha值。

3.6K20

Sketch for mac中文最新(专业矢量图UI设计软件)

SketchMac是一款专为设计师量身定做的优美界面和强大工具兼有的专业矢量图绘图工具,能够满足网页、用户界面、图标等的设计需求,新版兼容macOS Ventura系统,解决了 Abstract 和...Anima 的 AutoLayout 插件 4.4.5 版与 Sketch 94.1 兼容,因为它会导致崩溃。修复了什么?修复了阻止您覆盖嵌套​​在符号实例的组合形状中的文本图层的问题。...修复了在 macOS Ventura 上编辑颜色变量时导致颜色选择器中的不透明度和色调滑块重叠的错误。修复了阻止组件菜单显示文本颜色覆盖的错误。...如果您的工具栏设置为显示文本标签,则修复了在 macOS Ventura 上的工具栏按钮中剪裁徽章的错误。修复了在重置密码或更改 2FA 设置后阻止人们使用 iPhone 应用程序的问题。图片

95830

iOS透明导航栏的平滑过渡(进阶版)引实现过程结

引 如我在传送门:iOS导航栏切换界面时隐藏和显示中所说,现在很多App的个人中心模块都是不保留导航栏的,会直接使导航栏透明,比如做的很好的QQ个人信息界面: 为什么说QQ做的很好呢?...既然有透明的导航栏也有不透明的导航栏,那一定会在界面切换之间存在一个过渡的过程,而这个过程,QQ做的特别好,在从透明导航栏界面返回到不透明导航栏界面时,导航栏的透明度是一个渐进的过渡效果,甚至会有一种毛玻璃的效果...,这也就是说隐藏导航栏,而是要单独让导航栏背景透明; 2、在导航栏透明与否的界面间切换时透明度有渐变效果; 3、在UINavigationController体系和UITabarController...self.navBarBgAlpha = @"1.0"; 实现切换界面时渐变过渡 现在实现了比较好的透明导航栏效果,但在透明的导航栏与不透明的导航栏界面直接切换时,导航栏的透明度是直接跳变的: 而我们想要的是像...QQ一样从完全透明到不透明之间有一个随着滑动手势变化的透明度渐变效果,这样是最好的转场效果了。

2.9K40

一个创建产品动画说明视频的新手指南

我们将为每个层创建一个关键帧,影响不透明度并将其从0%转换到100%。我们可以一层一层地做,但是我们想快速工作,所以让我们一起做每一层!...使播放头(较大的蓝色,向下的箭头,您可以像在视频上一样从第二个标记拖动到左侧)为零,单击不透明度左侧的秒表,然后通过键入将值设置为0%它或单击拖动标记直到其达到零。 ?...播放头,可以从左到右拖动 将播放头移动一秒钟,然后将不透明度设置为100%。将自动添加关键帧。 您现在可以通过将播放头拖回到时间轴的开头击中空格键来预览淡入淡出。 ?...看看为什么我们使PSD如此之大? ? 现在,您可以在时间轴窗格中复制粘贴图层,并将每个图层缩小到新的位置,以显示多个窗口。(专业提示:使用键盘上的J和K在图层上的关键帧之间向前和向后跳过。)...9.过渡 你现在应该有关键帧的悬挂,所以继续,让你的聊天窗口元素消失(使用不透明度设置,比例设置为0% - 或通过将屏幕定位),让我们的终端标志向上。

2.9K10

SwitchButton 开关按钮 的多种实现方式

刚开始接触开关样式的按钮是在IOS系统上面,它的切换以及滑动十分帅气,深入人心。 所谓的开关按钮,就是只有2个状态:on和off,下图就是系统IOS 7上开关按钮效果。...CompoundButton的SwitchButton是使用自定义配置的,所以如果不了解自定义配置的可以看以下文章:android 自定义控件 使用declare-styleable进行配置属性(源码角度)     具体的这边贴代码了...注意:由于状态切换等,enabled属性改变等,是你自定义的方法内的话,你必须自己去调用invalidate();方法,去让UI判断是否有更改做出相应的变化。...switchView, boolean isChecked);   }   有的人可能会希望有SwitchButton在enabled设置为false的时候,SwitchButton不能点击且要改变颜色,使他看过去是不能点击的...你可以进行如下操作(在学习别的人代码中得到的提示,学以致用): 先初始化透明度:255为不透明 [java] view plaincopy /** 最大透明度,就是不透明 */ private final

3K70

Capture One 22 Pro for mac(RAW转换和图像编辑工具)v15.4.2.12中文版

Capture One Pro 22将所有必备工具和高端性能融于一体、使您在一套快捷、灵活且有效的工作流程中捕获、整理、编辑、分享以及打印图像。...分层工作流程所有调整工具现在都与图层兼容,使Capture One成为真正的“以层为中心”的应用程序。...图层不透明度通过更改每个图层的不透明度来控制局部调整的影响。在根据需要对多个工具进行调整后,只需拖动不透明度滑块即可降低图层的整体影响。...现在可以轻松捕捉纠正面具错过的部位。Capture OneCapture One最新功能版本中的新闻和增强功能包括改进的样式工作流程,改进的导入性能,全新资源中心的介绍,免费样式包等等。

4.8K30

android开关按钮

刚开始接触开关样式的按钮是在IOS系统上面,它的切换以及滑动十分帅气,深入人心。 所谓的开关按钮,就是只有2个状态:on和off,下图就是系统IOS 7上开关按钮效果。...的SwitchButton是使用自定义配置的,所以如果不了解自定义配置的可以看以下文章:android 自定义控件 使用declare-styleable进行配置属性(源码角度)     具体的这边贴代码了...注意:由于状态切换等,enabled属性改变等,是你自定义的方法内的话,你必须自己去调用invalidate();方法,去让UI判断是否有更改做出相应的变化。...switchView, boolean isChecked);   }   有的人可能会希望有SwitchButton在enabled设置为false的时候,SwitchButton不能点击且要改变颜色,使他看过去是不能点击的...你可以进行如下操作(在学习别的人代码中得到的提示,学以致用): 先初始化透明度:255为不透明 /** 最大透明度,就是不透明 */ private final int MAX_ALPHA = 255

4K80
领券