Как сделать золотое сечение в иллюстраторе

Добавил пользователь Валентин П.
Обновлено: 04.10.2024

Я говорю о методе золотого сечения при создании логотипов. Этот метод позволяет вам создавать максимально простые, пластичные и при этом идеально выверенные с точки зрения пропорций логотипы.

После просмотра этого ролика у вас не останется никаких вопросов по тому как создать логотип в Адоб иллюстратор, приятного просмотра!

► Наш Boosty: boosty.to/photofox

►Тайм-коды:
00:00 - Вступление, что такое золотое сечение
00:40 - Как создавать сетку золотого сечения
03:19 - Создание документа для работы с логотипом
04:30 - Как создать логотип в Adobe illustrator по золотому сечению
08:38 - Работа с инструментом Shape Builder Tool
12:00 - Доработки деталей логотипа
14:00 - Покраска логотипа
16:00 - Подбор шрифта для компании
17:00 - Создание нескольких презентационных вариантов
19:50 - Подведение итогов, рекомендации

Мы команда Photofox, снимаем обучающие видео для начинающих и для профессионалов по обработке фото и монтажу видео. Если Вы хотите научиться работать в программах Adobe, то Вы обратились по адресу. На нашем канале Вы можете найти обучающие видео по Photoshop, Premiere Pro, Lightroom, Illustrator. Начиная с основ обработки и до крутых профессиональных фишек, наша команда научит Вас всему, что знаем и Вы увидите, что дизайн - это круто!

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

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

Тесно связанная с Последовательностью Фибоначи (Fibonacci Sequence), которую вы, возможно, помните из уроков математики или романа Дэна Брауна “Код Да Винчи”, Золотое Сечение описывает идеально симметричное взаимоотношение между двумя пропорциями.

Приблизительно равное соотношению 1 : 1.61, Золотое Сечение может быть иллюститровано как Золотой Прямоугольник: большой прямоугольник, включающий квадрат (в котором стороны равны длине самой короткой стороны прямоугольника) и прямоугольник поменьше.

Золотое Сечение

Если убрать квадрат из прямоугольника, останется другой, маленький Золотой Прямоугольник. Этот процесс может продолжаться до бесконечности, как и цифры Фибоначи, которые работают в обратном порядке. (Добавление квадрата со сторонами, равными длине самой длинной стороны прямоугольника, приближает вас к Золотому Прямоугольнику и Золотому Сечению.)

Золотое Сечение в дизайне

Золотое Сечение в дизайне

Золотое Сечение в действии

Считается, что Золотое Сечение используется уже около 4000 лет в искусстве и дизайне. Однако, многие люди соглашаются, что при строительстве Египетских Пирамид также использовался этот принцип.

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

Греческая архитектура

Золотое Сечение в архитектуре

В древнегреческой архитектуре Золотое Сечение использовалось для определения приятных пространственных отношений между шириной здания и его высотой, размером портика и даже положением колонн, поддерживающих структуру.

В результате получается идеально пропорциональное строение. Движение неоклассической архитектуры также использовало эти принципы.

Тайная вечеря

Золотое Сечение в дизайне

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

В Тайной вечере фигуры расположены в нижних двух третях (самая большая из двух частей Золотого Сечения), а Иисус идеально зарисован между золотых прямоугольников.

Золотое сечение в природе

Существует множество примеров Золотого Сечения в природе – их вы можете обнаружить вокруг себя. Цветы, морские раковины, ананасы и даже пчелиные соты демонстрируют одинаковое соотношение.

Как рассчитать Золотое Сечение

Рассчет Золотого Сечения достаточно прост, и начинается с простого квадрата:

01. Нарисуйте квадрат

Рассчет золотого сечения

Он образует длину короткой стороны прямоугольника.

02. Разделите квадрат

Рассчет золотого сечения

Разделите квадрат пополам с помощью вертикальной линии, образуя два прямоугольника.

03. Проведите диагональ

Рассчет золотого сечения

В одном из прямоугольников проведиде линию из одного угла в противоположный.

04. Поверните

Рассчет золотого сечения

Поверните эту линию так, чтобы она легла горизонтально по отношению к первому прямоугольнику.

05. Создайте новый прямоугольник

Рассчет золотого сечения

Создайте прямоугольник, используя новую горизонтальную линию и первый прямоугольник.

Как использовать Золотое Сечение

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

Быстрый способ

Если вы когда-нибудь сталкивались с “Правилом третей”, то вам будет знакома идея разделения пространства на равные трети по вертикали и горизонтали, при этом места пересечения линий создают естественные точки для объектов.

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

Правило третей можно применять к любой форме, но если вы примените его к прямоугольнику с пропорциями примерно 1 : 1.6, вы окажетесь очень близко к золотому прямоугольнику, что сделает композицию более приятной для глаз.

Полная реализация

Если вы хотите реализовать Золотое Сечение в вашем дизайне в полной мере, то просто расположите основной контент и сайдбар (в веб дизайне) в соотношении равном 1 : 1.61.

Можно округлить значения в меньшую или большую стороны: если контент-зона равна 640px, а сайдбар 400px, то эта разметка вполне подойдет под Золотое Сечение.

Золотое сечение в веб дизайне

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

Полезные инструменты

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

Калькулятор золотого сечения

GoldenRATIO – это приложение для создания дизайна веб сайтов, интерфейсов и шаблонов, подходящих под Золотое Сечение. Доступно в Mac App Store за 2,99$. Включает визуальный калькулятор Золотого Сечения.

Так же в приложении есть функция “Избранное”, которое сохраняет настройки для повторяющихся задач и “Click-thru” мод, позволяющий сворачивать приложение в Photoshop.

Этот калькулятор Золотого Сечения от Pearsonified помогает в создании идеальной типографики для вашего сайта. Введите размер шрифта, ширину контейнера в поле, и нажмите кнопку Set my type! Если вам нужно оптимизировать количество букв в строчке, вы можете дополнительно ввести значение CPL.

Калькулятор золотого сечения

Это простое, полезное и бесплатное приложение доступно для Mac и PC. Введите любое число, и приложение вычислит вторую цифру в соответствии с приципом Золотого Сечения.

Калькулятор золотого сечения

Это приложение позволяет проектировать с золотыми пропорциями, экономя кучу времени на вычислениях.

Вы можете менять формы и размеры, фокусируясь на работе над своим проектом. Постоянная лицензия стоит 49$, но вы можете скачать бесплатную версию на месяц.

Обучение Золтому Сечению

Вот несколько полезных туториалов по Золотому Сечению (английский язык):

В этом туториале для Digital Arts Роберто Маррас (Roberto Marras) показывает, как использовать Золотое Сечение в художественной работе.

Туториал от Tuts+, рассказывающий, как использовать золотые принципы в веб дизайн проектах.

Туториал от Smashing Magazine, рассказывающий о пропорциях и правиле третей.

Anonim

Я пытаюсь использовать логотипы Фибоначчи / Золотого сечения для некоторых университетских работ, однако я новичок в Illustrator. Я использую Photoshop около 8 лет и Sketch v3 с момента его выпуска. Однако я не могу понять, как люди создают эти логотипы.

Я пытаюсь понять, как, например, вы можете перейти от шестиугольника с заостренными краями к использованию кругов, чтобы превратить точки в закругленные края.

Мы будем очень благодарны за любую помощь / советы или ссылки на учебные пособия.

Вот несколько примеров (спасибо Бакабаке за вопрос)

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

  • Нарисуйте шестиугольник с помощью инструмента многоугольник. Вы можете щелкнуть мышью по холсту, чтобы ввести точные размеры.
  • Выберите шестиугольник и перейдите в верхнюю строку меню Эффекты> Специальные> Закругленные углы.
  • Активируйте предварительный просмотр, чтобы увидеть, что вы делаете, и найти подходящее значение. Это радиус, поэтому, если вы хотите выработать пропорции золотого пайка с точными размерами вашего шестиугольника, вы можете сделать это там.

Однако, если вы хотите сделать это вручную, как кадры, которые вы включили в свой вопрос, вот как я бы это сделал:

  • Нарисуйте шестиугольник с помощью инструмента многоугольник. Вы можете щелкнуть мышью по холсту, чтобы ввести точные размеры.
  • Нарисуйте круг в нужной пропорции (опять же, вы можете щелкнуть прямо на холсте, чтобы ввести точное значение).
  • Дублируйте свой круг в каждой точке шестиугольника и разместите его очень точно (вы захотите использовать предварительный просмотр контура в Illustrator (ctrl + y). Этот шаг чрезвычайно важен, круг должен касаться, но не должен перекрываться. Это может требуется несколько попыток.
  • Отпустите Alt, щелкните и перетащите другие фигуры вместе, чтобы объединить их.
  • Один круг проще нарисовать, чем второй соединить, а затем повернуть на 60 градусов, но да, конечно .
  • Есть множество способов сделать это, но поскольку OP, похоже, сказал, что его опыт работы с Illustrator ограничен, я выбрал простой. Не стесняйтесь размещать другой вариант :-)
  • 1 Спасибо, @Emilie, это именно то, что я искал. Спасибо всем за вашу помощь и извинения за то, что изо всех сил пытались сформулировать вопрос должным образом, не был уверен, как лучше всего донести мысль.
  • Я не был уверен, что этого было достаточно, поэтому был рад узнать, что помог тебе разобраться :-)

Насколько я понимаю, ваш вопрос заключается в следующем: как создать логотип с золотым сечением? Мне кажется, ваш вопрос скорее теоретический, чем программный? Вот мой теоретический ответ, и я буду здесь адвокатом дьявола для золотого сечения (поскольку я считаю, что многие из приведенных выше комментариев не совсем понимают значение).

Набросок на бумаге. Так начинается лучший логотип. НЕ пытайтесь создать приведенную выше схему и вписать в нее логотип. Как уже говорили другие, эти изображения, которые у вас есть выше, больше предназначены для маркетинга, а не для того, как их на самом деле создал дизайнер.

После того, как у вас появится основная идея (IE: используя логотип Twitter, скажем, вы знаете, что хотите, чтобы ваш логотип был птицей, и вы набросали базовую форму логотипа Twitter), вы можете перенести эскиз в Illustrator и начать делать математика. (IE: убедитесь, что он соответствует золотому сечению).

Чтобы ПОКАЗАТЬ вам взаимосвязь между объектами, дизайнеры поместили птицу Twitter в тот золотой прямоугольник, о котором мы говорили. У меня тоже есть файл формы в Photoshop и Illustrator, чтобы помочь измерить с золотым сечением. ОДНАКО, что они, скорее всего, сделали, они взяли окружность тела птицы и разделили ее на 1,6. 1,6 - это округленное число золотого сечения. Но на самом деле визуально это делает второй самый маленький круг, размер которого вы видите правильного размера по отношению к первому, большему кругу.


Немного о самой книге: автор раскрывает все тонкости работы коммерческого иллюстратора, с чего начать, как составить портфолио, где найти клиентов и как с ними работать, а также делится техническими хитростями и дает пошаговые рецепты создания качественных изображений.

Яна рассказывает, почему так важно найти свой собственный стиль рисования, почему одни иллюстраторы рисуют мало, а получают много, а другие – наоборот.

Книга написана понятным языком, без лишних заумностей, легко воспринимается, я ее перечитывала дважды. Рекомендую всем, кто интересуется рисованием.

Яна Франк пишет:


Все пересечения отрезков считаются хорошим местом для расположения важных элементов на иллюстрации.

На разворотах ниже показаны примеры расположения ключевых точек иллюстрации по правилу золотого сечения.



Асимметрично скомпонованные работы считаются более интересными.


Центрально-симметричные композиции выглядят монументально и стабильно, но считаются банальными. Их хорошо использовать для изображения гербов, памятников, а также если надо подчеркнуть значение главного героя или элемента.


Рассматривая картинку, человек первым делом ищет взглядом центральный элемент. Это главный герой сюжета или самый важный предмет. Рекомендуется располагать его на одном из пересечений отрезков в золотом сечении


Линию горизонта не рекомендуется проводить в середине. Здесь тоже лучше всего придерживаться правил золотого сечения.




Главный элемент поддерживается окружающим пространством.

Слишком близкое расположение к краям картинки может испортить всю композицию.


Снизу должно быть больше пространства, чем сверху, иначе возникает ощущение придавленности композиции.


Однако чрезмерное приближение к верхнему краю создает впечатление, что изображение обрезано.


Если нужно показать несколько равноценных элементов, пространство можно делить между ними поровну.


Или по правилам золотого сечения.

Теоретическую информацию, какие-то приёмы? — Пожалуйста: куча источников в сети, куча менторов и куча образовательных курсов вкупе с торрент-трекерами.

Но работать ни один из них не научит.

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

Но практику, конечно же, ничем не заменить. согласна полностью.

Музу и чудовище возьму на заметку и тоже прочитаю, спасибо, что напомнил.

Оксана не пропадайте. Нам так не хватает Вас на форуме и в блоге )))

я не пропала, просто пришлось взять небольшую паузу.

и думаю, это только вам так не хватает меня:) хотя приятно, конечно, когда хоть один человек замечает твое отсуствие, спасибо.

Smile

Одно время думала, покупать или не покупать данную книгу. Теперь твердо решила приобрести Из подобного прочла только Ратковски "Профессия иллюстратор".

Одно время думала, покупать или не покупать данную книгу. Теперь твердо решила приобрести :) Из подобного прочла только Ратковски "Профессия иллюстратор".

книжка хорошая, много новых фишек узнала и ньюансов. Про книжку Ратковски не слышала, теперь прочитаю обязательно)

Оксана, у Вас довольно интересный и познавательный блог
Вы затрагиваете различные аспекты деятельности художника-аниматора, но совсем незначительно, на мой взгляд, освещаете финансовую сторону вопроса. Я думаю, как разработчикам игр, которые пребывают в поиске графического воплощения своих замыслов, так и начинающим художникам, которые уже успели облюбовать этот замечательный ресурс, было бы интересно побольше узнать о политике ценообразования в сфере флеш арта. И коль скоро в этой теме коснулись тайн коммерческих иллюстраторов , осмелюсь поинтересоваться коммерческой стороной Ваших работ, если это не такая уж большая тайна.
Здесь встречались ссылки на статьи по ценообразованию для анимационных роликов / мультиков от профессиональных студий(удовольствие не из дешевых, ага), а вот насчет графики и анимации для игр в более скромных масштабах, кажется, нигде ничего не было.
Очень хотелось бы узнать, сколько может стоить игровая графика, как Вы рассчитываете цену тех или иных заказов, и вообще, насколько лично Вы доступны в этом смысле? Чем больше занимаетесь (предпочитаете заниматься): играми, баннерами или другими мультиками/иллюстрациями?

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

Такие вопросы решаются в обстановке коммерческого интима:)

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

Если вы откроете книжку, то тайна стоимости иллюстраций автора осталась под покрывалом ночи:)

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

Да-да, эти статьи имеют прямое отношение к игровой графике и анимации (профессиональной).

Очень хотелось бы узнать, сколько может стоить игровая графика, как Вы рассчитываете цену тех или иных заказов, и вообще, насколько лично Вы доступны в этом смысле? Чем больше занимаетесь (предпочитаете заниматься): играми, баннерами или другими мультиками/иллюстрациями?

Игровая графика не стоит везде одинаково. Многое зависит от исполнителя. Чем выше квалификация художника, тем выше стоимость работы. Скажем так, игровой фон у одного иллюстратора будет стоить 100$ ,у другого – 300 $ и выше.

На данный момент я не очень доступна в плане сотрудничества, поскольку работаю на удаленной постоянке + занимаюсь своими проектами.

Можете создать пост на форуме с этим вопросом, возможно, вы получите более конкретный ответ.

Читайте также: