Задать вопрос
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
css

Каким образом создаётся единая концепция указанного на скрине дизайна?

Приветствую всех.

Вот есть экран со страницы:
5ae9c5f98eca5727401840.png
Как я понимаю, тут CSS+SVG вперемешку. При том, всё это с контролем света. Подскажите, это вот вручную подгоняется одно к другому (и в голове держится конечная концепция того, что должно получиться) или это может делать какой-то ЕДИНЫЙ инструмент?

Хотелось бы понимать, как создаются такие вещи, использующие корректные градиенты, правильный свет и изометрию (2.5D).

Прошу помощи в подсказке с указанием на нужное направление для изучения.
Спасибо!

UPD:Благодаря подсказке Алекс с названием редактора Gravit Designer и поиску на ютубе, я нашёл такой видео-урок. Пока, этот самый реальный вариант, на чём можно делать подобные вещи. Правда, все градиенты там ставятся вручную и нужно чётко понимать физику света (образование теней, отблесков и т.д.) для правильного выбора градиента.
  • Вопрос задан
  • 599 просмотров
7 комментариев
Подписаться 4 Средний 7 комментариев
Решения вопроса 2
KeySVG
@KeySVG
аниматор svg / html5
Народ, это же изометрическая графика. Плоская. В векторном редакторе делается сетка с 30 градусным наклоном (на глаз определил) и по ней привязка объектов. Переливы все градиентные. Можно векторным редактором все сделать, без фотошопа и тем более фигмы!
Ответ написан
3 комментария
3 комментария
@AlexNovi
1) Начать создавать такой дизайн можно с иллюстрации в Ai, вот тут был уже вопрос по поводу таких иллюстраций С помощью каких программ рисуют такие картинки? И тени и градиенты в Ai создаются.
вот пример урока: https://www.youtube.com/watch?v=VAHV6FHtzpg

2) Далее чтобы создать дизайн веб-страницы, например в PS, нужно (по слоям, если это потребуется, или целую картинку) перенести картинки из Ai, фон рисуем в Ps, текст набираем в Ps, кнопку тоже в Ps и заливает градиентом. Сохраняем Jpg.

3) Скачиваем Mockup, например тут , ноутбука и вставляем сохраненную картинку из Ps. Всё это тоже можно сделать в Ps.

4) Вот и получается все то, что на вашем примере :)

А еще есть метод проектирования такой Изометрии с тенями в 3D программах, а потом в PS это все разукрашивается: https://www.youtube.com/watch?v=RPyrUI6s10w&featur...

Вот в программе GRAVIT Designer урок: https://vitorials.net/how-to-create-isometric-illu...
https://www.youtube.com/watch?v=yLg0Gl0EyGc
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 3
@McBernar
Какой свет? Какие 3д/цсс/свг?
Это просто иллюстрация в png. На оригинальный сайт посмотрите.
Ответ написан
Комментировать
Комментировать
mixail_fet
@mixail_fet
Дизайнер веб-интерфейсов
Привет.
Если я правильно понял вопрос, и ты спрашиваешь, с помощью чего был создан итоговый макет, то тут, на первый взгляд, используется несколько инструментов:

1. Adobe Illustrator - для создания векторных иллюстраций
2. Adobe Photoshop - для обработки этих иллюстраций, и качественной теней и света
3. Adobe XD или Figma, или Sketch, для создание макета самого сайта и сбора всех картинок и иллюстраций.

Но это не панацея, тут можно использовать только Иллюстратор или только Фотошоп, но это будет менее эффективней.

Тебе нужно определиться, что именно ты хочешь? Создавать иллюстрации или делать макеты?
Ответ написан
17 комментариев
17 комментариев
xoma3131
@xoma3131
Рассмотрим задачу немного со стороны. Допустимс мы команда разработчиков(или один разработчик это не важно) получили задание сделать сайт согласно картике приложеной выше, может быть есть еще описание поведение элементов, анимации или даже разбиение анимции по кадрово в зависимости от действий пользователя. Так же допустим у нас нет ни каких ограничений по срокам, технологиям итд. Есть задача, заказщик хочет результат а дальше творите. У нас есть несколько вариантов дальнейших дествий.

1) В лоб, от восприятия - дизайна. Мы понимаем, что элементы оформления это по сути 3D сцена с построением перспективы и простой физикой света.

Тогда мы можем:
* Вынести всю графику в отдельный слой. Пусть в данном случае это будет canvas
* В другом слое достатчно просто сформировать контентное наполнение сайта

Для работы с 3D сценой мы можем или взять готовую библиотеку или сделать собственное решение которое будет растеризировать нам эту сцену на плоскость которую мы можем встроить в верстку - canvas. Допустим мы решили не тратить свое время и нас устраивает имеющееся решение мы берем бибилотеку. Например мы взяли THREE.js. Мы позиционируем canvas так чтобы вписать будующую сцену в дизайн. С помощью javascript и решения которое мы выбрали отрисовывается необходимая нам 3D сцена, если нужно добавля логику в зависимости с реакцией пользователя (движение мыши итп). Поверх canvas мы позиционируем наш статический сайт (текст кнопочки итд). Для реализации мы использовали (в минимальном исполнении) html, css, js, возможно так же шейдеры и 3D модели если не получилсоь обойтись примитивами.

2) В лоб, от декомпозиции - логики компонентов, процесса.
Мы хотим раздробить проект на компоненты и реализовывать покомпонентно, или мы понимаем, что каждый элемент интерфеса должен быть абсолютно самостоятельным. возможно этим будут заниматься разные разработчики. Тогда скорее всего если не было предварительно договорености. то каждый разработчик выберет наиболее интересный или простой для него способ реализации компонента. И в итоге мы получим солянку из кучи билиотек и технологий. Главное потом на финальном этапе скородинировать логику компонентов. Использованые технологии (html + css + js + то что мы посчитали нужным в каждом конкретном компоненте)

3) В лоб от технологий.
Мы говорим что у нас есть ограниченый набор технологий которые мы можем использовать. Минимально необходимый набор технологий для реализации подобного как на картинке html и css. Но более кофортным будет html, css и svg. Мы ограничили набор технологий и от примитивного к более сложным визуальным конструкциям реализовываем. Используя способы обмана восприятия пользователя чтобы добится эфектов трехмерности, существования сцены и освещения итд.

Выше я очень кратко описал разные варианты подходов к созданию единой концепции восприятия пользователем. Сушествует еше бесконечно много подходов и способов реализовать процес разработки. Выбор и наполнение каждого конкретно зависиот отконкретной задачи, различных условий и исполнителя. Зачем я длинный ответ? Чтобы дать понять Единого иструмента (серебряной пули) на все случаи нет, всегда приходится идти от множества факторов. Глядя же только на картинку я бы чисто визуальную сцену в canvas использовав тот же THREE.js и отдельно поверх сцены спозиционировал все управление и текст. Если это не статика и если нет развесистой логики поведения элементов и отображения. там уже стоит думать дальше.
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Senior Frontend (JavaScript) разработчик
Vital Partners
от 350 000 до 420 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Создание партнерки под ключ за 5 дней
20 февр. 2025, в 12:23
50000 руб./за проект
Веб-разработчик CMS Directus
20 февр. 2025, в 12:01
500 руб./за проект
Юзабилити-тестирование сайта с мобильного — 20.02.2025 в 16:00 по МСК
20 февр. 2025, в 11:21
300 руб./за проект
Ещё заказы