Быстрое и бесплатное создание хедеров

Приветствую всех посетителей сайта! Продолжаем знакомиться с программами, облегчающими жизнь начинающего вебмастера. В прошлых выпусках нами были рассмотрены программы для создания выпадающих меню, логотипов, кнопок, даже генерации шаблонов как для обычных html-сайтов, так и для Wordpress и Joomla. 

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

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

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

А что делать начинающему вебмастеру при отсутствии бюджета? Можно скачать из Интернета готовый шаблон шапки и отредактировать под себя, можно попытаться создать авторский шедевр в Фотошопе или ему подобных редакторах, а можно воспользоваться программой для создания хедеров.

Как раз о последнем варианте сегодня и пойдет речь. Итак, знакомимся с программой XHeader, позволяющей создавать шапки как из встроенных шаблонов, так и с чистого листа. Ссылку на бесплатное скачивание программы найдете в конце материала, а сейчас давайте опробуем программу в действии.

После скачивания и разархивации приступаем к установке. Окно мастера установки выглядит так:
                                               Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.

                               Всем желаю удачи и смелых воплощений идей на вашем сайте !
Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
Проект для новичков
Главная       Скачать       Уроки        Новости        Статьи        Контакты        Карта сайта
2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla -  русские версии.
Автор и администратор  данного проекта - SvetLana_TSV.  Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
ПОДРОБНЕЕ

Процесс установки стандартный, хоть и интерфейс и на английском, но все интуитивно понятно. В самом первом окне жмем Next (Продолжить), в следующем окне соглашаемся с условиями использования, поставив галочку и нажав Next, далее выбираем папку на компьютере для файлов программы, по умолчанию это Programm Files. После чего в следующем окне с информацией о программе, в частности, сколько ей нужно места на диске (около 24 МБ), жмем Install.

После завершения установки в последнем окне ставим галочку для запуска напротив Launch Programm File  и жмем Finish. Появлется окно с предложением получить доступ к 500 шаблонам готовых хедеров, указав свои контакты в подписной форме. Этот шаг можно пропустить, нажав на кнопку No Thanks, т.к. доступ к шаблонам при необходимости можно получить и из интерфейса программы.

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



Поскольку мы выбрали создание хедера из шаблона, то перед нами открылась галерея шаблонов, разбитая на рубрики. В бесплатной версии доступно лишь около сотни шаблонов, из них мы выберем шаблончик с девушкой, занимающейся йогой (второй на скриншоте ниже).
Чтобы приступить к редактированию шаблона,  кликаем по шаблону и жмем ОК. Откроется рабочее окно программы с инструментами для редактирования.
Первым делом добавим название сайта. Щеткаем по иконке Text в панели инструментов (сразу под шаблоном) и приступаем к оформлению текста. Выбираем размер, стиль, цвет, вообщем как в Word, стандартные настройки. Затем под названием проведем горизонтальную линию, выбрав инструмент Line и под ней укажем контактные телефоны.

После чего добавим слева в хедер  изображение в виде абстактных белых волн, выбрав инструмент Image. Конечный результат выглядит так:
Мы рассмотрели быстрый вариант создания хедера, используя библиотеку готовых шаблонов. Но для получения уникального хедера я рекомендую создавать его с чистого листа.

Для этого жмем в панели управления на иконку New и приступаем к созданию собственного оригинального хедера. Первым делом задаем размер хедеру, так как по умолчанию хедеры идут 750 Х 175 px и для современных сайтов этот размер явно маловат, поэтому идем в Options Resize Header и указываем 1000 Х 200 px.

Теперь приступаем к оформлению: вставляем фоновое изображение с помощью Image, подгоняем его по размеру, потянув за боковые маркеры. Конечно, неудобно отсутствие угловых маркеров, при которых картинка уменьшается пропорционально сразу по длине и ширине, но как говорится, используем то, что есть.

Разместив фон, приступаем к текстовой информации. Поместим ее на полупрозрачные области, для чего воспользуемся инструментом Square с заливкой. Щелкнув по нему и зажав ЛКМ, рисуем прямоугольник нужного размера и цвета, после чего убавляем ему непрозрачность до желаемого эффекта.

Чтобы получить прямоугольник с закругленными углами, нужно удерживать R при рисовании, чтобы повернуть нарисованную фигуру по часовой стрелке, то следует нажать CTRL+W,  против часовой стрелки - CTRL+Q. Если нужно добавить нарисованной фигуре границы, то  идем в Options Add border, если удалить - Options Remove Border.

Теперь, когда прямоугольные полупрозрачные области готовы, размещаем на них текст, подобрав подходящий стиль и цвет. По центру хедера добавим цветок, ведь речь идет о сайте флористики:)) Можно дополнительно украсить хедер декором, это уже дело вкуса... Результат - уникальный хедер за пять минут!
По завершении работы над хедером сохраняем его в формате JPG. Для этого жмем Save JPG, открывается окно с предпросмотром готового хедера при разной степени качества, то есть программа позволяет перед сохранением оптимизировать (уменьшить вес) полученного изображения. Поскольку в нашем случае вес хедера незначителен, то выбираем первое превью с качеством 100%, при большом весе есть смысл выбрать качество 80-90%.

Двойной клик по выбранному превью откроет окно Сохранить как, в котором вы указываете папку для загрузки. Также можно сохранить хедер в родном формате для дальнейшего редактирования, в этом случае выбираем Save XHF. По умолчанию файл хедера сохранится в папке программы, в любой момент мы можем его открыть и продолжить работу.

Теперь пару слов об инструментах, которыми мы не воспользовались, но они могут пригодиться. Инструмент Circle (контур и заливка) позволяет рисовать овальные и круглые фигуры, например, под размещение логотипа, а последние два инструмента To Front и To Back позволяют перемещать объекты (картинки, тексты, фигуры) на передний либо задний план.

Конечно, функционал XHeader далек от продвинутых графических редакторов, но тем, кто еще не освоил Фотошоп, данная программа поможет быстро создать уникальный хедер для своего проекта. Поклонники WebPageMaker с таким же успехом могут "собрать" хедер прямо в Пейдже при создании сайта, единственный минус -  это отсутствие возможности регулировать прозрачность фигур, что позволяет делать XHeader.

Скачать бесплатно программу XHeader для создания шапок сайта

Также вы можете скачать бесплатную версию на официальном сайте http://xheader.com. Для ее скачивания вам нужно будет заполнить контактную форму, после чего на указанный вами е-мэйл придет письмо со ссылкой на скачивание программы с 500 шаблонами хедеров. Чтобы получить всю коллекцию шаблонов (5000 шт.) нужно программу купить:))

На этом материал завершаю. Надеюсь, XHeader поможет новичкам решить вопрос создания шапки сайта.

Всем желаю успеха и до новых встреч! С ув. Светлана (SvetLana_TSV).



Не забудь заглянуть в свою почту и подтвердить подписку!