Photoshop

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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