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

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

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

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

Новое событие в блогосфере Олега Астанина

Совсем недавно, примерно полмесяца назад я принял участие в конкурсе блогеров на блоге Александра Сергиенко. Суть конкурса заключалась в написании статьи на тему «Почему я решил создать свой блог?». Сегодня мне на блог написали в комментариях к этой статье, что я оказался в числе победителей конкурса. Я занял второе место! Первое место занял Белан Константин.

Моя статья очень понравилась как жюри конкурса, так и участникам. Скажу честно, я читал не все работы участников. Но большее количество точно прочитал. А именно работы тех, кого добавил в ВК в друзья, и так, у кого не было профиля в Вконтакте. Эти работы тоже читал. Работу Кости читал дольше всех! Молодец!

SEO sprint - Всё для максимальной раскрутки!

В итоге я получил следующие призы: видеокурс «Блогер наставник» и премию в размере 1000 рублей на кошелек ВебМани. Вот скриншот приходного ордера.

Пополнение ВебМани на 1000 рублец!

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

Создание шапки сайта в программе Photoshop CS5

Открываем программу фотошоп и создаем новый документ размером 960×150 пикселей. Я взял стандартный размер ширины и среднюю высоту. Ваши параметры могут отличаться от моих.

Создание нового документа в Photoshop CS5

Цвет для будущей шапки выберите исходя из своих целей. Я же установил основной цвет для инструмента «Заливка» вот такой #ccdd14. У нас получилась монотонная однообразная заливка, ни каких переходов, ни чего нет. Для того чтобы приукрасить сие творение применим специальные кисти и изменим некоторые параметры наложения. Все по порядку.

Создайте новый слой поверх слоя с заливкой шапки.

Создание нового слоя в Photoshop CS5

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

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

 

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

 

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

Создание дополнительного фона

Создаем документ размером 10×10.

Создание ноовго документа в Photoshop 10x10

Удаляем фоновый слой, который там находится по умолчанию, и создаем новый, оставляя его прозрачным!

Новый прозрачный слой в фотошопе

Увеличиваем созданный документ так, чтобы можно было увидеть квадратики пикселей. Я увеличил по максимуму! Далее, выбираем инструмент «Карандаш». Ставим основной цвет на белый.

Выбор инструмента карандаш в программе Photoshop CS5

Закрашиваем карандашом левую и нижнюю области в 1 пиксель белым цветом! Если мы добавим один слой ниже этого слоя и закрасим его в черный цвет, то увидим, что получается у нас. Так будет лучше видно.

Создание паттерна для заливки фона

Все, наш фон практически готов! Осталось нам его определить, что этот документ является фоном. Для этого переедите на вкладку «Редактирование» — «Определить узор».

Определение узора для будущего фона

Я дал нашему паттерну название. Вы можете сделать это на свое усмотрение.

 

Все. Наш фон готов Теперь закрываем документ 10×10 не сохраняя его и переходим на документ с шапкой. Создаем новый слой и назовем его «сетка».

Создание нового слоя для фона сетки

На этом слое и будем создавать красивый эффект клеточки. Также сделаем её мягкой. Для этого выберите инструмент «Заливка». В верхней части рабочего окна, сразу под основным меню измените параметр заливки с «Основной цвет» на «Регулярный». Цвет установите белый.

Изменение параметров заливки на регулярный

Рядом в квадратике выберите созданный нами белый уголок.

Выбор созданного паттерна для фона в фотошопе

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

 

Теперь изменим режим наложения на мягкий свет. Должно получиться вот так.

 

Но меня такой вид не устраивает. Давайте немного приглушим верхнюю и нижнюю границы. Сделаем, как бы мягкий переход! Для этого проделаем следующие действия.

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

Создание маски слоя в программе фотошоп CS5

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

Выбор наложения градиента на зеркальный

Теперь от середины нашей шапки нужно протянуть градиент. Примерно чуть ниже самого рисунка, чтобы растушевать наложенный градиент. Убедитесь, что маска слоя находится в выделенном состоянии, иначе градиент ляжет прямо на шапку!

Наложение зеркального градиента на маску слоя

Порядок слоев в фотошопе

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

 

Теперь приступим к добавлению текстовой составляющей шапки. Я добавил текст «Блог Олега Астанина. Создай свой блог за 1 час!». Я не мастер оформления графики, поэтому получилось что-то типа этого:

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

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

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

Расположение слоев в рабочем документа

Выберите инструмент «Кисть», а затем и любую кисть из списка. Их там не очень много, поэтому можете смело поэкспериментировать.

Набор кистей для фотошопа Brush Set завихрени

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

 

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

 

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

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

После того, как создали нужный контур, нажмите сочетание клавиш «Ctrl+Enter», чтобы появилось выделение контура. Выберите инструмент «Градиентная заливка». Выберите в панели свойств «Линейный градиент», цвет установите от белого к прозрачному. Градиент проводим снизу вверх, с нажатой клавишей «Shift».

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

Убедитесь, что у вас выделен слой «Блик». И протяните градиент снизу вверх. Снимите выделение сочетанием клавиш «Ctrl+D». Измените наложение градиента, либо на «Мягкий свет», либо измените непрозрачность до 30%. Вот, что получилось у меня.

 

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

Это конечно не вершина дизайна, но для начинающих сайтостроителей как раз кстати. Я надеюсь урок вам понравился. Ставьте лайки, рассказывайте в социальных сетях об этой удивительной шапке своим друзьям, задавайте вопросы, если что-то было не понятным. До скорых встреч!

С уважением, Олег Астанин
Автор проекта olegastanin.ru

SEO sprint - Всё для максимальной раскрутки!

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

0


This Post Has Been Viewed 35 Times

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

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

  • Как сделать картинку прозрачной в Фотошопе
  • Favicon для сайта — как средство привлечения посетителей!
  • Фон для сайта в Photoshop своими руками!
  • Как я делаю красивые изображения к своим постам (видеоурок)
  • Шапка для сайта
  • Иконки социальных сетей для сайта
  • Как сохранить изображение с сайта
  • Картинки и иконки для сайта на темном фоне
  • Стильный фон для сайта (часть 2)
  • Стильный фон для сайта
Читатели оставили 6 комментариев к этой статье:
  • Юрий Ваценко, 26.05.2014 в 23:02

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

  • Олег Астанин
    Олег Астанин26.05.2014 в 23:04

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

  • Софья03.04.2016 в 20:56

    Прикольная шапочка получилась))) Нужно попробовать сделать, когда-то давно умела делать, да обленилась))) Теперь придется заново учиться :)

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

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

  • Татьяна06.04.2016 в 17:35

    При возможности скачаю фотошоп и попробую проделать все это. Надеюсь, что с Вашим подробным объяснением у меня все получится. Обычно,когда обрезаешь картинку для шапки блога, то она часто получается пиксельной слишком... А это некрасиво. Значит попробуем этот способ)

  • den114207.04.2016 в 16:31

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

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

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

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

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

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

  • Рубрики

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

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

    Канал на
    You Tube

    Я на
    Twitter