Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Быстрый урок: создаем эффект треугольной пикселизации

2 июля 2013 | Опубликовано в Уроки | 14 Комментариев »

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

 

 

Конечный результат

(До/После)

 

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

 Шаг 2

Дважды дублируйте фоновый слой.

 Шаг 3

Активизируйте инструмент Transform (Трансформирование) (Ctrl/Cmd+T или Edit > Free Transform) и установите значение горизонтального наклона равным 45º. Это параметр, который размещен на верней панели параметров при активном инструменте. Нажмите  Enter для применения трансформации.

 Шаг 4

Переходим к Filter> Pixelate> Mosaic (Мозаика). Отрегулируйте размер ячейки, чтобы получить желаемый результат и нажмите Ок.

Шаг 5

Далее нам нужно отразить ее. Для этого активируем  инструмент Free Transform (Ctrl / Cmd + T или Edit> Free Transform) и устанавливаем в поле наклона по горизонтали значение -45 º. Нажимаем enter для применения данных настроек.

Шаг 6

Для этого слоя устанавливаем непрозрачность на 50% и выбираем средний слой. Будем делать аналогичные шаги, но с другими настройками трансформирования.

Шаг 7

С выбранным средним слоем нажимаем Free Transform Tool (Ctrl / Cmd + T или Edit> Free Transform) и устанавливаем угол наклона по горизонтали до -45 º.

Шаг 8

Снова применяем фильтр-мозаику. Для того, чтобы сделать это быстро, можно нажать комбинацию Ctrl / Cmd + F  или, перейдя в меню фильтров, выбрать в меню первый фильтр. Photoshop автоматически размещает в верхней части этого меню ваши последние использованные фильтры.

Шаг 9

С помощью инструмента Free Transform Tool (Ctrl / Cmd + T или Edit> Free Transform) верните слою его первоначальную форму, установив для угла наклона по горизонтали значение 45 º.

Шаг 10

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

Так должно выглядеть наше изображение.

Шаг 11

Если желаете использовать это изображение для бэкграунда, его эффект можно усилить с помощью экшена Instagram Video Photoshop. Для создания надписи можно использовать шрифт Abolition font.

Конечный результат

(До/После)

Автор урока - by Denny Tang
Перевод — Дежурка

Смотрите также:




Комментарии

  1. Lyurik
    Thumb up Thumb down +10

    Очень интересный эффект — обязательно попробую.

    Ответить

  2. Ant
    Thumb up Thumb down +2

    Не в первом вашем посте встречаю глаголы в инфинитиве или существительные в именительном падеже. Например здесь — «откроем любую фотография». Автоперевод, конечно, помогает, но вычитку-то хоть делайте перед публикацией.

    Ответить

    marina Ответ:

    Thumb up Thumb down 0

    спасибо вам большое за замечания. Будем работать над ошибками =)))

    Ответить

  3. Ant
    Thumb up Thumb down +4

    Как программиста меня радуют такие уроки. Иногда оч даже пригодится. Эффект сделать быстро, но результат очень сильно зависит от исходника. Дежурка порадовала.

    У меня на скорую руку получилось так:

    984400ccf262.jpg

    73210ecc0b83.jpg

    Можете пинать, но хочется видеть и ваши варианты тогда.

    Ответить

    Ant Ответ:

    Thumb up Thumb down 0

    Фотки взял первые попавшиеся из поиска.

    Ответить

    marina Ответ:

    Thumb up Thumb down 0

    Привет от Дежурки =))))

    Ответить

    nickythenick Ответ:

    Thumb up Thumb down 0

    Ок, только:

    1) фотки лучше без преобладающего неба;

    2) на второй фотке траббл с небом справа;

    3) типографика — так себе (шрифт не очень, и выравнивание букв можно было бы сделать по граням, как в примере — вышло бы опрятней).

    В целом — миленько. И тебе привет.

    Ответить

    Ant Ответ:

    Thumb up Thumb down 0

    1. С фотками можно эксперементировать до бесконечности, и это гуд.

    2. Видел, но забил.

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

    Ответить

    Ant Ответ:

    Thumb up Thumb down 0

    Про перевод в кривые, конечно, не в тему, просто наболело...

    Ответить

  4. Ant
    Thumb up Thumb down 0

    Это, кстати, полигональный арт получается даж вроде :)

    У вас и подборка на эту тему была вроде бы, не? Ссыль не могу найти

    Ответить

    Ant Ответ:

    Thumb up Thumb down 0

    А не, на хабре было, у вас только про геометрические иллюстрации.

    Ответить

  5. Ms.Maggie
    Thumb up Thumb down +11

    На досуге попробовалаtWfAWPQqGAc.jpg

    Ответить

    Ant Ответ:

    Thumb up Thumb down +1

    Считаю неуместными в данном конкретном случае деревья слева в своей обычной форме. Как аппендикс смотрятся. И по центру полупрозрачность всю красоту убивает. Ни то, ни сё, имхо, тема топика не раскрыта.

    Ответить

Оставить ответ


+ 9 = шестнадцать

Вставить изображение