Рисуем спидометр. Спидометр нарисовать


Как нарисовать спидометр в иллюстраторе

Тему вращения объектов я уже затрагивал в уроке Создаём фон с лучами в иллюстраторе, в этом уроке рассмотри её немного подробнее.Итак, рисуем вот такой спидометр.

Как нарисовать спидометр в иллюстратореИнструментом Ellipse Tool рисуем круг. Чтоб круг был кругом, а не овалом, при рисовании удерживаем Shift.

Как нарисовать спидометр в иллюстраторе

Над кругом рисуем прямоугольник инструментом Rectangle Tool, который будет шкалой.

Как нарисовать спидометр в иллюстраторе

При помощи панели Align выравниваем оба объекта, предварительно их выделив.

Как нарисовать спидометр в иллюстраторе

Выделяем только прямоугольник, берём инструмент Rotate Tool и зажав Alt кликаем в центре круга.

Как нарисовать спидометр в иллюстраторе

Как нарисовать спидометр в иллюстраторе

В появившемся окне Rotate в поле Angle указываем значение 360/16. Это позволит нам нарисовать 16 элементов шкалы равномерно распределённых по кругу.

Как нарисовать спидометр в иллюстраторе

Нажимаем кнопку Copy и получаем одну копию прямоугольника. Чтоб получить остальные. нажимайте Ctrl + D до тех пор, пока круг не замкнётся.

Как нарисовать спидометр в иллюстраторе

Основная шакла есть, рисуем промежуточную. Верхний прямоугольник копируем (например зажмите Alt и потяните прямоугольник в сторону, отпустив получите копию) и немного уменьшаем.

Как нарисовать спидометр в иллюстраторе

Теперь опять с помощью Rotate Tool делаем копии, как я описал выше, но в окне Rotate указываем 360/80. Получаем полную шкалу.

Как нарисовать спидометр в иллюстраторе

Группируем шкалу. Выделяем по цвету или другим образом все элементы шкалы.

Как нарисовать спидометр в иллюстраторе

Группируем (клик правой клавишей).

Как нарисовать спидометр в иллюстраторе

Шкала готова.

Как нарисовать спидометр в иллюстраторе

Удаляем лишние элементы шкалы внизу. Инструментом Type Tool создаём текстовое поле и на панели Paragraph ставим выравнивание по центру.

Как нарисовать спидометр в иллюстраторе

Проставляем все числа.

Как нарисовать спидометр в иллюстраторе

Копируем круг (оставляя его на том же месте) и на панели Stroke делаем обводку по ширине шкалы.

Как нарисовать спидометр в иллюстраторе

И ставим заливку.

Как нарисовать спидометр в иллюстраторе

Переводим обводку а объект. Object – Path – Outline Stroke.

Как нарисовать спидометр в иллюстраторе

Разгруппируем (правый клик).

Как нарисовать спидометр в иллюстраторе

На панели Pathfinder нажимаем Exclude.

Как нарисовать спидометр в иллюстраторе

Получаем черновую версию спидометра.

Как нарисовать спидометр в иллюстраторе

Я ещё дорисовал стрелку.

Как нарисовать спидометр в иллюстраторе

Теперь нужно просто разукрасить и добавить деталей.

Как нарисовать спидометр в иллюстраторе

Вы можете скачать файл со спидометром этого урока.

vectordonkey.com

Рисуем иконку спидометра | КУВЬ ART MAGAZINE

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

Для начала создаем файл в фотошопе, размером 400 на 400 пикселов. Берем черный фон, и заливаем радиальным градиентом от центра. Градиент от очень-тёмно-серого цвета к черному. Получиться должен строгий фон с еле видным переходом. Но можно и без градиента.

Обычно я такие вещи добавляю просто для того чтобы оттенить иконку.

А, и что еще важно: поставьте направлящие чтобы четко показать центр документа. И желательно направляющими же ограничить квадрат где-то 200 на 200 пикселов.

Получиться должно вот такое изображение:

Поехали. Начнем с создания круга с помощью кривых. Обратите внимание на сюда:

Получаем вот такую окружность:

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

||||||||||

и так далее. Такой разделитель вызыается клавишей, которая обычно или слева от Backspace на новых клавиатурах, или над левым Шифтом на старых.

Нашли?

Получается вот такая шкала, большие черточки и поменьше:

А вот настройки текста для нее:

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

Ниже градуировки на последующих скриншотах вы увидите круг из точек. Им можно не заморачиваться, но делается он проще простого: копируем слой с градуировкой, растрируем его (правый клик на слое в палитре слоев, из меню выбираем «растрировать слой»), потом уменьшаем с зажатыми Альтом и Шифтом (то есть пропорционально и к центру). потом выделяем тоже с Альтом и Шифтом окружность так, чтобы зацепить 2 пиксела с начала рисочек. Инвертируем область выделения, и жмём Delete. Получаются красивые точки. Аналогично удаляем те их части, которые к центру торчат. На следующем скриншоте они видны довольно крупно.

А вот так делаем оцифровочку. Шрифт PF Agora хорош и каноничен, рекомендую его установить. Но если не найдете — попробуйте Tahoma.

Ниже всех этих слоев, над фоновым рисуем вот такой черный круг и задаем ему внутреннюю тень.

Обратите внимание, что угол падения света — строго сверху.

И делаем еще один слой, над кругом, его ставим обтравочной маской к кругу. В нем ставим очень мягкой кистью мазок, диаметр около 250–300 пикселов, и прозрачность около 10%.

Дальше дело за ободком. С ним нужно повозиться, причем больше всего со стилями слоев.

Рисуем круг под основанием спидометра:

Начнем с падающей тени:

Потом перейдем к тиснению и контуру. Контур нужно подредактировать, кликнув на иконке профиля.

Ободок-то металлический, делаем его серым:

И делаем обводку, градиентом. Таким образом покажем ее объемную характеристику, это оторвет вверху ободок от плоскости.

По центру ставим ось, в новом слое:

И тоже ее стилями, стилями. Градиент точно как на фоне:

Тень (ее не описываю, можно побольше и подальше от слоя) и тиснение:

Потом рисуем стрелку. Для нее новый слой пол кружком оси. И прямолинейным лассо создаем для нее область:

Ей придаем объем и падающую тень. Я еще мазок желтой кистью поставил в обтравочной маске для полного счастья.

Потом делаем блик на стекле.

Создаем окружность слоем-фигурой

Манипуляциями с центральной нижней точкой придаем характерную форму:

А потом делаем прозрачным, растрируем и протираем слегка:

Для того чтобы показать эффект гладкого металла на ободке делаем блик. Наверное, нужно было сверху его сделать, но я решил сделать снизу (вверху стрелка все-таки).

Создали такой вот эллипс и трансформируем (Warp’ом). При этом в настройках Варпа (если его выбрать, на панели настроек можно определить характер и все сделает за вас умный компьютер) выбирам нужный вариант.

Потом в меню «Фильтр» выбираем гауссово размытие, где-то 5 пикселов радиусом. И прозрачность слоя с бликом указываем процентов пятьдесят. А на фоновый слой можно накинуть еще и какой-нибудь полупрозрачный пиксельный паттерн, тогда появится фактура поверхности.

Вот такой вот спидометр получился. Хороших вам праздников! )

А оригинал статьи вот тут лежит.

Метки: дизайн-класс, иконка, иконографика, курс иконографики, обучение, технический дизайн

kuv.me

Рисуем спидометр Урок Фотошоп

уроки по фотошопу

1) Создаем новый документ, размером 4 * 4 px, после чего рисуем следующие квадраты:

уроки по фотошопу

Нарисовав, сохраняем: Edit-Define Pattern:

уроки по фотошопу

Документ, можно закрыть. 

2) Создаем новый документ, размером 400 * 400 px, заливаем

уроки по фотошопу

цветом - #2e2e2e, после чего к слою применяем следующий настройки: 

 Уменьшено: 85% от [ 598 на 441 ] — нажмите для просмотра полного изображения

уроки по фотошопу

Получаем:

уроки по фотошопу

3) Новый слой, открываем направляющие и выставляем их по центру, рисуем

уроки по фотошопу

круг, необходимого Вам размера:

уроки по фотошопу

заливаем линейным cooper

уроки по фотошопу

уроки по фотошопу

Получаем:

уроки по фотошопу

после чего жмем Ctrl+U, и используем следующие настройки: Hue 205, Saturation 4, Lightness +6:

уроки по фотошопу

в итоге получаем:

уроки по фотошопу

4) На этом же слое с помощью

уроки по фотошопу

рисуем, что- то, типа этого, не забыв потом удалить выделение:

уроки по фотошопу

К слою применяем следующие настройки:

 

 Уменьшено: 84% от [ 603 на 439 ] — нажмите для просмотра полного изображения

уроки по фотошопу

5) Выделяем имеющийся круг, увеличиваем его размер, примерно на 3 px, создаем новый слой, и заливаем

уроки по фотошопу

черным цветом, после чего, Ctrl+клик мышки на старом кругу + Del, далее Filtr-Blur-Gaussion Blur со значением 2, имеем:

уроки по фотошопу

уроки по фотошопу

6) Новый слой, рисуем круг

уроки по фотошопу

, примерно на 30 px больше, чем остальные, заливаем

уроки по фотошопу

цветом - #2e2e2e, после чего к слою применяем следующий настройки:

уроки по фотошопу

уроки по фотошопу

7) Новый слой, рисуем круг

уроки по фотошопу

, заливаем линейным cooper

уроки по фотошопу

, после чего жмем Ctrl+U, и используем следующие настройки: Hue 205, Saturation 4, Lightness +6, выставляем также обводку в 1 px, церным цветом,в итоге получаем:

уроки по фотошопу

уроки по фотошопу

8) Рисуем разметку спидометра: можно в ручную. При этом, чтобы правильно распределить деления, в центре нужно нарисовать shape tool'ом звезду с нужным количеством лучей.

уроки по фотошопу

уроки по фотошопу

9) Теперь пишем, циферблат:

уроки по фотошопу

10) Напишем, что-нибуть в информационном окне:

уроки по фотошопу

11) Нарисуем в середине спидометра, подложку, расписывать не буду, приведу сразу картинки:

уроки по фотошопу

уроки по фотошопу

уроки по фотошопу

уроки по фотошопу

уроки по фотошопу

уроки по фотошопу

уроки по фотошопу

В итоге, получаем:

уроки по фотошопу

photoshopic.com

Спидометр - Уроки Photoshop - Каталог статей

1) Создаем новый документ, размером 4 * 4 px, после чего pencil.gif рисуем следующие квадраты:

Рисуем спидометр

Нарисовав, сохраняем: Edit-Define Pattern:

Рисуем спидометр

Документ, можно закрыть.

2) Создаем новый документ, размером 400 * 400 px, заливаем paint_bucket.gif цветом - #2e2e2e, после чего к слою применяем следующий настройки:

Рисуем спидометр

Получаем:

Рисуем спидометр

3) Новый слой, открываем направляющие и выставляем их по центру, рисуем elliptical_marquee.gif круг, необходимого Вам размера:

Рисуем спидометр

заливаем линейным cooper gradient.gif

Рисуем спидометр

Получаем:

Рисуем спидометр

после чего жмем Ctrl+U, и используем следующие настройки: Hue 205, Saturation 4, Lightness +6:

Рисуем спидометр

в итоге получаем:

Рисуем спидометр

4) На этом же слое с помощью add_anchor_point.gif рисуем, что- то, типа этого, не забыв потом удалить выделение:Рисуем спидометрК слою применяем следующие настройки:Рисуем спидометр5) Выделяем имеющийся круг, увеличиваем его размер, примерно на 3 px, создаем новый слой, и заливаем paint_bucket.gif черным цветом, после чего, Ctrl+клик мышки на старом кругу + Del, далее Filtr-Blur-Gaussion Blur со значением 2, имеем:Рисуем спидометр

Рисуем спидометр6) Новый слой, рисуем круг elliptical_marquee.gif, примерно на 30 px больше, чем остальные, заливаем paint_bucket.gif цветом - #2e2e2e, после чего к слою применяем следующий настройки:Рисуем спидометр

Рисуем спидометр7) Новый слой, рисуем круг elliptical_marquee.gif, заливаем линейным cooper gradient.gif, после чего жмем Ctrl+U, и используем следующие настройки: Hue 205, Saturation 4, Lightness +6, выставляем также обводку в 1 px, церным цветом,в итоге получаем:Рисуем спидометр

Рисуем спидометр8) Рисуем разметку спидометра: можно в ручную. При этом, чтобы правильно распределить деления, в центре нужно нарисовать shape tool'ом звезду с нужным количеством лучей.Рисуем спидометр

Рисуем спидометр

9) Теперь пишем, циферблат:Рисуем спидометр10) Напишем, что-нибуть в информационном окне:Рисуем спидометр11) Нарисуем в середине спидометра, подложку, расписывать не буду, приведу сразу картинки:Рисуем спидометр

Рисуем спидометр

Рисуем спидометр

Рисуем спидометр

Рисуем спидометр

Рисуем спидометр

Рисуем спидометр

В итоге, получаем:

Рисуем спидометр

Автор: TIN231

glyk.ucoz.ru