Те кто начинал изучать тематику создания сайтов, наверняка слышали о том что можно разрабатывать дизайн в программе фотошоп, и задавались вопросом: как создать дизайн сайта в фотошопе ? На самом деле это процесс не простой. В этой статье будет рассказано то, как нарезать макет на определенные изображения которые Вы потом будете вставлять к себе на веб-страницу.
Допустим, Вы выбрали бесплатный вариант создания дизайна Вашего сайта. Вам нужно ли самому нарисовать PSD макет, либо взять готовый, например этот.Загрузили файл PSD в программу Photoshop. Давайте рассмотрим такую картинку в качестве примера.
Дело в том, что некоторые изображения и некоторые виды фона нельзя сделать на CSS и HTML. Поэтому эти объекты вам придется вырезать. В этом примере к таким объектам относятся блок с колесом и текстом около него, иконка возле слова «Новости» и желто-оранжевый фон. Начните с самого крупного объекта – фона.
Для этого нажмите на правой панели программы кнопку «Слои» и в выпадающем меню отключите все изображения кроме «Фон». А потом нажмите на левой панели кнопку с изображением ножа и выберете инструмент «Раскройка».
Инструментом «Раскройка» выделяете весь фон. Нажимаете на кнопку «Файл» и в выпадающем меню кликаете «Сохранить для Web…».
После этого появится окно, в котором вам нужно выбрать формат PNG-24. Этот формат дает наиболее качественное изображение.
Нажимаете кнопку «Сохранить». Открываете ту папку, в которую Вы сохраняете эти картинки. Эту картинку нужно переименовать в bg.png (background). Теперь перейдем к следующему крупному объекту – шапке сайта. Для того чтобы ее вырезать отключите фон в выпадающем меню «Слои». Выберите инструмент «Раскройка». Нажмите клавишу «Delete», чтобы удалить старую раскройку и выделите инструментом блок шапки. При выделении постарайтесь, чтобы на картинке не осталось ничего лишнего и в тоже время какие-нибудь элементы не были обрезаны.
Опять нажимаете на кнопку «Файл» и в выпадающем меню кликаете «Сохранить для Web…». Снова выбираете PNG-24 и нажимаете «Сохранить». Заходите в папку сохраненных рисунков и переименовываете картинку в logo.png. При создании сайтов использование латинского шрифта имеет принципиальное значение. Это связано с кодировкой. Поэтому при названии файлов вы можете использовать только латинский алфавит, точку, тире и черту подчеркивания. Другие буквы и знаки недопустимы.
Далее нужно вырезать иконку возле слова «Новости». Для более точного выделения воспользуйтесь увеличением области в Photoshop. Последовательность действий такая же, как описано выше.
Переименуйте картинку в new_icon.png. Теперь выделите все три картинки и перенесите их в папку images Вашего сайта.
Вот и все, на таком не большом примере, можно понять что означает нарезка макета, нужно учитывать то что, при разработки дизайна, слишком графикой увлекаться не стоит, все таки изображения придают больший вес страницы чем CSS код, что соответственно и увеличивает время загрузки страницы у пользователей.
Источник: Книга автора Михаила Русакова.
Автор публикации
Создание, доработка сайтов, редизайн.