Совет 1: Как нарисовать шаблон для сайта

В сети существует огромное количество шаблонов для сайтов, но у них есть один недостаток – они не являются уникальными. Если владелец сайта не хочет, чтобы дизайн его сайта повторялся где-то еще, он может заказать шаблон у профессионального дизайнера или попробовать создать его самостоятельно.
Вам понадобится
  • - программа Adobe Photoshop.
Инструкция
1
Создание собственного шаблона не является такой уж трудной задачей, как может показаться на первый взгляд. Для работы вам потребуется программа Adobe Photoshop – разумеется, необходимо иметь хотя бы основные представления о работе с ней. Но до того, как запустить программу и начать творить, необходимо заранее продумать будущий дизайн. Удобнее всего это делать так: сначала познакомьтесь хотя бы с сотней готовых шаблонов, оцените их достоинства и недостатки. Обращайте внимание на удачные решения тех или иных элементов дизайна. Это не значит, что вы будете их копировать, но взять какие-то красивые и удобные решения за основу вполне разумно.
2
На основе анализа чужих шаблонов и собственного творчества вы должны составить представление о том, как будет выглядеть ваш сайт. Примерные наброски будущего дизайна лучше всего делать цветными карандашами на обычных листах формата А4. Приступать к работе с Фотошопом следует только после того, как вы будете ясно представлять, что именно вам предстоит нарисовать.
3
Запустите Фотошоп, создайте новый проект размером 1200х1600, установите прозрачный фон. Включите инструмент «Линейка», если он еще не включен, для этого нажмите комбинацию клавиш Ctrl+R. Включите привязку: «Просмотр» — «Привязка».
4
Теперь надо разделить шаблон направляющими, которые будут показывать границы его элементов – боковых сторон, колонок и т.д. Например, вы хотите так разделить шаблон, чтобы слева была узкая колонка, справа – широкая до правого края шаблона, а вверху было место для шапки. Значит, вам понадобится три вертикальные линии (левая граница шаблона, правая и линия между ними) и горизонтальная, показывающая нижнюю границу шапки. Чтобы установить вертикальную линию, подведите курсор к левой линейке с левой стороны, нажмите V и, удерживая клавишу, перетяните линию в нужное место. Так же поступите с двумя другими вертикальными линиями. Горизонтальные строятся аналогично, только используется верхняя линейка.
5
Найдите фон для вашего шаблона, это должна быть небольшая картинка с повторяющимся рисунком. Откройте ее в Фотошопе, выделите, скопируйте. После этого вставьте в шаблон столько раз, сколько понадобится для его заполнения фоном. Вставка производится так: «Редактирование» - «Вставить», после чего перетягиваете участок фона в нужное место. Еще быстрее вставлять изображение командой Ctrl+V. Точно так же добавьте фон для шапки сайта. Вы можете использовать для создания фона и различные градиентные заливки.
6
При помощи инструмента «Карандаш» проведите границы шаблона, ориентируясь на уже проведенные линии (то есть поверх них). Вы получили основу простейшего шаблона, теперь надо дополнить ее нужными деталями – кнопками навигации, строчками меню, различными украшающими элементами и т.д. О том, как создавать кнопки и другие элементы, лучше прочитать в соответствующих статьях, посвященных работе с Adobe Photoshop.
7
Шаблон создан, теперь необходимо разрезать его на кусочки для их вставки в html-страницу. Для разрезания воспользуйтесь инструментом «Раскройка» (Slice Tool). Чтобы найти его, щелкните правой кнопкой мышки инструмент «Рамка» и выберите в открывшемся меню «Раскройку». Теперь вы можете раскроить шаблон нужным образом, затем сохранить: «Файл» - «Сохранить для Web». В открывшемся окне выберите тип файлов: HTML&images, укажите имя файла: index.htm и сохраните его. У вас появятся файл index.htm и папка images с нарезанными изображениями.

Совет 2: Как нарисовать дизайн сайта

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