Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter средствами Photoshop


Описание урока
Программа: Adobe Photoshop
Сложность: средняя
Примерное время выполнения: 3 часа

Законченная композиция (то, что мы будем создавать)

Создание четкого интерфейса приложения Twitter. Часть 1



На этом уроке мы научимся создавать интерфейс приложения Twitter, используя стили слоя и базовые векторные фигуры. Итак, приступим!

Шаг 1 – Создаем новый документ
Начнем с создания нового документа Photoshop с размером холста 1050x700 пикселей и разрешением 72 тчк/дюйм.

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 2 – Готовим холст
Пройдите в меню Вид > Линейка (View > Ruler) или просто нажмите Ctrl + R, чтобы отобразить линейку. Кликните по появившейся линейке ПКМ и в качестве единиц пиксели.

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 3
Кликнув по линийке ЛКМ, протащите указатель мыши на холст, размещая на нем вертикальные и горизонтальные направляющие. Нам нужно обозначить область шириной 362 и высотой 589 пикселей. Внутри обозначенной области, справа и слева задайте отступ размером 7 пикселей.

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 4
Далее нам необходимо включить привязку к пикселям в опциях инструментов Прямоугольник со скругленными углами (rounded rectangle) и Прямоугольник (rectangle tool). Активируйте какой-нибудь из этих инструментов и откройте меню его опций.

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 5

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

Создание четкого интерфейса приложения Twitter. Часть 1


Шаг 6
Примените Тень (Drop Shadow) и Обводку (Stroke) со следующими настройками.

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 7 – Панель заголовка
Здесь нам снова понадобится Прямоугольник со кругленными углами (rounded rectangle tool). В верхней части интерфейса нарисуйте черный скругленный прямоугольник такой же ширины, как и первый. Создайте контур прямоугольника и установите режим Пересечения фигур (Intersect).

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 8[

Дважды кликните по слою, и примените стили слоя Внутреннее свечение (Inner Glow), Наложение градиента (Gradient Overlay), Обводка (Stroke) со следующими параметрами.

center]Создание четкого интерфейса приложения Twitter. Часть 1[/center]
Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1


Шаг 9
Нарисуйте маленький красный (#e43c22) круг. Мы используем его для создания кнопки закрытия.

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 10
Примените стили слоя Внутреннее свечение (Inner Glow), Наложение градиента (Gradient Overlay), Обводка (Stroke) со следующими параметрами.

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 11
Активируйте инструмент Перемещение (Move tool) и удерживая Alt, переместите кнопку, автоматически создавая ее дубликат. Измените цвета на желтый и зеленый. Убедитесь, что цвета в настройках стиля слоя Обводка так же изменены, в соответствии с цветами кнопок-дубликатов.


Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 12
Теперь добавим контраст кнопке “Закрыть”. Мы должны быть уверены, что пользователи правильно поймут возможные последствия нажатия этой кнопки, которая может полностью закрыть интерфейс. Для этого нарисуйте еще один маленький круг более тесного цвета поверх этой кнопки.

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 13
Нарисуйте скругленный прямоугольник такой же ширины и радиуса скругления, как и предыдущие. Расположите его под панелью заголовка.

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 14
Создайте сверху прямоугольный контур и задайте режим пересечения (Intersect).

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 15
Примените стили слоя Внутреннее свечение (Inner Glow) и Наложение градиента (Gradient Overlay).

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 16
Активируйте инструмент Линия (line tool) и прямо по нижней границе панели опций прочертите линию толщиной 1 пиксель и цвета #808f9e.

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 17
Создайте эффект вдавленного шрифта путем применения стиля слоя Тень (Drop Shadow), задав величину 1 пиксель и белый цвет.

Создание четкого интерфейса приложения Twitter. Часть 1



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

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 19
Кликните дважды по слою и примените стили слоя Наложение градиента (Gradient Overlay) и Обводка (Stroke).

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 20
Нарисуйте скругленный прямоугольник с радиусом скругления 3 пикселя и меньшего размера прямо по центру предыдущего. Цвет здесь не имеет принципиального значения.

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 21
Примените стили слоя Внутренняя тень (Inner Shadow) и Обводка (Stroke) со следующими настройками.

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 22
Поместите фотографию пользователя поверх малого скругленного прямоугольника. Нажатием Ctrl + Alt + G, преобразуйте слой в обтравочную маску. Таким образом, фотография окажется как бы внутри фигуры. При помощи клавиш Ctrl + T вы можете корректировать ее размер, а так же изменять ее положение инструментом Перемещение (Move tool)

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 23
Добавляем имя пользователя. Создаем эффект вдавленности при помощи стиля слоя Тень (Drop Shadow), задав 1 пиксель и белый цвет.

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 24
Добавьте дополнительную информацию о пользователе, применив такой же эффект вдавленности.

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 25
Прочертите линию толщиной 1 пиксель и цвета #afbac4 прямо под дополнительной информацией о пользователе. К ней тек же следует применить эффект вдавленности.

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 26
Добавляем счетчик просмотров. Шрифт Armata font. Так же имитируем вдавленность.

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 27 – Кнопка “Обновить”
Нарисуйте маленький прямоугольник со скругленными углами радиусом 2 пикс., цвета #eef1f4. Разместите его в правом верхнем углу интерфейса, слева от направляющей. Примените следующие стили слоя.

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 28
По центру предыдущей фигуры нарисуйте еще один черный прямоугольник. Затем, нарисуйте прямоугольный контур и задайте режим Вычитания из области фигуры (Subtract from Shape)

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 29
Рисуем простую иконку пера, взяв за основу прямоугольник. Сначала рисуем главный большой прямоугольник, задав режим Вычитания из области фигуры (Subtract from Shape). Затем, рисуем еще один прямоугольник, который будет корпусом пера. Далее, рисуем прямоугольник, и поворачиваем его на 45 градусов. Наконец, рисуем еще один прямоугольник в режиме Вычитания из области фигуры (Subtract from Shape), чтобы вырезать корпус пера.

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 30
Повернув только что созданную иконку пера, расположите ее поверх последнего прямоугольника.

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1



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

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 32
Примените стили слоя Внутреннее свечение (Inner Glow) и Наложение градиента (Gradient Overlay) со следующими настройками.

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 33
Прочертите линию шириной 1 пиксель и цвета #a8b1ba под только что нарисованным прямоугольником. Примените 1-пиксельную Тень (Drop Shadow).

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 34
При помощи инструмента Перо (Pen tool) нарисуйте от руки пузырь. Задайте цвет #adb9c4. Примените стили слоя Внутренняя тень (Inner Shadow), Внешнее свечение (Outer Glow), Наложение градиента (Gradient Overlay) со следующими параметрами.

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 35
Нам нужно различать состояние кнопки: для обозначения ее активного состояния продублируйте ее, и измените цвет на #3c8cf8.

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 36
Примените стили слоя Тень (Drop Shadow), Внешнее свечение (Outer Glow), Внутреннее свечение (Inner Glow) Наложение градиента (Gradient Overlay).

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 37
Под пузырем нарисуйте еще один черный прямоугольник. Примените к нему стиль слоя Наложение градиента (Gradient Overlay).

Создание четкого интерфейса приложения Twitter. Часть 1

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 38
Уменьшите непрозрачность заливки (Fill) до 27%.

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 39
Создайте слой-маску и прокрасьте черным цветом верхнюю половину фигуры.

Создание четкого интерфейса приложения Twitter. Часть 1



Шаг 40
Этим же методом создайте еще какие-нибудь иконки.

Создание четкого интерфейса приложения Twitter. Часть 1


Продолжение следует ...

Ключевые теги: уроки примеры photoshop онлайн бесплатно


Ретушируем фото

Вас может также заинтересовать:

21 августа 2017

Расширенные творческие возможности и более компактный корпус - изящная компактная фотокамера с новым, расширенным набором функций выполнена в легком алюминиевом корпусе и имеет уникальный объектив категории AA (Advanced Aspherical)

21 августа 2017

Дата анонса: 2011/10/18 Эффективное разрешение, МП: 18.1 Диагональ ЖК-дисплея, дюймы: 3.2 Вес с батареей и картой памяти, г: 0

21 августа 2017

Дата анонса: 2008/01/22 Эффективное разрешение, МП: 8 Диагональ ЖК-дисплея, дюймы: 2.5