Для интересного оформления, дизайнерских поделок (ну скажем открытки на новый год) может пригодиться метода изготовления вязаного узора или текста в фотошопе.
Главное для этой затеи – вязаная текстура. Их много в сети, и у меня одна есть – скачать можно .
Суть технологии создания реалистичного вязанного узора:
1. Открываете вязанную текстуру.
2. Раскрашиваете ее. Для этого создаете слой под ней и заливаете его цветом, который необходим. Затем для слоя с ставите режим наложения “жесткий свет (Hard light)”. Можно дополнительно потаскать ползунок непрозрачности (opacity) для корректировки насыщенности цвета.
3. Создаем новый слой над текстурой вязания. Берем размером меньше одной вязальной петли. Рисуем на созданном слое петлю по форме петли из вязанной текстуры. Копируем то что нарисовали в новый файл и создаем из этого новую кисть.
4. Возвращаемся в файл с вязанием, создаем слой непосредственно под текстурой вязания. Выбираем вновь созданную в п. 3 кисть, придаем ей нужный цвет и рисуем по петлям свой узор. Важно четко по петлям прорисовывать периметр (края) узора а то что внутри можно просто закрасить не заморачиваясь.
Суть технологии создания вязанного текста (подходит не только для текста):
1. Повторяем п.1 и 2. из предыдущей методы.
2. Создаем текст непосредственно под слоем с текстурой. Желательно брать жирный шрифт, такой как, например, Arial Black. Задаем ему цвет как в п.2 предыдущей методы с .
3. Растрируем текст. Выделяем его контур и скругляем углы выделения – “выделение (select)” → “модификация (modify)”→ “сгладить (smooth)” – радиус определяем опытным путем. Инвертируем выделение и клавишей delete удаляем лишнее – в результате должен остаться текст с закругленными углами.
Данный урок научит нас создавать интересный эффект, как будто мы самостоятельно связали спицами поздравление на новогоднюю и рождественскую тематику, и помогут нам в реализации задуманного, базовые знания среды Photoshop. Кстати, вязаный эффект можно с лёгкостью адаптировать к векторным фигурам, растровым картинкам или совместить с другими материалами, будь то текстура кожи, джинсовой ткани, дерева и т.д.
Материалы для урока вы можете скачать ОТСЮДА (7 мб)
Финальное изображение:
1 шаг:
Набираем текст «XMAS», с использованием шрифта Intro.
2 шаг:
Растрируем слой с текстом, после чего закругляем границы текста. Прячем оригинальный слой с текстом, и задаём слою с заокругленными углами имя “Xmas Text”.
3 шаг:
Теперь к слову “Xmas Text” нужно добавить стили слоя, настройки которых вы вольны выбрать сами, отталкиваясь от размера вашего шрифта.
4 шаг:
Скачиваем вязаную текстуру и переносим её на рабочий документ, установив над слоем “Xmas Text”. Слою с вязаной текстурой задаём имя ‘Вязаная Текстура’.
5 шаг:
Для слоя ‘Вязаная Текстура’ прикладываем стиль слоя Наложение цвета (Color Overlay), после чего меняем серый цвет на красный, цвет зимнего колпачка Санта Клауса.
6 шаг:
Кликаем правой кнопкой по слою с вязаной текстурой, чтобы трансформировать его в обтравочную маску.
7 шаг:
Инициируем активное выделение вокруг текста, после чего применяем Расширение области выделения (Expand Selection) 3px, а ради этого следуем в меню Выделение – Модификация - Расширить (Select>Modify>Expand). Выбранное значение будет зависеть от вашего шрифта и итога, который вы хотите получить в конце.
8 шаг:
Ещё один слой, размещаем его над вязаной текстурой, в котором заливаем выделение белым цветом. Назовём это слой как ‘Текстура Меха’. Далее, инициируем выделение, как проиллюстрировано ниже, после чего избавляемся от части текста.
9 шаг:
Можно ещё разок закруглить углы для слоя ‘Текстура Меха’
10 шаг:
Создаём выделение для слоя с мехом, активируем к выделенному фрагменту сжатие, для шрифта задаём значение сжатия 4рх или другое, потом следуем в закладку Контуры (Paths) и выбираем параметр Сделать из выделенного фрагмента рабочий контур (Make work path out of the selection), после чего посредством кисти Мех, проводим по контуру текста. В итоге, у нас должно получиться примерно так:
11 шаг:
Прикладываем такие стили слоя к слою ‘Текстура Меха’
12 шаг:
Активируем выделение вокруг текста, кликнув по иконке слоя ‘Xmas Text’, после чего задаём значение Расширения области выделения (Expand Selection) 30px, последовав в меню Выделение- Модификация – Расширить (Select>Modify>Expand), а и ещё раз закругляем края выделенного фрагмента.
На очереди следующий слой, который называем ‘Рождественская вязаная текстура’. Заполняем выделенную область зелёным цветом, например #016002.
13 шаг:
Для этого слоя повторяем всё то, что делали на предыдущих этапах, разве что добавив эффект меха по границам картинки, а также добавив вязаную текстуру в виде обтравочной маски, при этом стиль слоя Наложение цвета (Color Overlay) лучше не применять, а использовать стиль Мягкий свет (Soft Light). Далее, добавляем стили слоя Тень (Drop Shadow) и Внутренняя тень (Inner Shadow). Должно получиться примерно так.
В прошлых наших материалах мы много рассказывали о красивом праздничном оформлении дизайна сайта в честь Нового года и Рождества. В то же время, чем ближе само событие, тем больше в интернете начинает появляться и соответствующих тематических материалов. Это узоры, кисточки, текстуры, готовые шаблоны, фоны, actions и прочее, и прочее.
Но наше с вами особое внимание сегодня будет приковано к тому, как создать фон или текстуру в виде вязки на спицах или иначе, в виде джемперной вязки, вязки свитеров. Ни для кого не секрет, что вязка с «зимним» рисунком - «бич» новогодних праздников и особенно в западных странах (аналогично тому, как клипарты Санта-Клауса в России используются гораздо чаще, чем Деда Мороза). Поэтому, создавая оформление для распродажи в интернет-магазине, небольшой секции с товарами или для раздела «Наше Новогоднее Предложение » (а может даже просто, меняя дизайн самого обычного сайта компании на новогодне-праздничный), вполне уместно использовать небольшой кусочек такого вот вязаного фона или текстурки. Обычно в виде вязки изображают оленей, снежинки, елочки, угловые орнаменты, точечки, звездочки, буквы и надписи. Иными словами, все то, что легко самостоятельно вывязать спицами и нитками.
Разумеется, что не каждый из вас умеет вообще вязать в реальной жизни. Но это и не проблема. В Photoshop это получится быстро и легко. И да, одновременно с тем как используют обычные графические текстуры для фона, применяют для новогодней тематики и вязаные текстуры.
Особенности создания вязаной текстуры
Создавать вязаную текстуру в Photoshop недолго, но кропотливо для первого раза. Это уже второй-пятый вариант будет по времени осуществляться быстро и незаметно, тем более, если после первого останутся заготовки в виде кистей, текстур, шаблонов.
Кроме того, орнаменты в вязке всегда используются простые, а для веб-дизайна особенно. Разумеется, если необходимо/хочется создать шедевр Айвазовского в виде вязки, то это одно. Можно посидеть и отрисовать кисточками. Но для оформления сайтов такое не нужно. Даже…неуместно. Требуется нечто простое, скромное, несложное визуально, поскольку основной нагрузки все это нести не будет, но именно своей ненавязчивостью придаст праздничное настроение посетителям.
И еще один момент; он больше связан именно с вязанием. Чтобы вывязать рисунок (пусть и новогодний), его размечают строго по клеточкам, ассоциируя каждую петлю с одной клеткой. Поэтому, чтобы и нам в Photoshop нарисовать оленя или снежинку, придется её четко и симметрично рассчитать по клеточкам. На самом деле это несложно и в интернете таких материалов «навалом» и Google приходит на помощь. Тем более, что схемы вышивки крестиком тоже могут подойти, но они мелковаты в деталях.
Создавать красивую вязаную текстуру можно двумя способами: самостоятельно или с помощью готового Actions. Мы рассмотрим два варианта, ибо при самостоятельном создании настроек и коррекций можно производить гораздо больше.
Photoshop проще Illustrator
Достаточно часто вы можете видеть, что создание текстуры осуществляется в Adobe Illustrator. Но мы воспользуемся именно нашим любимым Photoshop и попробуем развеять миф о том, что в этом приложении чего-то нельзя создать!
Создаем новый документ с размерами 50х50 рх с прозрачным фоном. Это будет и наш узор, и наша кисточка. Рисуем фигуру Эллипс по высоте нашего квадратика. Толщину его определите сами, это и отобразит толщину нити. Выделяем фигуру ctrl+ T и поворачиваем ее так, чтобы нижний конец был в середине квадрата, а верхний смотрел в угол.
Копируем слой, зажимая Alt+ЛКМ и разворачиваем второй эллипс по горизонтали. Совмещаем две фигуры, чтобы их нижние концы сошлись, объединяем слои и сохраняем как кисть и как узор. Меню Редактирование -> Определить кисть и Определить узор.
Создаем новый документ. Размер его зависит от вашего узора, который вы будете размножать. Если это часть орнамента, посчитайте, сколько петелек в нем. А одна петля у нас 50 рх. Мы выбрали 1000х600, прозрачный.
Переходим в Редактирование -> Настройки -> Направляющие, сетки и устанавливаем линию сетки каждые 50 пикселей, то есть по ширине нашей петли. Внутреннее деление на свое усмотрение. Затем Просмотр - > Показать -> Сетку.
Казалось бы, что проще всего нажать заливку узором и затем раскрасить полосами и блоками. Но при этом узор будет выглядеть, как обычная «елочка». Поэтому проще сейчас выбрать кисточку с нашей петлей, определить цвет и на новом слое нарисовать петлю. Теперь переходим к инструменту Перемещение, зажимаем ALT + ЛКМ и копируем слой вправо . Таким образом, по горизонтали мы создаем полоску петелек.
Важно: для удобства ровности копирования увеличьте масштаб изображения, а также включите привязку к направляющим, сетке и пр. У вас будут показываться и значения смещения по осям Х и Y, а, значит, выровнять будет гораздо проще.
Создали полоску. Слоев много. Объединяем их. И аналогичным образом начинаем копировать одной большой полосой вниз. НО. Если у вас дома есть вязаные вещи и вы внимательно посмотрите на вязку, то петельки по вертикали расположены очень близко. То есть четко по вертикали в сетке в Photoshop выравнивать не стоит. Наоборот, подберите то значение (у нас смещение было 34 рх по Y), что более красиво и придерживайтесь его.
Эти слои тоже можно объединить, чтобы было проще. Фон залить красным, голубым или любым иным цветом.
Теперь приступим к самому простому орнаменту. Создаем новый слой. И вообще, все рисунки на фоне петель рисуем на новых слоях. Поскольку рождественские рисунки обычно вывязываются белым цветом на ярком контрастном фоне, то выбираем нашу кисточку. Размер может быть на пару пикселей больше, чем оригинальный размер в 50рх. Причина в том, что нитки, бывает, тоже используют чуть разные. А такой вариант добавит узору реалистичности. И рисуем столбик петельками поверх наших фоновых петелек. Поверьте, считать и фантазировать по уже заготовленному фону гораздо проще, чем сразу кисточкой рисовать, меняя цвета. Чуть ниже еще столбик, и еще. Затем, готовую часть орнамента можно скопировать на новый слой. И вот что получилось.
Разумеется, что 50 px кисточка может быть и крупной, поэтому смотрите по сетке (настройте её) и поэкспериментируйте с разными вариациями. Елочка, надписи, олени и другие украшательства рисуются точно также. Более того, можно создать заготовки фона или орнаментов.
Таким образом, один раз подобрав рисунок и подготовив базовые элементы, можно быстро создать вязаную текстуру и написать «Скидка 50% на все » и елочку со снежинкой в уголочке. А уже поверх петель разместить изображения флакончиков, баночек и прочего. Вариаций много и они разные.
Action Ugly Sweater
Второй, возможно, более простой способ создания вязаного рисунка - это использование actions для Photoshop. Ugly Sweater в своем составе имеет сам actions, а также узор и стиль.
Запускаем английскую версию Photoshop и последовательно устанавливаем каждый из трех файлов. Как это делается можно прочитать… да хотя бы и в последнем материале по actions 2017 .
Особенность данного дополнения в том, что перевести в вязаную текстуру можно практически любое изображение. То есть, совершенно неважно насколько оно художественное или схематичное, главное - чтобы оно было четким. Кроме этого, перед началом самого Actions вы можете выбрать размер петель.
Установили все файлы из архива, открываем изображение. Мы подобрали самые простые, но праздничные элементы и попробуем их «связать».
Мы также выбрали размер петель 50px (для сравнения) и нажимаем Play. Рано или поздно появится окно фильтра Постеризация . Чем больше вы укажите значение, тем плавнее и градиентнее будут переданы цветовые оттенки. В реальной вязке оттенки можно передавать, но сложно, поэтому цвета обычно четкие. Мы выберем нечто среднее - 4.
Следующий диалог ориентирован на работу с количеством петель в целом. Либо петель будет густо и много, либо мало.
И вот что получилось. Не слишком понятно, что изображено, но если включить фоновый слой, то видно, что плотность петель покрыла все изображение.
Но обратите внимание, если выбрать размер петли 30 пикселей , то рисунок заметнее красивее. Таким образом, тот же случай, что мы разбирали в первом варианте. От размера петли зависит целостность композиции. Более того, если в рисунке используются мелкие детали, то вывязывать их крупными петлями бессмысленно - просто не получится.
Или олень, вот, на белом фоне. Белый фон превратился в вязку и от обилия белого попросту режет глаза. Здесь вариант замены цвета не подходит, придется только вручную выполнять заливку фоновых петель. Поэтому старайтесь находить изображения на прозрачном фоне.
Кроме того, во время выбора разброса цветов и количества петель вы будете видеть изменения рисунка во время продвижения ползунка настроек, а значит, подобрать нужный вариант не составит труда.
Аналогично обрабатываются и надписи, но тоже нужно иметь в виду, что если шрифт маленький, то и петельки должны выбираться маленькие.
Наборы узоров
Но если самим создавать рисунки и вязки нет желания/фантазии, то, разумеется, в интернете можно найти и готовые варианты узоров, изображений, орнаментов. Например, на одном только freepik можно найти как просто подборку рождественских узоров, так и фоновых текстур. И вот какие:
Как видно, созданы они по принципу отрисовки общего фона петлями, а затем прокраски нужных петель строго по схеме: одна клетка = одна петля .
Заключение
Разумеется, в интернете можно подобрать и еще большее количество готовых текстур с рождественско-новогодней тематикой, и actions для Photoshop, и даже примеры того, как самим отрисовать орнаменты. Но мы остановились на самых простых решениях и вариантах, которые еще можно успеть использовать для работы над новогодним дизайном какого-либо сайта.
И да, какими бы насыщенными рисунки не казались, это вовсе не значит, что для дизайна сайта нужно использовать их в неизменном виде. Порой достаточно пары небольших снежинок или елочки, надписи или достаточно ограничиться только вязаным фоном без орнамента.
Так или иначе, но создание вязаной текстуры - отличный вариант сделать уникальный дизайн проекта. Никто не говорит о том, чтобы делать весь фон страницы (во весь экран монитора) в петельках и орнаментах. Но украсить какие-то отдельные элементы - это просто и красиво. Кроме того, такие текстуры придадут проекту некоторую изюминку и привлекут посетителей «домашней теплотой» к сайту, к контенту. Представьте, если интернет-магазин продает одежду. Почему бы не оформить раздел свитеров, шапок или шарфиков именно в вязаном стиле? Или объявление о тематической распродаже?
Скажите, что: «кропотливо и сложно. Хочется быстро: раз-два и быстренько отдали на верстку или сами сверстали ». Но такого не бывает или бывает редко. Чтобы получился отличный дизайн, нужно еще поработать и над визуальной составляющей, изображениями. Да к тому же, если не на этот год, то к следующему году можно успеть воплотить идеи орнаментов и неторопливо нарисовать что-то необычное и красивое. Ибо вязка спицами актуальна во все времена, вне зависимости от стилей, трендов, «фишек» и веяний в дизайне. Вечность в классике.
С наступающим вас, читатели, годом рыжего песика!
В этом уроке мы создадим интересный эффект Санта связал текст, используя базовые знания программы Photoshop. Вам необходимо знать основы работы с кистями Photoshop , например, как создать рабочий контур, как выполнить обводку контура, как создать свои кисти и т.д.
Данный вязаный эффект текста можно легко адаптировать к векторным фигурам, к растровым изображениям и т.д. Вы можете совместить вязаную текстуру с другими материалами, например, с текстурой кожи или с текстурой джинсовой ткани. И конечно же, вашей работе придадут шарма кисти Стhjxrb и Швы.
В этом уроке вы узнаете, как создать текст из шапок Санты в программе Photoshop, используя вязаную текстуру и кисти мех. На создание данного урока меня вдохновили зимние и рождественские кисти и экшены. Надеюсь, вам понравится данный урок.
ОК. Давайте приступим!
Материалы для урока вы можете скачать (7 мб).
Итоговый результат
Шаг 1
Напечатайте текст "XMAS", используя шрифт Intro. Посмотрите данный урок по установке шрифта в программу Photoshop для начинающих изучать данную программу.
Шаг 2
Далее, растрируйте слой с текстом. Закруглите края текста. Посмотрите данный урок , как создавать закруглённые углы в программе Photoshop. Скройте оригинальный слой с текстом. Назовите новый слой с текстом с закруглёнными углами “Xmas Text”.
Шаг 3
К слою “Xmas Text”, добавьте стили слоя. Добавьте стили слоя, которые указаны на скриншоте ниже. Настройки стилей слоя необходимо скорректировать в зависимости от размера шрифта, выбранного вами. Посмотрите данный урок про установку стилей слоя для начинающих пользователей программу Photoshop.
Шаг 4
Скачайте вязаную текстуру. Переместите данную текстуру на наш рабочий документ, расположив поверх слоя “Xmas Text”. Назовите слой с вязаной текстурой ‘Вязаная Текстура’.
Шаг 5
К слою ‘Вязаная Текстура’, добавьте стиль слоя Наложение цвета (Color Overlay), чтобы изменить цвет, поменяв серый цвет на красный цвет, цвет зимней шапки Санта Клауса.
Шаг 6
Щёлкните правой кнопкой по слою ‘Вязаная Текстура’, чтобы преобразовать данный слой в обтравочную маску.
Примечание переводчика: щёлкните правой кнопкой по слою ‘Вязаная Текстура’ и в появившемся окне, выберите опцию Преобразовать в обтравочную маску (Create a Clipping Mask).
Шаг 7
Создайте активное выделение вокруг текста, а затем, примените Расширение области выделения (Expand Selection) 3px. Для этого идём Выделение - Модификация - Расширить (Select>Modify>Expand). Опять же, данное значение будет зависеть от размера вашего шрифта и конечно от результата, которого вы хотите добиться.
Шаг 8
Создайте новый слой поверх слоя ‘Вязаная Текстура’. Залейте выделенную область белым цветом. Назовите этот слой ‘Текстура Меха’. Создайте выделение, как показано на скриншоте ниже. Далее, удалите часть текста.
Примечание переводчика: 1. создайте выделение вокруг текста 2. залейте белым цветом 3. преобразуйте слой с белой заливкой в обтравочную маску 4. скройте верхнюю часть заливки.
Шаг 9
Вы можете ещё раз закруглить углы для слоя ‘Текстура Меха’.
Шаг 10
Создайте выделение для слоя ‘Текстура Меха’. Примените сжатие к выделенной области, установите значение сжатия 4px (опять же, данное значение будет зависеть от размера выбранного вами шрифта и диаметра кисти и т.д.). Далее, идём в закладку Контуры (Paths) и выбираем опцию Сделать из выделенной области рабочий контур (Make work path out of the selection) и с помощью кисти Мех, пройдитесь по контуру текста. У вас должен получиться эффект меха, как показано на скриншоте ниже.
Примечание переводчика: если у вас возникли сложности с контурами, то посмотрите этот урок для работы с контурами.
Шаг 11
Добавьте следующие стили слоя к слою ‘Текстура Меха’.
Шаг 12
Создайте выделение вокруг текста, щёлкнув по миниатюре слоя ‘Xmas Text’. Примените значение Расширения области выделения (Expand Selection) 30px. Для этого идём Выделение- Модификация - Расширить (Select>Modify>Expand), а также закруглите края выделенной области. Создайте новый слой. Назовите этот слой ‘Рождественская вязаная текстура’. Залейте выделенную область зелёным цветом #016002.
Шаг 13
Для нового слоя, повторите предыдущие шаги, добавив эффект меха по краю изображения, а также добавьте вязаную текстуру в качестве обтравочной маски, единственное, не применяйте стиль слоя Наложение цвета (Color Overlay); вместо этого, поменяйте режим наложения для слоя с текстурой на Мягкий свет (Soft Light). Добавьте стили слоя Тень (Drop Shadow) и Внутренняя тень (Inner Shadow). Результат должен быть, как на скриншоте ниже.
Шаг 14
Вы можете проявить больше креативности и добавить окантовку, используя ту же самую технику.
Шаг 15
Вы можете использовать вязаную текстуру также и для заднего фона, т.е. вы можете объёдинить вязаную текстуру с кистями в виде швейных строчек и швов, чтобы создать интересные эффекты.
Шаг 16
Вы также можете добавить креативные вязаные фигурки и иконки, используя Рождественские векторные фигуры или Рождественскую Векторную Графику.
Шаг 17
Вы также можете воспользоваться платным набором из 6 экшенов, который найдёте в источнике урока.
Эти экшены помогут вам создать реалистичные вязаные эффекты из любого текста, фигуры, растрового изображения. Данные эффекты можно легко редактировать и видоизменять после того, как вы примените экшен.
