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

Всем привет! Надеюсь, вам понравилась моя статья «Иконки социальных сетей для сайта»? Хорошо! Продолжаю публиковать в раздел «Графика для сайта», так как он содержит очень мало материалов, а вопросов на мою почту поступает большое количество, постараюсь на них ответить! В следующем уроке я расскажу вам, как сделать изображение прозрачным. Поэтому подписывайтесь на мои обновления и не пропускайте публикаций!

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

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

1. Откройте программу Фотошоп и создайте файл стандартным размером 960×150 пикселей. Ширину в 960 пикселей использует большинство шаблонов, но ширина не всегда может быть такая. Поэтому если у вас есть собственные размеры, создавайте документ, используя свои размеры. Ну, а высоту, я установил наиболее оптимальную: ни низкую, ни высокую – 150 пикселей.

Создание нового документа в Фотошопе

2. Создайте новый слой над основным слоем и назовите его «background».

Панель слоев в Фотошопе

3. Залейте этот слой любым цветом, например белым или черным, использую инструмент «Заливка» Инструмент Заливка в фотошопе на панели инструментов.

4. Перейдите в меню «Слой» => «Стиль слоя» => «Параметры наложения»

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

Параметры наложения в Фотошопе

Настройка градиента в Фотошопе

Вот что у меня получилось в итоге:

Заготовка для шапки сайта

Теперь давайте добавим текст.

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

7. Поместите текст в левом верхнем углу шапки, как у меня. Я не применял каких-либо эффектов. Выбрал шрифт, размер, цвет установил белый.

Добавление текста в Фотошопе

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

8. Скачайте и установите специальную кисть с полосками.

9. Создайте новый слой под названием «brush» (от англ. Кисть).

9. Выберите кисть под номером «801» и щелкните в левом верхнем углу, чуть выше текста.

Применение кисти для Фотошопа

10. Измените непрозрачность кисти на 10%

 Изменяем непрозрачность слоя в Фотошопе

Вот что в итоге должно получиться:

Применение эффектов для шапки сайта в Фотошопе

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

Для этого…

11. Создайте новый документ размером 10×10 пикселей.

Создание нового документа в Фотошопе

12. Создайте новый слой над основным слоем, а основной слой выключите, чтобы не было видно белого фона, а только прозрачный слой.

Скрываем слой заднего плана в Фотошопе

13. Выберите инструмент «Карандаш» Инструмент Карандаш в Фотошопе, который находится на панели инструментов в той же группе, что и кисть.

14. Установите основной цвет для карандаша белый Изменение основного цвета на белый

15. Теперь необходимо приблизить документ, чтобы нарисовать максимально точно.

Приближение документа в Фотошопе

16. Убедитесь, что слой «Слой 1» выбран и нарисуйте по правому и нижнему краю полоски толщиной в 1 пиксель.

Создание узора в Фотошопе

17. Перейдите в меню «Редактирование» => «Определить узор».

18. Нажмите «ОК».

Определение узора в Фотошопе

19. Закройте без сохранения созданный документ и перейдите к документу с шапкой.

20. Создайте новый слой под названием «grid» (от англ. Сетка).

21. Выберите инструмент «Заливка»  и на панели свойств установите «Регулярный».

22. Выберите из раскрывающегося квадратика рядом тот узор, который мы только что создали.

Изменение типа заливки в Фотошопе

23. Залейте только что созданный слой этим узором. Должно получиться следующее.

Применение созданного узора в качестве заливки

24. Переместите слой «grid» ниже слоя с текстом и уменьшите непрозрачность слоя «grid» до 2%.

Изменение непрозрачности слоя с заливкой

Все наша шапка для сайта готова! Также вы можете подключить фантазию и дополнить её какими-то своими элементами. Это самый простой и быстрый пример создания шапки для вашего сайта.

Шапка сайта

На этом у меня все! Подписывайтесь на обновления блога по электронной почте и не пропустите следующих уроков! Если у вас остались вопросы смело задавайте их в комментариях!!

P.S. Ну что, понравилась статья? Дальше будет только интереснее! Поэтому смело подписывайтесь на мои обновления блога и будьте в курсе происходящего! Вас ждут интересные и полезные статьи, конкурсы, опросы и много чего интересного! Также можете порекомендовать мои уроки своим друзьям в социальных сетях, кликнув по иконкам социальных сетей, чуть ниже этого сообщения.

Понравилась статья? Поделитесь с друзьями!

0


This Post Has Been Viewed 43 Times

Автор статьи: , дата публикации

Читайте также на моем блоге:

  • Как сделать картинку прозрачной в Фотошопе
  • Favicon для сайта — как средство привлечения посетителей!
  • Создание шапки для сайта или блога своими руками!
  • Фон для сайта в Photoshop своими руками!
  • Как я делаю красивые изображения к своим постам (видеоурок)
  • Иконки социальных сетей для сайта
  • Как сохранить изображение с сайта
  • Картинки и иконки для сайта на темном фоне
  • Стильный фон для сайта (часть 2)
  • Стильный фон для сайта
Читатели оставили 11 комментариев к этой статье:
  • Сосновоборск13.11.2015 в 16:52

    спасибо за помощь!

  • Олег Астанин
    Олег Астанин08.03.2016 в 02:18

    Если есть вопросы задавайте

  • Александр26.03.2016 в 18:10

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

  • Софья04.04.2016 в 01:36

    Статья очень хороша для сайтов начального и основного уровня. Отлично описано! Вполне можно сделать шапочку за 5-10 минут, а потом уже переходить к чему-нибудь посложнее ;)

  • Наталья06.04.2016 в 13:22

    Надо сначала сделать несколько шапок для сайтов, То есть потренироваться. А потом уже выбрать для сайта самое лучшее. При желании, кстати, можно на этом хорошо зарабатывать! Есть такой зарубежный сервис, называется Envato-маркет. Там можно продавать разные штучки для сайтов: иконки, логотипы, шапки или вообще фотографии. Это стабильная, серьезная компания и люди делают там совсем неплохие деньги.

  • Татьяна06.04.2016 в 18:16

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

  • den114207.04.2016 в 17:13

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

  • Renat07.06.2016 в 21:42

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

  • Станислав30.07.2016 в 13:53

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

  • Коля01.09.2016 в 16:58

    Статья очень хороша для сайтов начального и основного уровня. Отлично описано! Вполне можно сделать шапочку за 5-10 минут, а потом уже переходить к чему-нибудь посложнее ;)

  • wango13.09.2016 в 10:16

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

Добавить комментарий к этой статье:

(обязательно)

(не будет опубликовано, обязательно)

Вебсайт (если есть)

  • Получайте оповещения о выходе новых статей на Ваш E-mail. Для этого, введите Ваш E-mail и нажмите Enter.

  • Рубрики

  • Присоединяйся ко мне!

    Группа
    Вконтакте

    Канал на
    You Tube

    Я на
    Twitter