html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Создаем набор веб-лент в Adobe Illustrator

В этом уроке Вы узнаете, как в  Adobe Illustrator создавать веб-ленты. Используя прямоугольник и и другие простые фигуры, мы создадим общую форму ленты. Дальше будем использовать инструменты  палитры Pathfinder, применять деформацию Warp и фильтр Gaussian Blur.

Ленты, которые будем создавать в уроке.

Шаг 1

Откройте Illustrator и нажмите Ctrl + N, чтобы создать новый документ. Введите 600 в поле ширины и высоты, затем нажмите на кнопку  Advanced (Дополнительно). Выбираем RGB, Screen (72ppi), также нужно убедиться, что в поле «Align New Objects to Pixel Grid» не стоит галочка. Теперь включаем сетку (View> Grid) и привязку к сетке (View> Snap to Grid)). Нам нужно, чтобы сетка имела шаг в 5px. Заходим в Edit> Preferences> Guides & Grid, вводим значение 5 в поле Gridline every и 1 в поле Subdivisions box.

Вы также можете открыть панель информации (Window> Info), чтобы просматривать размер и положение будущих фигур. Не забудьте установить единицу измерения в пикселях (Edit> Preferences> Unit> General). Все эти настройки значительно увеличат скорость работы.

 

Шаг 2

Выберите Ellipse Tool (L) и создайте форму размерами 250 на 40px. Залейте его линейным градиентом, как показано ниже, снизьте его непрозрачность до 50% и перейдите к Effect> Blur> Gaussian Blur. Введите радиус 5px и нажмите кнопку OK. Переключитесь на Rectangle Tool (M), создайте форму 350 на 50px, залейте ее черным цветом и поместите, как показано на втором изображении. Выберите обе фигуры, откройте выпадающее меню Transparency, нажмите на Make Opacity Mask и снимите галочку в поле Clip. Маска эллипса должна выглядеть, как показано  в третьем изображении.

Шаг 3

Выберите Rectangle Tool (M), создайте на форму 180 на 75 пикселей, заполните ее линейным градиентом, как показано ниже. Белые цифры  на изображении показывают процент прозрачности.

Шаг 4

Выберите прямоугольник, который создали в предыдущем шаге и перейдите к Object> Path> Add Anchor Points. Выберите инструмент Direct Selection Tool (A) и перетащите нижнюю среднюю опорную точку на 15px вверх. В конце концов, ваша форма должна выглядеть, как на втором изображении. Перейдите в панель слоев, дважды щелкните на слое с формой  и назовите его «Лента».

 

Шаг 5

Выберите Rectangle Tool (M) и в верхнем правом углу формы, которую редактировали в предыдущем шаге, создайте квадрат со стороной в 10px. Заполните его линейным градиентом и разместите, как показано на рисунке. Теперь работаем с новой формой. Возьмите инструмент Delete Anchor Point (Удалить опорную точку (-)) и нажмите на верхнюю правую опорную точку. Это позволит удалить узел квадрата и превратит его в треугольник.

Шаг 6

Отключить привязку к сетке (View> Snap to Grid), затем перейдите к Edit> Preferences> General и убедитесь, что в поле Keyboard Increment (Клавиатурное приращение) установлено расстояние в 1px ( расстояние, на которое перемещается выделенный объект при однократном нажатии на любую клавишу управления курсором). Выбирать форму треугольника, созданного в предыдущем шаге, и сделайте две копии, которые нужно разместить на передний план (Ctrl + C> Ctrl + F> Control + F). Выберите верхнюю копию и переместите ее на 1px вправо, используя правую стрелку на клавиатуре.

Выберите обе копии, откройте панель Pathfinder  (Эффект | Обработка контуров) и нажмите на кнопку Minus Front  (Минус верхний). Заполните получившуюся форму черным и установите его непрозрачность до 15%. В этой форме удалите верхнюю правую опорную точку с помощью инструмента Delete Anchor Point Tool (-).

Шаг 7

Выбираем треугольник, созданный в пятый шаге,  и делаем две новых копии, которые размещаем на передний план (Ctrl + C> Ctrl + F> Control + F). Выбираем верхнюю копию и перемещаем ее на 3px вправо. Выбираем обе копии и нажимаем на кнопку  Minus Fron в панели Pathfinder. Заливаем получившуюся форму черным и устанавливаем непрозрачность до 15%. Удаляем верхнюю правую опорную точку с помощью инструмента Delete Anchor Point Tool(-).

Шаг 8

Выбирать треугольника и две фигуры фигур, созданные в предыдущих двух шагах и объединяем их (Ctrl + G). Выберите новую группу  и перейдите к Effect> Warp> Arc Upper. Введите данные, как показано ниже, и нажмите кнопку ОК.

Шаг 9

Включите привязку к сетке (View>  Snap to Grid). Выберите группу, которая была создана в предыдущем шаге, и перейдите к Object> Transform> Reflect. Установите галочку на вертикальных кнопках и нажмите на кнопку Копировать. Это создаст перевернутую по горизонтали копию вашей группы. Выделите ее, перетащите в левую сторону и поместите, как показано на третьем изображении. Привязка к сетке облегчит работу. 

Шаг 10

Выбираем слой  "Лента" и переходим на панель Appearanceсо. Выберите заливку  и перейдите к Effect > Warp > Shell Lower. Введите данные, как показано ниже, и нажмите кнопку ОК. Сделайте копию «Лента» (Ctrl + C> Ctrl + F), выберите ее и перейдите к Object> Expand Appearance. В панели слоев дважды щелкните на  новую форму и назовите ее «RibbonExpanded». 

Шаг 11

Отключаем привязку к сетке (View> Snap to Grid). Выбираем «RibbonExpanded» и делаем две копии на переднем плане (Ctrl + C> Ctrl + F> Control + F). Выберите верхнюю копию и переместите ее на 5px вправо. Выберите обе копии и нажмите на кнопку Minus Front в панели Pathfinder. Разгруппируем  фигуры (Shift + Ctrl + G). Удаляем правую тонкую форму,  а левую заполняем белым. Кроме того, нужно снизить непрозрачность до 40% и изменить режим смешивания на Soft Light.

 

Шаг 12

Выбираем «RibbonExpanded» и делаем две новые копии на переднем плане (Ctrl + C> Ctrl + F> Control + F). Выбираем верхнюю копию и перемещаем ее на 10px вправо. Выбираем обе копии и нажимаем на кнопку Minus Front с  панели Pathfinder. Разгруппируем  группу  (Shift + Ctrl + G). Удаляем правую часть, а левую заполняем серым. Устанавливаем непрозрачность на 20% и изменяем режим смешивания на Soft Light. 

Шаг 13

Выбираем «RibbonExpanded» и снова на переднем плане делаем две новых копии (Ctrl + C> Ctrl + F> Control + F). Выбираем верхнюю копию и перемещаем ее на 5px влево. Выбирать обе копии и нажимаем на кнопке  Minus Front в панели Pathfinder. Разгруппируем новую  фигуру (Shift + Ctrl + G). Удаляем левую часть,  правую заливаем  белым.Устанавливаем непрозрачность на 40% и изменяем режим смешивания на Soft Light. 

Шаг 14

Выбираем «RibbonExpanded», делаем две новые копии (Ctrl + C> Ctrl + F> Control + F). Верхнюю копию и перемещаем на 10px влево. Выбираем обе копии и нажмите на кнопку Minus Front. Разгруппируем фигуру, которая получилась в итоге (Shift + Ctrl + G). Удаляем левую фигуру, а правую заполняем черным. Кроме того, нужно снизить непрозрачность до 20% и изменить режим смешивания на Soft Light.

Шаг 15

Выбирать «RibbonExpanded» и копируем два раза, при этом копии размещаем на на передний план (Ctrl + C> Ctrl + F> Control + F). Выбираем верхнюю копию и перемещаем ее на 1px вверх. Выбираем обе копии и нажимаем на кнопку Minus Front (панель Pathfinder). Форму, которая получилась, заполните линейным градиентом, как показано на  рисунке ниже. 

Шаг 16

Выберите «RibbonExpanded» и делаем две новых копии  (Ctrl + C> Ctrl + F> Control + F). Выбираем верхнюю копию и перемещаем ее на 2px вверх. Повторяем те же действия, что и в предыдущих шагах. Выбираем две копии и нажимаем на кнопкуMinus Front. Заполняем форму линейным градиентом, как показано на  рисунке ниже и изменяем режим смешивания на Soft Light.

Шаг 17

Включаем привязку к сетке (View> Snap to Grid). Выбираем Ellipse Tool (L), создаем форму  240 на 45px, заполняем ее любым цветом и размещаем, как показано на первом изображении. Выбираем эту новую форму вместе с «RibbonExpanded» и нажимаем на кнопку Intersect в панели Pathfinder. Форму, которая получилась, заполняем линейным градиентом, как показано на следующем рисунке, непрозрачность снижаем до 40% и изменяем режим смешивания на Overlay. 

 

Шаг 18

Выбираем слой  "Лента",  с помощью панели Appearance и кнопки Add New Fill  добавляем вторую заливку. Выделяем ее, перетаскиваем вниз панели  Appearance и заливаем черным, непрозрачность снижаем до 7% . Переходим в Effect> Warp> Shell Lower. Вводим данные, приведенные ниже,  и нажимаем  кнопку ОК. Переходим в Effect> Warp>  Arc Lower и применяем настройки, приведенные ниже. Переходим  в Effect> Distort & Transform> Transform и вводим следующие настройки.

 

Шаг 19

Выбираем слой «Лента», переходим на панель Appearance и добавляем третью заливку, которую размещаем еще ниже. Она также должны быть черной, непрозрачность снижаем до 10% и переходим в Effect> Warp>  Arc Lower. Вводим данные, приведенные ниже и переходим к Effect> Distort & Transform> Transform. Такжу используем настройки, приведенные ниже. Переходим в Effect> Blur> Gaussian Blur. Вводим значение радиуса 3pх. 

Шаг 20

Для следующего шага вам понадобится сетка с шагом в 1px. Переходим в Edit> Preferences> Guides &Grid и вводим значение 1 в окно Gridline every. Выбираем Rectangle Tool (M) и создаем прямоугольник размерами 280 на 1px. Разместите его, как показано на следующем рисунке, залейте линейным градиентом и поместите на задний план (Shift + Ctrl + [). 

Шаг 21

Добавляем для ленты фон. Выбираем Rectangle Tool (M), создаем форму заливаем  R = 190 G = 190 B = 190 и отправляем ее на задний план (Shift + Ctrl + [).

Шаг 22

Отключаем сетку (View> Show Grid) и привязку к сетке (View> Привязать к сетке). Выбираем тонкий прямоугольник, созданный в 20-ом шаге и создаем копию, которую помещаем на передний план (Ctrl + C> Ctrl + F). Выделяем ее и с помощью стрелки вниз перемещаем вниз на 1px . Переходим на панель Appearance и заливаем градиентом. как показано на рисунки ниже. 

Шаг 23

Выбираем Type Tool (T) и добавляем  текст.  Цвет  - R = 42 G = 92 B = 5, переходим в Effect> Stylize> Drop Shadow. Вводим данные, как показано ниже, и нажмите кнопку ОК.

Шаг 24

Выбираем прямоугольник, который используем для фона, и переходим на панель Appearance, добавляем вторую заливку и используем радиальный градиент. Добавляем третью заливку. Теп  Держите внимание на внешний вид панели и добавить третий заполнения этой формы. Переходим в панель Swatches, открываем  выпадающее  нажимаем Open Swatch Library> Patterns> Basic Graphics > Basic Graphics_Textures.

Откроется новое окно с набором встроенных шаблонов.  Убедитесь, что все еще выделен прямоугольник и третья заливка. Нужно уменьшить непрозрачность до 20%, изменить режим смешивания на Multiply и добавить текстуру «USGS 19 Land Inundation».

Шаг 25

И, наконец, быстрый метод, чтобы изменить цвет ленты. Выделяем все фигуры ленты и выбираем Edit > Edit Colors > Recolor Artwork. Нажимаем на кнопку Edit — нужно убедиться, что выбраны кнопки «Recolor Art» и «Link Color Harmony» и попробовать разные цвета. 

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

 

Автор — Andrei Marius

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

 

Возможно, вас также заинтересуют статьи:

 

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

1

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • dejurka-magazine
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции