Сделать стартовой Добавить в закладки Обратная связь Новости по RSS 2.0
ZEROlayer.ru » Уроки Photoshop » Креатив » Создание интерфейса iPAD в Photoshop. Часть 2

Создание интерфейса iPAD в Photoshop. Часть 2

Автор: LuLu | Категория: Уроки Photoshop » Креатив | 16-11-2011, 14:03
Шаг 24
На этом шаге мы создадим указатели направления. При помощи инструмента Перо (Pen) вам следует нарисовать фигуру как на приведенном примере. Установите цвет заливки #3a3a3b. Теперь выберите этот слой и добавьте слой-маску. Теперь, инструментом Градиент (Gradient Tool (G)), установленным в режиме “От Основного к Прозрачному” (Foreground to Transparent), и, указав черный цвет #000000 в качестве основного цвета (foreground color), нанесите градиент точно так, как на образце ниже. Продублируйте этот слой и подберите такой размер, что бы получить изображение как показано на скриншоте ниже. Примените к обоим слоям стили слоя, и указатели направления готовы.

Создание интерфейса iPAD в Photoshop. Часть 2


Шаг 25
Создайте новую группу и назовите ее “Винтики”. При помощи инструмента Эллипс нарисуйте два черных #000000 круга как на моем примере и примените стили слоя. Все тем же инструментом Эллипс создайте еще два круга, но на этот раз немного меньшего размера и изменив цвет на #494949. Примените стиль слоя, и мы готовы перейти к следующему шагу.

Создание интерфейса iPAD в Photoshop. Часть 2


Шаг 26
Выберите инструмент “Горизонтальный Текст”(Horizontal Type Tool (T)), установите шрифт Myriad Pro, размер 11 и напечатайте два знака “+”, точно так, как показано на примере. Примените стиль слоя, и винтики готовы.

Создание интерфейса iPAD в Photoshop. Часть 2


Шаг 27
Создайте новую группу и назовите ее “Переключатели”. Внутри нее, инструментом Перо (Pen) нарисуйте две черные #000000 фигуры, как показано на скриншоте ниже, и примените стиль слоя.

Создание интерфейса iPAD в Photoshop. Часть 2


Шаг 28
Инструментом Перо (Pen) нарисуйте еще две фигуры как на скриншоте, установите цвет заливки #cecece, после чего, примените стили слоя.

Создание интерфейса iPAD в Photoshop. Часть 2


Шаг 29
Теперь поработаем над нашим левым переключателем. Инструментом Эллипс создайте два белых #ffffff круга, таких, как на примере ниже, и примените стили слоя.

Создание интерфейса iPAD в Photoshop. Часть 2


Шаг 30
С помощью инструмента Произвольная фигура (Custom Shape Tool (U)) загрузите набор символов из библиотеки, и добавьте значок автомобиля, установив цвет заливки белый #ffffff. Примените стили слоя. Затем, библиотеке символов выберите значок велосипеда, вставьте его, после чего примените стиль слоя.

Создание интерфейса iPAD в Photoshop. Часть 2


Шаг 31
Займемся правым переключателем. Инструментом Эллипс создайте небольшой круг, установите цвет заливки #75d0f5, и примените стиль слоя.

Создание интерфейса iPAD в Photoshop. Часть 2


Шаг 32
Выберите инструмент “Горизонтальный Текст”(Horizontal Type Tool (T)), установите шрифт Arial, размер 9 и напечатайте "Редактировать", после чего примените стиль слоя. Теперь, уменьшив размер шрифта, напечатайте “ВКЛ” и “ВЫКЛ” под углом 45 градусов, и примените стили слоя.

Создание интерфейса iPAD в Photoshop. Часть 2


Шаг 33
Создайте новую группу и назовите ее “Переключатели 2”. Инструментом Эллипс (Ellipse Tool (U)) нарисуйте две фигуры как показано на скриншоте ниже. Установите Заливку 0% и примените стили слоя. Снова обратитесь к инструменту Эллипс (Ellipse Tool (U)) и нарисуйте еще две фигуры как показано на примере ниже. Установите цвет заливки #2e2e2e и примените стили слоя.

Создание интерфейса iPAD в Photoshop. Часть 2


Шаг 34
Опять же при помощи инструмента Эллипс (Ellipse Tool (U)) нарисуйте еще две фигуры как показано на примере ниже. Установите цвет заливки #b6b6b6 и примените стили слоя.

Создание интерфейса iPAD в Photoshop. Часть 2


Шаг 35
Выберите инструмент “Прямоугольник со скругленными краями” (Rounded Rectangle Tool (U)), установите радиус 5 пикселей, и создайте 6 фигур, точно как показано на примере ниже. Установите заливку 0% и примените стили ко всем слоям. Теперь, при помощи инструмента Эллипс (Ellipse Tool (U)), с установленным цветом #4c4c4 нарисуйте 6 круга как на примере ниже. Затем, инструментом Прямоугольник с таким же установленным цветом нарисуйте 4 фигуры как на скриншоте. Теперь при помощи инструмента Horizontal Type Tool (T), установленным шрифтом Myriad Pro / жирный (bold) и размером 6 pt, напечатайте в конце каждой группы “-” и “+” как показано на примере.

Создание интерфейса iPAD в Photoshop. Часть 2


Шаг 36
Создайте новую группу и назовите ее “Видео коннектор”. Инструментом Перо (Pen) нарисуйте фигуру как показано на скриншоте ниже, установите цвет заливки #252525, и примените стили слоя.

Создание интерфейса iPAD в Photoshop. Часть 2


Шаг 37
Всё тем же инструментом Перо (Pen) нарисуйте еще одну фигуру в точности как показано на скриншоте ниже, установите цвет заливки #292929, и примените стили слоя.

Создание интерфейса iPAD в Photoshop. Часть 2


Шаг 38
Инструментом Эллипс (Ellipse Tool (U)) создайте круг, как показано на примере, и задайте цвет заливки #9da2a6. Выберите инструмент Rectangular Marquee Tool (M) и выделите 3 области, как показано на примере, затем инвертируйте выделение и добавьте слой-маску. Теперь обратитесь к инструменту Перо (Pen), в режиме Контуры (Paths) и создайте выделение в точности как на приведенном ниже скриншоте. Щелкните на иконке маски нашего слоя с кругом, и залейте выделенную область черным цветом #00000. Примените стили слоя. Создайте новый слой, залейте его любым понравившимся слоем, пройдите в меню Фильтр > Шум > Добавить шум (Filter > Noise > Add noise) установите Количество (Amount) - 400%, Распределение (Distribution) – Равномерное (Uniform) и поставьте галочку на пункте Монохромный (Monochromatic). Преобразуйте слой в Обрезающую маску, установите режим наложения слоя Мягкий Свет (Soft light) и непрозрачность 24%. Можно переходить к следующему шагу.

Создание интерфейса iPAD в Photoshop. Часть 2


Шаг 39
При помощи инструмента Ellipse Tool (U) создайте 7 черных #000000 кругов, как на примере ниже, и примените стиль слоя. Выберите инструмент Прямоугольник (Rectangle Tool (U)), нарисуйте фигуру в точности как на скриншоте ниже, установите цвет заливки #323232, и примените стиль слоя.

Создание интерфейса iPAD в Photoshop. Часть 2


Шаг 40
Создайте новую группу и назовите ее “Разъем”. Инструментом Ellipse Tool (U) создайте круг как на рисунке ниже, установите цвет заливки #4b4b4b, и примените стили слоя.

Создание интерфейса iPAD в Photoshop. Часть 2


Шаг 41
Создайте еще один круг, установите заливку 0%, и примените стили слоя. Все тем же инструментом создайте другой круг, установите заливку 0%, и примените стили слоя.

Создание интерфейса iPAD в Photoshop. Часть 2


Шаг 42
При помощи инструмента Rectangle Tool (U) создайте 4 фигуры как показано на примере ниже, и установите цвет заливки #474747. Тем же инструментом создайте еще одну маленькую фигуру, между двумя верхними. Установите цвет заливки #92a1ab. Теперь инструментом Ellipse Tool (U) нарисуйте еще один круг, точно как показано на примере, установите цвет заливки #83898f, и при помощи инструмента Эллиптическая область (Elliptical Marquee Tool (M)), образуйте круглую выделенную область внутри фигуры, которую мы создали перед этим, точно как на скриншоте. Теперь инвертируйте выделение и добавьте слой-маску. Примените стили слоя и переходите к следующему шагу.

Создание интерфейса iPAD в Photoshop. Часть 2


Шаг 43
Создайте новую группу и назовите ее “USB коннектор”. При помощи инструмента Rectangle Tool (U) создайте фигуру как показано на примере ниже, и установите цвет заливки #1f1f1f. Примените стили слоя.

Создание интерфейса iPAD в Photoshop. Часть 2


Шаг 44
Создайте новый слой и трансформируйте его в Обрезающую маску. При помощи Rounded Rectangle Tool (U) с установленным радиусом 5 пикселей, создайте фигуру, как показано на примере ниже. Уменьшите заливку до 0% и примените стиль слоя. Создайте новый слой и черной мягкой кистью малого размера и черного #000000 цвета, проведите две полоски как показано ниже. Трансформируйте этот слой в Обрезающую маску и уменьшите его непрозрачность до 70%.

Создание интерфейса iPAD в Photoshop. Часть 2


Шаг 45
При помощи Rounded Rectangle Tool (U) с установленным радиусом 5 пикселей, создайте пять фигур, как показано на примере ниже, установите цвет заливки #8d8d8d, после чего примените стили слоя. Теперь выберите инструмент Перо (Pen) в режиме Фигуры, установите цвет заливки #454544, и нарисуйте фигуру, наподобие показанной ниже. Примените стиль слоя. Выбрав инструмент Rectangle Tool (U), нарисуйте 5 квадратов как показано ниже, установите цвет заливки #1a1a1, и примените стиль слоя. Снова этим же инструментом нарисуйте еще 5 фигур, как показано на рисунке ниже, и установите цвет заливки #eceee9.

Создание интерфейса iPAD в Photoshop. Часть 2


Шаг 46
Инструментом Перо (Pen) нарисуйте фигуру как показано на примере, уменьшите заливку до 0%, и примените стиль слоя.

Создание интерфейса iPAD в Photoshop. Часть 2


Финальное изображение

Создание интерфейса iPAD в Photoshop. Часть 2


 
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Другие новости по теме:


Просмотров: 672 | Напечатать | Комментарии (0)

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Навигация по сайту

Новые уроки

Создание шоколадного вулкана с использованием 3D-эффектов. Часть 1
Создание шоколадного вулкана с использованием 3D-эффектов. Часть 1

Часть 1


Дизайн завораживающего постера для Часа Земли
Дизайн завораживающего постера для Часа Земли


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


Выделенные области в Photoshop Часть 2
Выделенные области в Photoshop Часть 2

Приветствую вас на второй части урока, посвященного выделенным областям в Photoshop. Прежде чем приступить к
ее выполнению, ознакомьтесь и выполните первую часть.

Популярные статьи

Друзья
Семейный портал
Полезная информация о недвижимости
Реклама

Рейтинг блогов


Главная страница | Регистрация | Добавить новость | Новое на сайте |

При перепечатке материалов с сайта ссылка на источник обязательна (кликабельная и не шифрованая).
Запрещено вносить изменения в графический материал, например, обрезание водяного знака или перекрытие его своим знаками.