Прављење икона производа није тако тешко као што се чини на први поглед. Сазнајте више о дизајнирању прве иконе Андроид апликације од нуле!
Без обзира на које тржиште или услугу се апликација дистрибуира, њена икона апликације је прва ствар коју би потенцијални корисник приметио. Први утисци су од највеће важности када покушавате да привучете нове кориснике, што значи да су иконе кључне компоненте сваке апликације. И, без обзира на намеру апликације, креирање прелепе иконе апликације требало би да буде важан део фазе развоја сваке апликације. Иако многи програмери техничких апликација препуштају графику посвећеним дизајнерима, разумевајући основе дизајна и њихова примена је нешто што свако може да уради, ако има вештину за експериментисање и анализа. Иконе апликација нису изузетак!
Овај водич пролази кроз креирање прилагодљиве иконе за пример Андроид апликације користећи софтвер отвореног кода. Иако крајњи резултат можда није у формату који вам је можда потребан, многи савети за дизајн о којима се овде говори ће важити на више платформи.
Након објављивања „прилагодљивих икона“ уз Андроид Орео, икона апликације може се састојати од три основна слоја: непрозиран позадински слој, слој у првом плану са подршка транспарентности, и а маска који дефинише облик иконе. Сви ови слојеви су величине 108 к 108 дп, иако само унутрашњи 72 к 72 дп може бити видљив кориснику; други регион, одсечен маском на врху, користи се за специјалне ефекте унутар корисничког интерфејса како би икона изгледала динамично. За неупућене, дп или пиксел независан од приказа стоји као мерна јединица за цео Андроид интерфејс и дефинисана је као једнака величини један пиксел на екрану од 160 тачака по инчу.)
Ницк Бутцхер из Гугла говори о кругу од 66 дп у центру иконе коју ниједна маска не може да скине, названа „безбедна зона“. Овде ће се касније налазити примарни елементи нашег дизајна икона, када дођемо до стварног дизајна. Све што је изнад овог радијуса од 33 дп можда неће бити видљиво на икони док је укључена маска облика.
Пошто је боље да иконе буду векторске слике због скалирања корисничког интерфејса, биће нам потребан уређивач векторске графике да бисмо направили нашу икону. Инксцапе је отвореног кода и одлична алтернатива скупљем софтверу, тако да ће то бити наш избор за потребе овог упутства. Такође сам дизајнирао датотеку пројекта доступно овде која има означену безбедну зону и сопствену линију дизајна Гоогле-а, као и елегантну маску слоја која нам омогућава да прегледамо облик иконе.
Са пројектном датотеком отвореном у Инксцапе-у и Филл анд Строке (Схифт+Цтрл+Ф), Извези ПНГ слику (Схифт+Цтрл+Е) и Слојеви (Схифт+Цтрл+Л) панели се отварају, спремни смо да почнемо. Плоча Слојеви је место где се налази суштина пројекта, са Форегроунд и Позадина слојеви намењени за смештај њихових насловних компоненти, и Смернице и Маска намењене за укључивање и искључивање (кликом на икону малог ока поред њих) за референцу.
Икона је израз идентитета апликације. Као такав, он мора да садржи и карактер личности апликације и смернице за дизајн специфичне за платформу, попут оних за Андроид Језик дизајна материјала може да понуди. У сврху демонстрације, претпоставимо да радимо на апликацији за временску прогнозу која користи елементе материјала. Могли бисмо да користимо класични мотив сунца и облака да обавестимо корисника о сврси апликације и ставимо мало завртите овај основни дизајн користећи падајуће сенке и геометрију како би се добро уклопио у Андроид окружење.
Позадина
Почнимо са постављањем позадине, која ће се састојати од плавог неба и жутог сунца у центру. Окретање Маска невидљив, бирам и чиним видљивим Позадински слој, испуните цело платно са Направите правоугаонике и квадрате алат (Ф4) и подесите боју попуне правоугаоника Филл анд Строке до 64Б5Ф6ФФ (светлоплава) у складу са Палета боја материјала. Затим бирам Направите кругове, елипсу и лукове (Ф5) и држећи Схифт и Цтрл, нацртајте круг од центра линије кључа до другог највећег круга и поставите његову боју на ФФЕЕ58ФФ, што нам даје топло мало сунца. Увек је добро држати се основне геометрије у било којој врсти дизајна, а Андроидов језик дизајна посебно подстиче једноставност. Да бих био у складу са смерницама за материјале, сунцу дајем и суптилну сенку Филтери → Сенке и сјаји → Дроп Схадов.
Форегроунд
Долази у први план, Цртам групу облака око сунца цртајући кругове са обима других кругова и дајем им свима боју испуне ЕЕЕЕЕЕФФ. Затим групишем кругове на одговарајући начин тако што ћу десним тастером миша кликнути на више објеката и изабрати Група, и покрените генератор падајућих сенки на два коначна облика која добијем на крају. Окретање Смернице невидљиви и преклопни Форегроунд и Позадина алтернативно, могу се видети саставни слојеви иконе наше апликације за временске прилике. Ако се икона апликације икада превуче преко почетног екрана, облаци ће се спустити на стационарно сунце!
Резултат
Маска сада се може учинити видљивим и подесити помоћу Уредите путање по чворовима (Ф2) да покушате да симулирате различите маске облика. Такође, два слоја се могу засебно извозити помоћу Извези ПНГ слику панел за употребу у Андроид студију, и заједно за а Гоогле Плаи икона.
Док правите икону производа, увек је добра пракса да покушате да узмете сврху апликације, доведете је до најапстрактније визуелне форме и представите је користећи једноставну геометрију. Што је било која компонента у дизајну једноставнија, то боље и поузданије обично функционише, а то важи и за графички дизајн. За већину намена, облик објекта у првом плану и једнобојна боја или узорак у позадини (или обрнуто) функционише сасвим добро, али као у нашем примеру, други слој објеката се може користити ако се осети неопходно; превише слагања или употреба падајућих сенки само ће закомпликовати дизајн иконе.
Више о дизајну икона можете прочитати у Интерфејсима материјала на званичном Материјална веб страница, и зграбите бесплатне системске иконе за коришћење у дизајну икона са исту веб страницу.