ReSur

Live Curious

Menu

Skip to content
  • 关于

[实例] ReSur教你用Sketch快速制作矢量ReLogo

Posted November 6, 2014 by ReSur

draw-a-relogo-by-sketch

  • ReLogo即“10×10方形格中包含4×8格的像素大写”R”和4×5格的像素小写”e” 式样”的标识,”R”和”e”相距1格,其”Re”整体与边界相比在上下左三边各留空了1格的距离,字形偏长,与10px的Helvetica Regular字体的”Re”分别去其2px和1px中轴线后所得图形一致(当然这是后来发现的)。
  • 在不得已的情况下可以改进其点阵排布以凸显显示效果,如网站使用的16×16像素favicon,但是字形在视觉上必须保持一致。
  • 在节日的时候可以有节日Logo,且内容不一定是”Re”,故不受上一条结论的限制,但是Logo在风格上必须保持一致。
  • 最初的版本设定在2008年包含黑色分割线,并包括了一个绿色背景的版本,第二版本将黑色分割线改为白色(2011年8月),第三版本取消分割线并更换背景到一个更加鲜艳的色块组合(2013年12月),第四版本彻底扁平化并修正一些细节(2014年9月)。

原材料只有一张图片形式的ReLogo(如下)

ReLogo

现在打开Sketch,导入现有的这张图片。对齐顶点到(0, 0)以方便操作

按“R”键打开矩形工具,拖动鼠标到让宽度等于单个色块的边长值,同时按住Shift保持宽高比。轻轻拖动它对齐到(出现两条交叉红线)ReLogo的左上角,并在属性取消边框的勾选,标记为A1。

draw-a-relogo-by-sketch-step1

再次选中A1,按住“Option”键,往下轻轻拖动,直到拖出的图形和A1的下半部分严丝合缝对齐,即A2。

draw-a-relogo-by-sketch-step2

现在,重复按 Command + D 共计复制8次,嗯,第一列A1~A10很快就出来了

锁住背景图层ReLogo,然后框选A1~A10,按 Command + G 把它们全部分到A组

draw-a-relogo-by-sketch-step3

按照前面的方法横向拖出B组(第二列)-> 然后Command + D 复制8次

draw-a-relogo-by-sketch-step4

所有基底真的很快就出来了。现在的样子,像不像一个等待整容的人正被纱布包裹着呢?

 

将背景图层ReLogo直接拖到所有图层最上面或选择后按 Control + Option + Command + ↑ 快捷键 来置顶图层

然后双击A组(第一列)来展开A组 -如果刚才锁定的图层取消了,选择的时候需要同时按Option来实现第二个图层透选功能,下同

选中A1,确保鼠标位置一直位于A1内部,按 Control + C 进入拾色模式,现在拾色器显示的是最上层锁定层取样的颜色

draw-a-relogo-by-sketch-step5

这时点下鼠标将这个颜色赋予底层的A1。可以看到A1的填充已经实现

draw-a-relogo-by-sketch-step6

重复这一操作

点击选中图层 -> Control + C -> 点击确认

(双击进图层组)

不到两分钟,所有色块填色完成

这时可以按 Shift + Command + H 来反复 显示/隐藏最顶端的图层 来肉眼观察上下颜色是否一致。

确认无误后隐藏顶端的图层,按照需要的大小缩放输出即可。


虽然操作简单,但是重要的是如何在制图的过程中保持高效和思维的活跃

下期我们学习通过Maya用纯粹的代码来制作3D版ReLogo,是不是很酷炫呢,敬请期待!

ReLogo-3D

 

Posted in: Design | Tagged: Hotkey, logo, ReLogo, Sketch | 1 Comment
  • Archives

    • May 2019
    • May 2018
    • November 2016
    • July 2015
    • February 2015
    • November 2014
    • October 2014
    • May 2014
    • March 2014
    • September 2013
    • August 2013
    • July 2013
    • October 2012
    • September 2012
    • August 2012
    • June 2012
    • May 2012
    • March 2012
    • February 2012
    • January 2012
    • May 2011
    • January 2011
    • November 2010
    • October 2010
  • Meta

    • Log in

Powered by WordPress & Portfolio.