Урок по созданию панели поиска на сайте

Урок Фотошопа

кликайте на картинки, чтобы увидеть их полный размер

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

Создаём новый документ - 450х200px. Настраеваем градиент:
1 цвет - # 808080
2 цвет - # 616161.
Заливаем им лист снизу в верх.

Берем "Прямоугольник со скругленными углами(Rounded Rectangle Shape Tool)" с такими настройками и создаём фигуру::

Называем этот слой Shape 1. Дублируем его нажатием Ctrl+J и имя слоя копии изменяем на Shape 2. Слой Shape 2 помещаем над слоем Shape 1. Теперь применяем для слоя Shape 2 такие настройки:
Внутренняя тень, Наложение градиента и Обводка:

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

Теперь, примените следующие эффекты к слою “Shape 1”:

Now, apply the following settings to the “Shape 1” layer:

Растрируйте слой “Shape 2” (Правой кнопкой по слою ->Растрировать слой)
Выделяем часть фигуры "Овальной областью(Elliptical Marquee Tool )" как на рисунке, Жмем Ctrl+I, чтобы инвертировать выделение и Delete. Снимаем выделение (Ctrl+D):




Вот что должно получиться:

Выделяем слой Shape 1 нажатием по слою мышкой с зажатым Ctrl. C помощью "Прямоугольной области (Rectangular Marquee Tool)" и зажатым альтом(Alt) вычитаем из выделенной области нижнюю часть::

Создаём новый слой над слоем Shape 1 заливаем выделение белым цветом ставим прозрачность слоя 30% Жмем Ctrl+D.:

Сейчас с помощью Прямоугольной области (Rectangular Shape Tool) рисуем область где будет панель ввода. Шрифтом Arial 17 pt пишем слово Search на месте кнопки.

Вот он результат:



Copyright © http://megatutorials.blogspot.com

Меню для строгого сайта.

Урок Фотошопа

кликайте на картинки, чтобы увидеть их полный размер

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



Начнём с создания нового документа, размером 160х220 пикселей, фон не важен. Выберите Rectangular Shape Tool и нарисуйте прямоугольник, 40 пикселей в высоту и 160 в ширину. Цвет прямоугольника не важен, потому, что мы применим к ниму следующий эффект - заливка градиентом:




Теперь, создаём новый документ 6х5 пикселей, с прозрачным фоном, выбираем Карандаш (Pencil Tool) толщиной 1 пиксель и цветом # 939393 и рисуем в этом документе две точки как показано на рисунке:

Потом, идём в Edit > Define Pattern, называем нашу новую палитру например "new_pattern" и нажимаем ОК. После чего, возвращаемся в наш предыдущий документ, выделяем наш прямоугольник (зажимаем Ctrl и кликаем на слой в палитре слоёв), создаём новый слой, называем его "Палитра" и идём в Edit > Fill, где в графе "Custom Pattern" выбираем нашу палитру. Нажимаем ОК.

После заливки идём в Filter > Blur > Gaussian Blur, где выбераем радиус 0,3 пикселя и кликаем ОК. Результат должен выглядеть вот так:

Теперь, создаём новый слой, выбираем карандаш (Pencil Tool) толщиной 2 пикселя и цветом # 696969 и рисуем линию по низу прямоугольника. После чего меняем цвет карандаша на # 808080 и рисуем точно такую же линию только по верху прямоугольника. Как на рисунке:

Выберите все слои которые относятся к нашему прямоугольнику-кнопке (их должно быть три) и сгруппируйте их нажав Ctrl+G. После чего клонируйте 5 раз эту группу слоёв и расположите как на рисунке:

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

В этой же группе выберите слой "Палитра" и применяем к нему следующий эффект - заливка цветом # ffffff и уменьшим прозрачность слоя до 25%

Вот как должна будет выглядеть нажатая кнопка на сайте. Но это ещё не всё.

В этой же группе номер 2 создаём новый слой поверх остальных, выбираем Карандаш (Pencil Tool) толщиной 1 пиксель и цветом # ffffff, рисуем что-то типа стрелочки и распологаем её как показано на рисунке:

После чего выбираем наиболее подходящий по вашему шрифт, и даём названия пунктам вашего меню. Вот и всё :)

Copyright © http://megatutorials.blogspot.com

Создание эффекта токсичной надписи на асфальте

Урок Фотошопа

кликайте на картинки, чтобы увидеть их полный размер

Создаём эффект токсичной жидкости выплеснутой на асфальт.

Создайте новый документ размера 400x200 пикселей и залейте его цветом #505662:

Примените эффект Шум из меню Filter > Noise, и наш асфаль готов:

Создайте новый слой, и напишите в неём слово TOXIC, я использовала шрифт Impact со следующими настройками:

Кликнине правой кнопкой на слое в палитре слоёв, и выберите Ратсрировать. То есть растрируйте текст.

После чего, выберите цвет фона #30ff00.

После чего идите в меню Filter > Brush Strokes > Spatter и примените следующие настройки - Spray Radius: 15, и Smoothness: 5, после чего нажмите ОК. Вот что у вас должно получится:

Теперь примените следующий стиль к данному слою:

В меню слоёв, найдите в нашем слое кружок с буквой f (он обозначает что к слою был применён эффект) и кликните на него правой кнопкой. Выберите "Create layer", тоесть эффекты превратятся в слои:

Дублируйте слой Stroke:

Теперь примените к слою “toxic's Outer Stroke copy” следующий эффект:

А к слою “toxic's Outer Stroke” – такой эффект:

Готово:

Copyright © http://megatutorials.blogspot.com

Стильная форма для ввода логина и пароля.

Урок Фотошопа

кликайте на картинки, чтобы увидеть их полный размер

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

Начнём с создания прямоугольника со скруглёнными углами. Создайте его с помощью инструмента "Прямоугольник со скругленными углами" (Rounded Rectangle Shape tool) как показано ниже, и примените к нему следующий градиент:

Теперь, создайте два новых слоя, и в каждом из них создайте по одному прямоугольнику, с помощью инструмента Прямоугольник (Rectangle Shape tool) и примените к ним эффект обводки как показано ниже. Это будут поля для ввода.

Напишите слова Login и Passwordб использую следующие настройки шрифта:

Выделяем слой с нашим основным прямоугольником с закруглёнными углами нажатием по слою мышкой с зажатым Ctrl. C помощью "Прямоугольной области (Rectangular Marquee Tool)" и зажатым альтом(Alt) вычитаем из выделенной области верхнюю часть:

Создаём ноывй слой, закрашиваем выделение любым цветом, после чего применяем Наложение градиента как показано ниже

Снимаем выделение нажав (Ctrl + D) и создаём новый слой. Создаём круг с помощью Ellipse tool (ниже указаны настройки, цвет не имеет значения) и применяем к нему Наложение градиента как показано ниже.

Теперь, выделите наш круг, кликнув на его слой с зажатой клавишей Ctrl, идите в меню Select > Transform selection (Выделение > Трансформировать выделение) и трансформируйте его как на картинке:

Нажмите Enter, создайте новый слой и закрастье наше выделение с помощью инструмента Градиент как показано ниже

Нажмите Ctrl + D чтобы снять выделение.

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

Вот как всё должно выгялдеть:

Следующим шагом будет выделение белого круга (Ctrl + клик на его слое) и с помощью Прямоугольной области (Rectangular marquee tool (M)) срежте нижнюю часть выделения. Выделенной должна остаться только верхняя половина.

Теперь, создайте этот градиент:

Создайте новый слой (сразу перед слоем с белым кругом), и закрасьте выделение только что созданным градиентом, чтобы получилось как на картинке ниже:

С помощью Custom Shape Tool, выберите стрелку как показано ниже, и нарисуйте её на нашей кнопке:

Примените следующий эффект чтобы стрелка немного засияла:

Вот и результат:

Copyright © http://megatutorials.blogspot.com