Библиотека готовых градиентов , которые могут вам понадобиться в любой момент во время работы с Photoshop , отлично экономит ваше время. Градиент – это один из наиболее часто используемых инструментов, в особенности при подготовке фонов, иконок и кнопок для веб-страниц.

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

Количество градиентов: 10,000
Описание: Огромный набор градиентов для Photoshop, содержит 10,000 образцов, которые вы можете использовать в своей работе.

Количество градиентов: 30
Описание: Здесь вы найдете 30 прекрасных градиентов, которые вы можете бесплатно использовать даже для коммерческих проектов. Архив содержит файл GRD, который вы можете установить в Photoshop.

Количество градиентов: 26
Описание: Вашему вниманию предлагается 18+8 ультрамодных веб-стилей для Photoshop, которые вы можете бесплатно скачать и использовать как для личных, так и для коммерческих дизайнерских проектов. Однако вам не разрешено перераспределять и перепродавать, а также присваивать себе эксклюзивные авторские права на этот файл.

Количество градиентов: 140
Описание: Это набор градиентов для Photoshop, который состоит из 140 образцов и может быть полезен для создания дизайна на тему океана. Вы можете свободно использовать эти градиенты, как для личных, так и для коммерческих проектов при условии, что будете следовать определенным правилам, установленным автором. Архив, который вы можете скачать, содержит превью-файл PNG «Океанский бриз» и файл Ocean Breeze.grd (файл градиента Photoshop с 140 градиентами).

Количество градиентов: 18
Описание: Набор из 18 винтажных градиентов для Photoshop, который вы можете бесплатно использовать для своей работы. Идеален для создания фонов при разработке полиграфического и веб-дизайна на ретро тематику.

Количество градиентов: 30
Описание: Этот набор содержит в общей сложности 30 зеленых градиентов для Photoshop. Архив, который вы можете скачать, включает файл Emerald Dragon.grd с 30 градиентами и файлом превью. Эти градиенты можно бесплатно использовать как для личных, так и для коммерческих целей, при условии соблюдения определенных условий. После принятия решения перейдите на сайт автора, чтобы узнать подробней об условиях использования.

Количество градиентов: 30
Описание: В этом наборе – 30 градиентов, которые вы можете использовать для создания красивого дизайна в стиле Web 2.0. Некоторые из градиентов защищены авторскими правами. Эта работа защищена пакетом лицензий Creative Commons Attribution, а именно – лицензией No Derivative Works 3.0 (согласно ей, получатели лицензии могут копировать, распространять, показывать и исполнять только точные копии работы, создание каких-либо производных работ, основанных на оригинале автора запрещено – см. http://en.wikipedia.org/wiki/Creative_Commons_Attribution – прим. переводчика).

Количество градиентов: 38
Описание: Здесь можно найти набор градиентов для Photoshop, состоящий из 38 градиентов, от очень светлых до очень темных в одном из цветов спектра.

Количество градиентов: 32
Описание: Этот набор содержит несколько градиентов для Photoshop, окрашенных в темные цвета и оттенки, которые вы можете использовать бесплатно при соблюдении определенных условий.

Ранее в блоге мы уже рассказывали про и заодно приводили примеры разных сервисов-генераторов. Сегодня попробуем применить эти знания на практике для создания красивого градиента фона на CSS. Плюс в процессе работы познакомимся с интересной функцией skew для реализации трансормаций в CSS3.

Можно сказать, что основная идея фонового изображения позаимствована с сайта компании BrightMedia , который является прекрасным примером профессионального использования всех возможностей CSS3.

Правда, мы не будем повторять один в один реализацию фона с данного проекта, а попробуем воссоздать нечто отдаленно похожее. Во-первых, судя по всему, разработчкии BrightMedia сейчас уже не используют линейные градиенты, заменив их на canvas. Во-вторых, наша основная задача — потренирвоаться с linear-gradient и skew трансформацией в CSS3. В итоге должно получиться что-то вроде следующей картинки:

1. Подготовка и контейнер

Для того, чтобы создать на CSS градиенты фона нам потребуется реализовать наложение нескольких слоев элементов DIV на странице, имеющей черный цвет. Прежде чем прибегнуть к опциям CSS3 для работы с 2D-трансформацией и linear-gradient, задаем размеры и местоположение блоков. Открываем новый файл CSS стилей и начнем его с такого кода:

* { margin : 0 ; padding : 0 ; border : 0 ; } body { background : #000 ; }

* { margin: 0; padding: 0; border: 0; } body { background: #000; }

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

В HTML файл пишем код:

Mainblock { background: none; margin: 250px auto; width: 1800px; height: 700px }

2. Слои

Будем называть наши градиентные слои «mylayer». Как только вы создадите один такой элемент, работа с остальными не вызовет сложностей (процесс абсолютно идентичен). Все начинается с четырехугольника, к которому применим 2D-трансформацию, а именно метод skew. Это позволит исказить его, наклонив его оси X. Все слои в примере имеют наклон = 45 градусов влево или вправо. В HTML добавляем:

Последним в коде расположен текстовый блок. CSS стили при этом следующие:

.mylayer1 { width : 550px ; height : 600px ; float : left ; margin : -15% 0% 0 10% ; transform : skew (45deg , 0deg ) ; } .mylayer2 { width : 400px ; height : 600px ; float : left ; margin : 2% 0% 0% 10% ; transform : skew (45deg , 0deg ) ; } .mylayer3 { width : 270px ; height : 450px ; float : left ; margin : 5% 0% 0% -42% ; transform : skew (-45deg , 0deg ) ; } .mylayer4 { width : 350px ; height : 300px ; float : left ; margin : -22% 0% 0% -10% ; transform : skew (-45deg , 0deg ) ; }

Mylayer1 { width: 550px; height: 600px; float: left; margin: -15% 0% 0 10%; transform: skew(45deg, 0deg); } .mylayer2 { width: 400px; height: 600px; float: left; margin: 2% 0% 0% 10%; transform: skew(45deg, 0deg); } .mylayer3 { width: 270px; height: 450px; float: left; margin: 5% 0% 0% -42%; transform: skew(-45deg, 0deg); } .mylayer4 { width: 350px; height: 300px; float: left; margin: -22% 0% 0% -10%; transform: skew(-45deg, 0deg); }

Увидеть блоки без фона можно путем добавления в код свойства border.

3. Градиент для фона

Итак, на предыдущем мы определили местоположение блоков DIV + задали им искажение. Теперь можно подобрать соответствующий градиент. В данном примере наиболее подходящим является линейный градиент, однако, можно использовать и радиальный. Для каждого из классов добавляете нужную заливку, например:

.mylayer1 { background : linear-gradient(to bottom , rgba (229 , 243 , 12 , 0 ) , rgba (243 , 61 , 12 , 0.4 ) , rgba (12 , 99 , 243 , 0 ) ) ; } .mylayer2 { background : linear-gradient(to bottom , rgba (30 , 60 , 55 , 0.2 ) , rgba (75 , 40 , 125 , 0.5 ) , rgba (60 , 20 , 80 , 0.6 ) , rgba (0 , 0 , 0 , 0 ) ) ; } .mylayer3 { background : linear-gradient(to top , rgba (0 , 0 , 0 , 0 ) , rgba (255 , 255 , 255 , 0.3 ) , rgba (255 , 255 , 255 , 0.8 ) ) ; } .mylayer4 { background : linear-gradient(to bottom , rgba (0 , 0 , 0 , 0 ) , rgba (35 , 25 , 65 , 0.5 ) , rgba (140 , 60 , 130 , 0.9 ) ) ; } .

Mylayer1 { background: linear-gradient(to bottom, rgba(229,243,12,0), rgba(243,61,12,0.4), rgba(12,99,243,0)); } .mylayer2 { background: linear-gradient(to bottom, rgba(30,60,55,0.2), rgba(75,40,125,0.5), rgba(60,20,80,0.6),rgba(0,0,0,0)); } .mylayer3 { background: linear-gradient(to top, rgba(0,0,0,0), rgba(255,255,255,0.3), rgba(255,255,255,0.8)); } .mylayer4 { background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(35,25,65,0.5), rgba(140,60,130,0.9)); }.

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

4. Фоновое изображение

Наиболее красивый градиент фона получается при наложении цветов с невысоким уровнем прозрачности, достаточном для того, чтобы нижние слои были видны. Также на странице можно добавить дополнительный фон — например, на сайте BrightMedia есть прозрачный Png файл с точками и линиями. Нужно создать соответствующую картинку, загрузить ее на ваш сайт, а в стилях для body добавить что-то вроде:

body { background : url (http: //мой_сайт/img/dots9.png) repeat fixed center , #000 ; }

body { background: url(http://мой_сайт/img/dots9.png) repeat fixed center, #000; }

5. Итого

Дабы итоговый CSS градиент фона удовлетворил вас на 100%, придется несколько раз редактировать код и просматривать, что же получилось на сайте. Результат достигается путем проб и ошибок до тех пор, пока не будет подобрано наилучшее сочетание наложения различных блоков. Вот мой финальный код (можно глянуть на codepen):

Трансформация skew в CSS

Напоследок пару слов о функции CSS transform skew, которую мы использовали в примерах выше. Как вы уже наверняка поняли, она осуществляет 2D-трансформацию с определенным блоком DIV, задавая ему определенное искажение (отклонение) относительной оси X и/или Y. Есть 3 варианта использования данного метода:

• skewX() — искажение вдоль оси X;
• skewY() — отклонение по оси Y;
• skew() — одновременно задается значения и по X и по Y.

В последнем случае для skew вам нужно будет задавать 2 величины (по X и Y), например так:

div { -ms-transform: skew (45deg , 5deg ) ; /* for IE 9 */ -webkit-transform: skew (45deg , 5deg ) ; /* for Safari */ transform : skew (45deg , 5deg ) ; }

div { -ms-transform: skew(45deg, 5deg); /* for IE 9 */ -webkit-transform: skew(45deg, 5deg); /* for Safari */ transform: skew(45deg, 5deg); }

Кстати, такая запись используется для корректной работы кода в IE 9 и Safari. Если при использовании функции skew второй параметр опускается, то предполагается, что он равен 0. У skewX и skewY изначально есть только одно значение.

В принципе, ничего сложного в трансформации skew нету. Можете попробовать создать несколько примеров дабы понять для себя как именно производится искажение. Не знаю насколько красивый градиент фона на CSS у нас получился, но что-то новое для себя вы определенно узнали.

Внимание! Обнаружена ошибка
По данному адресу публикаций на сайте не найдено, либо у Вас нет доступа для просмотра информации по данному адресу.

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

Градиент - это переход от цвета к цвету или плавный переход к прозрачности. Это слой, который позволяет изменить цветовую гамму. Можно применять как один, так и несколько для корректировки изображения. Используется для создания различных эффектов. Именно поэтому возникает необходимость скачать градиенты для «Фотошопа», которые позволяют полностью преобразить изображение, например, сделать более ярким или же «состарить».

Применение

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

Выделяют несколько видов градиента, в зависимости от формы:

• линейный. Используется в том случае, если нужно затенить прямую область от одной точки к другой;
• круговой. Заполняет выбранную область в форме радиальных узоров;
• конусовидный. Затеняет в форме спирали, которая разматывается вокруг выбранной области против часовой стрелки;
• зеркальный. Цвет будет отражаться по обе стороны выбранной области;
• ромбовидный. Затенение будет идти от середины к внешним углам.

Это основные виды по форме, а цветовых вариантов настолько много, что не получится даже все перечислить. Самостоятельно их создавать сложно и это займёт достаточно времени. Лучше использоваться готовые градиенты для «Фотошопа», скачать которые можно бесплатно и без регистрации у нас на сайте.

Как начать использование

Благодаря готовым шаблонам нанесение на изображение не займёт много времени. Но сразу использовать скачанный Photoshop-градиент не получится, ведь его нужно сохранить как библиотеку, а потом её загрузить.

Алгоритм сохранения несложный:

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

• загрузить библиотеку, сохранив текущие варианты;
• заменить одни шаблоны другими;
• выбрать один из файлов библиотеки, который можно добавить к текущему списку или заменить один градиент.

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

Градиенты для «Фотошопа» можно скачать бесплатно без особых трудностей. Вы можете не только накладывать их на изображения, а изменять способ отображения. Например, может быть только список, маленькие, большие миниатюры или с именами.

Если вам не нравится название скачанных вариантов, то их можно изменить. Это сделать достаточно просто. Если отображение в виде миниатюр, то достаточно два раза нажать на градиент и ввести новое название, а потом нажать «ОК». Для переименования в списке действия такие же, но после введения нового имени нажимается Enter.

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