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

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

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

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

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

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

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

Шаг 3

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

Шаг 4

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

Шаг 5

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

Шаг 6

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

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

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

Шаг 8

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

Шаг 9

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

Шаг 10

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

Шаг 11

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

Шаг 12

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

Шаг 13

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

Шаг 14

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

Шаг 16

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

Шаг 17

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

Шаг 18

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

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

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

Шаг 20

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

Шаг 21

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

Шаг 22

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

Шаг 23

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

Шаг 24

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

Шаг 25

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

Шаг 26

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

Шаг 27

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

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

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

Шаг 29

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

Шаг 30

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

Шаг 31

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

Шаг 32

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

Шаг 33

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

Шаг 34

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

Шаг 35: Иконки

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

Шаг 37

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

Шаг 38

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

Шаг 39

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

Шаг 40

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

Шаг 41

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

Шаг 42

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

Шаг 43

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

Шаг 44

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

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

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

Шаг 46

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

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

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

Шаг 48

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

Шаг 49

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

Шаг 50

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

Шаг 51

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

Шаг 52

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

Шаг 53

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

Шаг 54

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

Шаг 55

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

Шаг 56

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

Шаг 57

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

Шаг 58

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

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

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

Шаг 60

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

Шаг 61

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

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

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

Шаг 63

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

Шаг 64

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

Шаг 65

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

Шаг 66

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

Шаг 67

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

Шаг 68

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

Шаг 69

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

Шаг 70

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

Шаг 71

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

Шаг 72

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

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

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

Шаг 74

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

Шаг 75

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

Шаг 76

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

Шаг 77

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

Шаг 78

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

Шаг 79

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

Шаг 80

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

Шаг 81

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

Final Image

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

Вот, что у нас должно получиться:

Для урока нам понадобится:

• Solidified lava — CAStock
• Sea, Greece — evza11
• Sky 17 — sacral-stock
• Lake 62 — raindroppe
• crow 1 — peroni68
• Rock stock PirateLotus-Stock
• Pink Dress 1 Kuoma-stock
• Star Brushes kuschelirmel-stock

Шаг 1 — создаём новый документ

Создаем новый файл с шириной 3500 px и высотой 4500 px разрешение 300 dpi. Задний фон белый.

Шаг 2. Создание заднего фона

.

Для начала откроем изображение Lake 62 в Фотошопе. Мы будем работать с этим изображением, поэтому необходимо его перенести на основной холст. Щелкните на Lake 62 и нажмите V для активации Move Tool (Перемещение). Щелкаем левой кнопкой мыши на изображение и перетаскиваем изображение на основной холст, меняем название на "фон".

Далее откроем изображение Solidified lava в Фотошопе. Мы будем работать с этим изображением, поэтому необходимо его перенести на основной холст. Щелкните на Solidified lava и нажмите V для активации Move Tool. Щелкаем левой кнопкой мыши на изображение и перетаскиваем изображение на основной холст, меняем название на "фон1".

Результат должен быть похож на рисунок, приведенный ниже:

Сейчас с помощью pen tool (Перо) выделяем область вокруг изображения и удаляем выделенную область, как это показано на рисунке.

Результат должен быть похож на этот:

Далее настраиваем Hue/Saturation (Цветовой тон/Насыщенность) слоя, для этого заходим в Create New Fill/Adjustment (Слой — Новый корректирующий слой). Щелкаем левой кнопкой мыши между двумя слоями («фон1» слой и Hue/Saturation) и зажимаем Alt, чтобы сделать маску.

В Hue/Saturation прописываем следующие настройки:

Должно получиться следующее:

Далее настраиваем Brightness/Contrast (Яркость/Контрастность) слоя, для этого заходим в Create New Fill/Adjustment (Слой — Новый корректирующий слой). Щелкаем левой кнопкой мыши между двумя слоями (Цветовой тон/Насыщенность и Яркость/Контрастность) и зажимаем Alt, чтобы сделать маску.

В Brightness/Contrast прописываем следующие настройки:

Должно получиться следующее:

Далее активируем Erase tool (Ластик) (E) со следующими настройками:

• Brush size: 400px
• Hardness: 0%
• Opacity: 40%
• Flow: 100%

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

Должно получиться следующее

Далее активируем pen tool (Перо), чтобы обвести область, как показано на рисунке, выделенную область удаляем:

Мы должны получить похожий результат:

Шаг 3: Добавляем море

Для начала откроем the Sea, Greece stock в фотошопе.

Мы будем работать с этим изображением, поэтому необходимо его перенести на основной холст. Щелкните на Sea, Greece и нажмите V для активации Move Tool. Щелкаем левой кнопкой мыши на изображение и перетаскиваем изображение на основной холст, меняем название слоя на "море".

Должно получиться как на картинке ниже:

Далее активируем Transform tool (Ctrl/Cmd +T), выбираем слой с «морем» и изменяем размеры, как показано на картинке: (перетягиваем обведенный квадрат в направлении стрелки).

Должен получиться следующий результат:

Еще раз активируем Transform tool (Ctrl/Cmd +T), выбираем слой с «морем» и изменяем размеры, как показано на картинке (перетягиваем обведенный прямоугольник в направлении стрелки).

Должен получиться следующий результат:

Активируем Rectangular Marquee tool (m), выбираем область как на картинке, затем активируем Transform tool (Ctrl/Cmd +T), (перетягиваем выделенный прямоугольник в направлении стрелки).

Нажимаем Enter

Получаем результат как на картинке:

Создаем Hue/Saturation корректировочный слой с помощью Create New Fill/Adjustment. Щелкаем левой кнопкой мыши между слоев и зажимаем Alt (слой «море» и Hue/Saturation) , чтобы создать маску:

В окне Hue/Saturation ставим следующие значения:

Должен получиться похожий результат:

Сейчас изменим Brightness/Contrast (Яркость/Контрастность) слоя, заходим в Create New Fill/Adjustment. Далее щелкаем левой кнопкой мыши между слоев и зажимаем Alt (слой «море» и Brightness/Contrast) , чтобы создать маску:

В окне Brightness/Contrast ставим следующие значения:

Должен получиться похожий результат:

Изменим Hue/Saturation слоя, заходим в Create New Fill/Adjustment. Далее щелкаем левой кнопкой мыши между слоев и зажимаем Alt (слой «море» и Hue/Saturation) , чтобы создать маску:

В окне Hue/Saturation проставляем следующие значения:

Результат должен получиться как на картинке ниже:

Шаг 4: Добавляем небо

Для начала откроем Sky 17 stock в фотошопе.

Мы будем работать с этим изображением, поэтому необходимо его перенести на основной холст. Щелкните на Sky 17 и нажмите V для активации Move Tool. Щелкаем левой кнопкой мыши на изображение и перетаскиваем изображение на основной холст, меняем название слоя на "небо".

Должен получиться похожий результат:

Изменяем наложение слоя с “Normal” (Нормальный) на "Overlay"(Наложение).

Уменьшаем opacity (Непрозрачность) до 65%.

Должен получиться похожий результат:

Далее активируем Erase tool(Ластик) (E) со следующими настройками:

• Brush size: 400px
• Hardness: 0%
• Opacity: 40%
• Flow: 100%

Используем ластик (eraser tool), чтобы стереть выделенную область.

Должен получиться похожий результат:

Сейчас изменим Brightness/Contrast (Яркость/Контрастность) слоя, заходим в Create New Fill/Adjustment. Далее щелкаем левой кнопкой мыши между слоев и зажимаем Alt (слой «море» и Brightness/Contrast) , чтобы создать маску:

В окне Brightness/Contrast ставим следующие значения:

Должен получиться похожий результат:

Сейчас создадим новый корректировочный слой Curves (Кривые), который можете найти, нажав на Create New Fill or Adjustment layer в окне слоя. Щелкаем левой кнопкой мыши между слоев и зажимаем Alt (слой «небо» и Curves) , чтобы создать маску:

В окне Curves ставим следующие значения:

Должен получиться похожий результат:

Сейчас создадим корректирующий слой Brightness/Contrast . Щелкаем левой кнопкой мыши между слоев и зажимаем Alt (слой «небо» и Brightness/Contrast) , чтобы создать маску:

В окне Brightness/Contrast ставим следующие значения:

Должен получиться похожий результат:

Активируем Brush tool (Кисть) (B) с настройками, приведенными ниже: (Используем мягкую, круглую кисть и рисуем, как показано на рисунке)

• Brush size: 200px
• Hardness: 0%
• Opacity: 40%
• Flow: 100%
• Color: #FFFFF

Должен получиться похожий результат:

Опять активируем Brush tool (B) с настройками, приведенными ниже. Используем мягкую, круглую кисть и рисуем, как показано на картинке.

• Brush size: 600px
• Hardness: 0%
• Opacity: 40%
• Flow: 100%
• Color: #FFFFF

Должен получиться похожий результат:

По материалам: Create this Magical Light Beam Photo Manipulation in Photoshop

Скачать бесплатно макет футболок

Качественные кнопка Лайка для FB. Бесплатный для использования. Поставляются в PSD высокого разрешения.

Скачать кнопки Like для Facebook

Предлагаем вам скачать бесплатный набор иконо для web-сервисов.  Иконки беслплатны для частного и коммерческого использования. В архиве вы найдете PSD и PNG-файлы.

Скачать бесплатные иконки веб-сервисов

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

Скачать набор иконок социальных сервисов

Организовываете вечеринку? Возможно этот шаблон будет вам полезен. Шаблон бесплатен для частного и коммерческого использования.

Скачать бесплатный шаблон флаера в PSD

Представляем вам подборку из 24 качественных бесплатных стилей для Adobe Photoshop. Стили бесплатны для личного и коммерческого использования.

Скачать бесплатно 24 стиля для Adobe Photoshop

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

Что в архиве: PSD файл (все на слоях, легко редактируется) и JPG-превью в высоком разрешении.

Скачать бесплатно шаблон стикеров Comming Soon

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

Что в архиве: PSD файл (все на слоях, легко редактируется) и JPG-превью в высоком разрешении.

Скачать бесплатно шаблон подарочных карт