Блог разработчиков

Все разделы | CMS Joomla 2.5 | Общее | PHP | Javascript + jQuery

ПРАВИЛА ХОРОШЕГО ТОНА В «ФОТОШОПЕ»

27 апреля 2014

1. Организация работы
1.1. Не плоди лишних файлов

Файл не используется в проекте? Удали его. Лишние файлы создают мусор и ухудшают работу. 

1.2. Исходники храни в папке /source/

Создай отдельную папку /source/, и храни в ней все исходники проекта. В корень проекта записывай только основные psd-шники. 

1.3. Прикрепляй к проекту не системные шрифты

Копируй файлы шрифтов в папку /source/. Если шрифт несистемный, то велика вероятность его отсутствия у верстальщика. Не забывай про лицензионные ограничения, налагаемые на коммерческие шрифты.

1.4. Называй файлы с учетом версии

К названиям файлов добавляй приставки, позволяющие легко определить актуальную версию. Например: ilovefile-1.psd или ilovefile-final.psd 

1.5. Называй файлы по-английски или транслитом

Не называй файлы по-русски. При переносе файлов с PC на Mac могут слететь названия. Работать с файлами типа «?????.psd» не совсем удобно. Этот «замечательный» эффект часто наблюдается при распаковке .rar архивов, содержащих файлы, названные по-русски. 

1.6. Используй .zip вместо .rar

RAR-архивы не совсем идеально поддерживаются на UNIX-системах (MacOS, Linux). Возьми в привычку использование zip-архивов. Упрощаешь жизнь окружающим — улучшаешь отношение к себе. 

2. Слои документа
2.1. Не склеивай слои без необходимости

Оставив слои не склеенными, ты повышаешь скорость внесения правок в твои макеты. Перевод текста в растр тоже не рекомендуется. Делай растеризацию слоев только перед версткой и только для слоев, содержащих сложные эффекты. 

2.2. Используй папки

Группируй слои по папкам. Для каждой страницы создай свою папку и дай ей соответствующее название. 

2.3. Раскрашивай папки

Упрости чтение файла и жизнь окружающих — раскрась папки первого уровня в различные цвета. 

2.4. Задавай глобальные элементы

«Шапку», «подвал», логотип и другие сквозные элементы сайта имеет смысл выносить в отдельную папку, делая их глобальными. Не следует их копировать в папку каждой страницы. 

2.5. Давай слоям названия (адекватные)

Не забывай называть слои. Если у тебя более сотни слоев с названиями типа «Layer N», то файл становится абсолютно не читаемым. 

2.6. Верстальщик сверстает все, что увидит

И будет прав. Не думай, что если один слой скрывает другой (вспомогательный, неправильный или просто забытый), то верстальщик его не увидит и не сверстает. Удаляй из документа лишние слои. 

3. Особенности дизайна
3.1. Не забывай про экранные разрешения

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

3.2. Используй сетку

В ряде случаев рекомендую использовать сетку. Оформленный по сетке контент лучше воспринимается пользователем и легче верстается. Настроить сетку можно с помощью направляющих («Guides») 

3.3. Кегль шрифта задавай целым числом

Высоту шрифта (кегль) задавай целыми числами. Результат верстки будет более прогнозируемым. 

3.4. Комментируй то, что нарисовал

Верстальщики — не гадалки и не умеют читать мысли дизайнеров. Комментируй все важные моменты. Кратко и ясно опиши свои потребности в текстовом файле или используй заметки («Window» → «Notes»). 

5. Экспорт файлов
5.1. Перед экспортом проверь орфографию

Перед экспортом изображений всегда проверяй орфографию. Своевременно обнаруженная ошибка экономит время и нервы. 

5.2. Save for Web & Devices…

Не сохраняй файлы через «Save as». Файлы будут большего размера, чем при сохранении с помощью «Save for Web & Devices…». При сохранении через «Save As…» записывается много служебной информации. Например, превью картинки или информация о снимке (EXIF). Все это отрицательно сказывается на размере файла. 

5.3. Разумное JPEG-качество при экспорте

По умолчанию поставь качество в пределах 51—80. Опытным путем определено, что ниже 51 качество изображений начинает катастрофически падать. Хочешь подробностей? Сергей Чикуёнок изучал этот вопрос и написал подробную статью

5.4. JPEG или PNG?

Выбирай правильные форматы при экспорте изображений. Фотографии и сложные рисунки с обилием градиентов сохраняй в JPEG. Если у тебя несложная иллюстрация или требуется прозрачность, то сохраняй в PNG.