Дизајн на апликација за банка на iPhone во Фотошоп Дел 2 Код Изработка на веб-страница, компјутерски игри и

Сподели на Фејсбук
Чуруликам
Споделете на Google+
Објави на Тамблр
Закачете го
Додај во џеб
Испрати е-маил

Ова е второ во серијалот на упатства за два дела за дизајнирање апликација за банкарство на iPhone. Во овој дел од серијата ќе го дизајнираме главниот распоред/содржина на секоја од овие страници: менито/почетната страница, страницата со изјави и екраните за додавање сметки. Го пропуштивте првиот дел? Бидете во тек, читајќи го тука.

Чекор 1

Потоа, на местото каде што застанавме, изберете ја Алатката за избор на правоаголник. На лентата со алатки, изберете ја фиксната големина од паѓачкото мени Стил и користете ги поставките 50 x 50 пиксели. Кликнете каде било на вашето платно за да создадете избор од 50 x 50 пиксели. Повлечете го вашиот избор до работ на платното, а потоа повлечете водич од вашиот владетел (Поглед> Владетел) и приберете го до вашиот избор. Повторете го процесот сè додека не постојат две упатства од двете страни на вашето платно.

Ставете водич на средина од платното - треба да можете автоматски да го прицврстувате на место.

Сега извлечете ги водилките и ставете ги на средина помеѓу двата веќе создадени.

Сега имаме многу едноставна мрежа за поставување на нашите икони/копчиња откако ќе ги дизајнираме. Изберете го менито Правоаголен избор на алатки и стил и изберете нормална големина наместо фиксна големина. Повлечете квадрат надвор од левите водичи (држете го копчето Shift). Наполнете го со црно.

Повторете го процесот уште два пати, осигурете се да ја наполните секоја форма на нов слој.

Дуплирајте ги сите три слоја и поставете ги 50 пиксели под вашите претходни форми.

Користејќи ја алатката за правоаголна селекција, создадете солиден црн блок на дното од екранот на менито и преименувајте го слојот во „реклама“.

чекор 2

Сега, кога главната структура на нашиот почетен екран е подготвена, време е да ги додадеме сите мали детали што го оживуваат дизајнот. Команда + кликнете (Ctrl + кликнете на Windows) на сликичката од нивото на првиот симбол за повторно да го изберете. Оди до Изберете> Измени> Нежните Внесете 4 пиксели и кликнете ОК. Десен-клик и од менито изберете Избери инверзно.

Притиснете го копчето Избриши на тастатурата за да ги отстраните аглите на вашите избори. Одете во Поглед> Избриши водичи за да ги отстраните сите водичи.

Отворете го прозорецот во стилот на слојот за вашиот прв симбол. Нанесете сенка за капка, преклопување на боја и мозочен удар. Сите поставки може да се видат на следниве слики од екранот:

Дуплицирајте го вашиот слој и изберете Уреди> Трансформирај> Скала. Држејќи ги копчињата Shift и Alt малку ќе ја намалите вашата форма.

Отворете го прозорецот Стилови на слој за вашиот нов слој и направете ги следниве поставки за нашите постојни ефекти. Отстранете ја сенката целосно.

Повторно удвојте го слојот и целосно отстранете ги стиловите на слојот со десен клик на слојот и изберете Избриши стил на слој од менито. Оди до Филтер> Шум> Додај шум. Додадов 10% бучава и ја спуштив непроityирноста на слојот на 5%.

Повторете го целиот процес за сите ваши симболи.

чекор 3

Време е да ги создадеме иконите што потоа ќе ги поставиме над копчињата. Направете нов слој и изберете ја алатката за избор на правоаголник. Првиот симбол што ќе го дизајнираме е куп парички што претставува „рамнотежа“. Со алатката за избор креирајте мал правоаголник и пополнете го со црно.

Поместете го вашиот избор неколку засеци, а потоа надесно - пополнете го тој избор со црно на истиот слој. Повторете го чекорот додека нешто не изгледа како дното.

Отворете го прозорецот Стилови на слој за вашиот нов слој на парички. Додадете прилично суптилен златен преклоп на градиент на вашите монети.

Сега додадете капка сенка и внатрешна сенка на вашата форма. Можете да ги видите поставките што ги користев на сликите од екранот подолу.

Завршете ги сите други симболи користејќи техники што ги користевме во двата дела на ова упатство. Willе ги создадам следниве икони: изјава за хартија (за извод од банка), плик (за известувања), мобилен телефон (за надополнување на телефонот), кредитна картичка (за извештаи за кредитна картичка) и силуета (за додавање сметка).

Чекор 4

По завршувањето на моите икони, решив дека сенката за капки под нашите главни бели форми треба да биде малку потемна. Отворете го прозорецот Layer Style и зголемете ја непроityирноста на сенката на 15%. Јас исто така ја зголемив големината на сенката од 2px на 5px.

Направете го истото за сите други форми на копчиња.

Чекор 5

Наместо да го користите долниот правоаголник за реклама, мислам дека би било мало збогатување доколку наместо тоа користите обична графика што на корисниците им дава брза идеја дали нивниот биланс е висок (или паѓа). Користејќи ја истата техника што ја користевме претходно, извлечете неколку линии за водење од правилото.

Фатете ја алатката за елиптична марка и повлечете мал круг додека го држите копчето Shift. Наполнете го со црно на нов слој.

Дуплирајте ја рамнината и поставете точка на следниот вертикален водич. Повторете го чекорот додека не добиете нешто што изгледа вака:

Оди до Преглед> Избриши водичи да ги отстраниме упатствата на нашето платно. Отворете ја опцијата Стилови на слоеви за вашиот прв капак и применете ги следниве стилови:

Копирајте ги стиловите на слоевите со десен клик на вашиот слој и избирање Стил на копирање на слој. Изберете ги сите други слоеви на кругови, десен клик и изберете Вметни стил на слој. Ова треба автоматски да ги додаде стиловите што ги создадовте на сите други слоеви.

Фатете ја алатката за линија и повлечете линија од една до друга точка. Направете го ова под вашите слоеви на точки.

Со тоа, нашиот екран за навигација е исто така готов! Ставете ги сите завршни слоеви во папка наречена „Екран за навигација“ за да ги одржувате работите уредни!

Чекор 6

Повлечете ги слоевите на работ на вашите икони на екранот за навигација, а потоа скријте ја целата папка. Создадете нова папка и именувајте ја „Екран за инструкции“.

Изберете ја Line Tool и кликнете на опаѓачкото мени на лентата со алатки за да бидете сигурни дека се избрани врвовите на стрелките (крај).

Извлечете многу мала стрела како подолу:

Десен-клик на слојот на стрелката, изберете „Растеризирај“ и преименувај го слојот во „зелена стрела“. Отворете го прозорецот Layer Options за вашата стрелка, а потоа ставете сенка, внатрешна сенка, преклоп на градиент и удар. Сите поставки може да се видат подолу:

Како што веројатно веќе претпоставивте, оваа стрелка ќе биде симболот што ќе го користиме за влезните трансакции (пари што ќе бидат депонирани на корисничката сметка). Дуплицирајте го слојот и преместете го на неколку празни места со помош на копчето Shift и копчињата на курсорот. Оди до Уреди> Трансформирај> Ротирај и држете го Shift и завртете ја стрелката накај лево.

Променете го името на слојот во црвена стрелка, отворете го прозорецот Layer Style и ставете црвен градиент.

Дуплирајте ги двете стрели и ставете ги една под друга по случаен редослед.

Изберете ја алатката за избор на еден ред и направете избор под вашата прва стрелка. Наполнете го со црно на новиот слој наречен „Сепаратор“.

Дуплицирајте го слојот, а потоа поместете го еден пиксел надолу со притискање на копчето надолу на копчињата на курсорот. Обојте ја линијата во бело.

Спојте ги двата слоја заедно со избирање на обата. Десен клик и изберете Join Layers од менито. Променете ја непроityирноста на слојот на 15% и користете ја алатката Rectangular Marquee Tool и Delete за да го исечете крајот на линиите до упатствата.

Дуплицирајте го слојот и ставете го помеѓу следните две стрели. Повторете го чекорот додека не имате линија помеѓу сите стрели. Оди до Преглед> Избриши водичи.

Зафатете ја алатката за текст и повлечете поле за текст помеѓу првите две делители за да бидете сигурни дека е во центарот. Внесете нешто. Го користев текстот „107,62 УСД од името на компанијата на 06.04.2010 година“. Ја користев Helvetica за ова, поставено на 4pt.

Осигурете се дека одредени делови од вашиот текст се понагласени со користење на различни под-типови, како што се: Б. задебелени и закосени.

Дуплирајте го слојот за текст и преместете го до следната трансакција. Повторете го овој чекор додека не ги пополните сите празнини.

За да го направите дизајнот на вашиот дизајн пореален, поминете низ слоевите на текстот и променете го бројот, името на компанијата и датумот.

Чекор 7

Стартувајте го екранот Додади сметка и завршете го користејќи техники што ги користевте во двата дела на упатството. Подолу има неколку слики од екранот што ќе ги направите додека го дизајнирате последниот екран на упатството.

Конечни резултати

Екран за почеток/навигација:

Екран за упатства:

Додадете го екранот на сметката: