Простой HTC смартфон

5 сентября 2011 · Глеб Х. · «Мир Фотошопа»

Конечный результат:

Ресурсы урока:

Шаг 1

Создайте новый документ (Ctrl + N) размером 2362х2362 пикселей с разрешением 300dpi. Можете дать ему имя “HTC Smartphone”. Выберите инструмент Rounded Rectangle Tool (U) с радиусом 0,5 см. и создайте фигуру цветом #242527. Расположите фигуру по центру при помощи инструмента Move Tool (V).

Выберите инструмент Add Anchor Point Tool и добавьте дополнительную якорную точку на нижней стороне прямоугольника. Потом выберите инструмент Direct Selection Tool (A) и опустите эту точку на несколько миллиметров.

Сделайте копию слоя (выберите слой и нажмите Ctrl + J), назовите её “Silver”, залейте цветом #5a5a5c. Поднимите этот слой немного вверх и растрируйте его (кликните правой кнопкой на слое и выберите Rasterize Layer). Потом перейдите в меню Filter → Noise → Add Noise: Amount: 20%, Distribution: Uniform, Monochromatic. Кликните правой кнопкой мыши на слое “Silver” и выберите Create Clipping Mask. В завершении примените стиль Drop Shadow (Layer → Layer Style → Drop Shadow).

Шаг 2

Сделайте копию слоя с фигурой (не растрированный слой) её раз (Ctrl + J) и расположите её над слоем “Silver”. К ней примените стиль Inner Glow (Layer → Layer Style → Inner Glow). Установите Fill слоя на 0%.

Сделайте копию слоя (Ctrl + J) и инструментом Free Transform (Ctrl + T) немного уменьшите размер фигуры. Установите Fill слоя на 0% и Opacity на 54%. Потом примените следующие стили:

Добавьте маску слоя (кликните на иконку слоя, отмеченную на скриншоте ниже). Выберите инструмент Gradient Tool (G) и сделайте заливку сверху вниз.

В этом шаге мы создали тени и отражения.

Шаг 3

Выберите инструмент Ellipse Tool (U) и создайте овал белого цвета. Кликните правой кнопкой мыши на слое с фигурой и выберите пункт Rasterize Layer. Потом примените фильтр Gaussian Blur (Filter → Blur → Gaussian Blur): Radius: 32 пикселя. Установите Opacity слоя на 25%.

Шаг 4

Создадим отверстия для динамика в верхней части смартфона. Инструментом Rounded Rectangle Tool (U) создайте фигуру с радиусом 0,5 см цветом #6d6e71.

Прежде чем применять эффекты к динамику, нужно создать узор. Создайте новый документ (Ctrl + N) размером 2х2 см. Инструментом Ellipse Tool (U) создайте чёрный круг, удерживая клавишу Shift. Инструментом Move Tool (V) расположите круг по центру. Далее перейдите в меню Edit → Define Pattern и сохраните узор под именем “Cerchio“.

Вернитесь к нашему основном документу “HTC Smartphone” и примените следующие стили к слою с динамиком:

Сделайте копию слоя и инструментом Move Tool (V) сдвиньте её в сторону на 0,5 см. Расположите обе фигуры по центру.

На этом заканчивается часть урок, посвящённая основной форме смартфона. Можете объединить все имеющиеся слои в группу (Layer → Group Layers). Назовите группу “Base”.

Шаг 5

Переходим к созданию деталей смартфона. Инструментом Ellipse Tool (U) создайте круглую кнопку в нижней части смартфона. Потом примените стили, показанные ниже:

Внутри круга создайте ещё один круг. Вы можете просто сделать копию слоя (Ctrl + J) и немного уменьшить её инструментом Free Transform (Ctrl + T). Установите Fill этого слоя на 0% и примените стиль Stroke (Layer → Layer Style → Stroke). Настройки стиля показаны ниже.

Сделайте ещё несколько копию круга и повторяйте процесс с уменьшением и применением стиля Stroke пока не получите результат, показанный на скриншоте ниже. В конце объедините все слои кругов в группу.

Создайте новый слой (Ctrl + Shift + N) и инструментом Polygonal Lasso Tool (L) создайте треугольное выделение, как показано ниже. Затем выберите инструмент Gradient Tool (G) и настройте его цвета, как показано ниже. Сделайте заливку из центра выделения в любую вправо или влево.

Нужно сделать ещё одну заливку. На этот раз будем использовать линейный градиент. Сделайте заливку из центра круга к краю.

Уберите существующее выделение (Ctrl + D), выберите слой с градиентом и примените к нему фильтр Gaussian Blur (Filter → Blur → Gaussian Blur): Radius — 3,3 пикселя. Если градиент выходит за пределы круга, то сотрите его часть при помощи инструмента Eraser Tool (E). Сделайте копию слоя (Ctrl + J) и инструментом Free Transform (Ctrl + T) поверните её.

Инструментом Ellipse Tool (U) создайте ещё один чёрный круг в центре кнопки. Примените к нему стиль Bevel & Emboss (Layer → Layer Style → Bevel & Emboss).

Чтобы создать более реалистичный вид, нужно добавить отражение на круге. Инструментом Ellipse Tool (U) создайте маленький белый овал. Инструментом Direct Selection Tool (A) измените его форму, как показано ниже. Инструментом Free Transform (Ctrl + T) поверните немного фигуру. Далее растрируйте слой (кликните правой кнопкой на слое и выберите Rasterize Layer) и примените фильтр Gaussian Blur (Filter → Blur → Gaussian Blur) со значением радиуса 1,5 пикселя.

Кнопка смартфона завершена. Поместите все слои, принадлежащие ей в группу “Sensor”.

Шаг 6

Теперь займёмся экраном. Сделайте копию слоя с прямоугольником, который мы нарисовали в начале урока (Ctrl + J). Поместите этот слой поверх всех остальных в палитре слоёв и измените его цвет на чёрный. Растрируйте слой (кликните правой кнопкой на слое и выберите пункт Rasterize Layer). Затем примените стиль Inner Glow (Layer → Layer Style → Inner Glow).

В верхней части экрана нужно создать логотип HTC. Его можно написать при помощи инструмента Horizontal Type Tool (T) и шрифта “HURTMOLD”, который был предоставлен в начале урока. Обратите внимание на прописную букву “h” и заглавные буквы “T” и “C” в логотипе. К текстовому слою примените стиль Gradient Overlay (Layer → Layer Style → Gradient Overlay).

Меню

В нижней части экрана нужно нарисовать иконки меню. Каждый символ должен иметь цвет #6d6e71. Это будет не так трудно.

Начнём с иконки домика. Её можно создать при помощи инструментов Rectangle Tool и Rounded Rectangle Tool. Как закончите, поместите все слои с фигурами домика в группу “Casetta” (выберите слои и нажмите Ctrl + G).

Справа от домика нужно написать “menu ”. Используйте тот же шрифт, что и при создании логотипа. Но на этот раз используйте 1-пиксельную обводку. Назовите слой “Menu scritta”.

Справа от “menu” будет ещё два символа. Первый символ — стрелка. Чтобы её создать, выберите инструмент Custom Shape Tool (U) и на панели параметров выберите фигуру “arrow 18”. Создайте её на холсте и примените отражение по горизонтали (Edit → Transform → Flip Horizontal). Растрируйте слой (кликните правой кнопкой мыши на слое и выберите пункт Rasterize Layer). Инструментом Eraser Tool (E) сотрите нижнюю часть стрелки и назовите слой “Freccia”.

Последний символ — это лупа поиска Google. Инструментом Ellipse Tool (U) создайте круг и установите Fill слоя на 0%. Примените стиль Stroke (Layer → Layer Style → Stroke): Size — 3 пикселя, Color — #6d6e71.Инструментом Rectangle Tool (U) создайте ручку лупы и расположите её под углом 45 градусов при помощи инструмента Free Transform (Ctrl + T). Объедините два слоя лупы в группу (выберите слои и нажмите Ctrl + G) и назовите её “Lente”.

Все группы с иконками поместите в новую группу “Menu”.

Шаг 7 — Дизайн экрана

Сейчас займёмся картинкой экрана. Создайте новый слой (Ctrl + Shift + N) и назовите его “Sfumatura”. Инструментом Rectangular Marquee Tool (M) создайте прямоугольное выделение и залейте его градиентом под названием “Spectrum“. Сделайте заливку инструментом Gradient Tool (G) с левого нижнего к правому верхнему углу.

Создадим пузыри (часть рисунка экрана). Создайте новый (Ctrl + Shift + N) и назовите его “Bolle”. Инструментом Ellipse Tool (U) создайте белый круг. Установите Blending Mode этого слоя на Soft Light и Opacity на 60%.

Растрируйте слой с белым кругом (кликните правой кнопкой на слое и выберите пункт Rasterize Layer). Потом примените фильтр Gaussian Blur (Filter → Blur → Gaussian Blur): Radius — 9,3 пикселя. Сделайте несколько копий этого слоя и измените размер каждой из них при помощи инструмента Free Transform (Ctrl + T). Раскидайте пузыри по всему экрану.

Пузыри должны находиться в пределах области, залитой градиентом. Чтобы ограничить их, сделайте выделение слоя с градиентом (удерживая Ctrl, кликните на иконке слоя). Потом инвертируйте выделение (Ctrl + Shift + I) . Выберите все слои пузырей и нажмите клавишу Delete.

Выберите все слои с пузырями и объедините их в группу (выберите их и нажмите Ctrl + G).

Шаг 8 — Элементы экрана

Сейчас мы создадим стандартные элементы экрана HTC, которые показывают дату и время.

Создайте новый слой (Ctrl + Shift + N) и инструментом Rectangle Tool (U) создайте прямоугольник чёрного цвета на всю ширину экрана. Инструментом Free Transform (Ctrl + T) измените форму прямоугольника, как показано ниже.

Сделайте две копии изогнутого прямоугольника (Ctrl + J) и скройте верхний слой. Растрируйте два нижних слоя. К каждому слою примените фильтр Gaussian Blur (Filter → Blur → Gaussian Blur) со значением радиуса 10 пикселей. Установите Blending Mode обоих слоёв на Multiply и Opacity на 80%.

Теперь можно сделать верхний слой видимым и создать его копию (Ctrl + J). На нижнем слое с фигурой (оригинальном слое) инструментом Direct Selection Tool (A) выберите две верхние точки и поднимите их, чтобы увеличить высоту фигуры.

Измените цвет обоих слоёв с фигурой на #6d6e71 и примените следующие стили:

Нужно создать несколько маленьких кругов на изогнутой панели. Инструментом Ellipse Tool (U) создайте маленький круг цветом # 6d6e71 и примените к нему стиль Inner Shadow (Layer → Layer Style → Inner Shadow). Далее сделайте несколько копий слоя с маленьким кругом и расположите их, чтобы получилось несколько рядов, как показано ниже.

Объедините все маленькие круги в группу “Balls Sx“ (выберите слои и нажмите Ctrl + G). Сделайте копию группы и переименуйте её в “Balls Dx”. Отразите группу по горизонтали (Edit → Transform → Flip Horizontal). Расположите её на другой стороне.

Выберите инструмент Horizontal Type Tool (T) и напишите дату белым цветом. Я использовал шрифт “Calibri Regular” размером 9,5pt. Расположите слой с датой в центре тени от панели времени, как показано ниже.

Выберите шрифт “Calibri” размером 33pt. и в центре напишите время. Над панелью времени можно написать название оператора (тот же шрифт, размер — 9,5pt.).

Объедините все текстовые слои в группу “Schermo Basso”.

Шаг 9

Займёмся верхней частью экрана. Инструментом Rectangle Tool (U) создайте белый прямоугольник. Потом примените к нему стиль Gradient Overlay (Layer → Layer Style → Gradient Overlay).

На этой панели должно быть немало символов. Но основные это время, заряд батареи и состояние сигнала.

ВРЕМЯ: напишите время шрифтом “Calibri regular” размером 8pt. белого цвета.

БАТТАРЕЯ: эту иконку можно создать при помощи инструмента Rounded Rectangle Tool (U) с радиусом 0,01 см. Потом объедините все слои иконки в один (выберите их и нажмите Ctrl + E) и примените стили Gradient Overlay и Stroke.

Инструментом Rectangle Tool (U) нарисуйте зелёную полоску внутри цветом #7fff00 и примените стиль Gradient Overlay (Layer → Layer Style → Gradient Overlay).

СИГНАЛ: нарисуйте 4 прямоугольника белого цвета и примените к ним стиль Gradient Overlay (Layer → Layer Style → Gradient Overlay).

Объедините все слои с прямоугольниками сигнала в группу и назовите её “Schermo Alto”.

Шаг 10

Экран должен иметь небольшой эффект глубины. Инструментом Rectangular Tool (U) создайте большой прямоугольник на весь размер экрана. Установите Fill слоя на 0% и примените эти стили:

Шаг 11

Осталось создать боковые кнопки регулировки звуки и верхнюю кнопку включения смартфона.

Инструментом Rounded Rectangle Tool (U) с радиусом 0,1 см. создайте тонкий прямоугольник чёрного цвета и расположите его на левой стороне смартфона. Потом создайте ещё один такой прямоугольник сверху, но он должен быть короче.

Можете создать небольшое свечение на кнопке, чтобы создать отражение. Это можно сделать при помощи простой кисти.

Конечный результат:

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».

Переведено с сайта www.psdbox.com, автор перевода указан в начале урока.