ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Создание рисунка для веб

Создание рисунка для веб

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

Откроем Photoshop. В меню Файл ⇒ Создать создадим новый документ, с черным фоном и цветом заливки #002266 как показано на рисунке.

Создание нового документа Фон

Установка цвета заливки Фон и цвет заливки

Фон и рисунок после заливки.

Фон рисунка Рисунок после заливки

Откроем в меню Фильтр ⇒ Рендеринг ⇒ Облока. Рисунок примет следующий вид.

Открытие фильтра Облока Рисунок после применения фильтра Облока

На панели Слои создадим новую группу слоев. для этого нажмем на пиктограмму Создать новую группу.

Создание новой группы

В созданной Группа1 создадим новый слой, нажав на пиктограмму Создать новый слой.

Теперь перейдем к рисованию. Для этого выберите инструмент Кисть размером 45 пикселей с мягкими краями и нарисуйте линию в новом слое цветом #006C6A.

Выбор цвета для инструмента Кисть

Нарисуем кистью прямую вертикальную линию, как показано на рисунке.

Нарисовано кистью

Далее откроем меню Фильтр ⇒ Размытие ⇒ Размытие в движении.

Открытие фильтра Размытие в движении Окно фильтра Размытие в движении

Должно получиться так.

Рисунок после применения фильтра Размытие в движении

Перейдем к панали Слои и щелкнем мышью по пиктограмме Добавить стиль слоя. В раскрывающемся списке выберем пункт Внутренняя тень.

Настроим диалоговое окно Стиль слоя Внутренняя тень так, как показано на рисунке.

Параметры филитра Внутренняя тень слоя

Не выходя из диалога, переключимся на фильтр Наложение градиента и настроим его согласно рисунка.

Параметры фильтра Наложение градиента

Рисунок примет следующий вид. Панель слои также изменится.

Рисунок после применения фильтров Внутренняя тень и Наложение градиента Панель слои поле применения фильтров

Теперь сделаем копию со Слой1. Для выделим слой и нажмем правую кнопку мышы. В появившемся контекстном меню выберем пункт Создать дубликат слоя. Появится диалоговое окно Создать дубликат слоя. Нажмем ОК..

Создание копии слоя Окно Создать дубликат слоя

На панели Слои появится новый слой Слой1 копия.

Пнель слои после создания копии слоя

Удалим все стили с копии слоя. Для этого наведем кнопку мыши на Эффекты. Появится контекстное меню. Выберем пункт Очистить стиль слоя. Панель Слои примет вид как на рисунке.

Удаление стилей с копии слоя Панель слои после удаления стилей

Выберем инструмент Перемещение и с момощью клавиш или мыши переместим копию слоя вправо. Откроем пункт Добавить стиль слоя на панели Слои и из раскрывающегося списка выберем Наложение градиента. Установим параметы слоя как показано на рисунке.

Установка параметров Наложение градиента

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

После копирования Слоя1 копия Пналь слои после создания копии слоя

Сделаем еще одну копию слоя, удалим с нее все стили и переместим ее влево от основного оригинала. И скопируем еще раз этот слой, чтобы увеличить толщину линии.

Рисунок и панель слои будут выглядеть так.

Рисунок после копирования копии слоя Панель Слои после очередного копирования слоя

Теперь опустим левую часть рисунка вниз, а правую вверх.

Корректировка слоев по высоте

Теперь сделаем копию папки Группа1. Для этого щелкнем по пиктограмме в виде треугольника (показана стрелкой), чтобы скрыть слои на Группа1, вызовем правой кнопкой мыши контекстное меню и выберем пункт Дубликат группы. Копия группы будет создана.

Создание копии Группа1Дубликат Группа1 создан

Поместите этот слой рядом с оригинальными линиями. Откроем Группа1 копия, и объединим все слои, нажав сочетание клавиш Ctrl + E, предварительно выделив их.

Добавим к этой группе стиль слоя, выбрав пиктограмму Добавить стиль слоя на панели Слои. В контекстном меню выберем пункт Наложение градиента и заполним параметры как показано на рисунке.

Установка параметров в группе Группа1 копия

Рисунок примет следующий вид.

Рисунок после внесения слоя Наложение градиента

Сделаем несколько копий с Группа копия1 и расположим их, как показано ниже. Сделаем каждый слой уникальным, изменив их непрозрачность.

Рисунок после копирования групп Пнель Слои после копирования групп изменения Непрозрачности

Теперь выделим холст нажав сочетание клавиш Ctrl + A или в меню Выделение выбрать пункт Все. Перейдем в меню Редактирование и выберем пункт Скопировать. После этого в меню Редактирование выберем пункт Вставить. На панели Слои появится новый слой Слой 2.

Новый Слой2 на панели Слои

Добавим в Слой 2 корректирующий слой Наложение градиента с параметрами показанными ниже.

Параметры Наложение градиента

Рисунок после наложение градиента будет выглядеть так.

Рисунок после наложения градиента на Слой2

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

Поворот холста в режиме Свободное трансформирование

В итоге рисунок примет следующий вид.

Финишный рисунок фона