Очень часто для создания одного целостного изображения дизайнер использует несколько слоев в Photoshop. Однако, в html верстке сайта верстальщик хочет представить это изображение одним файлом, а не несколькими.
Рассмотрим, как в этом случае будет работать автоматическая css верстка сайтов. По умолчанию, из каждого слоя в Photoshop будет создаваться отдельный файл с изображением. Очевидно, что это негативно скажется на качестве html верстки:
- будет создано много изображений,
- увеличится размер загружаемой страницы, а соответственно, и скорость загрузки,
- код будет не читаемым.
Победить эту проблему очень просто. Следует воспользоваться одним из двух недеструктивных методов:
- Создайте новую группу слоев и поместите в нее все слои, соответствующие изображению. Пометьте группу тегом #merge. В процессе автоматической верстки сайта такая группа слоев будет автоматически объединена в один слой.
- Создайте из нескольких слоев один Smart Object. Чтобы создать Smart Object, выделите нужные слои на панели слоев и запустите команду «Layer» -> «Smart Objects» -> «Convert to Smart Object».
Такой подход, во-первых, поможет вам создать html верстку сайта более высокого качества. И, во-вторых, ваш PSD файл станет более структурированным и читабельным — вам самим будет намного легче с ним работать.
