все самое интересное о веб-дизайне

Создаем в фотошопе блок подписки на обновления по 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

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

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

08-12-2011

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