Следование этим простым правилам исключает многие проблемы, возникающие при работе с разработчиками и дизайнерами.
Организация работы
1. Не плоди лишних файлов
Файл не используется в проекте? Удали его. Лишние файлы создают мусор и ухудшают работу.
![Не плоди лишних файлов](https://design-secrets.ru/wp-content/uploads/2014/06/pravilo1.jpg)
Не плоди лишних файлов
2. Исходники храни в папке /source/
Создай отдельную папку /source/ или /ishodniki/, и храни в ней все исходники проекта. В корень проекта записывай только основные psd-шники.
![Исходники храни в папке /source/](https://design-secrets.ru/wp-content/uploads/2014/06/pravilo2.jpg)
Исходники храни в папке /source/
3. Прикрепляй к проекту несистемные шрифты
Копируй файлы шрифтов в папку /source/. Если шрифт несистемный, то велика вероятность его отсутствия у верстальщика..
Не забывай про лицензионные ограничения, налагаемые на коммерческие шрифты.
4. Называй файлы с учетом версии
К названиям файлов добавляй приставки, позволяющие легко определить актуальную версию. Например: ilovefile-1.psd или ilovefile-final.psd
![Называй файлы с учетом версии](https://design-secrets.ru/wp-content/uploads/2014/06/pravilo4.jpg)
Называй файлы с учетом версии
5. Называй файлы по-английски или транслитом
Не называй файлы по-русски. При переносе файлов с PC на Mac могут слететь названия. Работать с файлами типа «?????.psd» не совсем удобно.
Этот «замечательный» эффект часто наблюдается при распаковке .rar архивов, содержащих файлы, названные по-русски.
![Называй файлы по-английски или транслитом](https://design-secrets.ru/wp-content/uploads/2014/06/pravilo5.jpg)
Называй файлы по-английски или транслитом
6. Используй .zip вместо .rar
RAR-архивы не совсем идеально поддерживаются на UNIX-системах (MacOS, Linux). Возьми в привычку использование zip-архивов. Упрощаешь жизнь окружающим — улучшаешь отношение к себе.
![Используй .zip вместо .rar](https://design-secrets.ru/wp-content/uploads/2014/06/pravilo6.jpg)
Используй .zip вместо .rar
Слои документа
1. Не склеивай слои без необходимости
Оставив слои несклеенными, ты повышаешь скорость внесения правок в твои макеты. Перевод текста в растр тоже не рекомендуется.
Делай растеризацию слоев только перед версткой и только для слоев, содержащих сложные эффекты.
![Не склеивай слои без необходимости](https://design-secrets.ru/wp-content/uploads/2014/06/pravilo2_1.jpg)
Не склеивай слои без необходимости
2. Используй папки
Группируй слои по папкам. Для каждой страницы создай свою папку и дай ей соответствующее название.
![Используй папки](https://design-secrets.ru/wp-content/uploads/2014/06/pravilo2_2.jpg)
Используй папки
3. Раскрашивай папки
Упрости чтение файла и жизнь окружающих — раскрась папки первого уровня в различные цвета.
![Раскрашивай папки](https://design-secrets.ru/wp-content/uploads/2014/06/pravilo2_3.jpg)
Раскрашивай папки
4. Задавай глобальные элементы
«Шапку», «подвал», логотип и другие сквозные элементы сайта имеет смысл выносить в отдельную папку, делая их глобальными. Не следует их копировать в папку каждой страницы.
![Задавай глобальные элементы](https://design-secrets.ru/wp-content/uploads/2014/06/pravilo2_4.jpg)
Задавай глобальные элементы
5. Давай слоям названия
Не забывай называть слои. Если у тебя более сотни слоев с названиями типа «Layer N», то файл становится абсолютно нечитаемым.
![Давай слоям названия](https://design-secrets.ru/wp-content/uploads/2014/06/pravilo2_5.jpg)
Давай слоям названия
6. Верстальщик сверстает все, что увидит
И будет прав. Не думай, что если один слой скрывает другой (вспомогательный, неправильный или просто забытый), то верстальщик его не увидит и не сверстает. Удаляй из документа лишние слои.
![Верстальщик сверстает все, что увидит](https://design-secrets.ru/wp-content/uploads/2014/06/pravilo2_6.jpg)
Верстальщик сверстает все, что увидит
Особенности дизайна
1. Не забывай про экранные разрешения
Оформляй рабочую часть страниц в пределах 1000 пикселей, если хочешь, чтобы сайт одинаково хорошо смотрелся на всех экранных разрешениях. Это правило актуально и для резиновой верстки.
![Не забывай про экранные разрешения](https://design-secrets.ru/wp-content/uploads/2014/06/pravilo3_1.jpg)
Не забывай про экранные разрешения
2. Используй сетку
В ряде случаев рекомендую использовать сетку. Оформленный по сетке контент лучше воспринимается пользователем и легче верстается. Настроить сетку можно с помощью направляющих («Guides»)
![Используй сетку](https://design-secrets.ru/wp-content/uploads/2014/06/pravilo3_2.jpg)
Используй сетку
3. Кегль шрифта задавай целым числом
Высоту шрифта (кегль) задавай целыми числами. Результат верстки будет более прогнозируемым.
![Кегль шрифта задавай целым числом](https://design-secrets.ru/wp-content/uploads/2014/06/pravilo3_3.jpg)
Кегль шрифта задавай целым числом
4. Комментируй то, что нарисовал
Верстальщики — не гадалки и не умеют читать мысли дизайнеров. Комментируй все важные моменты.
Кратко и ясно опиши свои потребности в текстовом файле или используй заметки («Window» → «Notes»).
![Комментируй то, что нарисовал](https://design-secrets.ru/wp-content/uploads/2014/06/pravilo3_4.jpg)
Комментируй то, что нарисовал
Экспорт файлов
1. Перед экспортом проверь орфографию
Перед экспортом изображений всегда проверяй орфографию. Своевременно обнаруженная ошибка экономит время и нервы.
![Перед экспортом проверь орфографию](https://design-secrets.ru/wp-content/uploads/2014/06/pravilo4_1.jpg)
Перед экспортом проверь орфографию
2. Save for Web & Devices…
Не сохраняй файлы через «Save as». Файлы будут большего размера, чем при сохранении с помощью «Save for Web & Devices…».
При сохранении через «Save As…» записывается много служебной информации. Например, превью картинки или информация о снимке (EXIF). Все это отрицательно сказывается на размере файла.
![Save for Web & Devices…](https://design-secrets.ru/wp-content/uploads/2014/06/pravilo4_2.jpg)
Save for Web & Devices…
3. Разумное JPEG-качество при экспорте
По умолчанию поставь качество в пределах 51—80. Опытным путем определено, что ниже 51 качество изображений начинает катастрофически падать.
Хочешь подробностей? Сергей Чикуёнок изучал этот вопрос и написал подробную статью.
![Разумное JPEG-качество при экспорте](https://design-secrets.ru/wp-content/uploads/2014/06/pravilo4_3.jpg)
Разумное JPEG-качество при экспорте
4. JPEG или PNG?
Выбирай правильные форматы при экспорте изображений. Фотографии и сложные рисунки с обилием градиентов сохраняй в JPEG. Если у тебя несложная иллюстрация или требуется прозрачность, то сохраняй в PNG.
![JPEG или PNG?](https://design-secrets.ru/wp-content/uploads/2014/06/pravilo4_4.jpg)
JPEG или PNG?