Как сделать изображение треугольниками

Полигональные рисунки – это просто!

Многие из нас пускали слюни при виде этих изображений и задавались лишь одним вопросом: “Как такое сделать?”. Сейчас речь пойдет о них, да-да, это те самые изображения, составленные из множества крошечных геометрических форм, которые, объединяясь, формируют абстрактное изображение. Сегодня мы откроем вам тайну: с помощью каких инструментов и действий можно добиться такого эффекта, используя приложения Illustrator и Photoshop.

Как сделать изображение треугольниками

Вот изображение, которое мы будем создавать в этом обучающем курсе. Как видите, оно состоит из сотен геометрических фигур, которые и создают нужный нам эффект. Законченное изображение представляется очень сложным, выполнить такое, казалось бы, очень затруднительно, но на самом деле это очень легко. И, просмотрев наш урок, вы в этом убедитесь.

Как сделать изображение треугольниками

Как сделать изображение треугольниками

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

Как сделать изображение треугольниками

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

Как сделать изображение треугольниками

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

Как сделать изображение треугольниками

Как сделать изображение треугольниками

Для начала работы щёлкните по ссылке “Add 25 Vertices” и увеличьте прозрачность многоугольников, таким образом, чтобы было видно изображение внизу.

Как сделать изображение треугольниками

Растяните форму на всё изображение, чтобы максимально заполнить всю область векторными формами, щелкнув по углам картинки.

Как сделать изображение треугольниками

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

Как сделать изображение треугольниками

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

Как сделать изображение треугольниками

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

Как сделать изображение треугольниками

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

Как сделать изображение треугольниками

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

Как сделать изображение треугольниками

Работая над правой частью изображения важно попытаться примерно соответствовать расположению вершин, как на левой части рисунка.

Как сделать изображение треугольниками

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

Как сделать изображение треугольниками

Чтобы завершить иллюстрацию, необходимо добавить ещё несколько вершин вокруг изображения по его краям: очень важно устранить любые огрехи!

Как сделать изображение треугольниками

Как сделать изображение треугольниками

Откройте полученное изображение SVG в Illustrator. Вы увидите произведение искусства во всей его векторной красе!

Как сделать изображение треугольниками

Края изображения выглядят немного грубо, поэтому первым шагом при работе в Illustrator будет исправление этого досадного упущения. Вам нужно будет просто изменить размер геометрических фигур по краям.

Как сделать изображение треугольниками

Удалите наполнение из выделенного квадрата, нажав кнопку Crop в открывшемся меню,и уберите всё, что выходит за пределы квадрата.

Как сделать изображение треугольниками

Обрезанные края выглядят намного гармоничней. Щелкните правой кнопкой мыши и отмените работу с группой, чтобы редактировать отдельные части многогранников.

Как сделать изображение треугольниками

Вернемся на шаг назад и проверим наш шедевр на наличие любых неприглядных форм или резких перепадов цветов. Каждую фигуру можно выделить с помощью инструмента Direct Selection, а его цвет изменить инструментом Eyedropper tool.

Как сделать изображение треугольниками

Выделите всё и скопируйте документ в фотошоп, создайте слой и отрегулируйте уровень теней и основные моменты, чтобы сделать изображение более контрастным и насыщенным.

Как сделать изображение треугольниками

Для последнего штриха добавьте к изображению эффект легкого зернистого шума, это придаст ему ещё большую привлекательность.

Как сделать изображение треугольниками

Трудно предположить, что это прекрасное изображение создается так просто!

Источник

Треугольники через CSS

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

Как сделать изображение треугольниками

Рис. 1. Треугольники в веб-дизайне

Использование border

Как сделать изображение треугольниками

Рис. 2. Добавление border к элементу

Оставляя только нужную границу, а остальные делая прозрачными, мы получим треугольник нужного цвета (рис. 3).

Как сделать изображение треугольниками

Рис. 3. Элемент с прозрачными границами

Пример 1. Блок с треугольником

Для абсолютно позиционированных элементов нулевую ширину и высоту указывать не обязательно.

За счёт комбинирования границ можно получить ещё четыре вида треугольников, что в сочетании с уже упомянутыми даёт нам восемь вариантов. Их вид и требуемый код приведён в табл. 1.

Табл. 1. Возможные виды треугольников

ВидСтиль
border: 20px solid transparent; border-top: 20px solid green; border-right: 20px solid green;
border: 20px solid transparent; border-right: 20px solid green; border-bottom: 20px solid green;
border: 20px solid transparent; border-bottom: 20px solid green; border-left: 20px solid green;
border: 20px solid transparent; border-left: 20px solid green; border-top: 20px solid green;

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

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

Как сделать изображение треугольниками

Рис. 4. Острый треугольник

Пример 2. Острый треугольник

С помощью border мы получаем сплошные цветные треугольники, для создания рамки показанной на рис. 5 приходится идти на хитрость и накладывать один элемент поверх другого с небольшим смещением. Опять же здесь нам помогут псевдоэлементы :before и :after (пример 3).

Как сделать изображение треугольниками

Рис. 5. Рамка с уголком

Пример 3. Наложение треугольников

Из-за того, что мы накладываем один однотонный элемент поверх другого, этот способ годится только для однотонной заливки и не подходит для градиентов или фоновых картинок.

Использование трансформации

С помощью трансформации мы можем повернуть квадратный элемент на 45º и получить из него ромб. Это ещё не треугольник как таковой, поэтому нужную нам выступающую часть оставляем на виду, а остальное прячем за другим элементом (пример 4).

Пример 3. Трансформация

Результат данного примера показан на рис. 6.

Источник

Как нарисовать треугольник в фотошопе

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

Как нарисовать равносторонний треугольник

У равностороннего треугольника все три стороны равны.

Самый простой вариант нарисовать в фотошопе такой треугольник — с помощью инструмента Многоугольник.

Выберите этот инструмент и на панели настроек сразу укажите количество сторон — 3.

Как сделать изображение треугольниками

Следующим этапом нужно определиться каким должен быть будущий треугольник: векторной фигурой, растровым со сплошной заливкой или нужен только контур. Рассмотри все варианты.

Векторный треугольник

На панели параметров выберите опцию Слой-фигура.

Как сделать изображение треугольниками

Теперь можно рисовать и сам треугольник. Во время создания вы будете видеть его границы. Это нужно для того, чтобы рассчитать его размеры. Также, пока не отпустили клавишу мыши, можно его крутить.

Как сделать изображение треугольниками

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

Растровый треугольник со сплошной заливкой

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

Для этого на панели параметров нужно выбрать настройку Выполнить заливку пикселов.

Как сделать изображение треугольниками

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

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

Как сделать изображение треугольниками

Как нарисовать контур равностороннего треугольника

Для такой фигуры выберите на панели параметров опцию Контуры.

Как сделать изображение треугольниками

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

Как сделать изображение треугольниками

Откроется диалоговое окно. Радиус растушевки оставьте 0. Жмите Ок.

В итоге мы из контура сделали выделенную область.

Как сделать изображение треугольниками

А теперь, как в примерах с квадратом и кругом, можно сделать обводку выделенной области.

Для этого выполните команду Редактирование — Выполнить обводку. Появится окно, в котором укажите толщину линии обводки, а также как она будет проходить относительно пунктирной линии выделения: внутри, по центру, снаружи.

Как сделать изображение треугольниками

Как сделать изображение треугольниками

Как нарисовать равнобедренный треугольник

У равнобедренного треугольника две стороны равны.

Разберем пример, когда нужно нарисовать равнобедренный треугольник заданных размеров. Допустим, основание 300 пикселей и высота 400 пикселей.

Создадим новый документ в фотошопе, который будет превышать будущие размеры треугольника, например, 600 на 600 пикселей.

Теперь с помощью направляющих и инструмента Линейка наметим габариты треугольника. Для этого сначала создайте горизонтальную направляющую ближе к низу документа (это будет основание). Затем вертикальную направляющую ближе к левому краю (от нее будем считать ширину):

Как сделать изображение треугольниками

Итак, основание (оно же ширина) договорились будет 300 пикселей. Отмеряем это расстояние от левой направляющей. Для этого возьмите инструмент Линейка и проложите прямой отрезок измерения (с зажатой клавишей Shift ). На панели параметров смотрите в поле Ш.

В точке, где будет 300 пикселей проложите еще одну направляющую.

Как сделать изображение треугольниками

Теперь тоже самое сделаем с измерением высоты, напомню, она 400 пикселей. Отмеряем от нижней направляющей.

Как сделать изображение треугольниками

Так получили габариты треугольника в соответствии с заданными размерами. Теперь в этом прямоугольнике нужно нарисовать треугольник.

Нужно отметить, где проходит середина. Поскольку ширина 300 пикселей, то середина будет проходить на 150. Отсчитаем это расстояние Линейкой и проведем там еще одну направляющую.

Как сделать изображение треугольниками

Возьмите инструмент Линия (расположен там же, где и многоугольник). На панели параметров выберите опцию в зависимости от того, какой треугольник нужен. Здесь прямая аналогия с тем, что было описано у равностороннего треугольника. Я выберу Слой-фигуру.

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

Как сделать изображение треугольниками

Объедините три стороны в один слой.

Для этого выделите их на палитре, а затем вызовете контекстное меню и выберите команду Объединить слои.

Равнобедренный треугольник по заданным размерам нарисован!

Как сделать изображение треугольниками

Как нарисовать разносторонний треугольник

В разностороннем треугольнике все стороны различны.

Для того, чтобы нарисовать такой треугольник, выберите инструмент Прямолинейное лассо. С помощью него можно произвольно начертить все три стороны. Главное соединить начальную и конечную точку.

В результате получится выделенная область.

Как сделать изображение треугольниками

Как нарисовать прямоугольный треугольник

В прямоугольном треугольнике один из углов равен 90 градусов.

Если нужен прямоугольный треугольник с заранее известными размерами, например, размеры катетов 200 и 300 пикселей, то проще всего сделать следующим образом:

Создайте новый документ в фотошопе с высотой и шириной равными размерам катетов: например, ширина пусть 300 пикселей, а высота 200 пикселей.

Как сделать изображение треугольниками

Рабочая область в фотошопе всегда прямоугольной формы, поэтому угол в 90 градусов будет уже обеспечен. Две стороны прямоугольника — его катеты. Останется только провести диагональ — это будет гипотенузой.

Будем действовать по аналогии с примером выше. Берем инструмент Линия и ставим опцию Слой-фигура.

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

Как сделать изображение треугольниками

На палитре слоев опять три слоя-фигуры. Их можно объединить в один слой (команда Объединить слои).

Прямоугольный треугольник готов, можно закрасить его в какой-нибудь цвет:

Источник

Катя Печень

(мои иллюстрации, заметки…и т.д.)

Портрет из треугольников или низкополигональный рисунок

Решила я разнообразить свои аватарки в ВК и добавить новое фото, что-нибудь нарисовав. Думала-думала и пришли на ум полигоны.Как сделать изображение треугольниками

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

Для меня проще всего это было сделать во флэше. Открываем программу Macromedia Flash Professional. Создаём новый документ, кидаем в него нужное фото.
Лучше выбрать фотографию с минимумом деталей и цветов, ведь множество мелочей на фото вы устанетесь превращать в треугольники, да и изображение в итоге должно быть легкоугадываемое, а не «рябь на картинке», по которой невозможно узнать, кто или что там на рисунке.

Я масштабирую на 400% изображение, и оно становится размытым. Не беда, ведь треугольники мы нарисуем в векторе. Готовую иллюстрацию можно будет уменьшать и увеличивать как угодно, она не потеряет качества.

Как сделать изображение треугольниками

Теперь создадим новый слой (сверху слева на фото, где написано Layer 1, и на новом слое начнем инструментом Line Tool (N) рисовать треугольники, соединяя их друг с другом.
Затем нужно их залить заливкой Paint Bucket Tool (K), взяв пипеткой преобладающий в данном треугольнике цвет прямо с изображения (фото).

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

Как сделать изображение треугольниками

Когда вы обрисуете нужную вам часть, треугольники нарисованные инструментом Line Tool, можно удалить все разом, фото тоже следует удалить. Останутся лишь полигоны:

Как сделать изображение треугольниками
Такое готовое низкополигональное изображение можно трансформировать как угодно — бесконечно увеличивать или уменьшать, качества оно не потеряет.

Как сделать изображение треугольниками

Также есть способ сделать подобную картинку в Фотошопе. Подробно вы можете изучить кучу видео по теме размещённых на youtube, благо их там тьма.

Но кратенько я расскажу. Открываем Фотошоп, оздаем новый документ, на него новым слоем добавляем нужное вам фото. Можете сделать копию слоя с фото на всякий случай, но я прямо по фото начинаю рисовать полигоны — треугольники.

На видео советуют сделать сетку и много чего еще, но проще всего рисовать магнитным лассо прямо по фото. Выбираем какую-то деталь на фото и начинаем рисовать треугольники, примерно ориентируясь на форму или цвет изображения:

Как сделать изображение треугольниками

Рисуем магнитным лассо 2 стороны треугольника и кликаем 2 раза, третья сторона автоматически добавляется сама.

Теперь заливаем тругольник цветом, который является усреднённым в этом полигоне: Filter-Blur-Average. В следующий раз — просто команда ctrl+F повторит этот фильтр.

Рисуем несколько таких треугольников, сразу же заливая их средним цветом. Вот, что получается:

Как сделать изображение треугольниками

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

Источник

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

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