Мобилно приложение с Midjourney и Photoshop

Ключови аспекти на създаването на мобилно приложение с Midjourney и Photoshop

В този урок се демонстрира как да използвате Midjourney за генериране на референции за дизайн на мобилно приложение, които след това да доразвиете и усъвършенствате в Photoshop. Midjourney служи като отлична отправна точка за създаване на концепции, докато Photoshop позволява да коригирате недостатъците на AI генерацията (като нечетлив текст и непрофесионални икони) и да създадете завършен, професионален дизайн.

Стъпка по стъпка процес за създаване на UI дизайн

1. В Midjourney използвайте команда /imagine с описание "Fitness Mobile App Design UI UX beautiful clean design" с аспектно съотношение 7:4
2. Свалете генерираното изображение и го импортирайте в Photoshop
3. Създайте нов документ с Artboards (File > New > отметнете Artboards)
   • Използвайте Ctrl+J за дублиране на артбордове за различни екрани
   • Позиционирайте артбордовете с Move Tool
4. Създайте фон с Rectangle Tool и копирайте цвета от референцията с Eyedropper
5. Добавете снимка на модел (може също да е генерирана с Midjourney)
6. Създайте долната навигационна лента:
   • Начертайте правоъгълник с Rectangle Tool
   • Заоблете ъглите чрез точките в ъглите на формата
   • Добавете градиент (Gradient Overlay) с линеен стил и 0 градуса
7. Добавете кръгли основи за иконите с Ellipse Tool
   • Използвайте инструментите за подравняване за равномерно разпределение
8. Поставете икони (от Flat Icon или други източници)
9. Създайте информационен панел за статистика:
   • Начертайте правоъгълник със заоблени ъгли
   • Добавете Drop Shadow за дълбочина
   • Включете опция за скролване
   • Добавете икони и текст за пулс, калории, разстояние
10. Завършете с добавяне на топ бар (батерия, часовник, мобилно покритие)

Полезни команди и функции в Photoshop

• File > New - създаване на нов документ с опция за Artboards
• Ctrl+J - дублиране на слой или артборд
• Rectangle Tool - създаване на правоъгълници за UI елементи
• Ellipse Tool - създаване на кръгли форми за икони
• Eyedropper Tool - копиране на цветове от референцията
• Move Tool - преместване и позициониране на елементи
• Layer Style > Gradient Overlay - добавяне на градиент към елемент
• Layer Style > Drop Shadow - добавяне на сянка за дълбочина
• V (с маркирани елементи) - достъп до инструментите за подравняване в горния toolbar