Всем добрый день! Сегодня dacascas решил порадовать нас новым уроком Adobe Illustrator. В уроке рассказывается, как рисовать бесшовную текстуру, так называемый seamless. У многих может возникнуть резонный вопрос: что такое бесшовная текстура? Если объяснять простыми словами — это текстура с бесконечно повторяющимися изображениями. При этом изначально создается только фрагмент текстуры, а изображение на нем делается зацикленным, поэтому растягивать текстуру можно бесконечно.
Бесшовные текстуры очень востребованы на микростоках и у любого микростокового иллюстратора обязательно в портфолио найдется хотя бы парочка подобных текстур. Так что, если вы собрались покорять микростоки, навык создания seamless-текстур вам обязательно пригодится.
Как всегда, если вы не в курсе, как воспользоваться тем или иным инструментом Adobe Illustrator, вы можете подсмотреть нужную главу в курсе «Изучи Adobe Illustrator за 30 дней» либо задать вопрос в комментариях.
Как рисовать бесшовную текстуру
Итак, все поняли, для чего нужны бесшовные текстуры и с чем их едят. Теперь можно попробовать сделать какой-нибудь свой seamless, руководствуясь этим уроком.
Создаём новый документ. Будет удобно, если сделаете его квадратным. В моём варианте размер документа — 500x500.
Рисуем любой объект или объекты, из которых будет состоять наш seamless. Желательно, чтобы он был простой и состоял из одного контура. В будущем можно будет экспериментировать и со сложными объектами, но начинать лучше именно с простенькой картинки. Градиентные заливки использовать для создания seamless нельзя. В данном случае я нарисовал отпечаток губ.
Обращаем этот объект в символ. Это можно сделать, перетащив его в палитру «Символы» (Symbol).
Воспользуемся инструментом «Распыление символов» (Symbol Sprayer Tool) и заполним всю рабочую область нашими символами.
Добавим разнообразия, поменяв цвета, размеры и наклон отдельных символов. После завершения работы не забудьте преобразовать все символы в кривые: «Объект > Обработка прозрачности» (Object > Flatten Transparency). Я использовал инструмент «Распыление символов» (Symbol Sprayer Tool) только для удобства. Вы можете просто размножить свои картинки с помощью горячих клавиш Ctrl+C и Ctrl+V.
Обрезаем объекты, которые выходят за границы рабочей области. Для этого нарисуем прямоугольник с одной стороны так, чтобы он перекрывал их. Одна сторона прямоугольника должна точно лежать на границе рабочей области.
Для обрезки выделим все фигуры и воспользуемся инструментом «Обработка контуров > Разделение» (Pathfinder > Divide).
Теперь удаляем все ненужные контуры. Также после применения инструмента «Разделение» (Divide) могут остаться незамкнутые кривые и невидимые обрезки форм (здесь всё зависит от строения контура обрезаемого объекта). Тщательно проверьте свою работу на предмет этого мусора, иначе seamless не примут на сток. Вы можете обрезать фигуры и с помощью простой линии, нарисовав её пером по краю рабочей области и применив «Разделение» (Divide). Смысл сего действия — разрезать все объекты. А делать это можно любым удобным для вас способом. Тут уж дело привычки.
Обрезанные части символов, выходящие за рабочую область, перемещаем на противоположную сторону. Для этого правым кликом вызываем контекстное меню и идём: «Трансформировать > Перемещение» (Transform > Move). В появившемся окне выставляем значение смещения. В данном случае нам нужно передвинуть объекты по горизонтали на 500 px влево (500 — это размер стороны рабочей области). Выставляем значение минус 500 в соответствующем окошке.
Жмём «OK», и половинки перелетают на противоположную сторону рабочей области.
Таким же образом обрезаем и перемещаем все остальные символы, выглядывающие за границы картинки. В итоге получаем такую иллюстрацию.
Все объекты, выходящие за границы иллюстрации, появляются с противоположной стороны. Группируем всю нашу картинку и перетаскиваем в палитру «Образцы» (Swatches) так же, как при обращении объекта в символ. Затем рисуем прямоугольник любых размеров и применяем к нему наш новоиспечённый образец. Получаем seamless-текстуру, которую потом просто экспортируем в растровый формат и используем по назначению.
Желаю творческих успехов.
dacascas
___________________
А я напоминаю, что другие уроки Adobe Illustrator, опубликованные на этом блоге, вы можете найти в разделе «Уроки Adobe Illustrator». Смотрите, читайте, изучайте, рисуйте и зарабатывайте, продавая свои иллюстрации!
Анна Волкова Читать дальше...
Отличный урок:)) Я как то подобными вещами еще не занимался. Сегодня ченить попробую сделать ))
ОтветитьУдалитьЧитал несколько уроков по созданию seamless текстур. Но этот урок поразил меня своей простотой и наглядностью. А самое главное только после прочтения этого урока я смог без проблем и довольно быстро нарисовать парочку собственных текстур. Огромное спасибо автору и спасибо Анне за интересный и познавательный ресурс.
ОтветитьУдалитьДа, уроков по seamless довольно много, но в основном для фотошопа. А для AdobeIllustrator я только парочку видел, все остальные на английском...
ОтветитьУдалитьблин...а у меня почемуто постоянно в местах соединений белые линии проходят.. ((
ОтветитьУдалитьА это потому, что там остается мусор. Нужно очень тщательно чистить края. Я обычно для поиска мусора использую панельку с координатами и кнопочку слева от координат. Не знаю как назвать. Мы ведь обрезаем по рабочей области. а значит координаты должны быть для каждой крайне точки. 0:0 500:0 500:500 и 0:500. Выделяем весь рисунок и смотрим. Если координаты отличаются значит край неровно обрезал или остался мусор на крайях.
ОтветитьУдалитьДа, нужно, чтобы объект был обрезан точно по краю рабочей области. Если половинка хоть на пиксел отодвинута в сторону, то появляется балая линия между объектом и краем рабочей области, которая потом вылезет в seamless.
ОтветитьУдалитьВторой вариант: Иллюстратор может немного подглючивать на краях ячейки seamless текстуры. Т. е. ты видишь белую линию, а её нет на самом деле. Она пропадёт, если чуть изменить масштаб. Попробуй на увеличение, так как, если уменьшать, то линию можно просто не разглядеть.
Чтобы проверить наверняка, просто растяни seamless побольше, чтобы захватить места стыков и экспортируй в растр. Если белые линии, которые ты наблюдал в Illustratore остались, то нужно аккуратней обрезать.
ясненько :))
ОтветитьУдалитьХороший урок! еще давай, more more!!
ОтветитьУдалитьТы попала - http://www.apachai.ru/uslugi-bloggerov/ =))
Ага, я заметила, что оказываю какие-то странные услуги:)
ОтветитьУдалитьДа можно, можно градиенты :)
ОтветитьУдалитьНе знаю........
ОтветитьУдалитьУ меня с градиентом seamless тупо в палитру образцов не закидывается :\
Что-то у меня никак разделить не полуается :(
ОтветитьУдалитьЯ выбираю обработка контуров-разделение, вроде применяется, но ничего не изменяется, половинки, что выходят за края так и неразделенные, их нельзя никуда переместить. Еще пробвала в этой закладке выбрать -обрезка- исезают все контуры, но половинки так и остаются целые :(
Разрезаются фигуры через разделение в панели обработки контуров: Pathfinder -> Divide.
ОтветитьУдалитьВозможные проблемы:
1) Команда, в некоторых версиях Illustrator'а, срабатывает, если ещё одновременно зажать клавишу Alt
2) Контуры не пересекаются, соответственно ничего не разделяется
3) Забыли разгруппировать порезанные фигуры, поэтому они ведут себя как одно целое
4) Перед порезкой выделили только один из контуров, а не оба.
5) В комп залез страшный вирус, который не любит всяческие команды, связанные с разделением :)
Анна, огромное спасибо за Ваш блог и этот урок в частности!
ОтветитьУдалитьПодскажите, пожалуйста, можно ли не только закинуть, но и сохранить свои символы в палитре символов и свои образцы в палитре образцов? У меня Illustrator CS4, образцы закидываются и используются в текущем документе, в котором были созданы, но при открытии нового документа исчезают из палитры снова. Можно ли их там закрепить?
За этот урок спасибо нужно сказать dacascas'у:)
ОтветитьУдалитьНа счет символов и образцов. Лично у меня никогда не возникало необходимости их сохранять, но насколько я понимаю сделать это можно, сохранив их в отдельную библиотеку, а потом при создании нового документа эту библиотеку открыть (Save/Open Swatch Library)
Вопрос) как к прямоугольнику применить нашу текстуру? :D
ОтветитьУдалитьПеретаскиваете текстуру в палитру «Образцы» (Swatches), рисуете прямоугольник, выделяете его и жмете на текстуру на палитре :)
ОтветитьУдалитьА как готовить seamless для шаттера? Пустой файл с паттерном в палитре, просто квадрат с готовой заливкой или еще как?..
ОтветитьУдалитьКвадрат, но не с заливкой, а с повторяющейся частью рисунка. В общем, именно то, что вы нарисовали и закинули в палитру для проверки
ОтветитьУдалитьЗдравствуйте, Анна.
ОтветитьУдалитьУ меня вопрос опять наитупейший. ))
После распыления символов выделить их по одному у меня не получается. Что делать? :/
С уважением, Вероника)
Думаю, для начала нужно их разобрать, привенив команду expand
ОтветитьУдалитьАня,спасибо за уроки и за такой полезный сайт!
ОтветитьУдалитьУ меня возник вопрос по данному уроку. Есть ли другой способ быстро удалить объекты выходящие за область квадрата? В Кореле это так просто(( А тут уже пол дня потратила на это...и безрезультатно. Почти весь творческий порыв из-за этого растеряла :)
Учусь в последней версии CS5..
Посмотрела другие подобные уроки..Есть вариант Object-Path-Divide Object Below..но что-то не срабатывает..
Заранее спасибо,
Инга
Здравствуйте! Аналогичная проблема (CS5), не удается обрезать все лишнее. Все заступорилось на этом этапе :(
ОтветитьУдалитьАнна, здравствуйте! пыталась уже несколько бесшовных структур создать, у меня CS5 - везде одинаковая проблема, почему-то когда создаю новый документ и заполняю прямоугольник своим образцом, на местах пересечений в EPS видны белые очень тонкие границы. В JPEG-превью такого нет. Как вы думаете, это глюк иллюстратора, я могу в таком виде отправлять на стоки? К предыдущим комментариям - я тоже никак не могла обрезать, а потом поняла, что сначала нужно сгруппировать, а потом делить. перед переносом тоже надо сгруппировать
ОтветитьУдалитьПриблизьте шов на столько на сколько это возможно, если он при увеличении пропадает, то все нормально - можно отправлять :)
ОтветитьУдалитьПо поводу белых линий, читайте 6й комментарий к этой статье
ОтветитьУдалитьАнна, спасибо вам за урок! Скажите пожалуйста примут ли стоки текстуру если сам образец будет прямоугольной формы или его обязательно нужно делать квадратом? Есть какие-нибудь правила?
ОтветитьУдалитьПримут :)
ОтветитьУдалитьЕсли по качеству подойдет...
ОтветитьУдалитьСпасибо огромное за урок!!! Все настолько доступно!! все получилось с первого раза, единственное - забыла разобрать обводку, поэтому она и не "перенеслась". Очень полезный ресурс, еще раз БОЛЬШОЕ СПАСИБО!!!
ОтветитьУдалитьС уважением, Анна
Большое пожалуйста :)
ОтветитьУдалитьЗдравствуйте! Почему у меня перестали перетаскиваться объекты на палитру Swatches? Плюсик появляется, но объекты не хотят вставляться. Это программа глючит или есть какой-то секрет? Спасибо, Ольга.
ОтветитьУдалитьМожет вы использовали градиентные заливки в этих объектах? Тогда они скорее всего не добавятся в Swatches. Ну или может быть действительно какой-то глюк.
УдалитьОоочень классный урок! Спасибо)
ОтветитьУдалитьПожалуйста :)
УдалитьУже разобралась, спасибо. После перекидывания на панель в Swatches, файл уже определялся как паттерн. Правда для меня много осталось непонятным в поведении иллюстратора на эту тему, но тут появилась новая проблема: при создании бесшовников можно ли применять контур? У меня дизайн именно с контуром, но при разрезании он замыкается там, где не нужен, и еще лезет за документ, в итоге ничего не получается. Спасибо, Ольга.
ОтветитьУдалитьОльга, если контур вам принципиален, то перед обрезанием всего лишнего, вам нужно его разобрать, превратить из контура в объект.
Удалить