Content Oriented Web
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.
НАПИШИТЕ НАМ
Спасибо за обратную связь!

ПРОГРАММЫ ДЛЯ ВЕБ-ДИЗАЙНЕРА НА 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.
Домашнее задание: индивидуально