HTML/CSS Evangelist

Размышления на тему HTML верстки

Вчера получил от дизайнера psd-файл (вообще, мне часто приходится иметь дело с «псдшками» — я ведь с ними работаю). Но, вчера дело было не совсем обычным :) Нестандартность ситуации заключалась в приёме сжатия файла — в нем были отключены все слои.

Честно говоря, я впервые встретил именно такой способ уменьшения размера psd-фалов , хотя на Хабре он упоминался. Ранее мне были известны некоторые иные методики сжатия psd, о которых я и хочу рассказать Вам сегодня.

1) Удаление лишних слоёв

Один из самых эффективных способов уменьшить размер psd-файла — это удалить все лишние слои в нем.

Плюсы данного метода:

• уменьшает размер файла;
• улучшает работоспособность фотошопа с данным документом;

Минусы метода:

• иногда заказчики просят вернуть исходный вариант, как когда-то было и это «когда-то» часто находится в скрытом слое, который мы успели благополучно удалить :)

2) Crop документа

Дизайнеры любят использовать при работе большие изображения. Часто, эти картинки по своим габаритам превышают размер самого макета, и часть изображения остаётся за его видимыми пределами. Если мы выделим по краям документ и применим «Crop Tool» , то все, что находится за его пределами будет обрезано — это позволит значительно сэкономить место.

Плюсы данного метода:

• уменьшает размер файла;
• улучшает работоспособность фотошопа с данным документом;

Минусы метода:

• иногда заказчики просят сдвинуть изображение (левей\правей\выше\ниже), но к сожалению, оно уже будет обрезанным;
• бывает, что дизайнеры применяют к слою стили, которые зависят от размера картинки, например Gradient Overlay. Crop Tool может привести к изменению внешнего вида слоя и как следствие всего макета. Поэтому желательно, чтобы Crop выполнял сам дизайнер. Если же дизайнер в зоне недосягаемости и приходится применять Crop самостоятельно, тогда нужно тщательно сверять полученный макет с оригиналом на предмет отличий.

Предотвратить смещение стиля можно если его «растеризировать». Для этого необходимо «стилизированный слой» объединить с чистым слоем (Merge Layers или Cntrl+E), в таком случае редактировать стиль слоя уже будет невозможно.

3) Заливка документа однородным цветом

Каждый раз, когда мы сохраняем psd-документ, автоматически создается «превью» (preview layer) макета. Это делается для того, чтобы можно было быстро просмотреть psd-файл без открытия всех его данных и применения фильтров в реальном времени. Конечно же это «превью» занимает место и наша задача состоит в том чтобы его уменьшить.

Чаще всего, для этого создается верхний слой и заливается однородным цветом (как правило белым), бывают еще случаи когда просто отключают все слои, о чем я писал выше :)

Не все знают о том, что выбор цвета заливки влияет на результат. Я уже писал, что чаще всего заливают белым цветом, однако если мы будем использовать вместо белого — черный, то в результате получим файл меньшего размера.

Плюсы данного метода:

• уменьшает размер файла

Минусы метода:

• мы лишаемся превью документа, для просмотра содержимого файла приходится открывать документ и скрывать верхний слой;
• создаем лишний (маскирующий) слой.

4) Объединение слоев.

Часто бывает, что документ содержит избыточное количество слоев, которые можно смело слить в один, самый яркий пример тому — это слить все фоновые картинки в одну. Однако на этом можно не останавливаться — наверняка найдется десяток элементов в макете, которые состоят из нескольких слоев, объединение которых даже улучшит «юзабельность» и уменьшат размер psd.

Плюсы данного метода:

• уменьшает размер файла

Минусы метода:

• ограничиваем себя в удобстве редактирования слитых слоев

5) Сжатие архиватором.

Сжатие в архив, пожалуй, самый часто используемый метод для уменьшения размера psd. Это простой и эффективный способ уменьшить размер и количество файлов, что важно при пересылке документов.

Существует множество архиваторов, чаще всего приходится работать с тремя:

• zip
• rar
• 7z (7-zip)

Zip:

наиболее часто используемый мною формат. Причина проста — он распространен, многие программы могут просматривать содержимое архивов, большинство операционных систем имеют нативную поддержку zip. Именно в этом формате я отправляю результаты своих трудов. Архивы старых проектов также храню в zip, из-за того, что поиск по содержимому не вызывает никаких проблем

Rar:

достаточно распространен в постсоветском пространстве, на западе применяется редко. Поэтому если вы работаете с иностранным клиентом — лучше забыть о rar.

7zip:

данный формат хорош тем, что бесплатен, но распространен в основном среди разработчиков, жмёт лучше всех из этой тройки. Применяю его редко и чаще всего в служебной переписке с коллегами, у которых он установлен. Клиентам посылать в 7zip я бы не стал — большая вероятность того, что у получателя не окажется инструмента для работы с архивом.

PS. 1-3 методы можно без труда автоматизировать средствами Action в Photoshop.

PPS. Эти методы удобно применять при отсылке PSD клиентам\верстальщикам и тд.