Рисуем спидометр используя Фотошоп. Рисунок спидометр
Рисуем спидометр используя Фотошоп
В этом уроке мы разберем, как можно нарисовать спидометр используя Фотошоп.
ВНИМАНИЕ: Урок предназначен для уже продвинутых пользователей Фотошопа.
Финальный результат
Приступаем к уроку Фотошопа
Создаем документ.
Создаем новый документ (Ctrl+N) размером 800х600 пикселей, цвета фона любой. Задаем рабочий цвет #353535, фоновый цвет #161616, выбираем инструмент Gradient Tool 
(Инструмент Градиент / Клавиша 'G'), на панели настроек отмечаем «радиальный градиент».
Протягиваем градиент из центра к краю документа.
Должно получиться примерно следующее: ↓
Рисуем шкалу спидометра.
На каждом спидометре есть деления, показывающие, с какой скоростью вы едете. Мы можем нарисовать их с помощью векторных масок и контуров, но есть и более простой способ – использовать круглый контур и текст.
Выбираем инструмент Ellipse Tool 
(Инструмент Овальная форма / Клавиша 'U'), на панели настроек отмечаем Paths (Контур).
Посередине нашего документа создаем контур в виде круга.
Подсказка: ↓
Удерживайте клавишу Shift, когда рисуете круг, это поможет создать именно ровный, правильный круг, а не эллипс.
(Еще одна подсказка: на панели настроек прячется менюшка Ellipse options (опции эллипса, выпадающий список, отмечен зеленым на рисунке выше), где можно задать, что круг у нас будет именно кругом, а не эллипсом, а также задать создание фигуры от центра и всякие другие полезности).
Итак, круг мы нарисовали, теперь выберем инструмент Horizontal Type Tool 
(Инструмент 'Горизонтальный текст' / Клавиша 'T'). Подвигайте курсором над вашим кругом, и вы заметите, что курсор меняет свой внешний вид и становится похож на ряд точек, расположенных по кривой. Когда курсор примет такой вид, кликаем левой клавишей мыши и начинаем печатать. Текст будет размещен вдоль контура.
Выбираем шрифт Verdana, размер 12 пикселей, и добавляем несколько вертикальных линий, используя соответствующий символ на клавиатуре.
Потом выделяем каждую пятую линию и увеличиваем ее, меняя размер шрифта на 18 пикселей. На рисунке все это наглядно показано.
Когда все линии готовы, выделяем последнюю группу линий и перекрашиваем их в красный цвет.
Используя уже знакомую нам технику, создаем еще один круглый контур чуть меньшего диаметра, расположенный внутри первого и с помощью инструмента Horizontal Type Tool (Инструмент 'Горизонтальный текст' / Клавиша 'T') размещаем по контуру точки.
(прим.: для удобства можно перейти на вкладку Paths (Контуры), выбрать в меню Edit > Transform path > Scale (Редактирование > Трансформирование контура > Масштабирование) и изменить размер круга, задав, например, 95%).
Наконец, чтобы придать шкале спидометра законченный вид, добавим цифры и любой дополнительный текст на ваше усмотрение.
Рисуем внутренний круг спидометра.
Выбираем инструмент Ellipse Tool (Инструмент Овальная форма / Клавиша 'U') и на новом слое, расположенном под слоем со шкалой, рисуем круг. Он должен быть чуть больше, чем наша шкала с делениями.
Далее, применяем к получившемуся кругу следующие эффекты слоя (Blending Options (Параметры наложения)): ↓
Inner Shadow (Внутренняя тень): ↓
Gradient Overlay (Наложение градиента): ↓
При добавлении градиентной заливки, смещаем центр градиента влево вверх, проводя мышкой с нажатой левой клавишей по нашему кругу.
Вот что у нас должно получиться: ↓
Рисуем внешний хромированный круг.
Снова воспользуемся инструментом Ellipse Tool (Инструмент Овальная форма / Клавиша 'U') и нарисуем еще один круг, опять немного больше предыдущего. Слой с новым кругом должен находиться под предыдущим слоем.
Применяем к этому слою следующие эффекты слоя (Blending Options (Параметры наложения)): ↓
Drop Shadow (Тень): ↓
Bevel and Emboss (Тиснение и рельеф): ↓
Contour (Контур): ↓
Satin (Глянец): ↓
Color Overlay (Наложение цвета): ↓
Stroke (Обводка): ↓
Должно получиться что-то вроде этого: ↓
Переходим к созданию стрелки спидометра. Начнем с ее основания.
С помощью инструмента Ellipse Tool (Инструмент Овальная форма / Клавиша 'U') рисуем маленький круг в центре нашего спидометра.
Применяем к данному слою следующие стили слоя (Blending Options (Параметры наложения)): ↓
Drop Shadow (Тень): ↓
Bevel and Emboss (Тиснение и рельеф): ↓
Gradient Overlay (Наложение градиента): ↓
Вот что должно получиться: ↓
Снова выбираем инструмент Ellipse Tool (Инструмент Овальная форма / Клавиша 'U') и рисуем маленький круг белого цвета (#ffffff) внутри предыдущего круга. Устанавливаем непрозрачность 5%.
Рисуем стрелку спидометра.
С помощью инструмента Ellipse Tool (Инструмент Овальная форма / Клавиша 'U') рисуем маленький кружок внутри круга, созданного в предыдущем шаге.
Потом выбираем инструмент Pen Tool 
(Инструмент Перо / Клавиша 'P'), на панели настроек кликаем по иконкам Paths (Контуры) и Add to Shape Area («Добавить к области фигуры»).
Немного увеличим наш рисунок, на панели Layers (Слоев) кликаем по маске слоя и рисуем стрелку, начиная ее с одной стороны круга и завершая на другой.
После этого применяем к этому слою следующие эффекты (Blending Options (Параметры наложения)): ↓
Drop Shadow (Тень): ↓
Inner Shadow (Внутренняя тень): ↓
Outer Glow (Внешнее свечение): ↓
Gradient Overlay (Наложение градиента): ↓
Мы должны получить примерно вот что: ↓
Оживим наш рисунок, добавив блики.
И напоследок, я покажу вам, как добавить блики. Выберем инструмент Polygonal Lasso Tool 
(Инструмент Многоугольное лассо / Клавиша 'L') и сделаем выделение, показанное на изображении ниже: ↓
Залейте выделение белым цветом (#ffffff) (предварительно неплохо бы создать новый слой), потом загрузите выделение внутреннего круга спидометра.
Подсказка: ↓
Для того, чтобы быстро загрузить выделение объекта, просто кликните по его иконке на панели Layers (Слоев), удерживая клавишу Ctrl. Другой способ – выбрать в меню Select > Load Selection (Выделение > Загрузить выделенную область).
Теперь идем в меню Select > Inverse (Выделение > Инверсия выделения / Сочетание клавиш 'Ctrl+Shift+I'), и удаляем лишнее, нажав клавишу Del. У нас должна остаться часть белой фигуры, ограниченная кругом спидометра.
Снова выбираем инструмент Polygonal Lasso Tool (Инструмент Многоугольное лассо / Клавиша 'L') и создаем выделение посреди белой фигуры. Удаляем это выделение, нажав Del.
Далее, добавляем градиентную заливку, оставив параметры заливки по умолчанию, и устанавливаем непрозрачность слоя 5%. Должно получиться что-то вроде этого: ↓
Теперь мы нарисуем большой блик на ободке нашего спидометра. Воспользуемся инструментом Elliptical Marquee Tools 
(Инструмент 'Овальная область выделения' / Клавиша 'M') и создадим эллипс на внешнем круге спидометра слева вверху. Зальем выделение белым цветом (#ffffff).
Выберем в меню Edit > Transform > Warp (Правка > Трансформация > Деформация), в выпадающем меню выберем Arc (Дугой).
Переместим опорную точку так, чтобы получить выгнутую фигуру, затем с помощью команды Free Transform (Свободная трансформация / Ctrl+T) повернем ее так, чтобы он соответствовал изгибу внешнего круга.
Размоем полученную фигуру, выбрав в меню Filter > Blur > Gaussian Blur (Фильтр > Размытие > Размытие по Гауссу) и указав радиус 3-4 пикселя. Установим непрозрачность слоя примерно 70%.
Заключение.
Ну вот мы и закончили этот урок. Надеюсь, вам понравилось. Вы можете продолжить его и, используя освоенную технику, нарисовать тахометр, или любую другую деталь приборной панели, например эти маленькие светящиеся символы, или индикатор уровня топлива.
Финальный результат
Урок подготовлен для Вас командой сайта PhotoshopPro.ru
photoshoppro.ru
Как нарисовать спидометр в иллюстраторе
Тему вращения объектов я уже затрагивал в уроке Создаём фон с лучами в иллюстраторе, в этом уроке рассмотри её немного подробнее.Итак, рисуем вот такой спидометр.
Инструментом 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
Рисуем спидометр Урок Фотошоп
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
