Креативный процесс зачастую не имеет границ, в отличии от дискового пространства современных ЭВМ. Дизайнер при работе может создавать бесчисленное количество слоев с примерами кнопок, текстов, шрифтовых комбинаций и прочего. И все бы ничего, но чаще всего весь рабочий материал, а к моменту передачи файла верстальщику—— попросту мусор, остается в файле. Это ведет к двум проблемам: реальный вес файла значительно превышает полезный (лишние слои захламляют исходник) и мусорные слои могут повлиять на результат. То есть верстальщик, разбираясь в обилии всего, может запутаться и сверстать лишнее, приняв мусор за необходимое. Поэтому перед передачей дизайна на версту необходимо внимательно проверить файл и удалить все лишнее.

Не создавай лишних папок и слоев

К чему верстальщику разбираться в твоем мусоре? Удали его.

Рисунок 1 — Не создавай лишних папок и слоев

Чтобы не возникало ситуаций, когда теряются какие-нибудь файлы, или чтобы верстальщику не приходилось вручную вырезать элементы из *.psd, желательно возле проекта создать папку «Sourse», куда помещать весь рабочий материал.

Все исходники к проекту следует хранить в отдельной папке

Чтобы освободить себя от необходимости вспоминать где или куда ты скачал ту самую иконку, сохраняй все исходники в прикрепленной папке.

Рисунок 2 — Все исходники к проекту следует хранить в отдельной папке

Если исходники разнородны, то в данной папке имеет смысл создать подпапки Images, Icons, Fonts и другие при необходимости. Таким образом мы подошли к следующему правилу…

У каждого уважающего себя дизайнера на компьютере лежит n-ое количество разнородных гарнитур. Естественно, при разработке дизайна он не задумываясь будет их использовать. Но набор шрифтов на компьютере верстальщика чаще не так велик, или же вовсе может быть ограничен стандартными гарнитурами. Поэтому, для удобства верстальщика и вашего покоя (что у верстальщика на компьютере дизайн выглядит так же, как и у вас) необходимо все нестандартные шрифты прикреплять к проекту.

Для того, чтобы верстальщику было проще всего разобраться в результатах вашего труда, называйте файлы в соответствии с их версиями. Самым удобным вариантом может быть: site-1.psd, site-2.psd или site-final.psd (если вы уверены, что эта версия точно будет последней). Это поможет быстро и легко отыскать актуальную версию.

Создавая новые файлы, называй их в соответствии с версиями

Это старая версия! Зачем вы ее верстали? Чтобы у вас не возникал такой вопрос, который, ко всему прочему, несет убытки для работодателя, потрудись логично называть версии.

Рисунок 3 — Создавая новые файлы, называй их в соответствии с версиями

Для архивации вашего проекта лучше всего использовать формат *.zip, так как он более универсален, поддерживается на большинстве устройств, в то время как *.rar, к примеру, может не открыться на MAC.

При архивации используй *.zip вместо *.rar

На Mac'ах архивация производится в *.zip. Просто прими это.

Рисунок 4 — При архивации используй *.zip вместо *.rar

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

Именуй файлы только латиницей

Rjlbhjdrf gjkjvfkfcm. Не понятно? Верстальщику тоже.

Рисунок 5 — Именуй файлы только латиницей

Склеенные слои замедляют и усложняют процесс внесения изменений в макет сайта. Не создавайте проблем себе и коллегам.

Если есть возможность выполнить элемент дизайна с помощью shapes, то лучше всего отдать им предпочтение. Они более удобны, гибки в работе, обладают рядом преимуществ перед растром. Также, без необходимости на то, не следует растрировать текст.

Старайся реже использовать растр

В первую очередь это удобно для тебя: так правки в макет можно внести достаточно легко и быстро.

Рисунок 6 — Старайся реже использовать растр

Для удобства работы с файлом и огромным количеством слоев следует группировать слои и осмысленно называть эти группы. Часто в веб-дизайне выделяют Header, Content и Footer. От этого и можно отталкиваться. Дизайнеру, как человеку, который с этим работал, будет проще разобраться в беспорядке, чем тому, кто это видит впервые.

Группируй слои по папкам

Мы все стараемся упорядочить и разложить по полкам. Так к чему же свалка здесь?

Рисунок 7 — Группируй слои по папкам

Если есть некий объект (к примеру, background), который используется и в header, и в footer, и еще где-то — такой элемент лучше вынести в отдельную группу, чем копировать и раскидывать по всему документу.

Глобальные объекты можно группировать отдельно

Дублирование увеличивает вес. А это никому не нужно.

Рисунок 8 — Глобальные объекты можно группировать отдельно

Опять-таки, это значительно облегчит работу верстальщику. Необходимо просто выделить основные каталоги и задать им какой-либо цвет. Желательно выработать какое-то постоянство и повторяющиеся элементы от сайта к сайту раскрашивать в один и тот же цвет (к примеру, шапка сайта всегда зеленая, подвал – коричневый).

Раскрашивай корневые папки

Давно известный факт, что информация зрительно воспринимается легче. Так почему бы не облегчить работу с ней?

Рисунок 9 — Раскрашивай корневые папки

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

Используй целые значения

В конце концов, какая разница между 19 pt и 19,478 pt? Все равно браузер тебе все испотрит и округлит это.

Рисунок 10 — Используй целые значения

Рисовать дизайн лучше используя направляющие. Это позволит выстроить макет более ровно и избавить верстальщика от многих проблем. Также это способствует большей адаптивности.

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

Человеческий глаз воспринимает гармонию. А дисгармонию он ощущает еще сильнее. Просто запомни это.

Рисунок 11 — Используй сетку

Не забывай называть слои. По умолчанию photoshop именует их как layer n. И если (а так оно и будет) у вас будет большое количество слоев, то файл станет абсолютно нечитаемым и разобраться с ним станет огромной проблемой.

Осмысленно называй слои

layer 1, layer 2, layer 3... Ну его, разбирайся в этом сам.

Рисунок 12 — Осмысленно называй слои

Как это кнопка будет выглядеть при наведении? А при нажатии?. Иногда такие элементарные вещи вылетают из головы дизайнера. Верстальщику же не останется ничего другого как бегать за вами или самому выдумывать стили.

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

В комментарии не нуждается. Вовремя обнаруженные ошибки могут сэкономить кучу времени и нервов.

Перед передачей готового дизайна проверь орфографию

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

Рисунок 13 — Перед передачей готового дизайна проверь орфографию

Для сохранения проекта как изображение в photoshop имеется две функции: Save As и Save for Web. Выбирая между ними, предпочтение лучше отдать второму методу, так как размер файлов будет значительно отличаться. При сохранении Save As в файл будет дописываться множество служебной информации, которая не является необходимой.

Сохранение файлов

Служебная информация в изображениях не важна, если ты используешь их в сети.

Рисунок 14 — Сохранение файлов

Сохранять файл рекомендуется в качестве 51–95. Сохранять в качестве 100 не имеет смысла, так как это не максимальное качество, а математический предел оптимизации, при котором изображение будет весить неоправданно много. Сохранять же в качестве менее 50 так же не рекомендуется, так как включается дополнительный алгоритм оптимизации. Суть его заключается в том, что дополнительно усредняется цвет в соседних восьмипиксельных блоках. Поэтому если на изображении присутствуют очень мелкие контрастные детали, не следует выставлять качество ниже 51.

Разумное качество jpeg

Почитай о сжатии изображений. Это будет полезно.

Рисунок 15 — Разумное качество jpeg

При сохранении изображений выбирайте правильные форматы. Если требуется сохранить сложное изображение с обилием цветов и градиентов, то лучше всего отдать предпочтение jpeg. Если же требуется изображение с прозрачностью, то стоит выбрать png.

Формат изображения

В photoshop есть возможность предпросмотра перед сохранением. Сравни визуальное качество и объем файла и выбери оптимальный.

Рисунок 16 — Формат изображения

Заключение

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

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

Список использованных источников

1. Ps Etiquette. [Электронный ресурс]. — Режим доступа: http://photoshopetiquette.com/
2. Я люблю PS. [Электронный ресурс]. — Режим доступа: http://ilovepsd.ru/
3. Оптимизация JPEG. [Электронный ресурс]. — Режим доступа: http://www.artlebedev.ru/tools/technogrette/img/jpeg-1/