В этом уроке мы будем создавать дизайн пользовательского интерфейса iPhone для форума и чата на основе мобильного приложения. Приложение включает в себя несколько сенсорный интерфейс-элементов. Мы будем использовать различные инструменты Photoshop и  стили слоя. Урок подойдёт даже для новичков.

Окончательный результат:

Требования:

• Заголовок — название чата, на котором вы сейчас находитесь
• Кнопки «Назад»  и « Закрыть".
• Кнопка «People» — показывает, кто в настоящее время находится в чате.
• Список сообщений — сообщения должны иметь аватар и метки.
• Способ просмотра профилей пользователей и отчетности сообщений.
• Текстовое поле для написания сообщения.
• Кнопка  для отправки сообщений.

Планирование, эскизы

Для любого проекта пользовательского интерфейса важно первым делом создать эскиз. Это поможет избежать глупых идей и постоянных переделок. Возьмите ручку и ваш любимый блокнот и начните рисовать.

Шаг 1: Строка состояние и навигации

Создадим наш документ размером 640px  на 960px и разрешением 326ppi. Первым делом добавим строку состояния, которая находится на панели в верхней части iPhone. Если вы хотите, чтобы дизайн вашего приложения выглядел реалистично, можете скачать комплект Retina iPhone GUI PSD отсюда.

Добавим панель навигации с высотой 86px  и шириной 640px.

Шаг 2: Кнопки на панели навигации

Давайте посмотрим на эскиз: у нас есть две кнопки на нашей навигационной панели. Выберите инструмент Rounded Rectangle Tool с установленным размером 100px х 50px  и радиусом 6px. Поместите формы на правую и левую сторону навигации.

Шаг 3: Выбор стиля

Пришло время выбрать стиль оформления. Данное приложение позволит людям общаться и знакомиться друг с другом и получать удовольствие от этого. Поэтому мы будем использовать причудливые цветовые схемы и типографику.

Выберите инструмент Type Tool и выберите шрифт, который считаете нужным. Мы выбрали Arial Rounded MT Bold . Введите название темы и разместите его в центре нашей навигации.

Настало время определиться с цветами. Мы используем сервис Colour Lovers , чтобы подобрать нужный цвет. Палитра, которую мы выбрали называется Playroom.

Шаг 4: Стиль навигации по сайту

Активируйте слой панели навигации, щелкните по нему правой кнопкой мыши и выберите Blending Options или дважды кликните по слою.

Прежде всего, мы собираемся добавить градиент нашей навигации, поэтому щелкните на Gradient Overlay. Укажите параметры, как на картинке ниже:

Теперь добавим обводку. Измените размер до 2px. Старайтесь всегда избегать нечетного числа в дизайне пользовательского интерфейса, особенно на мобильных устройствах.

Выберите градиентную заливку для контура с темно-бирюзовым и черным цветом, как на рисунке ниже:

Добавьте Внутренняя тень со значением непрозрачности 15%,  расстоянием 2px и размером 3px.

Теперь давайте добавим заливку. Мы выбрали узор, как на рисунке ниже. Если вы хотите использовать этот паттерн,  можете бесплатно скачать набор на Premium Pixels.

Шаг 5: Стили текста

Чтобы добавить нашему тексту глубину, применим Внешнюю Тень (Drop Shadow). Измените  значение угла на 90 (снимите галочку с Use Global Light, если она стоит) и используйте тот же цвет, что и для нижней части градиента. Установите расстояние 2px измените  размер на 0px.

Шаг 6: Стиль для кнопок навигации

Давайте для начала добавим Градиентную заливку (Gradient Overlay) нашим кнопочкам. Установите параметры, как на рисунке ниже:

Добавьте контур размером 2px. Измените тип заливки на градиентную и установите угол 90 градусов.

Теперь давайте добавим внутреннее свечение нашей кнопочке. Выберите Inner Glow и измените режим наложения на Screen. Установите непрозрачность 20% и убедитесь, что шум имеет значение 0%. Измените стандартный желтый цвет на белый, и убедитесь, что размер по-прежнему установлен  5px.

Давайте добавим внутреннюю тень, чтобы сделать нашу кнопку чуть более реалистичной. Измените непрозрачность на 15% и выберите черный цвет. Установите расстояние 2 пикселя и размер 4px. Установите угол 90 градусов.

Теперь давайте добавим тень. Выберите Drop Shadow, измените цвет на белый и установите непрозрачность 25%. Эта тень будет выступать в качестве подсветки, поэтому изменити расстояние до 4px.

Шаг 7: Значения кнопок

Кнопка без метки не имеет смысла, так что теперь мы собираемся потратить немного времени, чтобы закончить наши кнопочки. Прежде всего, щелкните правой кнопкой мыши по слою с только что созданной кнопкой и выберите стиль Copy Layer Style. Теперь щелкните правой кнопкой мыши по слою по второй кнопкой и выберите Paste Layer Style.

Давайте сначала закончим нашу правую кнопку. Эта кнопка будет называться «People», и мы хотим использовать иконы с людьми. Для этого урока я буду использовать иконки, созданные в  дизайн-студии Yummygum, вы можете скачать их на сайте IconSweets.com — мы будем использовать иконки из этого набора на протяжении всего урока.

Используя тот же шрифт, что и для заголовка панели навигации, введите надпись для кнопки. Изменение размер и поместите его на свою кнопку, а затем добавьте иконку. Мы добавили внутренние отступы 15px, и расстояние 10px между изображением и текстом.

Повторите эту процедуру для кнопки на левой стороне панели навигации, только добавьте крестик вместо иконки слюдьми и слово «Закрыть». Понизьте непрозрачность форм для кнопок до 95%, это позволит немного просвечиваться сетке под ними.

Шаг 8: Футер

Пришло время, обратить внимание на остальную часть нашего документа. Выберите инструмент прямоугольник используйте те же размеры, что и для нашей навигационной панели (640 х 86px). Поместите форму в нижней части документа.

Шаг 9: Фон

Теперь мы будем работать над фоном нашего дизайна. Зайдите в стили слоя и выберите нужную заливку. Мы использовал темный рисунок с вертикальной полоской из набора Subtle Patterns.

Если вы хотите добавить свои собственные цветовые модели, вы можете сделать это, используя стиль Color Overlay. Мы выбрали коричневый цвет(из цветовой палитры) и установили значение непрозрачности 35%.

Теперь откройте нашу панель навигации и добавьте ей Внешнюю Тень. Убедитесь, что выбран черный цвет и уменьшите непрозрачность до 25%. Увеличьте расстояние до 6px, размер до 10px, и нажмите кнопку OK. Возможно, вам придется поэкспериментировать с этими параметрами, так как результаты будут меняться в зависимости от цвета и типа текстуры.

Шаг 10: Сообщения

Теперь давайте оформим наши сообщения. Выберите инструмент Прямоугольник и его на холсте. Мы использовали ширину 600px.

Выберите инструмент Rounded Rectangle Tool с установленными  размерами 80 х 80 пикселей, а радиусом 6px. Поместите форму (для нашего аватара) на наш документ и расположите её правильно. Для того дизайн был последовательным, сделайте внутренние отступы размером 20px для панели сообщений и такое же расстояние между аватаром и текстом.

Напишите свое имя и сообщение, используя выбранный шрифт (Arial MT Bold).

Измените цвет заголовка на тёмно-бирюзовый, а цвет текста сообщений-на серо-бирюзовый.

Затем добавьте аватар, выбрав File> Place. Нажмите правой кнопкой мыши на аватар и выберите команду Create Clipping Mask. Это позволит связать аватар с формой.

При помощи другой иконки из  IconSweets ,создайте миленькие метки. Измените их размер, перейдя в Edit> Transform> Free Transform до 70% в ширину и высоту для сохранения пропорций. Добавьте текст и выберите цвет шрифта.

Шаг 11: Повторяющиеся сообщения

Сгруппируйте окна сообщений, продублируйте их и расположите друг под другом, оставляя между ними расстояние 2px. Вы можете сделать это либо перетаскивая слои, либо нажав Ctrl + Shift + Стрелка вниз. Замените содержимое сообщений.

Шаг 12: Стили сообщений

Добавьте тень нашим сообщениям. Откройте Drop Shadow и измените режим смешивания на нормальный и выберите белый цвет. Увеличьте непрозрачность до 80% вместо стандартных 75% и установите расстояние тени 2 пикселя. Это скроет двухпиксельный разрыв между окнами сообщений.

Скопируйте и вставьте стиль слоя всем окнам. У вас должно получиться что-то вроде этого:

Шаг 13: Добавим закругленные углы

Чтобы сделать наш проект более интересным, а также, чтобы добавить больше глубины, мы собираемся добавить скругленные углы в нижней части наших сообщений и заставить их выглядеть как блокнот.

Выберите инструмент Прямоугольник с закругленными углами радиусом 10px, как на рисунке ниже:

С помощью Direct Selection Tool, выделите содержимое вашей векторной фигуры и перейдите в меню Edit> Copy. Нажмите на векторный слой формы вашего нижнего фона  и перейдите в меню Edit> Paste. Это позволит вставить содержимое формы слоя на другой слой вашей формы. Удалить форму, которую мы сделали в предыдущем шаге.

Добавьте Внешнюю тень нашей форме. Измените цвет на черный, непрозрачность на 25%, расстояние на 1 пиксель и размер на 3 пикселя.

Дублируйте этот слой и сдвиньте его вниз на 5px. У вас должно получиться нечто похожее:

Повторите этот шаг еще раз, чтобы у вас было  три листочка вместо двух.

Шаг 14: Тень навигации

Создайте новый слой, выберите инструмент Rectangular Marquee Tool и нарисуйте тонкую линию в верхней части вашего сообщения. Залейте наше выделение черным цветом.

Перейдите в  Filter> Blur> Gaussian Blur и примените размытие.

Шаг 15: Профиль

Давайте вернёмся к нашему эскизу, мы решили, чтобы пользователи могут сдвигать сообщение влево, чтобы увидеть больше кнопок, которые позволяют пользователю просмотреть профиль автора или отправить ему сообщение.

Выберите группу с одним из ваших сообщений и с помощью клавиши со стрелками, переместите сообщение на 100px влево.

Добавьте необходимые иконки и текст, чтобы сделать их более привлекательными, добавьте им тень.

Шаг 16: Текстовое поле

Текстовое поле является одним из наиболее важных элементов. Пользователи должны иметь возможность вводить свои сообщения с легкостью и без путаницы.

Для начала, найдите ваш фоновый слой и копировать стили слоя. Вставить эти стили слоя на для футера, который мы создали ранее.

Добавьте  ему внешний контур размером 2px  черного цвета.

Теперь выберите Inner Shadow и измените режим наложения на нормальный, цвет- белый, непрозрачность-10% и расстояние- 2px, как на рисунке ниже:

Выберите инструмент Rounded Rectangle Tool с радиусом 50p. Установите размер формы 460x54px и расположите её по центру нашего футера. Установите отступ для текста размером 20px.

Заполните форму темным цветом, а затем открыть панель стилей слоя. Примените Внешнюю тень белого цвета и размером 2px и установите значение непрозрачности 10%.

Теперь давайте добавим Внутреннюю Тень. Используйте черный цвет,  режим наложения Умножение и непрозрачность 25%. Установите расстояние  5px и размер 10px.

Добавьте надпись  и поместите его в окно текстового поля. Добавьте тексту Внешнюю тень с непрозрачностью 75%, расстоянием 2px и размером 3 пикселя.

Шаг 17: Кнопка для текстового поля

Выбирите инструмент Rounded Rectangle Tool и используйте те же настройки радиуса и высоты, которые мы использовали для текстового поля. Изменените размер длины вашей кнопки, так чтобы он был на расстоянии  10px от вашего текстового поля и 20px от правого края холста.

Выберите Gradient Overlay и примените градиент от светлого (вверху) до темного (внизу). Мы использовали великолепный желтый цвет, который был в палитре цветов.

Добавьте добавим  внутренний контур для нашей кнопки. Измените размер на  2px и установите значение размещения Inside.

Добавьте текст для нашей кнопки с тенью размером 3 пикселя и расстоянием 1px, как на рисунке ниже:

Всё, наш дизайн готов! Мы будем рады видеть ваши результаты, поэтому, пожалуйста, не стесняйтесь-прикрепите их в комментариях ниже.

Увидеть дизайн в полном размере вы можете здесь.

По материалам webdesignerdepot



Комментарии