Авг
11

Как сделать градиентную заливку

Опубликовал -

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

В общем, с такими же «чайниками», как я, делюсь, быстрым, без выискивая информации в интрнете, способом сделать градиентный фон для сайта. Только не вздумайте брать большую красивую картинку на задник, ведь можно обойтись файликом в 1 (один)  килобайт!

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

Далее, в цветах ставим нужный фон и рабочий цвет. Например, как у меня: темно синий и светло синий. То есть выбираем два цвета между которыми вам надо сделать градиентную заливку. Делается это (назначение цвета) инструментом «пипетка» или в ручную.

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

Готово! Сохраняем файл, а потом используем его вместо фона в нужном месте вашего сайта. Получится не скучный однотонный цвет, а красивый градиент.

3 Комментарии

1

Спасибо. искал как бы сднлать фон градиентным. нашел.

2

Спасибо, перерыла много инфы, но у вас все так доступно , понятно.

3

Огромное спасибо, очень помогло, все доступно и понятно