Итак, отличие макета от полноценного сайта в том, что макет у вас на компьютере а сайт в интернете… но это не точно. Всё, что вам нужно для вёрстки макета любого уровня сложности это интернет, компьютер и текстовый (графический так же не повредит) редактор. Итак, нам известно, что сайт представляет из себя лишь набор графики, текста и прочего медиа, всё это располагается на странице благодаря движкам отображения веб страниц, которые читают html-документы и на их основе выдают веб-страницу с неким наполнением и стилями (взятыми либо из отдельного css файла, либо из атрибута style html-тегов страницы. Но это основа основ, задерживаться на этом не будем. Нам нужен сайт, при чём более-менее приемлемого уровня и достаточно быстро. Как нам это сделать? Использовать Adobe Photoshop (ну или любой другой графический редактор поддерживающий слои и линейки), главное, не переусердствуйте, вам это потом ещё в html/css/js переводить, что не так просто, как может показаться. Ведь как и у любой технологии, у веб-вёрстки есть свои условности и ограничения, то есть вам ничего не мешает насоздавать огромное множество div’ов и довольствоваться результатом уровня Бутстрапа, но зачем тогда вы читаете эту статью? Просто используйте Bootstrap или его аналог… да хоть Tilda. А если вам хочется чего-то более читаемого и хорошо воспринимаемого поисковыми ботами, то продолжаем.
Основное правило в том, что вы создаёте макет целой страницы. То есть нужно делать макет достаточно большим по высоте, лишнее можно будет потом обрезать, но вот добавлять лишнее пространство не особо… хотя, тоже можно, это на ваш выбор. Лично я всегда беру лишнего. То же самое касается и ширины с границами, то есть, нужно делать ширину на 50-100 пикселей больше чем требуется, всё для более удобного использования линеек.
Не буду я расписывать как всё это делать, это довольно интуитивно понятно, единственное, что хотелось бы выделить — использовать группы и подгруппы для слоёв (не забудьте давать имена слоям и группам, это облегчит дальнейшую работу и редактирование) и группируйте их, но не по названиям или направленности (хотя, если вам удобно, то можно и так) а по логической принадлежности.
Что же касается переработки в html… идеального варианта вёрстки нет, всё всё равно придётся либо искать компромисс, либо использовать CSS-функцию @MEDIA для каждого соотношения сторон и размера экрана, но кто говорил, что будет легко? Всё ради удобства на любой платформе и в случае производства авторского контента не забудьте создавать версии ваших страниц «для печати», не уверен, что этим пользуются так уж много людей, но всё же.
Так же стоит отметить то, что не стоит пытаться делать макет излишне нагруженным. Во-первых, вы просто ногу сломаете в попытках перенести его в html, так он будет долго грузиться, что не есть хорошо. На этом всё, удачи!