Создайте свой собственный комплект пользовательского интерфейса с помощью Adobe Fireworks

Содержание

• 01. Создайте новый документ.
• 02. Кнопка по умолчанию
• 03. Добавить детали
• 04. Добавьте детали.
• 05. Добавьте текст
• 06. Организуйте слои.
• 07. Кнопка наведения
• 08. Активная кнопка
• 09. Теги
• 10. Детализация тегов.
• 11. Переключатель ВКЛ.
• 12. Выключатель ВКЛ, деталь 1
• 13. Выключатель ВКЛ, деталь 2
• 14. Выключатель ВКЛ, деталь 3
• 15. Выключатель.
• 16. Профильная коробка
• 17. Деталь коробки профиля
• 18. Профильная коробка деталь 2
• 19. Изображение коробки профиля
• 20. Панель выравнивания
• 21. Текст биографии окна профиля
• 22. Рейтинг звезд
• 23. Организуйте!
• 24. Добавить пагинацию
• 25. Скопируйте группу.
• 26. Скопируйте еще раз
• 27. Социальные кнопки
• 28. Сделайте финальную организацию!
• Понравилось это? Прочтите это!

Визуально привлекательный пользовательский интерфейс - чрезвычайно важная часть любого веб-сайта или приложения. Без этого пользователь, скорее всего, будет чувствовать себя отстраненным и, следовательно, не будет взаимодействовать с продуктом или веб-сайтом в максимально возможной степени.

Разработка руководства по стилю или набора пользовательского интерфейса для справки - это очень эффективный способ поддерживать единообразный подход во всем дизайне. Для дизайнера также очень полезно иметь возможность предоставить разработчику ссылку или просто использовать в качестве спрайта на более поздних этапах разработки проекта.

В этом уроке я проведу вас через шаги, необходимые для разработки полезного набора пользовательского интерфейса в Adobe Fireworks, и расскажу о некоторых основных функциях и панелях, с которыми вы столкнетесь при использовании Fireworks.

Хотя этот набор пользовательского интерфейса, вероятно, не будет идеальным для каждого отдельного дизайна, для которого он когда-либо понадобится, он покажет вам метод сборки одного, который вы можете настроить и адаптировать для будущих проектов или использования.

Поскольку вы собираетесь работать с векторным форматом в Fireworks, вам также будет очень легко адаптировать этот набор пользовательского интерфейса для любых форм и размеров для постоянного использования, в том числе для дизайнов Retina. Это одна из основных причин, по которой мне очень нравится работать в Adobe Fireworks - просто потому, что он настолько универсален.

• Загрузите файлы поддержки для этого руководства

01. Создайте новый документ.

Откройте Fireworks, выберите «Файл»> «Создать», установите высоту 280 пикселей и ширину 600 пикселей. Оставьте разрешение 72dpi. Вы должны увидеть свой новый документ. Нажмите U для инструмента Фигура; нарисуйте квадрат 600 пикселей; установите цвет на #EDEDED на панели настроек (PP).

02. Кнопка по умолчанию

Кнопки имеют ключевое значение, поэтому давайте начнем с определения нашего стиля. Нажмите U и нарисуйте прямоугольник размером 150x45 пикселей. В PP перейдите в Gradient> Linear и добавьте три цветовые точки: # 2685C9, # 268EDE и # 1F6EA7 (слева направо). Установите округлость на 35% и цвет границы на 1px # 14466B.

03. Добавить детали

Перейдите в Фильтры, нажмите +, перейдите в Шум> Добавить шум> Количество: 2, снимите флажок и нажмите ОК. Затем перейдите в раздел «Фильтры»> «Живые эффекты Photoshop», установите флажок «Внутренняя тень» и установите следующие свойства: непрозрачность: 43, расстояние: 3, угол: -90 °, размер: 5 и все остальные равные 0.

04. Добавьте детали.

Скопируйте только что нарисованный прямоугольник и вставьте его поверх другого. Измените ширину этого прямоугольника на 148x43 пикселей и переместите его на 1 пиксель влево и на 1 пиксель вниз. Удалите все цвета заливки и эффекты и добавьте только цвет границы 1px # 2B93E3.

05. Добавьте текст

Теперь нам нужно добавить текст. Используя предоставленный шрифт Arvo, введите текст и выровняйте его по центру кнопки. Установите цвет шрифта на #FFFFFF и размер на 20 пикселей. Затем скопируйте и вставьте текст, выделите текст под ним и переместите его на 1 пиксель вверх. Установите цвет на # 0D2C42.

06. Организуйте слои.

Организация файлов - важный аспект, и в процессе разработки их проще организовать. Выберите все слои для этой кнопки и нажмите Ctrl + G: это сгруппирует ваши слои. Назовите этот слой Default Button.

07. Кнопка наведения

Нам нужно создать состояние зависания. Скопируйте и вставьте созданную нами группу, переименуйте ее в Hover Button и переместите под другую кнопку. Ударить А для инструмента «Частичное выделение»; выберите прямоугольник с градиентом в нем. Измените третий цвет справа на # 1A6196.

08. Активная кнопка

Теперь нам нужна активная кнопка. Скопируйте и вставьте группу кнопок при наведении курсора, переместите под другой кнопкой и переименуйте в «Активная кнопка». Используйте инструмент «Частичное выделение», чтобы выбрать градиент, а затем нажмите маленькую кнопку «Обратные градиенты», чтобы обратить градиент.

09. Теги

Теперь, когда мы установили стиль и создали кнопки, мы сделаем несколько тегов. Нарисуйте прямоугольник 55x28 пикселей. Нажмите п для инструмента "Перо" и слева от прямоугольника нарисуйте треугольник. Удерживая Shift, выберите обе формы, затем нажмите кнопку «Добавить / объединить» в PP, чтобы сформировать комбинированную форму.

10. Детализация тегов.

Выберите фигуру и установите цвет на #FFFFFF и цвет границы на 1px #BFBFBF. Дважды нажмите U, чтобы выбрать инструмент «Эллипс», и удерживайте Shift, рисуя круг 8x8 пикселей слева от тега. Выделите две формы и нажмите Subtract / Punch. Добавьте текст шрифтом # 666666 кегль 16 Arvo.

11. Переключатель ВКЛ.

Мы собираемся перевести переключатель ВКЛ / ВЫКЛ в состояние ВКЛ. Нарисуйте прямоугольник 72x23px и установите округлость на 100%. Установите сплошную заливку на #FFFFFF и границу на # C8C8C8 в соответствии с тегами. Добавьте текст размером 16 пикселей с надписью ON слева от переключателя и установите цвет на # 666666.

12. Выключатель ВКЛ, деталь 1

Нам нужно добавить немного деталей, чтобы наш переключатель не выглядел плоским, когда мы добавляем последние детали. Перейдите в раздел «Фильтры»> «Живые эффекты Photoshop»> «Внутренняя тень» и установите следующие свойства: непрозрачность: 31, расстояние: 3, угол: 90 °, размер: 5. Нажмите OK.

13. Выключатель ВКЛ, деталь 2

Нарисуйте круг 23x23px и поместите его с правой стороны переключателя. Добавьте границу размером 1px # B6B6B6. Теперь перейдите в Градиенты> Конус и добавьте шесть равномерно расположенных цветовых точек, которые чередуются между #FFFFFF и #DDDDDD для металлического эффекта.

14. Выключатель ВКЛ, деталь 3

Скопируйте только что сделанный круг и вставьте его под ним. Измените цвет заливки на # 000000 и удалите все стили. Теперь перейдите в Фильтры> Размытие> Размытие по Гауссу и установите Радиус размытия на 2,1. Нажмите ОК и переместите круг на 2 пикселя вниз и на 2 пикселя влево. Установите непрозрачность на 50%.

15. Выключатель.

Сгруппируйте переключатель ON, а затем скопируйте эту группу и переместите ее вправо от предыдущей группы. Измените текст с надписью ON на OFF и переместите его вправо от переключателя. Теперь переместите два круга слева от переключателя и переместите тень на 4 пикселя вправо.

16. Профильная коробка

Нарисуйте прямоугольник размером 200x170 пикселей, убедитесь, что он выровнен с остальной частью набора, чтобы файл оставался аккуратным и аккуратным. Залейте цвет #FFFFFF и установите границу в 1 пиксель # 999999. Теперь в верхней части этого поля нарисуйте прямоугольник 200x82px с границей 1px # 0F3756.

17. Деталь коробки профиля

В PP перейдите в Gradient> Linear и добавьте три цветовые точки: # 2685C9, # 268EDE, # 1F6EA7, с интервалом, как на снимке экрана. Скопируйте прямоугольник и вставьте его поверх другого. Уменьшите ширину и высоту на 2 пикселя и добавьте цвет границы 1 пиксель # 2B93E3.

18. Профильная коробка деталь 2

Используя шрифт Arvo, размер 20, цвет # 0D2C42, введите имя профиля, которое вы хотите отображать в поле вашего профиля, а затем отцентрируйте его в верхней части синего поля. Скопируйте и вставьте этот текст, измените цвет на #FFFFFF и переместите его на 1 пиксель вниз.

19. Изображение коробки профиля

Вставьте изображение своего профиля и измените его размер до 60x60 пикселей. Нарисуйте круг прямо над изображением, убедитесь, что у него нет заливки и границы. Затем выделите круг и картинку, перейдите в Modify> Mask> Group as mask. Повторно скопируйте этот круг и добавьте границу размером 2 пикселя #FFFFFF.

20. Панель выравнивания

Самый простой способ центрировать изображение профиля в центре поля - использовать панель «Выравнивание». Перейдите в Window> Align, чтобы отобразить его. Теперь щелкните изображение профиля, щелкните поле, в котором вы хотите его центрировать, затем щелкните «Выровнять по центру по горизонтали».

21. Текст биографии окна профиля

Нам нужно добавить биотекст в поле нашего профиля, чтобы пользователи могли узнать больше о человеке. Для этого текста мы будем использовать Arial размером 13 пикселей # 666666. Нажмите Т для инструмента «Текст» и просто выровняйте текст по центру поля.

22. Рейтинг звезд

Удерживая кнопку «Фигуры», вы увидите звезду. Нарисуйте одну звезду размером 28x26 пикселей и продублируйте пять раз, каждый раз перемещая ее рядом с предыдущей. К первой звезде примените тот же стиль, который мы использовали на втором шаге, а остальные оставьте с заливкой #FFFFFF и границей #BFBFBF.

23. Организуйте!

Если вы еще не организовали свой файл, как вы следовали этому руководству, обязательно сделайте это сейчас. Использовать Ctrl + G чтобы сгруппировать каждый элемент и присвоить ему имя. Это важно, особенно если вы собираетесь редактировать этот набор пользовательского интерфейса для использования в будущем.

24. Добавить пагинацию

Скопируйте группу кнопок Normal, которую мы создали ранее, и переместите ее в другую часть холста. С помощью инструмента «Прямое выделение» измените размер обоих прямоугольников до 30x30 пикселей и измените текст так, чтобы он стал стрелкой, и поместите его в центр квадрата.

25. Скопируйте группу.

Скопируйте только что созданную группу и переместите ее вправо. Оставьте все по-прежнему, но измените текст на 1. Затем сделайте то же самое снова, но переместите группу еще дальше вправо и измените текст на>.

26. Скопируйте еще раз

Скопируйте одну из этих групп нумерации страниц еще раз. Заполните пространство между ними еще шестью дубликатами. Измените числа так, чтобы они начинались с 2 на 7. Затем с помощью инструмента «Прямое выделение» выберите каждое из этих полей, измените цвет заливки на #FFFFFF и цвет границы на #BFBFBF.

27. Социальные кнопки

Всегда удобно иметь под рукой кнопки социальных сетей в комплекте пользовательского интерфейса. Загрузите предоставленные значки социальных сетей и добавьте их в свой набор пользовательского интерфейса для удобства использования, когда они понадобятся. Если вы чувствуете себя изобретательно, вы всегда можете персонализировать их и сделать более интересными.

28. Сделайте финальную организацию!

Самое важное, что нужно проверить в конце дизайна, - это правильно ли вы организовали файл. Если нет, то вы вернетесь в будущее и задаетесь вопросом, где же дела. Итак, сделайте последнюю проверку и убедитесь, что все сгруппировано и названо соответствующим образом.

Слова: Алекс Брук

Понравилось это? Прочтите это!

• Как создать приложение: попробуйте эти замечательные уроки
• Полное руководство по дизайну логотипов
• Советы, приемы и исправления Photoshop, которые стоит попробовать сегодня

Любые вопросы? Спрашивайте в комментариях!