Документ и размеры
Типовая процедура в свежих версиях фотошопа упрощена до предела. На первом экране сразу появляется предложение создать новый файл и настроить его параметры.
- Ширина зависит от индивидуальных требований технического задания – определим её в 1000 рх (не забудьте выставить пикселы в качестве единицы измерения).
- Высота – тоже под вопросом. Но лучше присвоить большой размер, чтобы в дальнейшем к этому пункту не возвращаться. Показателя в 4 тысячи должно хватить.
- Разрешение в данном сценарии роли не играет, оставляем значение по умолчанию.
Если вы обладатель новой версии программы, обратите внимание на галочку в строке «Монтажные области». Она даёт возможность создать нужное число изолированных холстов, на которых делаются варианты дизайна или разные страницы.
Разметка
Незаменимый инструмент – линейка – по умолчанию отключен, а при редактировании фотографий вообще не нужен. Поэтому первым делом посещаем меню «Просмотр» и подключаем позицию измерений, хотя быстрее будет нажать ctrl+R. Теперь переводит курсор на верхний срез, зажимаем левую кнопку мыши и тащим направляющую на визуальное полотно. Обратите внимание на середине (в горизонтали и вертикали) произойдёт залипание – это помогает быстро найти центральные позиции.
При помощи линеек по порядку размечается весь документ. Например, для шапки страницы:
- выставляются две горизонтальные линии на необходимой высоте;
- активируется «Прямоугольная область» (сокращение М), в настройках верхней панели поставьте «Заданный размер» и укажите его (1000х300), кликните мышкой в пространстве документа – появится нужное нам выделение. Залейте его цветом. Теперь инструментом «Перемещение» (сокращение V) перетаскиваем содержимое на положенное место. Обратите внимание, что объект прилипнет к направляющим и сам найдёт центр.
Кликом по иконке внизу палитры слоёв создаём новый уровень и называем его «Меню». Здесь производим разметку для пунктов навигации. Важно полностью соблюдать пропорции, не забывая, что из подготовленного в фотошопе дизайн-концепта будет создаваться физический проект.
Приведенным способом происходит добавление всех необходимых контентных блоков. Если сайт имеет различающуюся графику тематических разделов, значит для каждого из них создаётся отдельный документ или монтажная область в структуре одного файла.
Рекомендации
Подготовка макета в фотошопе – помимо творческих задач – требует соблюдения некоторых технических правил, способных сильно облегчить жизнь при необходимости доработки проекта.
- Все элементы помещаются на отдельные слои, имеющие понятные заглавия. Это поможет не путаться в массиве информации.
- Производится группировка слоёв в подписанные папки. Таким образом на соответствующей вкладке всегда легко найти искомый объект.
- В инструменте «Перемещение» обязательно поставьте галочку на позиции «Автовыбор» – кликом по картинке произойдёт переключение на нужный слой.
- Клавиатурное сокращение ctrl+Hотключает видимость направляющих и выделений – иногда они мешают рассмотреть картинку целиком. Но все функции при этом сохраняются и, например, доступно перемещение стрелками на клавиатуре. Повторная комбинация вновь отображает ранее установленные линии.
- Занимаясь дизайном сайта в фотошопе, обязательно скачайте тематические объекты – иконки и кнопки. Они помогут сделать макет реалистичнее.
И заключительное. Рекомендуется сохранять материал в рабочем формате .psd с раздельными слоями. Это требование новички по достоинству оценивают, когда приходится возвращаться к редактированию макета.
