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

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

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

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

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

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

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

Использование некоторых приемов создания рисунков для веб

Использование некоторых приемов создания рисунков для веб

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

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

Параметры нового документа

На панели Инструменты откроем инструмент Градиент, щелкнем по нему мышью и на панели Опции настроем параметры градиента, так как указано на рисунке. Теперь на слое Фон установим цвет полученного градиента.

Параметры градиета

Настройка параметров градиента Новая заливка слоя Фон

На панели Слои создадим новый слой. На панели инструментов выберем инструмент Прямолинейное лассо.

Инструмент Прямолинейное лассо Параметры Прямолинейного лассо

И сделаем треугольное выделение, как показано на рисунке.

Рисуем треугольник Выделенная область после применения Прямолинейного лассо

Выбирем инструмент Кисть размером 300 пикселей с мягкими краями, с параметрами как показано на рисунке. Установим белый цвет.

Параметры инструмента Кисть

Обрисуем одну из строн треугольника.

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

Снимим выделение используя меню Выделение ⇒ Отменить выделение.

Создадим новый слой. Нарисуем на нем еще одно треугольное выделение.

Треугольное выделение Панель слои

Обрисуем сторону черным цветом, используя инструмент Кисть или Градиент.

Сторона обрисована кистью Прараметры инструмента Кисть

Создадим новый слой, выберем инструмент Перо и установим параметры в соответствии с рисунком.

Параметры инструмента Перо

Нарисуем контур, как показано на рисунке.

Контур нарисованный инструментом Перо

Теперь выберем инструмент Перо+.

Перо+

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

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

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

Выбор пункта контекстного меню Окно Образовать выделенную область

Получится выделенная область примерно как на рисунке.

Выделенная область

Выберираем инструмент Градиент, с параметрами как на рисунке и сделаем заливку от белого к прозрачному.

Редактирование градиента

Параметры градиета

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

После применения градиента

Создадим еще один новый слой и нарисуем контур как показано на рисунке.

Новый контур

На сторонах прямоугольника проходящим по рисунке с помощью инструмента Перо+ создадим опорные точки. Потяним за них и создадим вогнутый контур. Другими точками отрегулируем контур как показано на рисунке.

Контур созданный инструментом Перо

Теперь закроем его и образуем выделение используя клавиши Ctrl+Enter.

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

Рисунок после выделения

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

Рисунок после использования инструмента Кисть

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

Инвертируем выделение. Для этого в меню Выделение щелкнем по пункту Инверсия.

Инвертация выделения

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

Черным цветом обрисована нижняя часть выделения

Создадим новый слой. Инвертируем еще раз выделение (Выделение ⇒ Инверсия). Обрисуем верхний край выделения белым цветом.

Верхний край обрисован белым цветом

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

Параметры градиента

В верхней части холста добавим светлое пятно при помощи градиентной заливки.

Рисунок после градиентной заливки

Создадим новый слой и зальем его зеленым цветом #00ff40, с параметрами указанными на рисунке.

Параметры заливки

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

Создадим новый слой с выделением как показано на рисунке и проведем инверсию (Выделение ⇒ Инверсия).

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

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

Параметры градиента

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

Создадим новый слой и ещё одно выделение в левой нижней части холста и сделаем ту же заливку от белого к прозрачному.

Новое выделение

Параметры градиента установите как на рисунке.

Параметры градиента

Рисунок после градиентной заливки

Создадим еще один новый слой и ещё одно выделение в правой нижней части холста и сделаем ту же заливку от белого к прозрачному.

Выделение и градиентная заливка Панель слои после завершения работы над рисунком

В итоге у нас получился вот такой рисунок.

Итоговый рисунок

C ним можно еще поработать, добавив к нему корректирующие слои. Творчеству в этом направлении нет предела. Поэксперементируйте над рисунком и возможно получите неожиданные результаты.