网络科技

    今日:43| 主题:301799
收藏本版
互联网、科技极客的综合动态。

[其他] About that space illustration you keep seeing around

[复制链接]
我说了我爱你- 发表于 2016-11-29 13:06:24
322 9

About that space illustration you keep seeing around

About that space illustration you keep seeing around
                  About that space illustration you keep seeing around

      Originally published on the official Adobe blog

     I sat down, played some music, dimmed the lights, and opened my laptop. Had a ton of stuff to do. In an attempt to summon inspiration, I started mindlessly drawing lines from one corner of the screen to the other, when suddenly a comet formed. “Hm…”, my brain was slowly waking up, “…what if I connect the lines and add some planets”. Being the master procrastinator I am, I did just that. And I did a couple more things after that. Few hours later I had my most popular Dribbble shot, as well as my most popular illustration ever.
      An illustration that I had no idea would inspire its own illustration trend with many designers and companies around the world re-creating it, re-iterating it, re-imagining it… I guess it really hit me when I read Meg Robichaud’s answer in a Dribbble interview about her all-time favorite Dribbble shot:
     I mean the colours and the shapes are stunning, and of course, it’s space: awesome. The reason it’s my favourite shot is because I spot people with it as their phone or desktop wallpaper all the time, and it’s like this awesome little badge: “Yeah I know you got that on Dribbble. Wanna stop whatever we’re doing and talk about Dribbble?”
     When I read this I though “Wow. This is real. I’m not imagining it”.
     So, having a bunch of tutorial requests constantly coming my way, I’m finally sharing a how-to, and more importantly, the thought process behind it. Enjoy!
                        The illustration style

     Illustration style is basically all about self-imposed limitations. And my brain is constantly coming up with these weird rules when I illustrate stuff. It’s almost like ridiculous challenges that I can’t stand to pass over — What if I draw a human using only circles? What if I illustrate a sunset using only one color? And bam, a new illustration style is born.
     Geometric rules, logical progressions, symmetry. There’s something very appealing in having strict mathematical rules applied to art. It feels like reverse engineering magic, it strips away the mystical element in art so it’s almost like revealing the science behind it.
     The space illustration has two of these rules.
     The rounded wavy pattern

                  

About that space illustration you keep seeing around

About that space illustration you keep seeing around
                This wavy pattern is the foundation of the space illustration, since almost every object is made up of it. The wavy pattern is actually alternating inwards and outwards curves. Let me show you how it can be easily created in Adobe Illustrator.
                  

About that space illustration you keep seeing around

About that space illustration you keep seeing around
                First, draw some rectangles with the same height. The spacing between the rectangles should be the height of one rectangle. You can turn on “Show Grid” and “Snap to Grid” to make it easier.
                  

About that space illustration you keep seeing around

About that space illustration you keep seeing around
                Next, fill the gaps with some more rectangles, but make sure that these are shorter than the first batch of rectangles in order to form the inwards curves. Select all and merge into one shape.
                  

About that space illustration you keep seeing around

About that space illustration you keep seeing around
                Lastly, drag the live corners to round them until they form perfect semi-circles. Ta-da! You just drew a bunch of hotdogs stacked together.
     Combining various lengths and sizes of hotdogs, you can already start forming objects:
                  

About that space illustration you keep seeing around

About that space illustration you keep seeing around
                The 30° Tilt

     Every object in the illustration tilts at 30°.
      Why even tilt in the first place? The objects in the illustration are things floating in space, which by definition are disjointed, because they’re… well, floating in space. So synchronizing their direction creates a nice unity.
                  

About that space illustration you keep seeing around

About that space illustration you keep seeing around
                 Ok, but why tilt at 30°? A right angle or a horizontal direction is too symmetric and understimulating. Diagonal tilt breaks the symmetry in a synchronized way. The reason why 30°, and not 45, or 20, or 15… is just that I like it better. Because 30° is clearly the best angle in the world, ever.
     At this point, we have the shapes and the tilt, which sort of looks like this:
                  

About that space illustration you keep seeing around

About that space illustration you keep seeing around
                The colors

     As it turns out, my brain is fairly lazy when it comes to choosing color. It categorizes any illustration in one of the two categories — simple or complex. It then chooses a color palette accordingly.
     Complex illustrations have high granularity level, with many shapes/objects and a lot of detail. These are usually very pattern-like by nature and don’t have one clear focus point. My brain has decided that these types of illustrations apparently work well with monochromatic or analogous color palettes. Or, in broader terms — less colors and less color contrast. All this boils down to visual balance, so if the shapes are crazy, the colors should be tame.
     On the other hand, illustrations with lower complexity usually have a clear focus point and clear object hierarchy. On the shape side of things these illustrations seem to be rather straightforward, so the color choices can be wilder. High contrasting colors of any kind — complementary, triadic, tetradic, whateveradic as long as it’s an eye-catching, stimulating palette.
     There’s a whole universe in-between what I described as complex and simple illustrations, but my brain is not too concerned with all that spectrum, it’d rather label any illustration as either complex or simple. Sorry about that.
     The triadic color palette

     Due to the repetitive pattern and shapes, the space illustration apparently belongs in the “simple illustration” category. So I went nuts with the color palette, which is a roughly triadic choice of magenta, cyan and orange, with a violet background. Yay, a little bit of everything!
                  

About that space illustration you keep seeing around

About that space illustration you keep seeing around
                Here’s how that looks like on the color wheel:
                  

About that space illustration you keep seeing around

About that space illustration you keep seeing around
                  I promise I was not intending on drawing a peace sign:v:               The violet background is naturally the most present color percentage-wise, but the magenta and cyan are perceptually most dominant. The orange appears very little, so it’s more of an accent color, to create a bit of contrast.
     I chose violet as a background because it’s the glue color connecting all objects, so it needs to work well with each of the other colors separately. On the color wheel it’s located exactly halfway in-between the dominant colors — magenta and cyan, so it’s perfectly harmonious with both. It also works well with the accent color, orange, because they’re complementary colors.
     Pattern breakers

     Very often illustrations created with strict rules tend to be a bit too…. patterny? Predictable and boring, just too much of the same thing. Like, way too many hotdogs. So I was looking for ways to break the pattern in a way that doesn’t break the rules.
     The glow

                  

About that space illustration you keep seeing around

About that space illustration you keep seeing around
                I added glow in the same color of the planet, which looks quite realistic for lighter objects against a darker background. Glow also blurs the sharp borders a bit, and it gives the planets a physical property without breaking the flatness. I created the final composition and added the glow in Photoshop after porting all objects from Illustrator as smart objects.
     The glass atmosphere

                  

About that space illustration you keep seeing around

About that space illustration you keep seeing around
                The glass atmosphere was a last minute addition, and it’s again a physical property that creates more depth. There is no big secret in how this was achieved, it’s a simple combination of placement and a clipping mask:
                  

About that space illustration you keep seeing around

About that space illustration you keep seeing around
                  
          
  • Add a solid circle between the big planet and the objects behind it. Add subtle glow to the circle layer, using Overlay as the blending mode.      
  • Create a copy of the objects, place them on top of the circle layer, and optionally tweak the colors to be slightly lighter.      
  • Create a clipping mask. Select the copies of the objects, and right click > Create Clipping Mask.     
     It’s a wrap!

     After applying the hotdogs, the tilt, the colors, the glow and the glass atmosphere, you should be pretty much done by now! Here‘s a quick recap:
                  

About that space illustration you keep seeing around

About that space illustration you keep seeing around
             I’m curious to see how you apply the techniques to your own illustrations as well, so please do send your experiments my way. Thank you for reading! (◉ᴗ◉)
           Check out my stuff on  Behance  or  Dribbble  , and feel free to fist bump me on Twitter!
贾益才 发表于 2016-11-29 14:32:13
没人回帖。。。我来个吧
回复 支持 反对

使用道具 举报

topxg 发表于 2016-11-29 14:32:17
顶一个!
回复 支持 反对

使用道具 举报

马克莱莱 发表于 2016-11-29 14:40:18
明明可以靠脸吃饭,偏偏要靠才华
回复 支持 反对

使用道具 举报

刘子依 发表于 2016-11-29 15:01:50
爱我的人请继续,恨我的人别放弃.
回复 支持 反对

使用道具 举报

冷卉 发表于 2016-11-29 15:03:25
收藏了,我说了我爱你-加油!
回复 支持 反对

使用道具 举报

采轩芳 发表于 2016-11-29 15:19:37
有些失望是无可避免的,但大部分的失望,都是因为你高估了自己。
回复 支持 反对

使用道具 举报

lwl702 发表于 2016-11-29 16:05:16
坐等楼主现身!
回复 支持 反对

使用道具 举报

wugefei 发表于 2016-11-30 02:26:49
说不通啊,楼下的你说咋办?
回复 支持 反对

使用道具 举报

康鹏 发表于 2016-12-2 17:35:57
今年楼主不送礼,送礼就给楼下的!
回复 支持 反对

使用道具 举报

我要投稿

回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表