В этой статье я уделю внимание вёрстке дизайна сайтов.

Возьму за пример сайт, который я делал, когда только начинал учиться дизайну сайтов:


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

Что, выглядит ущербно? Я тоже так подумал, а потому решил его хотя бы как-нибудь переделать, чтобы выглядел лучше.

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

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


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

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


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

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

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

Вам наверное будет интересно, а что мешает вставить картинку целиком? На самом деле - ничего не мешает. Но здесь есть несколько факторов:

– первый, вес порезанной картинки меньше целой.

– второй, порезанные блоки более "манёвренны" и не нужно быть дизайнером, чтобы поменять их местами.

– на данном сайте используются заменяющие друг друга картинки меню. Любой сервер, а также браузер - быстрее выдадут/загрузят картинку маленького меню. Нежели бэкграунд всего сайта.

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


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

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


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

Спонсоры: