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

Шаг 1:

Создайте новый документ.
Возьмите инструмент - прямоугольное выделение (Rectangular Marquee Tool) и сделайте прямоугольное выделение как показано на скриншоте:

Шаг 2:

Обратитесь в меню Select, далее Modify > Smooth и установите следующие параметры:

Результат:

Шаг 3:

Установите в качестве основного цвета: #1A7CA1,
а фоновый цвет: #09A5D7:

... Читать дальше »

В этом уроке Фотошоп мы нарисуем кнопку в стиле Windows Vista.

Создаём новый документ (ширина=230, высота=180).
Фон заливаем тёмно-серым цветом (#2a2a2a).

Выбираем инструмент Rounded Rectangle Tool (), в настройках для параметра radius выберите значение равное 5 px, и рисуем прямоугольник с закругленными концами чёрного цвета:

Добавим несколько стилей к нашей будущей кнопке, идём в
Layer > Layer Style> Blending Options, и делаем всё как показано ниже:

Далее с помощью инструмента ... Читать дальше »

этом уроке Photoshop мы создадим красивую красную кнопку для сайта.

1) Откройте новый документ в Photoshop.
Выберите красный цвет в качестве основного и нарисуйте в режиме фигур круг с помощью инструмента Elipse Tool .
Зажмите клавишу Shift, чтобы нарисовать ровный круг.

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

Добавим тень:

Внутреннюю тень:

Внешнее свечение (цвет выберите или черный или темно-красный)

Внутреннее свечение:

... Читать дальше »

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

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

Нажмите Ctrl+T, чтобы вызвать инструмент свободная трансформация. Щелчок правой кнопкой мыши - выберите команду Warp (это возможно в новых версиях программы Adobe Photoshop CS2, CS3). Выберите вид трансформации "Arc". Установите следующие параметры:

Дваджы щелкните по слою с фигурой, чтобы появилось окно добавления стилей - примените следующие стили:

Вот ... Читать дальше »

В этом уроке Photoshop мы поговорим о том, как нарисовать такую же кнопку как в программе Windows Media Player.
В конце получается вот такая замечательная вещь:

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

Шаг 1.

Создайте новый документ размерами 300 x 300, и залейте его вот таким градиентом:
Цвета: #84AAD9 и #A4BFEA

Шаг 2.

Затем создате новый слой
И с помощью инструмента - сделайте прямоугольное выделение:

Заполните выделение белым цветом #FFFFFF

... Читать дальше »

Рисуем в Фотошоп глянцевую кнопку для вашего сайта всего за 10 шагов.

Шаг 1. Создайте новый документ, можете залить его черным цветом или черно-серым градиентом.

Шаг 2. Выберите инструмент - Овальная область и нарисуйте такой же овал как на рисунке:

Шаг 3. Создайте новый слой (Shft + Ctrl + N) и с помощью инструмента - залейте выделение любым цветом.

Шаг 4. Перейдите в меню Layer >> Layer styles >> Blending Options (Слой - Стили слоя - Параметры наложения) и примените следующие стили:

Тень:

Внутреннее свечение:

Тиснение:

Наложение цвета ... Читать дальше »

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

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

Используя инструмент осветлитель рисуем горизонтальные полосы как показано ниже, потом с помощью затемнителя добавляем ещё несколько полос как на рисунке:

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

Делаем двойной клик на слое с красной окружностью, чтобы перейти к панели Стиль Слоя. Здесь добавим стиль "внутренняя тень" к нашему кругу:

... Читать дальше »

Открываем новый документ размером 25 x 25 px, цвет для фона выберите белый. Используя инструмент увеличьте изображение до 800%.
С помощью инструмента "Прямоугольник с круглыми краями" (радиус скругления = 5px) рисуем скругленный квадрат.

Идём в Layer > Layer Style > Blending Options (Слой - Стиль слоя - Параметры наложения) здесь применяем следующие стили к нашему слою с квадратом:

Inner Glow (Внутреннее свечение)
режим: осветление основы

Gradient Overlay (Наложение градиента)
стиль - линейный

Настройки градиента

Stroke (Обводка) - внутри

... Читать дальше »

В этом Фотошоп уроке будем учиться рисовать лицо вашему сайту.

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

Начните с создания нового документа размером 650 * 550 px.
Залейте его таким цветом #e6f2e6

Создайте новый слой. Нарисуйте прямоугольник внутри, отступив примерно по 30 px с каждой стороны. Также залейте каким-нибудь цветом.

Нажмите на кнопку внизу палитры слоев и добавьте стили:

Обводка, ширина 5 px, внутри, цвет #296750

Промежуточный результат:

Приступим к рисованию навигации сайта.

С помощью , нарисуйте прямоугольное выделение в правом верхнем углу нашего макета.
Перейдите в меню Select >> Modify >> Smooth selection (Выделение - Модификация - Оптимизировать) , чтобы сгладить края.

... Читать дальше »

В этом Фотошоп уроке будем делать изумрудную кнопочку для сайта.

1) Создайте новый документ 300×150 px с черным фоном

2) Создайте новый слой. Возьмите инструмент , нарисуйте прямоугольное выделение и залейте его любым цветом, например, белым.

3) Нажмите на кнопочку внизу палитры слоев и выберите там следующие стили:

Тиснение:

Наложение градиента:

Цвета градиента: от 0a521d к 2ac553

Вы получите такой результат:

4) Теперь будем рисовать рамку. Создайте новый слой.

... Читать дальше »