Верхняя панель телефона для фотошопа
В первых двух уроках из серии на работе с текстом в Photoshop мы узнали два метода ввода текста — строкой и областью.
Из этих уроков мы узнали, что, при выбранном инструменте «Текст» (Type Tool) в панели параметров, расположенной горизонтально в верхней части окна программы, имеется доступ к некоторым инструментам редактирования текста — выбор шрифта, цвета, размера и т.д.
Но, конечно же, Photoshop имеет не только эти инструменты редактирования, но и более продвинутые, а расположены эти инструменты в панелях «Символ» (Character) и «Абзац» (Paragraph).
В этом уроке мы рассмотрим инструменты панели «Символ» (Character), а в следующем — инструменты панели «Абзац» (Paragraph).
Смотреть другие материалы по инструменту «Текст»:
Доступ к панели «Символ»
Как и многие действия в Photoshop, панель «Символ» можно открыть несколькими способами.
Первый — пройти по вкладке главного меню Окно —> Символ (Window —> Character). Если вдруг слева от названия панели стоит галочка, это означает, что панель уже открыта где-то на экране.
Второй способ — открыть панель символов из панели параметров, для этого надо нажать на соответствующий значок:
В любом случае, открывается панель символов, а также, находящаяся в одной группе с ней панель «Абзац». Мы можем переключаться между двумя панелями, кликая по их вкладкам имен в верхней части группы. Панель «символ» является выбранной по умолчанию:
В панели имеются текстовые настройки, доступные только из неё.
Выбор типа, стиля, размера и цвета шрифта
Эти четыре опции имеются панели параметров и дублируются на панели символов. Не имеет значения, на какой из панелей Вы измените эти опции, значения будут продублированы:
Метод сглаживания (Anti-aliasing) для букв
Сглаживание букв (Anti-aliasing) — технология, применяемая для улучшения визуализации букв текста с целью сгладить резкие края и убрать «зубцы», возникающие на краях букв.
Эта опция также дублирована на двух панелях:
На данный момент в Photoshop существуют семь методов сглаживания текста, включая режим «без сглаживания» (none), на рисунке я привёл русскоязычный и англоязычный интерфейсы Photoshop:
Каждый из методов сглаживания производит собственный эффект на буквы, и к каждому отдельному случаю метод надо подбирать опытным путём, но это в идеале, а на практике в основном я пользуюсь методом сглаживания, установленным в Photoshop по умолчанию — «Резкое» (Sharp).
На рисунке я привёл пример двух видов сглаживания текста Photoshop:
Межстрочный интервал (интерлиньяж, Leading)
Этот параметр текста доступен только из панели Символ, как понятно из названия, он задаёт вертикально расстояние между строк. По умолчанию параметр установлен на «Авто»:
В основном, использование Межстрочного интервала в значение Auto даёт неплохие результаты, но вы можете задать Межстрочный интервал самостоятельно перед вводом текста, либо после ввода, выделив весь текст. Вы можете выбрать одно из предустановленных значений ( от 6 pt до 72 pt), либо ввести собственное одним из фотошоповских методов ввода параметров, т.е. изменение перетаскиванием мыши или прокруткой колёсика или вводом значения в окно с клавиатуры.
Трекинг (Межбуквенный интервал, Tracking)
Параметр «Трекинг» также доступен только из панели Character, он управляет расстоянием межу буквами или символами. Он расположен непосредственно под Межстрочным интервалом и по умолчанию установлен в 0:
Чтобы настроить значение межбуквенного интервала, вы можете нажать на треугольник справа от поля ввода и выбрать из списка заданных значений, можно ввести значение с клавиатуры, или изменить параметр с помощью перетаскивания курсора или вращения колёсика мыши. Введённое отрицательное значение Трекинга будет сдвигать буквы или символы ближе друг к другу, в то время как положительное значение будет отодвигать их друг от друга.
Чтобы изменить Трекинг, следует выделить нужный участок текста и ввести значение в поле ввода. На примере я увеличил трекинг в слове «участок», не затрагивая остальной текст:
Кернинг (Kerning)
Этот параметр также доступен только из панели Символ и расположен слева от Трекинга. По умолчанию он установлен на значение «Метрический» (Metrics), что это значит, я объясню немного ниже. Кернинг регулирует промежуток между двумя конкретными буквами или символами:
Кернинг часто путают с Трекингом, потому что они кажутся похожими, но они на самом деле это совершенно разные вещи. В то время как Трекинг задаёт диапазон между всеми символами, Кернинг регулирует расстояние между двумя конкретными символами. Можно провести аналогию, если Трекинг — глобальная настройка, то Кернинг — «местная».
Для того, чтобы опция стала доступной, следует установить курсор в тексте между двумя нужными буквами. На примере я задал отрицательное значение Кернинга:
Как я уже говорил, по умолчанию опция Кернинг установлен на «Метрический», что означает, что Photoshop использует межбуквенное расстояние, заданное дизайном шрифта. Это часто вариант в большинстве случаев даёт лучшие результаты, хотя и зависит от свойств используемого шрифта. Если вы нажмете на маленький треугольник справа от поля ввода значения Кернинга, вы увидите, что непосредственно под значением «Метрический» находится значение «Оптический» (Optical). При этом варианте Photoshop самостоятельно устанавливает межбуквенный интервал, основываясь на форме букв. Опять таки, зависит от самого шрифта, какой из этих двух вариантов, «Метрический» или «Оптический», даст лучший результат.
Изменить значение Кернинга можно, как и в других опциях, с клавиатуры или мышью.
Масштаб по вертикали и горизонтали (Vertical и Horizontal Scale)
Эти две опции расположены непосредственно под Кернингом и Трекингом.
Их назначение понятно из названия, опции масштабируют выбранный текст вертикально или горизонтально.
Оба этих опции по умолчанию установлены на 100%
Смещение базовой линии (Baseline Shift)
Ниже расположена опция Смещение базовой линии. Базовый сдвиг позволяет переместить выбранные участки текста или отдельные буквы выше или ниже базовой линии шрифта. По умолчанию значение опции установлено в 0 пт. Положительные значения сместят выделенный текст над базовой линией, а отрицательные значения опустят выделенное ниже базовой линии. Опция не имеет предустановленных значений, так что значение необходимо вводить вручную:
Дополнительные текстовые опции
Ниже находятся кнопки дополнительных опций.
Слева направо: псевдополужирный, псевдонаклонный, все прописные, капители (уменьшенные прописные), надиндекс, подиндекс, подчёркнутые, зачёркнутые. На примере я показал действие опций в тексте начиная со второй строки:
Выбор языка
В левом нижнем углу расположена опция «Выбор языка», призванная проверять правописание и расстановку переносов, но, на данный момент, для русского, да и впрочем, для английского, она малоэффективна, поэтому опцию не используется.
Владелец данного сайта. Графический дизайнер, специалист по Фотошопу с опытом 10+ лет. Также веду канал о графическом дизайне на Ютуб и развиваю тематическое сообщество во ВКонтакте. Связаться со мной можно через комментарии, форму обратной связи или по электронной почте [email protected]
user17882893
Макет экрана смартфона
Рука, держащая смартфон, подключается к динамику bluetooth
Набор макетов для цифровых устройств
Набор макетов для цифровых устройств
Набор макетов для цифровых устройств
Изолированный телефон в сером фоне
Иллюстрация концепции домашнего экрана
Экраны приложений медитации
Иллюстрация концепции мобильного телефона
Шаблон фоторамки instagram на телефоне
Молодая женщина, держащая макет смартфона
Instagram на макете мобильного телефона из розового золота
Макет телефона с руками в руках
Красно-золотой макет экрана телефона с шаблоном презентации мобильного приложения
Макет интерфейса приложения на дисплее телефона
Макет интерфейса приложения на дисплее телефона
Макет интерфейса на дисплее телефона
Премиум шаблон макета экрана мобильного телефона
Закройте экран мобильного телефона
Смартфон с иконками в социальных сетях
Телефон с маломощным аккумулятором
Мобильный телефон с красочным фоном
Рекламный макет экрана смартфона в формате psd
Мокап смартфона из глины
Глиняный смартфон для макета экрана приложений
Реалистичный макет смартфона. изолированные на прозрачном фоне. 3d визуализация
Rednate
Черный макет смартфона для вашего дизайна
Плавающий макет новых смартфонов
Смартфон пустой экран, макет телефона.
Макет мобильного телефона с редактируемым дизайном и изменяемыми цветами
Реалистичный смартфон нового поколения ocean blue
Женщина, держащая устройство крупным планом
Довольный красивый и веселый улыбающийся горячий парень в сером свитере продвигает приложение, держа смартфон в горизонтальном положении, уверенно стоит в непринужденной позе, советует загрузить приложение, попробовать новую игру или посетить сайт
В этом уроке мы узнаем, как настроить, управлять и оптимально организовать важнейший элемент интерфейса Photoshop CS6 — панели. Кстати, «панели» раньше назывались «палитрами». Большая часть работы, которую мы выполняем в Photoshop, заключается в применении элементов управления, расположенных на панелях, например, я уже и представить себе не могу, как можно работать с изображениями, не используя панель слоёв. Только используя эту панель, мы можем добавлять слой-маски, стили слоя, корректирующие слои, режимы наложения и многое другое.
Сброс рабочей среды до настроек по умолчанию
Прежде чем мы начнем рассматривать управление панелями, давайте сначала сбросим их отображение до дефолтного (по умолчанию).
Photoshop поставляется с несколькими заранее предустановленными рабочими средами (рабочие среды называют ещё рабочими пространствами (Workspace), о создании и сохранении рабочих сред рассказывается здесь), и мы можем выбрать одно из этих рабочих пространств, и даже создать и сохранить наше собственное рабочее пространство. В правом верхнем углу интерфейса Photoshop находится кнопка выбора. По умолчанию эта кнопка должна быть установлена на значение «Основная рабочая среда» (Essentials). Если у Вас значение отличается от этого, кликните по кнопке и выберите из выпадающего списка выберите это значение:
Но, повторяюсь, по умолчанию в Photoshop установлена именно «Основная рабочая среда» (Essentials), поэтому, если Вы самостоятельно не меняли эту настройку, то значение на кнопке изначально должно быть такое.
Колонка панелей
Изначально, панели в Photoshop расположены в виде столбца на правой стороне окна программы. По умолчанию, имеются две колонки панелей — основная колонка, расположенная справа и вторичная, это узкий столбец, находящийся слева от основной колонки:
Давайте внимательнее посмотрим на основную (правую) колонку панелей. По умолчанию, Photoshop открывает три панели — Цвет (Color) в верхней части, Коррекция (Adjustments) в середине и нижняя — Слои (Layers). Каждая панель имеет своё уникальное имя, отображаемое в её верхнем левом углу:
Группы панелей
Вы, наверное, заметили, что в данный момент, хотя и видны только три панели, на самом деле в колонке их имеется гораздо больше, чем три. Мы кроме этих трёх, мы видим другие вкладки с названиями. Например, вверху, рядом со вкладкой «Цвет», имеется вкладка «Образцы» (Swatches), расположенная несколько справа от нее. У панели «Коррекция» справа находится вкладка «Стили», а рядом с вкладкой «Слои» имеются две другие — «Каналы» (Channels) и «Контуры» (Paths). Как мы видим, панели объединены в группы, и сделано это для того, чтобы большое количество панелей-палитр не загромождало экран и все они могли бы вписаться в единое пространство общей колонки.
Пользоваться этим очень просто. Для того, чтобы открыть скрытую в группе панель, надо всего лишь нажать на её вкладку-заголовок:
Изменение порядка расположения панелей в группе
Обратите внимание, что панель «Цвет» в группе отображена первой, а «Образцы» — второй. Нет никаких особых причин именно для такого расположения панелей, и мы можем легко изменить этот порядок. Все, что нам нужно сделать, это нажать на вкладку-заголовок панели в верхней части группы, затем удерживая левую клавишу мыши зажатой, перетащить вкладку влево или вправо. На данном примере я нажал на вкладку «Цвет» и перетащил её вправо, затем, как только панели поменялись местами, отпустил клавишу мыши. Первой отображается теперь «Образцы»:
Перемещение панелей между группами
Что, если, вместо того чтобы просто изменить порядок расположения вкладок в одной отдельно взятой группе, я хочу переместить какую-либо панель из одной группы в другую? Например, что, если я хочу переместить панель «Стилей» в группу, содержащую «Цвета» и «Образцы»? Для этого, следует просто нажать на вкладку «Стилей» и, удерживая левую клавишу мыши зажатой, перетащить вкладку вверх до тех пор, пока другая группа не выделится синей рамкой, а сама панель стилей не станет практически прозрачной.
Синяя рамка даёт мне знать о том, что можно отпустить клавишу. После того, как мы отпустим клавишу, «Стили» появятся в этой группе. Обратите внимание, что панель «Коррекция» теперь находится одна в своей собственной группе, но группа всё равно считается группой, хотя и имеет всего одну панель:
Создание новой группы панелей
Как мы только что отметили, панель «Коррекция» на данный момент находится в своей собственной группе панелей. При желании, мы можем образовать новую группу из любой панели. Скажем, я хочу разместить панель «Цвет», на данный момент находящуюся в одной группе со «Стилями» и «Образцами», в своей собственной независимой группе, кроме того, я хочу, чтобы эта новая группа размещалась над группой с «Коррекцией».
Для этого я нажму на вкладку «Цвет» и перетащу панель вниз до вкладки «Коррекция», пока не синяя полоса подсветки оказывается между двух существующих панелей.
Подчёркиваю, что на этот раз нужно, чтобы синим выделилась именно граница:
После того, как граница выделилась синим, я отпускаю клавишу мыши:
Минимизация группы панелей
Мы можем временно уменьшить группу, чтобы освободить больше места для панелей в других группах. Для этого, дважды щелкните на любой вкладке в группе. В то время как группа сведено к минимуму, все, что вы увидите, это его строка вкладок в верхней части. Здесь я с помощью двойного щелчка уменьшил расположенную вверху группу с «Образцами» и «Стилями». Теперь отображаются только вкладки-заголовки:
Для придания минимализированной группе нормального размера, просто дважды кликните во любой её вкладке.
Закрытие панели и группы
Если вам больше не нужна одна панель в группе, и вы её полностью закрыть, кликните по вкладке в верхней части группы, чтобы сделать её активной, а затем нажмите на иконку-меню в верхнем правом углу панели. Здесь я нажал иконку-меню панели «Цвет» и кликаю по пункту раскрывающегося списка «Закрыть» (Close):
Это действие закрывает панель «Цвет», но оставляет открытыми все другие панели в группе:
Если же вы хотите всю группу панелей , кликните по той же иконке меню в верхнем правом углу, но на этот раз из раскрывающегося списка выберите не «Закрыть» (Close), а пункт «Закрыть группу вкладок» (Close Tab Group). Это действие удалит всю группу:
Продолжение урока находится на этой странице.
Владелец данного сайта. Графический дизайнер, специалист по Фотошопу с опытом 10+ лет. Также веду канал о графическом дизайне на Ютуб и развиваю тематическое сообщество во ВКонтакте. Связаться со мной можно через комментарии, форму обратной связи или по электронной почте [email protected]
В данном материале я расскажу, как самостоятельно, с нуля, т.е. не используя какие-либо сторонние изображения для основы коллажа, создать фотореалистичный макет 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.
В этой статье я покажу, как создать простой и понятный іOS-интерфейс вымышленного приложения для рекомендации к прочтению избранных материалов.
Мы начнем с нуля, и я опишу весь процесс создания интерфейса.
Программное обеспечение: Photoshop CS3 и выше.
- Бесплатный шрифт Source Sans Pro ;
- Бесплатный шрифт Playfair Display ;
- Бесплатная иконка звездочки ;
- Бесплатная иконка пользователя ;
- Бесплатная иконка облака ;
- Бесплатный PSD-файл iOS 8 GUI (iPhone 6) ;
- Бесплатный макет iPhone 6 .
Шаг 1
Давайте создадим в Photoshop новый документ. Нажмите CMD / CTRL + N и установите ширину 750 пикселей и высоту 1334 пикселей - это разрешение iPhone 6 :
Шаг 2
Теперь нам нужно установить вертикальные направляющие, чтобы структура интерфейса была ровной. Перейдите в Просмотр > Новая направляющая и задайте следующие значения для вертикальных направляющих: 40 пикселей, 250 пикселей, 375 пикселей, 500 пикселей и 710 пикселей:
Шаг 3
Теперь создайте новую группу слоев ( Слой> Новый> Группа из слоев ), назовите ее “ Top Bar ”, выберите инструмент « Прямоугольник » ( U ) и нарисуйте прямоугольник с размерами 750 на 129 пикселей.
Поместите прямоугольник в самом верху документа и кликните правой кнопкой мыши на этом слое, чтобы задать « Параметры наложения », приведенные на рисунке ниже:
Шаг 4
Скачайте бесплатный PSD-файл IOS 8 GUI (iPhone 6) и перетащите из него в основной документ панель состояния из черной группы. Затем используйте ее для отображения элементов оператора связи, часов и индикатора заряда батареи.
Шаг 5
Шаг 6
Сверните группу слоев “ Top Bar ”, нажав на стрелку рядом с названием группы, и создайте новую группу ( Слой> Новый> Группа из слоев ) под названием “ Read 1 ;.
После этого выберите инструмент « Прямоугольник » ( U ) и нарисуйте прямоугольник размером 750 на 368 пикселей. Это будет базовый фон документа:
Шаг 7
Теперь выберите изображение, которое будет использоваться в качестве иллюстрации, и перетащите его в документ Photoshop .
Поместите слой изображения поверх созданного прямоугольника. Затем при активном слое добавленного изображения нажмите сочетание клавиш Ctrl+Alt+G . Это создаст « Обтравочную маску », которая скроет все, кроме содержимого внутри базового фона. В нашем случае мы увидим часть изображения, которая совпадает с границами прямоугольника:
Шаг 8
Я рекомендую заранее продумать все возможные трудности, которые могут возникнуть при загрузке вашего веб-приложения. Изображения могут не загрузиться, быть слишком яркими или темными. Поэтому нам нужно предусмотреть запасной вариант. Давайте добавим градиент от черного к прозрачному, который станет основой для заголовка документа.
Выберите инструмент « Градиент » ( G ) и задайте переход от черного к прозрачному:
После этого создайте новый слой ( Слой> Новый> Слой ) и назовите его “ Shadow ”. Создайте для него « Обтравочную маску », как мы это делали для изображения. Затем, удерживая нажатой клавишу Shift , прочертите линию перехода градиента снизу вверх и уменьшите непрозрачность слоя до 60%:
Шаг 9
Теперь добавим заголовок рекомендованных для прочтения материалов. Он должен быть достаточно большим, чтобы пользователи, которые просматривают содержимое приложения мельком, обратили на него внимание.
Выберите инструмент « Горизонтальный текст » ( T ), установите шрифт Playfair Display ( Жирный ), размер шрифта – 46 пикселей и введите заголовок статьи.
Разметите заголовок за первой вертикальной направляющей, чтобы слева осталось достаточно свободного пространства. Также рекомендую оставить немного места снизу, чтобы заголовок смотрелся аккуратно:
С помощью инструмента « Горизонтальный текст » ( T ) введите шрифтом Source Sans Pro ( Курсив, размер шрифта - 28 пикселей ), ориентировочное время прочтения материала. Затем поместите надпись справа, перед последней вертикальной направляющей:
Шаг 10
Сверните группу “ Read 1; , нажав на маленькую стрелку рядом с именем группы, и продублируйте ее два раза, нажав CMD / CTRL + J .
После этого переименуйте копии группы в “ Read 2; и “ Read 3; , а затем аналогичным образом создайте новые рекомендованные для прочтения материалы с новыми изображениями, заголовками и временем на прочтение:
Шаг 11
Теперь нужно создать меню навигации, с помощью которого пользователи смогут переходить к разным разделам приложения.
Создайте новую группу под названием " Панель навигации ". После этого откройте группу " Верхняя панель " и найдите в ней слой прямоугольника. Продублируйте его, нажав CMD / CTRL + J , и переместите копию в только что созданную группу.
После этого нажмите CMD / CTRL + T и измените размер прямоугольника, чтобы он « влез » в пространство между последним материалом и нижней частью документа. В моем случае это размер 750 на 101пиксель:
Шаг 12
Скачайте бесплатную иконку звездочки .
Перетащите ее в документ и поместите между углом документа и второй вертикальной направляющей.
Нажмите CMD / CTRL + T , чтобы изменить размер иконки на 54 на 52 пикселя:
Шаг 13
Теперь снова выберите инструмент « Горизонтальный текст » ( T ), задайте шрифт Source Sans Pro ( Обычный ), размер – 24 пикселя и введите надпись “ Favorites ”, чтобы пользователям был более понятен смысл этой иконки.
Поместите подпись немного ниже иконки, оставив одинаковое пространство выше и ниже элемента:
Шаг 14
Повторите предыдущий шаг дважды и создайте еще две ссылки навигации с бесплатными иконками пользователя и облака . Я использовал для них подписи “ Profile ” и “ Discover ”:
Шаг 15
Теперь нам нужно выделить активный элемент. Как вы заметили, у меня иконка профиля залита цветом, в то время как остальные просто нарисованы контурами. Чтобы сделать это выделение более очевидным, давайте добавим для активного элемента более темный фон.
Уменьшите непрозрачность фигуры до 20%, и у нас получится хороший маркер активного пункта меню:
Поздравляю! Вы создали интерфейс iOS -приложения " Рекомендуемая литература ". Для того чтобы он еще лучше, вставьте интерфейс в один из этих бесплатных макетов iPhone 6 :
Читайте также: