В этой статье я подробно расскажу о том, как создать правильный и удобный в использовании макет сайта при помощи программы Photoshop.

Готовый макет должен отвечать следующим требованиям:


1. Макет должен быть максимально похож на то, что увидит пользователь в окне браузера.

Если на этом месте должен располагаться текстовый блок - не оставляйте на этом месте пустоту. Сам текст может быть рыбой, не обязательно тратить время на написание реального текста.

Рыба
текст, обычно не имеющий смысла, сгенерированый компьютером, который используется дизайнерами и верстальщиками при подготовке макетов и верстке HTML. Рыба служит примером того, как будет смотреться сайт (а конкретно - текстовый блок) в готовом состоянии.

Для генерации рыбы на русском языке я советую воспользоваться Яндекс.Весна
Для генерации рыбы на английском отлично подойдет Lorem Ipsum Generator

Используйте сглаживание текста типа "sharp" ("острый" в русских версиях Photoshop) и автокернинг типа "optical" ("оптически"), так как экранное сглаживание включено у большинства пользователей.


Настройки типографики

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


2. Учитывайте, что некоторые вещи, возможно прийдется изменять и что над макетом в будущем может работать другой человек

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

Для удобства изменения структуры документа рекомендуется группировать смежные по назначению слои. Например, вы рисуете макет сайта с новостной лентой. Вам нужно поменять новости местами. Если вы используете группы - всё что вам нужно - это переместить группу "Новость 1" под на место "Новость 2" и подобное действие повторить с "Новость 2". Если вы не используете группы, то сначала вам прийдется найти в списке слоёв все слои, отвечающие за первую новость и передвинуть их, а затем провести подобную манипуляцию со слоями второй новости, на что будет потрачено дополнительное время.

Для удобства использования макета другим человеком слои должны быть именованы. Само собой разумеется, что для человека, работающего с чужим макетом будет затруднительно копаться в слоях и находить нужное, а между Layer18 и Layer19 для него, лично разницы нет.

На группирование и именование тратится от силы 7 минут, если этого не сделано на побочные действия тратится до получаса.