Фш своими руками

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 


This Post Has Been Viewed 257 Times

Facebook

Вконтакте

Google+

Источник: http://olegastanin.ru/fon-dlya-sajta-v-photoshop-svoimi-rukami.html

Предыдущая статья: лотос из бисера своими руками

Следущая статья: головной убор вьетнамца своими руками

Лучшие статьи: