Как выделить паттерн

паттерн на разных фонахПри создании красивого дизайна, обязательно используются разные паттерны, которые ложатся в основу заднего фона. Лучше всего подойдут паттерны с прозрачным задним фоном, но может возникнуть ситуация, что вы владеет красивым паттерном, только фон у него красный, синий или зелёный. Что же делать? Как отделить сам рисунок от ненужного цвета? Сегодня мы хотели рассказать как.

Предположим у вас есть такой паттерн. Единственное НО, у него серый фон.паттерн

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

.pattern {
	background-image: url(pattern.png);
	background-color: grey;
}

Теперь единственное, что остаётся, это разделение рисунка паттерна от фона.

Для этого откроем рисунок в photoshop.

1. Сделаем рисунок чёрно-белым (Image > Adjustments > Destaturate)

2. Теперь поработаем немного с уровнями. Включим панель уровней (Image > Adjustments > Levels) панель уровней

Передвиньте тумблеры таким образом, чтобы задний фон стал совершенно белым.белый фон

3. Инвертируем получившийся рисунок (Image > Adjustments > Invert) Выделите всё и скопируйте.

Откройте панель Каналов (Channels) и добавьте в нём ещё один канал. После вставьте скопированный рисунок в новый канал.инвертированный паттерн

4. Вернёмся в панель слоёв. Здесь создадим новый слой.

Переходим Selection > Load Selection и выбираем наш созданный канал.  Заполним выделение чёрным цветом.

5. Теперь вы можете поэкспериментировать с прозрачностью самого паттерна, установив те значения которые захотите.прозрачность паттерна

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

Урок написан Ником Ла.



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

Ваш e-mail не будет опубликован. Обязательные поля помечены *