Главная Регистрация Вход
Приветствую Вас Гость!


Главная » 2011 » Январь » 29 » Создание иконки "Аптечка"
09:16
Создание иконки "Аптечка"

Создание иконки "Аптечка"

Создание иконки "Аптечка" \ Creating an icon "Kit"

программа: Adobe Illustrator CS4

сложность: для начинающих
затраченное время: 1час



Создание иконки "Аптечка"



Шаг 1

Откройте новый документ, выберите инструмент Rectangle Tool(M). Создайте прямоугольник, залейте его красным цветом, обводки уберите.

Создание иконки "Аптечка"



Шаг 2

Пройдите Effect>Stylize>Round Corners задайте радиус округления углов 30рх (в вашем случае параметр округления может измениться в
зависимости от размера прямоугольника). Разберите объект Object>Expand Appearance.

Создание иконки "Аптечка"



Сделайте копию объекта(Ctrl+C, Ctrl+F) и отложите пока в сторону, мы будем использовать её позже.

Шаг 3

Пройдите Effect>3D>Extrude & Bevel. Выставите настройки приведенные ниже.
Не забудьте добавить дополнительное освещение (New Light) и скос (Bevel).

Создание иконки "Аптечка"



Шаг 4

Добавим тень. Пройдите Effect>Stylize>Drop Shadow. Режим наложения (Mode) выставите Multiply, непрозрачность(Opacity) 63%,
смещение по оси Х = 4pt, смещение по оси Y = 11pt, размытие(Blur) поставьте 5pt, цвет для тени задайте «черный».

Создание иконки "Аптечка"



Шаг 5

С помощью инструмента Rectangle Tool(M) создайте прямоугольник. Это будет основа для креста, пока мы зальем его серым цветом, позже изменим цвет на «белый».

Создание иконки "Аптечка"



Шаг 6

Копируйте прямоугольник и вставьте копию поверх оригинала(Ctrl+C, Ctrl+F). С помощью инструмента Selection Tool(V) выберите копию и поверните ее на 90°
(сделайте это с зажатой клавишей Shift, что позволит ограничить шаг поворота на 45°).

Создание иконки "Аптечка"



Кстати можно было не копировать оригинал, а просто, щелкнуть по нему правой кнопкой мыши, пройти Transform>Rotate, ввести значения для Angle (Угол) и
нажать Copy (копировать). Это действие повернет фигуру на заданный угол и автоматически создаст её копию.


Шаг 7

С помощью инструмента Selection Tool(V) выберите обе фигуры. Пройдите в палитру "Pathfinder" и нажмите Unite(объединить).

Создание иконки "Аптечка"



Шаг 8

Примените к получившейся фигуре эффект Round Corner (смотрите Шаг 2).Радиус округления выставите 12рх.

Создание иконки "Аптечка"



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

Шаг 9

Пройдите Object>Expand Appearance, залейте крест белым цветом.

Создание иконки "Аптечка"



Шаг 10

Откройте палитру "Simbols" и перетащите туда, с помощью инструмента Выделение(V) крест. Введите название для нового символа, отметьте тип символа, как графический(Graphic).

Создание иконки "Аптечка"



Шаг 11

Выберите корпус аптечки и пройдите в палитру "Appearance". Щелкните левой кнопкой мыши по названию эффекта 3D Extrude & Bevel,
чтобы войти в окно редактирования эффекта.

В появившемся окошке щелкните по кнопке Map Art. Выберите в выпадающем меню "Simbol", символ,
который мы создали в предыдущем шаге. Для Surface (этот параметр отвечает за место, где будет располагаться налагаемый символ) выберите 1,
это поместит наш крест точно посередине прямоугольника. Нажмите «Ок».

Создание иконки "Аптечка"



Шаг 12

На картинке ниже, Вы видите, что у нас должно получиться на данный момент.

Создание иконки "Аптечка"



Шаг 13

Давайте создадим иллюзию, разделения нашего корпуса на две части, чтобы он выглядел совсем, как настоящий.
Вернитесь к копии, сделанной во втором шаге. Заливку уберите, задайте обводку толщиной 1pt. Цвет обводки выберите красный.

Создание иконки "Аптечка"



Шаг 14

Выберите объект и пройдите Object>Path>Outline Stroke.

Создание иконки "Аптечка"



Шаг 15

Примените к объекту эффект 3D Extrude & Bevel с настройками, как в Шаге 3 с небольшими различиями. Для параметра Bevel (скос) выставите None, а для Extrude Depth- поставьте 5pt.
Смотрите изображение ниже.

Создание иконки "Аптечка"



Шаг 16

С помощью Маски непрозрачности мы постараемся спрятать часть фигуры. Выберите инструмент Rectangle Tool(M) и создайте прямоугольник.
Залейте его линейным градиентом от белого к черному. Поместите квадрат так, чтобы он скрывал объект, который мы хотим спрятать.

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

Создание иконки "Аптечка"



Шаг 17

Выберите объект созданный в шаге 15 и прямоугольник с градиентом, после чего пройдите в палитру "Transparency".
Нажмите справа в верхнем углу на иконке вызова меню палитры и создайте Opacity Mask[

Создание иконки "Аптечка"



Шаг 18

Ниже показано, что должно у Вас получиться на данном этапе.

Создание иконки "Аптечка"



Шаг 19

Поместите объект, как показано ниже.

Создание иконки "Аптечка"



Возможно, что маска не совсем скроет то, что нам нужно, поэтому можно её отредактировать. Для чего выберите объект, к которому была применена маска, и пройдите в палитру "Transparency".
Вы увидите, что рядом с картинкой объекта есть изображение градиента, щелкните по нему левой кнопкой мыши, чтобы войти в режим редактирования маски.
В палитре "Appearance" выберите путь с градиентом, после чего пройдите в палитру "Gradient" и измените его настройки, чтобы получить удовлетворяющий результат.

Создание иконки "Аптечка"



Шаг 20

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

Создание иконки "Аптечка"



Шаг 21

Примените к фигурам 3D эффект. Настройки приведены ниже.

Создание иконки "Аптечка"



Шаг 22

С помощью инструмента Selection Tool(V)расположите объекты, как показано ниже, чтобы придать им вид замочка.

Создание иконки "Аптечка"



Шаг 23

Сгруппируйте все три формы(Ctrl+G) и сделайте копию группы(Ctrl+C, Ctrl+F). Поместите замочки на корпусе аптечки.

Создание иконки "Аптечка"



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


Шаг 24

Остался последний штрих. С помощью инструмента [Pen Tool(P) создайте форму, как на картинке ниже.
Залейте ее линейным градиентом от серого к белому и опять серый. В палитре "Transparency" поменяйте
режим наложения (Blending Mode) на Overlay, непрозрачность (Opacity) выставите 80%.

Создание иконки "Аптечка"




Заключение.

Это финальное изображение, как видите даже при размере иконки 32рх на 32рх, все остается понятным и легко узнаваемым, то есть эту иконку можно использовать где угодно.


Создание иконки "Аптечка"



автор: Simona Pfreundner
источник: vector.tutsplus.com

перевод: vaskam 

***


Mercedes на водороде

Hello Kitty ресторан

Золушки СамоаКошки GOTIKa
Адские монеты



Jenn-Anh NguyenГлоток энергии кофеНовая КОЛАФирмовый ТОРТАвтобусы на батарейках


[02.04.2019][DesiGn bLOg]
Как узнать - ты дизайнер или нет? (0)
[09.12.2015][Lessons PHOTOSHOP]
Рисуем анимацию в Photoshop и After Effects (2015) (0)
[23.10.2010][rastER KLipardy]
Косметика в HQ (0)
[12.02.2015][DesiGN SofT]
The Logo Creator 6.6 Final (0)
[03.12.2014][Lessons PHOTOSHOP]
Панорамная Фаст-моушен съемка своими руками (0)
[12.02.2015][video futage]
Broadcast Shapes Package - Project for After Effects (Videohive) (0)
[16.12.2015][Lessons PHOTOSHOP]
Видеокурс photoshop Retouch Man (2015) (0)
[12.02.2015][video futage]
Quicky Logo - Project for After Effects (0)
[03.12.2014][Lessons PHOTOSHOP]
Видеоуроки photoshop Выборочная коррекция (2014) (0)
[03.12.2014][Photoshop Actions]
50 Photoshop Action Scripts (0)
[06.12.2015][Lessons PHOTOSHOP]
Видеокурс Предметная съемка 2.0 (2015) (0)
[12.02.2015][DesiGN SofT]
Room Arranger 7.5.0.421 (2014) Rus/Eng (0)
[21.10.2015][Lessons PHOTOSHOP]
Видеокурс photoshop Art Wedding (0)
[12.02.2015][video futage]
Deep Eyes | 7 in 1 logo pack - Project for After Effects (Videohive) (0)
[12.02.2015][DesiGN SofT]
HyperSnap 7.29.02 + Portable (0)
[12.02.2015][DesiGN SofT]
PT Photo Editor 1.7.1 Standard Edition Rus Portable by SamDel (0)
[03.12.2014][Lessons PHOTOSHOP]
Видеокурс удаление объектов в фотошопе (0)
[06.12.2015][Lessons PHOTOSHOP]
Видеокурс по съемке и обработке цифровых фотографий (2015) (0)
[12.02.2015][DesiGN SofT]
Photomizer Retro 2.0.14.106 Portable by Valx (0)
[04.12.2015][Lessons PHOTOSHOP]
Tuts+ Premium - Creative Photo Effects in Adobe Photoshop (2015) (0)
 

Прикрепления:
Категория: Lessons Adobe Illustrator | Просмотров: 2057 | Добавил: Salta | Теги: аптечка 3D, рисунок аптечки, Иконка фотоаппарата, Аптечка - рисунок, знак аптечка в корел cdr, округление форм в photoshop, созданте круглых иконок
Всего комментариев: 1
1 McFLy  
класс полезный урок, всё что надо !

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]


Поиск







Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0
Яндекс цитирования
Rambler's Top100




[31.05.2010][Lessons PHOTOSHOP]
Создание кистей для рисования волос, меха, бород, комп.графика (7)
[11.06.2010][Lessons PHOTOSHOP]
Трехмерная надпись (8)
[17.06.2010][Lessons PHOTOSHOP]
Текст охваченный огнём, Stunning Text on Wild Fire Effect (6)
[03.12.2015][DesiGN SofT]
Sentaurus TCAD 2012 SP2 G-2012.06 SP2 на VMWare (1)
[29.05.2010][Lessons PHOTOSHOP]
Ночной город, спецэффект (2)
[13.02.2015][video futage]
VideoHive - Futuristic Logo Reveal 8351362 (0)
[12.02.2015][video futage]
Dark Circles Logo Reveal - Project for After Effects (Videohive) (0)
[03.12.2014][Lessons PHOTOSHOP]
Видеоуроки фотошоп Композиция Шубека (0)
[30.12.2012][DesiGn bLOg]
Маленькой ёлочке холодно зимой! (0)
[24.01.2013][vectOR KLipardy]
Black Vintage Cards Vector 2 (0)
[01.09.2013][vectOR KLipardy]
Stock: Website Template (0)
[29.05.2010][Lessons PHOTOSHOP]
судорга (абстракционная фантазия) (4)
[13.12.2015][Lessons PHOTOSHOP]
Вырезание объемных предметов в фотошоп (2015) (1)
[29.05.2010][rastER KLipardy]
Stock Photo: Drops, Splashes (1)
[29.05.2010][Lessons PHOTOSHOP]
Металлические трубки и провода (2)
[10.09.2011][Veb DeSiGn]
Template Monster – 11925 – Flash Template (0)
[30.12.2012][DesiGn bLOg]
Кофейные фантазии by Tomoko Shintani (0)
[09.11.2010][Styles Photoshop]
Более 150-ти стилей WEB 2.0 (1)



Пятница
19.04.2024
22:23


Copyright artpost and semantic product zanchi 2010-2011 © 2024