ПРОГРАММЫ ДЛЯ ВЕБ-ДИЗАЙНЕРА НА TILDA

Нет строгих правил, какие программы обязательно должен знать каждый веб-дизайнер, тем более работающий с конструктором сайтов Tilda - здесь и так много замечательных возможностей для воплощения идей, о чем уже говорит наличие режима работы с ZERO-блоками.

На Tilda можно изменять графические объекты во внутреннем редакторе. Для этого нужно выбрать загруженное изображение в режиме редактирования zero-блока и справа в панели свойств нажать на функцию Edit.

Откроется Photo Editor, в котором есть не так много функций, как в профессиональных редакторах, но тем не менее здесь можно:

• повернуть изображение,
• отзеркалить изображение,
• наложить на объект фильтры (например, если вы хотите эффект сепии),
• написать текст поверх изображения,
• нарисовать что-то при помощи карандаша.

В этих настройках с легкостью разберется любой новичок.

Также на Tilda можно делать разные эффекты для объектов: шейпов (простых фигур, "shape"), изображений, кнопок, текста. Для этого нужно выбрать объект в режиме редактирования zero-блока и справа на панели свойств открыть выпадающее меню в разделе "EFFECT", затем выбрать в списке нужный эффект.

Пример использования эффекта "Blur" на тексте.

В строке "EFFECT" в выпадающем меню нужно выбрать сам эффект, после чего ниже появится - "EFF. VALUE, PX" - при помощи ползунка вручную можно настроить силу применения эффекта.

Какие программы можно порекомендовать изучать начинающему веб-дизайнеру?

Существует огромное количество графических программ: платных и бесплатных, для работы с растром и вектором, с анимацией и т.д. Наиболее распространенные среди графических и веб-дизайнеров - это продукты Adobe (Photoshop, Illustrator, InDesign, Adobe XD и др.) и Figma.

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

Чаще всего Фотошоп используют для работы с фотографиями и рисования, а также для создания рекламных баннеров и мокапов (коих можно найти огромное множество даже бесплатных). Некоторые веб-дизайнеры создают здесь прототипы или дизайн веб-страниц.

Adobe Illustrator - это платная десктопная программа для работы с векторной графикой. В ней создаются красивые иллюстрации и паттерны, иконки, логотипы. Некоторые дизайнеры используют эту программу для прототипирования и дизайна веб-страниц. Также в Иллюстраторе при помощи "трассировки" можно перевести растровое изображение в векторное.

Figma - бесплатная программа для работы с векторной и растровой графикой. Имеет как облачную (через браузер), так и десктопную версию. Её функционал отлично подходит для проектирования веб-продуктов. К тому же Фигма, в отличие от ФШ, позволяет работать в команде.

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

Она значительно моложе фотошопа и иллюстратора, но по функционалу для целей веб-дизайна является сильным конкурентом этим мощным программам. К тому же, её интерфейс похож на тильдовский.

Какими онлайн-сервисами пользуются веб-дизайнеры?

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

• Например, из урока по оптимизации изображений вы уже знаете о сервисе TinyPNG, который помогает уменьшить вес картинки.

• А из урока по контенту вы помните, что существуют фото-стоки - (www.flaticon.com и другие), где можно выбрать иконки, иллюстрации и фотографии, мокапы.

Есть сервисы, помогающие дизайнерам выбрать цветовую палитру для своего проекта. Например, https://coolors.co.

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

Coolors.co (справа) - пример сгенерированной палитры.

Есть сервисы, помогающие дизайнерам изменить изображение, не обращаясь к Фотошопу и даже Фигме. Например, в www.remove.bg можно быстро убрать фон с картинки, просто перетащив её в специальное поле и скачав результат.

На выходе не всегда получается идеально, но в большинстве случаев результат удовлетворителен.

Пример работы онлайн-сервиса remove.bg (слева)

Для поиска новых шрифтов или, чтобы узнать, какой шрифт используется на каком-либо сайте, тоже есть онлайн-сервисы и даже расширения для браузеров. Например, расширение Font Ninja для Google Chrome позволяет узнать название и даже начертание шрифта при наведении на него на веб-странице.

Расширение Font Ninja для браузера Chrome

Вывод

• Чтобы делать сайты на конструкторе, не обязательно профессионально владеть графическими редакторами.

• Знание Adobe Photoshop или Figma поможет разрабатывать красивый и уникальный дизайн страниц, а также подготавливать контент - например, обрабатывать фотографии, перекрашивать иконки в нужный цвет, делать мокапы. Онлайн-сервисы - отличные помощники, запоминайте и пользуйтесь ими.

• Изучение конструктора сайтов Tilda лучше совмещать с изучением графического редактора Figma.

Домашнее задание: индивидуально