Розробка програми для банку iPhone у Photoshop Частина 2 Код Розробка веб-сайтів, комп’ютерних ігор та
- Поділитися у Facebook
- Твіт
- Поділіться в Google+
- Опублікувати на Tumblr
- Закріпіть
- Додати до кишені
- Відправити лист
Це другий із двох частин серії підручників з проектування банківської програми для iPhone. У цій частині серії ми плануємо розробити основний макет/зміст кожної з цих сторінок: меню/домашню сторінку, сторінку виписки та екрани для додавання облікових записів. Пропущена частина перша? Будьте в курсі, прочитавши його тут.
Крок 1
Потім, з того місця, де ми зупинились, виберіть Інструмент виділення прямокутника. На панелі інструментів виберіть фіксований розмір зі спадного меню «Стиль» і скористайтеся налаштуваннями 50 x 50 пікселів. Клацніть де завгодно на полотні, щоб створити виділення 50 x 50 пікселів. Перетягніть виділення на край полотна, а потім перетягніть напрямну з лінійки (Перегляд> Лінійка) і прикріпіть її до вибраного. Повторюйте процес, поки на обох сторонах полотна не буде двох вказівок.
Помістіть напрямну в середині полотна - ви зможете закріпити її на своєму місці автоматично.
Тепер витягніть напрямні і покладіть їх посередині між двома вже створеними нами.
Тепер у нас є дуже проста сітка для розміщення наших піктограм/кнопок, як тільки ми їх розробили. Виберіть інструмент «Вибір прямокутного вибору» та меню «Стиль» і виберіть нормальний розмір замість фіксованого. Перетягніть квадрат між лівими напрямними (утримуйте клавішу Shift). Заповніть його чорним кольором.
Повторіть процес ще два рази, обов’язково заповнивши кожну фігуру новим шаром.
Дублюйте всі три шари та розмістіть їх на 50 пікселів нижче попередніх фігур.
За допомогою прямокутного інструменту виділення створіть суцільний чорний блок внизу екрана меню та перейменуйте шар «ad».
Крок 2
Тепер, коли основна структура нашого домашнього екрану готова, настав час додати всі дрібні деталі, що оживляють дизайн. Command + клацніть (Ctrl + клацніть на Windows) ескіз першого рівня символу, щоб вибрати його знову. Йти до Виберіть> Змінити> Згладити Введіть 4 пікселі та натисніть OK. Клацніть правою кнопкою миші та виберіть у меню пункт Вибрати зворотний.
Натисніть клавішу Delete на клавіатурі, щоб видалити кути вибраних елементів. Перейдіть до Перегляд> Видалити напрямні, щоб видалити всі напрямні.
Відкрийте вікно стилю шару для вашого першого символу. Нанесіть тінь, накладіть колір і обведіть. Усі налаштування можна побачити на наступних знімках екрана:
Скопіюйте шар і виберіть "Редагувати"> "Трансформувати"> "Масштабувати". Якщо утримувати клавіші Shift і Alt, ваша форма трохи зменшиться.
Відкрийте вікно «Стилі шарів» для вашого нового шару та зробіть наступні налаштування для наших існуючих ефектів. Видаліть тінь повністю.
Знову продублюйте шар і повністю видаліть стилі шару, клацнувши шар правою кнопкою миші та вибравши у меню Видалити стиль шару. Йти до Фільтр> Шум> Додати шум. Я додав 10% шуму і знизив непрозорість шару до 5%.
Повторіть весь процес для всіх ваших символів.
крок 3
Пора створити іконки, які ми потім розмістимо над кнопками. Створіть новий шар і оберіть інструмент виділення прямокутника. Першим символом, який ми розробимо, є стопка монет, що представляє "баланс". Створіть невеликий прямокутник за допомогою інструменту виділення та заповніть його чорним кольором.
Перемістіть виділення на кілька вирізів, а потім праворуч - заповніть виділення чорним кольором на тому самому шарі. Повторюйте крок, поки щось не буде схоже на дно.
Відкрийте вікно «Стилі шарів» для нового шару монети. Додайте до монет досить тонкий золотистий градієнтний шар.
Тепер додайте до своєї фігури тінь і внутрішню тінь. Ви можете побачити налаштування, якими я користувався, на скріншотах нижче.
Завершіть усі інші символи, використовуючи прийоми, які ми використовували в обох частинах цього підручника. Я буду створювати такі піктограми: паперова виписка (для банківських виписок), конверт (для сповіщень), мобільний телефон (для поповнення рахунків по телефону), кредитна картка (для виписок з кредитних карток) та силует (для додавання рахунку).
Крок 4
Закінчивши свої ікони, я вирішив, що тінь під нашими основними білими фігурами повинна бути трохи темнішою. Відкрийте вікно «Стиль шару» та збільште непрозорість тіні до 15%. Я також збільшив розмір тіні з 2 пікселів до 5 пікселів.
Зробіть те ж саме для всіх інших форм кнопок.
Крок 5
Замість того, щоб використовувати нижній прямокутник для реклами, я думаю, це було б трохи збагачення, якщо б замість цього ви використали просту графіку, яка дає користувачам швидке уявлення про те, чи високий їх баланс (чи падає). Використовуючи ту саму техніку, яку ми застосовували раніше, витягніть з лінійки кілька напрямних ліній.
Візьміть Elliptical Marquee Tool і перетягніть невелике коло, утримуючи клавішу Shift. Заповніть його чорним кольором на новому шарі.
Скопіюйте площину і поставте точку на наступній вертикальній напрямній. Повторюйте крок, поки не з’явиться щось подібне:
Йти до Перегляд> Видалити напрямні щоб видалити вказівки на нашому полотні. Відкрийте опцію Стилі шарів для вашої першої крапки та застосуйте наступні стилі:
Скопіюйте стилі шару, клацнувши шар правою кнопкою миші та вибравши Копіювати стиль шару. Виділіть усі інші шари кола, клацніть правою кнопкою миші та виберіть Вставити стиль шару. Це повинно автоматично додавати стилі, які ви щойно створили, до всіх інших шарів.
Візьміть інструмент лінії та проведіть лінію від однієї точки до іншої. Робіть це під точковими шарами.
З цим наш екран навігації також закінчений! Помістіть усі свої останні шари в папку, яка називається "Екран навігації", щоб тримати речі в порядку!
Крок 6
Перетягніть шари до краю піктограм на екрані навігації, а потім сховайте всю папку. Створіть нову папку та назвіть її "Екран інструкцій".
Виберіть інструмент «Лінія» та клацніть спадне меню на панелі інструментів, щоб переконатися, що вибрані наконечники стрілок (кінець).
Витягніть дуже маленьку стрілку, як показано нижче:
Клацніть правою кнопкою миші на шарі зі стрілкою, виберіть "Rasterize" і перейменуйте шар на "зелена стрілка". Відкрийте вікно Параметри шару для вашої стрілки, а потім застосуйте тінь, внутрішню тінь, накладання градієнта та штрих. Усі налаштування можна переглянути нижче:
Як ви вже здогадалися, ця стрілка буде символом, який ми використовуємо для вхідних транзакцій (гроші, які будуть внесені на рахунок користувача). Скопіюйте шар і перемістіть його на кілька пробілів за допомогою клавіші Shift та клавіш курсору. Йти до Правка> Трансформувати> Повернути і утримуйте Shift і повертайте стрілку в напрямку вліво.
Змініть назву шару на червону стрілку, відкрийте вікно Стиль шару та застосуйте червоний градієнт.
Скопіюйте дві стрілки і розмістіть їх одна під одною у довільному порядку.
Виберіть інструмент виділення одного рядка та зробіть вибір під першою стрілкою. Заповніть його чорним кольором на новому шарі під назвою "Separator".
Скопіюйте шар, а потім перемістіть його на один піксель вниз, натискаючи клавішу вниз на клавішах курсору. Пофарбуйте лінію в білий.
Об’єднайте два шари, вибравши обидва. Клацніть правою кнопкою миші та виберіть у меню Приєднати шари. Змініть непрозорість шару на 15% і скористайтеся інструментом "Прямокутна рамка" та клавішею "Видалити", щоб скоротити кінець рядків відповідно до вказівок.
Скопіюйте шар і розмістіть його між двома наступними стрілками. Повторюйте крок, доки між усіма стрілками не з’явиться лінія. Йти до Перегляд> Видалити напрямні.
Візьміть інструмент для тексту і перетягніть текстове поле між двома верхніми роздільниками, щоб переконатися, що воно знаходиться в центрі. Введіть щось. Я використав текст "107,62 дол. США від назви компанії 06/06/2010". Для цього я використовував Helvetica, встановлений на 4pt.
Переконайтесь, що певні частини тексту більше підкреслюються, використовуючи різні підтипи, такі як: Б. жирний і курсив.
Скопіюйте текстовий шар і перемістіть його до наступної транзакції. Повторюйте цей крок, поки ви не заповнили всі прогалини.
Щоб зробити дизайн вашого дизайну більш реалістичним, перегляньте текстові шари та змініть номер, назву компанії та дату.
Крок 7
Запустіть екран "Додати обліковий запис" і заповніть його, використовуючи прийоми, які ви використовували в обох частинах підручника. Нижче наведено кілька знімків екрану, які ви зробите, розробляючи остаточний екран підручника.
Остаточні результати
Екран запуску/навігації:
Екран інструкцій:
Екран додавання облікового запису: