Создаем в фотошопе блок подписки на обновления по email

21-02-2013

Создаем в фотошопе блок подписки на обновления по emailСегодня будем создавать в фотошопе блок подписки на обновления с полем для введения Email и цветной кнопкой. Для начала создадим светло-серый фон и украсим его пиксельным узором. Затем создадим основной белый прямоугольник и применим к нему мягкие стили слоя. После создадим узкую темную полоску для заголовка, опять-таки применим стили слоя. Далее займемся полем для ввода Email и красивой цветной кнопкой для завершения операции. Украсим их градиентами, мягкими свечениями и тенью. После напишем крупный заголовок на темном фоне. Потом создадим иконку с изображением конверта и напишем смысловые тексты в поле ввода и на кнопке.

Создаем в фотошопе блок всплывающей подсказки с иконками

18-10-2012

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

Создаем в фотошопе объемную кнопку с ON/OFF переключением

26-09-2012

Создаем в фотошопе объемную кнопку с ON/OFF переключениемВ этом уроке мы будем пошагово создавать объемную кнопку с ON/OFF переключением. Но сначала мы создадим соответствующий текстурный фон с шумовым эффектом и эффектом размытости. Потом создадим фигуру кнопки, а все остальные превращения будем делать только с помощью стилей слоя. После этого мы вручную сделаем имитацию тени. Далее мы напишем текст, соответствующий выключенному состоянию с красным цветом. Ну и напоследок мы сделаем дубликат кнопки с тенью, повернем ее по горизонтали и напишем текст для включенного состояния с зеленым цветом.

Создаем в фотошопе пользовательский мобильный интерфейс

11-09-2012

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

Создаем в фотошопе винтажный интерфейс с логотипом и меню

08-05-2012

Создаем в фотошопе винтажный интерфейс с логотипом и менюВ этом уроке мы будем создавать интерфейс сайта в винтажном стиле с логотипом и горизонтальным меню. Для этого мы сначала сделаем фон красивого ретро цвета, придадим ему шероховатость и украсим крупным узором. Потом сделаем декоративную полоску темного цвета с треугольными зазубринами по краю. Это легко можно сделать с помощью подходящего шрифта. После приступим к оформлению логотипа и надписи под ним. Затем приступим к созданию флажка. Украсим его небольшим визуалом. И под конец напишем пункты горизонтального меню справа и слева от флажка.

Создаем в фотошопе лаконичный интерфейс в стиле YouTube

18-04-2012

Создаем в фотошопе лаконичный интерфейс в стиле YouTubeМне очень нравится минималистическая эстетика оформления YouTube. Все очень понятно, спокойно и лаконично. Поэтому сегодня в этом уроке мы постараемся воссоздать интерфейс от YouTuba. Сначала создадим фон, добавим немого шума. Потом создадим базовую подложку интерфейса. Далее создадим верхнее меню темного цвета. Оформим блок с превьюшкой самого видеоролика и его описанием. Потом займемся боковым вертикальным меню и кнопкой «Загрузить». Все действия очень просты и основаны на создании фигур различных размеров и оттенков, а также тонких настроек стиля слоя.

Создаем в фотошопе симпатичную иконку в стиле iPhone

12-03-2012

Создаем в фотошопе симпатичную иконку в стиле iPhoneНедавно один из моих читателей предложил мне сделать урок, в котором бы рассказывалось о том, как создать иконку в стиле iPhone. Собственно это я и попыталась осуществить. Для начала мы создадим основную форму, зададим ей шероховатую текстуру и повторяющийся узор-решетку. Немного затемним и осветлим некоторые участки. Потом будем делать большое количество мелких однотипных деталей, используя очень полезный стиль слоя. В конце воспользуемся декоративной симметричной фигурой из стандартного набора фотошоп, поколдуем над ней и водрузим ее на центральную часть иконки.

Создаем в фотошопе интерфейс календаря на текущий месяц

08-02-2012

Создаем в фотошопе интерфейс календаря на текущий месяцДавайте сегодня сделаем интерфейс календаря на текущий месяц, с активной датой и навигацией для листания по месяцам. Сначала сделаем несколько прямоугольников со скругленными краям, разные по размеру и наложенные друг на друга. Применим к ним различные стили слоя. Потом с помощью текста сделаем решетку из линий для календарной сетки. Затем напишем текст с датами месяца. После этого оформим блок с названием месяца в виде ленты, загнутой за края. И в конце напишем заголовок, применим к нему стиль слоя и сделаем стрелочки навигации.

Создаем в фотошопе интерфейс магазинного информера о товарах

12-01-2012

Создаем в фотошопе интерфейс магазинного информера о товарахПродолжаем экспериментировать с интерфейсами. Сегодня мы попытаемся воссоздать в фотошопе магазинный информер с описанием товаров. Итак, по порядку. Сначала создаем основной фон серого цвета. Далее создаем светлую подложку и ее отражение на поверхности. Затем оформляем заголовок блока в виде красной ленты с пунктирной строчкой, на которой написан текст. После этого создаем разделители и разными шрифтами пишем информацию о товарах. На последнем этапе мы создаем декоративные круги и вставляем в них произвольные иконки.

93 queries in 5,570 seconds.