Вот что мы будем сегодня создавать:
Этап 01
Создайте документ размером 700х300 пикселей. Для начала, включите сетку (Grid: View > Grid) и выравнивание по сетке (Snap to Grid: View > Snap to Grid). Далее, нужно сделать сетку с отступами в 5 пикселей. Пройдите в меню Edit > Preferences > Guides & Grid, и выставите значение 5 в поле «Gridline every» и 1 в поле «Subdivisions». Вы также можете открыть информационную панель для того, чтобы в режиме реального времени видеть положение и размер вашей фигуры. Все эти опции значительно повысят скорость вашей работы. Теперь, возьмите инструмент создания многоугольника (Rectangle Tool – M), и создайте фигуру размером 685х130 пикселей. Мы залили её красным цветом и понизили уровень плотности отображения до 30%, за счёт чего стало легко распознать сетку. Вам следует сделать то же самое, так как это может помочь вам в дальнейшей разработке. Создайте еще один многоугольник размером 540х80 пикселей, и расположите его так, как показано на изображении №2. Залейте его зелёным цветом и понизьте уровень плотности отображения до 30%.
Этап 02
Снова воспользуйтесь инструментом создания многоугольника и, удерживая Shift, создайте квадрат размером 220х220 пикселей. Залейте его красным цветом и расположите так, как показано на первом изображении. Постарайтесь соблюдать данные вам параметры величины. Создайте ещё одну (4-ю фигуру) размером 170х175 пикселей, залейте её зелёным цветом и расположите так, как показано на втором изображении. И снова, придерживайтесь тех же размеров, что указаны на изображениях. Сетка и выравнивание по ней могут значительно облегчить процесс разработки.
Этап 03
Сфокусируйтесь на фигурах, которые мы создали в первом этапе. Для начала возьмём красный прямоугольник. Воспользуйтесь инструментом создания прямого выделения (Direct Selection Tool – А), и выделите верхний левый угол, чтобы затем сдвинуть его на 65 пикселей влево. Теперь ваше изображение будет похоже на то, что мы видим на изображении 2. Продолжите работу над зелёной фигурой. Воспользуйтесь тем же инструментом, выделите верхний левый угол и сдвиньте его на 40 пикселей вправо, затем выделите нижний правый угол и сдвиньте его на 40 пикселей влево. В итоге ваши фигуры будут выглядеть так, как показано на изображении №4.
Этап 04
Выделите красные фигуры и кликните по кнопке объединения «Unite», которая находится на панели Pathfinder, а затем выделите зелёные фигуры и сделайте то же самое.
Этап 05
Выберите зелёные фигуры и пройдите в меню Object > Path > Offset Path. Введите цифру 3 в поле сдвига (Offset) и нажмите ОК. Выделите полученную фигуру и залейте её красным цветом, а затем выберите зелёную фигуру и сделайте её невидимой на некоторое время. Теперь, отключите выравнивание по сетке и включите направляющие (Smart Guides). Возьмите ручку (Pen Tool – P), и создайте пути, выделенные в финальном изображении. Каждый путь начинается и заканчивается в углу. С помощью направляющих линий, вы без труда сможете определить начальную и конечную точки. Выберите все эти пути, сгруппируйте их и сделайте невидимыми. Вам они позже понадобятся.
Этап 06
Вернёмся к зелёной фигуре. Выберите её и пройдите в меню Object > Path > Offset Path. Выставьте 1 пиксель сдвига и нажмите ОК. Выберите полученную фигуру и опять пройдите в меню Object > Path > Offset Path. Теперь введите -2 пикселя и нажмите ОК. И опять же, выберите полученную фигуру и опять пройдите в меню Object > Path > Offset Path. Теперь введите -4 пикселя и нажмите ОК. И последний раз пройдите в меню Object > Path > Offset Path, и введите -4 пикселя и нажмите ОК. Теперь у вас должно получиться 5 зелёных фигур.
Этап 07
Выберите большую красную фигуру и добавьте к ней эффект закругленных углов на 3 пикселя (Effect > Stylize > Rounded Corners), а затем пройдите в меню Object > Expand Appearance. Теперь, выберите все фигуры (и красные и зелёные) и нажмите на кнопку Divide на панели Pathfinder. У вас получится группа с несколькими фигурами. Сохраните только те, которые отображены на изображении №3 и удалите все остальные. В финальном изображении они были масштабированы немного, но вы по-прежнему можете отличить их друг от друга. Вы можете оставить их такими, какие они есть, и дать им имена от 1 до 7.
Этап 08
Сделайте группу путей снова видимой. Выберите эту группу вместе с фигурой 1 и нажмите на кнопку Divide. Это разделит фигуру на 12 фигур, как отображено на втором изображении. Опять же, мы изменили их размеры так, чтобы вы могли отличить их друг от друга.
Этап 09
Теперь нам нужно добавить немного цвета фигурам, созданным в предыдущем этапе. Начните с той, которая отображена на изображении ниже. Залейте её линейной градацией, а затем добавьте вторую заливку (из выпадающего меню на панели Appearance), и используйте вторую градацию. Ещё раз выберите фигуру и пройдите в меню Object > Path > Offset Path. Введите значение -2 пикселя в поле сдвига и нажмите ОК. Выберите полученную фигуру, удалите вторую заливку, а затем добавьте эффект закругленных углов на 2 пикселя, и пройдите в меню Object > Expand Appearance. Залейте полученную фигуру градацией так, как показано ниже на изображении №4. Добавьте вторую заливку для этой фигуры и используйте последнюю градацию.
Этап 10
Продолжите работать над фигурой, которая отображена на следующем изображении. Залейте её линейной градацией и пройдите в меню Object > Path > Offset Path. Введите -2 пикселя в поле сдвига и нажмите ОК. Выберите полученную фигуру, удалите её вторую заливку, а затем добавьте эффект закругленных углов на 3 пикселя, и перейдите в меню Object > Expand Appearance. Залейте полученную фигуру градациями, как показано на последних двух изображениях.
Этап 11
Продолжите работу над фигурой, отображенной в следующем изображении. Залейте её линейной градацией и пройдите в меню Object > Path > Offset Path. Введите -2 пикселя в поле сдвига и нажмите ОК. Выберите полученную фигуру, удалите её вторую заливку, а затем добавьте эффект закругленных углов на 2 пикселя, и перейдите в меню Object > Expand Appearance. Залейте полученную фигуру градациями, как показано на последних трёх изображениях.
Этап 12
Продолжите работу над фигурой, отображенной на изображении ниже. Залейте её линейной градацией и пройдите в меню Object > Path > Offset Path. Введите -2 пикселя в поле сдвига и нажмите ОК. Выберите полученную фигуру, удалите её вторую заливку, а затем добавьте эффект закругленных углов на 3 пикселя, и перейдите в меню Object > Expand Appearance. Залейте полученную фигуру градациями, как показано на последнем изображении.
Этап 13
Продолжите работу над фигурой, отображенной в следующем изображении. Залейте её линейной градацией и пройдите в меню Object > Path > Offset Path. Введите -2 пикселя в поле сдвига и нажмите ОК. Выберите полученную фигуру, удалите её вторую заливку, а затем добавьте эффект закругленных углов на 2 пикселя, и перейдите в меню Object > Expand Appearance. Залейте полученную фигуру градациями, как показано на последних двух изображениях.
Этап 14
Продолжите работу над фигурой, отображенной в следующем изображении. Залейте её линейной градацией и пройдите в меню Object > Path > Offset Path. Введите -2 пикселя в поле сдвига и нажмите ОК. Выберите полученную фигуру, удалите её вторую заливку, а затем добавьте эффект закругленных углов на 3 пикселя, и перейдите в меню Object > Expand Appearance. Залейте полученную фигуру градациями, как показано на последних трёх изображениях.
Этап 15
Продолжите работу над фигурой, отображенной в следующем изображении. Залейте её линейной градацией и пройдите в меню Object > Path > Offset Path. Введите -2 пикселя в поле сдвига и нажмите ОК. Выберите полученную фигуру, удалите её вторую заливку, а затем добавьте эффект закругленных углов на 2 пикселя, и перейдите в меню Object > Expand Appearance. Залейте полученную фигуру градациями, как показано на последних двух изображениях.
Этап 16
Продолжите работу над фигурой, отображенной в следующем изображении. Залейте её линейной градацией и пройдите в меню Object > Path > Offset Path. Введите -2 пикселя в поле сдвига и нажмите ОК. Выберите полученную фигуру, удалите её вторую заливку, а затем добавьте эффект закругленных углов на 3 пикселя, и перейдите в меню Object > Expand Appearance. Залейте полученную фигуру градациями, как показано на последних трёх изображениях.
Этап 17
Продолжите работу над фигурой, отображенной в следующем изображении. Залейте её линейной градацией и пройдите в меню Object > Path > Offset Path. Введите -2 пикселя в поле сдвига и нажмите ОК. Выберите полученную фигуру, удалите её вторую заливку, а затем добавьте эффект закругленных углов на 2 пикселя, и перейдите в меню Object > Expand Appearance. Залейте полученную фигуру градациями, как показано на последних трёх изображениях.
Этап 18
Продолжите работу над фигурой, отображенной в следующем изображении. Залейте её линейной градацией и пройдите в меню Object > Path > Offset Path. Введите -2 пикселя в поле сдвига и нажмите ОК. Выберите полученную фигуру, удалите её вторую заливку, а затем добавьте эффект закругленных углов на 3 пикселя, и перейдите в меню Object > Expand Appearance. Залейте полученную фигуру градациями, как показано на последнем изображении.
Этап 19
Продолжите работу над фигурой, отображенной в следующем изображении. Залейте её линейной градацией и пройдите в меню Object > Path > Offset Path. Введите -2 пикселя в поле сдвига и нажмите ОК. Выберите полученную фигуру, удалите её вторую заливку, а затем добавьте эффект закругленных углов на 2 пикселя, и перейдите в меню Object > Expand Appearance. Залейте полученную фигуру градациями, как показано на последних трёх изображениях.
Этап 20
Продолжите работу над фигурой, отображенной в следующем изображении. Залейте её линейной градацией и пройдите в меню Object > Path > Offset Path. Введите -2 пикселя в поле сдвига и нажмите ОК. Выберите полученную фигуру, удалите её вторую заливку, а затем добавьте эффект закругленных углов на 3 пикселя, и перейдите в меню Object > Expand Appearance. Залейте полученную фигуру градациями, как показано на последних трёх изображениях.
Этап 21
Выберите фигуру под именем 2, и залейте её линейной градацией по направлению в левую сторону, а затем выберите фигуру под именем 3, и залейте её линейной градацией в правую сторону.
Этап 22
Залейте фигуры под именами 4,5 и 6 линейными градациями, как показано ниже.
Этап 23
Выберите фигуру под именем 7 и дублируйте её. Теперь вам надо немного сместить эту копию. Возьмите ручку и создайте вертикальный путь, как показано на первом изображении. Выберите этот путь вместе с копией фигуры под именем 7, и нажмите на кнопку Divide. Залейте полученные фигуры линейной градацией так, как показано на изображении ниже.
Этап 24
Выберите оригинальную фигуру под именем 7 и выведите её на передний план (Shift + Ctrl + ]). Залейте её линейной градацией по направлению в левую сторону, а затем добавьте вторую заливку, используя линейную градацию в правую сторону. Выберите первую заливку (из панели Appearance) и измените её режим смешивания (blending mode) на наложение (Overlay), а затем выберите вторую заливку и понизьте её уровень плотности отображения до 30%. Выберите инструмент создания окружности (Ellipse Tool – L) и создайте фигуру, как показано на последнем изображении. Залейте её цветом R=255 G=29 B=37 и понизьте уровень плотности отображения до 25%, смените режиме смешивания на наложение, а затем добавьте эффект размытия Гаусса (Gaussian Blur) мощностью в 10 пикселей.
Этап 25
Дублируйте все фигуры. Выберите все копии и кликните по кнопке объединения на панели Pathfinder. Назовите полученную фигуру «00», переместите ее на задний план (Shift + Ctrl + [), и сделайте две копии. Выберите ручку и создайте фигуру, как отображено на втором изображении зелёной фигурой. Добавьте эффект закругленных углов на 10 пикселей и перейдите в меню Object > Expand Appearance. Выделите полученную фигуру, а также копию фигуры 00, кликните по кнопке пересечения (Intersect). Залейте полученную фигуру линейной градацией, понизьте уровень плотности отображения до 30%, а затем переместите её на передний план (Shift + Ctrl + ]).
Этап 26
Выберите копию фигуры 00, ничем не заливайте её и добавьте контур толщиной в 2 пикселя, по внешней стороне, цвета (R=43 G=65 B=70). Добавьте ещё один контур для этой фигуры (из выпадающего меню на панели Appearance), а цвет используйте такой, как показан на изображении ниже. Выберите оригинальную фигуру 00, залейте ее белым цветом и добавьте эффект тени (Effect Drop Shadow).
Этап 27
Наконец, что касается фона, возьмите инструмент создания многоугольника. Создайте прямоугольник размером 700х300 пикселей, и залейте его радиальной градацией.
Заключение
Теперь наша работа закончена. Вот так должен выглядеть логотип.
