。
This week I’ve been forging background illustrations for my website, epdillon.com (launching soon). I’ve been using Adobe Illustrator to do all the major casting, dabbling in Figma only to temper the colours. Fresh from the design furnace, my hands are a-crackle with renewed Adobe skill. Scintillating shapes and amazing anchor points are mine to command! I roar in the face of vectors! (cue insane theatrical laughter and the eruption of volcanoes). Before I completely run away with myself and forget what I’m on about, I present to you 8 tips to make your life with Adobe Illustrator a little bit gooier. You know, like a treacle sponge cake? A pleasantly warm treacly sponge served with a side of fresh fresh knowledge. Mmmm. You can’t smelt cake, it’d taste horrible.
本周,我一直在為自己的網(wǎng)站epdillon.com制作背景插圖(即將推出)。 我一直在使用Adobe Illustrator進(jìn)行所有主要的投射,在Figma中涉獵只是為了調(diào)和顏色。 從設(shè)計(jì)熔爐剛接觸時(shí),我的手就充滿了Adobe的新技能。 閃爍的形狀和驚人的錨點(diǎn)是我的命令! 我面對(duì)矢量怒吼! (提示瘋狂的戲劇笑聲和火山噴發(fā))。 在我完全逃避自己并忘記正在發(fā)生的事情之前,我向您介紹了8條技巧,使您在Adobe Illustrator上的生活更加輕松。 你知道嗎,像一個(gè)糖蜜海綿蛋糕? 溫暖宜人的treacly海綿,配以新鮮的新鮮知識(shí)。 嗯 你不能冶煉蛋糕,它的味道太可怕了。
1 | 始終參考工作 (1| Always work from reference)
Conduct thorough research before picking up your pen. Create an image collection on Pinterest. Have a look through Designspiration, Dribble, and/or Behance for designs that inspire you. Look on Typewolf for font pairings that work well together. Use Adobe Color help pick and play with colour. Follow Instagram profiles like ocean.ui, ui_gradient, ui.insomniac, colours.cafe, coolors.co and save collections of design tips and colour palettes. Google image search artists and designers that you admire and save images of work which excites you. If your a visual or web designer, you can use this browser extension called Fontanello. You use it by right clicking on websites you admire so you can find out the details behind their font styling. I always check out this designer UIX Ninja for design inspiration. When illustrating I might use 3D model sites like Sketchfab or CGTrader for figure reference. Look at creative blogs for coverage of trends. Aaron Draplin’s design talks and videos are always great for inspiration!.
拿起筆之前,請(qǐng)進(jìn)行徹底的研究。 在Pinterest上創(chuàng)建圖像集合。 看看Designspiration, 運(yùn)球,和/或Behance的 為激發(fā)您靈感的設(shè)計(jì)。 看Typewolf 一起使用的字體配對(duì)。 使用Adobe Color幫助選擇并播放顏色。 關(guān)注Instagram個(gè)人資料,例如ocean.ui , ui_gradient , ui.insomniac , colours.cafe , coolors.co 并保存設(shè)計(jì)提示和調(diào)色板的集合。 您欽佩的Google圖片搜索藝術(shù)家和設(shè)計(jì)師,并保存令人興奮的作品圖片。 如果您是視覺(jué)或網(wǎng)頁(yè)設(shè)計(jì)師,則可以使用稱為Fontanello的瀏覽器擴(kuò)展。 您可以通過(guò)右鍵單擊您喜歡的網(wǎng)站來(lái)使用它,以便了解其字體樣式背后的詳細(xì)信息。 我總是檢查這位設(shè)計(jì)師UIX Ninja 設(shè)計(jì)靈感。 在進(jìn)行說(shuō)明時(shí),我可能會(huì)使用Sketchfab或CGTrader等3D模型站點(diǎn)作為參考。 查看創(chuàng)意博客 ,了解趨勢(shì)。 亞倫·德拉普林(Aaron Draplin)的 設(shè)計(jì)講座和視頻總是很容易獲得靈感!
Pablo Picasso is famously quoted as stating “good artists borrow, great artists steal” and that’s the same with design. By gathering styles you admire, imagery which inspires you and fonts that work, you give yourself a running start from which fresh ideas can flow. This is something which really should be going in the background of your practise all the time. I watch all kinds of YouTube videos covering wide ranges of topics from drawing to business. This series on how a design agency builds a brand from scratch is great food for thought. Concepts used to better ability in one creative area are often transferable, this video on bettering drawing practise is a good example. The core message behind it is learn to look at a range of images and deconstruct them, incorporate things you like into your own practise: that sites font; this adverts colour scheme; that apps illustration style; this videos animation style. Originality comes from how you combine elements together.
巴勃羅·畢加索(Pablo Picasso)曾被引述為“好藝術(shù)家借,大藝術(shù)家偷”的說(shuō)法,而設(shè)計(jì)也是如此。 通過(guò)收集您欣賞的樣式,激發(fā)您靈感的圖像和有效的字體,您可以為自己提供一個(gè)不斷發(fā)展的起點(diǎn),新的想法可以從中汲取靈感。 這確實(shí)應(yīng)該一直作為練習(xí)的背景。 我觀看了各種YouTube視頻,涵蓋了從繪畫(huà)到商業(yè)的廣泛主題。 有關(guān)設(shè)計(jì)機(jī)構(gòu)如何從頭開(kāi)始建立品牌的系列文章令人深思。 該視頻通常用于在一個(gè)創(chuàng)意領(lǐng)域提高能力的概念可以轉(zhuǎn)讓。 改善繪圖實(shí)踐就是一個(gè)很好的例子。 它背后的核心信息是學(xué)習(xí)查看一系列圖像并對(duì)其進(jìn)行解構(gòu),將您喜歡的東西結(jié)合到自己的實(shí)踐中:該網(wǎng)站的字體; 這會(huì)宣傳配色方案; 該應(yīng)用的插畫(huà)風(fēng)格; 此視頻的動(dòng)畫(huà)樣式。 創(chuàng)意源于您將元素組合在一起的方式。
During this initial design phase make quick thumbnail sketches as ideas spark. Try to get as many quick sketches down as you can. By working in pencil you can iterate much faster than you can on a computer. There are a decent range of plug-ins available to help bring your pencil lines to life. As soon as you feel things are starting to move in the right direction and you have a range of solid ideas to develop further move everything onto the computer and start pushing pixels around. Here are some other basic tips and some help with how to approach texture. Here is a list of online tutorials to further improve your basic skills.
在此初始設(shè)計(jì)階段,請(qǐng)隨著想法的產(chǎn)生快速繪制縮略圖。 嘗試盡可能多地獲取快速草圖。 通過(guò)使用鉛筆工作,您可以比在計(jì)算機(jī)上更快地進(jìn)行迭代。 有各種各樣的插件可幫助您使鉛筆線條栩栩如生。 一旦感覺(jué)到事情開(kāi)始朝著正確的方向發(fā)展,您就會(huì)有了一系列扎實(shí)的想法,可以將所有東西進(jìn)一步發(fā)展到計(jì)算機(jī)上,并開(kāi)始推動(dòng)像素移動(dòng)。 這是其他一些基本技巧 還有一些方法上的幫助 質(zhì)地 。 這是一系列在線教程 ,可進(jìn)一步提高您的基本技能。
2 | 自定義您的工作區(qū) (2| Customise your Workspace)
An example of a workspace I use for illustrating我用來(lái)說(shuō)明的工作區(qū)示例Each project requires a different set of tools. Making those tools more obvious and accessible improves your ability to get the job done without all that “where the f*** did I put pathfinder!” nonsense. If you’re not editing text you don’t need the Character and Paragraph Panels displayed, they’re just eating up space! Remove them! Select panels you want to use from the Window menu and arrange them on either side of your work area. Save your new workspace under a simple descriptive name for future access. It sounds like a lot of work but it really isn’t. Stop being lazy, you’re making your job harder! This video and this one do a good job of explaining what you can do.
每個(gè)項(xiàng)目需要一套不同的工具。 使這些工具更加明顯和易于使用可提高您完成工作的能力,而無(wú)需“僅在我將f ***放在探路器的位置!” 廢話。 如果您不編輯文本,則不需要顯示“字符面板”和“段落面板”,它們只是在占用空間! 刪除它們! 從“窗口”菜單中選擇要使用的面板,并將其排列在工作區(qū)的任一側(cè)。 用簡(jiǎn)單的描述性名稱保存新的工作區(qū),以供將來(lái)訪問(wèn)。 聽(tīng)起來(lái)需要做很多工作,但實(shí)際上并非如此。 別再懶了,您的工作變得更加艱難! 這個(gè)視頻 并且這很好地解釋了您可以做什么。
3 | 修改工具 (3| Modify your tools)
The current version of Illustrator CC allows you to enable and disable tools in the Tools Panel. You should have a look in there before you start your project and pull out anything that might be handy (it all works by drag and drop). Alternatively, get rid of tools which are irrelevant to your needs. If you do this before saving your workspace, your edited Tools Panel will be saved along with it for instant future access. Useful if you do lots of similar jobs. There are a great many tools available to supplement your workflow. Go down to the bottom of the Tools Panel and click on the icon with the three dots in a row (this is a menu icon referred to in UI as Meatballs — no joke). Clicking on the icon expands the Tools Panel out with a wider bar listing a whole heap of tools and their keyboard shortcuts. If you would like to make or amend keyboard shortcuts for tools you can go to Edit — Keyboard Shortcuts (or hit Alt+Shift+Ctrl [Option on Mac] +K). Check out this video about it.
當(dāng)前版本的Illustrator CC允許您在“工具面板”中啟用和禁用工具。 在開(kāi)始項(xiàng)目之前,應(yīng)該先瀏覽一下那里,然后拉出可能有用的所有內(nèi)容(通過(guò)拖放即可完成所有工作)。 或者,擺脫與您的需求無(wú)關(guān)的工具。 如果在保存工作區(qū)之前執(zhí)行此操作,則將與之一起保存已編輯的“工具面板”,以供日后訪問(wèn)。 如果您要做很??多類似的工作,則很有用。 有很多工具可以補(bǔ)充您的工作流程。 轉(zhuǎn)到“工具面板”的底部,然后單擊連續(xù)三個(gè)點(diǎn)的圖標(biāo)(這是一個(gè)在UI中稱為Meatballs的菜單圖標(biāo)-不開(kāi)玩笑)。 單擊該圖標(biāo)可展開(kāi)“工具面板”,并帶有一個(gè)較寬的欄,列出了全部工具及其鍵盤(pán)快捷鍵。 如果您要制作或修改工具的鍵盤(pán)快捷鍵,可以轉(zhuǎn)到“編輯”“鍵盤(pán)快捷鍵”(或按Alt + Shift + Ctrl [Mac上為Option] + K)。 觀看有關(guān)此視頻 。
4 | 命名您的圖層和子圖層。 (4| Name your layers and sublayers.)
If you ever need to share your files with another designer, they will worship at your feet for taking the time to name each layer correctly. It separates the amateurs from the pros. The basics are covered here. Only you know what Layer 1 and Layer 11 contain, that is, until you forget. Don’t get cheeky with me and choose something like Bob or Susan — we are talking about short descriptive naming. It’s a bad habit and everyone falls victim to it. Correct layer naming will dramatically cut down time spent searching for assets. That’s right, you or someone else may need to open up that file again and retrieve something from it at a later date. Save your colleagues, and yourself, the stress of wading through a ton of layers. It makes my fingers twitch just thinking about it!
如果您需要與其他設(shè)計(jì)師共享文件,他們會(huì)花時(shí)間為每個(gè)圖層正確命名,這會(huì)讓您感到敬畏。 它將業(yè)余愛(ài)好者與職業(yè)選手分開(kāi)。 這里介紹了基礎(chǔ)知識(shí)。 只有您知道第1層和第11層包含的內(nèi)容,即直到您忘記。 不要厚顏無(wú)恥地選擇Bob或Susan之類的東西-我們?cè)谡務(wù)摵?jiǎn)短的描述性命名。 這是一個(gè)壞習(xí)慣,每個(gè)人都成為它的受害者。 正確的圖層命名將大大減少搜索資產(chǎn)所花費(fèi)的時(shí)間。 沒(méi)錯(cuò),您或其他人可能需要再次打開(kāi)該文件,并在以后從其中檢索某些內(nèi)容。 節(jié)省您的同事和您自己的繁瑣工作。 考慮到它使我的手指抽搐!
Named layers and sublayers in Layers Panel圖層面板中的命名圖層和子圖層Mea culpa, in the past I have been particularly bad with this. Once I brought destruction on myself when I had to artwork some book covers containing around 50 unnamed layers, each filled with ungrouped unnamed sublayers, to produce 25-or-so uniquely different covers. Each with their own set of alterations. In times like these Illustrator will invariably decide to crash all of the time. I can still feel the hot spittle on the back of my neck as a former manager snarled “get it done by Friday!” over my shoulder, on no less than a Wednesday afternoon. I started to panic staring into that black abyss and emitted a silent scream. Dog owners for miles around awoke the next day to discover Fido had suddenly become as deaf as a doorpost. Some mornings I still wake up screaming about custom typography… Anyway, if you don’t want to wade through Hell just to make one little change, ending up burning with frustration and wanting to stick a gun in your mouth, name your layers. Every. Single. Time.
Mea culpa,過(guò)去我對(duì)此特別不滿意。 當(dāng)我不得不破壞自己時(shí),我不得不設(shè)計(jì)一些書(shū)封面,其中包含約50個(gè)未命名的圖層,每個(gè)圖層都填充有未分組的未命名子圖層,以制作25種左右獨(dú)特的封面。 每個(gè)都有自己的一套變更。 在這樣的情況下,Illustrator總是會(huì)始終崩潰。 一位前經(jīng)理咆哮著說(shuō):“在周五之前完成!”我仍然感到脖子后側(cè)灼熱。 至少在星期三下午在我肩膀上 我開(kāi)始慌張地凝視著那個(gè)黑色的深淵,發(fā)出一聲無(wú)聲的尖叫。 第二天,醒來(lái)幾英里的狗主人醒來(lái),發(fā)現(xiàn)Fido突然變得像門(mén)柱一樣充耳不聞。 某個(gè)早晨,我仍然大喊著自定義字體...無(wú)論如何,如果您不想為了做些小改變而在地獄中徘徊,最后卻因沮喪而燃燒,并想在嘴里放一把槍,給圖層起個(gè)名字。 每一個(gè) 單。 時(shí)間。
5 | 灰度設(shè)計(jì)。 在Figma中選擇顏色。 (5| Design in grayscale. Pick your colours in Figma.)
Boom, ‘nuff said. Not really. I’m going to put it out there, and you may not agree with it, but this is how I stand on the matter. Illustrator sucks at refining colours. The program’s only redeeming features in this regard are the relatively new Recolour Artwork tool (which has all kinds of handy features) and the global colour swatch setting. The colour and swatch interfaces are generally unintuitive. Menus within menus within menus. I don’t think Adobe packages as a whole provide a particularly great experience for those wanting to navigate and fine tune colour properties. This is coming from a guy who has used Adobe software for around ten years — so I’m at least pretending to know a little bit about what I’m talking about.
oom,'納夫說(shuō)。 并不是的。 我要把它放在那里,您可能不同意,但這就是我堅(jiān)持的立場(chǎng)。 插畫(huà)家糟透了色彩。 該程序在這方面的唯一兌換功能是相對(duì)較新的Recolour Artwork工具(具有各種便捷功能)和全局色樣設(shè)置。 顏色和色板界面通常不直觀。 菜單內(nèi)的菜單內(nèi)的菜單。 我認(rèn)為Adobe軟件包對(duì)于希望導(dǎo)航和微調(diào)顏色屬性的人來(lái)說(shuō),并不能提供特別出色的體驗(yàn)。 這來(lái)自一個(gè)使用Adobe軟件已有十年之久的人-所以我至少假裝對(duì)我在說(shuō)些什么有所了解。
Balance the values in greyscale till you reach a point where you’r happy with the contrast平衡灰度值,直到您對(duì)對(duì)比度滿意為止A good solution to this colour problem has been a program I’ve discovered relatively recently — Figma. This is a fix only for digital products and not those requiring CMYK for print, for that you will have to go elsewhere. So, why Figma? Because Figma natively uses a H/S/L colour picker which responds to simple multiplication (*), division (/), addition (+) and subtraction (-) commands right there in the top-layer entry fields. (I covered this in my 3 tips for getting the basics right when doing visual design article, only in regard to type-size entry fields). Why is that important? Because it produces lighter, more vivid colour than the H/S/B colour picker built into Illustrator — and in which there is no H/S/L option. In Figma you can easily desaturate colours to check their values in grayscale to help you balance out the contrast your layout needs to work most effectively. In my experience I’ve noticed that the H/S/B colour picker in Illustrator contains more grey tones, and whilst using it you are far more likely to fall foul of muddy colours. It is a challenge to maintain colour saturation whilst changing the brightness without the colour appearing to shift into a tone. More importantly, you can’t quickly check your values in grayscale without fiddling about. Figma is a low-resource program, so we can use this to our advantage. We can have both Illustrator and Figma open at the same time on our desktops and easily dip in and out as we go about our work — refining swatches in Figma then copying the hex code over into Illustrator. Or, we can export the frame holding the swatches from Figma as a PNG, place it into Illustrator and colour pick from it.
解決這個(gè)顏色問(wèn)題的一個(gè)好方法是我最近才發(fā)現(xiàn)一個(gè)程序-Figma。 此修復(fù)程序僅適用于數(shù)字產(chǎn)品,而不適用于需要CMYK進(jìn)行打印的產(chǎn)品,因?yàn)槟鷮⒉坏貌晦D(zhuǎn)到其他地方。 那么,為什么選擇Figma? 因?yàn)镕igma本身使用H / S / L顏色選擇器,所以它在頂層輸入字段中響應(yīng)簡(jiǎn)單的乘法(*),除法(/),加法(+)和減法(-)命令。 (我在進(jìn)行視覺(jué)設(shè)計(jì)時(shí)獲得正確的基礎(chǔ)知識(shí)的3條技巧中對(duì)此進(jìn)行了介紹 ,僅涉及類型大小的輸入字段)。 為什么這么重要? 因?yàn)樗菼llustrator內(nèi)置的H / S / B顏色選擇器產(chǎn)生更淺,更鮮艷的色彩,而且沒(méi)有H / S / L選項(xiàng)。 在Figma中,您可以輕松地使色彩飽和度降低,以灰度檢查其值,以幫助您平衡布局需要最有效地工作的對(duì)比度。 根據(jù)我的經(jīng)驗(yàn),我注意到Illustrator中的H / S / B顏色選擇器包含更多的灰色調(diào),并且在使用它時(shí),您很可能會(huì)混入混濁的顏色。 在保持色彩飽和度的同時(shí)改變亮度而又不使顏色看起來(lái)變成色調(diào)是一個(gè)挑戰(zhàn)。 更重要的是,您不能不花心地快速檢查灰度值。 Figma是一種資源較少的程序,因此我們可以利用它來(lái)發(fā)揮自己的優(yōu)勢(shì)。 我們可以同時(shí)在桌面上同時(shí)打開(kāi)Illustrator和Figma,并在進(jìn)行工作時(shí)輕松地將其浸入和浸出-在Figma中精制色板,然后將十六進(jìn)制代碼復(fù)制到Illustrator中。 或者,我們可以將來(lái)自Figma的色板的框架導(dǎo)出為PNG,放置到Illustrator中并從中進(jìn)行顏色選擇。
The H/S/B colour picker does come in handy when you are dealing with depth and balancing. For example, let’s say you are making a layered illustration of a landscape for your website. The layers in the background will require a slight desaturation and muting to generate a stronger separation from the midground. We want to emphasise the distance between fore- and midground by softening the hues as if there might be a slight veil of atmospheric mist in-between each of the layers. The foreground colour must be the richest in the illustration. Lowering the contrast towards the background helps make the layers easier on the eye and seats them more comfortably against white / off-white backgrounds, without giving an appearance of over-saturation — I describe colours like these as looking slightly acidic in hue.
在處理深度和平衡時(shí),H / S / B顏色選擇器確實(shí)派上用場(chǎng)。 例如,假設(shè)您正在為網(wǎng)站制作分層的景觀圖。 背景中的各層將需要略微的飽和度和靜音,以產(chǎn)生與中層的更強(qiáng)分離。 我們希望通過(guò)柔化色調(diào)來(lái)強(qiáng)調(diào)前地面和中地面之間的距離,好像在每層之間都可能會(huì)出現(xiàn)一層薄霧。 前景色必須是插圖中最豐富的顏色。 降低與背景的對(duì)比度有助于使這些層在眼睛上更容易定位,并使其在白色/灰白色背景下更舒適地放置,而不會(huì)出現(xiàn)過(guò)飽和的外觀-我將這些顏色描述為看起來(lái)有些偏酸性。
coloured illustration in monochromatic colour palette單色調(diào)色板中的彩色的插圖So how are we to proceed? What I propose is that in Figma you make two sets of swatches: one full colour; one greyscale. Take them through to Illustrator. Use the grayscale swatch set whilst you’re illustrating and designing. Convert the swatches into their colour counterparts when you’re moving into finishing up. Now go through each layer from back to front slightly desaturating the colours with the H/S/B colour picker. We are talking slight nudges to round off some of the vividness. Not every layer will need this, but those colours sitting in the background on the lighter side of your palette will need the most attention. This is especially the case when those colours sit against whites / off-whites or strong dominant colours. You want those colours to appear as if they are receding into the background, not fighting it or sitting on top of it.
那么我們?cè)撊绾芜M(jìn)行呢? 我建議在Figma中制作兩套色板:一種是全色的;另一種是彩色的。 一灰度。 將它們帶到Illustrator。 在進(jìn)行說(shuō)明和設(shè)計(jì)時(shí),請(qǐng)使用灰度色板集。 進(jìn)行精加工時(shí),將色板轉(zhuǎn)換為對(duì)應(yīng)的顏色。 現(xiàn)在,使用H / S / B顏色選擇器從后到前遍歷每個(gè)圖層,使顏色略微飽和。 我們正在談?wù)撘恍┪⒚畹氖虑?#xff0c;以使某些生動(dòng)性更加完美。 并非每個(gè)圖層都需要此顏色,但是位于調(diào)色板較亮一側(cè)的背景中的那些顏色將需要最多的關(guān)注。 當(dāng)這些顏色與白色/灰白色或強(qiáng)烈的主色相對(duì)時(shí),尤其如此。 您希望這些顏色看起來(lái)好像它們退回到背景中,而不是與之抗?fàn)幓蜃谄漤敳俊?
Phew! Here are a few final words about colour. When you’re making a colour palette and there is a gradation through tints / shades / tones from dark to light, use a little technique called hue-shifting. For each swatch below your dominant colour slightly nudge the hue entry field number up or down a few places (pick a direction for all the swatches and stick with it). In Figma you can take this further and use the multiplication (*), division (/), addition (+) and subtraction (-) commands directly in the entry fields in the H/S/L colour picker to create a consistent scale curve of hues providing you with a nice breadth of colour to work with.
! 這是關(guān)于顏色的最后幾句話。 制作調(diào)色板時(shí),從深到淺的色調(diào)/陰影/色調(diào)會(huì)形成漸變,請(qǐng)使用一種稱為色相平移的小技巧。 對(duì)于低于主色的每個(gè)色板,將色相輸入字段編號(hào)向上或向下微移幾下(為所有色板選擇一個(gè)方向,并堅(jiān)持使用)。 在Figma中,您可以更進(jìn)一步,直接在H / S / L顏色選擇器的輸入字段中使用乘法(*),除法(/),加法(+)和減法(-)命令來(lái)創(chuàng)建一致的比例曲線色相為您提供了不錯(cuò)的色彩范圍。
Coloured illustration with hue-shifted palette彩色插圖與色相轉(zhuǎn)移的調(diào)色板Recently, I created a nice palette typing /1.1 (divide by 1.1) after the hue and lightness values, then duplicating the resultant swatch and applying the same division again and so on consistently for each subsequent swatch. Play around with it. I think it produces better results than changing lightness values by increments of ten each time and bumping the hue manually. If you don’t like it and want to stick to nudging values in the entry fields with the arrow keys that’s your call.
最近,我創(chuàng)建了一個(gè)不錯(cuò)的調(diào)色板,在色度和亮度值之后鍵入/1.1(除以1.1),然后復(fù)制生成的色板,并再次對(duì)每個(gè)后續(xù)色板應(yīng)用相同的劃分,以此類推。 玩吧。 我認(rèn)為它產(chǎn)生的效果比每次以10為增量并手動(dòng)更改色調(diào)來(lái)更改亮度值要好。 如果您不喜歡它,并且想堅(jiān)持使用箭頭鍵在輸入字段中微調(diào)數(shù)值,那就是您的電話。
So why hue-shift? It breathes life into your work. It provides a spectrum of warmer and cooler hues. When held against a set of swatches incrementally increasing or decreasing only in brightness, hue-shifted swatches feel dynamic and lush. I was introduced to designing in greyscale whilst taking this course.
那么,為什么要進(jìn)行色移? 它為您的工作注入生命。 它提供了較暖和較冷的色調(diào)。 當(dāng)緊貼一組樣本時(shí),僅在亮度上逐漸增加或減少,色相偏移的樣本會(huì)感覺(jué)到動(dòng)感和郁郁蔥蔥。 在學(xué)習(xí)的同時(shí),我被介紹去進(jìn)行灰度設(shè)計(jì) 這門(mén)課 。
6 | 制作畫(huà)筆。 (6| Make Artbrushes.)
Say you want to make repeating shapes like blades of grass. You don’t want to sit there endlessly making custom blades of grass, that’s insane, and more importantly, it will take forever to fill a wide area. Let’s face it, we as Designers are always running out of time. So here’s how to save some. In this example, making grass, we want to find a solution that will allow us to do as little as possible to enable the greatest amount of variation to fill the widest space. We can start off making a few basic grass shapes by editing ovals, using the Pathfinder Panel to cut shapes or drawing something custom with the brush / pen / or pencil tools. We only need two or three shapes. And by basic I mean an oval pointed at each end for one and then duplicated and cut it in half lengthways for two, done. Essentially, you’re creating a fill which can be applied to any number of paths simultaneously (or in quick succession) to produce that sweet grass you so so desire.
假設(shè)您要制作重復(fù)的形狀,例如草葉。 您不想無(wú)休止地坐在那里制作定制的草葉,這太瘋狂了,更重要的是,要花很長(zhǎng)時(shí)間才能填滿大片區(qū)域。 面對(duì)現(xiàn)實(shí)吧,作為設(shè)計(jì)師,我們總是沒(méi)時(shí)間了。 所以這是保存方法。 在這個(gè)例子中 ,我們要尋找一種解決方案,該解決方案將使我們能夠做的盡可能少,以使最大的變化量能夠填充最寬的空間。 我們可以通過(guò)編輯橢圓來(lái)開(kāi)始制作一些基本的草形狀,使用探路者面板剪切形狀或使用畫(huà)筆/鋼筆/鉛筆工具繪制自定義圖形。 我們只需要兩個(gè)或三個(gè)形狀。 基本而言,我的意思是在每個(gè)末端指向一個(gè)橢圓形,然后將其復(fù)制并縱向切成兩半,完成了。 本質(zhì)上,您正在創(chuàng)建一個(gè)填充,該填充可以同時(shí)(或快速連續(xù))應(yīng)用于任何數(shù)量的路徑,以產(chǎn)生您如此想要的甜草。
Same Artbrush applied to different shapes of path同一把畫(huà)筆應(yīng)用于不同形狀的路徑However, all grass is not created equal. Some blades are tall, some blades are curvy and some blades are short, etc., etc. Variation of blade stems from the length and shaping of the paths you apply the Artbrush too, so the brush fill itself doesn’t need to be overly complicated. But I’m getting ahead of myself. Select each of the shapes you’ve just made individually and go to the Brushes Panel or if it’s not open, hit F5, click on the Hamburger icon (UI terminology makers seem to love using food names) in the top right and select New Brush. Select Artbrush from the list and hit OK, it will work fine with all the default settings so hit OK again to finish. If you wish to, you can play around with these settings later to produce different effects. Now, when you select a path you can select your new Artbrush from the Brushes Panel and it will automatically apply to the path. The colour of the fill will be the colour of the original object you made into an Artbrush.
但是,并非所有草都是平等的。 有些刀片很高,有些刀片是彎曲的,有些刀片很短,等等,等等。刀片的變化也源于您應(yīng)用Artbrush的路徑的長(zhǎng)度和形狀,因此筆刷填充本身并不需要過(guò)度復(fù)雜。 但是我要超越自己。 選擇您單獨(dú)制作的每種形狀,然后轉(zhuǎn)到“畫(huà)筆”面板,或者如果未打開(kāi),請(qǐng)按F5鍵,單擊右上角的“漢堡”圖標(biāo)(UI術(shù)語(yǔ)制造商似乎喜歡使用食物名稱),然后選擇“新建畫(huà)筆” 。 從列表中選擇Artbrush,然后單擊OK,它將在所有默認(rèn)設(shè)置下正常工作,因此再次單擊OK完成。 如果需要,您可以稍后使用這些設(shè)置來(lái)產(chǎn)生不同的效果。 現(xiàn)在,當(dāng)您選擇路徑時(shí),可以從“畫(huà)筆”面板中選擇新的Artbrush,它將自動(dòng)應(yīng)用于該路徑。 填充的顏色將是您制作成Artbrush的原始對(duì)象的顏色。
7 | 制作符號(hào)。 (7| Make symbols.)
Carrying on with this grass theme, lets say we’ve made a bunch of curved paths all in one place and have applied our new Artbrush options to them. Throw a selection around these paths and expand them with Object > Expand Appearance. Now merge them all together with the Shape Builder Tool or use the Unite Tool in the Pathfinder Panel. Right, now we have what looks like a clump of grass. Cool. Now open up the Symbols Panel (Window > Symbols) (or Shift+Ctrl [Option on Mac] +F11) select your new grass clump and click New Symbol in the Symbols Panel menu. Go into the Tools Panel and locate the Symbol Sprayer Tool. It may be hidden by the meatballs icon. You can double click the Symbol Sprayer Tool to change the intensity and density parameters amongst other things but for now simply have a go at spraying. You can now create a high number of grass shaped vectors that can cover a wide area with ease. Boom.
繼續(xù)講這個(gè)草皮主題,可以說(shuō)我們已經(jīng)在一個(gè)地方制作了許多彎曲的路徑,并對(duì)其應(yīng)用了新的Artbrush選項(xiàng)。 圍繞這些路徑進(jìn)行選擇,然后使用“對(duì)象”>“擴(kuò)展外觀”對(duì)其進(jìn)行擴(kuò)展。 現(xiàn)在,將它們?nèi)颗cShape Builder工具合并在一起,或使用“路徑查找器”面板中的Unite工具。 對(duì),現(xiàn)在我們看起來(lái)像一團(tuán)草。 涼。 現(xiàn)在打開(kāi)符號(hào)面板(“窗口”>“符號(hào)”)(或Shift + Ctrl [在Mac上為Option] + F11),選擇新的草叢,然后在“符號(hào)面板”菜單中單擊“新建符號(hào)”。 進(jìn)入“工具面板”,找到“ Symbol Sprayer工具”。 可能被肉丸圖標(biāo)隱藏。 您可以雙擊“ Symbol Sprayer工具”來(lái)更改強(qiáng)度和密度參數(shù),但現(xiàn)在只需嘗試一下即可。 現(xiàn)在,您可以創(chuàng)建大量可以輕松覆蓋大范圍區(qū)域的草狀矢量。 繁榮。
Symbol selected and sprayed at a high density setting選擇符號(hào)并以高密度設(shè)置噴涂This is a basic walkthrough of symbols and there is much you can do with them so just have a play with all the settings to see what you can make. One word of warning, the Symbol Sprayer Tool will spray symbols the same size as the original shape that was saved as a new symbol. If you want to have it spray smaller symbols to give a more detailed effect you will need to make sure your original shape is the size you want it to spray as before saving it as a symbol. Symbols can be used for many time saving things. I’ve seen people save artworks of differently dressed people as quick access symbols to try out logo designs and get an idea of how they might sit on clothing. At the bottom of the Symbol Menu in the Symbols Panel you can save your Symbol Library and export it, for future ease of use for yourself, or for sharing amongst your team. Symbols and Artbrushes are all about speeding up workflow, spend some time experimenting and think about how you can use them to your advantage.
這是符號(hào)的基本演練,您可以使用它們做很多事情,因此只需試一試所有設(shè)置,看看您能做什么。 一言以蔽之,Symbol Sprayer工具將噴涂與保存為新符號(hào)的原始形狀相同大小的符號(hào)。 如果要噴涂較小的符號(hào)以提供更詳細(xì)的效果,則需要先保存原始形狀,然后再將其保存為符號(hào)之前要噴涂的尺寸。 符號(hào)可用于節(jié)省很多時(shí)間。 我已經(jīng)看到人們將穿著不同的人的藝術(shù)品保存為快速訪問(wèn)符號(hào),以試用徽標(biāo)設(shè)計(jì)并了解他們?nèi)绾巫谝路稀?在“符號(hào)”面板中“符號(hào)菜單”的底部,您可以保存并導(dǎo)出符號(hào)庫(kù),以便將來(lái)自己使用或與團(tuán)隊(duì)共享。 Symbols和Artbrushes都是為了加快工作流程,花一些時(shí)間進(jìn)行實(shí)驗(yàn),并思考如何利用它們來(lái)發(fā)揮自己的優(yōu)勢(shì)。
Here is a good video on Symbols. Libraries can be shared between Adobe products and can help speed up your workflow, as in the case of designing UI elements in Illustrator and importing into XD to compose your product design.
這是關(guān)于Symbols的精彩視頻。 庫(kù)可以在Adobe產(chǎn)品之間共享,并且可以幫助加快工作流程,例如在Illustrator中設(shè)計(jì)UI元素并將其導(dǎo)入到XD中以構(gòu)成產(chǎn)品設(shè)計(jì)的情況。
8 | 在您進(jìn)行進(jìn)度時(shí)保存工作的快速快照,然后將其通過(guò)電子郵件發(fā)送給自己 。 (8| Save quick snapshots of your work as you progress and email them to yourself.)
Take a break away from what you’ve been doing for fifteen minutes and do something else. Take yourself off for a walk or something. After your break, look at the snapshots you emailed yourself on your phone and/or other devices. Look at them on a PC if you design with a Mac. Look at them on a Mac if you design with a PC. Look at them on as many different sizes and types of screen as you can get your grubby little mitts on. Always be thinking multi-device. Are the values working? Are you struggling to make out particular details? Do the colours work? What is standing out to you most? By taking a break away from our work we help to disrupt our insular perspective on what’s going on. Viewing at different sizes forces you to look at the work . It’s all too easy to lose perspective and so lose sight of what needs changing when working on a project for long periods of time.
離開(kāi)您十五分鐘的工作,然后做其他事情。 帶自己去散步或其他東西。 休息后,查看在手機(jī)和/或其他設(shè)備上通過(guò)電子郵件發(fā)送給自己的快照。 如果使用Mac設(shè)計(jì),請(qǐng)?jiān)赑C上查看它們。 如果使用PC進(jìn)行設(shè)計(jì),請(qǐng)?jiān)贛ac上查看它們。 在盡可能多的不同尺寸和類型的屏幕上查看它們,即可穿上骯臟的小手套。 始終在考慮多設(shè)備 。 價(jià)值觀在起作用嗎? 您是否正在努力找出具體細(xì)節(jié)? 顏色有效嗎? 最讓您脫穎而出的是什么? 通過(guò)脫離我們的工作,我們有助于破壞我們對(duì)正在發(fā)生的事情的孤立看法。 以不同的尺寸查看會(huì)迫使您查看作品。 太容易失去遠(yuǎn)見(jiàn),而忽視了長(zhǎng)時(shí)間從事項(xiàng)目時(shí)需要改變的地方。
For more Illustrator tutorials check out this extensive list put together by Sid Edwards.
有關(guān)更多Illustrator教程,請(qǐng)查看此詳盡列表 西德愛(ài)德華茲 ( Sid Edwards)放在一起。
After writing all that I’m tuckered out, so I guess I’ll leave this one here. Until next time folks!
在寫(xiě)完我所有的東西之后,所以我想我把這個(gè)留在這里。 直到下一次鄉(xiāng)親們!
翻譯自: https://uxdesign.cc/8-tips-to-improve-your-work-in-adobe-illustrator-a8464fefe872
總結(jié)
- 上一篇: JS中的异步任务有哪些
- 下一篇: chrome插件“京东商品佣金助手”之项