Проектиране на iPhone Bank App в Photoshop Част 2 Код Разработка на уебсайтове, Компютърни игри и
- Споделям във Фейсбук
- Tweet
- Споделете в Google+
- Публикувайте в Tumblr
- Закачете го
- Добави към Pocket
- Изпратете имейл
Това е вторият от поредица от две части уроци за проектиране на приложение за банкиране на iPhone. В тази част от поредицата ще проектираме основното оформление/съдържание на всяка от тези страници: менюто/началната страница, страницата с извлечения и екраните за добавяне на акаунти. Пропусната част първа? Бъдете в течение, като го прочетете тук.
Етап 1
След това, от мястото, където спряхме, изберете инструмента за избор на правоъгълник. В лентата с инструменти изберете фиксирания размер от падащото меню Стил и използвайте настройките 50 x 50 пиксела. Щракнете навсякъде върху вашето платно, за да създадете селекция 50 x 50 пиксела. Плъзнете селекцията си до ръба на вашето платно, след което плъзнете водач от линията си (Изглед> Линийка) и я щракнете към вашата селекция. Повторете процеса, докато има две насоки от двете страни на вашето платно.
Поставете водач в средата на вашето платно - трябва да можете да го поставите автоматично на място.
Сега издърпайте водачите и ги поставете в средата между двете, които вече сме създали.
Вече имаме много проста мрежа, за да поставим нашите икони/бутони, след като сме ги проектирали. Изберете менюто с инструменти за правоъгълна селекция и стил и изберете нормален размер вместо фиксиран размер. Плъзнете квадрат между левите водачи (задръжте клавиша Shift). Напълнете го с черно.
Повторете процеса още два пъти, като не забравяте да попълните всяка фигура на нов слой.
Дублирайте и трите слоя и ги разположете на 50 пиксела под предишните си фигури.
Използвайки инструмента за правоъгълна селекция, създайте плътен черен блок в долната част на екрана на менюто и преименувайте слоя "реклама".
стъпка 2
Сега, когато основната структура на нашия начален екран е готова, е време да добавите всички малки детайли, които оживяват дизайна. Command + щракнете (Ctrl + щракнете върху Windows) миниизображението на първото ниво на символа, за да го изберете отново. Отидете на Изберете> Modify> Smooth Въведете 4 пиксела и щракнете върху OK. Щракнете с десния бутон и изберете Select Inverse от менюто.
Натиснете клавиша Delete на клавиатурата, за да премахнете ъглите на вашите селекции. Отидете на Преглед> Изтриване на водачи, за да премахнете всички водачи.
Отворете прозореца на стила на слоя за първия си символ. Приложете падаща сянка, цветно наслагване и щрих. Всички настройки могат да се видят на следните екранни снимки:
Дублирайте слоя си и изберете Edit> Transform> Scale. Задържането на клавишите Shift и Alt ще намали малко формата ви.
Отворете прозореца Layer Styles за новия си слой и направете следните настройки върху съществуващите ни ефекти. Премахнете сянката напълно.
Дублирайте слоя отново и напълно премахнете стиловете на слоя, като щракнете с десния бутон върху слоя и изберете Изтриване на стила на слоя от менюто. Отидете на Филтър> Шум> Добавяне на шум. Добавих 10% шум и намалих непрозрачността на слоя до 5%.
Повторете целия процес за всичките си символи.
стъпка 3
Време е да създадем иконите, които след това ще поставим върху нашите бутони. Създайте нов слой и изберете инструмента за избор на правоъгълник. Първият символ, който ще проектираме, е куп монети, който представлява „баланс“. Създайте малък правоъгълник с инструмента за избор и го запълнете с черно.
Преместете селекцията си с няколко прореза и след това надясно - запълнете тази селекция с черно на същия слой. Повторете стъпката, докато нещо прилича на дъното.
Отворете прозореца Layer Styles за новия си слой с монети. Добавете доста фин златист градиент за наслагване към вашите монети.
Сега добавете падаща сянка и вътрешна сянка към вашата форма. Можете да видите настройките, които използвах, на екранните снимки по-долу.
Попълнете всички останали символи, като използвате техники, които използвахме и в двете части на този урок. Ще създам следните икони: извлечение на хартия (за банкови извлечения), плик (за известия), мобилен телефон (за допълване на телефона), кредитна карта (за извлечения по кредитни карти) и силует (за добавяне на акаунт).
Стъпка 4
След като завърших иконите си, реших, че сянката под основните ни бели фигури трябва да е малко по-тъмна. Отворете прозореца Layer Style и увеличете непрозрачността на сянката до 15%. Също така увеличих размера на сянката от 2px на 5px.
Направете същото за всички други форми на бутони.
Стъпка 5
Вместо да използвам долния правоъгълник за реклама, мисля, че би било малко удоволствие, ако вместо това използвате проста графика, която дава на потребителите бърза представа дали балансът им е висок (или пада). Използвайки същата техника, която използвахме преди, издърпайте няколко водещи линии от владетеля.
Вземете Elliptical Marquee Tool и издърпайте малък кръг, докато държите натиснат клавиша Shift. Напълнете го с черно върху нов слой.
Дублирайте равнината и поставете точка върху следващия вертикален водач. Повтаряйте стъпката, докато получите нещо, което изглежда така:
Отидете на Преглед> Изтриване на водачи за да премахнете насоките на нашето платно. Отворете опцията Layer Styles за първата си петна и приложете следните стилове:
Копирайте стиловете на слоя, като щракнете с десния бутон на мишката върху слоя си и изберете Copy Layer Style. Изберете всички останали кръгови слоеве, щракнете с десния бутон и изберете Insert Layer Style. Това трябва автоматично да добави стиловете, които току-що сте създали, към всички останали слоеве.
Вземете инструмента за линия и нарисувайте линия от една точка до друга. Направете това под вашите точкови слоеве.
С това нашият навигационен екран също е готов! Поставете всичките си последни слоеве в папка, наречена "Навигационен екран", за да поддържате нещата подредени!
Стъпка 6
Плъзнете слоевете до ръба на вашите икони на екрана за навигация, след което скрийте цялата папка. Създайте нова папка и я наречете „Инструкция на екрана“.
Изберете Line Tool и щракнете върху падащото меню в лентата с инструменти, за да се уверите, че върховете на стрелките (край) са избрани.
Издърпайте много малка стрелка като по-долу:
Щракнете с десния бутон върху слоя със стрелка, изберете „Rasterize“ и преименувайте слоя на „зелена стрелка“. Отворете прозореца Layer Options за вашата стрелка, след това приложете сянка, вътрешна сянка, наслагване с градиент и щрих. Всички настройки можете да видите по-долу:
Както вероятно вече се досещате, тази стрелка ще бъде символът, който използваме за входящи транзакции (пари, които ще бъдат депозирани в потребителската сметка). Дублирайте слоя и го преместете на няколко интервала, като използвате клавиша Shift и курсора. Отидете на Редактиране> Трансформиране> Завъртане и задръжте Shift и завъртете стрелката, така че да сочи наляво.
Променете името на слоя на червена стрелка, отворете прозореца Стил на слоя и приложете червен градиент.
Дублирайте двете стрелки и ги поставете една под друга в произволен ред.
Изберете инструмента за избор на един ред и направете селекция под първата си стрелка. Напълнете го с черно на нов слой, наречен "Separator".
Дублирайте слоя, след което го преместете надолу с един пиксел, като натиснете клавиша за надолу на клавишите с курсора. Оцветете линията в бяло.
Обединете двата слоя заедно, като изберете и двата. Щракнете с десния бутон и изберете Присъединяване на слоеве от менюто. Променете непрозрачността на слоя на 15% и използвайте инструмента Rectangular Marquee Tool и Delete, за да отрежете края на редовете до указанията.
Дублирайте слоя и го поставете между следващите две стрелки. Повтаряйте стъпката, докато имате линия между всички стрелки. Отидете на Преглед> Изтриване на водачи.
Вземете инструмента за текст и изтеглете текстово поле между горните два разделителя, за да сте сигурни, че е в центъра. Въведете нещо. Използвах текста "$ 107,62 от името на компанията на 04/06/2010". Използвах Helvetica за това, настроен на 4pt.
Уверете се, че определени части от вашия текст са по-подчертани, като използвате различни подтипове, като например: Б. получер и курсив.
Дублирайте текстовия слой и го преместете до следващата транзакция. Повторете тази стъпка, докато не попълните всички пропуски.
За да направите дизайна на вашия дизайн по-реалистичен, преминете през текстовите слоеве и променете номера, името на компанията и датата.
Стъпка 7
Стартирайте екрана Добавяне на акаунт и го завършете, като използвате техники, които сте използвали и в двете части на урока. По-долу има няколко скрийншота, които ще направите, докато проектирате последния екран на урока.
Крайни резултати
Начален/навигационен екран:
Екран с инструкции:
Екран за добавяне на акаунт: