Фон для сайта в Photoshop своими руками!

Здравствуйте, уважаемые читатели блога olegastanin.ru! На связи ваш хороший знакомый в сфере блогостроения Олег Астанин. И сегодня я затрону очень, на мой взгляд, нужную тему. Создание графического изображения, которое будет выступать в качестве фона для сайта.

Фон для сайта в Photoshop своими руками!

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

Создание фона для сайта в фотошопе

Итак, открывайте программу фотошоп и преступайте к созданию нового документа большим форматом, примерно 1280×720 этого вполне достаточно. Этот первый документ будет служить нам платформой для проверки качества созданного фонового изображения.

При создании фонового изображения вы можете использовать следующие размеры документа: 300×300, 150×150, 75×75 и т.д. Я использую 75×75, потому что он будет меньше всего весить по размеру и будет быстрее загружаться.

Создаем новый документ размером 75×75.

Создаем новый документ размером 75х75

Далее выбираем необходимый цвет для дальнейшей заливки. После того, как определились с цветом, заливаем наш квадратик этим цветом. Я выбрал вот такой цвет.

Однотонная заливка области в Фотошоп

Далее, для более красивого эффекта наложим фильтр, под названием ШУМ (Noise). Я выбрал вот такие параметры для моего фонового изображения.

Параметры уровня шума

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

Фильтр, под названием ШУМ (Noise)

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

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

Меню "Редактирование"

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

Нажимаем сочетание клавиш «Ctrl+Alt+Shift+S» или переходим в меню «Файл» далее выбираем пункт «Сохранить для Web и устройств…». Выберите формат JPG и установите качество по максимуму. Пусть картинка остается такой, какая есть. Можно, конечно поставить и 80%.

Сохранить для Web и устройств…

Первая часть готова. Теперь необходимо протестировать наш фон. Как он будет смотреться, если выполнить сплошную заливку этим квадратиком. И для этого необходимо перейти в наш большой документ и выбрать инструмент «Заливка».

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

Панель свойств в фотошопе. Инструмент заливка

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

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

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

Вот что получилось у меня.

Фон для сайта готов

Однотонная заливка с шумом. Такие вещи можно делать с помощью CSS3. Причем нагрузка на трафик будет минимальная. Но, в CSS3 надо еще уметь разбираться. А если добавить к нашему фону какой-нибудь текст, то настроение сразу же меняется.

Фон для сайта в фотошопе

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

З.Ы. Чуть не забыл, вот, держите ссылку на мой скромный архивчег с фонами.

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

 

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

0


This Post Has Been Viewed 71 Times

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

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

  • Как сделать картинку прозрачной в Фотошопе
  • Favicon для сайта — как средство привлечения посетителей!
  • Создание шапки для сайта или блога своими руками!
  • Как я делаю красивые изображения к своим постам (видеоурок)
  • Шапка для сайта
  • Иконки социальных сетей для сайта
  • Как сохранить изображение с сайта
  • Картинки и иконки для сайта на темном фоне
  • Стильный фон для сайта (часть 2)
  • Стильный фон для сайта
Читатели оставили 12 комментариев к этой статье:
  • Олег Астанин
    Олег Астанин10.02.2014 в 21:18

    Плагин называется Subscribe to Comments!

  • Сергей06.05.2015 в 21:44

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

  • Олег Астанин
    Олег Астанин25.05.2015 в 20:17

    Пожалуйста!

  • Юрий11.09.2015 в 18:03

    Между фонами на предпоследнем и последнем изображении в статье есть некая разница. Это сделано с помощью CSS3?

  • Олег Астанин
    Олег Астанин14.09.2015 в 12:33

    Да, с помощью CSS.

  • Софья04.04.2016 в 00:29

    Хороший урок. Фон можно сделать текстурный — под дерево, ткань, мятую бумагу и т.п. Для некоторый сайтов идеален натуральный фон — под траву, бамбук, шерсть, опилки... Для настроения можно добавить яркие тона. В общем, выбирайте себе фон по вкусу и делайте его с этим уроком!

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

    Похоже нужно срочно осваивать Фотошоп. Получается, что для создания толкового дизайна сайтов без него никак, на одних шаблонах далеко не уедешь. Эх, лень матушка, и как от тебя отбиться?! :)

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

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

  • Кирилл06.04.2016 в 23:57

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

  • den114207.04.2016 в 16:44

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

  • Карина С.17.06.2016 в 16:39

    Уже и попробовала эти советы на деле! Действительно, когда следуешь указаниям и подсказкам, все кажется элементарно простым! Сама же тупила долго… Но теперь я УМЕЮ, и в планах освоить и другие уроки фотошопа, чтобы делать свои шедевры!

  • Валерий, 22.07.2016 в 01:25

    Ага, еще одна страничка блога пошла в закладки. Отлично. Опять на ловца зверь бежит. Как видите — один блог Олега может обучить созданию сайта в php с CSS. разве же это не отлично? Это просто суперовски. Как только создам свое чудо по методике автора — выложу на обозрение здесь (если конечно Олег разрешит).

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

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

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

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

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

  • Рубрики

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

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

    Канал на
    You Tube

    Я на
    Twitter