ЗАПИСАТЬСЯ НА КУРС!
сайт своими руками  →  Уроки  →  Макет в Photoshop

Разработка макета сайта в Photoshop

Внимание! Информация на этой странице носит ознакомительный характер. Полная версия учебного пособия доступна слушателям он-лайн курса "Сайт своими руками" и является частью учебной программы
Записаться на курс!

В этом разделе мы разбираем этапы создания макета сайта в программе Photoshop. Материал этого раздела не претендует на пошаговые уроки по верстке сайта в программе Photoshop, это скорее методичка или памятка для занятий, на которых мы подробно, со всеми нюансами и "подводными камнями" создаем верстку главной страницы нашего сайта.

Для успешного прохождения уроков необходимы базовые знания работы в программе Photoshop, которые мы разбираем в теоретическом блоке курса.

После прохождения этого модуля, помимо готового макета сайта, вы получите навыки создания макетов в программе Photoshop, научитесь основным приемам верстки, освоите основные инструменты программы.

Важные вводные

  • Все измерения проводим в пикселах. Для этого включаем в Photoshop линейку ctrl+r, кликаем правой кнопкой по верхней линейке и выбираем пикселы.
  • Оценивать реальный размер макета необходимо при 100% масштабе, именно так он будет отображаться в браузере.
  • Для верстки мы будем использовать шаблон с 12-колоночной модульной сеткой, о нем в следующем уроке.
  • Задача, которую мы решаем при верстке макета помимо "внешнего вида страницы", проработка всех блоков с содержанием, внешний вид заголовоков, шрифтов, текстов, всевозможных отступов между блоками и т.д. Нам необходимо однозначно ответить на все эти вопросы в макете, что бы потом не было сложностей с переносом макета в HTML. Никаких - "ну, тут, возможно, будут новости, но сколько их, как они будут выглядеть, я решу потом".

Необходимые программы и материалы для успешного прохождения модуля:

  • Редактор растровой графики Adobe Photoshop. Подойдет любой, начиная с версии CS3
  • Шрифт для логотипа FlemishC. Установите шрифт с систему, что бы использовать его в Photoshop
  • Шаблон для модульной сетки 960.gs
  • Фотографии и иллюстрации для вставки в макет

Все материалы для верстки вы можете найти в архиве с материалами для сайта в папке 3. Макеты Фотошоп.

приступить к созданию макета