Как создать макет сайта в векторе?

Question

[Маша Захарова]

Как создать макет сайта в векторе например для такого рода лэндинга zorkamobile.com/wordpress/?
Раньше все делала в PSD. Возможно я сразу пойму, посмотрев на макет сайта в векторе и буду очень благодарна за пример.
Под какое разрешение создать макет (72dpi? или можно 300 dpi). Но векторные формы под формат веба в иллюстраторе некорректно строятся, сводятся по пикселям.
Также интересно как слои распределить?

Answer 1

[annaludova]

Я один раз создала макет в иллюстраторе, мне как дизайнеру это было удобней. Но верстальщик сайта запросил все то же в psd Переводить была морока. Я не наша автоматического перевода из иллюстратора в фотошоп по слоям.
Еще лучше сделать бы в ин-дизайне, но опять же вопрос - кто сможет с этим макетом что-то сделать?

Answer 2

[Иван Филатов]

Зачем создавать макеты в векторе?
В векторе создаются отдельные элементы, например иконки/миниатюры, чтобы потом их в SVG поместить на сайте.
Макеты надо создавать в PSD. Дополнив их нужными шрифтами, экспортными SVG и другими ресурсами для верстки.

Comments

[Маша Захарова]

зачем? мой верстальщик так хочет и мне бы думаю было бы намного удобней, но не знаю нюансы

[Иван Филатов]

ma_za: вообще можно и векторе создавать, если руки прямые. по сетке, затем делать экспорт для просмотра с нужным dpi под экран.
вообще не должно быть разделения, мол версталшик просит в векторе - создавай в векторе.
верстальщик откроет макет в растре, картинкой, поверх html страницы чтобы сравнивать размеры, отступы и т.д.
а откуда брать цвета, структуру и другие данные - верстальщику должно быть все равно.

но если решитесь создавать в векторе - то создавайте в RGB режиме. чтобы верстальщик не конвертировал ваш CMYK в RGB.

[Маша Захарова]

спасибо большое за ответ, все же в иллюстраторе легче выравнивать в плане сетки, с этим не будет проблем. сайт-лэндинг и не будет сложных структур по функционалу, верстальщику остается экспортировать. задача в основном связана с графическими элементами: иконки, инфографики на параллаксном бэкграунде. в RGB-это то понятно, а вот разрешение сделаю 300. верстальщик-программист из канады и может там больше практикуют макеты в векторе) но мне самой давно хотелось попробовать макет в векторе для реализации, так как изначально все наброски-поиски по дизайну сайта делала в иллюстраторе и очень удобно. просто ранее верстальщики требовали в psd

[Иван Филатов]

ma_za: в векторе нет понятия разрешения до этапа экспорта в растровый формат. есть понятие размер рабочей области, листа.

рекомендую вам найти готовые векторные шаблоны сайтов, скачать, и посмотреть как они устроены. и на основе их сделать свой "с нуля".

[Маша Захарова]

NYMEZIDE: ага, спасибо, поищу)

[Маша Захарова]

NYMEZIDE: есть понятие разрешения в векторе hsto.org/files/eea/0f8/cb6/eea0f8cb66c84e478dba05e...

[Иван Филатов]

ma_za: а ну да, ppi есть такое. но оно используется скорее для удобства дизайнера под его монитор и его разрешающую способность.
в любом случае вектор можно потом экспортировать под нужный размер макета.

[Маша Захарова]

NYMEZIDE: ок)

[Александр Зачиналов]

я сам верстаю и тоже работал с макетами в векторе. Скажу что все зависит от конкретного случая, иногда были макеты с огромным объемом загружаемой графики, причем некоторые элементы и иконки по 5px без векторного варианта, приходилось выискивать похожие или рисовать самому. В те случая я тоже мечтал о векторе, потому что это дает гарантию того, что ты сам потом можешь сделать себе растр. Именно так и именно такой какой хочешь

[Иван Филатов]

Александр Зачиналов: поделитесь шаблончиком векторного макета. так скажем для изучения и понимания. что-нибудь из старых и уже реализованных проектов.

[Александр Зачиналов]

добавлю еще, что некоторые макеты (особенно лэндинги) могут содержать различные крупные анимации, частицы и прочее, что тоже удобнее разбирать из вектора или самому перегонять в SVG по нужным частям. Это происходит потому что основная часть веб-дизов ни разу не знают верстку, т.е. часто они даже нарезая макет сами, промахиваются с правильной подачей и приходится переделывать.

Так что как ни крути, а с современными веяниями в веб-дизайне, не за горами то время, когда все макеты будут делать в векторе.

По поводу примеров: вы давно могли зайти на сюда и сами все найти https://www.youtube.com/results?search_query=дизай... я скину вечером если раскопаю свои бэкапы

[Маша Захарова]

Александр Зачиналов: спасибо большое, также не откажусь от ваших примеров