С чего начинается вёрстка веб сайта? Конечно же с макета страницы. А что это такое? Макет страницы — графическое изображение внешнего вида страницы. Дизайнер буквально рисует страницу, как она должна выглядеть на экране у пользователя. А задача веб мастера - «натянуть» макет на тот функционал, который планируется использовать на сайте. А что значит «натянуть» макет? Это значит связать с участками изображения функции, которые будут выполняться при определённых действиях пользователя. Например, навёл пользователь курсор мыши на изображение кнопки, и цвет надписи на ней поменялся, нажал на кнопку и открылась другая страница сайта.

  Например, вам нужно создать сайт и выполнить его верстку.
  Как выполняется вёрстка сайта? Все зависит от того, какая технология лежит в основе строительства сайта. Можно верстать сайты вручную, а можно — с использованием специальной системы управления содержимым сайта. Вёрстка сайта вручную требует от веб мастера знаний как минимум HTML и CSS. Конечно, список из того, что нужно знать можно продолжать очень долго. Но HTML и CSS - это минимум, который нужен для ручной вёрстки сайта. Потому что все элементы сайта будут строиться с использованием команд данных языков, которые хранятся в обычных текстовых файлах. А веб мастер вручную с помощью текстового редактора работает с файлами, настраивая внешний вид сайта. Как пример, можно указать сайт под названием "Накладные светильники под люминесцентную лампу"  - невооруженным глазом видно, что сайт сверстан классическим методом с использованием только HTML и CSS.

В случае использования системы управления содержимым сайта (CMS) нужно всего лишь уметь пользоваться этой самой системой. Даже HTML и CSS  в данном случае знать не обязательно. В CMS имеются уже готовые блоки, которые надо просто соединять между собой, как в детском конструкторе. Текст вводится с помощью визуального редактора, который работает так, как ставший стандартом де факто Microsoft Word.

Для обеих вариантов неизменной остаётся работа с изображениями. Макет, который получен от дизайнера нужно разделить на участки, каждый из которых должен быть сохранен в отдельном изображении. А уже из этих кусочков, как мозаика складывается, сайт. Каждый кусочек используется либо в виде фона либо в виде основного изображения для различных элементов и областей веб страниц.

Самым удобным и мощным инструментом для редактирования растровых изображений, которые используются на веб сайтах, является программа Фотошоп. Разнообразный набор функций позволяет делать с растровыми картинками практически все, что угодно. Большинство дизайнеров использует именно Фотошоп при подготовке макетов для сайтов. Кроме того, часто макеты веб страниц поставляются в специальном формате Фотошоп — файлы с расширением psd. Данный формат хранит всю служебную информацию об изображении, что иногда позволяет существенно экономить время на выделении различных элементов.

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

Изучайте Фотошоп!