Детали урока

• Программа: Adobe Illustrator CS5
• Сложность: Intermediate
• Предполагаемое время завершения: 1 час

Конечный результат

 В уроке использовали шрифты:

• Mission Script
• Twentytwelve Slab

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

Размер вашего документа зависит от  целей готовой продукции. Если вы создаете документ для дальнейшей печати, возможно размер нужно указать изначально немного больше. Давайте создадим новый документ размерами 600 х 600px .

2. Создайте бэкграунд

Давайте начнем с создания фона. 

Шаг 1

Выберите инструмент Rectangle Tool (M) и  нажмите на рабочую область. Затем введите  нужные размеры.

Шаг 2

Выберите только-что созданный квадрат и перейдите к панели  Align  (Выравнивание) ( Window> Align ) и выберите  Align to Artboard, потом - Vertical Align Centre  и Horizontal Align Centre , это вторые иконки  на верхней строке панелиAlign.  Это позволит разместить объект под прямым углом к рабочей области. 

Шаг 3

Теперь зальем квадрат цветом salmon(лососевый), как показано на скриншоте ниже. Этот цвет достаточно популярен в наше время. Если вы работаете с настройками по умолчанию, ваш квадрат может иметь обводку. Не забудьте удалить ее.

3. Выбор текстуры

Шаг 1

Цвет для плоского дизайна замечательный, но не нужно на этом останавливаться. Добавим текстуру. Заходим в библиотеку Pattern ( Window > Swatch Libraries > Patterns > Basic Graphics > Basic Graphic Textures), а затем нажмите и перетащите текстуру под названием “Sand” на рабочую область. Это позволит скопировать шаблон.

Шаг 2

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

Щелкаем на черных точках и изменяем цвет обводки на белый. Далее нажимаем два раза по точкам. чтобы перейти в режим изоляции.

Шаг 3Выберите  группу текстуры и перейдите в Edit> Define Pattern (Редактирование — Определить узор)... затем определите для нее имя  и нажмите кнопку ОК. Вы заметите новый шаблон, который появится на панели Swatches (Window> Swatches ). Теперь можно удалить шаблон из рабочей области, нажав delete на клавиатуре.

Шаг 4

Теперь с помощью  Selection Tool (V) выберите лососевый прямоугольник и перейдите на панель Appearance (Appearance> Window ). Нажмите кнопку  add a new fill  в нижней части панели, чтобы добавить новый цвет заливки, и вместо однородного цвета  выберите созданную заливку, а далее снизьте непрозрачность до 50% .

4. Добавляем текст

Шаг 1

С фоном  закончили. Переходим к основной части урока. Используйте любую нужную цитату. Для начала выберите инструмент Type Tool (T) и введите цитату в трех строках. Это нужно для того, чтобы у нас была средняя строчка, для которой в дальнейшем будем изменять шрифт.

Для «Beauty»  используем шрифт “Mission Script” с размерами 72px . Средняя линия  “IN THE”  будет прописными буквами, шрифтом   “Twentytwelve Slab”, размером 48px и bold. Наша последняя строка“Breakdown”  написана шрифтом  “Mission Script”,  размером 72px . Цвет текста — белый.

Шаг 2

Теперь давайте все правильно выровняем. Выбираем Selection Tool (V) и удерживая Shift, выделяем  одновременно все три строки текста. Переходим к панели Align  и выбираем Align to Artboard , потом   Vertical Align Centre и  Horizontal Align Centre.

Шаг 3

Выберите  строку “Breakdown” , затем нажмите правой кнопкой мыши и выберите Transform > Move…(Shift + Command + M), переместите вниз по вертикали на 87px .

5. Создаем флаг с текстом

Шаг 1 

Давайте создадим флаг, в котором разместим текст. Выбираем Rectangle Tool (M) и создаем прямоугольник размерами 140px на 50px. Убедитесь, что он размещен в центра, выбрав кнопки Vertical Align Centre и  Horizontal Align Centre на панели выравнивания.

Шаг 2

Теперь снова выберите Rectangle Tool (M) и создайте квадрат, размерами 50px на 50px . Выберите Add Anchor Point Tool (Добавить опорную точку) (+) и щелкните  где-нибудь недалеко от центра на левой стороне квадрата. Затем инструмент Direct Selection Tool (A) и , кликнув по опорной точке, которую только-что добавили,  перетащите ее в центр.  Для выполнения следующего шага нужно убедиться, что опция   Smart Guides включена. Вы можете сделать это в меню View> Smart Guides (Ctrl + U) .  

Шаг 3

Нужно скопировать нашу форму и вставить на рабочую область. Затем нажмите по ней правой кнопкой мыши и выберите Transform > Reflect… и отразите форму по горизонтали. Перетаскиваем на другую сторону прямоугольника.

Шаг 4

Отредактируем положение форм, чтобы сделать фигуру похожую на флаг. Для этого выбираем Selection Tool (V), далее щелкаем правой кнопкой мыши по левой части и выбираем Transform> Move ... (Shift + Ctrl + M ). Вводим значения, как на скриншоте ниже. Аналогичные действия делаем с правой частью.

Шаг 5

Выберите инструмент  Rectangle Tool (M) и кликните на рабочей области, чтобы создать прямоугольник размерами 130px в ширину и 40px высотой. Центрируйте его. Затем с помощью Selection Tool (V) выделите маленький прямоугольник, скопируйте его и вставьте на передний план ( Ctrl + F ).

Шаг 6

Теперь,  удерживая Shift, щелкните на прямоугольнике и на панели Pathfinder ( Window> Pathfinder ) кликните по второй иконке слева, который называется Minus Front . Повторите этот процесс для другой стороны флага.

Шаг 7

Теперь, удерживая Shift выберите все объекта флага и поменяйте цвет заливки с обводкой. Установите для обводки параметры  Inside и ширину 5px.  Теперь сгруппируйте  (Ctrl + G) этих объекты вместе.

Шаг 8

Вы, наверное, заметили, что слова выровнены не правильно. Выбираем  строку  IN THE”, затем - Object> Expand, далее переходим на панель Align, выбираем Align to Artboard, а потом  Vertical Align Center и  Horizontal Align Center. 

Шаг 9

Теперь сгруппируем (Ctrl + G) текст с формой флага. открываем панель Appearance  и в нижней части панели выбираем  кнопку Effects. Затем Warp > Flag и вводим информацию, указанную на скриншоте ниже. Смещаем группу с текстом и флагом на 3 пикселя, кликнув по стрелке вверх на клавиатуре. 

6. Работа со шрифтом

На этом этапе, если вы уже довольны выбором шрифта, можно закончить работу с текстом. Автор урока решил отредактировать буквы «В» и «Е» .

Шаг 1

Выделяем строки  “Beauty” и “breakdown" , а затем нажимаем правой кнопкой мыши и выбираем Create Outlines. Это позволит превратить  форму букв в векторную фигуру для дальнейшего редактирования. 

Шаг 2

Переходим в верхнюю часть буквы   "B" (внутренняя часть изгиба). С помощью Direct Selection Tool (A) выбираем точки,что формируют изгиб  и удаляем их.

Шаг 3

Выбираем Pen Tool (P) и, удерживая Shift  на клавиатуре, нажимаем на правую опорную точку и перетаскиваем ее немного вправо, пока не получим плавный изгиб.  

Шаг 4 

Далее редактируем все «проблемные места». в уроке были изменены нижняя часть "B", верхняя «е» и внутренняя петля «у». Когда результатт вас полностью удовлетворит, с помощью Selection Tool (V)  выделяем  "B", затем удерживая Shift, выделяем «E» и копируем буквы.

Шаг 5

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

7. Добавляем к тексту эффекты

Шаг 1

Давайте сгруппируем все объекты вместе, чтобы применять эффект сразу ко всем частям. Удерживая  Shift, выбираем все элементы и группируем их (Ctrl + G).

Шаг 2

Переходим в панель Appearance  ( Window>  Appearance ), затем нажмите кнопку « FX »в нижней части, выберите Stylize> Drop Shadow ... и введите нужные настройки. 

Шаг 3

На панели Appearance  (Window > Appearance)  выбираем созданный слой и перетаскиваем его на кнопку  Duplicate Selected Item. Нажмите на копии тени (нижний слой) и введите нужную информацию. 

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

8. Создаем собственную узорчатую кисть

Шаг 1

Начнем с изменения размера рабочей области для удобного создания следующих элементов. Выбираем инструмент  Rounded Rectangle Tool и создаем фигуры формы капсулы, использую следующие параметры.

Шаг 2

Выбрав созданную форму, нажимаем правой кнопкой мыши и Transform > Transform Each, вводим параметры и нажимаем Copy. Только не нажимайте OK, так как нам нужно создать перемещенную копию, а не просто переместить форму. Кликаем правой кнопкой по новой форме и выбираем Transform > Transform Again  ( Ctrl + D ). У вас должно получиться три копии.

Шаг 3

Теперь выделите все три фигуры одновременно, кликните правой кнопкой мыши, выберитеTransform> Shear и введите следующую информацию.

Шаг 4

Для выполнения следующего шага убедитесь, что кнопка  Smart Guides включена. Вы можете сделать это в меню View> Smart Guides (Ctrl + U) ). Выберите Rectangle Tool (M) и создайте прямоугольник, который будет пересекать форму капсулы, как показано на изображении ниже. Аналогичный действия сделайте и для другой стороны. 

Шаг 5

Выберите одну форму капсулы и прямоугольник, что ее пересекает. Переходим в панель Pathfinder ( Window> Pathfinder ) и выбираем второй значок слева - Minus Front . Аналогично для другой стороны. 

Шаг 6 

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

Шаг 7

В конце наших форм создаем фигуру, которой кисть будет заканчиваться. 

Шаг 8

Скопируйте обрезанную капсулу и созданную форму, сгруппируйте формы вместе, далее, удерживая Shift + Alt, перетащите форму на другой конец. (Будем перетаскивать формы слева направо. ) Переходим на угловой маркер рамки и изменяем расположение формы.

Шаг 9 

Теперь нам нужно выровнять формы кисти нужным образом. Создаем прозрачные прямоугольники, которые будут прикасаться к верхней и нижней точкам. С включенной опцией Smart Guides  это будет не сложно.

Группируем каждую прозрачную форму с соответствующей фигурой  ( Ctrl + G ). У нас должно получиться три группы — для левого края, центральную и для правого.

Шаг 10

Выбираем третью группу и переходим на панель кистей ( Window> Brushes ), нажмите кнопку New Brush  в нижней части окна. Затем в появившемся окне выбираем Pattern Brush и  OK . 

В следующем окне  даем имя кисти, а остальные настройки оставляем стандартные.

Шаг 11

Удерживая Alt на клавиатуре, перетаскиваем правую часть форм в правую часть меню кистей. Аналогичные действия делаем для левой части. Теперь можем удалить формы. Если вы работали на новом слое, просто скрываем его. 

Шаг 12 

Выбираем инструмент Line Segment Tool (\) и создаем горизонтальную  линию длиной  слова “Breakdown”. Переходи на панель  Align, выбираем Align to Artboard, далее  Vertical Align Center и Horizontal Align Center.

Шаг 13

Теперь кликаем правой кнопкой мыши и выбираем Transform> Move ... (Shift + Ctrl + M ),  перемещаем вертикально вниз на 148px .Применяем к линии созданную кисть. 

9. Создание простой иконки

Шаг 1

С помощью Ellipse Tool (L)  создаем круг размерами 14px на 14px, удаляем  заливку и добавляем внутреннюю обводку размерами 4px широкий.

Шаг 2

Создаем новый круг размерами 57px на 57px. Изменяем обводку на  Center и ширину для нее задаем 4px.  

Шаг 3

Большой круг все еще выделе.  Кликаем правой кнопкой мыши и нажимаем Transform> Move ... ( Shift + Ctrl + M ) , перемещаем его вертикально вниз на 8px .

Шаг 4

Поворачиваем объект на 45 º. С помощью  Direct Selection Tool (A) выбираем 2 верхние опорные точки и удаляем их.  

Шаг 5

С помощью Line Segment Tool (\)  рисуем горизонтальную линию (18px)  с обводкой размерами в 4px.

Шаг 6

Кликните правой кнопкой мыши по линии и нажмите Transform> Move ... (Shift + Ctrl + M ), переместите ее вертикально вниз на 12px .

Шаг 7

С помощью Line Segment Tool (\) рисуем вертикальную линию с обводкой в  4px. Она должна занимать пространство между нижней частью маленького круга и верхней частью дуги. 

Шаг 8

Выберите Rectangle Tool (M) и создайте квадрат размерами 8 на 8 пикселей .  Удалите обводку и залейте квадрат белым цветом. 

Шаг 9

Теперь выберите Direct Selection Tool (A) и удалите нижнюю правую опорную точку. У вас должен получиться треугольник. Переходим к  Path > Join (Command + J) и закрываем открытые пути. 

Шаг 10

Перетаскиваем форму треугольника, чтобы она пересекала крайнюю часть дуги. Дублируйте треугольник и разместите его на другую сторону. Группируйте все объекты якоря вместе.

Шаг 11

Перейдите в панель  Align и выберите Align to Artboard, потом  Vertical Align Center и Horizontal Align Center. 

Шаг 12

Выберите икону, кликните по ней правой кнопкой мыши и выберите Transform> Move ... ( Shift + Ctrl + M ), переместите ее вертикально вверх на 163px .

Конечный результат

Автор - Chris Carey

Перевод — Дежурка