Вот так выглядел сайт в прошлом:

Возможно я не профессионал в веб-дизайне, но думаю, уровня любителя уже достиг. Вот чтобы не было стереотипов и мнений что "профи это с рождения" - посмотрите на эту работу "до" и сравните с тем, что получится "после" и поверьте именно ваше "нуу... я так не смогу" остановит вас на том, что было "до".

Итак, начнём, поскольку эта заметка про вёрстку, а не про дизайн подробностей как рисовалось - не будет, а будет уже готовая картинка:

_{Кликните чтобы увеличить}

Эта картинка в оригинале была и осталась в формате PSD - файл программы Photoshop. Поэтому и работать с ней будем в этой же программе. Следующий процесс, который нас ожидает, в простонародье называется "нарезка".

_{Кликните чтобы увеличить}

Линии, которые вы видите, в программе Photoshop тянуться от краёв линейки (Ctrl+R) инструментом Move Tool (V).

Далее потом уже из маленьких кусочков собирается сайт.

Вам наверное будет интересно, а что мешает вставить картинку целиком? На самом деле - ничего не мешает. Но здесь есть несколько факторов:
- первый вес порезанной картинки меньше целой.
- второй, порезанные блоки более "манёвренны" и не нужно быть
дизайнером, чтобы поменять их местами.
- на данном сайте используются заменяющие друг друга картинки меню. Любой сервер, а также браузер - быстрее выдадут/загрузят картинку маленького меню. Нежели бэкграунд всего сайта.

Вот в Excel я делал расчёты, делал чтобы всё было точно и наверняка, если кто-то умеет очень хорошо рассчитывать в голове, я очень за него рад, может так не делать:

_{Кликните чтобы увеличить}

А готовый вариант выглядит так:

_{Кликните чтобы увеличить}

Оригинал статьи здесь: вёрстка сайта