• www.ARTScroll.ru
   Пользователь
Логин:

Пароль:

Запомнить? 
   ГАЛЕРЕИ
» Стать другом сайта
» Группа "В Контакте"
   
   9275 художников
   1792 биографий
   7547 подборок картин
   276435 картин [101.96GB]
   1566 уроков
   457 другие статьи
   3906 пользователей
   445 комментариев
   358 тем на форуме
   841 сообщений на форуме

Библиотека | Обучение | Adobe PhotoShop | Стильная форма для ввода логина и пароля Просмотреть комментарии

 
 
]]>
Опубликовал: SerSpiriT   Дата: 2007-09-22 18:47 Рекомендовать:
]]>
В этом уроке вы научитесь создавать в Фотошопе стильный дизайн формы для ввода логина и пароля.



Начнём с создания прямоугольника со скруглёнными углами. Создайте его с помощью инструмента "Прямоугольник со скругленными углами" (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, выберите стрелку как показано ниже, и нарисуйте её на нашей кнопке:





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




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

Авторство и источник: http://megatutorials.blogspot.com
Перевод: http://photoshop-uroki.blogspot.com

Также стоит посмотреть:
#ЗаголовокАвторРазделПросмотров
1Черный Квадрат И Белая Трубчатая Форма. Около 1915-1916Малевич Казимир СевериновичКартины782
2Стильная ВалентинкаHolyKirkaБиблиотека | Обучение | Adobe PhotoShop1774
3Стильная открытка с девушкой-серферомHolyKirkaБиблиотека | Обучение | Adobe PhotoShop | Дизайн3763
4Эскиз костюма маркизы для Т.П.Карсавиной ( для танца на музыку Моцарта )Сомов Константин АндреевичКартины5130
5Мотивы Для Супрематической Ткани. Образцы Для Текстиля. Вторая Половина 1920-ХМалевич Казимир СевериновичКартины2088
6Макияж для фотографииSerSpiriTБиблиотека | Обучение | Adobe PhotoShop4652
7Камертон для ФотошопаSerSpiriTБиблиотека | Обучение | Adobe PhotoShop2323
8Смешивание слоев (теория для начинающих)SerSpiriTБиблиотека | Обучение | Adobe PhotoShop4350
9Меню для строгого сайтаSerSpiriTБиблиотека | Обучение | Adobe PhotoShop2761
10Кисти для рисования кожиSerSpiriTБиблиотека | Обучение | Adobe PhotoShop10608
Комментарии: 0
1
Пока комментариев нет
1
 
   
   
Arts.In.UA АртНау - художники и картины Яндекс цитирования Яндекс.Метрика