Рисуем прямоугольники — 2

В прошлый раз я говорил о том, что мы применим наши знания для оформления скриншотов (и рисования LED-индикаторов).

Примеры я стараюсь брать из жизни, а конкретно на этом можно рассмотреть сразу несколько векторно-растрово-прямоугольных нюансов.

Но сначала — мотивация.

Допустим вы делаете лендинг или веб-презентацию некого сайта. Соответственно, вам нужно показать хотя бы один скриншот. («Лучше один раз увидеть...»). Первоначальный вариант выглядит как-то так:

Скриншот смотрится немного... чужеродно. В этом месте в поисках вдохновения идём на парочку топовых лендингов. Например, на сайты Apple и Microsoft.

Ага! Вот в чём дело: скриншоты у них всегда обрамлены настоящими экранами. Кто-то скажет — отрыжка скевоморфизма, мы скажем: «Не ломай кайф!»

Кстати, если посмотреть при помощи F12, как это свёрстано, окажется, что иногда рамка и экран разнесены по двум разным .png-файлам. Например, так делает Apple.

Попробуем повторить. Самое простое — купить на фотостоках (photo stocks) подходящую фотографию монитора, планшета или ноутбука. Или поискать на свободных стоках. Но максимум, что нам там светит — синтетика (никто не будет бесплатно раздавать высококачественное обработанное фото). К счастью, современные девайсы изначально выглядят так, как будто состоят из одних градиентов и чистых цветов. Поэтому синтетическое изображение нас вполне устроит:

Про подгонку пропорций, изменение размеров и ресэмплинг, а также совмещение слоёв поговорим в следующий раз, а пока перейдём к результату:

Стало немного лучше, правда?

В качестве маленького штриха, добавим к монитору LED-индикатор. Сегодня остановимся на этом подробнее, применив ранее полученные знания.

Индикатор можно сделать прямоугольником хоть в векторном стиле, хоть в растровом — сделаем в растровом, это быстрее. Откроем изображение с монитором, и создадим новый слой: Layer → New → Layer... (с параметрами по умолчанию). Находясь на этом слое (переключение произойдёт автоматически), выберем инструмент прямоугольного выделения (Rectangular Marquee Tool), несколько раз нажмём Ctrl + Plus, чтобы увеличить масштаб, и выделим область под будущий индикатор:

Я выбрал размер 3 x 7 пикселей. Теперь зальём эту область условно-зелёным. (Я ранее говорил, что со слоями удобно работать в условных цветах).

Снимаем выделение (Ctrl + D) и, придерживаясь общего синтетического стиля, изобразим огонёк градиентной заливкой: Layer → Layer Style → Gradient Overlay....

Выберем параметры как на картинке: направление градиента сверху вниз (-90°) и выравнивание по слою (Align with Layer). Что касается самого градиента, дважды щёлкнем по комбобоксу и настроим его следующим образом:

У нас три опорных точки:

  • 0% — #0c9248
  • 45% — #0db23b
  • 100% — #fdfd00

Промежуточные опорные точки задаются простым щелчком, а куда вводить хекс-значение в диалоге выбора цвета вы легко догадаетесь сами. (Я в вас верю!)

Вот результат:

На этой картинке обратите внимание на 2 вещи:

  • Окно со слоями и стилями справа. Именно там мы всегда сможем включить/выключить/поменять как сами слои, так и их стили.
  • Название файла: frame.psd. Слоевая информация будет потеряна при сохранении в .png, а значит нужно сначала сохранить фотошоповский исходник в родном формате .psd, а только потом сохранять его как .png.

Это был прямоугольник LED-индикатора. Он же на финальном изображении:

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

0
7 комментариев
Написать комментарий...
Капибары

Мама мы в телевизоре

Ответить
Развернуть ветку
Фотошоп для программистов
Автор

Когда не телевизор красит тебя, а ты красишь телевизор (во всех смыслах).

Ответить
Развернуть ветку
Искренний Филипп

давай чёнить посложнее

Ответить
Развернуть ветку
Тёплая Грелочка

Всегда, когда можно использовать векторный объект, надо использовать векторный объект.

Ответить
Развернуть ветку
Фотошоп для программистов
Автор

Разовьёте мысль насчёт «всегда»?
Растровым тут, по сути, является только прямоугольный набор 100% непрозрачных пикселей, задающих оверлей слоя, а он не подвержен алиасингу. Способ рендеринга этого оверлея — слоевые стили — векторные в любом случае.
Почему лично я предпочитаю задавать оверлей попиксельно — из-за интерфейса (UI). Залитая область слоя при ресайзинге всегда округляется до пикселя, что очень удобно. Имея же дело с объектом, созданным при помощи Rectangle Tool, при большом увеличении (1600:1) его можно ресайзить несколько раз, при этом передвигая границу в пределах одного пикселя. Конечно, после нажатия Apply, результат тоже округлится, но даже фон-шахматка не позволяет чётко видеть, что ты увеличил ширину на 2 пикселя (если таков был замысел).
Но возможно, я просто что-то не знаю. Этот подсайт как раз и был создан с целью обмена опытом между инженерами. (В художественном смысле он ни на что не претендует).

Ответить
Развернуть ветку
Тёплая Грелочка

Погугли "неразрушающее редактирование". Если тебе потом нужен чуть другой цвет или чуть другой размер или чуть другая форма (скруглить углы, ой, нет, не так сильно) - с растром это мучительно.

Ну и по логике: если тебе нужен зелёный квадрат, рисуй зелёный квадрат, а не "матрицу пикселей прямоугольной формы, цвет каждого из которых - зелёный".

Про алиасинг не понял, но если надо размытие краев - конверт в смарт-объект и gaussian blur=0.1.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Фотошоп для программистов
Автор
Про алиасинг не понял

Я к тому, что очень трудно провести *с прямоугольником* разрушающее редактирование. Для этого его надо повернуть на угол, не кратный 90°, а потом скейлить. Об этом я в прошлый раз написал достаточо подробно.

Ну и по логике: если тебе нужен зелёный квадрат, рисуй зелёный квадрат, а не "матрицу пикселей прямоугольной формы, цвет каждого из которых - зелёный".

Вообще-то, я пишу, что если нужен зелёный квадрат, рисуй *непрозрачный* квадрат, и задавай его цвет слоевыми стилями. Ибо это удобнее. Ну элементарный пример: появился второй квадрат, хочется сделать того же цвета, что удобнее: drag-n-drop'ом скинуть цвет с одного квадрата на другой, или возиться с диалогами?
А через свойства фигур есть смысл задавать то, что что через стили нельзя задать вообще. Пример, опять же, я приводил: dashed- и dotted-рамки.
Фотошоп достаточно умный инструмент, чтобы во многих случаях нивелировать разницу между вектором и растром.

Ответить
Развернуть ветку
Читать все 7 комментариев
null