Откройте изображение в Adobe Photoshop, заранее продумав, из каких частей будет состоять сайт, а значит, на какие части нужно поделить исходный . Начните с создания направляющих линий для нарезки рисунка на фрагменты. Наметив все направляющие линии, выберите на панели инструментов опцию Slice, или вызовите ее нажатием клавиши К.
Обведите область, выделенную направляющими линиями, чтобы появилась синяя рамка, в которой вы увидите номер фрагмента. Обведите такой рамкой все фрагменты, выделенные линиями направляющих, а затем, используя инструмент Slice Select, щелкните на каждый фрагмент, если хотите изменить его размер.
После использования этого инструмента цвет рамки меняется с синего на желтый, и вы можете перемещать границы каждого фрагмента с помощью курсора мыши за боковые стороны и углы. Переключиться между режимами Slice и Slice Select можно оперативно, удерживая клавишу Ctrl.
Изменяйте размеры выделенных областей так, чтобы они не пересекались, и при этом не образовывали промежутков между границами. Выделив все фрагменты и нарезав рисунок на нужное количество областей, сохраните их.
В тех областях, где несколько фрагментов составляют однотонный фон, вы можете заменить их одним однотонным фрагментом, а также оснастить прозрачным рисунком в формате gif.
Использование формата gif в верстке веб-сайта дает вам определенное преимущество – это уменьшает размер страницы сайта, а также позволяет устанавливать некоторые объекты поверх фона, не скрывая его.
