Как сделать изображение треугольниками
Полигональные рисунки – это просто!
Многие из нас пускали слюни при виде этих изображений и задавались лишь одним вопросом: “Как такое сделать?”. Сейчас речь пойдет о них, да-да, это те самые изображения, составленные из множества крошечных геометрических форм, которые, объединяясь, формируют абстрактное изображение. Сегодня мы откроем вам тайну: с помощью каких инструментов и действий можно добиться такого эффекта, используя приложения Illustrator и Photoshop.
Вот изображение, которое мы будем создавать в этом обучающем курсе. Как видите, оно состоит из сотен геометрических фигур, которые и создают нужный нам эффект. Законченное изображение представляется очень сложным, выполнить такое, казалось бы, очень затруднительно, но на самом деле это очень легко. И, просмотрев наш урок, вы в этом убедитесь.
Добавьте новую маску к слою, сделайте одну половину черной, чтобы стереть её и создать зеркальный эффект между двумя половинками изображения.
Используйте мягкую резинку, чтобы стереть резкую грань между половинками рисунка, соединить их и сформировать единое изображение. Не волнуйтесь, если не получается слишком точно выполнить данную операцию: в любом случае, мелкие детали будут в дальнейшем потеряны.
Создайте новый слой, выберите регулировку контрастности и откорректируйте основные моменты и тени. Изображение с высокой контрастностью после его преобразования будет смотреться лучше, это позволит светлым и темным областям формировать четкие контуры.
Для начала работы щёлкните по ссылке “Add 25 Vertices” и увеличьте прозрачность многоугольников, таким образом, чтобы было видно изображение внизу.
Растяните форму на всё изображение, чтобы максимально заполнить всю область векторными формами, щелкнув по углам картинки.
Теперь начнется немного утомительный процесс прорисовки изображения, целью которого является подстройка нижнего слоя к добавленному изображению. Таким образом, мы обрисовали в общих чертах черные полосы и область вокруг глаз.
Наша цель в добавлении большого количества деталей в нужных нам областях, таких как глаза. Щелкайте мышкой почаще, чтобы создать как можно больше вершин вокруг различных элементов глаза, это позволит многоугольникам создать более точное изображение.
Также поработайте с остальной частью изображения, добавив дополнительные детали к главным анатомическим особенностям.
Регулируйте прозрачность изображения, чтобы сравнить векторную иллюстрацию с нашим изображением. Нам необходимо убедиться, что охвачено достаточное количество деталей.
Начните работать над второй половиной лица. Внимательно следите за тем, как вы делали первую половину: для нас важно сохранить тот же самый уровень деталей. Можно проработать одну половину и затем отразить ее в иллюстраторе, но будет очень сложно подогнать друг к другу вершины, чтобы сформировать полное изображение. Намного лучше обработать одну половину за другой, повторяя и прослеживая свои шаги.
Работая над правой частью изображения важно попытаться примерно соответствовать расположению вершин, как на левой части рисунка.
Противопоставление областей мелких деталей с большим количеством маленьких форм и менее подробных областей с большими многоугольниками помогает сохранить тот эффект, которого мы добиваемся.
Чтобы завершить иллюстрацию, необходимо добавить ещё несколько вершин вокруг изображения по его краям: очень важно устранить любые огрехи!
Откройте полученное изображение SVG в Illustrator. Вы увидите произведение искусства во всей его векторной красе!
Края изображения выглядят немного грубо, поэтому первым шагом при работе в Illustrator будет исправление этого досадного упущения. Вам нужно будет просто изменить размер геометрических фигур по краям.
Удалите наполнение из выделенного квадрата, нажав кнопку Crop в открывшемся меню,и уберите всё, что выходит за пределы квадрата.
Обрезанные края выглядят намного гармоничней. Щелкните правой кнопкой мыши и отмените работу с группой, чтобы редактировать отдельные части многогранников.
Вернемся на шаг назад и проверим наш шедевр на наличие любых неприглядных форм или резких перепадов цветов. Каждую фигуру можно выделить с помощью инструмента Direct Selection, а его цвет изменить инструментом Eyedropper tool.
Выделите всё и скопируйте документ в фотошоп, создайте слой и отрегулируйте уровень теней и основные моменты, чтобы сделать изображение более контрастным и насыщенным.
Для последнего штриха добавьте к изображению эффект легкого зернистого шума, это придаст ему ещё большую привлекательность.
Трудно предположить, что это прекрасное изображение создается так просто!
Треугольники через CSS
На сайтах треугольники применяются сплошь и рядом как часть дизайна элементов, например, они служат указателем на какой-то объект, направляя внимание читателя в нужное место. Также треугольники выполняют декоративные функции, делая блоки, где они применяются, более изящными и современными. На рис. 1 показан пример использования треугольника в дизайне.
Рис. 1. Треугольники в веб-дизайне
Использование border
Рис. 2. Добавление border к элементу
Оставляя только нужную границу, а остальные делая прозрачными, мы получим треугольник нужного цвета (рис. 3).
Рис. 3. Элемент с прозрачными границами
Пример 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 повторит этот фильтр.
Рисуем несколько таких треугольников, сразу же заливая их средним цветом. Вот, что получается:
Обведя так нужное пространство, остальное — ненужное, обводим магнитным лассо и заливаем белой заливкой (как вариант).