А разве красота — бесполезна?

Конечно можно обойтись просто возможностями кода и нарисовать вполне приличный сайт.
Но хочется свое детище украсить. Да и пользователю приятней смотреть не только на текст.

Основы Фотошоп

Шаблон сайта в photoshop

В Интернете можно найти бесплатные шаблоны сайтов. Плюс — можно подобрать понравившийся шаблон, минус — уже кто-нибудь его использует, и в html коде могут быть рекламные ссылки. Шаблоны представлены или в html виде, или в формате psd.

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

нарисовать дизайн в фотошопе

Рассмотрим на примере создание самого простого и распространенного шаблона. Шаблон состоит в основном из 4 частей:

  • верхушка (Лого),
  • панель (меню сайта),
  • информационное окно(отображение информации),
  • стейлер (мини полоса, в которой пишут кому принадлежит сайт и кто его создатель).

Нужно поставить в настройках фотошопа по умолчанию всё в пикселях — так проще работать. Стандартное разрешение картинок для экрана — 72 ppi (pixel per inch).

нарезать его на куски с помощью инструмента slices

Разметив в Фотошопе Зоны (слайсы), вычищаем из макета все текстовую, табличную и автоматически генерируемую информацию (например, меню). Затем сохраняем из Фотошопа файл «Save for Web» — при этом Фотошоп аккуратно нарезает по слайсам макет страницы на зоны и сохраняет полученные изображения в папке images.

зайти в пункт save for web и оптимизировать изображения

. Для каждой зоны макета измеряем в пикселах критичные размеры: — для горизонтальных зон это их высота; — для вертикальных зон — их ширина. А так же, общую ширину страницы по макету

Оставить ответ

17 − четыре =