Рисуем спидометр. Спидометр нарисовать
Как нарисовать спидометр в иллюстраторе
Тему вращения объектов я уже затрагивал в уроке Создаём фон с лучами в иллюстраторе, в этом уроке рассмотри её немного подробнее.Итак, рисуем вот такой спидометр.
Инструментом 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, после чего
рисуем следующие квадраты:
Нарисовав, сохраняем: Edit-Define Pattern:
Документ, можно закрыть.
2) Создаем новый документ, размером 400 * 400 px, заливаем 
цветом - #2e2e2e, после чего к слою применяем следующий настройки:
Получаем:
3) Новый слой, открываем направляющие и выставляем их по центру, рисуем 
круг, необходимого Вам размера:
заливаем линейным cooper 
Получаем:
после чего жмем Ctrl+U, и используем следующие настройки: Hue 205, Saturation 4, Lightness +6:
в итоге получаем:
4) На этом же слое с помощью 
рисуем, что- то, типа этого, не забыв потом удалить выделение:
К слою применяем следующие настройки:
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) Нарисуем в середине спидометра, подложку, расписывать не буду, приведу сразу картинки:
В итоге, получаем:
Автор: TIN231
glyk.ucoz.ru
