Допустим вы захотели сделать шапку для сайта.

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

Как же сделать плавный переход от картинки к белому цвету?

Сейчас мы разберем этот случай.

У вас есть изображение, которое вы хотите разместить в правую сторону шапки сайта.

Создаем новый документ и перетаскиваем туда наше изображение.
Берем инструмент выделение , устанавливаем в настройках заданные размеры (размеры будущей шапки сайта), например, так:

Развернем картинку с помощью функции свободная трансформация (Ctrl + T)

Теперь нажмите Shift+Ctrl+I чтобы инвертировать выделение. Убедитесь, что вы стоите на слое с картинкой и нажмите кнопку Delete.

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

Этот Фотошоп урок покажет вам, как создать кнопку на сайт с деревянной текстурой внутри.

Шаг 1.

Создайте новый документ, размеры 95x95, фон - черный.
Масштабируйте документ до 200%
Возьмите и создайте ровное выделение.
Установите основной цвет на светло-серый (#BCBCBB), а фоновый на темный (#504F4F).
Возьмите инструмент , в настройках выберите радиальный градиент. Протяните градиент из центра к краю, как показано на рисунке a), чтобы результат был как на б).

a) б)

Далее выберите в меню Select > modify > contract (Выделение - Модификация - Сжать) и установите параметр сжатия на 9 пикселей. Создайте новый слой и залейте выделение черным цветом.

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

В этом Фотошоп уроке будем создавать вот такую замаскированную навигацию.

Шаг 1.

Откройте новый документ 460x190 пикселей, с черным фоном. Сделайте овальное выделение с помощью инструмента , создайте новый слой и заполните выделение серым цветом (C1C1C1).

Перейдите в меню Выделение - Растушевка (select > feather), установите параметр 2 пикселя.
Снова меню выделение - модификация - сжать (Select > Modify > Contract) установите параметр 5 пикс.
Заполните выделение белым цветом.

a) б)

Шаг 2.

Выберите инструмент , установите радиус скругления 30 и нарисуйте фигуру ... Читать дальше »

В этом Фотошоп уроке будем создавать рекламный баннер на сайт.

Итак, представьте себе ситуацию. Вы профессиональный дизайнер, с фотошопом на "ты".
Звонит вам клиент и говорит: Мне нужно сделать баннер с рекламой iPod Nano на сайт с таким слоганом (например): "iPod Nano - cтильная штучка. Возьми себе такой!"
Вы говорите: Нет проблем! Завтра будет.

И начинаете работать:

1. Создаете новый документ 468×60 px разрешение 72.
2. Создайте новый слой и возьмите инструмент .
Установите цвета градиента.

3. Выберите радиальный градиент .
И проведите по документу с будущим баннером.

4. Теперь вам нужно найти картинку самого iPod Nano. Я нашла в интернете на ... Читать дальше »

В этом Фотошоп уроке мы будем рисовать кнопочку для размещения ее на сайте под формой обратной связи, простыми словами кнопка "Отправить письмо"

Создайте новый документ размерами 281 x 129 px и залейте его 6aa3cf цветом. Дважды щелкните по слою и нажмите ОК.

Затем, загрузите текстуру.

В палитре слоев найдите вот такую кнопку , щелкните по ней и выберите стиль "Наложение градиента". Установите такие же настройки:

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

Вот что у вас должно получиться.

Возьмите фигуру ... Читать дальше »

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

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

Откройте новый документ, 6×6 px, фон сделайте прозрачным (transparent)

Получившийся малюсенький документ масштабируйте до 1600% (ctrl+"+" пока не достигните нужного размера).

Щелкните правой кнопкой по инструменту Кисть , из выплывающего списка выберите Карандаш.

Размер установите на 1px , цвет - черный. Нарисуйте диагональ, как показано ниже (не рисуйте сплошной линией, кликайте каждую точку отдельно)

Переходим в меню Редактирование - Определить узор/текстуру (Edit > Define Pattern), дайте имя, нажмите ОК.

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

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

1. Создайте новый документ размером 340x340 px.
Превратим фоновый слой в обычный.
Для этого дважды щелкните по фоновому слою в палитре Слои/Layers, нажмите ОК.

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

Внизу палитры слоев найдите кнопку и добавьте стиль слоя "Наложение текстуры" / Pattern Overlay.
В этом уроке в качестве текстуры выбрали клетку. Вы можете установить текстуру по своему усмотрению.

2. Возьмите инструмент , установите радиус скругления углов на 30 px и режим фигур . Цвет в палитре выберите такой #427fb4.

Нарисуйте вытянутый овал, примерно так:

3. Теперь присту ... Читать дальше »

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

Вот, что у вас получится в итоге.

Шаг 1.

Создайте новый документ размером 177х177 рх и залейте его черным цветом. Создайте новый слой, на нем мы будем рисовать кнопку. Выберите инструмент Прямоугольник с округленными краями и установите радиус в 8 рх. В качестве основного установите цвет #00C0FF. Теперь нарисуйте небольшую кнопку
(размер примерно 145 х 26 рх)

Теперь кликните два раза по слою с кнопкой, чтобы открыть стиль слоя. Выберите там Inner Shadow (Внутренняя тень), установите параметры:

Далее выберите Satin (глянец), установите параметры:

Теперь Gradient Overlay (наложение градиента).

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