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

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

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

Основная особенность создания PSD макета состоит в том, чтобы не пытаться быстро составить определенную картинку. Главное, что необходимо учитывать – при чрезмерном использовании сложной графики скорее повредится, чем упростится верстка PSD макета. Кроме того, для упрощения последующей верстки слоям макета дают названия, которые обязательно должны быть уникальными, и группирую их, используя принцип принадлежности к одному модулю. 

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

Первым шагом является выделение слоя PSD макета и его вырезка. Пером, появляющимся при выборе инструмента «раскройка» выделяем область будущей картинки, назначаем изображению уникальное имя, путем двойного клика таким инструментом, как «выделение фрагмента» и ввода имени в появившееся окно. 

Следующий шаг — сохранение полученного слоя. Верхнее навигационное меню содержит возможность «Сохранить для Web и устройств». Именно при помощи него можно сохранить получившиеся картинки или же, при необходимости весь HTML документ. Если же выбрать такую строку меню, как «Сохранить выделенные фрагменты», то можно сохранить несколько картинок, выбранных вами из множества созданных.

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

Вот так выглядит процесс грамотной нарезки PSD файла, который в дальнейшем очень сильно упростит процесс верстки из PSD макета.

No related posts.