S-p.su

Антикризисные новости
1 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Шапка для сайта в фотошопе

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

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

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

Наличие уникальной шапки (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/имя файла)
>

  • Background-color используется, если изображение не отобразится в каком-либо браузере. Фиксация фотографии (во избежание ее смещения) осуществляется путем прописывания position: fixed.
  • Как сделать шапку сайта HTML:

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

    название

    описание

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

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

  • Ширина h3 не должна быть большой, иначе текст займет все пространство картинки. Отступы регулируются в зависимости от того, где конкретно планируете расположить текст.
  • Размещение на WordPress

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

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

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

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

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

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

    Уроки по фотошопу

    Доброго времени суток уважаемые посетители сайта о заработке, Monymaker точка РУ. Сегодня на сайте продолжаются уроки по фотошопу для начинающих блоггеров. И этим «постом» я хочу продолжить тему по созданию графического изображения «лица сайта»,а само его шапки.

    Думаю этими уроками по фотошопу я не покажу ничего нового «продвинутым» пользователям различных графических редакторов. Некоторые мои знакомые сайтмены просто влюблены в Gimp.
    Но попробовав сделать так, как выкладываю эту тему я, даже воспитанник младшей группы детского сада сделает отличную картинку, чтобы подарить своей маме на 8-ое марта.

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

    Cделать шапку сайта в программе photoshop

    • Для этого заходим в интернет и скачиваем ZIP программы Photoshop,или идём по моей ссылке на Яндекс диск.

    Затем на поисковике Yandex-e или Google щёлкаем скачать бесплатно картинки, выбираем изображения на любую тему и побольше с элементами природы, городских улиц, машин,людей, ну и желательно компьютерно-телефонной тематики.Почему ?, мы будем из них делать различные «компановки»,при помощи программы фотошоп.

    Если в специализированных магазинах вашего города или посёлка, продаются программы для работы с фотографиями типа Фотошоп, то приобретите одну из них.Если нет, то в сделав запрос на эту тему(скачать бесплатно),вы получите миллиона два предложений на скачку.Фотографии и графику сразу загрузите на диск С,под именем «workfiles»,а программу для работы с изображениями Adobe Photoshop,всё равно куда,лишь бы нормально и быстро открывалась.
    Многие начинавшие с 2-х тысячных годов мастера дизайна,работали с ещё одной производной этой программы «Image Ready»,но вы не парьтесь(как мы в своё время)сейчас и в упрощённой версии Адоба есть все нужные опции для нашей работы.

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

    Справа жмём на уголочек и видим- РС-пиксели,жмём и ставим допустим -«1024».Это будет ширина проекта,а следующая величина-это высота.Высоту шапки, чтобы она выглядела прилично(в формате),ставим от 100 до 150-пикселей.Берём среднюю «120».

  • Следующая величина-это разрешение изображения,оно влияет на качество будущего нашего шедевра. Я не смеюсь и не подкалываю, а чем мы хуже «их», «они» все свои работы по другому не называют.Вот эта величина по умолчанию будет выходить-72пикселей на дюйм,и это значение мы оставляем.А если его не было, то выставляем-72 пикс/дюйм.
  • Ниже идёт цветовой режим RGB,ну и количество цветов(по умолчанию) 8 и цвет фона белый.

    Выставляем размеры и цветовую гамму будущего изображения

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

    Если вы хотите изменить размеры, то щёлкнув в нижней левой колонке по значку-лупа-и нажав клавишу- ALT-колёсиком мыши выставьте какой вам размер больше подходит для работы.Но не переусердствуйте,если ваша картинка,из которой вы будете делать «ШАПКУ» вашего сайта будет малого формата, могут появиться трудности с её масштабированием, то есть повлияет на качество изображения. А вот это мы уже рассмотрим дальше.

  • В современных программах выше -файл- есть опции Br; Mb; и квадратик с линейкой,вот на него и нажимаем. Выходит подменю:читаем-направляющие,сетки,линейки-выбираем последнее.И в результате наша рамка снаружи обрастает 2-мя линейками, так необходимыми нам свами для работы.
  • Для удобства работы с изображениями выставте нашу рамку посередине рабочего поля.Для этого поочерёдно потяните за правый и нижний его края,при помощи левой нажатой кнопки мыши.
  • Следующий этап: выбираем поле деятельности, т.е картинку с какой мы будем работать.Жмём —ФАЙЛ-открыть- и диск С ,куда мы поместили наши рабочие файлы,или картинки.После нажатия на выбранный файл и открыть мы получаем на рабочем поле программы выбранное нами изображение,тоже в поле, и тоже с линейками.

    Перетаскиваем выбранное изображение в шаблон

    Потяните за шапку этого поля и выставьте как вам будет удобно с ним работать.Я не говорю вам где его лучше ставить,потому что это лишнее: в процессе работы вы сами определите,как и где это вам будет лучше.

  • Следующим номером нашей программы будет выбор, что оставлять и что удалять с этого изображения.Если картинка вписывается в наш будующий интерьер полностью,мы просто берём и приёмом grab. перетягиваем её с этого поля на то,где делается компановка или сборка(если хотите) нашей визитки и отпускаем.
    Картинка останется в поле будущего файла.Если не получается, то снова щелчок по чёрной стрелке и приём граб-пока не получится.Если всё равно не получается, то придётся переустановить программу фотошоп,т.к с таким сбоем работы не будет.
  • Если наше изображение велико, то попробуем его немного сжать при помощи опции—трансформирование—масштабирование-.

    Вставляем картинку и и при этом меняем масштаб

    После включения этой опции картинка обрамляетcя прямоугольником с маленькими квадратиками. Вот направив курсор на них и нажав левую кнопку мыши мы будем сжимать, или раздвигать наш объект.При достижении нужного результата, дважды щёлкнуть(левой кнопкой мыши) ниже нашей чeрный стрелки,напротив чeрного ромбика и увидев бланк с предложением- применить трансформирование ? даём добро.

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

  • Но если всё-таки изображение не вписывается в наш прямоугольник, то будем резать.Для этого есть несколько способов, но мы рассмотрим самый простой.
  • Сначала определим какую часть будем оставлять и желательно определить всё в пикселях.После этого,направьте курсор мыши на верхний край линейки до появления на экране —II—такого знака и потянуть вниз направляющую,которая отделилась от линейки.По боковой мы смотрим на сколько делений нам нужно её опустить.Осторожно кнопку мыши отпускаем (чтобы не сдвинуть линию) и нажимаем на чёрную стрелку в верхнем левом углу.
    Это как бы является подтверждением нашего действия.После того как определили границы удаления,щёлкаем по пунктирному квадрату ниже нашей чёрной стрелки.Наводим курсор на самую границу удаляемого участка и нажав левую кнопку обводим аккуратно участок отсечения и отпускаем кнопку.

    Отсекаем ненужные части

    Наш участок становится выделенным пунктиром по периметру.Теперь остаётся нажать на клаве- Delete и этот участок исчезнет с изображения. Щелчок по полю и пунктир так же исчезнет.

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

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

  • Ссылка на основную публикацию
    ВсеИнструменты 220 Вольт
    Adblock
    detector
    ×
    ×