А разве красота — бесполезна?
Конечно можно обойтись просто возможностями кода и нарисовать вполне приличный сайт.
Но хочется свое детище украсить. Да и пользователю приятней смотреть не только на текст.
Шаблон сайта в photoshop
В Интернете можно найти бесплатные шаблоны сайтов. Плюс — можно подобрать понравившийся шаблон, минус — уже кто-нибудь его использует, и в html коде могут быть рекламные ссылки. Шаблоны представлены или в html виде, или в формате psd.
Psd файл — фотошоповский формат. В нем можно сохранять слои, которые потом можно отредактировать. Psd шаблоны нужны для того, чтобы было можно каждый слой в отдельности подправить.
нарисовать дизайн в фотошопе
Рассмотрим на примере создание самого простого и распространенного шаблона. Шаблон состоит в основном из 4 частей:
- верхушка (Лого),
- панель (меню сайта),
- информационное окно(отображение информации),
- стейлер (мини полоса, в которой пишут кому принадлежит сайт и кто его создатель).
Нужно поставить в настройках фотошопа по умолчанию всё в пикселях — так проще работать. Стандартное разрешение картинок для экрана — 72 ppi (pixel per inch).
нарезать его на куски с помощью инструмента slices
Разметив в Фотошопе Зоны (слайсы), вычищаем из макета все текстовую, табличную и автоматически генерируемую информацию (например, меню). Затем сохраняем из Фотошопа файл «Save for Web» — при этом Фотошоп аккуратно нарезает по слайсам макет страницы на зоны и сохраняет полученные изображения в папке images.
зайти в пункт save for web и оптимизировать изображения
. Для каждой зоны макета измеряем в пикселах критичные размеры: — для горизонтальных зон это их высота; — для вертикальных зон — их ширина. А так же, общую ширину страницы по макету