Иллюстрация с персонажем в формате svg javascript
Задание - написовать иллюстрацию с персонажем (см. пример в прикрепленных файлах) в формате svg javascript, файл должен быть изменяемым, изменяемые части персонажа:
- имя & пол (девочка/мальчик)
- глаза
- волосы
- кожа, ее видимая часть (лицо, руки)
- без очков
- какая-то часть на выбор, что-то детское и милое (большие глаза, улыбка...)
- фон
Персонаж:
- пол : девочка
- возраст: примерно 5 лет
- цвет кожи (изменяемый): белый
- цвет волос (изменяемый): блондинка
- цвет глаз (изменяемый): голубые
- одежда & прическа: на ваш выбор и вдохновение
Иллюстрация:
- принцип как в приведенном примере
- иллюстрация на 2 страницах
- оставить место для текста
- ребенок присутствует на 1 из страниц, левой или правой)
- иллюстрация горизонтальная
Текст:
- он должен быть читабельным на развороте 2 страниц, текст на странице, где нет ребенка
- по контрасту текст должен быть светлым, а фон темным, или наоборот, но не пестрым
Тема иллюстрации:
Девочка - пилот самолета, летит над океаном, вдали виднеются горы.
В общем персонаж и фон раздельны.
Все изменяемые цвета персонажа (кожа, волосы, глаза) сгруппировать в начале файла <defs> с уникальными id:
"couleur_cheveux" - цвет волос
"couleur_yeux" - цвет глаз
"couleur_peau" - цвет кожи
Приведенные ниже файлы html & svg вам дадут идею стрктуры иллюстрации
...
</svg>
<defs>
<!-- modified colors via JavaScript -->
<linearGradient id="cheveux"><stop id="couleur_cheveux" stop-color="yellow"/></linearGradient>
<linearGradient id="yeux"><stop id="couleur_yeux" stop-color="blue"/></linearGradient>
<linearGradient id="peau" ...><stop id="couleur_peau" stop-color="pink" offset="0"/></linearGradient>
<!-- cheveux --> ...
<!-- corps (tout sauf tête) --> ...
<!-- yeux --> ...
<!-- couleur contours yeux & sourcils --> ...
<!-- visage --> ...
<!-- reflet cheveux --> ...
<!-- corps - autres parties --> ...
<!-- contour des yeux --> ...
<!-- bouche --> ...
</defs>
<-- DETAIL DES ELEMENTS-->
<g transform="matrix(1.25 0 0 -1.25 -699.92 881.36)">
<!-- visage --> => (path, clip-path & transform...)
<!-- yeux --> => (path, clip-path & transform...)
<!-- cheveux --> => (path, clip-path & transform...)
<!-- reflet cheveux --> => (path, clip-path & transform...)
<!-- bouche --> => (path, clip-path & transform...)
<!-- corps (tout sauf tête) --> => (path, clip-path & transform...)
</g>
</svg>
Для смены цветов используйте JavaScript
function change(valeur, id) {
var svgDoc = document.getElementById("fillette").contentDocument;
var maVariable = svgDoc.getElementById(id);
maVariable.style.stopColor =valeur;
}
Жду ваших предложений стоимости и сроков выполнения.
Если есть вопросы по заданию - пишите.
Приложения 3
-
2456 50 5 Здравствуйте, Anna!
Очень заинтересовал ваш проект!
Меня зовут Александра, я иллюстратор.
Работаю как и в растре так и в векторе, рисую на графическом планшете.
Готова создавать иллюстрации по вашим ТЗ сегодня же.
Портфолио:Behance
Также у меня в команде есть программист с 20 летним опытом работы, который и напишет код.
Предлагаю обсудить все детали работы в Личных Сообщениях.
Пишите! Буду рада сотрудничеству с вами!
-
3141 64 0 1 Добрый день.
Рисую в нужном книжном стиле, в растре.
Если необходим именно svg, я могу дать psd, а вы уже сами перенесете слои в вектор.
По опыту знаю, что цвет меняется в два клика в самой программе фотошоп, но сделать это как вам нужно кодом - я не смогу.
Портфолио: https://xiukab.github.io
Больше именно книжных разворотов могу выслать в ЛС.
-
717 21 2 1 да, вот тоже считаю, что тут по сути 2 задачи. Ну, или работать вместе с художником. в общем, если что, готов взяться за программную, так сказать, часть.
-
409 27 3 Добрый день, я конечно все понимаю и персонаж интересный и анимация если что и цветокор,но я впервые вижу чтобы менять цвет просили кодом
Обычно его можно поменять в отдельных слоях
Да и можно заранее сделать несколько вариантов
Зачем так усложнять
Но я заинтересовался и хочу сделать вам этого персонажа
Детали в личке
Пишите
-
мало кто из художников занимается программированием)
-
Актуальные фриланс-проекты в категории Векторная графика
Создание ПЛАШКИ в SVG (с динамическими данными).Идея такая: Есть логотип в СВГ, нужно сделать из него плашку со знаком доверия. При этом слова и год будут подстваляться сервером, мы их не рисуем, только делаем плейсхолдеры под них. Приложил ТЗ, которое пишет ИИ под серверную реализацию. Также прикладываю несколько файлов… Векторная графика, Логотипы ∙ 5 часов 33 минуты назад ∙ 11 ставок |
Генеалогическое дерево, лазерная резка, вырезание бумагиДобрый день, обращаюсь с вопросом, готовы ли вы вручную воссоздать графику в векторном формате и подготовить её для лазерной резки. У меня есть проект декоративного генеалогического дерева в формате PNG. Графика была изначально сгенерирована с использованием инструментов ИИ и… Векторная графика ∙ 4 дня 2 часа назад ∙ 23 ставки |
Иллюстратор / дизайнер для анимационного социального ролика
8000 UAH
Ищем иллюстратора / дизайнера для анимационного социального роликаИщем дизайнера, который сможет создать векторные иллюстрации для дальнейшей анимации социального видеоролика.Тема проектаЭмоциональный социальный ролик о важности принятия ребенка в семью и влиянии семейного… Иллюстрации и рисунки, Векторная графика ∙ 4 дня 5 часов назад ∙ 6 ставок |
Разработка векторного знака/логотипа для премиального проекта (под слепое тиснение)Мы запускаем международный образовательный квест «Curio Enigma». Задача: Разработать графический знак (логотип) проекта. Визуальнаястилистика: Нам нужен строгий, дорогой и функциональный минимализм. Основной эстетический ориентир — атмосфера фильма «Казино Рояль». Знак должен… Векторная графика, Логотипы ∙ 4 дня 13 часов назад ∙ 52 ставки |
Производственный макет для ливреи для гоночного автомобиляПока марки и модели не прислал, ТЗ можно уже так разместить. Оно выглядит профессионально и сразу отсечет людей, которые никогда не делали оклейку автомобилей. Производственный макет ливреи для спортивных автомобилей О проекте Необходимо подготовить производственные макеты для… Векторная графика ∙ 4 дня 20 часов назад ∙ 8 ставок |