插圖 引用 同一行兩個(gè)插圖

Every creative person has probably already been in this situation: A project, be it a website, an app — or as far as I am concerned: often a news story would benefit from an appealing side visual. But neither budget nor time makes it possible to hire an illustrator. Yeah, know this situation, been there and would like to show you a way out in this article. Today you will learn how to conjure a simple but effective illustration from a simplistic icon in only five steps. In Sketch, Illustrator, Figma or literally any design software you can imagine.

每個(gè)有創(chuàng)造力的人都可能已經(jīng)處于這種情況：一個(gè)項(xiàng)目，無(wú)論是網(wǎng)站，應(yīng)用程序，或者就我而言：新聞故事通常都可以從吸引人的視覺(jué)效果中受益。 但是預(yù)算和時(shí)間都無(wú)法聘請(qǐng)插圖畫(huà)家。 是的，知道這種情況，并希望在本文中為您指明出路。 今天，您將學(xué)習(xí)僅用五個(gè)步驟就可以從一個(gè)簡(jiǎn)單的圖標(biāo)中提取出一個(gè)簡(jiǎn)單而有效的插圖。 在Sketch，Illustrator，Figma或您可以想象的任何設(shè)計(jì)軟件中。

Let’s go!

我們走吧！

步驟1：選取圖示 (Step 1: Pick your Icon)

First, you want to make sure to pick an icon that fits your visual and semantic needs. It’s best to choose a suitable icon from any open source — I usually use the outline icons from material.io. Of course, you can also stick to any other resource you might have access to. For this tutorial, I chose the “subscription” icon of Material Design in the duo-tone variant.

首先，您要確保選擇適合您視覺(jué)和語(yǔ)義需求的圖標(biāo)。 最好從任何開(kāi)源中選擇合適的圖標(biāo)-我通常使用material.io中的輪廓圖標(biāo)。 當(dāng)然，您也可以堅(jiān)持使用任何其他可能具有訪問(wèn)權(quán)限的資源。 在本教程中，我選擇了雙色調(diào)變體中的Material Design的“訂閱”圖標(biāo)。

Pro tip: Make sure to download your icon as an SVG to be able to scale it efficiently. Because that is also the first step we are going to perform in order to create our illustration:

專(zhuān)家提示：請(qǐng)確保將圖標(biāo)下載為SVG，以便能夠有效縮放。 因?yàn)檫@也是我們?yōu)榱藙?chuàng)建插圖而要執(zhí)行的第一步：

Increase the size of your icon and correct possible mistakes or things you don’t like.增大圖標(biāo)的大小，并糾正可能的錯(cuò)誤或不喜歡的內(nèi)容。

The first step is to make your icon big enough to be the star in your illustration later. You can also make some minor tweaks to it at this stage if you like. For instance, in the case of my icon, the two lines in the upper section had some strange offsets to them, so I changed the spacing a little bit after resizing. Beyond that I also wasn’t satisfied with the harsh edges of the two upper bars, so I gave them rounded corners to match the visual style of the bottom window.

第一步是使圖標(biāo)足夠大，以便稍后成為插圖中的星星。 如果愿意，您也可以在此階段對(duì)其進(jìn)行一些細(xì)微調(diào)整。 例如，對(duì)于我的圖標(biāo)，上半部分的兩行有一些奇怪的偏移，因此在調(diào)整大小后我更改了一點(diǎn)間距。 除此之外，我也對(duì)兩個(gè)上部條形的粗糙邊緣不滿(mǎn)意，所以我給了它們圓角以匹配底部窗口的視覺(jué)樣式。

If you have more than one element for your icon, make sure that the stroke size is the same throughout your composition, otherwise, it will look unbalanced in the end.

如果您的圖標(biāo)有多個(gè)元素，請(qǐng)確保整個(gè)構(gòu)圖的筆觸大小相同，否則最終看起來(lái)會(huì)不平衡。

第2步：選擇顏色 (Step 2: Select your Colours)

Next, you should choose a colour for your main icon. Vibrant ones are best suited for this. If you work for a company with an existing style guide, you should, of course, use the colours according to the given CI. Otherwise, you can get inspiration from the logo or other design elements of the company. Now, paint the most important elements in your design with this colour. I have chosen a bright red as my main colour for the composition. As a secondary colour, I like to use complementary ones, because it gives the whole piece more vividness. For this project, I’ve chosen a shade of medium blue as an alternative colour.

接下來(lái)，您應(yīng)該為主圖標(biāo)選擇一種顏色。 充滿(mǎn)活力的最適合于此。 如果您在使用現(xiàn)有樣式指南的公司工作，則應(yīng)根據(jù)給定的CI使用顏色。 否則，您可以從公司的徽標(biāo)或其他設(shè)計(jì)元素中獲得靈感。 現(xiàn)在，用這種顏色繪制設(shè)計(jì)中最重要的元素。 我選擇了鮮艷的紅色作為合成的主要顏色。 作為第二種顏色，我喜歡使用互補(bǔ)色，因?yàn)樗拐髌犯由鷦?dòng)。 對(duì)于這個(gè)項(xiàng)目，我選擇了中等藍(lán)色的陰影作為替代顏色。

Picking the right colours for the project is vital, so take your time. We will build on that later on.為項(xiàng)目選擇正確的顏色至關(guān)重要，因此請(qǐng)花一些時(shí)間。 我們將在以后的基礎(chǔ)上進(jìn)行構(gòu)建。

If your customer really doesn’t give you any instructions for colour selection or you start a completely new and standalone project, you can use a colour palette generator like this one from Coolors. Smash the Space Bar until you really love a combination and paint your icon accordingly.

如果您的客戶(hù)確實(shí)沒(méi)有為您提供任何顏色選擇說(shuō)明，或者您啟動(dòng)了一個(gè)全新的獨(dú)立項(xiàng)目，則可以使用Coolors中的此類(lèi)調(diào)色板生成器。 粉碎空格鍵，直到您真的喜歡組合并相應(yīng)地繪制圖標(biāo)。

步驟3：為您的構(gòu)圖添加形狀 (Step 3: Add Shapes to your composition)

Our icon already looks good now, but for an illustration, there is still a lot of stuff missing. In order to prevent it from floating in a vacuum, we add some shape to our layout. Let’s insert an abstract background shape. I often use simple rectangular or oval forms as a starting point and change them with my pen tool just so that a visually appealing bubble is created.

現(xiàn)在，我們的圖標(biāo)已經(jīng)看起來(lái)不錯(cuò)，但是作為示例，仍然缺少很多東西。 為了防止它在真空中漂浮，我們?cè)诓季种刑砑恿艘恍┬螤睢?讓我們插入一個(gè)抽象的背景形狀。 我經(jīng)常以簡(jiǎn)單的矩形或橢圓形為起點(diǎn)，并使用鋼筆工具對(duì)其進(jìn)行更改，以創(chuàng)建一個(gè)視覺(jué)上吸引人的氣泡。

To make the whole composition even more interesting, we add two floating bubbles and colour them in our two previously chosen shades. To make the whole thing a bit more interesting, I give the two elements an opacity of 60% to let the form that lies behind shine through just slightly. This gives us an adorable, almost glass-like look and adds even more character to the plain icon from the beginning.

為了使整個(gè)構(gòu)圖更加有趣，我們添加了兩個(gè)浮動(dòng)氣泡，并用之前選擇的兩個(gè)陰影為其著色。 為了使整個(gè)事情變得更加有趣，我為兩個(gè)元素提供了60％的不透明度，以使后面的形式略微閃耀。 這給了我們一種可愛(ài)的，幾乎像玻璃的外觀，并從一開(kāi)始就為純圖標(biāo)添加了更多特征。

Try to experiment with crazy shapes, even if they seem unbalanced at first. You can integrate them later with the help of other elements into the arrangement.嘗試嘗試瘋狂的形狀，即使起初看起來(lái)似乎不平衡。 您可以稍后在其他元素的幫助下將它們集成到布置中。

At this stage, it already helps to know where you are going to make use of your gorgeous illustration later on. For example, If you put it in front of a dark background, you may paint the rear bubble in a brighter tone now — if your background is on the lighter side, I would advise you to use a dark colour as the backmost layer. The reason for this is visual contrast, which can never be high enough. Usually, this makes your layouts more striking and visually appealing to your audience.

在此階段，知道以后將在哪里使用華麗的插圖已經(jīng)很有幫助。 例如，如果將其放置在深色背景之前，則可以現(xiàn)在以較亮的色調(diào)繪制后氣泡-如果背景較淺，我建議您使用深色作為最后一層。 原因是視覺(jué)對(duì)比度，它永遠(yuǎn)不會(huì)足夠高。 通常，這會(huì)使您的布局更加醒目，并在視覺(jué)上吸引觀眾。

步驟4：深入了解主要元素 (Step 4: Give your main elements depth)

In the fourth step, we add more depth to the elements we already have by creating some shadows. However, we don’t just use drop shadows but take advantage of the fact that we work on vector graphics and can therefore not only change the border size of the elements but also give them different fills. To get a shadow with extra depth, we duplicate our entire icon and re-colour it. But instead of using a regular fill for our duplicate, we use linear gradients to do so.

在第四步中，我們通過(guò)創(chuàng)建一些陰影來(lái)增加已有元素的深度。 但是，我們不僅使用陰影，還利用了我們?cè)谑噶繄D形上工作的事實(shí)，因此不僅可以更改元素的邊框大小，還可以為其填充不同的填充。 為了獲得更深的陰影，我們復(fù)制了整個(gè)圖標(biāo)并重新著色。 但是，我們不是使用常規(guī)填充來(lái)填充副本，而是使用線(xiàn)性漸變來(lái)做到這一點(diǎn)。

Give the red elements a red linear gradient leading into transparency and the blue elements a blue gradient leading into transparency. In order to achieve the effect of a physical shadow, we give both the blue and the red colour in the gradient transparency of 40%.

為紅色元素提供一個(gè)導(dǎo)致透明度的紅色線(xiàn)性漸變，為藍(lán)色元素提供一個(gè)導(dǎo)致透明度的藍(lán)色漸變。 為了獲得物理陰影的效果，我們將藍(lán)色和紅色都設(shè)置為40％的漸變透明度。

In this step, you can play with the positioning of the shadow element as you like. There is only one rule you should follow: as humans, we are used to the fact that the shadow of objects always goes in the same direction. This is because of a big global light source called “the sun”. In general, we consider everything else to be unusual and strange. So don’t make your audience think and deliver all shadow elements in the same distance to their parent elements.

在此步驟中，您可以隨意調(diào)整陰影元素的位置。 您只應(yīng)遵循一條規(guī)則：作為人類(lèi)，我們已經(jīng)習(xí)慣了這樣一個(gè)事實(shí)，即物體的陰影總是朝同一方向前進(jìn)。 這是因?yàn)橛幸粋€(gè)巨大的全球性光源稱(chēng)為“太陽(yáng)”。 總的來(lái)說(shuō)，我們認(rèn)為其他所有事情都是異常和奇怪的。 因此，請(qǐng)不要讓您的聽(tīng)眾思考并向所有陰影元素提供與其父元素相同的距離。

If you want to do something fancy, try inverting the gradient for one of the two colours, as I did in the example above. This will create the effect as if the eye line of the observer is exactly at the middle height of the icon. With this little technique, you can achieve even more visual depth.

如果您想做一些花哨的操作，請(qǐng)嘗試反轉(zhuǎn)兩種顏色之一的漸變，就像我在上面的示例中所做的那樣。 這將產(chǎn)生一種效果，就好像觀察者的視線(xiàn)正好在圖標(biāo)的中間高度一樣。 使用這種小技巧，您可以獲得更大的視覺(jué)深度。

步驟5：添加與內(nèi)容相關(guān)的設(shè)計(jì)元素 (Step 5: Add content-related design elements)

Last but not least, you can give free rein to your creativity. Add a few content-related design elements in suitable places within your illustration. I decided to use forward and backward buttons and plus and minus symbols to do so. I tinted them with the help of my already established colour palette and some darker shades of grey matching the background. If that’s not enough, we can use our pencil tool and draw some vertical or horizontal lines and abstract our original icon even more. Even though it’s tempting, don’t go crazy with colouring at this point because otherwise, you will lose your already established visual hierarchy.

最后但并非最不重要的一點(diǎn)是，您可以自由發(fā)揮自己的創(chuàng)造力。 在插圖中的適當(dāng)位置添加一些與內(nèi)容相關(guān)的設(shè)計(jì)元素。 我決定使用前進(jìn)和后退按鈕以及加號(hào)和減號(hào)來(lái)執(zhí)行此操作。 我借助已經(jīng)建立的調(diào)色板和與背景匹配的一些較深的灰色陰影為它們著色。 如果這還不夠，我們可以使用鉛筆工具繪制一些垂直或水平線(xiàn)，并進(jìn)一步抽象原始圖標(biāo)。 即使很誘人，也請(qǐng)不要為著色而瘋狂，因?yàn)榉駝t，您將失去已經(jīng)建立的視覺(jué)層次。

E voilà: Our icon is ready and we can finally use it in our projects:

Evoilà：我們的圖標(biāo)已經(jīng)準(zhǔn)備好，我們終于可以在項(xiàng)目中使用它了：

增強(qiáng)您的項(xiàng)目 (Enhance your project)

Now that we have created an illustration from a simple icon in five easy steps, you can use your creation in your layout. To do this, it is best to export it in SVG or PNG format in order to really take advantage of the transparent areas of your illustration and not have to accept any loss of quality.

現(xiàn)在，我們已經(jīng)通過(guò)五個(gè)簡(jiǎn)單的步驟從一個(gè)簡(jiǎn)單的圖標(biāo)創(chuàng)建了一個(gè)插圖，您可以在布局中使用您的作品。 為此，最好以SVG或PNG格式導(dǎo)出它，以便真正利用插圖的透明區(qū)域而不必承擔(dān)任何質(zhì)量損失。

I hope you enjoy the final result of your artwork and I hope you can incorporate this technique into your projects more often in the future.

我希望您喜歡藝術(shù)品的最終結(jié)果，并希望將來(lái)您可以將這種技術(shù)更多地應(yīng)用于您的項(xiàng)目中。

翻譯自: https://medium.com/swlh/five-easy-steps-to-turn-an-icon-into-an-illustration-b69af96e9df

插圖 引用 同一行兩個(gè)插圖

總結(jié)

以上是生活随笔為你收集整理的插图 引用 同一行两个插图_将图标变成插图的五个简单步骤的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。