Как нарисовать шаблон для сайта?

В сети существует огромное количество шаблонов для сайтов, но у них есть один недостаток – они не являются уникальными. Если владелец сайта не хочет, чтобы дизайн его сайта повторялся где-то еще, он может заказать шаблон у профессионального дизайнера или попробовать создать его самостоятельно.
Создать сайт самостоятельно с Wix.com

Вам понадобится

• - программа Adobe Photoshop.

Инструкция

Создание собственного шаблона не является такой уж трудной задачей, как может показаться на первый взгляд. Для работы вам потребуется программа Adobe Photoshop – разумеется, необходимо иметь хотя бы основные представления о работе с ней. Но до того, как запустить программу и начать творить, необходимо заранее продумать будущий дизайн. Удобнее всего это делать так: сначала познакомьтесь хотя бы с сотней готовых шаблонов, оцените их достоинства и недостатки. Обращайте внимание на удачные решения тех или иных элементов дизайна. Это не значит, что вы будете их копировать, но взять какие-то красивые и удобные решения за основу вполне разумно.

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

Запустите Фотошоп, создайте новый проект размером 1200х1600, установите прозрачный фон. Включите инструмент «Линейка», если он еще не включен, для этого нажмите комбинацию клавиш Ctrl+R. Включите привязку: «Просмотр» — «Привязка».

Теперь надо разделить шаблон направляющими, которые будут показывать границы его элементов – боковых сторон, колонок и т.д. Например, вы хотите так разделить шаблон, чтобы слева была узкая колонка, справа – широкая до правого края шаблона, а вверху было место для шапки. Значит, вам понадобится три вертикальные линии (левая граница шаблона, правая и линия между ними) и горизонтальная, показывающая нижнюю границу шапки. Чтобы установить вертикальную линию, подведите курсор к левой линейке с левой стороны, нажмите V и, удерживая клавишу, перетяните линию в нужное место. Так же поступите с двумя другими вертикальными линиями. Горизонтальные строятся аналогично, только используется верхняя линейка.

Найдите фон для вашего шаблона, это должна быть небольшая картинка с повторяющимся рисунком. Откройте ее в Фотошопе, выделите, скопируйте. После этого вставьте в шаблон столько раз, сколько понадобится для его заполнения фоном. Вставка производится так: «Редактирование» - «Вставить», после чего перетягиваете участок фона в нужное место. Еще быстрее вставлять изображение командой Ctrl+V. Точно так же добавьте фон для шапки сайта. Вы можете использовать для создания фона и различные градиентные заливки.

При помощи инструмента «Карандаш» проведите границы шаблона, ориентируясь на уже проведенные линии (то есть поверх них). Вы получили основу простейшего шаблона, теперь надо дополнить ее нужными деталями – кнопками навигации, строчками меню, различными украшающими элементами и т.д. О том, как создавать кнопки и другие элементы, лучше прочитать в соответствующих статьях, посвященных работе с Adobe Photoshop.

Шаблон создан, теперь необходимо разрезать его на кусочки для их вставки в html-страницу. Для разрезания воспользуйтесь инструментом «Раскройка» (Slice Tool). Чтобы найти его, щелкните правой кнопкой мышки инструмент «Рамка» и выберите в открывшемся меню «Раскройку». Теперь вы можете раскроить шаблон нужным образом, затем сохранить: «Файл» - «Сохранить для Web». В открывшемся окне выберите тип файлов: HTML&images, укажите имя файла: index.htm и сохраните его. У вас появятся файл index.htm и папка images с нарезанными изображениями.

Совет добавлен 1 августа 2011 Совет 2: Как нарисовать дизайн сайта По одежке встречают не только людей, но и сайты. Одежкой сайта является его дизайн. Качественный и привлекательный дизайн ресурса производит благоприятное впечатление на пользователей, обеспечивая тем самым их лояльность и готовность уделить свое время дальнейшему просмотру. Кроме качества важна оригинальность и уникальность дизайна. Изъезженные темы отталкивают посетителей. Но разработка уникального дизайна стоит дорого. Именно поэтому многие начинающие web-мастера задаются вопросом о том, как нарисовать дизайн сайта собственными руками.

Вам понадобится

• - карандаш;
• - лист бумаги;
• - редактор растровой графики GIMP или Photoshop;
• - опционально: редактор векторной графики (например, CorelDraw);
• - опционально: среда 3D-моделирования (3DStudio, Blender);
• - современный браузер;
• - доступ в интернет.

Инструкция

Разработайте концепцию дизайна сайта. Определитесь со стилем, цветовой схемой, компоновкой страниц (размером шапки сайта, расположением меню, блоков текста, изображений). Хорошо, если в основе концепции дизайна будут лежать оригинальные идеи. Но при их недостатке можно черпать вдохновение в ходе анализа уже существующих решений. Например, просматривая каталоги тем оформления популярных CMS. Результатом работы может стать эскиз страницы сайта, выполненный карандашом на листе бумаги с указанием зон фиксированных и варьирующихся размеров.

Создайте заготовку шаблона страницы сайта в редакторе растровой графики. В графическом редакторе откройте новый документ. Размеры документа должны быть гораздо больше минимальных размеров страницы как по горизонтали (даже если не предполагается создавать "резиновый" дизайн), так и по вертикали. Добавьте новый прозрачный слой. В добавленном слое линиями толщиной в 1 пиксель вычертите изображение шаблона страницы с соблюдением реальных размеров элементов. Для дизайна страниц фиксированной ширины обозначьте краевые области, которые будут заполнены цветом фона.

Загрузите из интернета или разработайте самостоятельно элементы дизайна страниц. Логотип и уникальные элементы дизайна могут быть созданы в среде 3D-моделирования, векторном или растровом редакторе. Тематические изображения высокого разрешения в большом количестве содержатся в бесплатных интернет-фотобанках. Существуют в интернете и бесплатные коллекции иконок, которые можно свободно использовать в своих проектах.

Нарисуйте дизайн сайта. В документ, содержащий заготовку шаблона страницы сайта в графическом редакторе, добавьте прозрачные слои. Выделите и залейте в них области, соответствующие фону страницы. Заполните области с градиентной заливкой и периодическими текстурами. Вставьте логотип, статические изображения, иконки. Очертите границы блоков. Добавьте текст. Каждый законченный элемент дизайна, статическое изображение и логотип помещайте в отдельный слой. Перемещайте изображения в слоях для того, чтобы добиться требуемой компоновки.

Сохраните рабочий "исходник" дизайна сайта в "родном" формате графического редактора. Это позволит вернуться впоследствии к его редактированию.

Полезный совет Разработайте и сохраните в виде отдельных изображений типовые элементы дизайна сайта (например, меню, текстовые блоки) для их многократного использования в шаблоне. Как нарисовать дизайн сайта - версия для печати

Оцените статью!