На самом деле обе компании соревнуются в копировании концепта друг у друга, поэтому "яндексовский" вариант не так уж и сильно отличается от "гугловского". Все действия производятся в фоторедакторе Adobe Photoshop. В пошаговом уроке показаны два варианта получения границы круга методом эллиптического выделения и рисованием эллиптического объекта.
Посмотрим на донора.
Исходник (на чём будем работать):
Скриншот я сделал с обычной страницы выдачи Яндекса, лишние детали убрал при помощи выделения, пипетки (взял соседний цвет) и кисточки (закрасил соседним цветом).
Увеличивать (то есть "делать лупу") будем первое объявление, поэтому его нужно скопировать с этого скриншота в отдельный слой или файл:
Взято из демонстрационной страницы РСЯ. Права на изображения принадлежат компании Яндекс. Реклама, отражённая на скриншоте является только случайным образцом, само изображение не используется в рекламных целях.
Теперь на главном скриншоте, где было рекламное объявление, нужно нарисовать красный круг. Для него создаём новый слой в окошке Window-Layers и рисуем в нём (Ellipse Tool, клавиша U), зажав Shift, красный круг:
Затем переключаемся на Стрелку (инструмент Move Tool, клавиша V), и зажав alt, клонируем круг, при этом автоматически он создаст третий слой:
Переключаемся на этот слой и убиваем в нём цвет Яркостью/Контрастностью:
Вручную переносим белый круг на красный и чуть уменьшаем, чтобы получилась красная граница:
Сводим верхний слой с нижним через Layer-Merge Down (Ctrl-E). При этом оба круга превратятся в один слой, то есть в белый круг с красным ободом.
При помощи Magic Eraser Tool (клавиша Е) щёлкаем по белой обласи круга, то есть вырезаем его середину и делаем прозрачной:
Теперь при помощи Crop Tool (кадрирование, клавиша C) расширяем произвольно область скриншота, создаём новый слой и рисуем в нём эллиптическим выделением круг (через Shift):
Это выделение надо сохранить через Select-Save selection. Границы выделения можно обозначить направляющими, вытянув их из верхней или боковой линейки рабочего стола фотошопа:
Именно в область, обозначенную линейками мы перенесём объявление, которое "отложили в сторону" на начальном этапе и подгоним вручную за маркеры:
При этом выделение исчезнет, но на него уже наплевать, поскольку оно сохранено. Остаётся сделать Select-Load Selection (выбрать в Channel своё объявление), то есть загрузить выделение поверх этого слоя (вставленного объявления):
Затем инвертировать этой выделение через Select-Invers и нафиг удалить всё, нажав клавишу Delete:
Затем снова инвертируем выделение Select-Invers, переключаемся на инструмент эллиптического выделения (клавиша U) и правой кнопкой щёлкаем внутри круга:
В данном меню нас интересует Stroke, с помощью которого можно организовать выделение цветом, поставив в настройке толщину, скажем, 6 px:
Не забудьте снять выделение (Select-Deselect).
Теперь мы получили два красных круга, причём один с увеличенной областью. Круги, пока слои не сведены, можно двигать по всему скриншоту, как хочется. Для наглядности я сделал второй круг огромным.
Осталось их соединить красной чертой. Для этого есть специальная "рисовалка" (тоже под клавишей U, далее выбрать в верхнем меню прямую линию с толщиной соизмеримой с толщиной рамки большого круга):
Для пущего эффекта я эту линю вручную сузил возле малого круга через Edit-Transform-Skew.
В конечном итоге сводим все слои (Layer-Flatten Image) и кадрируем получившийся результат до нормальных размеров.
Результат:
Вместо линии можно использовать любую стрелку, а объявление в круге обработать каким-нибудь интересным эффектом.
Пример (лёгкое размытие основного окна + средняя прозрачность объявления):
Похожие статьи:
Дизайн скриншотов в стиле Google (в ней, кстати, описан способ добавления тени к выделению).
Комментариев нет:
Отправить комментарий