Вам понадобится
  • - карандаш;
  • - лист бумаги;
  • - редактор растровой графики GIMP или Photoshop;
  • - опционально: редактор векторной графики (например, CorelDraw);
  • - опционально: среда 3D-моделирования (3DStudio, Blender);
  • - современный браузер;
  • - доступ в интернет.
Инструкция
1
Разработайте концепцию дизайна сайта. Определитесь со стилем, цветовой схемой, компоновкой страниц (размером шапки сайта, расположением меню, блоков текста, изображений). Хорошо, если в основе концепции дизайна будут лежать оригинальные идеи. Но при их недостатке можно черпать вдохновение в ходе анализа уже существующих решений. Например, просматривая каталоги тем оформления популярных CMS. Результатом работы может стать эскиз страницы сайта, выполненный карандашом на листе бумаги с указанием зон фиксированных и варьирующихся размеров.
2
Создайте заготовку шаблона страницы сайта в редакторе растровой графики. В графическом редакторе откройте новый документ. Размеры документа должны быть гораздо больше минимальных размеров страницы как по горизонтали (даже если не предполагается создавать "резиновый" дизайн), так и по вертикали. Добавьте новый прозрачный слой. В добавленном слое линиями толщиной в 1 пиксель вычертите изображение шаблона страницы с соблюдением реальных размеров элементов. Для дизайна страниц фиксированной ширины обозначьте краевые области, которые будут заполнены цветом фона.
3
Загрузите из интернета или разработайте самостоятельно элементы дизайна страниц. Логотип и уникальные элементы дизайна могут быть созданы в среде 3D-моделирования, векторном или растровом редакторе. Тематические изображения высокого разрешения в большом количестве содержатся в бесплатных интернет-фотобанках. Существуют в интернете и бесплатные коллекции иконок, которые можно свободно использовать в своих проектах.
4
Нарисуйте дизайн сайта. В документ, содержащий заготовку шаблона страницы сайта в графическом редакторе, добавьте прозрачные слои. Выделите и залейте в них области, соответствующие фону страницы. Заполните области с градиентной заливкой и периодическими текстурами. Вставьте логотип, статические изображения, иконки. Очертите границы блоков. Добавьте текст. Каждый законченный элемент дизайна, статическое изображение и логотип помещайте в отдельный слой. Перемещайте изображения в слоях для того, чтобы добиться требуемой компоновки.
5
Сохраните рабочий "исходник" дизайна сайта в "родном" формате графического редактора. Это позволит вернуться впоследствии к его редактированию.