Фотошоп для чайников | Уроки фотошопа
Фотошоп для чайников - портал для любителей фотошопа!
Меню сайта
Категории раздела
Обработка фото [109]
Текстовые эффекты [87]
Анимация [32]
Спецэффекты [142]
Веб-дизайн [40]
Тюнинг [9]
Фотомонтаж [62]
Кнопки [39]
Рисование [55]
Наша группа
Опрос
Почему вы не регистрируетесь на сайте?
Всего ответов: 134
КтО ОнЛаЙн

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Главная - Уроки фотошопа CS5 на русском - Веб-дизайн - Как сделать стильную форму поиска

Как сделать стильную форму поиска

Как сделать стильную форму поиска

Создайте новый документ размерами 450 на 200 пикселей. В качестве фона я использовал градиент от #808080 к #616161:

stylish_search_bar_2.jpg

Выберите инструмент Скругленный Прямоугольник (Rounded Rectangle - клавиша U) и нарисуйте на новом слое фигуру, как на рисунке ниже, указав инструменту следующие настройки:

stylish_search_bar_3.jpg

stylish_search_bar_4.jpg

Назовите этот слой “Фигура 1″. Скопируйте его (CTRL+J) и назовите копию “Фигура 2″. Примените к новому слою следующие стили:

stylish_search_bar_5.jpg

stylish_search_bar_6.jpg

stylish_search_bar_7.jpg

stylish_search_bar_8.jpg

Теперь примените указанные стили к слою “Фигура 1″:

stylish_search_bar_9.jpg

stylish_search_bar_10.jpg

Выберите слой “Фигура 2″ и выделите на нем область, как на рисунке ниже:

stylish_search_bar_11.jpg

Нажмите SHIFT + CTRL + I, чтобы инвертировать выделение:

stylish_search_bar_12.jpg

Нажмите клавишу DELETE и затем CTRL+D, чтобы снять выделение:

stylish_search_bar_13.jpg

stylish_search_bar_14.jpg

Выделите содержимое слоя “Фигура 1″, кликнув по его иконке в панели слоев с зажатой клавишей CTRL и обрежьте выделение при помощи инструмента Rectangular Marquee, зажав клавишу ALT:

stylish_search_bar_15.jpg

Создайте новый слой (над слоем “Фигура 1″ и под слоем “Фигура 2″) и залейте выделение белым цветом. Понизьте прозрачность слоя до 30%:

stylish_search_bar_16.jpg

Теперь осталось лишь нарисовать поисковое поле и написать слово “Search“:

Как сделать стильную форму поиска

Готово! ;)



Похожие материалы:


Просмотров: 1517 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск по сайту
Форма входа
Популярные уроки
 
 
 
 
 
 
 
 
 
 

Хостинг от uCoz