Как сделать верстку по макету?

Question

[BltbCity]

У меня есть дизайн сайта. (макет) Это обычное изображение. Как верстать? В смысле, как узнать шрифты, отсчитать точное расположение между обьектами, как узнать цвета?

Comments

[Hanneman]

Ваш вопрос сводится к "как верстать" - а это не объяснить парой слов. Если кратко ответить, то ответ на ваши вопросы - Adobe Photoshop или бесплатные аналоги.

[Rustam Bainazarov]

LOL. Если прямо картинка а-ля PNG… Ну, что сказать. Шрифт — на глаз. Остальное, если макет правильный (1:1), можно в Photoshop'е измерить, цвета оттуда же.

Answer 1

[archelon]

откройте в любом графическом редакторе (photoshop).
шрифты «на глаз», цвета пипеткой, размеры линейкой.

Comments

[BltbCity]

Огромное спасибо! Но вы уверены что на глаз? Нету никакой программы? Может дополнения? Или дизайнер должен сказать какой шрифт использовал?

[Александр]

текстовом редакторе

Текстовом?

[archelon]

BltbCity, Если у вас макет просто картинка (jpg или png), то только на глаз, конечно. Ну или спросить у дизайнера. Хотя лучше, если он пришлет нормальный макет (исходник).

[archelon]

Александр, :-)

[BltbCity]

Александр, А кто не ошибается?))

[Максим]

archelon, если макет просто картинка - надо их посылать) С этим работать будет сложно. Но а вообще есть много онлайн ресурсов по распознаванию шрифтов. Точно определить не всегда получается, но примерный подобрать можно. А глаз ваш точно с ума сойдёт) А если это уникальный шрифт сделанный дизайнером!)))

Answer 2

[Максим]

Вот вам детально все расписано)

https://m.habr.com/ru/post/202408/

- Шрифты есть в макете PSD. Их можно загуглить, скачать и подключить. Ели уникальные, то дизайнер их должен даже выслать.
- Цвета можно из маркета PSD пипеткой или выбрав нужный элемент.
- Размеры шрифта указываются в пунктах. Нужно просто настроить фотошоп чтобы отображал в px.
- Размеры других элементов могут указываться в мм, если это так, то нужно тоже просто перевести их в пиксели.

Ну и так далее. Информации по этой теме в интернете много. Есть даже видео и куча уроков. Я вам скинул один пример. Для старта этого будет достаточно.

Comments

[BltbCity]

Спасибо!

Answer 3

[Павел Диденко]

Есть очень удобный инструмент, Avocode, вполне заменяет фотошоп для работы с макетом. Все шрифты, цвета, отступы можно получить из него. Первые 30 дней бесплатно, дальше, вроде 6$.

Comments

[BltbCity]

Спасибо!