Прости правила за създаване на дизайн на икона. Как да нарисувате икони, така че да са ясни

От Ollin Boer Boan, а сега публикуваме превод на неговата статия, изпратена от нашия читател на CrossFire.

Дизайнерите често трябва да създават малки, пикселизирани икони за ленти с инструменти, списъци, помощна документация или просто като по-малки версии на по-реалистични икони в пълен размер.

Говорим за икони като тези:

Най-често в този стил се създават икони с размери 32px (които са обсъдени в статията), но в някои случаи икони с размери 16px, 24px, 48px или дори 128px се рисуват по подобен начин.

Подобно на много техники за проектиране на икони, този стил се разви в резултат на ограниченията на средата и го използваме днес, защото е страхотен за малки икони. Изразени граници, изпипани детайли, внимание към всеки пиксел - това отличава малките икони от големите.

стил

Този стил се използва универсално при създаване на икони с въпросния размер, тоест почти навсякъде, където пространството е ограничено и следователно яснотата е ключова.

Нека да разгледаме няколко примера:

Е, моят набор от вселената на Legend of Zelda, създаден специално за тази публикация

Въз основа на тези и много други примери (Интернет е пълен със страхотни примери), можем да подчертаем характеристиките на добра икона с 32 пиксела.

Ето кратък списък от тях:

Организирайте работното си пространство

Правилната организация на пространството ви позволява да създавате малки икони по-бързо и по-лесно. Препоръчвам да използвате моя опит и да си зададете нещо подобно:

Ще подчертая няколко точки за тази организация:

Иконите се рисуват с двойна разделителна способност с помощта на решетка от 2 пиксела. Това ви дава увереност, че получената икона ще бъде гладка, без назъбвания или стълби и ви позволява да не се притеснявате за правилното попълване на някои пиксели. Можете да работите малко небрежно в увеличената версия и да получите отлични резултати при целевата резолюция.
Следващата техника, за която исках да говоря, е използването на платно с широки полета и по-малък, превключваем тъмен квадрат, граничещ с иконата. Номерът идва от факта, че контурните пиксели често се „залепват“ за краищата на платното и с помощта на допълнителна подложка получаваме представа как ще изглежда иконата, когато се използва. Тъмен квадрат е нещо, което може да се покаже при рисуване на контур, за да се гарантира, че иконата не надвишава предвидения размер.
Използвам отделен, неразсейващ прозорец, показващ 50% по-малко копие на рисуваната икона. Можете да създадете това, като използвате [ Изглед>Нов изглед ] в GIMP или [ Прозорец > Подреждане > Нов прозорец на… ] във Photoshop. Тази техникаелиминира необходимостта да намалявате всеки път, за да видите какво се е случило след редактиране.

Често допускани грешки

Тъй като тази техника на рисуване е толкова често срещана, често виждам едни и същи грешки да се появяват отново и отново.

Ето няколко съвета как да ги избегнете:

Или забравят да нарисуват сянката, или я правят твърде тъмна.Това е една от най-честите грешки. Сенките са необходим детайл, който кара иконата да изглежда прикрепена към фона и ако този детайл е пропуснат, тя изглежда залепена за фона. От друга страна, добавянето на твърде тъмна сянка също влошава резултата. Иконата трябва да е изключително прозрачна, но да има непрозрачни зони в областите, съседни на субстрата.Лоша идея е да се опитвате да направите една сянка за целия набор от икони; няма да работи по този начин.
Непрозрачни ръбове.Поради тях иконата изглежда зле върху субстрати различни цветове. Никога не правете това, освен ако не искате рамката да е по-тъмна от вътрешния цвят.
Не центрирайте източника на светлина върху иконата, добавяйки ненужни кръгови градиенти и т.н.Засенчването на иконите трябва да е изключително просто през 90% от времето. Някои материали, като метал, изискват повече детайли, но повечето други могат да бъдат изобразени само с линейни градиенти и граници с лека вътрешна сянка.
Грозни, избледнели цветове.Забелязвам ги през цялото време, особено когато са на границата, която наистина се нуждае от богат цвят. Привлекателността на иконите с размер 32 пиксела идва от ярки, съблазнителни цветове – бъдете внимателни, когато ги избирате. В следващата статия се надявам да разгледам по-подробно техниките за постигане на красиви, живи цветове – но засега просто не забравяйте, че „меката“ светлина и покритието са вашите най-добри приятели.
Замъглени или стъпаловидни ръбове. Най-доброто решениеНачин да избегнете тази грешка е да начертаете иконата в двоен размер с помощта на решетка от 2 пиксела и след това да обедините слоевете и да я компресирате до целевата резолюция. Подравняването на части към мрежата е изключително важно за създаването на висококачествена икона; не бъдете мързеливи да отделите време за това.

Процесът на създаване на икона в реално време.

В случай, че иконата ще се използва на екрана. Ако веднага направите растер, тогава при мащабиране линиите ще се размажат и вече няма да се поберат в пикселите. Но няма смисъл да рисувате някъде другаде: така или иначе, след това го импортирайте в оформлението във Photoshop.

Нека започнем с факта, че проблемът с „мекия“ ход се решава чрез настройките на контура:

Сега можете да нарисувате нещо. Трябва ми само икона за вестник.

Първо изучавам изобразения обект. Google предлага пропорциите:

Отбелязвам характеристиките на това, което е под ръка:

Ще взема за пример първата страница от архива. Ню Йоркпъти. Веднага коригирам размера, за да пасне на други икони. Важното тук е визуалното тегло, а не математическите параметри:

За да накарате опорните точки да се придържат към пикселната мрежа, трябва да поставите отметка в квадратчето тук:

cmd+k

За линии от обекти, завъртяни под ъгъл, който не е кратен на 45°, залепването към мрежата може да бъде вредно, така че клавишите и [k] могат бързо да се износят :-)

Вече е ясно, че вестникът се оказва „по-тежък“ от другите предмети. Намалявам малко:

При мащабиране опорните точки изскачат от пикселната мрежа. Вкарвам ги обратно където трябва.

Добавям подробности. Проверявам дали 6-те колони са подредени, така че полетата на вестника да са равни (случайно открих, че да. В противен случай трябваше да направя вестника един пиксел по-широк.)

Това е мястото, където линиите се слепват отвратително, образувайки тъмно петно. Когато се увеличи, това не се вижда, но на предишната екранна снимка веднага хваща окото ви:

Сега името. В моите икони всички линии са с еднаква дебелина, така че не мога да си позволя да нарисувам дебела линия вместо заглавие. Бързо скицирам буквите, пренебрегвайки детайлите:

Намалявам го до необходимия размер и поставям всяка буква в пикселна мрежа:

Попълвам вестника:

Почти готово. Объркан съм от количеството мастило. Иконата се оказа много по-плътна от съседите си. Разреждам линиите, премахвам Титаник.

Вестникът се навива отдолу. За да засилите този ефект, имате нужда от сянка. Но не можете да използвате сянка, така че измислих хитър трик - поставих долните редове по-близо до ръба на вестника, така че близо до ръба плътността на линиите се увеличава, създавайки видимо потъмняване.

Честно казано, дори ми харесва така:

Тепърва ще помисля кой вариант да избера. Това е всичко за днес.

Опитните момчета изобщо могат да избегнат скицирането, но си съставят списък с изображения и веднага работят с варианти.

Ако рисувате икони по поръчка, рисувайте скици, по този начин ще избегнете допълнителна работапри рисуване, като преди това сте показали вашите изображения на клиента.

Четвърта стъпка: Размер

По принцип това е най-важното: да вземете решение за минималния размер.
За какво е? Ако искате вашите икони да бъдат с остри ръбове, перфектни пиксели и правилен мащаб, трябва да вземете решение за размера и дебелината на обектите при най-малкия размер (x1). Препоръчвам да използвате равномерни размери на иконите.

Стъпка пета: Процес

Създайте документ със стойности

Където разстоянието е разстоянието между артбордовете.

Ширина и Височина - височината и ширината на таблото.

Растерни ефекти — резолюция (ppi) подходящ за икони 72

Подравняване на нови обекти... - това квадратче за отметка отговаря за свързването на точки към пикселната мрежа. Съветвам ви да го включите, но по време на работа винаги можете да го изключите.

Изберете първия артборд, той ще направи всички икони, а готовите ще бъдат вмъкнати в съседните артбордове.
Създайте квадрат, който да пасне на работното ви място.
Настройте водачи, за да улесните процеса на рисуване.
Използвайте Визуализация на Pixel
Маркирайте готови икони в списъка с изображения, за да можете ясно да наблюдавате напредъка си.
Следвайте съветите и предишната статия за.
Не правете първия си комплект твърде голям, може да се уморите бързо и да се откажете по средата. Нормалната скорост ще бъде около 20 икони на ден, след което те могат бързо да се отегчат...
Проектирайте изходния файл и не забравяйте да подредите нещата в слоевете, да подготвите файл за Photoshop и да скицирате например.
Подгответе удар за дрибъл и behance, създайте публикация за социални мрежи. Това е най-добрият PR за вашата работа и достъп до нови поръчки. Не забравяйте за хаштаговете: #design #best #mamalubitmenya #kupiteikonky

Къде да продавам:

graphicriver.net е безплатна платформа за търговия с всякакво цифрово съдържание.

creativemarket.com - за да създадете акаунт тук, ще бъдете помолени да покажете акаунти в други магазини и вашето портфолио.

thenounproject.com — сайтът е може би с най-голямата база от икони, те предлагат избор: безплатно или срещу еднократно плащане, има и функция за месечен абонамент, но не бих заложил на тази услуга, ако искате да правите пари .

icons8.com - Не знам нищо за този магазин, ако някой има опит, нека го сподели в коментарите.

Урок

Как да нарисувате правилно икона (размер 32x32, част I)

Бих искал да предложа на вашето внимание урок за създаване на икони 32x32 в програмата Адобе Фотошоп. Този урок ще ви позволи да научите как да рисувате икони, без да полагате много усилия - накрая ще разберете, че рисуването на икони за интерфейси не е толкова трудна задача, просто трябва да имате търпение и да знаете как да работите в Adobe Photoshop .

И така, да започваме! На първо място, така че иконите да не се отклоняват от размера и да са сходни по стил, трябва да направим шаблон, въз основа на който ще начертаем поредица от икони.

Първо, нека стартираме програмата Adobe Photoshop, след това отидете в менюто File > New или натиснете клавишната комбинация Ctrl+N и създайте изображение с размери 32x32 пиксела и разделителна способност 72 dpi.

След това, за да могат нашите икони да имат ясни, незамъглени ръбове и в бъдеще да изглеждат ясни и контрастни, трябва да настроим показването на мрежата, благодарение на което ще се ръководим при рисуване - в крайна сметка изображението се състои от пиксели, съответно ни е необходим за показване на решетка с една пикселна стъпка.
Отидете в менюто Edit > Preferences > Guides, Grid and Slices или натиснете комбинацията Ctrl + K на клавиатурата и направете настройките, както е показано на изображението.

Сега създадохме шаблон, въз основа на който ще създадем нашите малки шедьоври. Тъй като нашите икони предполагат сянка, това трябва да се вземе предвид. Планирам да направя размера на сянката 2 пиксела под иконата и 1 пиксел от всяка страна, следователно нашата икона ще бъде 30x30 плюс сянката. За удобство нека настроим водачи, които ще ни позволят да видим по-нататък границите между изображението на иконата и сенките, за които сме разпределили подходящото пространство.

В резултат на това нашият шаблон е готов и сега можем да продължим директно към рисуването на икони.

Икона за дома
За да виждам ясно фигурите, които рисуваме, ще използвам черно запълване. Така че с помощта на инструмента Инструмент за писалка(K) Начертайте основата за иконата Home.

Следваща да даде желан цвяти контур отидете в менюто Layer > Layer Style > eae6c9оцветявам cbcfba

След това, така че формата да бъде контрастираща в бъдеще, ще присвоим контур на тази форма. За да направите това, отидете в менюто Layer > Layer Style > Stroke... и направете линия с дебелина 1 пиксел и с цвят 868686

Това трябва да получим

Сега, като използваме същия Pen Tool (K), рисуваме основата за покрива

Сега нека му дадем желания цвят - отидете в менюто Layer > Layer Style > Gradient Overlay... и направете градиентно запълване от цвета b06a00оцветявам 8c4d00.

Получаваме този резултат

Е, вече имаме някои очертания, сега ще допълним нашата форма с детайли - с помощта на Rectange Tool (U) рисуваме тръба

Задайте градиентно запълване въз основа на цвета на тръбата eae6c9оцветявам cbcfba, само че този път насочваме градиента хоризонтално

Както преди, добавете контур с дебелина 1 пиксел с цвят 868686

Получаваме...

Сега скриваме тръбата на заден план и използвайки Rectange Tool (U) нарисуваме друг покривен елемент

Присвояване на градиент въз основа на цвят ce9128оцветявам b06a00…

... и добавете контур с дебелина 1 пиксел и с цвят a86600

Да видим...

Скриваме готовия елемент по същия начин като тръбата на заден план и отново с помощта на Rectange Tool (U) рисуваме врата

И извършваме вече познатата операция с цветен градиент b06a00оцветявам cd9128

... и не забравяйте за линията... дебелина 1 пиксел, цвят a75700

Да видим резултата...

Оказа се доста хубава къща, но ще продължим да изпълваме нашата икона с детайли - натиснете Rectange Tool (U) и нарисувайте тавански прозорец

Е, и отново градиентът е от цвета 2e8ce0оцветявам 7cc6fd

Задайте контура да бъде с дебелина 1 пиксел и цвета 4381c8

Оценяваме резултата...

Нашата къща е почти готова, но изглежда твърде плоска - ще добавим обем с помощта на акценти.
Създайте нов слой и с помощта на Pencil Tool (B) начертайте две линии

Отидете в менюто Layer > Layer Style > Gradient Overlay... и направете градиентно запълване от цвета 000000 оцветявам ффффф. Обърнете внимание на параметъра Blend Mode - аз задавам стойността екран

Трябва да получите следния резултат

За да постигнем ефекта, от който се нуждаем, трябва да приложим следните манипулации към слоя:

В резултат на това получаваме този ефект

Сега нека създадем акцент под покрива. Създайте нов слой и с помощта на същия инструмент Pencil (B) нарисувайте следното

Тъй като градиентът, който имаме на този обект, ще бъде точно същият като на предишния, има смисъл да спестим време и просто да копираме стила от слоя, който направихме преди. За да копирате стила, щракнете с десния бутон върху слоя с първите акценти и изберете Копиране на стила на слоя от падащото меню. Сега щракнете с десния бутон върху слоя с осветяване под покрива и изберете Paste Layer Style от менюто. Така копирахме стила с черно-бял градиент - всичко, което остава, е да манипулираме самия слой

Резултатът ще бъде следният

Продължаваме да добавяме акценти. Бих искал да отбележа, че всеки акцент трябва да е на отделен слой, това ще улесни манипулирането на стиловете... Начертайте още четири акцента - всеки на отделен слой

Предлагам да спестите време, като копирате стила от слоя, на който направихме първото подчертаване. След това задайте копирания стил на всеки от последните четири слоя. Извършваме и подходящи манипулации за всеки слой.

В резултат на това трябва да получим следното

На този етап къщата изглежда завършена, но все пак си позволявам да кандидатствам довършителни работи, наблягайки на основата. За да направите това, използвайте Pencil Tool (B), като изберете цвета f3f3ea, начертайте следното

Почти готово. По-долу ще добавим още една линия само с цвят b5b8a3.

Всичко, което остава да направим, е да добавим малко сянка към нашата къща. За да направите това, изберете всички слоеве и ги групирайте в една група - това ще бъде нашият източник. След това направете копие на групата и в това копие компресираме всички слоеве в едно - отидете в менюто Слоеве > Обединяване на слоеве (Ctrl + E). Това ще бъде слоят, към който ще приложим сянка и ще направим нашия източник невидим

След това отидете в менюто Layer > Layer Style > Drop Shadow... и задайте сянка със следните параметри

И в крайна сметка получаваме готова за използване икона!

Надявам се моят урок да ви е бил полезен.

В този урок ще научим как да нарисуваме красива икона на телевизор в Adobe Photoshop.

Етап 1.

Създайте нов документ (Файл > Нов)с показани настройки

Стъпка 2.

Запълнете фона #FFFFFFцвят и след това приложете следното към него Ефекти на слоевете.

Стъпка 3.

Използвайте с радиус 35 пиксела ТЯЛО, отворено Стилове на слоевеи приложете следните настройки.

Също така добавете Ударсъс слой ТЯЛОсъс следните настройки

Стъпка 4.

Стъпка 5.

Използвайте Инструмент за заоблен правоъгълник (U)с радиус 35 пикселаи създайте правоъгълник от произволен цвят. Наименувайте този слой ТЯЛО_2и след това приложете следните ефекти към този слой.

Също така добавете Ударза напластяване ТЯЛО_2със следните настройки.

След това добавете Вътрешна сянказа напластяване ТЯЛО_2със следните настройки.

Стъпка 6.

Трябва да получите подобен резултат.

Стъпка 7

ТЯЛО. Наименувайте този слой БАЗА. Използвайте Инструмент за заоблен правоъгълник (U)с радиус 35 пиксела

За да направите това, изберете слоя ТЯЛОщракнете с десния бутон и изберете Копиране на стила на слояи след това изберете основния слой, щракнете с десния бутон на мишката и изберете Поставете стила на слоя.

След това трябва да коригирате дебелината УдарНа 3pxв слой БАЗА.

Стъпка 8

Трябва да получите подобен резултат.

Стъпка 9

Създайте нов слой и го поставете под слоя ТЯЛО. Наименувайте този слой КРАК. Използвайте Инструмент за заоблен правоъгълник (U)с радиус 35 пикселаи след това приложете следните ефекти на слоя към него.

Приложете също Вътрешна сянказа напластяване КРАК.

Стъпка 10

Трябва да получите подобен резултат.

Стъпка 11

Сега дублирайте слоя КРАКи го поставете, както е показано на снимката.

Стъпка 12

Създайте нов слой, наименувайте го ГЛАНСОВи го поставете върху всички слоеве, след което изберете Инструмент за четка (B)и използвайте голяма четка с меки ръбове, за да нарисувате едно бяло петно.

След това сменете Режим на смесванеНа Припокриванес намаляване ПрозрачностНа 50%

Стъпка 13

Създайте нов слой и го наименувайте ЕКРАНи го поставете върху всички слоеве.

Използвайте Инструмент за заоблен правоъгълник (U)с радиус 35 пикселаза да създадете правоъгълник. След това копирайте Стил на слоя BODY_2и го нанесете върху слоя ЕКРАН. Сега регулирайте дебелината на щриха на 10pxв слой ЕКРАН.

Стъпка 14

Трябва да получите подобен резултат.

Стъпка 15

В тази стъпка ще направим самия екран. Създайте нов слой ЕКРАН_2. Поставете го върху другите слоеве. Използвайте Инструмент за заоблен правоъгълник (U)с радиус 35 пикселаза да създадете правоъгълник. След това нанесете Градиент V Стилове на слоевесъс следните настройки.

След това нанесете Вътрешна сянказа напластяване ЕКРАН_2.

След това нанесете Вътрешен блясъкза напластяване ЕКРАН_2.

Тогава Сянказа напластяване ЕКРАН_2.

Стъпка 16

Трябва да получите подобен резултат.

Стъпка 17

Създайте нов слой и го наименувайте ЕКРАН ГЛАНСОВи го поставете върху останалите. След това изберете Pen Tool (P)и начертайте контур, както е показано на фигурата. И го напълнете с бяло #FFFFFF. След това намаляваме прозрачностпреди 20%

Стъпка 18

Създайте нов слой и го извикайте СВЕТЛА ТОЧКАи го поставете върху останалите в слой. След това избираме Инструмент за четка (B)и с голям размер на четката, с меки ръбове, поставете едно голямо бяло петно в центъра на екрана.

Стъпка 19

В тази стъпка ще направите бутони. Предприеме Инструмент Елипса (U)и създайте кръг и го поставете приблизително като на снимката, наименувайте този слой БУТОН.

Сега се върнете към слоя ТЯЛО_2и го копирайте Стил на слоякато щракнете с десния бутон върху него и изберете Копиране на стила на слоя. След това приложете копирания стил към слоя БУТОН.