Дополнения

Бесплатная рассылка

Вы будете получать ссылки на свежие видеоуроки по фотошопу совершенно бесплатно

крупнейшая в мире социальная сеть пользователей Adobe Photoshop

211 202 чел. 401 674 работы 4 107 уроков
  • Обучайтесь и совершенствуйтесь
  • Разместите своё портфолио
  • Участвуйте в конкурсах
  • Подписывайтесь и оценивайте
  • Комментируйте и общайтесь
Присоединиться

Сложность: Сложная

Создаём интерфейс для twitter-приложения в Фотошоп - Часть II

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

Первая часть урока

Продолжим!

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

Шаг 44. Активируем Move Tool (Перемещение) (V), зажимаем клавишу Alt и тянем линию, чтобы ее дублировать. Располагаем ее между иконками.

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

Шаг 46. Внутри области поиска комбинируем окружности и закругленный прямоугольник, чтобы нарисовать иконку поиска цветом #8696a8.

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

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

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

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

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

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

Шаг 53. В нижнем правом углу области с твитом рисуем окружность цветом #aab7c3. Затем рисуем звездочку с помощью Polygon Tool (Многоугольник) (U) и устанавливаем режим на 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". Применяем эффект высокой печати с помощью стиля слоя Drop Shadow (Тень).

Шаг 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. Добавляем Drop Shadow (Тень).

Шаг 81. Добавляем короткую инструкцию и применяем к ней эффект высокой печати.

Финальный результат

Автор: Mohammad Jeprie

Комментарии 22

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты

Урок очень полезный, спасибо.

Almiz, спасибо большое,очень рада окончанию урока)

Спасибо! Урок очень понравился!

Урок замечательный: проработана каждая деталь, каждой мелочи уделили максимум внимания!Побольше бы таких понятных уроков!Огромное спасибо за перевод урока!Желаю вам вдохновения, ребята!

Отличный туториал! много полезного!))

Понятия не имею как пользоваться всяческими веб-красотами, но урок сделать захотелось. Спасибо за помощь модераторам.

фууууууууууф, наконец закончил

Спасибо за урок, много что нового узнал.
Но правда задолбался=))

Слишком много вектора.
а так урок не плох)

Спасибо! Очень понравился урок!

сделал но морального удовлетворения не получил так себе урок

Спасибо за урок, но я решил интерфейс Гугл хрома сделать с небольшими изменениями :) Только качество подпортилось изображения, сжал как мог, это прискорбно.

Макс, спасибо!!!
Отличный урок! Такой подробный...

Урок отличный, но было бы еще лучше если бы было еще и видео по этому уроку и другим тоже. А то у меня терпения не хватает все это читать, ну ОООООЧЕНЬ много букОв. А видео глянул и все понятно.

Добавить комментарий / работу

Новые работы пользователей

{{work.views}}

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска, или сбросить фильтры


Смотреть все работы

Наверх

Авторизация

Забыли?

Регистрация

Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
18+
Работа имеет содержимое для 18+ лет
Мне нравится {{work.likes}} {{work.views}} Жалоба

Оставить комментарий {{work.childs.length || 0}}

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты
Войти Авторизуйтесь, чтобы комментировать работы, ставить лайки и просто быть участником нашего дружного сообщества!
Сначала популярные Сначала старые Сначала новые
Добавить комментарий
Разбор работы по просьбе автора:
Популярные работы автора:
Курсы и уроки автора:
Онлайн-курс {{work.relless.type}}

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:


Название:
{{name}}
Описание:

{{text}}

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

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

Не более десяти тэгов на одну работу

Вашу работу разберет один из экспертов проекта «Фотошоп-мастер». Это позволит вам увидеть свои ошибки и сделать следующую работу лучше. Разбор будет сделан в комментариях к работе и будет виден всем пользователям.

Пункт «18+» допустимо ставить только для работ, действительно содержащих элементы, которые не должны видеть несовершеннолетние: обнаженка, сцены жестокости, и т.д. Запрещается ставить такую метку на обычные работы. За подобное поведение у пользователя будет блокироваться возможность добавления новых работ. Все понятно, больше не показывать

После добавления работы:


Запланировать публикацию

Запланировать

Правила загрузки работ на «Фотошоп-Мастер»

  • 1. На сайте запрещается размещать изображения, которые содержат нецензурную лексику, угрозы, оскорбляет, унижает чье-либо достоинство, а также явно или косвенно нарушает законодательство Российской Федерации.

  • 2. Сайт photoshop-master.ru приветствует соблюдение авторских прав. В случае возникновения споров или разногласий Администрация сайта приложит все усилия для разрешения сложившейся ситуации.

  • 3. Правило третье. Публикуемые работы не должны содержать изображения, связанные с наркотиками , порнографического содержания, сцены насилия.

Подробная информация о правилах публикации https://photoshop-master.ru/blog/post/rules