Создание шапки сайта онлайн

Как сделать шапку для сайта самостоятельно

Недавно мой гениальный дизайнер поделился уникальным способом как сделать шапку для сайта самостоятельно без фотошопа за пару минут. Поверьте — это очень полезно

Как сделать шапку для сайта самостоятельно с предложением

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

Основная сложность здесь — подбор картинки, потому что она не должна быть слишком яркая, она должна быть однотонная, чтобы на ней легко читался Ваш текст, она должна быть большая, чтобы не обрезались края на больших экранах. И проблема, что бесплатно такие картинки найти очень сложно. Например вчера я тестировал конструктор reg.ru и не смог найти подходящую шапку для сайта по продаже садовых шлангов. Поэтому сегодня я Вам расскажу универсальный способ как сделать шапку для сайта самостоятельно:

1. Находите любую картинку в Яндекс картинках или Google картинках
2. Единственное правило — она должна быть не меньше 3000 пикселей в ширину.
3. Идете в бесплатный он-лайн редактор изображений: http://editor.0lik.ru/ (либо любой другой)
4. Закачиваете свою картинку, сверху нее ставите черный прямоугольник и добавляете ему прозрачность 60 или 70%.
5. Скачиваете результат себе на компьютер.

Если Вам кажется, что это сложно — то просто посмотрите видео. Это делается элементарно и занимает меньше одной минуты. Это отличный и бесплатный способ создать шапку для сайта онлайн и он действительно улучшает любую картинку. Дальше в любом конструкторе сайтов вы на эту картинку сможете наложить кнопку, либо текст со своим предложением.

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

Такие шапки для сайтов были популярны несколько лет назад и сейчас уже уходят в прошлое. Выглядят они, конечно, очень эффектно и красиво и призваны сразу всем показать что у Вас очень дорогой сайт и ваша фирма очень надежная. Только одна такая шапка могла стоить около 10 000 рублей, а дизайнеры которые могли сделать это качественно ценились на вес золота. Именно тогда поднялась знаменитый дизайнер Anastasiya Ju, которая до сих пор является ТОП-1 дизайнером на fl.ru.

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

Одна из работ Анастасии Ju, у нее все сайты графичные и очень качественно сделаны.

Можно ли создать такую шапку самостоятельно? Такого уровня нет. Потому что такая работа действительно стоит своих денег. У моей жены на нее уходило от 3-х до 7-ми полноценных рабочих дней и требовало очень много сил. Для каждой такой работы долго подбираются подходящие картинки, многие из них покупаются на западных биржах, какие-то полностью рисуются с нуля. И я молчу еще про постобработку: цветокоррекцию, ретуширования, доработку правильного освещения на объектах (обратите внимание что у всех объектов есть тень и она в одну сторону, так у большинства из них эта тень нарисована вручную) и такой краполтивой работы очень и очень много. Я бы мог Вас отправить на мой любимый Kwork . И действительно — там много предложений создать шапку для сайта всего за 500 рублей, но они и выглядят на 500 рублей.

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

Программы для создания шапок YouTube

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

Графический редактор Canva

Программа Canva – упрощённый вариант фотошопа в режиме онлайн. Функционал доступен бесплатно, после регистрации. Добавлены и платные функции, которые подключают по необходимости.

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

В программах Canva, Panzoid и Crello убрать текст из шаблона нельзя. Накладывайте свои надписи только на пустой фон.

Чтобы добавить название канала на баннер для ютуба берите пустой шаблон. Заготовка с надписью «ваш текст» или «название канала» предназначена для фотошопа.

Программа для создания шапки, превью и аватарок для YouTube

Итак, заходим на главную страницу, в строке поиска вбиваем слово youtube, в выпадающем списке выбираем пункт «Оформление канала YouTube».

Далее выбираем готовый дизайн и редактируем шаблон под себя, либо «Пустой», чтобы создать баннер для ютуба с нуля.

Кликаем по пустому фону и переходим в режим редактора:

Справа – исходник, в котором мы собираемся создать шапку для ютуба. Слева – доступные функции программы. На 2020 год в интерфейсе программы доступны следующие вкладки:

1. Шаблоны: заготовки для дизайна.
2. Фото: образцы фотографий.
3. Элементы: делали для создания оформления канала для youtube.
4. Текст: наборы шрифтов.
5. Видео: заготовки роликов.
6. Фон: разноцветные заливки.
7. Загрузки: для добавления своих шаблонов.
8. Папки: для сортировки файлов.
9. Вкладка «Ещё».

Шаблоны – показывает заготовки по типу выбранного дизайна (пример: шапки для ютуба). Исходники условно разделены на темы: музыка и красота, путешествия и т.д.

Фото – платные и бесплатные. Чтобы видеть только бесплатные фото, кликните на соответствующую кнопку в строке поиска.

Элементы – категория с подкатегориями, таких, как: Сетки и Фигуры, Рамки и Стикеры, Диаграммы и Градиенты. Разделов много, поэтому проще воспользоваться поиском.

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

Видео – можно создать видео заставку для видео на youtube продолжительностью от 5 секунд до нескольких минут.

Чтобы создать интро для ютуба бесплатно попробуйте редактор panzoid.

Фон – по-другому бэкграунды, разделены на тематики. Выбирайте однотонную заливку. При клике на фон он автоматически заполняет пространство шаблона.

Загрузки – функция, для добавления собственных графических элементов. Загружайте картинки 2560 х 1440 для ютуба, гифки и видео.

Папки – здесь расположены папки по-умолчанию. Создание своих папок доступно только в платном режиме.

Еще – приложения для создания шапки на ютубе, с помощью которых можно напрямую загружать фото и видео со сторонних сайтов: YouTube с Instagram, Facebook и GIPHY, Pexels и Pixabay и др.

Итак, мы рассмотрели опции рабочей области, теперь начнём создание шапки для youtube онлайн. Сделаем шаблон для новичка, чтобы понять принципы работы сервиса.

Создание шапки для ютуба на примере

Для начала сделаем фон из нескольких фотографий. Переходим на вкладку Элементы, дальше в Сетки, выбираем сетку с шестью секциями:

Добавим в каждую ячейку фотографии:

1. Заходим на вкладку Фото, в строке поиска введём слово «путешествия».
2. Нажмём на кнопку «показ бесплатных фотографий».
3. Фотографии добавляем перетаскиванием на нужную секцию.

Если дважды кликнуть по секции, то можно отредактировать положение фотографии.

Чтобы фото смотрелись гармонично, наложим на каждую секцию фильтр.

Кликаем по секции, наверху. Жмём на Фильтр и подбираем подходящий, например Summer. Повторяем действие для каждой фотографии.

На данном этапе получилась вот такая картинка:

Обозначим центральную часть, которая будет отображаться на компьютерах и мобильных устройствах. Полный размер 2560px*423px.

Идем на вкладку Элементы, Фигуры и выбираем простой квадрат. Теперь подгоняем размер под 2560*423.

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

Теперь расположите по центру нашу фигуру. Кликаем по ней, сверху выбираем пункт Расположение и По центру.

Изначально фигура серого цвета, поменяем цвет на чистый черный и уменьшим прозрачность до 40%:

Добавим название канала.

Идём на вкладку Текст и в пункт «Добавьте заголовок». Эта фраза появляется на картинке и двойным кликом меняем на нужную. Напишем, «Записки путешественника».

Сверху активируется стандартное меню для текста. Изменим цвет на белый, увеличим размер, разместим по центру и поменяем шрифт. Выберем шрифт Hitch Hike:

В правом верхнем углу нажимаем на кнопку Сохранить. Канва предлагает несколько форматов сохранения своих проектов: png, jpg, pdf, mp4, gif.

Для YouTube подходят только png и jpg. В формате png изображения получаются тяжёлыми. На видеохостинге ограничения по размеру, выбирайте jpg формат.

На этом о Канве закончим и рассмотрим другие программы для создания шапки для ютуба.

Как сделать оформление канала в Crello

Бесплатный редактор шапки для ютуба онлайн типа Крелло похож на Канву.

Crello предлагает создать логотип для ютуба онлайн бесплатно, сделать баннеры, превьюшки и аватарки. Добавить название канала на пустой фон.

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

Программа для шапки на ютубе отличается настройками иллюстраций и текстовым редактором. Клик по тексту или картинке в области рисования Crello откроет меню для редактирования.

Меню для рабочих инструментов установлено на панели вверху. Поэтому, Crello и Canva не отличаются по интерфейсу.

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

Поэтому если вы задаётесь вопросом, где создать обложку для ютуба онлайн, мы рекомендуем Canva.

Видео по теме как сделать превью онлайн для ютуба и шапку канала в программе Crello:

Panzoid — сайт для создания интро для ютуба

Панзоид – популярный сервис чтобы сделать интро для ютуба онлайн в 2D и 3D формате. Рисовать и редактировать картинки тоже допустимо, но для этих целей лучше воспользоваться сервисами Crello или Canva. Сделать шапку для ютуба онлайн в panzoid можно, но графических функций меньше и работать сложнее.

Вот пошаговая инструкция как сделать интро онлайн бесплатно для ютуба на Панзоиде:

1. На главной странице расположены три вкладки: Clipmaker, Backgrounder, Video Editor. Выбираем Clipmaker.
2. Справа расположено рабочее пространство, а слева – список шаблонов чтобы создать интро для ютуба. Прокрутите вниз и нажмите на кнопку More creations. чтобы увидеть список целиком.
3. Выбрав понравившийся, кликните по нему, ролик появится в верхнем левом углу страницы. Нажмите на кнопку «open in clipmaker».
4. Чтобы отредактировать клип, перейдите на Objects (в виде трехмерного куба). Здесь вы поменяете текст, цвет или свет. Удалите или, наоборот, добавите элемент дизайна.
5. На вкладке Audio можете отрегулировать или добавить музыку. Сделать интро на ютуб можете и без музыки, но со звуком заставка эффектнее!
6. После редактирования, щелкните значок глаза в правой нижней части меню, чтобы включить предпросмотр.
7. Если результат устраивает, загрузите клип с помощью опции Download (стрелка вниз), расположенной в том же левом меню. Здесь выберите формат видео и нажмите Start video render.
8. После завершения рендеринга появится опция загрузки. Сохраните видео на компьютер – создание интро для канала youtube завершено!

На этом закончим обзор как сделать оформление канала на youtube онлайн. Пишите вопросы в комментариях.

Как сделать шапку сайта

Сделать сайт максимально индивидуальным — очень важно при его создании, даже если сайт создан на готовом шаблоне. Особенно это актуально для коммерческих площадок и блогов. Основа популярности кроется в узнаваемости ресурса, а что может работать лучше, чем запоминающийся, оригинальный верхний блок? Как сделать красивую шапку сайта — вопрос, занимающий многих веб-мастеров.

Преимущества и содержание

Наличие уникальной шапки (header) дает немало плюсов:

• узнавание фирменного логотипа, символики;
• определение тематики площадки;
• визуальное запоминание красивого фрагмента и заголовка;
• солидность, демонстрация профессионального подхода к созданию ресурса в целом.

Для специалиста вопрос того, как сделать шапку для сайта в короткие сроки, является простым. Новичку же придется изучить приличное количество материала на эту тему. Если вы собираетесь всерьез освоить веб-строительство, создавать контент и графику, вам необходимо разобраться с HTML, CSS, научиться пользоваться Photoshop и другимм программами. На сервисе 1С-UMI эта задача уже решена ― в ассортименте сотни шаблонов с уже готовыми привлекательными шапками, достаточно разместить свой лого, слоган и изображения, можно добавить индивидуальности при помощи стилей.

Верхний блок должен содержать:

• яркий, запоминающийся логотип компании, который будет хорошо заметен;
• слоган с краткой сутью информационного наполнения;
• контактные данные для предприятий и коммерсантов;
• меню навигации;
• рекламные блоки.

Не обязательно, чтобы все перечисленные пункты присутствовали в шапке. Ее главная цель — объединить элементы, различающиеся по стилю и цвету. Шапка должна соответствовать тематике и гармонировать с дизайном всего ресурса. Ее ширина и высота могут сильно разниться, наглядно видно это при открытии страниц на экранах с разной диагональю — мониторах, планшетах, смартфонах.

Как сделать шапку сайта?

Существует три способа выполнить задачу.

1. С помощью специальных сервисов. Этот вариант самый элементарный, не требующий обучения работе с графическими редакторами. Надо отыскать в сети ресурсы, предоставляющие готовые шаблоны, и просто скачать понравившийся. Сервисы бывают платными и бесплатными.
2. Xheader. Если вы — креативный человек, то получить индивидуальный продукт очень даже просто. Здесь предлагается вполне приемлемый набор инструментов или каталог с графическими образцами. В последнем присутствует удобная навигация — все примеры распределены по категориям, выбрать соответствующий тематике проекта не составит труда. Еще Xheader предлагает редактор картинок, где можно менять размеры, применять слои для распределения элементов в нужном порядке. Проекты сохраняются в формате XHF для обеспечения возможности редактирования, окончательный вариант имеет расширение JPG. Xheader обладает достаточными функциями для новичка, но веб-мастеру, решившему заняться разработкой на профессиональном уровне, следует все-таки обратиться к Photoshop.
3. Adobe Photoshop. Эта программа предоставляет большие возможности для работы с графическим контентом. Здесь вы можете создавать полностью уникальные блоки, менять параметры, подбирать тон, обыгрывать контрасты, использовать нулевой градиент (он придаст необычные переливы). В ваших руках расположение элементов, внедрение в графику логотипа, слогана, применение различных шрифтов (только не переусердствуйте, лаконичность в таком случае важна). В общем, это наилучший инструмент в настоящее время для воплощения самых смелых и креативных идей. Как сделать шапку сайта в Фотошопе? Если вы мало работали с такой программой, посмотрите видеоуроки и поищите онлайн-пособия. Необходимо лишь понять, что делают разные инструменты, и приступить к выполнению задачи.

Как разместить блок?

Вы сделали элемент, но это только часть работы. Теперь его нужно интегрировать в структуру ресурса. Если у вас сайт на 1С-UMI, перейдите в режим редактирования и кликните по блоку с шапкой, загрузите и вставьте нужную картинку. При необходимости изменить дизайн поработайте со стилями в CSS.

Пример, как сделать шапку сайта CSS:

В описании #header удалите имеющиеся значения и обозначьте ширину и высоту вашего изображения.

#header <
width: ширина px;
height: фон px;
background-color: #25B33f; — фон
margin-bottom: отступ снизу px;
>

#header <
width: ширина px;
height: высота px;
background-color: #25B33f;
margin-bottom: отступ снизу px;
background-image: url(images/имя файла)
>

Как сделать шапку сайта HTML:

В тег body вставьте div, идентифицировав его id=»header» с двумя заголовками h1 и h3, которые являются названием и описанием соответственно.

название

описание

Придайте вид заголовку и тексту — создайте для них два описания и укажите такие свойства:

h1 <
color:#цвет заголовка;
font: размер px шрифт;
margin-left: отступ слева px;
>
h3 <
width: ширина px;
color: #цвет;
font-style: стиль шрифта;
margin: расположение px;
>

Размещение на WordPress

Поскольку большинство блогов базируются на платформе WordPress, многие веб-мастера интересуются, каким образом установить блок на этой CMS. Движок уже оснащен готовыми темами и блоками. Но есть возможность видоизменить их, добавить логотип, изображение. Как это осуществить?

1. Откройте в консоли вкладку «Записи — Сделать новую».
2. Переведите редактор в формат HTML, загрузите картинку, которую хотите добавить.
3. После загрузки в редакторе появится код изображения. Скопируйте его, «Запись» удалите.
4. Переместитесь во вкладку «Внешний вид — Редактор», откройте файл header.php для редактирования.
5. В header.php найдите

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

Работа на конструкторе

Не все владельцы ресурсов имеют необходимые навыки для самостоятельного создания сайтов и их элементов. В таких случаях лучше всего создать сайт на конструкторе и доработать готовый шаблон, чтобы сделать его непохожим на типовые сайты. На сервисе 1С-UMI это можно сделать самостоятельно. В библиотеке сервиса предусмотрено более 500 готовых шаблонов, поэтому вам понадобится всего лишь пара минут, чтобы сделать полноценную верхнюю часть ресурса. Обратите внимание: здесь нет возможности рисовать элемент с нуля. Однако в шаблонах доступно изменение текста, шрифта, картинки, а также стилизация готовых элементов через CSS. Преимущества такого исполнения: вы тратите минимальное количество времени, но получаете результат, который полностью подходит и соответствует требованиям.

Если нет возможности дорабатывать дизайн самостоятельно, поручите это специалистам в рамках услуги «Сайт за вас». Они оформят шапку и сайт по вашим желаниями, напишут контент, подберут изображения, наполнят и запустят сайт, настроят для продвижения.

Как сделать шапку для сайта?

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Скорее, эта статья для новичков, своего рода школа молодого автора. В ней мы рассмотрим, как самостоятельно с помощью штатной компьютерной программы Paint и онлайн-сервиса (или программы) Pixlr , легко, просто и бесплатно сделать шапку для web-сайта или блога .

Простейший способ создания шапки сайта

Как один из вариантов, выберите в интернете и скачайте фон вашей будущей шапки. Можно в поисковике забить фразу «Фоны для сайта» и выбрать подходящее изображение. Мне, к примеру, нравится сайт бесшовных фонов:
http://bgrounds.ru. Фоны для сайта, безусловно, корректней использовать по назначению, но можно применить и для шапки сайта, при условии их дальнейшего усовершенствования.

А можно ввести поисковый запрос: «Бесплатные шапки для сайта» и что-то подобрать там, или посетить сайт:
http://beloweb.ru/novichkam/besplatnyie-shapki-dlya-saytov-i-dlya-blogov.html.

Затем в специальной бесплатной программе редактирования графических изображений Pixlr на готовую шапку просто нанести название web-ресурса.
Если нет желания скачивать и устанавливать эту программу на компьютер, есть прекрасный онлайн сервис с таким же предназначением и названием:
https://pixlr.com/editor/.

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

А теперь немного посложнее

1. Определяемся с выбором изображения шапки и скачиваем его на компьютер.
2. Если скачанное изображение Вам нравится, а размеры шапки отличаются от желаемых, пробуем изменить размеры в Paint:
   1. — допустим, Вы планируете разместить изображение с левой стороны шапки. Для этого нажимаем правой кнопкой мыши на картинку шапки и выбираем «Открыть с помощью Paint»;
   2. — в этой программе можно увеличить шапку до нужного размера. Удлинять в Paint можно только с правой стороны изображения, поэтому нужно повернуть шапку на 180 градусов (Главная → Повернуть), удлинить её и затем опять вернуть в исжодное положение;
   3. — в результате, слева будет белая полоса (белый прямоугольник), который впоследствии закроется картинкой;
   4. — в левом верхнем углу нажимаем Файл → Сохранить как и выбираем расширение. Чтобы сделать картинку уникальной, лучше выбирать расширение, отличное от того, которое было у скачанной картинки.
3. Затем нужно найти картинки, которые будем помещать в шапку, чтобы они подошли по цвету и по настроению, и скачать их. Желательно небольшие, чтобы размер был приближен к высоте шапки.
4. Открываем картинки в «Paint». Убираем лишний фон справа и сохраняем. Если нужно, можем обрезать картинки снизу до нужной высоты.
5. Если картинка нужна необрезанная, можно попробовать изменить высоту в сервисе, где бесплатно делают баннеры онлайн. В качестве примера возьмем сервис BannerFans . Попробуем вставить и обрезанную картинку, и ту, что уменьшили. Посмотрим, что будет лучше смотреться.

Приступим, непосредственно, к созданию шапки web-сайта

Заходим на интернет-портал Pixlr . Он простой и бесплатный. В сети интернет можно посмотреть статьи о преимуществах этого редактора, скачать уроки по работе с ним.

Загружаем шапку. Находим симпатичную картинку, которая гармонировала бы по цвету и накладываем её на шапку справа. Следующий баннер — с необрезанной картинкой.

В сервисе BannerFans делаем ободок к шапке. Цвета будем выбирать специально яркие, чтобы показать, что возможности для творческих решений огромные. Если изображение красочное, тогда делаем такого же цвета название сайта и ободок шапки. Не допускаем излишне насыщенных красок.

В самом начале шедевра у Вас может не получиться, но пробуйте, дерзайте. Всё зависит от вашего желания и вкуса. Удачи!

Как сделать шапку сайта: простой способ

Привет, друзья! Сегодня я хочу рассказать о том, как сделать шапку сайта. Она являет собой визуальный элемент, придающий проекту индивидуальность, уникальность. Придает ресурс узнаваемость и свой стиль. Чтобы сделать ее, не требуются какие-то особые, специализированные знания, навыки и умения программирования. Существует два способа, позволяющих достичь цели. И каждый из них простой.

Как сделать шапку сайта: вводная информация

Начнем с общей информации о данном графическом и визуальном элементе. Он обладает несколькими неоспоримыми преимуществами:

• формирует узнаваемость сайта;
• позволяет размещать логотипы, официальную символику;
• указывает на тематичность ресурса – пользователь с первого взгляда понимает, о чем идет речь;
• делает проект более красивым, ярким;
• добавляет солидности.

Кстати! У сайта еще нет собственного логотипа? Его также можно сделать самостоятельно всего за 5 минут. В этом вам поможет наш проект.

Что должен/может включать в себя верхний блок любой площадки:

• логотип – яркий, заметный;
• слоган;
• номер телефона, адрес электронной почты или другие контакты;
• меню.

Конечно, в нем не обязательно должны присутствовать все указанные выше элементы. Главная задача – формировать узнаваемость и привлекательность проекта. Шапка должна максимально гармонично сочетаться с основным оформлением сайта.

Как сделать шапку сайта: два способа достижения цели

Я пока не буду углубляться в вопросы «как сделать шапку сайта html» или «как сделать шапку сайта css». Сначала о том, как подготовить для нее «рисунок».

1. Сделать шапку для сайта онлайн

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

Сделать шапку для сайта онлайн очень просто. Только достичь оригинальности удается не всегда. Ведь работа предполагает использование шаблонов.

2. Adobe Photoshop

Популярный графический редактор. У него безграничные возможности. Работая в нем, вы сможете создать действительно уникальную обложку, точно соответствующую тематике вашего проекта:

• нужного размера;
• соответствующего цвета и оттенка;
• с нужным текстом и т.д..

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

Промежуточный итог

Сделать графический элемент – половина дела. Необходимо еще правильно разместить его на страницах сайта. Сначала нужно поместить готовую картинку в папку IMAGES. Она находится в каталоге административной панели. После чего можно приступать к размещению изображения на страницах.

Как сделать шапку сайта CSS: помещаем изображение на сайт

Рассказываю, как сделать шапку сайта CSS. Переходим в #header и там вместо установленных параметров высоты прописываются габариты созданной картинки – высота и ширина изображения.

Вот пример кода:

width: 1420px; — ширина

height: 300px; — высота

background-color: #25B33f; — фон

margin-bottom: 30px; — отступ снизу

Обратите внимание! Здесь и далее слова «Ширина», «Высота», «Фон» и прочие к коду не имеют отношения. Они лишь указывают, что значит та или иная строка.

После этого остается вставить только саму шапку:

background-image: url(images/i8.png) — картинка

Как сделать шапку сайта html

Начинаю рассказывать, как сделать описание сайта и заголовок. Для этого нужно использовать тег body блок div с идентификатором id=»header», и в нём два заголовка h1 и h3. В них и будет указано название проекта и его подробное описание.

Мой сайт

Теперь я знаю, как сделать шапку сайта

Если нужно изменить внешний вид самого заголовка и текста описания, оформить их, потребуется использование вот такого кода:

color: #2980b9; — цвет заголовка

font: 50px Times New Roman; — шрифт

margin-left: 500px; — отступ слева

width: 400px; — ширина

color: #9b59b6; — цвет

font-style: italic; — курсив

margin: 90px 0 0 40px; — расположение

И еще один вариант

Расскажу про еще один способ. Суть его состоит в том, чтобы вставить адрес, по которому находится подготовленная шапка, в блок

Обратите внимание! Вот как может выглядеть адрес картинки: .

При таком «развитии событий» нужно в #header удалить строку background-image: и указать position: relative. А разделах h1 и h3 указать position: absolute;. Однако нужно будет поменять отступы заголовков. Что поможет в позиционировании.

font: 50px Times New Roman;

Обратите внимание! Размеры в px приведены в качестве примера. Не нужно принимать их за истину! Размеры на своем сайте устанавливайте самостоятельно!

Шапка сайта для WordPress

И завершаю статью рассказом о том, как сделать шапку сайта для CMS WordPress. Хотя платформа подразумевает установку уже готовой темы, в которой шапка создана и установлена по умолчанию. Поэтому данная информация будет полезна тем, кто захотел изменить шапку и поставить свою, индивидуальную.

Для этого необходимо пройти по следующему пути:

• зайти в административную панель;
• выбрать «Записи» = «Добавить новую»;
• перейти в режим HTML редактора;
• загрузить картинку, которая планируется в качестве шапки;
• после окончания загрузки в редакторе будет виден код картинки;
• его необходимо скопировать;
• «Запись» удалите;
• откройте раздел «Внешний вид» = «Редактор»;
• выберите файл header.php для редактирования;
• в нем нужно найти строку

Обратите внимание! Нужно немного изменить положение шапки на странице? Для этого возвратитесь в редактор, перейдите в код и в тег img, внесите атрибут style со свойством margin. Вот как это будет выглядеть: style=»margin:0 0 0 0;»

Как сделать шапку сайта: личный совет

Теперь вы знаете не только, как сделать шапку сайта, но и как установить ее на свой проект. Как можете сделать вывод из всего описанного выше, никаких сложностей быть не должно.

Если вас интересуют прочие секреты, как работать с платформой WordPress, читайте мой блог. В нем много полезного по этой теме.