经验分享 未读
AppStore应用上架时上传的屏幕快照尺寸有哪些?在上架iOS的AppStore和安卓各大应用市场时需要上传很多尺寸的图。我们只需要准备两个比例的图片利用symbol就可以创建多个尺寸的图片了。
首先先看一下所有的尺寸要求:
iOS
Android
375 * 812
360 * 640
414 * 896
375 * 750
375 * 667
450 * 800
414 * 736
480 * 800
其中只需要制作两种比例,一种全面屏比例(可以以iPhone11Pro的375 * 812为模板),一种传统屏幕比例(可以以iPhone8的375 * 667为模版)。将模版设置为symbol,结合Scale功能和symbol的resizing搭配完成其余部分尺寸。
之后输出切图根据需要切成@2x或@3x
经验分享 未读
Sketch教程:将占用图层替换为组件当我们使用Sketch设计交互稿后,我们可以直接将交互稿中我们用来占位绘制的矩形替换成组件。
创建符号后,可以插入设计中任何现有图层的位置。为此,请右键单击图层,选择“ 替换为”,然后选择“符号”。你选择的符号将调整大小以适合图层的大小。
经验分享 未读
Sketch教程:快速查找组件组件化设计之后我们会有非常多的组件,它们调用起来十分困难,因为寻找他们要耗费大量的时间。
有两种方法可以在Sketch中访问和插入符号。
你可以通过单击“图层列表”顶部的“ 组件”,通过“画布”左侧的“ 组件面板”插入符号(也可以使用Ctrl+1和Ctrl+2分别在“组件面板”和“层列表”之间切换)。
你可以选择查看“所有”可用符号以及仅属于文档或特定库的符号。
你可以使用“组件面板”底部的搜索栏快速找到所需的符号,找到所需的符号后,只需将其直接拖放到画布上即可。按⌘+ ⇧+ F切换到“组件面板”,然后将焦点放在搜索栏上。
另外,你可以通过工具栏或使用插入菜单插入一个符号。在这里,你可以查看并从文档中选择符号或已启用的任何库的符号。
经验分享 未读
Sketch教程:如何显示和隐藏使用组件时的可更换选项在组件化设计的时候,我们会有一个组件嵌套另一个组件。一旦组件过多,在替换时就会发生很难查找的问题。这个方法让我们仅将需要修改的内容进行显示,方便查找。
选择你的组件母版,并使用检查器中“管理替代”面板中每个可用替代旁边的复选框,以选择在设计中的任何位置选择该组件的实例时可用的替代。
经验分享 未读
Sketch教程:如何在替换控件时保持控件尺寸不变有的时候我们在制作的嵌套组件时会调整子组件的尺寸。得益于Sketch是一款矢量设计软件,这个操作可以更加完美的执行。但是在替换控件时如何保持控件尺寸不变呢?
你可以使用“检查器”中“符号”面板中的“组件弹出框”来交换符号。从列表中选择一个符号,或搜索所需的符号,然后单击以将其与当前选定的符号交换。
默认情况下,交换符号会调整你选择的实例的大小以适合其新的符号母版。要在交换符号时使实例大小保持相同,请取消选中“组件弹出框”顶部的“以原始大小交换”选项。
注意:对于Sketch 61和更早的版本,交换符号将始终保持所选实例的大小不变,而不管新Symbol母版的大小如何。
经验分享 未读
Sketch教程:在图像填充中四个选项(充满、适合、拉伸、平铺)的区别在Sketch中有四种图像的填充方式:充满、适合、拉伸、平铺。它们代表什么意思呢?
充满图片的最短边等比例中心缩放到图形边缘
适合图片的最长边等比例中心缩放到图形边缘
拉伸图片所有边拉伸到图形边缘
平铺平铺可将图像保持其原始大小,并可以对其进行调整,然后将其平铺以适合图层。
经验分享 未读
Sketch教程:如何批量修改某一种颜色做设计不是很规范的小伙伴颜色可能会有很多很接近的,在做设计规范和标注的时候就会很尴尬,sketch提供了一键批量修改文档中的某个颜色。
从菜单中选择“ 编辑”>“查找和替换颜色”…(或按⌘+ ⌥+调F出“查找和替换颜色”菜单。从此处,选择要在设计中查找的颜色以及要替换为的颜色。
启用“包括该颜色的所有不透明度”以查找具有不同alpha值但RGB或HEX值相同的所有颜色。
启用“保留原始不透明度”以在替换颜色时保持这些不同的Alpha不变。
经验分享 未读
Sketch教程:添加颜色预设值,方便大量使用我们会经常用一些规范中要求的指定颜色。我们不仅可以为他们添加图层样式,还可以创建颜色预设,并且为它们设置名字。
要添加预设,请选择颜色,渐变或图像填充,选择是将其添加到全局(所有文档)还是文档(仅此文档)预设中,然后单击+图标。
要重命名预设,请确保你正在列表视图中查看预设,按住Control键并单击它,然后选择“ 重命名”。你还可以按住Control键单击并选择在全局位置或文档位置之间移动或复制预设。
你可以拖动预设以对其重新排序,或者将其完全拖出彩色弹出框以将其删除(或按住Control键单击并选择Delete)。
最后,当你按住Control键单击纯色预设时,可以选择将其HEX,RGB,HSL,Objective-C或Swift代码颜色值复制到剪贴板。
经验分享 未读
Sketch教程:如何使用快捷键调整渐变的梯度点你可以使用以下快捷方式来调整渐变:
按键
说明
1 – 9
沿着渐变条放置一个新的色点(例如3= 30%)
=
将梯度点平均放置在其他两个点之间
Tab
在色点之间切换
→ 要么 ←
逐渐调整色点位置。
⇧+ →或←
以更大的增量调整色点位置
经验分享 未读
Sketch教程:如何运用模糊在Sketch中提供四种模糊选项:高斯模糊、运动模糊、缩放模糊、背景模糊。
高斯模糊高斯模糊可以在所有方向上应用模糊。你可以使用其滑块设置模糊量。
运动模糊运动模糊在一个方向上模糊表示运动。你可以使用滑块设置模糊量和角度。
缩放模糊缩放模糊将从一个点向外模糊。你可以设置模糊量及其起点。
背景模糊背景模糊可复制macOS和iOS中叠加层和窗格后面的模糊。图层下面的内容将模糊,你可以在检查器中设置该内容的饱和度和模糊量。如果你在此层上有任何填充样式,则它们必须是透明的才能看到这种模糊。透明的颜色填充也是对其进行着色的好方法。
注意:应用大量模糊(或大量模糊)可能会导致Sketch变慢,因为它们需要大量内存和处理能力才能渲染它们。
经验分享 未读
Sketch教程:如何改变路径方向我们经常会用到一些箭头进行指示说明,但是有的时候我们绘制曲线并不是按照我们想要的顺序进行绘制的,所以我们可以更改路径的方向。
可以使用下拉菜单为路径的起点和终点选择箭头。要切换它们出现在哪一端,请选择“ 图层”>“路径”>“倒序”。
这样就可以随心所欲的设置起点、终点的锚点样式了!
经验分享 未读
Sketch教程:如何使用文本样式选择一个图层,然后在“检查器” 的“ 外观”面板下选择显示为“ 无文本样式”的弹出菜单,然后在“组件弹出窗口”中,选择要应用的文本样式。你可以使用弹出式窗口顶部的搜索栏来帮助你找到所需的样式。
选择一个图层,并确保已应用要编辑的文本样式,然后对其样式进行更改。完成此操作后,你会看到“文本样式”名称旁边显示一个星号(*)。在这里,你可以单击“外观”面板中的以下按钮之一:
创建将创建一个新的文本样式,并在其中应用你的更改。
更新会将你所做的更改应用于此图层以及使用相同样式的任何其他图层。
分离将保留你对该层所做的更改,但删除文本样式。
使用更多(…),你可以选择重置样式(如果进行了更改)或重命名样式。
提示:你可以将“文本样式”包含在“库”中作为与他人共享的一部分。
经验分享 未读
Sketch教程:如何为样式编组在Sketch60版本中对于样式和组件有了进一步的改变。让我们来看看。
如何创建样式组#要使样式在零部件面板和插入菜单,使用格式为它们命名:Group-name/Style-name。例如,两个符号命名Background/Light和Background/Dark将一组名为Background的地方。
注意:对于Sketch 60及更早版本,你需要在一个组中具有两个或多个样式,然后它们才能出现在自己的子菜单中。
在零部件面板组织样式#你可以在“组件面板”中组织文本和图层样式。双击样式或组以将其重命名。你还可以将样式拖放到现有组中,或通过简单地将一种样式拖到另一种样式上来创建新组。
样式在“组件面板”中按字母顺序排列。
经验分享 未读
Sketch教程:如何管理图形的样式属性单击样式属性控件之间的空格上的拖动,以将其移动到其他属性上方和下方。
选中或取消选中每个样式属性旁边的复选框以启用或禁用它。如果对禁用的样式属性进行调整,则将启用它。
要完全删除样式属性,请单击它并将其拖出左侧的属性窗口,或者按住Control键单击并选择Remove,或单击面板顶部的垃圾箱图标(如果已禁用)。
转载内容 未读
什么是图层的混合模式?它们的原理是怎样的?很多人会讲解设计师如何使用它们,很多深度文章会介绍公式,但是却没有将他们连起来的介绍,导致人们用起来总是云里雾里的。可能这个视频会给你答案。
P1
P2
经验分享 未读
Sketch教程:更换 Data 数据快捷键我们使用Data功能插入数据之后快速更换可以用快捷键。
如何刷新和清除数据按⌘+ ⇧+ D或从“ 数据”菜单中选择“ 刷新数据 ” 以用来自数据源的不同图像或文本填充图层。
要删除数据源和图层之间的连接,请在“ 数据”菜单中单击“ 与数据源断开连接”。
注意:与数据源断开连接不会恢复图层的原始内容。
佳作推荐 未读
Behance 佳作推荐 - GUTA 咖啡 视觉设计在我看来,一个优秀的设计会激励设计师。这个作品一定会做到。
本文为转载文章,以下内容来源于
Guta Cafe Rebranding
M — N Associates
—Deriving unique Vietnamese street culture, Guta Cafe grows to be a familiar coffee brand for urban people could connect and enjoy the outdoor environment. Focusing on responsive and affordable store setup, they have grown fast, dominated Saigon and become one of the most popular convenient coffee chain for everyone in the city.gut ...
经验分享 未读
Sketch教程:缩小被插入的图片所占用的空间在文档中添加大量图像会增加其文件大小,并减慢Sketch的速度。为了解决这个问题,你可以通过选择图层>图像>最小化文件大小来减小图像的大小。
提高了Sketch速度!
经验分享 未读
Sketch教程:编辑被插入的图片Sketch具有少量的位图图像编辑工具选择。要使用它们,请在“画布”上选择一个图像,然后双击它以进入编辑模式。从那里,你可以从Inspector中的两个工具中进行选择:
选择:让你选择图像上的矩形区域。
魔术棒:可让你单击并拖动图像上的任意位置以选择特定区域。阻力越大,选择公差越大。
做出选择后,按住⇧可以添加其他选择,或者按住⌥可以从选择中减去。你还可以使用以下工具:
反转:翻转你的选择,因此现在选择了未选择的区域。
裁剪:裁剪图层,使其仅包含所选内容。
填充:使用颜色弹出框中的颜色填充选择。
Sketch编辑位图对性能影响较大,推荐编辑位图使用位图编辑工具(例如:Photoshop)
经验分享 未读
Sketch教程:给文本添加修饰、调整字符选项(下划线、删除线、调整大小写)
点击「字符」右侧的设置按钮即可看到选项
在Sketch中我们偶尔也会需要一些删除线,例如电商促销打折等等。我们通过删除线可以快速添加这个效果。
选中需要添加删除线的文本
在右侧的属性栏中找到「字符」
这里都是设置字符属性的位置。
点击「调整字符选项」
我们就可以看到更多字符相关的选项了
我们可以添加删除线、添加下划线,还可以让Sketch中的全部英文大写或者全部英文小写。
经验分享 未读
Sketch教程:变换工具的使用要使用“变换”工具,请选择一个或多个形状,然后转到“ 图层”>“变换”>“变换”。或者,你可以使用键盘快捷键 ⌘+ ⇧+ T。你也可以通过“ 视图”>“自定义工具栏...”将“变换”工具添加到工具栏中。
变换工具可将点添加到形状的每个角以及每个角之间的点。单击一个点并将其拖动以变换和倾斜你的形状。
如果单击并拖动两个角之间的点,则将同时移动两个角。
单击并拖动某个角点时,对角将同时沿相反方向移动。要仅控制一个角,请按住⌘。
经验分享 未读
Sketch教程:旋转时修改旋转中心点
使用工具栏中的旋转工具进行旋转,可以修改中心点。
选择形状并单击工具栏中的“旋转”按钮。然后单击并拖动到形状外部的任何位置以旋转它。
要更改形状旋转的轴,只需单击十字准线并将其中心拖动到要旋转的点。要重置此设置,只需重新选择形状即可。
经验分享 未读
Sketch教程:使用运算符调整图层的大小Sketch支持使用运算符来调整图层的大小:
例如宽度输入了250*2r代表的意思是宽度设置为250X2,并从右侧缩放。
默认情况下,是以左上为默认缩放位置。
你还可以使用数学运算来调整大小或移动以下图层:
最后,如果要编辑圆角矩形的拐角半径,则可;以为每个拐角指定不同的值(例如30; 40; 20; 30)。
经验分享 未读
Sketch教程:根据图层的对齐
最开始的时候我看到很多教程都是锁定图层才能根据指定图层对齐,我一开始认为这是一个非常麻烦的方法,官方肯定有更好的方式,后来我研究之后发现,这个锁定图层再对齐竟然是官方给的方案。
你可以使用检查器顶行中的六个对齐按钮来对齐图层。
从左到右:水平分布,垂直分布,左对齐,水平对齐,右对齐,顶部对齐,垂直对齐,底部对齐。
如果你的MacBook带有TouchBar,则在选择一组图层时也会看到这些选项。
Sketch会将你选择的图层与其画板对齐(如果直接使用的话)。
如果选择两个或更多层,Sketch将使所有内容与最大层对齐。要覆盖此图层并将对象与特定图层对齐,请选择该图层并将其锁定(⌘+ ⇧+ L),按住⇧以保持锁定的图层处于选中状态,然后选择要对齐的对象。
要将两个或更多图层的选择对齐到Artboard,请选择图层,按住⌥并单击要使用的对齐按钮。
经验分享 未读
Sketch教程:如何框选时只选中完全在框内的图层
拖动时按 option 键
在Sketch中,默认的拖拽框选都是接触式框选,这就意味着只要接触到你的选框就被选中。
有的时候我们想要只选中指定的那一个,但是需要的图层被包含于外面的图层,比如说“如何用框选选中上图的C?“。
所以我们只要在框选的时候按住 option 就可以只选中被包含的图层:
左侧:按住Shift并拖动。在右侧:按住Shift-Option并拖动。
经验分享 未读
Sketch教程:如何进入演示模式、全屏模式
⌘ + .
要隐藏Sketch UI,并仅在画布上查看你的工作,请在菜单中选择“ 视图”>“隐藏界面 ”(或按⌘+ .)以切换“演示模式”。
切换前:
切换后: