MegaWeb.su Главная > Фотошоп > Градиент для сайта в фотошопе урок

Градиент для сайта в фотошопе урок


1-04-2011, 17:20. Разместил: Admin
Градиент для сайта в фотошопе урокКак сделать градиент для сайта в фотошопе + мега коллекция градиентов на все случаи жизни
Градиент - это плавный переход от одного цвета к другому. В дизайне сайта градиент это мощнейший инструмент. Я встречал много сайтов где в дизайне ну никакого графического оформления, одни скруглённые блоки с градиентным фоном картинкой и дизайн такой ни грамма не уступает навороченным, перенасышенным картинками сайтам. Дизайн с грамотно подобранными цветами градиента смотрится строго и очень стильно.
Скоро придёт время CSS3 градиента, но я уверен что CSS3 градиент не сможет полностью заменить и вытеснить градиент картинку.

Хотел написать статью про градиент и урок как самостоятельно создать свой градиент в фотошопе, но мне попалась хорошая статья Ярослава Чернышёва Как сделать градиент в Фотошопе? и мне она понравилась, всё просто и понятно.
И я решил не изобретать лисапет, а просто скопировать статью.
Нажмите на картинки для увеличения(яваскрипт должен быть включен)

Как сделать градиент в Фотошопе?


Здравствуйте, дорогие читатели и читательницы. Очень хочется вас спросить: как вы относитесь к красивому утреннему небу, плавно переходящему из голубого в белый? К спокойной ряби воды, которая в глубине темно-синяя, а ближе к берегам прозрачная? К первому снегу, который через некоторое время начинает таять, и плавно меняет свой цвет от белого в чёрно-коричневый? И причём здесь уроки Фотошопа, и вся эта билибердень, которую я у вас спрашиваю? Да притом, что сегодня мы с вами будем проходить инструмент закрашивания, плавно переходящего из одного цвета в другой. Этот инструмент называется «Градиент». Вы когда-нибудь мечтали закрасить белый лист бумаги чёрным цветом плавно переходящим в синий? Это мечта настоящего Фотошоп мастера. Уверяю вас, это не так сложно как выглядит на первый взгляд. Если у вас есть фотография, на которой вы получились замечательно, а вот фон просто отвратительный, выделяем себя, копируем на новый слой (это сделать поможет нам волшебная комбинация клавиш «Ctrl +J») и с помощью «Градиента» вы сможете на заднем плане сделать красивое свечение. Так же узнать об изменении фона картинки вы можете в этом уроке. Ну, так вперёд, к покорению «Градиента».

Этот высокоуважаемый предмет находится на панели инструментов между инструментами «Ластик» и «Размытие». Вместе с «Градиентом» в одной ячейке находится инструмент «Заливка», который просто позволяет нам залить фон однородным цветом.

Градиент для сайта в фотошопе урок

Все мы знакомы с инструментом «Заливка», из, всем нам известного, Paint. Как надо пользоваться «Градиентом»? Для того чтобы нарисовать градиент, нужно кликнуть по изображению левой кнопкой мыши и провести полосочку, которая показывает, где будет располагаться главная часть градиента.

Градиент для сайта в фотошопе урок

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

Градиент для сайта в фотошопе урок

Итак, приступим к скучному, нудному, но очень познавательному разглядыванию настроек инструмента «Градиент». Слева мы видим непонятную, и полную тайн, полосочку с плавно перетекающим цветом. С огромным любопытством, и сделав умный вид, на неё нажимаем. У нас появляется окошечко, в котором мы видим заголовки «Установки», «Градиент» и «Контрольные точки».

Градиент для сайта в фотошопе урок

В разделе «Установки» мы видим большое количество различных квадратиков. Эти квадратики и есть градиенты, только маленькие. Выбрав один из них, вы заметите, что большая полоска в разделе «Градиент» поменяла цвет. Загрузить, поменять отображение миниатюры, восстановить градиенты вы можете нажав на маленькую стрелочку, справа сверху над окном “Установки”.

Градиент для сайта в фотошопе урок

Давайте с вами разберём для начала самый простой градиент, состоящий из двух цветов. Например, Чёрно-белый. Выбрав его, большая полоска опять поменяла свой цвет. Теперь она стала слева чёрной, а справа белой. И вы наверняка заметили, что на этой полоске по бокам есть по два флажка. Но эти флажки не обязательно должны по бокам, вы их можете передвигать, передвижение флажка влияет на плавность градиента. Нажав на верхний флажок, вы увидите, что снизу активировалась менюшка, в которой можно устанавливать параметры данного флажка, то есть «Непрозрачность» и «Позицию». Непрозрачность влияет на прозрачность градиента в том или ином участке полоски, в зависимости от того где у вас расположен флажок. «Позиция» отвечает за расположение флажка на полоске. Это логично, не правда ли? А нижний флажок активирует другие параметры градиента на полоске. Такие как «Цвет» и «Позиция». Здесь всё предельно ясно. Нажав на «Цвет» появится палитра цветов, в которой вы сможете выбрать нужный вам цвет для полоски градиента.

Градиент для сайта в фотошопе урок

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

Градиент для сайта в фотошопе урок

Ну а если вам нужно убрать флажок – просто нажмите на него. После чего активируется менюшка снизу, где можно будет нажать на кнопку «Удалить». Вот такими не сложными методами можно создать собственный градиент.

Продолжаем изучать далее настройки градиента. Справа от полоски мы видим пять типов работы градиента: «Линейный», «Радиальный», «Конусовидный», «Зеркальный» и «Ромбовидный» градиенты.

«Линейный градиент» – это обычный градиент, который начинается в точке, которую вы поставили, и заканчивается в точке, до которой вы провели полосочку. Его изображение можно увидеть сверху.

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

Градиент для сайта в фотошопе урок

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

Градиент для сайта в фотошопе урок

«Зеркальный градиент» это тот же линейный, но он будет отражён. Точкой отражения будет являться в первой точке.

Градиент для сайта в фотошопе урок

«Ромбовидный градиент» очень красив сам по себе, но достаточно трудно объяснить, как он выглядит. Поэкспериментируйте методом научного тыка. И обязательно посмотрите на картинку.

Градиент для сайта в фотошопе урок

Далее в настройках мы видим графу «Режим». Эта графа отвечает за режим наложения градиента на данный рисунок. Когда вы нажмете графу «Режим» снизу выдвинется менюшка, в которой будут предоставлены, во всей своей красе, названия всех режимов наложений. Пощелкайте, поэкспериментируйте с каждым из них. Кстати, войдя в графу «Режимы» можно будет их переключать колёсиком мыши. Далее за «Режимом наложения» идёт настройка прозрачности градиента. От этой настройка зависит просвечиваемость вашего градиента. Чем меньше число в графе «Непрозрачность», тем сильнее видно изображение, на которое вы наносите градиент. Далее мы видим Настройку «Инверсия», где можно поставить галочку. Если мы там поставим галочку, то наш градиент примет своё зеркальное отражение. Советую вам пощёлкать на эту настойку, и посмотреть на полосочку градиента в настройках слева, и вы сразу поймёте суть этой настройки. Левый край этой полосочки соответствует началу градиента, то есть той точки, из которой мы начинаем вести градиент.

На этом наш скучный и нудный , но очень познавательный урок о «Градиенте» заканчивается. Желаю вам новых высот в покорении «Градиента», и побед на личном фронте. До свидания!


Хочу предложить ещё свою коллекцию градиентов, которой я частенько пользуюсь, когда-то она называлась 6000 градиентов.
Скачать мега коллекция градиентов на все случаи жизни У вас нет доступа к скачиванию файлов с нашего сервера

Ещё хочу предупредить новичков - НИКОГДА не качайте никакие мега коллекции, эти градиенты исключение!
У меня много разных мега коллекций, у меня даже просмотреть их терпения не хватает, не то что бы выбрать что-то нужное.
Ищите и качайте только то что вам нужно, а в мега коллекции заблудишься и так ничего и не выберешь, а то и вообще забудешь что искал.
Вернуться назад