Интерфейс Twitter-приложения

9 июня 2014 · Глеб Х. · «Мир Фотошопа»

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

Шаг 1. Создание нового документа

Создайте новый документ в Фотошопе (Ctrl + N) размером 1050х700 пикселей.

Шаг 2. Подготовка холста

Активируйте линейки (Ctrl + R), кликните на них правой кнопкой мыши и выберите пункт Pixels.

Шаг 3

Отведите горизонтальные и вертикальные направляющие, как показано ниже.

Шаг 4

Чтобы быть точным в размерах и расположении, включите функцию Snap to Pixels в настройках инструментов Rectangle Tool (U) и Rounded Rectangle Tool (U).

Шаг 5

Создайте закруглённый прямоугольник с радиусом 5 пикселей цветом #e2e4e7.

Шаг 6

К прямоугольнику примените следующие стили:

Шаг 7

Создайте ещё один закруглённый прямоугольник с радиусом 5 пикселей чёрного цвета в верхней части предыдущего. Затем выберите инструмент Rectangle Tool (U), создайте прямоугольник поверх верхней половины чёрного закруглённого прямоугольника. На верхней панели нажмите на кнопку Intersect with shape area.

Шаг 8

К чёрной полоске примените следующие стили:

Шаг 9

Инструментом Ellipse Tool (U) создайте круг цветом #e43c22. Это кнопка закрытия окна.

Шаг 10

Примените к кругу следующие стили:

Шаг 11

Выберите инструмент Move Tool (V), зажмите клавишу Alt и передвиньте красный круг вправо два раза. У Вас появятся две копии круга. Измените цвет копий на жёлтый и зелёный. Также измените цвет обводки.

Шаг 12

Нужно выделить красную кнопку, чтобы пользователь понимал, что её нажатие приведёт к закрытию приложения. Внутри красной кнопки создайте маленький круг цветом #871f0f.

Шаг 13

Создайте закруглённый прямоугольник с таким же радиусом цветом #d2d8df. Расположите его под панелью заголовка.

Шаг 14

Создайте прямоугольник в верхней части закруглённого прямоугольника и нажмите на верхней панели на кнопку пересечения.

Шаг 15

К оставшейся части фигуры примените следующие стили:

Шаг 16

Выберите инструмент Line Tool (U) и на верхней панели установите Width на 1 пиксель. Создайте линию цветом #808f9e под прямоугольником.

Шаг 17

Примените к линии стиль Drop Shadow.

Шаг 18. Профиль пользователя

Создайте квадрат с закруглёнными углами белого цвета. На этом месте будет фотографию пользователя.

Шаг 19

Примените к закруглённому квадрату следующие стили:

Шаг 20

Создайте ещё один закруглённый квадрат внутри предыдущего, но с радиусом 3 пикселя. Цвет не важен.

Шаг 21

Примените следующие стили:

Шаг 22

Вставьте свою аватарку поверх внутреннего прямоугольника. Нажмите Ctrl + Alt + G, чтобы создать обтравочную маску. Благодаря ей аватарка не выйдет за пределы квадрата. Используйте инструмент Free Transform (Ctrl + T) для изменения размера и положение аватарки.

Шаг 23

Добавьте имя пользователя. Примените стиль Drop Shadow, чтобы создать эффект вдавленности.

Шаг 24

Добавьте краткую информацию о пользователе.

Шаг 25

Нарисуйте 1-пиксельную линию цветом #afbac4 под информации о пользователе. Добавьте к ней стиль Drop Shadow.

Шаг 26

Добавьте количество твитов шрифтом «Armata» и тоже добавьте стиль тени для создания эффекта вдавленности.

Шаг 27. Кнопка редактирования

Создайте квадрат со скругленными углами с радиусом 2 пикселя цветом #eef1f4. Примените к нему несколько стилей.

Шаг 28

Создайте чёрный квадрат внутри скругленного. Затем внутри него создайте ещё один квадрат и на верхней панели нажмите на кнопку Subtract from shape area, чтобы сделать вырез.

Шаг 29

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

  1. Нарисуйте прямоугольник в режиме Subtract from Path.
  2. Добавьте ещё один прямоугольник в режиме Add to Path.
  3. Создайте прямоугольник на вершине прямоугольника 2. Поверните его на 45 градусов.
  4. Нарисуйте прямоугольник поперёк прямоугольника 2. Режим — Subtract from Path.

Шаг 30

Наклоните карандаш под углом 45 градусов и расположите внутри ранее созданных квадратов.

Шаг 31

Под областью профиля создайте ещё один прямоугольник цветом #e2e4e7.

Шаг 32

Примените к нему следующие стили:

Шаг 33

Под прямоугольником создайте 1-пиксельную линию цветом #a8b1ba. Примените к ней стиль тени.

Шаг 34. Иконки

Инструментом Pen Tool (P) нарисуйте пузырь цветом #adb9c4. Примените к нему несколько стилей.

Шаг 35

Создайте копию пузыря и измените её цвет на #3c8cf8. Это на случай, когда курсор мыши будет наведён на иконку.

Шаг 36

Примените следующие стили:

Шаг 37

Создайте чёрный квадрат позади иконки пузыря. Залейте его градиентом.

Шаг 38

Уменьшите Fill (заливку) фона иконки до 27%.

Шаг 39

Добавьте маску и закрасьте верхнюю часть фона.

Шаг 40

Добавьте больше иконок.

Шаг 41

Добавьте вертикальную 1-пиксельную линию цветом #3c8cf8 между первой и второй иконками. Добавьте стиль тени к линии. При помощи маски подотрите края.

Шаг 42

Добавьте больше разделительных линий.

Шаг 43. Поисковое поле

Создайте закруглённый прямоугольник с большим радиусом справа от иконок. Примените к нему несколько стилей.

Шаг 44

При помощи инструментом Rounded Rectangle Tool (U) и Ellipse Tool (U) создайте иконку лупы цветом #8696a8.

Шаг 45. Список сообщений

Создайте прямоугольник цветом #e2e4e7 и примените к нему пару стилей.

Шаг 46

Под прямоугольником нарисуйте 1-пиксельную линию цветом #a8b1ba.

Шаг 47

Создайте квадрат со скругленными углами с радиусом 3 пикселя. Примените к нему несколько стилей.

Шаг 48

Создайте скругленный квадрат цветом #202020 меньшего размера внутри белого. Примените к нему стиль тени и обводки.

Шаг 49

Вставьте профильную фотографию (аватарку) в квадраты и создайте обтравочную маску (Ctrl + Alt + G)

Шаг 50

Текстовым инструментом добавьте информацию сообщения.

Шаг 51

В правом нижнем углу области сообщения создайте круг цветом #aab7c3. Инструментом Polygon Tool (U) вырежьте звезду внутри круга.

Шаг 52

Таким же способом добавьте кнопку ответа.

Шаг 53

Все слои сообщения поместите в группу (Ctrl + G). Создайте пару копий групп и измените содержимое.

Шаг 54

Создайте копию закруглённого прямоугольника основы приложения. Измените его цвет на чёрный. Инструментом Rectangle Tool (U) создайте прямоугольник в нижней части холста и нажмите на кнопку Intersect with shape area.

Примените следующие стили:

Шаг 55

Добавьте API информацию.

Шаг 56

Создайте 12 закруглённых прямоугольников разного размера и расставьте их по кругу. Добавьте стиль Drop Shadow, чтобы создать эффект вдавленности.

Шаг 57. Полоса прокрутки

Создайте тонкий вертикальный закруглённый прямоугольник с радиусом 1 пиксель. Расположите его правым краем к направляющей.

Примените стиль обводки.

Шаг 58

Создайте закруглённый прямоугольник цветом #8b9eb3 и примените пару стилей.

Шаг 59. Больше направляющих

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

Шаг 60. Окно для сообщений

Создайте закруглённый прямоугольник с радиусом 5 пикселей цветом #e2e4e7.

Шаг 61

Создайте квадрат на левом крае прямоугольника. Поверните его на 45 градусов и нажмите на кнопку Add to shape area, чтобы соединить обе фигуры. Примените стиль тени и обводки.

Шаг 62

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

Шаг 63

Создайте маленький круг цветом #707070 в правом верхнем углу панели заголовка. Создайте два закруглённых прямоугольника и сделайте вырез. Поверните оба прямоугольника на 45 градусов. В результате получится кнопка закрытия окна в неактивном состоянии.

Шаг 64

Создайте копию кнопки и измените её цвет на #a4a4a4. Это будет состояние при наведённом курсоре.

Шаг 65

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

Примените несколько стилей:

Шаг 66

Создайте голубой закруглённый прямоугольник с радиусом 3 пикселя. Примените несколько стилей.

Шаг 67

Напишите слово «Post» на кнопке и добавьте стиль тени.

Шаг 68

Создайте копию кнопки с текстом и измените стили. Получится кнопка в состоянии при наведённом курсоре.

Шаг 69

Каждую кнопку поместите в отдельную группу. Панель слоёв всегда должна быть хорошо организована.

Шаг 70

Добавьте мигающий курсор количество символов для одного сообщения.

Шаг 71. Окно для загрузки изображений

Повторите предыдущие шаги для создания ещё одного окна.

Шаг 72

В центре окна создайте закруглённый прямоугольник с радиусом 3 пикселя цветом #d9dde1. Внутри него создайте ещё один закруглённый прямоугольник и сделайте вырез.

Шаг 73

Добавьте несколько горизонтальных прямоугольников и включите режим Subtract. Выберите все эти прямоугольники и нажмите на кнопки Distribute Vertical Center и Distribute Horizontal Center при активном инструменте Move Tool (V). Это кнопки выравнивания горизонтальных и вертикальных центров.

Шаг 74

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

Шаг 77

К пунктирной линии добавьте стиль тени.

Шаг 78

В центре создайте рамку при помощи закруглённых прямоугольников цветом #cdd2d8 с радиусом 3 пикселя.

Шаг 79

Нарисуйте узор внутри рамки при помощи инструментов Pen Tool (P) и Ellipse Tool (U).

Шаг 80

К рисунку добавьте стиль тени.

Шаг 81

Добавьте краткую инструкцию к текущему окну.

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

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».

Переведено с сайта design.tutsplus.com, автор перевода указан в начале урока.