Как нарисовать интерфейс в фотошопе
Я люблю Photoshop. Программа прошла через много ступеней эволюции, с каждой версией радует меня всё больше и это моя основная рабочая программа, запущенная на компьютере 99% времени. Единственное, что чуток печалит — это отсутствие гибкости в интерфейсе. Всё-таки большинство современных программ для редактирования и создания графики предлагают пользователю модульный интерфейс — любые кнопочки и слайдеры можно вытащить в любую часть экрана. Zbrush и Modo являются хорошим примером такой модульности.
Как оказалось, Adobe Labs уже полтора года предлагает любителям оптимизаций своё решение для модульного изменения интерфейса и, к своему стыду, я узнал о нём совсем недавно. Так что я заранее прошу прощения, если я напишу об очевидной штуке, которую многие уже давно используют, но я действительно пропустил её и она меня впечатлила.
А в качестве дополнения, я расскажу о… цветовом круге для Adobe Photoshop (да, при этой фразе все иллюстраторы/художники/текстурщики должны уронить челюсть), так как именно благодаря ему я и узнал об Adobe Configurator.
Adobe Configurator — это AIR-утилита для создания кастомных панелей для Photoshop CS4. Фотошоп пока единственная программа в линейке, поддерживаемая Конфигуратором, но Adobe Labs обещают потом подкрутить и остальной Creative Suit. К слову, создавать extensions можно было и раньше, но для этого требовался какой-никакой уровень программирования на Flex (Flex или нет я утверждать не берусь, потому что слова ява, флекс и эйр меня страшно пугают и я никогда не влезал в это мракобесие, пожалуйста поправьте, если я не прав).
В эти папели можно помещать любые инструменты, пункты меню, ява-скрипты, ссылки на макросы, картинки, текст, даже .swf и видео. Панели делаются простым Drag&Drop.
При запуске утилита нам всё объясняет крупным кеглем)
Да-да, всё именно так: пять действий и панель готова.
И нажав New panel можно приступить к созданию панели. Задав для неё имя и размер можно начать перетаскивать необходимые инструменты из 4-х меню слева:
Tools с инструментами
Commands с коммандами меню
Action со скриптами
и Widgets cо всякой дополнительной медия-ерундой. Так же можно использовать поиск по всем инструментам и пунктам меню.
Все кнопки и виджеты свободно масштабируются.
Например, я захотел сделать себе панель для нескольких функций, которыми я часто пользуюсь, но они находятся довольно глубоко в меню:
После нажатия Export программа автоматически выбирает директорию с панелями Photoshop и сохраняет туда необходимые файлы.
Теперь запускаю Ps, в меню Window > Extensions появилась моя NeatPanel.
Она обладает такими же свойствами, как и все другие панели Photoshop, то есть может свернуться в маленький прямоугольник
Функции панели — уменьшение/увеличение выделения и зеркальное отражение по вертикали и горизонтали слоя/выделения и всего документа. Панель можно было бы уменьшить ещё раза в полтора за счёт надписей (я же делаю её для себя и знаю, какая кнопка для чего) и она благополучно может висеть в углу экрана, не занимая полезное место.
Ещё пример использования. Вот так ещё несколько дней назад выглядела моя Toolbar с презетами кистей:
никакой сортировки в этом тулбаре нет.
Сейчас это несколько панелей с разными предназначениями, вызываемые по F-кнопкам. Я знаю, что на F1 у меня основные кисти, на F2 — текстуры и на F3 — блендеры.
и так далее. Я конечно же не буду утверждать, что это удобно для всех, но мне потраченные 20 минут на создание этих панелей позволяют не рыться среди десятка наименований кистей, а работать с ними упорядочено, плюс в такую панель можно добавить дополнительную информацию или даже пример работы кисти, функции или фильтра путём вставки в панель виджета с картинкой (как тот красный квадратик рядом с моей любимой кисточкой).
А теперь про цветовой круг. С выбором цвета в Photoshop туговато: если не вводить точные значения, а выбирать цвет на глаз, то надо выбирать или из ограниченной в размере и точности панели Swatches или вызывать Color Picker.
Для Swatches умельцы даже делали наборы цветов, превращающие панель в подобие цветового круга и Hue-пикера
и недавно я наткнулся на две кастомные панели для ФШ, призваные помочь любителям лихо менять цвет. Я так полагаю обе они сделаны на Flex.
Первая — Painters Wheel от Len White.
Очень простая на вид, кроме аляповатого круга на панели больше нет никакой информации, работает только в CS4, не масштабируется.
И вторая — Magic Picker от Anastasiy Safari.
Куда больше настрек, работает как под CS4, так и под CS3, возможность вывода цвета в RGB/HSB слайдерах, возможность вывода в hue/sat/vol-пикерах, а так же видеть точные цветовые значения в том же окне, возможность выбора foreground/background-цветов, а так же залинковать их вместе, чтобы значения обоих цветов менялись релятивно. Плюс она свободно масштабируется. Я остановил свой выбор именно на ней, несмотря на цену в $7 против бесплатной Painters Wheel — деньги очень небольшие, функционал того стоит, плюс её разработчик оказался приятен в общении (и кстати он русскоговорящий) и открыт для внесения новых возможностей.
Надеюсь кто-нибудь узнает что-нибудь новое и полезное из всего этого)
И в конце несколько ссылок.
Working With Photoshop Scripts, Learn How to Script Adobe Photoshop, Manipulate an Image with Scripting — введение в яваскрипты для Photoshop;
Trevor Morris Scripts — библиотека яваскриптов.
Это отношения к панелям не имеет, однако на этих сайтах есть примеры и простых скриптов, которые можно приспособить под свои нужды. Например, я наконец сменил набор макросов, которые использовал для отображения/скрытия нескольких слоёв и каналов, на их яваскрипт-аналог, уменьшив количество используемых макросов с шести до двух :)
И в этом правда интересно копаться!
Разработка дизайна пользовательских интерфейсов для веба довольно популярная тема в последние несколько лет. Сегодня мы рассмотрим как раз один из таких уроков, а именно, мы научимся создавать кнопки пользовательского интерфейса для веб в Фотошоп.
По мере развития веб-технологий, сайты и веб-приложения становятся все более адаптивными, предоставляя нам все больше различных путей и методов для взаимодействия с конечными пользователями.
Было решено создать урок именно по разработке дизайна кнопок, так как именно эту часть дизайна можно считать наиболее сложной и трудоемкой при проектировании пользовательских интерфейсов.
Далее вы можете увидеть конечный результат нашей работы:
А теперь давайте начнем непосредственно наш урок:
Шаг 1
Для начала создадим новый документ (Ctrl+N) с размерами 450 пикселей в ширину и 255 пикселей в высоту:
Шаг 2
Шаг 3
Далее выбираем инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (M)), выставляем радиус размером 2 пикселя и рисуем фигуру, как показано на скриншоте. Назовите этот слой "Кнопка в нормальном состоянии" ("Normal Button"). Так же было бы неплохо, если бы вы поместили данный слой в отдельную группу.
Шаг 4
Шаг 5
В данном шаге нам нужно применить параметр Тень (drop shadow). Характеристики у него должны быть следующие:
Шаг 6
Теперь выставим установки для Внутренней тени (Inner Shadow):
Шаг 7
Должно получиться что-то наподобие вот этого на скриншоте ниже. Заметили светлую линию в верхней части? Это эффект от применения Внутренней тени (Inner Shadow).
Шаг 8
Шаг 9
Стоя на слое с текстом "Normal", кликните правой кнопкой мыши и выберите Параметры наложения (Blending Options). Затем примените Тень (Drop Shadow) со следующими характеристиками:
Так будет выглядеть конечный результат для нашей "нормальной" кнопки:
Шаг 10
Теперь у нас стоит задача разработать дизайн кнопки в фокусе (Focused State). Хотя такую кнопку сделать проще, чем ту, что мы делали в предыдущих шагах.
Выбираем инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (M)), выставляем радиус размером 2 пикселя. Создаем новую фигуру, аналогичную предыдущей, и располагаем ее рядом с ней. Назовите вновь созданный слой "Кнопка в фокусе" (Focused button).
Шаг 11
Шаг 12
Теперь применяем параметр Тень (drop shadow). Характеристики у него должны быть следующие:
Шаг 13
Теперь включим параметр Внутренняя тень (Inner Shadow):
- Режим наложения (Blend mode): нормальный (Normal)
- Цвет переднего плана (Foreground color): 8DD1FC
- Непрозрачность (Opacity): 100%
- Угол (angle): 90 градусов
- Галочка в чекбоксе Глобальное освещение (Use Global Light) должна быть снята
- Расстояние (Distance): 1
- Стягивание (Choke): 0
- Размер (Size): 0
Шаг 14
Далее включаем параметр Внешнее свечение (Outer Glow):
Шаг 15
В данном шаге нам нужно добавить Обводку (Stroke):
Здесь мы можем видеть, как будет выглядеть кнопка в фокусе. Теперь необходимо добавить текст.
Шаг 16
Напечатаем на ней слово "Focused".
После того как напечатали слово, добавим ему определенные детали.
Стоя на слое с текстом "Focused", кликните правой кнопкой мыши и выберите Параметры наложения (Blending Options). Затем примените параметр Тень (Drop Shadow) со следующими характеристиками:
Вот что у нас получилось с кнопкой в состоянии фокуса, выглядит довольно аккуратно, не так ли?
Теперь нам необходимо создать третью кнопку, уже в нажатом состоянии, она будет называться ("Pressed" или "Clicked"). Но, что касается этой части работы - я хочу, чтобы вы сделали ее самостоятельно, опираясь на работу, проделанную в предыдущих шагах. Ведь если я сделаю всю работу за вас, вы ничему не научитесь, не так ли? На самом деле, это достаточно просто и я даже дам вам подсказку. Просто скопируйте вашу кнопку в нормальном состоянии ("Normal button") и в параметрах наложения (blending options) вам нужно будет удалить одно свойство, изменить и заменить параметры для двух других. При этом градиент должен остаться точно таким же.
Вы догадались, о чем идет речь? Посмотрите внимательно и вспомните шаги, которые мы сделали при работе над обычной кнопкой. Я уже дал вам подсказку. Желаю удачи в поисках правильного решения.
Здесь вы видите полный набор элементов для пользовательского веб-интерфейса. Надеюсь, вам понравился данный урок.
Благодаря материальному дизайну − визуальному языку, разработанному 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.
В этой статье я покажу, как создать простой и понятный і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 :
На презентации Adobe CS6 в Самаре я делал доклад о том как мы в компании Parcsis используем Adobe Illustrator для создания веб- и мобильных интерфейсов. Хочу поделиться этим докладом с вами в виде слайдов с комментариями.
Когда показываешь свои работы, зачастую начинающие дизайнеры задают вопрос «А в чем это нарисовано?» Опытные дизайнеры спрашивают такое реже, так как понимают, что одно и тоже можно сделать с помощью разных графических редакторов. Тем не менее, расскажу свою историю…
Где-то в 99 году мне пришло осознание, что я дизайнер и, вероятно, некоторое время буду что-то рисовать. Тогда как раз вышел фотошоп пятой версии, где были такие поражающие воображения мощнейшие фичи для веб-дизана:
— Текстовые слои. Подумать только — текст в виде текста, а не растра!
— Многоуровневое Undo! Раньше можно было отменить только последнее действие.
Потом вышел еще более мощный фотошоп версии 5.5, где появился Save for Web — очень важная штука для веб-дизайна…
Шли годы, версии фотошопа сменяли друг друга. Но я рисовал веб-сайты и интерфейсы в фотошопе. Да, появились некоторые удобности, даже векторные объекты. Но основа была в растре, а главный инструмент — слои.
Но около года назад случилось так, что вся наша команда дизайнеров, которые занимаются интерфейсами, перешла на Adobe Illustrator. Будучи консервативным человеком, сначала я сильно страдал. Все было очень неудобно и непривычно. Но потом постепенно до меня начало доходить, что кое-какие преимущества есть.
На самом деле, я немного недоговариваю. Уже довольно давно, мы использовали Иллюстратор для того, чтобы рисовать иконки. Поэтому большую часть стресса я уже пережил, когда переучивался рисовать иконки в векторе.
Зачем рисовать веб-сайты и интерфейсы в векторном редакторе? Что мы за это получим?
Около двух лет назад на массовом рынке появились экраны повышенной плотности, так называемые Retina Display. Суть в том, что их разрешение, если считать в точках на дюйм, приближается к полиграфическому качествую — около 300 точек на дюйм.
При таком разрешении пиксели становятся чем-то не очень важным для экранной графики, их просто не видно.
В ближайшее время должны появиться настольные компьютеры или мониторы с высоким разрешением. Ваш дизайн нужно будет как-то оптимизировать, чтобы отображать на таких экранах. Ведь, если взять, например, iMac 27 и увеличить его разрешение вдвое, то получится почти 15 мегапикселей. Даже боюсь представить сколько будет занимать графический файл, который полностью заполнит экран.
Выход один — в интерфейсах надо переходить на вектор и оставить пиксели только для фотографии.
Что же изменится в вашей жизни и карьере дизайнера, если вы начнете делать веб- и интерфейсы в векторном редакторе?
Начнем с минусов…
— Во-первых, вы будете страдать. Многое будет непривычно и вообще придется думать иначе.
— Вы не станете более лучшим дизайнером. Качество ваших работ никак не вырастет. Вы будете делать все тоже самое, но немного иначе. Первое время.
— Вам будет очень не хватать некоторых растровых возможностей. Придется подумать, чтобы сделать некоторые элементарные для фотошопа вещи.
Например, лично до меня дошло, что современные интерфейсы не рисуют. Их верстают. Идеология «панели управления» отходит. Интерфейс становится больше похож на журнальную верстку. Большое значение приобретают такие вещи как типографика и интерактивность. А какие-то pixel-perfect штуки уже не так много значат.
Одно из самых важных и приятных вещей, которые появились с переходом на Иллюстратор, это конечно же арт-борды. Дико удобная штука.
Раньше в фотошопе была идеология: «один файл — одна страница». Но современные интерфейсы и веб-сайты очень редко состоят из одного экрана.
Иллюстратор позволяет иметь много экранов в одном файле. Это очень удобно. В папке проекта на порядок меньше файлов. Все файлы всегда под рукой. Ну нужно открывать новые файлы. Плюс, экономится память, что немаловажно.
Новые артборды можно создавать по ходу работы или сделать сразу несколько зон при создании документа. Как видите, иллюстратор стал ориентирован не только полиграфию, но и содержит пресеты для экранной графики.
Вот как это выглядит. Кстати, есть довольно удобная фича: если один и тот же элемент есть на всех экранах, то его можно нарисовать только в одном месте, а потом скопировать и воспользоваться функцией «вставить во все артборды»
Вот пример одного из интерфейсов, которые мы разрабатываем. Все экраны веб-интерфейса в одном файле. Причем, этот файл занимает не так много места — удобно потом передавать его потом разработчикам.
Изначально родной формат файлов иллюстратора это AI. Но мы храним все макеты в формате PDF.
— Сохраняются все данные. Ничего не теряется и нормально отображается, если при сохранении не забывать нажимать галочку — «сохранить возможность редактировать в Иллюстраторе»
— Главное удобство в том, что PDF можно открыть на любой платформе с помощью бесплатных приложений. В мак ос есть стандартное приложение Preview или можно воспользоваться Acrobat Reader. Да, возможно не все эффекты отобразятся корректно, но в целом картина ясна.
Еще момент Finder на маке отображает делает иконку файла в виде такой брошюры. И из-за отогнутого листочка виден второй артборд. Когда я увидел это ми-ми-ми, то чуть не прослезился от умиления.
Сетка важна для любого макета. В иллюстраторе есть свои особенности.
Мы не испольуем направляющие, которые Guides, а рисуем прямо по сетке, которая Grid. В основном используем сетку с размером шага 10 пикселей. Для мобильных приложений берем сетку помельче — 8х8. Мы размещаем объекты так, чтобы они все стояли на сетке.
В настройках просто выбираем размер блока в 100 пикселей и включаем 10 делений. В итоге и получается квадратики 10х10. Для сетки 8х8 мы используем параметры 64 и 8 делений блока.
Чтобы полностью насладиться удобством иллюстратора, нужно включить режим «прилипание к сетке». В таком случае при создании или перемещении объекта он будет стремиться «встать на сетку». Это залог аккуратного макета.
Еще один мощнейший инструмент Иллюстратора — это Appearance. В фотошопе есть похожая штука — эффекты слоя. Но аппиранс намного мощнее. К каждому векторному объекту можно применять векторные и растровые эффекты в любой последовательности, которые в реальном времени пересчитываются, если вы меняете объект.
Давайте посмотрим на эту чудесную синюю стрелочку. Это один векторный объект, ну кроме текста. Справа табличка аппиренс для этого объекта. По сути тут очень похоже на фотошоп, так как у объекта есть слои.
Самый нижний слой это тень, которая не тень вовсе, а блик. Выше лежит голубая градиентная заливка. К которой применен эффект «иннер шадоу», чтобы было понятно, что объект как бы вдавлен. Далее лежит заливка в виде черного полосатого паттерна с 5-процентной прозрачностью.
А вот кнопочка, которая сделана особенно хитро, чтобы ровнять её по сетке. Снизу эффект тени, который делает блик. Далее подряд идут подряд три градиентных заливки, к которым применены эффекты Offset Path, которые делают меньше объект на заданное число пикселей. Ко всему этому применен эффект «Round Corners», чтобы закруглить края. И на самом верху эффект который уменьшает кнопку так, чтобы она вставала на сетку.
Чтобы сделать кнопку из другого объекта, нужно просто перетащить на него этот аппиренс или ткнуть в кнопку инструментом «Пипетка».
Как вы заметили, основной вид заливок в интерфейсных элементах — это градиенты. Пару версий назад в иллюстраторе переделали механизм работы с градиентами и сделали его очень удобным. Теперь там наконец-то появилась возможность работы с прозрачностью. И вот эти быстрые столбики, которые появляются поверх объекта.
Но не будем забывать, что пиксели пока никуда не пропали. И рано или поздно макет будет растрирован и отображен на экране.
Иллюстратор знает не только физические метры, сантиметры и дюймы, но и пиксели. Перед тем как работать с экранной графикой, укажите в настройках, что вы хотите работать с пикселями.
Первое время у вас будет проблема с тем, что границы объектов размываются, так как включается анти-алиасинг. Чтобы этого не происходило, нужно чтобы вертикальные и горизонтальные линии попадали в пиксели. Вам нужно следить, чтобы координаты и размеры объектов были целыми значениями.
В иллюстраторе есть еще одна очень удобная штука для автоматического выравнивания. Вам не нужно самому следить за координатами. Особенно это удобно для сложных объектов, которые вы хотите чтобы выглядели четко. Фича крутая, но мы ей не пользуемся. Так как она глючит! Когда в группе есть объект с включенным «align to pixel grid», то эта группа начинает неправильно прилипать к сетке и координаты плывут.
У иллюстратора есть и слабые стороны. Совсем отказаться от растрового редактора у вас не получится.
Например, вам не обойтись без фотошопа для работы с (сюрприз-сюрприз) фото! Если в макетах есть фотографии, то желательно не резайзить их в иллюстраторе, а вставлять сразу «размер в размер».
А вот тут неожиданный поворот. Но изначально векторные иконки желательно сначала растеризовать, а потом уже вставить в таком виде в фотошоп.
Еще пару слов про сильные стороны иллюстратора, которыми я не пользуюсь, но возможно начну.
После того, как макет нарисован, его нужно как-то сверстать в HTML или вставить графику в мобильное приложение. Мы отдаем разработчикам векторные PDF файлы, которые уже сами режут картинки тоже в иллюстраторе.
У меня это до сих пор в голове не укладывается. HTML-верстальщики используют векторный редактор.
Допустим, в макетах у вас есть один и тот же элемент. Например, кнопка. Вы можете сделать из неё символ и использовать. Зачем так делать? Потому что, если вы исправите эту кнопку, то она исправится и в других местах.
Удобно. Но пока я использую это не так часто. Так как абсолютно одинаковые элементы встречаются не так часто. Вероятно, скоро для этого что-то придумают.
Еще одна штука, которую пока используем мало, но продолжая популяризацию идеологии журнальной верстки, уверен, что она пригодится. Это такие же стили текста, как в ворде. В макете вы размечаете текст не параметрами, а логикой его использования. Потом, вам, например, захочется изменить все стили заголовков. Нужно будет поменять только в одном месте.
За сим раскла… Спасибо, что читали. Если есть вопросы или вы рисуете иначе — пишите в комменты.
Читайте также: