Иллюстрация с персонажем в формате 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;
}
Если иллюстратор не может написать код, есть программист, который допишет. От иллюстратора тогда просто иллюстрация в svg
Жду ваших предложений стоимости и сроков выполнения.
Если есть вопросы по заданию - пишите.
Приложения 3
-
233 Доброго дня)
Готова співпрацювати з вами
Маю навики роботи з Adobe Photoshop, Adobe Illustrator, Adobe Indesign
Також малюю на графічному планшеті в програмах Procreate і Affinity Designer
Моє портфоліо тут:
Behance:Behance
Instagram: https://www.instagram.com/mariana_tsiupka/
-
295 Привет. Очень заинтересована в проекте. Я иллюсратор и работаю в команде с орудированным программистом. Выполним по всем пунктам, максимально креативно в рисовке и детально качественно технически .
-
3297 83 1 Здраствуйте! Да писать коды не могу, но проект очень интересный и с радостю могу поработать над ним, так как рисую для детских книг много и часто. Это,так понимаю, книга которая будет персонализироваться под конкретного ребенка? (универсальный макет который потом будут менять в зависимости от цвета глаз волос ребенка) Задумка класная, стилистика тоже знакома. На иллюстрации можете посмотреть у меня в профиле. Будет интересно потворить вместе!
-
449 27 3 Добрый день, боюсь мало кто владеет данной ьехникой,да и гораздо легче просто нарисовать в svg и менять детали по желанию
Опыт работы есть и готов поработать с вами
Пишите если интерисует обычная илюстрация
-
6967 57 0 2 Здравсвуйте, мало художников и програмистов в одном лице, могу вам предложить просто иллюстрации в SVG, если интересно, пишите, обсудим детали.
Буду рад сотрудничеству.
-
Цитата: "Если иллюстратор не может написать код, есть программист, который допишет. От иллюстратора тогда просто иллюстрация в svg".
Если булочник не может написать код, с него тогда просто выпечка булок, а код, так и быть, напишет программист. Гениально.
-
Актуальные фриланс-проекты в категории Javascript и Typescript
Оптимизация скорости сайта WordPress
5088 UAH
полные детали отправим в личные сообщения Цель Максимально ускорить загрузку сайта, особенно на мобильных устройствах. KPI (обязательно) После завершения работ необходимо добиться следующих показателей. Mobile Performance 90+ LCP менее 2.2 сек INP менее 200 мс CLS менее 0.1… HTML и CSS верстка, Javascript и Typescript ∙ 15 часов 15 минут назад ∙ 45 ставок |
Интеграция калькулятора стоимости услуг на сайт Webflow
14 807 UAH
Ищем разработчика для интеграции готового калькулятора стоимости услуг на наш сайт, созданный на Webflow. О компании Мы занимаемся: сборкой мебели; монтажем телевизоров; монтажем полок, картин, зеркал и других предметов; помощью при переезде; подъемом тяжелых предметов; услугами… Javascript и Typescript, Веб-программирование ∙ 16 часов 15 минут назад ∙ 44 ставки |
Ищу опытного Full Stack разработчика для создания SaaS-сервиса для интернет-магазинов.Идея сервиса: Клиент загружает ссылку на свой товарный фид (XML или CSV). Сервис автоматически получает товары, берет их фотографии и создает новые рекламные изображения по готовым шаблонам: цена, скидка, логотип, акционные плашки и т.д. Также в сервисе должен быть простой… Javascript и Typescript, Веб-программирование ∙ 3 дня 22 часа назад ∙ 86 ставок |
Разработка WebGL/Three.js сцены с генерацией и экспортом 3D (snapshot) из анимированного шейдераОписание объекта:Проект представляет собой дизайнерский стол, выполненный в форме реалистичного, глубокого водоворота (центральная воронка, которая плавно переходит из широкой горизонтальной столешницы в тонкую изящную ножку). Суть задачи:Требуется WebGL / Creative Coding… Javascript и Typescript, Веб-программирование ∙ 4 дня 19 часов назад ∙ 30 ставок |
Поддержка и развитие сайта клининговой компании
890 UAH
Ищу веб-разработчика / веб-мастера для долгосрочной поддержки и развития сайта клининговой компании. Сайт: https://donely.ca О проекте DoneLy Home Services — компания по предоставлению услуг уборки в Канаде, которая активно развивается и расширяет географию работы. Ищу… Javascript и Typescript, Веб-программирование ∙ 6 дней 21 час назад ∙ 64 ставки |