В прошлой части этого урока мы создали простейший PSD макет сайта, имеющего все основные части – шапку, боковую колонку, главное поле и подвал. Мы полностью решили художественный образ веб-страницы и теперь  настало время сделать полностью готовую для публикации версию. Следующий этап -это нарезка шаблона на готовые элементы. Его я решил этот процесс  выделить в отдельную статью

Итак, для разрезки нам понадобится инструмент Slice Tool, который в последней версии Photoshop входит в одну группу на панели инструментов с инструментом кадрирования Crop Tool.

Шапка

Перед разрезкой на всех слоях с текстом, а так же с кнопками подписки отключаем видимость. Для начала создайте небольшой фрагмент по ширине высотой, равной высоте шапки (с меню). См. рисунок:

Далее вырежьте кусок в середине шапки, занимающий, правда практически всю ее часть по ширине – 800 рх, если быть точным. Мы разбиваем шапку на центральную и боковые части для того, чтобы затем боковые части можно было тянуть по ширине монитора пользователей.

Аналогично поступаем с подвалом:

Теперь сделайте разрезку в месте кнопки. Увеличьте изображение, чтобы хорошо все видеть и обратите внимание на то, что обводка в 1 рх во фрагмент не попала.

Экспорт для веба

Нажмите клавиши <Alt+Shift+Ctrl+S> или выберите команду File/Save for web and devices… Влюбом случае откроется окно, в котором нужно снять галочку “convert to srgb”, выбрать формат – jpeg и клацнуть кнопочку Save.

Кстати, при сохранении файлов PS называет файлы не так как нам хотелось бы – просто берет имя PSD файла и присваивает каждому свой номер. Поэтому называйте каждый файл соответственно.

Тепрь приступаем к обратной операции. Отключите все слои кроме слоев с кнопками – иконками и логотипом, удалите прежнюю размету на фрагменты и создайте новую:

Эти элементы сохраняем в PNG формате.

Лишние файлы, получившиеся в результате нарезки можно удалить.

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

To be continued…

2 Комментариев на “Создаем веб-макет – II этап: нарезка”

  1. YoS Says:

    очень интересно что будет дальше… с нетерпением жду следующей статьи

  2. trololo Says:

    Спасибо за уроки :)