Как сделать фон в Фотошопе CS5 | Как создать свой сайт

О том, как сделать фон в Фотошопе CS5

Мар-19-2012 Автор: VeryOldMan

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

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

Как сделать красивый фон в Фотошопе CS5

Откроем наш сохраненный файл с размерами 960 на 800 пикселей. Размеры – чисто условные. Вы можете сделать файл с любыми вам нужными. Какие есть варианты создания фона? Вариантов множество. Самый простой — просто залить слой цветом по вашему вкусу. Делается это просто.

Как залить цвет в Фотошопе CS5

Итак, файл открыт. В главном меню щелкнем на Редактирование (Edit) – Выполнить заливку (Fill). Появиться окошко Заполнить:

Как залить цвет в Фотошопе CS5

в котором в меню Использовать выбираем Цвет(Color):

как сделать фон в Фотошопе CS5

В открывшемся окошке выбираем цвет заливки. Это просто Если навести курсор на цветное поле слева он превратится в кружок. Кликнув на выбранном оттенке, выбираем его. Для изменения оттенков на цветном поле слева служит цветовая шкала в виде полоски справа. Цепляем курсором ползунок и таскаем его вверх – вниз. Выбрав цвет жмем Да и еще раз Да в окошке Заливка. Видите? Уже красиво! Можно сохранить файл, а можно попробовать применить фильтры для еще большей красивости. Кстати очень интересно и не сложно.

В главном меню щелкнем на Фильтр. В выпадающем меню можете выбрать любую категорию фильтров, а проще щелкнуть на Галерея фильтров (Filter Gallery):

фон в Фотошопе CS5

Кликнув на треугольнике выбираем нужный набор, кликнув на картинке фильтра включаем его. Справа – настройки. Слева образец того, что получится. Понравилось? Жмем Да. Передумали? В главном меню выбираем:

Редактирование (Edit) – Шаг назад (Step Backward) и экспериментируем дальше.

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

Для того, чтобы вернуться к какому-то варианту ваших экспериментов, есть очень хороший инструмент – панель История:

В этой панели они и хранятся. Щелкнув на любом из них вы их — выбираете. А дальше или сохраняете понравившийся вариант или продолжаете экспериментировать.

Есть еще один инструмент в Фотошопе, называется он — градиент. Попробуем разобраться как сделать фон в Фотошопе, для страницы сайта, с помощью этого инструмента.

Градиенты для Фотошопа cs5

Слева на панели инструментов есть такой значок в виде прямоугольника:

Активируем его. Для этого кликнем по нему правой клавишей и из выпадающего меню выберем Инструмент «Градиент» (Gradient), кликнув по нему левой клавишей. Вверху слева, в панели свойств инструментов вы увидите цветную полоску и пять кнопок справа:

Градиенты для Фотошопа cs5

Кликая по кнопкам можно выбрать тип градиента, и попробовать с его помощью сделать фон. Типы есть такие. Линейный градиент, Радиальный градиент, Конусовидный градиент, Зеркальный градиент, и Ромбовидный. По умолчанию активирован обычно первый. Чтобы понять, что же такое градиент проведите небольшой эксперимент. При активированном градиенте, любого цвета, подведите курсор (он будет в виде крестика) к верхнему краю своего фонового слоя, нажмите левую клавишу мыши и не отпуская, тяните линию вниз до нижнего края слоя. Отпустите клавишу. Понятно?

Теперь, как выбрать цвет градиента? Щелкаем мышей на цветной полоске. Всплывет окошко Редактор градиентов (Gradient Editor). В окошке Наборы выбираем нужный градиент и жмем Да:

Градиенты для Фотошопа cs5

Обычно с программой Фотошоп дается некоторый набор градиентов. Чтобы проверить и загрузить то, что есть в наличии, в редакторе градиентов кликнем на Загрузить. Находим папку сградиентами по адресу — С:\Program Files\Photoshop\Presets\Gradients. Выбираем градиент из перечня и жмем кнопку Загрузить.

Если для того, чтобы сделать фон имеющихся градиентов для вас мало, то их можно скачать готовые в Интернете.
Что делать со скачанными градиентами? Градиенты это вот такие файлы:

Нужно разархивировать папку, если это архив, скопировать их и вставить в папку: если вы установили Photoshop на системный диск, как он вам предложил, то по адресу: С:\Program Files\Photoshop\Presets\Gradients.

Как загрузить градиенты в Фотошоп CS5

Загрузка градиентов. В редакторе градиентов жмем кнопку Загрузить. Появиться окошко Загрузить. Щелкаем по значку справа:

 Как загрузить градиенты в Фотошоп CS5

и выбираем путь: С:\Program Files\Photoshop\Presets\Gradients. Дальше выбираем из списка нужный градиент и нажимаем кнопку Загрузить. Кстати к слою, залитому градиентом, тоже можно применить фильтры. Можно получить очень неплохие результаты, в том числе и для того, чтобы сделать фоне для страницы сайта.

Как изменить градиент в Фотошопе

В редакторе градиентов, естественно, можно редактировать градиенты. Видите, внизу изображение градиента? А квадратики вверху и внизу? Два квадратика вверху это так называемые контрольные точки прозрачности. Кликните на любой из двух. Внизу в меню Контрольные точки есть окошко Непрозрачность и окошко Цвет. Как редактировать непрозрачность. Для этого нужно на верхней части полоски, в нужном вам месте градиента, щелкнуть левой клавишей мышки. Появится бегунок в виде квадратика. Щелкнем клавишей мышки на треугольнике окошка

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

А теперь — контрольные точки цвета:

Так вот, если вы хотите изменить цвет. Внизу в меню есть окошко Цвет. Кликаем на окошке с цветом. Появляется палитра, такая же, как и при заливке. Выбираем цвет, жмем кнопку Да.

Рассмотрим  еще один вариант замены цвета градиента. Вы, наверное, обратили внимание, что если подвести курсор на изображение градиента то он принимает вид пипетки. Это и есть инструмент Пипетка, который вы можете увидеть на основной панели инструментов. Как она работает. Щелкаем курсором на выбранной контрольной точке цвета и наводим курсор на нужный оттенок на самом изображении градиента или на любом изображении за пределами редактора градиентов. Щелкаем левой клавишей мыши и цвет изменен.

Контрольные точки цвета можно добавлять и удалять так же, как и контрольные точки прозрачности.
Если хотите сохранить градиент – нажмите кнопку Сохранить, дайте ему имя и еще раз нажмите Сохранить в папке Gradients.

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

Для фона можно взять еще так называемые текстуры или бекграунды. Текстур с высоким разрешением в Сети полно, часто даже бесплатно. А уж, какие они могут быть! Это и дерево, и бетон, асфальт, трава, цветы, ткань… Короче чего только нет. Поэтому подбирая фон для страницы сайта, постарайтесь не увлекаться. Ведь на фоне страницы будет еще и текст Ваших статей, который должен быть легко читаемый.

А мы вернемся к урокам дизайна сайта в программе Photoshop на странице Инструмент кисть в Фотошоп






2 комментария
  1. Александр Пишет,

    Статья как научный реферат/ Вроде объяснения простые, а начнешь что-то делать в практической плоскости ничего не получается.

  2. Назар Пишет,

    Добрый вечер!!!

    у меня фотошоп cs5 согласно Вашей инструкции…(очень даже понятной)…пытаюсь создать фон…но он у меня настойчиво серый…и никак не меняется…не могу понять что я делаю не так…подскажите…пжл… 🙂

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