Сайт ищет новых владельцев. Пишите на e2network@yandex.ru с темой "Покупка psd.by"

Уроки Photoshop: Создаем интефейс для твиттер приложения в Фотошопе

Категория: Создание шаблонов сайтов|Уроки Photoshop

27 Апр 2012

Описание урока:

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

Вот, что у нас должно получиться в конечном результате:

clip_image001

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

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

Создайте новый файл с размером 1,050 x 700 пикселей и разрешением 72 dpi

clip_image002

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

Нажимаем View > Ruler (Просмотр – Линейка) или зажимаем Ctrl + R для просмотра линейки. Жмем правой кнопкой мышки по линейке и выбираем Pixels(Пиксели), чтобы изменить единицы измерения.

clip_image003

Шаг 3

Перетягиваем мышью от линейки к полотну, чтобы образовалась вертикальная или горизонтальная направляющие. Нам нужно пространство с шириной 362 px и высотой 589 px. Добавляем внутренние направляющие, с правой и левой стороны, шириной 7 px.

clip_image004

Шаг 4

Наш дизайн должен быть четким. Чтобы это сделать, нам необходимо активировать функцию Snap to Pixels (Привязать к пикселю) у инструментов rounded rectangle(закругленный прямоугольник) и rectangle (прямоугольник). Активируем инструмент и выбираем опцию на панели параметров.

clip_image005

Шаг 5

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

clip_image006

Шаг 6

Добавляем Drop Shadow (Тень) и Stroke (Обводка) со следующими значениями:

clip_image007

clip_image008

clip_image009

Шаг 7. Полоса с заголовком

Активируем закругленный прямоугольник с радиусом 5 px. Рисуем черный закругленный прямоугольник с такой же шириной в верхней части интерфейса. Меняем режим прямоугольника на Intersect (Область пересечения фигур).

clip_image010

Шаг 8

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

clip_image011

clip_image012

clip_image013

clip_image014

Шаг 9

Рисуем маленький круг с цветом #e43c22. Мы будем использовать его для кнопки закрытия.

clip_image015

Шаг 10

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

clip_image016

clip_image017

clip_image018

Шаг 11

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

clip_image019

Шаг 12

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

clip_image020

Шаг 13

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

clip_image021

Шаг 14

Создаем прямоугольный контур и изменяем его режим на Intersect (Область пересечения фигур).

clip_image022

Шаг 16

Добавляем стиль слоя Inner Glow(Внутреннее свечение) и Gradient Overlay(Перекрытие градиентом).

clip_image023

clip_image024

clip_image025

Шаг 17

Активируем line tool (Линия) и на панели параметров устанавливаем ширину 1 px. Рисуем линию с цветом #808f9e внизу справа интерфейса.

clip_image026

Шаг 18

Добавляем эффект высокой печати с помощью Drop Shadow(Тень) белой тени размером 1 px.

clip_image027

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

Теперь добавим область, в которой будет размещен профиль пользователя. Рисуем белый прямоугольник с закругленными краями с радиусом 5 px. Убедитесь, что он прикреплен к направляющей линии, которую мы сделали в начале урока.

clip_image028

Шаг 20

Дважды кликаем по слою и добавляем Gradient Overlay(Перекрытие градиентом) и Stroke(Обводка).clip_image029

clip_image030

Шаг 21

Рисуем закругленный прямоугольник поменьше с радиусом 3 px в центре предыдущего. Вы можете выбрать любой цвет.

clip_image031

Шаг 22

Добавляем Inner Shadow(Внутреннюю Тень) and Stroke(Обводка) со следующими параметрами.

clip_image032

clip_image033

clip_image034

Шаг 23

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

clip_image035

Шаг 24

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

clip_image036

clip_image037

Шаг 25

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

clip_image038

clip_image039

Шаг 26

Рисуем линию с цветом #afbac4 и размером 1 px под биографией. Добавляем стиль слоя Drop Shadow (Тень), чтобы придать эффект высокой печати.

clip_image040

clip_image041

Шаг 27

Добавляем счетчик твитов с помощью шрифта Armata font. Добавляем эффект высокой печати.

clip_image042

clip_image043

Шаг 28: Кнопка обновления

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

clip_image044

clip_image045

clip_image046

clip_image047

clip_image048

Шаг 29

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

clip_image049

Шаг 30

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

clip_image050

Шаг 31

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

clip_image051

clip_image052

Шаг 32

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

clip_image053

Шаг 33

Добавляем Inner Glow(Внутренне свечение) и Gradient Overlay(Перекрытие градиентом) со следующими значениями.

clip_image054

clip_image055

clip_image056

Шаг 34

Рисуем линию размером 1 px внизу фигуры с цветом #a8b1ba. Добавляем белую Drop Shadow(Тень) размером 1 px.

clip_image057

clip_image058

Шаг 35: Иконки

Используем Pen tool(Перо), чтобы вручную нарисовать иконку облачка. Выбираем цвет #adb9c4. Добавляем стиль слоя Inner Shadow(Внутренняя тень), Outer Glow(Внешнее свечение), and Gradient Overlay(Перекрытие градиентом).

clip_image059

clip_image060

clip_image061

clip_image062

clip_image063

Шаг 37

Также нам нужно создать изменяемые значки при наведении на них курсора мышки. Дублируем облачко и меняем его цвет на #3c8cf8.

clip_image064

Шаг 38

Добавляем Drop Shadow(Тень), Outer Glow(Внешнее Свечение), Inner Glow(Внутреннее свечение), and Gradient Overlay(Перекрытие градиентом).

clip_image065

clip_image066

clip_image067

clip_image068

Шаг 39

Рисуем черный прямоугольник за иконкой облачка. Добавляем Gradient Overlay(Перекрытие градиентом).

clip_image069

clip_image070

Шаг 40

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

clip_image071

Шаг 41

Добавляем маску слоя и рисуем черным в верхней части.

clip_image072

Шаг 42

Повторите эти шаги, чтобы сделать больше иконок.

clip_image073

Шаг 43

Добавляем вертикальную линию с размером 1 px и цветом #aab6c2 между первой и второй иконками. Добавляем Drop Shadow(Тень), чтобы придать эффект высокой печати. Добавляем маску слоя и рисуем выше и ниже, чтобы она плавно переходила в фон.

clip_image074

clip_image075

Шаг 44

Зажимаем Alt и перетягиваем линию, чтобы сделать ее дубликаты. Располагаем их между остальными иконками.

clip_image076

Шаг 45: Строка поиска

Активируем закругленный прямоугольник с большим радиусом. Рисуем поисковик напротив последней иконки. Добавляем Drop Shadow(Тень), Inner Shadow(Внутренне свечение), Outer Glow(Внешнее свечение), и Stroke(Обводка).

clip_image077

clip_image078

clip_image079

clip_image080

clip_image081

clip_image082

Шаг 46

Внутри поисковика комбинируем окружности и закругленные прямоугольники, чтобы нарисовать иконку поиска.

clip_image083

Шаг 47: Список твитов

Рисуем прямоугольную фигуру с цветом #e2e4e7. Добавляем Inner Glow (Внутреннее свечение) и Gradient Overlay (Перекрытие градиентом).

clip_image084

clip_image085

clip_image086

Шаг 48

Рисуем линию 1 px внизу фигуры с цветом #a8b1ba и добавляем эффект высокой печати.

clip_image087

clip_image088

Шаг 49

Рисуем белый закругленный прямоугольник с радиусом 3 px. Добавляем Gradient Overlay (Перекрытие градиентом) и Stroke (Обводка).

clip_image089

clip_image090

clip_image091

clip_image092

Шаг 50

Внутри фигуры рисуем закругленный прямоугольник меньшего размера с радиусом 1 px и цветом и цветом #202020. ДобавляемDrop Shadow (Тень) и Stroke (Обводка).

clip_image093

clip_image094

clip_image095

clip_image096

Шаг 51

Вставляем аватар в фигуру закругленного прямоугольника. Жмем CTRL+ALT+G, чтобы конвертировать слой в обтравочную маску. Теперь изображение не выходит за границы прямоугольника.

clip_image097

Шаг 52

Используем Type Tool (Текст), чтобы добавить имя пользователя, содержание твита и время. Убедитесь, что ссылки выделены в вашем аккаунте выделены.

clip_image098

Шаг 53

В нижнем правом углу области с твитом рисуем окружность цветом #aab7c3. Затем рисуем звездочку с помощью Polygon Tool (Многоугольник) и устанавливаем режим на Subtract (Вычесть). Мы будет использовать этот значок для отметки понравившихся твитов.

clip_image099

Шаг 54

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

clip_image100

Шаг 55

Выделяем все слои относящиеся к твиту и жмем CTRL+G, чтобы объединить их все в одну группу. Дублируем группу. Редактируем аватар и текст, чтобы создать новый твит.

clip_image101

Шаг 56

Дублируем базовый прямоугольник приложения и меняем его цвет на черный. На него добавляем прямоугольник и меняем режим на Intersect(Область пересечения фигур). Добавляем Inner Glow (Внутреннее свечение),Gradient Overlay (Перекрытие градиентом) и Stroke (Обводка).

clip_image102

clip_image103

clip_image104

clip_image105

clip_image106

Шаг 57

Добавляем информацию API на нижней панели. Добавляем эффект высокой печати с помощью Drop Shadow (Тень).

clip_image107

clip_image108

Шаг 58

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

clip_image109

Шаг 59: Полоса рокрутки

Рисуем длинный белый закругленный прямоугольник с радиусом 1 px. Прикрепляем его к направляющей полосе. Добавляем Stroke(Обводка).

clip_image110

clip_image111

Шаг 60

Рисуем закругленный прямоугольник поменьше с таким же радиусом. Устанавливаем цвет на #8b9eb3 и добавляем стили слоя Inner Glow (Внутреннее свечение) и Stroke (Обводка).

clip_image112

clip_image113

clip_image114

Шаг 61

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

clip_image115

Шаг 62: Окно статуса

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

clip_image116

Шаг 63

Добавим прямоугольный контур в левой части окна. Жмем Ctrl+T и поворачиваем на 45 градусов. Убедитесь, что режим контура установлен на Add to Shape (Добавить к области фигуры). Добавим стиль слоя Drop Shadow(Тень) и Stroke(Обводка).

clip_image117

clip_image118

clip_image119

clip_image120

Шаг 64

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

clip_image121

clip_image122

clip_image123

clip_image013[1]

clip_image124

Шаг 65

Рисуем небольшую окружность в правом верхнем углу панели заголовка. Применяем цвет #707070. Добавляем два закругленных прямоугольника в центр окружности и меняем режим на Subtract(Вычесть). Поворачиваем оба закругленных прямоугольника на 45 градусов. Эта кнопка закрытия для обычного состояния.

clip_image125

clip_image126

Шаг 66

Дублируем кнопку и меняем ее цвет на #a4a4a4. Эта кнопка закрытия будет отображаться при наведении на нее курсора мыши.

clip_image127

Шаг 67

Дублируем базовую фигуру и меняем ее цвет на черный. Добавляем прямоугольный контур в нижней области и устанавливаем его режим на Intersect (Область пересечения фигур). Добавляем Inner Glow (Внутреннее свечение), Gradient Overlay (Перекрытие градиентом) и Stroke (Обводка).

clip_image128

clip_image129

clip_image130

clip_image131

Шаг 68

Рисуем голубой закругленный прямоугольник с радиусом 3 px в правом углу интерфейса. Добавляем Inner Glow (Внутреннее свечение), Gradient Overlay (Перекрытие градиентом) и Stroke (Обводка).

clip_image132

clip_image133

clip_image134

clip_image135

Шаг 69

Пишем на кнопке текст «Post». Добавляем эффект высокой печати с помощью тени размером 1 px.

clip_image136

clip_image137

Шаг 70

Дублируем кнопку вместе с текстом. Мы сделаем еще одну, когда на нее наводят курсор мыши. Для этого нам нужно увеличить непрозрачность стиля слоя Gradient Overlay (Перекрытие градиентом) до 40%.

clip_image138

clip_image139

clip_image140

Шаг 71

Я советую вам поместить каждую кнопку в отдельную группу. Таким образом, структура слоя будет лучше организована.

clip_image141

Шаг 72

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

clip_image142

Шаг 73: Окно загрузки изображений

Повторите предыдущие шаги, чтобы нарисовать иконку загрузки.

clip_image143

Шаг 74

В центре окошка нарисуйте закругленный прямоугольник с радиусом 3 px и цветом #d9dde1. Далее добавляем маленький закругленный прямоугольный контур внутри предыдущей фигуры. Устанавливаем его режим на Subtract (Вычесть).

clip_image144

Шаг 75

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

clip_image145

Шаг 76

Повторите эти шаги, чтобы добавить вертикальные прямоугольники.

clip_image146

clip_image147

Шаг 77

Добавляем эффект высокой печати.

clip_image148

clip_image149

Шаг 78

Рисуем закругленный прямоугольник в центре окошка с радиусом 3 px и цветом #cdd2d8. Добавляем внутрь прямоугольник и устанавливаем режим на Subtract (Вычесть).

clip_image150

Шаг 79

Добавляем контур окружности и рисуем многоугольник с помощью Pen tool(Перо). Устанавите режим обеих фигур на Add to Path (Добавить к области контура).

clip_image151

Шаг 80

Добавьте тень.

clip_image152

clip_image153

Шаг 81

Добавьте коротенькую инструкцию и придайте эффект высокой печати.

clip_image154

clip_image155

Final Image

clip_image001[1]

Источник — Create a Clean Twitter App Interface in Photoshop. Перевод и творческая обработка – PSD.by.

Написать комментарий

О PSD.by

PSD.by - это сайт, полностью посвященный работе с Adobe Photoshop. Не важно кто вы - матерый волк Фотошопа или начинающий дизайнер, который только делает свои первый шаги. На нашем сайте вы найдете для себе много полезного - от простых до сложных уроков, большой каталог дополений для Photoshop.
Если Фотошоп для вас - это не просто название софта, то вы попали по адресу!

  • Pavel: Добрый день! Прошу прислать Бесплатный макет футболок [...]
  • Андрей: Добрый день! Прошу прислать Бесплатный макет футболок [...]
  • Лидия: Добрый день! Прошу прислать Бесплатный макет футболок [...]
  • andrey: Добрый день! Прошу прислать Бесплатный макет футболок [...]
  • Ваграм: Просто офигенно :) [...]
Creative Suite 5 Patterns для фотошопа Примеры работ дизайнеров Работа с фотографиями Рисование в Photoshop Создание обоев для рабочего стола Уроки Photoshop гламурные кисти для фотошопа дизайн сайтов дизайн сайтоы кисти для Photoshop новогодние стили для фотошопа обработка фото в фотошопе отделение объекта от фона в фотошопе паттерны для фотошопа пример креативных дизайнов работа с текстов в фотошоп работа с текстом работа с текстом в photoshop работа с текстурами работа с эффектами в фотошоп рамки для фото в psd релиз Photoshop скачать дополнения для photoshop скачать иконки в psd скачать иконки для фотошопа скачать кисти для фотошопа скачать паттерны для Photoshop скачать стили для Photoshop скачать тени для фотошопа скачать шаблон фото скачать шрифты для фотошопа создание баннеров в фотошопе создание коллажей в фотошопе создание макетов рекламы создание макетов сайта в фотошопе создание сайтов в фотошопе стили для фотошопа стили фотошоп тени для фотошопа травяная текстура уроки фотошоп шаблоны для коллажей шаблоны фото для фотошоп шаблоны фото для фотошопа

Это интересно!