Создаём разметку для html страницы в Photoshop

В этом уроке я расскажу Вам, как можно с помощью простых в использовании инструментов сделать разметку для интернет-страницы.

Создадим новый документ размером 1024*768. Этот размер в основном и используют вэб-разработчики для создания сайтов, то есть это стандартный размер документа.
Нам необходимо расставить направляющие, по которым будем делать разметку. Для этого необходимо вызвать так называемое вспомогательное окно «Линейки». Чтобы это сделать, нужно нажать на клавиши Ctrl+R.
Чтобы расставить направляющие, нужно с полоски линеек перетянуть полосу синего цвета на изображение. Сделаем сначала саму основу разметки, основу шапки страницы, левого и правого меню сайта и футера.
Сделаем левое меню. Оно будет занималть 200 пикселей. Поэтому проводим направляющую слева направо на 200 пикселей.
Правое меню будет сложно посчитать в размерах, поэтому просто ставим направляющую на значение 750 пикселей по горизонтали.
Шапка сайта будет занимать 100 пикселей, поэтому перетягиваем направляющую сверху вниз на сто пикселей. Для того, чтобы точно попасть на нужное число, при наведении направляющей зажмите клавишу Shift. У вас должно получится так.
Размер футер также сложно посчитать, для него направляющую ставим на значании 680 пикселей по вертикали.
Для того, чтобы разметка отображалась в html, необходимо выбрать инструмент «Раскройка» и по нашим направляющим сделать раскройку на фрагменты.
Использовать этот инструмент можно так, как и инструмент «Прямоугольник» или «Прямоугольная область выделения», тоесть рисовать прямоугольник. Только теперь разметка не требует слоёв, она не может выделять какой-то фрагмент изображения.
Для того, чтобы разметка отображалась правильно, то есть футер и шапка занимали 100% изображения по горизонтали, нужно сначала нарисовать левое и правое меню, а потом уже поверх них рисовать футер и шапку.
На этом простая разметка закончена, теперь нужно сохранить её так, чтобы потом можно было открыть как html станицу. Перейдите во вкладку «Файл» и выберите «Сохранить для вэб и устройств». Нажмите кнопку «Сохранить» и выберите формат «Только html».