В прошлой части этого урока мы создали простейший 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…
октября 8, 2010 at 6:47 октября 8, 2010 at 6:47
очень интересно что будет дальше… с нетерпением жду следующей статьи
октября 8, 2010 at 15:11 октября 8, 2010 at 15:11
Спасибо за уроки