Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создаем flat-иконки в Adobe Illustrator

25 июля 2013 | Опубликовано в Уроки | 20 Комментариев »

В этом уроке речь пойдет о плоском дизайне. Мы будет создавать flat-иконки  в Adobe Illustrator. Умение создавать простые иконки может вам пригодиться в любом проекте, когда вам в быстрые сроки нужно создать набор простых иконок.

 

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

 

1. Настройка документа

Давайте для начала создадим новый документ с размерами 500 х 500px . Давайте для начала настроем сетку, которая поможет нам создать  ровные формы — создаем сетку через каждый 1px и включаем привязку к сетке Snap to Grid.

chris-flat-1

2. Создаем иконку увеличения

При изготовлении иконок нужно учитывать, где будут использоваться иконки. В уроке будем создавать иконки размером 128×128 пикселей. Мы будем придерживаться основных цветовых размеров, создавать острые углы с применением теней к формам.

Шаг 1

Создадим основные формы будущей иконки, далее отрегулируем стили, используя несколько Graphic Styles. Выбираем инструмент  и создаем прямоугольник

Для начала выбираем инструмент Rounded Rectangle Tool и создаем прямоугольник размерами  20 х 80.

 

chris-flat-2-1

Шаг 2

Выбираем инструмент Ellipse Tool (L) и создаем несколько кругов. Размеры для кругов  70 x 70px, потом 55 x 55px, потом 40 x 40px и наконец  15 x 15px. Размещаем их, как видим на рисунке ниже.

chris-flat-2-2

Шаг 3 

Выбираем инструмент создаем несколько прямоугольников, которые будут размещены, как показано на скриншоте ниже. Высота и ширина прямоугольников не будет иметь значение — они должны просто быть размещены в центре и мы будем определять области пересечения. Также мы будем создавать тень. Рисуем квадрат, поворачиваем его на 45 º, чтобы края нижней линии совпадали с нижним кругом и нижним прямоугольником с закругленными углами.

chris-flat-2-3

Шаг 4

С помощью панели Pathfinder, будем использовать кнопки  Unite, Minus Front и Intersect, чтобы создать формы для будущих теней. Нужно также помнить, что при использовании этих документов, нам придется дублировать формы, для получения нужных результатов. На скриншоте ниже мы видим красные и белые формы (белые формы потом станут нашими тенями).

chris-flat-2-4

Шаг 5

Теперь приступим к созданию тени. Дублируем самый большой круг и его ручку и объединим его в одну форму. Создайте копию новой формы и сместим на

chris-flat-2-5

Шаг 6 

Так как наша иконка сделана в стиле Flat , нужно добавить некоторые детали. Выберите главные формы (которые закрашены в красный цвет) и дважды дублируйте их. С помощью стрелок на клавиатуре поднимите верхнюю копию на 1px вверх. Размещение копии будет зависеть от размещения элемента. Например, нижнюю форму ручки сдвинем немного влево. Внутреннюю круглую форму сдвинем немного направо. Выберите две копии и нажмите кнопку Minus Front. У вас должны получиться следующие формы( зеленые объекты на скриншоте ниже).

chris-flat-2-6

Шаг 7 

С основными формами закончили. Давайте определим некоторые стили к ним. Выбираем все элементы, с которых состоит лупа и повернем их на 45º против часовой стрелки.

Теперь выбираем все элементы. которые будут создавать наши тени. Это белые формы на ручке и круглой форме, а также тень. Заполняем участки черным цветом и снижаем непрозрачность до 15%. Не забудьте удалить обводку. Как только это сделали, перейдите к  Window > Graphic Styles и кликнете на кнопке New element в правом нижнем углу, чтобы создать графический стиль.

 

chris-flat-2-7

Шаг 8 

Выберите форму ручки и перейдите на панель  Appearance (Window > Appearance). Введите информацию, как показано на скриншоте ниже. Основной цвет — плоский серый, далее добавляем другой слой поверх и заливаем его черно-белым градиентом с углом 45º  и непрозрачностью Opacity на 25%. Установите режим наложения на Overlay. Сохраните настройки как графический стиль.

chris-flat-2-8

Шаг 9

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

chris-flat-2-9

Шаг 10

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

chris-flat-2-10

Шаг 11

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

chris-flat-2-11

Шаг 12

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

chris-flat-2-12

 

3. Создаем иконку шестеренки

Шаг 1 

Давайте создадим контуры для нашей следующей иконки. Выбираем инструмент Rounded Rectangle Tool  и создаем прямоугольник размерами 20 х 110px, привязываем его к рабочей области. Три раза дублируем эту форму  и разместим копии под углом 45 º относительно друг друга.

chris-flat-3-1

Шаг 2

Далее выбираем Ellipse Tool (L) и создаем несколько кругов. Размеры кругов — 90 x 90px,60 x 60px и 30 x 30px. Размещаем их, как видим на скриншоте ниже.

chris-flat-3-2

Шаг 3

Выберите форму цветка и самый нижний круг и объединим их. Затем выбираем маленький круг и дублируем его. Теперь выберем один из маленьких кругов дублированных кругов и большую форму, нажмите кнопку Minus Front .

chris-flat-3-3

Шаг 4

Давайте снова приступим к созданию форм будущих теней. Смотрим на скриншоты внизу и создаем подобные фигуры. С помощью панели Pathfinder создаем дополнительные фигуры. Эти шаги нам уже знакомы с предыдущей иконки.

 

chris-flat-3-4

Шаг 5

Создадим тень. Дублируйте нижнюю форму и сместите ее на  15px вверх. Смешиваем две формы, затем нажимаем Expand и Unite.

 

chris-flat-3-5

Шаг 6

Создаем дополнительные формы (с помощью копирования и перемещения нужных форм, как делали это с предыдущей иконкой).

chris-flat-3-6

Шаг 7

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

chris-flat-3-7

4. Создаем иконку глаза

Шаг 1

Для создания иконки глаза нам понадобиться множество кругов. Выбираем инструмент Ellipse Tool (L) и создаем круги размерами 120 х 120px, 50 х 50 пикселей , и, наконец, 20 х 20 пикселей .

chris-flat-4-1

 

Шаг 2

Выбираем самый большой круг и нажимаем Convert Anchor Tool (Shift + C) . Выберите две точки с левого и правого края и кликнете по ним инструментом, чтобы сделать круг острым. Теперь выбираем Direct Select Tool (A) и перемещаем верхнюю опорную точку на 20px, а нижнюю на 20px вверх.

chris-flat-4-2

Шаг 3

Теперь выберите все эти формы и поверните их на 45 ° по часовой стрелке. После того, как создадим все тени и блики, повернем форму в другую сторону.

chris-flat-4-3

Шаг 4

Выбираем инструмент Ellipse Tool (L) и создаем овал размерами 15 х 20, выравниваем его, как показано на скриншоте ниже.

chris-flat-4-4

Шаг 5

Создаем тени и блики, как делали это раньше. Разделяем формы прямоугольником и используем инструменты панели Pathfinder.

chris-flat-4-5

Шаг 6

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

chris-flat-4-6

 

5. Создаем Чат-иконку

Шаг 1 

Мы на полпути к созданию наших иконок. Приступим к созданию следующей. С помощью инструмента  Rounded Rectangle Tool  создаем прямоугольник размерами 80 x 75px.

chris-flat-5-1

Шаг 2

С помощью Rectangle Tool (M)  создаем прямоугольник размерами 25 х 15, выровняем его по центру и смещаем на 15px справа.

chris-flat-5-2

Шаг 3

С помощью инструмента Ellipse Tool (L) создайте три круга размерами  15 х 15 и выравнивание относительно центра прямоугольника с закругленными углами, как показано ниже.

chris-flat-5-3

Шаг 4

Выбираем инструмент Direct Selection Tool (A), нижнюю левую точку прямоугольника и удаляем ее. Это позволит нам создать треугольник. Убедитесь, что все пути закрыты.

chris-flat-5-4

Шаг 5

Выберите треугольник и прямоугольник о объедините их. Теперь выберите эту фигуру, дублируйте ее и отразите по горизонтали. Сдвиньте ее  вправо и вниз на 15 px.

chris-flat-5-5

Шаг 6

Как мы уже делали с иконкой глаза, выбираем все фигуры и поворачиваем на 45 ° . Будем работать над тенями и бликами.

chris-flat-5-6

Шаг 7

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

chris-flat-5-7

Шаг 8

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

chris-flat-5-8

6. Создаем значок часов

Шаг 1 

Переходим к созданию часов.С помощью Ellipse Tool (L) создайте несколько кругов размерами 100x100px, 75x75px и 10x10px. Размещаем их как показано ниже.

chris-flat-6-1

Шаг 2

Создаем стрелки часов. Выберите Rectangle Tool (M)  и создайте прямоугольники размерами 10×30 и 10х20px и 2 х 30 px.

chris-flat-6-2

Шаг 3

Переходим на инструмент Rotate Tool ® и выбираем длинные тонкие прямоугольники. Наводим курсор на центральную точку формы и перемещаем ее вниз. Поворачиваем форму на  135 º по часовой стрелке. Подобное сделайте и с коротким прямоугольником.

chris-flat-6-3

Шаг 4

Выберите маленький круг совместно со стрелками и объедините формы. Теперь выбираем все формы и поворачиваем их на 45 º .

chris-flat-6-4

Шаг 5

Разрезаем формы на две части, как это делали раньше.

 

chris-flat-6-5

Шаг 6

Возвращаем форме прежнее месторасположение и применяем графические стили.  Циферблат будет светло-серым. Минутная и часовая стрелка будет иметь серый цвет, секундная — синий.

chris-flat-6-6

7. Создать значок календаря

Шаг 1  

Вот мы приступили и к последнему нашему значку. Выбираем инструмент  Rounded Rectangle Tool и создаем прямоугольник размерами 90 x 80px.

chris-flat-7-1

 

Шаг 2

Дублируйте этот прямоугольник с закругленными углами и выровняйте по правому нижнему углу. Дублируйте прямоугольник и разместите его вверх и влево на 20px . Находясь в панели Pathfinder, со списка иконок выберите Divide. Затем переключаемся на инструмент Direct Selection Tool (A) выберите внешнюю форму и удалите ее.

chris-flat-7-2

Шаг 3

Выберите инструмент  Rectangle Tool (M), создайте прямоугольник размерами 90 х 25 пикселей и разместите его в верхнюю часть формы. Дублируем фигуру и нажимаем кнопку Intersect с панели Pathfinder.

chris-flat-7-3

Шаг 4

Создаем два прямоугольника с закругленными углами размерами 15 x 30px. Разместите на верхней части формы, как показано на скриншоте ниже.

chris-flat-7-4

Шаг 5

Переходим на   Type Tool (T) и вводим число. Можете использовать любое число.  В моем случает это будет "9". Вместо шрифта будем использовать "Helvetica"  с размером 50px. Переходим в Object > Expand и конвертируем шрифт в путь.

chris-flat-7-5

Шаг 6

Выделяем все фигуры и поворачиваем их на 45 º . Теперь добавляем тени и блики, как мы это делали раньше. Создадим также тень в нижнем углу. Для этого просто создадим прямоугольник аналогичной высоты и нажмем кнопку Intersect с нижним прямоугольником.

chris-flat-7-6

 

Шаг 7

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

chris-flat-7-7

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

Добавляем темно-серый цвет в качестве цвета фона. Не стесняйтесь экспериментировать.

Sorta-flat-full

 Автор - Chris Carey
Перевод — Дежурка



Комментарии

  1. Demi
    Thumb up Thumb down 0

    У флэт — плоский, тень — объем))) или я неправ ?))) прикольные эконки!

    Ответить

    marina Ответ:

    Thumb up Thumb down +1

    Да, вы правы. В оригинале урока звучит “Almost Flat” –"почти плоские".

    Ответить

  2. Dima2rius
    Thumb up Thumb down +8

    Урок не полный, много пропущено, я например хорошо знаю CS3 illustrator, функции тежи в принципе, но у меня по вашим методом ни чего не вышло! потому, что в некоторых местах сокращен текст, упущено именно самое главное!

    Ответить

  3. lezgiman
    Thumb up Thumb down +1

    а что со скринами? если вариант, то перезалейте пожалуйста скриншоты.

    Ответить

  4. Аристарх
    Thumb up Thumb down +1

    Картинки слетели, почините, ну пожалуйста :(

    Ответить

  5. vigoart
    Thumb up Thumb down +1

    Картинки слетели :-x

    Ответить

  6. Merziuz
    Thumb up Thumb down 0

    PcfuvB pills2sale.com viagra online

    Ответить

  7. Bradford
    Thumb up Thumb down 0

    Best Site Good Work what is the dosage for prilosec otc Brad Stevens, the shocker of all hires when he became the Celtics’ 17th head coach, made out the best, signing a six-year, $22-million contract. Even if it turns into a mistake to have left Butler University, at least he’ll be handsomely compensated.

    Ответить

  8. Jarod
    Thumb up Thumb down 0

    In a meeting testosterone enanthate 300 results It seems such big questions are not for this campaign, but they will resurface. Greece awaits a further rescue. Slovenia may well need a bailout. Portugal and Cyprus, almost certainly, will need further support. Italy cannot escape its chronic instability despite the best efforts of Prime Minister Enrico Letta.

    Ответить

  9. Trinidad
    Thumb up Thumb down 0

    Will I be paid weekly or monthly? xtramaster como funciona As tax reform heats up and there are calls to do away with this tax break or that, let's stop and reconsider what's on the table. To critics, the credit union tax exemption represents $2 billion a year in lost revenue to the taxpayers. But if looked at in the right way – as a modest public investment in a safer and sounder financial system – they are a bargain.

    Ответить

  10. Payton
    Thumb up Thumb down 0

    Do you play any instruments? nox factory reset Library aide Lita Casey awards Tyler Weaver, 9, a t-shirt Thursday, August 15, 2013, for being the top reader in the Hudson Falls Public Library summer reading club. Casey was reportedly fired on Monday.

    Ответить

  11. Bernie
    Thumb up Thumb down 0

    Through friends pristiq kick in time J.P. Morgan's policy was to wait a certain period of time after which borrowers stopped paying and then sue for those old debts, in some cases by referring cases to outside law firms. In 2010, only 1% of the bank's delinquent accounts were actually referred to litigation, according to the document.

    Ответить

  12. Cecil
    Thumb up Thumb down 0

    How many would you like? viagra apotheke polen Still, there are challenges associated with speeding up a drug's development timeline. For one thing, other nations might not be willing to approve the products based on the FDA's more flexible clinical trial standards under the breakthrough designation.

    Ответить

  13. Delmar
    Thumb up Thumb down 0

    We were at school together how often can you rotate tylenol and motrin for fever O’Connor said he is fascinated by the lore and mythology surrounding the moon and the stars — noting that during the daytime, the universe is largely hidden from view, but at night “the storybook opens up.”

    Ответить

  14. Samual
    Thumb up Thumb down 0

    I do some voluntary work medrol dose pack affect kidneys Many worry the grid isn't fully prepared for the new and emerging challenges, even though an analysis conducted for The Associated Press shows maintenance spending has steadily increased since North America's largest blackout.

    Ответить

  15. Seymour
    Thumb up Thumb down 0

    What do you do for a living? enable wifi calling samsung s20 Based on Bloomberg’s move, Manhattan Borough President and would-be controller Scott Stringer gave conditional blessing to the rezoning. Now it’s up to the City Council to get behind a plan that will be vital to keeping New York at the forefront of global commerce.

    Ответить

  16. Jimmy
    Thumb up Thumb down 0

    We'll need to take up references pedagio imigrantes preo 2018 French Foreign Minister Laurent Fabius said world powers must respond with force if it is proved that Syria's government was responsible for the deadliest chemical attack on civilians in a quarter-century.

    Ответить

  17. Tommie
    Thumb up Thumb down 0

    Canada>Canada ciprofloxacin 400 mg/200ml Another Allerca customer told «The Lookout» team that he was still waiting for his cat despite purchasing it years ago. He recounted wiring Brodie $4,000 in October 2008, "and he scheduled a delivery date one or two weeks later and the cat did not arrive, and he scheduled another delivery date for the cat one or two weeks later and the cat did not arrive. "

    Ответить

  18. Vincent
    Thumb up Thumb down 0

    How many would you like? ipratropium bromide inhaler side effects Troubles at home prompted a teenaged Manning to move toPotomac, Maryland, to live with his aunt, said Debra vanAlstyne, the aunt who took him in. She recalled that Manning hadjoined the Army in the hope of going to college on the GI bill,after having difficulty balancing classes and a job atStarbucks.

    Ответить

  19. johnan
    Thumb up Thumb down 0

    cvDPPS xnxx.in.net xnxx videos

    Ответить

Оставить ответ


пять + = 14

Вставить изображение