Как нарисовать телефон в фотошопе
Сам по себе процесс рисования прямой или изогнутой линии в Photoshop довольно несложный, но начинающему пользователь не помешает изучить некоторые основные методы рисования линии. Из этого урока вы узнаете три основных способа создания линий, чаще всего для этого используются инструменты «Кисть» (Brush Tool), «Перо» (Pen Tool) и инструмент «Линия» (Line Tool) для создания простых прямых линий.
Рисуем линию инструментом «Кисть» (Brush Tool) и «Карандаш» (Pencil Tool)
Проще всего нарисовать линию в Photoshop инструментом «Кисть» (Brush Tool). Выберите круглую кисть, задайте небольшой диаметр, 100%-ную жёсткость и просто проведите курсором по документу. У Вас получится линия.
Для того, чтобы нарисовать прямую линию в Photoshop, Вы должны использовать клавишу Shift.
Для получения строго вертикальных или горизонтальных линий Shift следует зажимать перед началом рисования.
Для получения просто прямых линий, ориентированных в произвольном направлении, зажимаем Shift, кликаем мышью на начальной точке линии, отпускаем клавишу мыши, не отпускаем Shift, перемещаем курсор в конечную точку линии, и кликаем левой клавишей мыши в этой точке. Между первой и второй точкой кликов появится прямая линия. Можно продолжать рисовать прямую ломаную линию дальше, кликая по документу левой клавишей мыши, при зажатой Shift.
Аналогичным образом можно использовать инструмент «Карандаш» (Pencil Tool). Как видите, ничего сложного.
Но лично я чаще использую два других способа.
Создаём прямую линию инструментом «Линия» (Line Tool)
Другой способом рисования является использование инструмента «Линия» (Line Tool), доступного на инструментальной панели Photoshop:
Эта линия является векторной формой (Vector Shape), так что в последствии Вы можете легко изменить её форму, цвет и размер без потери качества. Вы также можете использовать клавишу Shift для построения горизонтальных, вертикальных и направленных под углом 45° линий:
Ломаная, прямая и кривая линия с помощью «Пера» (Pen Tool)
Третий иp распространённых способов создания лини — использование универсального инструмента «Перо» (Pen Tool):
Сначала необходимо переключить «Перо» на режим «Контур» (Paths), этот переключатель находится на панели параметров в верхнем левом углу окна программы. Затем кликните в том месте, где должна начинаться линия, это будет начальная точка, потом добавьте вторую точку и т.д.
То же самое правило действует и при нажатии клавиши Shift:
Давайте выполним несложную практическую работу. Сначала выберите инструмент «Кисть», задайте диаметр 3 пикселя,жёсткость 100%, цвет — чёрный.
Затем возьмите «Перо», выберите режим «Контур» и нарисуйте линию с помощью двух точек. Вы можете увидеть созданный контур на панели слоёв во вкладке «Контур» (Path), там наша линия будет добавлена в качестве рабочего контура (Work Path).
Но контур, созданный «Пером», это всего-лишь вспомогательный объект, и при сохранении картинки отображён не будет. Для того, чтобы визуализировать контур, нам следует выполнить его обводку.
При активном инструменте «Перо», кликните правой клавишей мыши по контуру в документе. Откроется контекстное меню, где нажмите на строку «Выполнить обводку контура» (Stroke Path):
Откроется новое окно, где выберите пункт «Кисть» (Brush) и нажмите ОК. Обводка толщиной в 3 пикселя появится:
Эту операцию лучше всего производить на новом прозрачном слое.
Теперь Вы можете удалить контур, созданный пером, либо каким-либо образом изменить его геометрию, обводка повторит все изменения.
Владелец данного сайта. Графический дизайнер, специалист по Фотошопу с опытом 10+ лет. Также веду канал о графическом дизайне на Ютуб и развиваю тематическое сообщество во ВКонтакте. Связаться со мной можно через комментарии, форму обратной связи или по электронной почте [email protected]
В этом уроке мы создадим потрясающий новенький смартфон HTC One в Photoshop.
Результат:
Шаг 1
Создайте новый документ в Photoshop с высотой (height) 3000 пикселей, шириной (width) 3000 пикселей, разрешением (resolution) 100 пикселей на дюйм. Назовите его «HTC One» или по-другому, как захотите.
Шаг 2
Добавьте этому слою стиль Наложение узора (Pattern overlay) и выберете текстуру белого гранита (Grey Granite pattern), установите непрозрачность (opacity) 50% и масштаб (scale) 100%, режим наложения (blend mode) Нормальный (Normal).
Шаг 4
Создайте еще один контур инструментом Прямоугольник со скругленными углами (Rounded rectangle tool) (U) с с радиусом (radius) 20 пикселей, шириной (width) 23 см, высотой (height) 41 см. Нажмите Ctrl+Enter, чтоб преобразовать контур в выделение. Заполните его любым оттенком серого. Назовите слой «Экран» («Screen»).
Шаг 5
Теперь, чтоб создать лицевую панель, дублируйте самый первый слой «Корпус» («Body») и назовите копию слоя «Лицевая панель» («Bezel»), уберите все стили слоя. Создайте выделение по форме этого слоя (Ctrl+Клик по миниатюре слоя) и уберите верхнюю и нижнюю скругленные части, как показано на рисунке ниже. Теперь активируйте контур слоя «Экран» («Screen»), перейдите на слой «Лицевая панель» («Bezel») и удалите среднюю часть в форме экрана. Залейте этот слой любым цветом, который темнее цвета экрана.
Шаг 6
Добавьте слою «Лицевая панель» («Bezel») стиль Тиснение (Bevel and Emboss) с настройками, как на рисунке ниже.
Шаг 7
Теперь нарисуйте два круга с высотой и шириной 0.58 см (зажмите клавишу Shift, чтоб получить идеальный круг). Разместите их слева на лицевой части телефона. Это будут датчики.
Шаг 8
Шаг 9
Копируйте слой с динамиком (Ctrl+J) и разместите его в нижней части лицевой панели. У вас должно получиться так, как на изображении ниже.
Шаг 10
Создайте новый слой. Инструментом Перо (Pen tool) создайте форму, как на рисунке ниже. Залейте ее черным цветом и установите слою непрозрачность (opacity) 50%. Мы создали световое отражение, которое придаст реалистичности нашему изображению.
Шаг 11
Создайте иконку «Домой» при помощи Пера ( Pen tool) и поместите ее в нижней части телефона. Залейте ее белым цветом и установите непрозрачность (opacity) 50%.
Шаг 12
Шаг 13
Добавьте камеру, нарисовав круг и применив к нему стиль слоя «Градиент» («Gradient Overlay»).
Шаг 14
Нарисуйте еще два круга внутри.
Шаг 15
Создайте форму в виде полукруга, залейте ее черным цветом и установите непрозрачность (opacity) 50%.
Шаг 16
Нарисуйте панель приложений, используя инструмент Прямоугольная область (Rectangular Marquee tool). Примените стили слоя, показанные на рисунке ниже.
Шаг 17
Повторите предыдущий шаг, чтоб создать верхнюю панель. Создайте выделение, используя инструмент Прямоугольная область (Rectangular Marquee tool), залейте его серым цветом и скопируйте стиль слоя с нижней панели. Эти два слоя должны находиться между слоями «Экран» («Screen») и «Лицевая панель» («Bezel»).
Шаг 18
Чтоб нарисовать иконки, нужно создать новый документ размером 3000х3000 пикселей.
Шаг 19
Нарисуйте иконку телефона, используя инструмент Произвольная фигура (Custom shape tool).
Шаг 20
Залейте ее любым цветом.
Шаг 21
Удалите лишние части, оставив только телефон. Залейте его белым цветом внутри, зеленым по краям.
Шаг 22
Шаг 23
Нарисуйте 9 квадратов, разместите их в три ряда и в три колоны, чтоб сделать иконку приложений.
Шаг 24
Чтоб сделать иконку планеты, нарисуйте ровный круг и заполните его синим цветом, примените следующие стили слоя:
Шаг 25
Скопируйте форму материков с любого изображения глобуса и разместите их на иконке.
Шаг 26
Чтоб нарисовать иконку камеры, создайте два прямоугольника и примените такие стили слоя:
Шаг 27
Добавьте еще один стиль слоя.
Шаг 28
Нарисуйте кольцо и добавьте такие стили слоя:
Шаг 29
Скопируйте камеру, которую рисовали на самом корпусе телефона, поместите ее в круг, изменив ей размер. Не волнуйтесь о разрешении, все равно эта иконка будет очень маленькой.
Шаг 30
Соберите все иконки на панели, изменив их размеры.
Шаг 31
Создайте иконку сигнала, нарисовав 5 прямоугольников, стоящих на одном уровне, при этом каждый должен быть короче предыдущего.
Шаг 32
При помощи инструмента Перо (Pen tool) нарисуйте батарею, залейте ее зеленым цветов. Скопируйте, сделайте больше и заполните копию серым. Этим двум слоям добавьте черную обводку в 3 пикселя.
Шаг 33
Поместите иконку сигнала и батареи рядом на верхней панели, изменив размер, если это необходимо.
Шаг 34
Чтоб добавить больше деталей, добавьте слою «Корпус» («Body») такие стили слоя:
Обводка (Stroke): 8 пикселей, непрозрачность (opacity) 50%.
Внутренняя тень (Inner Shadow): Смещение (Distance) 0, Стягивание (Choke) 0, Размер (Size) 43, непрозрачность (opacity) 10%.
Тень (Drop Shadow): Размер (Size) 54, Смещение (Distance) 0, Стягивание (Choke) 0.
Шаг 35
Добавьте градиентный фон, немного текста, отражение (сгруппируйте все слои, скопируйте группу, слейте все слои в этой группе в один, отразите по вертикали, уменьшите непрозрачность, сотрите лишнее мягким ластиком). Все, мы закончили!
Благодаря материальному дизайну − визуальному языку, разработанному Google, создавать интерфейс приложений для Android стало намного проще. После того, как вы потратите несколько минут на то, чтобы прочитать его спецификацию, которая обновляется время от времени, вы можете приступить к разработке приложений для Android, соответствующих традиционным для новейших версий Android стилям, включая Marshmallow и Nougat. Более того, чтобы помочь вам сэкономить время и силы, Google выпустил специальные стикеры для приложений в стиле материального дизайна.
Исходные материалы:
- Набор стикеров
- Шрифт Roboto
- Иконки
- Цветовая палитра материального дизайна
Зачем использовать стикеры?
Пользовательские интерфейсы, соответствующие спецификации материального дизайна, по большей части состоят из простых форм, чистых цветов и небольшого количества теней. Следовательно, в отличие от сквеоморфных пользовательских интерфейсов (примечание переводчика: сквеоморфизм − имитация в цифровом пространстве внешнего вида реальных объектов), они не сильно отличаются друг от друга. Фактически, кроме их цветов, размеров и высоты, виджеты пользовательского интерфейса выглядят одинаково практически во всех приложениях в стиле материального дизайна. Стикеры содержат изображения этих виджетов и, используя их, вы можете эффективно практиковать метод перетаскивания в дизайне пользовательского интерфейса.
Перетаскивание в дизайне интерфейса
Хотя в этом уроке мы будем использовать Adobe Photoshop, стоит отметить, что стикеры доступны для Sketch, Adobe Illustrator и After Effects.
Для выполнения урока вам понадобится:
- Adobe Photoshop CC
- Последняя версия стикеров в стиле материального дизайна для Фотошопа
1. Открываем стикеры
Запустите Фотошоп и нажмите Файл > Открыть. (File > Open. ), чтобы открыть скачанный вами файл со стикерами. Если на вашем компьютере ещё не установлен шрифт Roboto, Фотошоп предложит вам либо синхронизировать его с Adobe Typekit, либо загрузить его из другого источника (например, Google-шрифты).
Если вы используете Typekit, нажмите кнопку Разрешить (Resolve Fonts), чтобы продолжить. Само собой, вы должны войти в свою учетную запись Creative Cloud, чтобы синхронизация завершилась.
Как только файл стикеров откроется, вы увидите, что это очень большой документ (его размеры составляют 5688 × 6790 пикселей) с множеством слоёв и групп слоёв. Предлагаю вам потратить несколько минут на изучение документа.
2. Создаём глобальные (общие) элементы
Строка состояния, панель навигации и панель приложения часто называются глобальными элементами. Создавая их первыми, мы определяем область, в которую будут помещены остальные виджеты пользовательского интерфейса.
В файле стикеров все глобальные элементы присутствуют внутри группы слоёв, называемой глобальными элементами (Global elements). Он также содержит глобальные элементы для мобильных телефонов, планшетов и настольных компьютеров. Но пока сосредоточимся только на группе MOBILE. Удерживая ALT, щёлкнем по иконке глаза возле названия группы Mobile.
Как вы видите, группа слоёв содержит все нужные элементы, а также несколько вспомогательных элементов, которые помогут нам правильно расположить виджеты пользовательского интерфейса. Перейдите в Слой > Создать дубликат группы. (Layer > Duplicate Group . ), чтобы создать его копию в новом документе MyMaterialApp.
В этом уроке мы создаем пользовательский интерфейс приложения для Android, которое будет подсчитывать потребляемые калории. Поэтому в новом документе разверните группу слоёв "App Bar" и используйте инструмент «Горизонтальный текст» (Horizontal Type Tool) (T), чтобы изменить название приложения на «Калории».
Кроме того, наш дизайн будет иметь диаграмму в области панели приложений. Чтобы освободить для неё место, выделите слои "key shadow" и " ambient shadow ", нажмите Ctrl + T (Свободное трансформирование) и сделайте их высотой 250 пикселей. Не забудьте сохранить изменения, нажав Enter.
3. Добавляем список
Вернитесь на вкладку документа со стикерами и найдите группу слоёв LISTS. В ней есть восемь различных типов списков. Мы, однако, будем использовать только седьмой тип. Поэтому выберите группу слоёв с именем List7 и перейдите в Слой > Создать дубликат группы. (Layer > Duplicate Group . ), чтобы скопировать её в документ MyMaterialApp.
На вкладке MyMaterialApp убедитесь, что слой List7 расположен прямо под слоем панели приложений (App bar). Если это так, вы увидите, что направляющие и содержимое списка выровнены идеально.
Всегда лучше давать своим группам слоёв значимые названия. Поэтому переименуйте группу List7 в «Список продуктов».
4. Изменяем названия пунктов списка
Давайте теперь изменим список так, чтобы он отображал названия блюд вместе с их размерами порций. Это делается просто. Выберите нужные слои и используйте инструмент "Горизонтальный текст" (Horizontal Type Tool) (T) для изменения их содержимого. Я предлагаю вам также изменить вес шрифта для названий блюд на «Жирный» (Bold).
Приложение для подсчёта калорий не было бы таким полезным, если бы оно не отображало калории. Однако в нашем списке больше нет места для текста. Поэтому удалим слои "square" из групп слоёв list_01, list_02 и list_03.
5. Добавляем иконки в стиле материального дизайна
Мы можем сделать наш пользовательский интерфейс более привлекательным, добавив в него иконки в стиле материального дизайна. Так что давайте загрузим три иконки для трёх элементов списка нашего интерфейса.
Откроем страницу Material Icons и выберем первую иконку под названием local pizza (Проще всего вбить название в строке поиска). В нижней части страницы появится голубая строка, в ней нужно изменить размер на 36 dp и нажать кнопку JPGS, чтобы загрузить zip-архив с иконкой.
Распакуйте архив и в папке android/drawable-mdpi найдите нужное изображение. Перетащите его на вкладку MyMaterialApp в окне Фотошопа.
Повторите те же шаги для иконок local cafe и local dining.
Теперь мы можем заменить слои "circle" в элементах списка иконками. Начнём с иконки пиццы. Выделите её слой и слой "circle", который находится внутри группы слоёв list_01. Перейдите в меню "Слой > Выровнять > Центры по вертикали" (Layer > Align > Vertical Centers), чтобы выровнять их по вертикали. Аналогичным образом перейдите в меню "Слой > Выровнять > Центры по горизонтали" (Layer > Align > Horizontal Centers), чтобы выровнять их центры по горизонтали.
Теперь можно удалить слой "circle" в группе list_01.
Повторите те же шаги для двух оставшихся иконок.
6. Добавляем цвет
Давайте теперь добавим цвета, так как пользовательские интерфейсы в стиле материального дизайна, как правило, яркие и красочные.
Повторите те же действия для слоёв с названиями "ic_local_cafe_black_36dp" и "ic_local_dining_black_36dp". Убедитесь, что каждый раз был выбран другой цвет.
Давайте теперь раскрасим глобальные элементы. Чтобы изменить цвет фона, выберите слой "Фон" (Background), нажмите "А", чтобы выбрать прямоугольник внутри него, и измените цвет заливки на белый.
7. Добавляем плавающие кнопки действия
Плавающая кнопка действия − это один из самых важных виджетов пользовательского интерфейса в стиле материального дизайна. Чтобы копировать её в наш дизайн, продублируйте группу слоёв "Floating action button" (Плавающая кнопка действия) из документа со стикерами. Если затруднитесь с поиском, найдите её в группе слоёв «METRICS AND KEYLINES».
Разместите группу слоёв " Плавающая кнопка действия " над группой слоёв "Список продуктов".
Затем, используя инструмент "Перемещение" (Move Tool) (V), поместите плавающую кнопку действия в нижний правый угол пользовательского интерфейса.
Аналогичным образом измените цвет слоя "ic_add", который содержит символ плюса, на белый. Кроме того, откройте его Параметры наложения (Blending Options) и измените Непрозрачность (Opacity) на 100%.
8. Обрезаем документ
Вы могли заметить, что наш документ получился очень большим, и проект занимает в нём лишь маленькую часть. Чтобы изменить размер документа таким образом, чтобы он соответствовал размеру дизайна, нажмите "Изображение > Тримминг" (Image > Trim). В появившемся диалоговом окне оставьте значения по умолчанию и нажмите OK.
9. Добавляем диаграмму
Как я упоминал ранее, область приложения в нашем пользовательском интерфейсе будет иметь диаграмму. Поскольку в файле Стикеров нет стикеров для графиков, нам придётся создавать его вручную.
Начнём с включения сетки. Для этого перейдите в меню "Просмотр > Показать > Сетку" (View > Show > Grid).
Нажмите Shift + Ctrl + N, чтобы создать новый слой внутри группы слоёв "App bar", и используйте инструмент "Карандаш" (Pencil Tool) (B), чтобы нарисовать четыре горизонтальные линии, белого цвета и толщиной в 1 пиксель ниже названия приложения.
Используя инструмент «Горизонтальный текст» (Horizontal Type Tool) (T), добавьте три даты ниже последней горизонтальной линии. Размер шрифта дат − 13 пикселей.
Теперь можно отключить сетку, снова нажав "Просмотр > Показать > Сетку" (View > Show > Grid).
Выделите все слои, созданные в этом шаге, и нажмите Ctrl + G, чтобы создать для них новую группу слоёв. Назовите группу "Диаграмма" (Chart).
Затем, внутри группы слоёв "Диаграмма" создайте новый слой и назовите его "Данные". Внутри слоя нарисуйте замкнутый контур с помощью инструмента "Перо" (Pen Tool) (P). Форма контура не очень важна, если она похожа на гладкую кривую.
Чтобы залить контур цветом переднего плана, перейдите на панель "Контуры" (Paths), щёлкните правой кнопкой мыши на "Рабочий контур" (Work Path) и выберите "Заливка контура . " (Fill path). В открывшемся диалоговом окне оставьте значения по умолчанию и нажмите ОК.
Чтобы диаграмма не выглядела такой назойливой, уменьшите непрозрачность группы слоёв «Диаграмма» до 75%.
Наконец, используйте инструмент "Горизонтальный текст" (Horizontal Type Tool) (T), чтобы под графиком отобразить общее количество потребляемых калорий. Пусть размер шрифта цифр будет 24 px, а размер шрифта слов − 14px.
Наш дизайн закончен. Идем дальше и скрываем группу слоёв "Guides", она нам больше не понадобится.
10. Создаём обложку устройства
Дизайн пользовательского интерфейса в обложке устройства (смартфона или планшета) и с добавлением бликов выглядит более профессионально и реалистично. Хотя вы можете использовать для этого Фотошоп, гораздо проще воспользоваться Google Device Art Generator.
Сначала экспортируйте свой дизайн в файл JPG, нажав в меню "Файл > Сохранить как" (File > Save As).
Теперь перетащите файл JPG на любое из устройств, которые вы видите в Device art generator. Обратите внимание, что вам нужно масштабировать изображение, по крайней мере, до 1080 × 1920 пикселей, чтобы использовать обложки новейших моделей устройств.
Как только изображение будет сгенерировано, вы можете перетащить его в любую папку на вашем компьютере, чтобы сохранить.
Заключение
В этом уроке вы узнали, как использовать стикеры Google в стиле материального дизайна и Фотошоп, чтобы создавать дизайн приложения для Android. Не стесняйтесь добавлять в него больше виджетов, менять их цвета и экспериментировать с макетом.
Я также хотел бы напомнить вам, что спецификация Material Design − это только набор рекомендаций. Необязательно строго придерживаться её, главное, чтобы конечный результат получился логичным и интуитивно понятным.
Чтобы узнать больше о дизайне приложений для Android, а также найти ещё больше дизайнерских ресурсов, можно посетить сайт Google Design.
В данном материале я расскажу, как самостоятельно, с нуля, т.е. не используя какие-либо сторонние изображения для основы коллажа, создать фотореалистичный макет iPhone 5 в программе Photoshop.
Кстати, изображение, сделанное по этой методике, использовано в Википедии в статье iPhone 5 .
Для лучшего понимания материала Вы сможете скачать готовый PSD файл, выполненный по этому уроку, по ссылкам внизу страницы.
Сам по себе процесс создания макета будет интересным и познавательным, т.к. в процессе мы будем использовать векторные формы, фильтры, стили слоя, обтравочные маски и другие методики, знание которых пригодится как начинающему, так и опытному пользователь Photoshop.
Вот какой макет в результате получился у меня, два варианта, с выключенным и включенным дисплеем:
Для начала, создадим новый документ (Ctrl+N) шириной 600 и высотой 700 пикселей на белом фоне.
Создание корпуса iPhone 5
Переименуем этот слой в «Корпус». Дублируйте этот слой, переименуйте дубликат в «Корпус 1» и переместите его под слой «Корпус» в панели слоёв. Отключите видимость слоя «Корпус 1».
Переходим на слой «Корпус». Добавим к нему стили слоя «Обводка» (Stroke) и «Внешнее свечение» (Outer Glow) со следующими параметрами:
Вот как должна теперь выглядеть панель слоёв:
Вот что получилось, на скриншоте я немного увеличил масштаб:
Вот как выглядит рабочий документ при немного увеличенном масштабе изображения:
Корпус смартфона сделан из глянцевого материала, поэтому у него должны быть блики. Помните, фотографическая реалистичность достигается соблюдением мелочей!
Давайте нарисуем блики на корпусе iPhone. Создайте новый слой над слоем «Корпус 2», отключите видимость слоёв выше. Возьмите круглую кисть белого цвета, задайте диаметр 10px и жёсткость 0 (ноль).
Зажмите клавишу Shift и проведите кистью примерно в центре документа горизонтальную линию длиной 50px. Затем примените Фильтр —> Размытие —> Размытие в движении (Filter —> Blur —> Motion Blur) со значением угла 0° и «Смещение» (Distance) 30px:
Вот как должна выглядеть эта линия до и после применения фильтра:
Далее изогнём линию. Идём Редактирование —> Трансформирование —> Деформация (Edit —> Transform —> Warp) и выбираем дугу (Arch) с изгибом в 30%:
С помощью инструмента «Свободная трансформация» разместите дугу в левом верхнем углу корпуса и поверните дугу на угол минус 45°. Возьмите инструмент «Прямолинейное Лассо» (Polygonal Lasso Tool) и создайте треугольное выделение, как показано на рисунке ниже, затем нажмите клавишу Delete для удаления лишней части дуги. Вот как это будет выглядеть:
Дублируйте слой с дугой, поверните его на 90° и разместите в правом верхнем углу корпуса. Проделайте эти же операции для нижних углов.
Чтобы не загромождать панель слоёв, сгруппируйте эти четыре слоя и переименуйте группу в «Блики».
Вот как теперь выглядит корпус iPhone 5:
Поместите эти четыре слоя в группу.
Теперь не помешает добавить блик на лицевой панели смартфона.
С помощью инструмента «Перо» (Pen Tool) создайте примерно такой треугольник с заливкой белого цвета:
Переименуйте слой в «Блик лиц. панели». Далее, при этом активном слой зажмите клавишу Ctrl и кликните на миниатюру слоя «Корпус»:
В результате в документе появится выделенная область по форме слоя «Корпус». При активном слое «Блик лиц. панели» кликните по расположенному внизу панели слоёв значку создания маски слоя. Сделайте заливку слоя 0%:
Добавьте к слою «Блик лиц. панели» стиль слоя «Градиент» (Gradient Overlay) со следующими параметрами:
Создаём кнопки для iPhone
Используя эту же технику, создаём кнопки, расположенные сбоку, только на этот раз создаём один вертикальный прямоугольник шириной 4.5, высотой 28 и радиусом 4 пикселя для верхней кнопки, а для двух нижних такой же, только высота 22 пикселя.
Кнопка «Home»
Вот как будет выглядеть заготовка кнопки:
Примените к получившейся фигуре стиль слоя «Наложение градиента» (Gradient Overlay) со следующими настройками:
Рисуем камеру и динамик iPhone
Можно создать круг внешний и остальные круги большего диаметра, чем 12px, например, на рисунках фактический диаметр внешнего круга 83 px, сгруппировать все слои и уменьшить размер группы до 12px по ширине и высоте. Полученный таким образом круг в увеличенном масштабе показан справа.
Переходим к рисованию динамика.
Для рисования сетки динамика нам понадобится создать собственный узор (Pattern).
Создаём новый документ размером 2 на 2 пикселя с прозрачным фоном. Увеличиваем масштаб документа до максимума, берём инструмент «Карандаш» (Pencil Tool) белого цвета и наносим на документ два однопиксельных квадрата, как показано на рисунке:
После чего идём Редактирование —> Определить узор (Edit —> Define Pattern), придумываем новому узору какое-нибудь имя, сохраняем.
Дублируем прямоугольник, для наглядности меняем цвет его заливки, (на примере у меня это голубой цвет), берём инструмент «Свободная трансформация», зажимаем клавиши Shift+Alt, чтобы трансформирование происходило с соблюдением пропорций и относительно центра фигуры, затем уменьшаем фигуру, как показано на рисунке ниже. Добавляем к новой фигуре стили слоя
«Внутренняя тень», «Наложение градиента» и «Наложение узора» со следующими параметрами (в «Наложении узора» используем созданный только что узор):
Вот как выглядит динамик после уменьшения второго прямоугольника и добавления стилей слоя к меньшему прямоугольнику:
Осталось создать тень под iPhone 5. Создаём новый слой над самым нижним фоновым слоем. Берём круглую кисть чёрного цвета с нулевой жёсткостью, диаметром 14px и непрозрачностью 100% и рисуем на новом слое под корпусом телефона горизонтальную линию, затем применяем к слою фильтр «Размытие в движении» со смещением 35 пикселей:
На этом создание макета закончено, при желании можно добавить иконки на экран iPhone.
В этом уроке мы создадим потрясающий новенький смартфон HTC One в Photoshop.
Шаг 1
Создайте новый документ в Photoshop с высотой (height) 3000 пикселей, шириной (width) 3000 пикселей, разрешением (resolution) 100 пикселей на дюйм. Назовите его "HTC One" или по-другому, как захотите.
Шаг 2
Добавьте этому слою стиль Наложение узора (Pattern overlay) и выберете текстуру белого гранита (Grey Granite pattern), установите непрозрачность (opacity) 50% и масштаб (scale) 100%, режим наложения (blend mode) Нормальный (Normal).
Шаг 4
Создайте еще один контур инструментом Прямоугольник со скругленными углами (Rounded rectangle tool) (U) с с радиусом (radius) 20 пикселей, шириной (width) 23 см, высотой (height) 41 см. Нажмите Ctrl+Enter , чтоб преобразовать контур в выделение. Заполните его любым оттенком серого. Назовите слой "Экран" ("Screen").
Шаг 5
Теперь, чтоб создать лицевую панель, дублируйте самый первый слой "Корпус" ("Body") и назовите копию слоя "Лицевая панель" ("Bezel"), уберите все стили слоя. Создайте выделение по форме этого слоя ( Ctrl+Клик по миниатюре слоя) и уберите верхнюю и нижнюю скругленные части, как показано на рисунке ниже. Теперь активируйте контур слоя "Экран" ("Screen"), перейдите на слой "Лицевая панель" ("Bezel") и удалите среднюю часть в форме экрана. Залейте этот слой любым цветом, который темнее цвета экрана.
Шаг 6
Добавьте слою "Лицевая панель" ("Bezel") стиль Тиснение (Bevel and Emboss) с настройками, как на рисунке ниже.
Шаг 7
Теперь нарисуйте два круга с высотой и шириной 0.58 см (зажмите клавишу Shift , чтоб получить идеальный круг). Разместите их слева на лицевой части телефона. Это будут датчики.
Шаг 8
Шаг 9
Копируйте слой с динамиком (Ctrl+J) и разместите его в нижней части лицевой панели. У вас должно получиться так, как на изображении ниже.
Шаг 10
Создайте новый слой. Инструментом Перо (Pen tool) создайте форму, как на рисунке ниже. Залейте ее черным цветом и установите слою непрозрачность (opacity) 50%. Мы создали световое отражение, которое придаст реалистичности нашему изображению.
Шаг 11
Создайте иконку "Домой" при помощи Пера ( Pen tool) и поместите ее в нижней части телефона. Залейте ее белым цветом и установите непрозрачность (opacity) 50%.
Шаг 12
Шаг 13
Добавьте камеру, нарисовав круг и применив к нему стиль слоя "Градиент" ("Gradient Overlay").
Шаг 14
Нарисуйте еще два круга внутри.
Шаг 15
Создайте форму в виде полукруга, залейте ее черным цветом и установите непрозрачность (opacity) 50%.
Шаг 16
Нарисуйте панель приложений, используя инструмент Прямоугольная область (Rectangular Marquee tool). Примените стили слоя, показанные на рисунке ниже.
Шаг 17
Повторите предыдущий шаг, чтоб создать верхнюю панель. Создайте выделение, используя инструмент Прямоугольная область (Rectangular Marquee tool), залейте его серым цветом и скопируйте стиль слоя с нижней панели. Эти два слоя должны находиться между слоями "Экран" ("Screen") и "Лицевая панель" ("Bezel").
Шаг 18
Чтоб нарисовать иконки, нужно создать новый документ размером 3000х3000 пикселей.
Шаг 19
Нарисуйте иконку телефона, используя инструмент Произвольная фигура (Custom shape tool).
Шаг 20
Залейте ее любым цветом.
Шаг 21
Удалите лишние части, оставив только телефон. Залейте его белым цветом внутри, зеленым по краям.
Шаг 22
Шаг 23
Нарисуйте 9 квадратов, разместите их в три ряда и в три колоны, чтоб сделать иконку приложений.
Шаг 24
Чтоб сделать иконку планеты, нарисуйте ровный круг и заполните его синим цветом, примените следующие стили слоя:
Шаг 25
Скопируйте форму материков с любого изображения глобуса и разместите их на иконке.
Шаг 26
Чтоб нарисовать иконку камеры, создайте два прямоугольника и примените такие стили слоя:
Шаг 27
Добавьте еще один стиль слоя.
Шаг 28
Нарисуйте кольцо и добавьте такие стили слоя:
Шаг 29
Скопируйте камеру, которую рисовали на самом корпусе телефона, поместите ее в круг, изменив ей размер. Не волнуйтесь о разрешении, все равно эта иконка будет очень маленькой.
Шаг 30
Соберите все иконки на панели, изменив их размеры.
Шаг 31
Создайте иконку сигнала, нарисовав 5 прямоугольников, стоящих на одном уровне, при этом каждый должен быть короче предыдущего.
Шаг 32
При помощи инструмента Перо (Pen tool) нарисуйте батарею, залейте ее зеленым цветов. Скопируйте, сделайте больше и заполните копию серым. Этим двум слоям добавьте черную обводку в 3 пикселя.
Шаг 33
Поместите иконку сигнала и батареи рядом на верхней панели, изменив размер, если это необходимо.
Шаг 34
Чтоб добавить больше деталей, добавьте слою "Корпус" ("Body") такие стили слоя:
Обводка (Stroke): 8 пикселей, непрозрачность (opacity) 50%.
Внутренняя тень (Inner Shadow): Смещение (Distance) 0, Стягивание (Choke) 0, Размер (Size) 43, непрозрачность (opacity) 10%.
Тень (Drop Shadow): Размер (Size) 54, Смещение (Distance) 0, Стягивание (Choke) 0.
Шаг 35
Добавьте градиентный фон, немного текста, отражение (сгруппируйте все слои, скопируйте группу, слейте все слои в этой группе в один, отразите по вертикали, уменьшите непрозрачность, сотрите лишнее мягким ластиком). Все, мы закончили!
Читайте также: