Нарисовать секундомер: Как нарисовать секундомер в Illustrator

Как нарисовать секундомер в Illustrator

В этом уроке мы узнаем как можно быстро нарисовать секундомер (или часы) в Illustrator’е. Урок будет особенно полезным для тех, кто рисует для стоковых сайтов.

Шаг 1. Установки

Создадим новый документ размером 600х600 пикселей. Убедитесь, что галочка выравнивания по сетке отключена. Затем включим сетку (View > Show Grid) и сделаем привязку к ней (View > Snap to Grid). В настройках выставим размер ячейки сетки в 5 пикселей (Edit > Preferences > Guides > Grid) и проставим нужные нам единицы измерения (Edit > Preferences > Unit > General).

Шаг 2. Рисуем форму

Создадим круг (L) радиусом 140 пикселей и зальем его градиентом, как показано на рисунке. Не снимая выделения перейдем на панель Вид (Appearance). Добавим обводку в 4pt и применим к ней: Обводка — внутри, прозрачность 30% Soft light. Все операции делаются в окне Вид, через нажатие на слово Обводка (Stroke) и в её свойствах.

Продублируем наш круг (Ctrl+C -> Ctrl+F). Создадим эллипс 190 x 110px без обводки и для удобства зальем его черным. Поместим его, как показано на рисунке (нижний край на одну клеточку ниже центра окружности), выделим оба объекта и через окно Обработка контуров (Pathfinder) вырежем верхний из нижнего.

Выделим получившийся объект и в панели Вид удалим его обводки. Далее зальем его черным и выберем прозрачность 20%, Soft light.

Шаг 3. Рисуем циферблат

Создадим окружность радиусом 120px в центре нашей формы и зальем градиентом, как показано на рисунке. В панели вид применим к заливке фильтр Внутреннее свечение (Inner Glow) со значениями, показанными на рисунке. Добавим обводку в 2pt с цветами R=165 G=175 B=178 и применим к ней эффект Тень (Drop Shadow) с указанными ниже параметрами. Добавим еще одну обводку толщиной 1pt и с цветами R=135 G=145 B=148.

Далее нам понадобится сетка в 1 пиксель. идем в настройки и меняем значение с 5 на 1 (Edit > Preferences > Guides & Grid).

Продублируем обводку через ту же панель Вид и зададим ей толщину 2pt. Повторим действие, задав толщину 1pt. Инструментом Перо (Р) налисуем линию высотой в 5 пикселей и толщиной обводки в 2pt. Зададим обводке цвет R=176 G=184 B=186. Поместим линии на «60 секунд» нашего будущего циверблата. Продублируем линию и поместим её на «30 секунд». Сгруппируем (Ctrl+G) и применим трансформацию, как показано на рисунке (Ctrl+Alt+Shift+D)

Удилиним линию на «60 секндах» до 7px и зададим ей цвет обводки R=135 G=145 B=148. Продублируем её на «30 секунд», сгруппируем и трансформируем, как показано на рисунке.

Шаг 4. Рисуем стрелку

Нарисуем прямоугольник (М) размером 4 x 52px точно под отметкой «60 секунд». Инструментом Частичное выделение (А) сдвинем верхние точки на один пиксель к центру. Нарисуем окружность радиусом радиусом 1 пиксель и через панель Обработка контуров объединим стрелку с окружностью. Зальем результат цветом R=50 G=50 B=50. Через панель Вид создадим в объекте новую заливку, поставим ей белый цвет. Выставим для неё режим смешивания Soft light. Через меню Эффекты уменьшим её на 1px (Effect > Path > Offset Path)

Вновь выставим сетку в 5 пикселей. Нарисуем окружность радиусом 10 пикселей и зальем градиентом, как показано на рисунке. Добавим еще одну заливку с цветом R=241 G=236 B=232. Сместим её на -3 пикселя. Сгруппируем стрелку с получившейся «заклепкой» (Ctrl+G) и добавим тень новому объекту.

При желании стрелку можно повернуть на нужное нам время инструментом Поворот (R)

Шаг 5. Рисуем стекло

Нарисуем окружность радиусом 120 пикселей и накладем на неё белый исчезающий градиент и поместите его, как показано на рисунке. (Примечание: можно использовать непрозрачный градиент с режимом смешивание Умножение. В таком случае видимый край градиента должен быть отличен от белого цвета. это может быть особенно важно для стоков). Задайте прозрачность заливки 65% и сместите контур на -3 пикселя.

Добавьте внутреннюю обводку толщиной 1pt. Добавьте для неё режим смешивания Soft light и прозрачность 30%. Добавьте вторую обводку. В єтот раз выставьте ей толщину 3pt, прозрачность 20% и режим смешивания Soft light.

Добавьте еще одну заливку, теперь уже линейную, от черного к белому и с прозрачностью 15%.

Нарисуем эллипс (L) размером 70 x 20px. Залейте черным цветом и выставьте прозрачность 3%. Примените эффект Дуга (Arc), как показано на рисунке. Продублируйте эллипс, залейте белым, выставьте прозрачность 20% и измените дугу на 50%

Шаг 6. Рисуем детали

Создадим окружность радиусом 30 пикселей без заливки. Зададим ей обводку в 3pt. Переведем обводку в заливку Object > Path > Outline Stroke и зальем градиентом, как показано на рисунке.

Добавим к объекту вторую заливку, сместив её на -1 пиксель, режим смешивания Soft light. Добавим еще одну заливку и рассположим, как показано ниже.

Добавим четвертую заливку со значениями, как на рисунке и прозрачностью 70%. Теперь добавим день для всего объекта (выделим его в самой верхней строчке панели Вид).

Нарисуем прямоугольник (М) 10 x 20px и зальем его градиентом, как показано ниже. Применим эффект Закругление углов (Effect > Stylize > Rounded Corners) со значением 3px и развернем вид объекта (Object > Expand Appearance). Добавим радиальную заливку с прозрачностью 70%.

Снова выставим сетку в 1 пиксель. Нарисуем овал 8х2 пикселя, зальем белым с прозрачностью Soft light. Добавим два черных прямоугольника 10х4 и 10х2 с режимом смешивания Soft light и прозрачностями 15% и 30% соответственно.

Выделим кольцо с держателем и переместим на задний план (Shift + CTRL + [ ). Нарисуем прямоугольник 10х1, зальем его цветом R=195 G=200 B=205 и поместим на передний план (Shift + CTRL + ] )

Нарисуем квадрат со стороной 10 пикселей. Зальем его градиентом и применим последовательно эффекты Закругление углов (1 пиксель) и Дуга. Затем развернем вид.

Уберем привязку к сетке (Ctrl + Shift + «). Дважды продублируем нашу фигуру, поднимем вторую копию на 1 пиксель. Вычтем между собой эти две копии, к полученному результату применим прозрачность 30% и зальем черным. Повторим операцию, только теперь поднимем одну копию на 3 пикселя и прозрачность поставим 15%

Вернем привязку к сетке (Ctrl + Shift + «). Нарисуем прямоугольник 20 x 10px , скруглим ему углы на 3 пикселя и зальем градиентом. Выровняем в предыдущей фигурой. Снимем привязку и повторим фокус с вырезанием копий (1 раз).

Вновь выделим скругленный контур, смесим его на -1 пиксель (Object > Path > Offset Path). Продублируем результат (CTRL + C > CTRL + F) и опустим на 1 пиксель. Вычтем между собой эти два объекта. Результат зальем градиентом и поставим режим Soft light. Выделим снова скругленный контур, сделаем 2 его копии, опустим одну на 1 пиксель вниз и вычетм между собой. Результат зальем черным с прозрачностью 30% и режимом Soft light.

Сгруппируем полученную кнопку и повернем её на 45 градусов. Добавим тень с параметрами, как на рисунке.

Разместим внупку на секундомере. Продублируем её и отразим горизонтально. Разместим вторую кнопку. У второй кнопки изменим немного тень. Почти готово.

Добавим на задний план фон с цветом R=56 G=147 B=160. Выделим все наши объекты и преобразуем линии в заливки, а также развернем все объекты, к которым применяли эффекты Object > Expand Appearance, Object > Path > Outline Stroke. Выделим Контур нашего секундомера, продублируем (CTRL + C > CTRL + F), зальем цветом. Добавим к контуру обводку 1pt с прозрачностью 25% и режимом Soft light. Добавим еще одну обводку 3pt с прозрачностью 15%. Затем применим к контуру несколько раз эффект тени. Расположим её позади секундомера.

Наш секундомер готов. Используя различные вариации цветов, можно получить другие очень интересные варианты.

Автор урока: Andrei Marius

Рисуем секундомер в Фотошоп / Creativo.one

Фотошоп дает широкий спектр возможностей для рисования для тех, кто не знаком с Иллюстратором. В этом уроке Вы узнаете, как нарисовать секундомер.

Финальное изображение:

Шаг 1

Создайте новый документ (Ctrl + N) с теми параметрами, которые Вы видите на скриншоте. Теперь включите сетку (Просмотр – Показать – Сетка) (View > Show > Grid) и привязку к ней (Просмотр – Привязать к – Сетка)(View > Snap To > Grid). Нужно установить сетку через каждые 10px (Редактирование – Установки – Направляющие – Сетка и фрагменты) (Edit > Preferences > Guides, Grid & Slices).

В пункте Линия через каждые (Gridline Every) установите 10, а в пункте Внутреннее деление на (Subdivision) установите 1. Также, установите цвет сетки  #a7a7a7. После того, как все параметры выставлены, нажмите ОК.

Шаг 2

Включите линейки (Ctrl + R) и вытяните из них две направляющие.

Шаг 3

Для цвета переднего плана установите #a1d8ff и выберите инструмент Эллипс (Ellipse Tool). Нарисуйте круг размером 240px  и расположите его в центре документа. Дублируйте эту векторную фигуру (Ctrl + J). Уменьшите параметр Заливка (Fill) этого слоя в палитре Слои до 0% и добавьте к нему стиль Обводка (Stroke):

Шаг 4

Выделите верхний голубой круг, который создали в предыдущем шаге. Выберите инструмент Эллипс (Ellipse Tool), кликните по кнопке Вычитание (Subtract) на панели свойств в верхней части экрана и нарисуйте круг размером 200px, как показано на первом изображении.

Перейдите в палитру Слои и измените голубой цвет фигуры на  #d7d7d7, затем примените некоторые стили слоя:

Шаг 5

Выделите фигуру, которую отредактировали в предыдущем шаге и дублируйте ее (Ctrl + J). Кликните правой кнопкой мыши по дубликату слою и выберите пункт Очистить стили слоя (Clear Layer Style). Уменьшите параметр Заливка (Fill) до 0% и добавьте стиль слоя Тиснение (Bevel & Emboss).

Шаг 6

Для выполнения дальнейших шагов нужно добавить сетку через каждые 5 пикселов (Редактирование – Установки – Направляющие – Сетка и фрагменты) (Edit > Preferences > Guides, Grid & Slices). В открывшемся окне установите в каждое поле по 5 пикселов.

Инструментом Эллипс (Ellipse Tool) нарисуйте круг размером 200px и расположите его, как показано на первом изображении.

Не меняя инструмента, при активном слое с только что нарисованным кругом, кликните по кнопке Вычитание (Subtract) на панели свойств и нарисуйте круг размером 190px, как показано на втором изображении.

Шаг 7

Сфокусируйтесь на слое с векторной фигурой, которую мы создали в предыдущем шаге. Для начала, измените ее цвет с голубого на #c8c8c8 и добавьте стиль слоя Внутренняя тень (Inner Shadow).

Шаг 8

Выберите инструмент Эллипс (Ellipse Tool), нарисуйте круг размером 190px  и расположите его, как показано на первом изображении. К этой фигуре добавьте некоторые стили слоя:

Шаг 9

Выберите инструмент Эллипс (Ellipse Tool), нарисуйте круг размером 180px  и расположите его, как показано на первом изображении. Уменьшите параметр Заливка (Fill) этого слоя до 0% и добавьте к нему стиль Обводка (Stroke).

Шаг 10

Теперь нужно установить сетку через каждый 1 пиксел (Редактирование – Установки – Направляющие – Сетка и фрагменты) (Edit > Preferences > Guides, Grid & Slices). В открывшемся окне установите в каждое поле по 1 пикселу.

Для цвета переднего плана установите #141414, нарисуйте две векторные фигуры размером 10px и расположите их, как показано на первом изображении.

Создайте дубликат этого прямоугольника (Ctrl + J) , сместите его вниз и расположите, как показано на втором изображении. Выделите оба слоя с прямоугольниками (при нажатой клавише Shift кликните по очереди по этим слоям). Теперь преобразуйте эти слои в смарт-объект (кликните по слою в палитре Слои правой кнопкой мыши и выберите пункт Преобразовать в смарт-объект).

Шаг 11

Дублируйте смарт-объект, созданный в предыдущем шаге (Ctrl + J) и поверните его на 90 градусов (Редактирование – Трансформирование – Поворот на 90°) (Edit > Transform > Rotate 90°CW). В палитре Слои выделите оба смарт-объекта и преобразуйте их в один смарт-объект (кликните по слою в палитре Слои правой кнопкой мыши и выберите пункт Преобразовать в смарт-объект).

Шаг 12

Дублируйте смарт-объект, который создали в предыдущем шаге (Ctrl + J) и поверните дубликат (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate). На панели свойств, введите значение 30 – на столько градусов нужно повернуть и нажмите Enter.

Дублируйте слой со смарт-объектом, который повернули (Ctrl + J) и этот дубликат поверните на 60 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

Шаг 13

В качестве цвета переднего плана установите #54a5e8 и нарисуйте две векторные фигуры размером 5px. Расположите эти фигуры так, как показано на первом изображении. Дублируйте слои с этими прямоугольниками (Ctrl + J), сдвиньте их вниз и расположите, как показано на втором изображении.

В палитре Слои выделите оба слоя с прямоугольниками и преобразуйте их в смарт-объект (кликните по слою в палитре Слои правой кнопкой мыши и выберите пункт Преобразовать в смарт-объект).

Шаг 14

Поверните смарт-объект, созданный в предыдущем шаге, на 6 градусов, и нажмите Enter (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

Дублируйте этот смарт-объект (Ctrl + J) и поверните дубликат на 12 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

Дублируйте этот смарт-объект (Ctrl + J) и поверните дубликат на 18 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

 

Дублируйте этот новый смарт-объект (Ctrl + J) и поверните его на 24 градуса (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

Шаг 15

Выделите четыре смарт-объекта голубого цвета, созданные в предыдущем шаге, преобразуйте их в единый смарт-объект ) (кликните по слою в палитре Слои правой кнопкой мыши и выберите пункт Преобразовать в смарт-объект) и дублируйте полученный смарт-объект (Ctrl + J). Поверните дубликат на -30 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

В палитре Слои выделите оба смарт-объекта голубого цвета, преобразуйте их в единый смарт-объект, а затем создайте две копии (Ctrl + J).

Поверните первый дубликат на 60 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

Поверните второй дубликат на -60 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

Выделите все смарт-объекты голубого цвета и преобразуйте их в единый смарт-объект. К полученному смарт-объекту добавьте стиль Наложение цвета (Color Overlay).

Шаг 16

Установите цвет переднего плана  #141414 и инструментом Текст (Type Tool) напишите цифры, как показано на первом изображении. Для создания текста я использовал шрифт Calibri, Bold, размер 15pt.

Выделите все слои с текстом, преобразуйте их в смарт-объект и к полученному слою добавьте стиль Тень (Drop Shadow).

Шаг 17

Выберите для цвета переднего плана красный цвет и инструментом Прямоугольник (Rectangle Tool) нарисуйте 4 векторные фигуры размером 97px . Расположите эти фигуры, как показано на первом изображении, выберите инструмент Стрелка (Direct Selection Tool) и сфокусируйтесь на нижней части одного из красных прямоугольников.

Выделите левую опорную точку и сдвиньте ее на 1 пиксел вправо, затем выделите правую опорную точку и сдвиньте ее на 1 пиксел влево.

Шаг 18

Выделите векторную фигуру, созданную в предыдущем шаге, и нажмите Ctrl + T. Сфокусируйтесь центральной точке на красной фигуре. Удерживая клавишу Shift , перетащите ее  так, как показано на первом изображении. В финале, поверните красную фигуру, как показано на втором изображении:

Шаг 19

Сфокусируйтесь на векторной фигуре, отредактированной в предыдущем шаге. Для начала, замените красный цвет на #141414 и добавьте стиль слоя Внутренняя тень (Inner Shadow).

Шаг 20

Для цвета переднего плана установите #141414, выберите инструмент Эллипс (Ellipse Tool) и нарисуйте круг размером 14px. Добавьте к этой фигуре стиль слоя Внутренняя тень (Inner Shadow).

Шаг 21

Для цвета переднего плана выберите цвет #d5cdc3 и инструментом Эллипс (Ellipse Tool) нарисуйте круг размером 4px. Расположите фигуру, как показано на скриншоте. К слою с этой фигурой добавьте стили слоя:

Шаг 22

Выделите три векторные фигуры, которые создали в последних пяти шагах и дублируйте их (Ctrl + J). Выделите эти копии и преобразуйте их в смарт-объект. Уменьшите параметр Заливка (Fill) до 0% и добавьте стиль Тень (Drop Shadow).

Шаг 23

Выделите смарт-объект, который создали в предыдущем шаге и дублируйте его (Ctrl + J). К дубликату добавьте стиль слоя Тень (Drop Shadow).

Шаг 24

Выберите инструмент Эллипс (Ellipse Tool), нарисуйте круг размером 55px и расположите его, как показано на первом изображении. Уменьшите параметр Заливка (Fill) слоя с фигурой, которую только что нарисовали до 0% и добавьте стиль слоя Обводка (Stroke).

Шаг 25

Сфокусируйтесь на круге, который создали в предыдущем шаге, выберите для цвета переднего плана цвет #141414 и нарисуйте две векторные фигуры размером 4px. Выделите оба этих прямоугольника и преобразуйте их в смарт-объект.

Шаг 26

Дублируйте смарт-объект, созданный в предыдущем шаге (Ctrl + J) и поверните дубликат на 60 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate). Снова дублируйте смарт-объект (Ctrl + J) и поверните полученный слой на -60 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

Инструментом Текст (Type Tool) напишите числа (я использовал шрифт Calibri, Bold, размер 8pt).

Шаг 27

Для цвета переднего плана выберите красный цвет и инструментом Прямоугольник (Rectangle Tool) нарисуйте четыре векторные фигуры размером 43px. разместите фигуры, как показано на первом изображении, выберите инструмент Стрелка  (Direct Selection Tool) и сфокусируйтесь на верхней части этого красного прямоугольника.

Выделите левую опорную точку и сдвиньте ее на 2 пиксела вправо, затем выберите инструмент Удалить опорную точку (Delete Anchor Point Tool) и удалите верхнюю правую опорную точку. Фигура будет выглядеть, как на втором изображении. Далее, поверните ее, как показано на третьем изображении.

Шаг 28

Сделайте активным слой с фигурой, которую создали в предыдущем шаге и измените ее красный цвет на #141414. Добавьте к этой фигуре стиль Внутренняя тень (Inner Shadow).

Шаг 29

Установите для переднего плана цвет  #141414 и инструментом Эллипс (Ellipse Tool) нарисуйте фигуру, размером 10px . Добавьте к этой фигуре стиль Внутренняя тень (Inner Shadow).

Шаг 30

Для цвета переднего плана установите #f0eae3, инструментом Эллипс (Ellipse Tool) нарисуйте круг размером 2px  и добавьте к нему стили слоя:

Шаг 31

Выделите три векторные фигуры, которые создали в последних четырех шагах и дублируйте их (Ctrl + J). Полученные копии преобразуйте в смарт-объект, уменьшите параметр Заливка (Fill) этого смарт-объекта до 0% и добавьте к нему стиль слоя Тень (Drop Shadow).

Шаг 32

Дублируйте смарт-объект, созданный в предыдущем шаге (Ctrl + J). К дубликату добавьте стиль слоя Тень (Drop Shadow):

Шаг 33

Дублируйте векторную фигуру, которую создали в восьмом шаге, удалите с нее стили слоя и переместите в верхнюю часть палитры Слои (Shift + Ctrll + ]). Установите параметр Заливка (Fill) до 0% и добавьте стили слоя:

Шаг 34

Дублируйте векторную фигуру, отредактированную в предыдущем шаге (Ctrl + J), удалите с дубликата стили слоя, уменьшите параметр Заливка (Fill) до 0% и добавьте стиль слоя Обводка (Stroke).

Шаг 35

Выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) с радиусом 3px, нарисуйте векторную фигуру размером 24х30px и расположите их, как показано на первом изображении. К нарисованной фигуре примените команду Деформация (Редактирование – Трансформирование – Деформация) (Edit > Transform > Warp). Из выпадающего меню выберите тип деформации Дуга (Arc), в поле Изгиб (Bend) установите 25 и нажмите Enter.

Из выпадающего меню команды Деформация выберите теперь тип Дуга вниз (Arc Upper), установите значение -10 в поле Изгиб (Bend) и нажмите Enter.

Шаг 36

Примените некоторые стили слоя к векторной фигуре, которую создали в предыдущем шаге. Когда дойдете до стиля слоя Наложение градиента (Gradient Overlay), сохраните используемый градиент, кликнув по кнопке Новый (New).

Шаг 37

Сфокусируйтесь на верхней части векторной фигуры, которую отредактировали в предыдущем шаге. Теперь выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) с радиусом 3px и нарисуйте векторную фигуру размером  30х20px.

К этой фигуре примените команду Деформация (Редактирование – Трансформирование – Деформация) (Edit > Transform > Warp): из выпадающего списка выберите тип Дуга вниз (Arc Lower), в поле Изгиб (Bend) установите 20 и нажмите Enter.

Шаг 38

К этой фигуре примените некоторые стили слоя. Когда дойдете до стиля Наложение градиента (Gradient Overlay), используйте градиент, который сохранили в 36 шаге.

Шаг 39

Инструментом Эллипс (Ellipse Tool) нарисуйте фигуру размером 30х6px и добавьте к нему стили слоя. При добавлении стиля Наложение градиента (Gradient Overlay) также используйте градиент, сохраненный в 36 шаге.

Шаг 40

Выберите для цвета переднего плана #d7d7d7 и инструментом Эллипс (Ellipse Tool) нарисуйте круг размером 80px . Расположите фигуру, как показано на первом изображении. Не меняя инструмента, при активном слое с только что нарисованной фигурой, кликните по кнопке Вычитание (Subtract) на панели свойств и нарисуйте круг размером 68px, как показано на втором изображении.

Шаг 41

Сфокусируйтесь на нижней части фигуры, которую создали в предыдущем шаге. Выберите инструмент Прямоугольник (Rectangle Tool) с параметром вычитание (Subtract) и нарисуйте векторную фигуру размером 22х10px. При активном слое с только что нарисованной фигурой, выберите инструмент Эллипс (Ellipse Tool), кликните по кнопке Добавить (Add) на панели свойств и добавьте два круга размером 6px, как показано на втором изображении.

Шаг 42

К фигуре, нарисованной в предыдущем шаге, добавьте стили слоя:

Шаг 43

Сфокусируйтесь на нижней части векторной фигуры, отредактированной в предыдущем шаге. Установите для цвета переднего плана черный и инструментом Эллипс (Ellipse Tool) нарисуйте два круга размером 6px. Расположите фигуры, как показано на первом изображении.

К левому и правому кругам добавьте стиль слоя Тень (Drop Shadow). Теперь выделите оба слоя с кругами и переместите их под векторную фигуру, отредактированную в предыдущем шаге.

Шаг 44

Инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool) с радиусом  3px нарисуйте векторную фигуру размером 16х18px. К этой фигуре примените команду Деформация (Редактирование – Трансформирование – Деформация) (Edit > Transform > Warp).

Выберите пункт Дуга вниз (Arc Lower) и в пункте Изгиб (Bend) установите значение 30. Нажмите Enter, чтобы применить изменения.

Снова примените команду Деформация (Редактирование – Трансформирование – Деформация) (Edit > Transform > Warp), но на этот раз выберите пункт Арка вверх (Arc Upper). В параметре Изгиб (Bend) установите значение -10 и нажмите Ente , чтобы применить изменения.

Примените стили слоя. В стиле слоя Наложение градиента (Gradient Overlay) используйте сохраненный ранее градиент:

Шаг 45

Инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool) с радиусом 3px, нарисуйте фигуру размером 20х20px и примените к ней команду Деформация (Редактирование – Трансформирование – Деформация) (Edit > Transform > Warp). Из выпадающего списка выберите Выпуклость (Bulge) в поле Изгиб (Bend) установите значение 15 и нажмите Enter.  

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

Шаг 46

Теперь нужно создать текстуру. Для начала, создайте новый документ (Ctrl + N), в полях Ширина (width) и высота (height) установите значение 2 и нажмите ОК. Из палитры Слои удалите слой «Background», установите для цвета переднего плана черный и выберите инструмент Прямоугольник (Rectangle Tool).

Нарисуйте фигуру размером 1х2px и преобразуйте ее в узор (Редактирование – Определить узор) (Edit > Define Pattern). Задайте имя текстуре и нажмите ОК. Закройте этот документ (его не нужно сохранять) и вернитесь к основному документу.

Шаг 47

К смарт-объекту, созданному в 45 шаге добавьте стили слоя:

Шаг 48

Выделите векторную фигуру и смарт-объект, которые создали в последних четырех шагах и преобразуйте их в смарт-объект. Поверните полученный слой на 30 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

Шаг 49

Выберите инструмент Прямолинейное лассо (Polygon Tool) и в панели свойств в окне Стороны (Sides) установите значение 4. Там же выберите тип Звезда (star) с радиусом 10px  и введите значение 85%.

Для цвета переднего плана установите белый, и нарисуйте фигуру звезды.

Шаг 50

Дублируйте фигуру звезды (Ctrl + J) и преобразуйте дубликат в смарт-объект. Примените к нему фильтр Размытие по Гауссу (Фильтр – размытие – размытие по Гауссу) (Filter > Blur > Gaussian Blur) с радиусом 1.5px .

Шаг 51

Дублируйте все имеющиеся слои и преобразуйте дубликаты в смарт-объект. Переместите смарт-объект под все слои (Ctrl + Shift + [), уменьшите параметр Заливка (Fill) до 0% и добавьте стиль слоя Тень (Drop Shadow).

Шаг 52

Дублируйте смарт-объект, который создали в предыдущем шаге (Ctrl + J) и добавьте к дубликату стиль Тень (Drop Shadow).

Шаг 53

Дублируйте смарт-объект, который создали в предыдущем шаге (Ctrl + J) и добавьте к дубликату стиль Тень (Drop Shadow).

Шаг 54

Дублируйте смарт-объект, который создали в предыдущем шаге (Ctrl + J), и добавьте к дубликату стили слоя:

Шаг 55

Выделите все слои с металлическим корпусом и дублируйте их (Ctrl + J). Все полученные копии преобразуйте в смарт-объект. Загрузите выделение смарт-объекта (зажмите клавишу Ctrl и кликните по миниатюре смарт-объекта в палитре Слои). Создайте новый слой (Shift + Ctrl + N) и инструментом Заливка (Paint Bucket Tool) кликните внутри выделения, чтобы залить его черным цветом.

Снимите выделение (Ctrl + D) и удалите смарт-объект, который создали в начале этого шага.

Шаг 56

Активируйте слой, созданный в предыдущем шаге, и уменьшите параметр Заливка (Fill) до 0%. Добавьте стили слоя. В стиле Наложение цвета (Color Overlay) уменьшите непрозрачность до 50% и выберите желтый цвет (#ffd76b) .

Шаг 57

В финале, добавим простой фон. Создайте новый слой (Shift + Ctrl + N) под всеми существующими слоями и залейте его цветом #505050. Добавьте стиль слоя Внутренняя тень (Inner Glow).

Шаг 58

Преобразуйте в смарт-объект слой, который создали в предыдущем шаге и добавьте к нему фильтр Шум (Фильтр – Шум – Добавить шум) (Filter > Noise > Add Noise).

Финальное изображение:

Автор: Andrei Marius

Перевод: Слуцкая Светлана

Рисуем секундомер в Фотошоп / Creativo.one

Фотошоп дает широкий спектр возможностей для рисования для тех, кто не знаком с Иллюстратором. В этом уроке Вы узнаете, как нарисовать секундомер.

Финальное изображение:

Шаг 1

Создайте новый документ (Ctrl + N) с теми параметрами, которые Вы видите на скриншоте. Теперь включите сетку (Просмотр – Показать – Сетка) (View > Show > Grid) и привязку к ней (Просмотр – Привязать к – Сетка)(View > Snap To > Grid). Нужно установить сетку через каждые 10px (Редактирование – Установки – Направляющие – Сетка и фрагменты) (Edit > Preferences > Guides, Grid & Slices).

В пункте Линия через каждые (Gridline Every) установите 10, а в пункте Внутреннее деление на (Subdivision) установите 1. Также, установите цвет сетки  #a7a7a7. После того, как все параметры выставлены, нажмите ОК.

Шаг 2

Включите линейки (Ctrl + R) и вытяните из них две направляющие.

Шаг 3

Для цвета переднего плана установите #a1d8ff и выберите инструмент Эллипс (Ellipse Tool). Нарисуйте круг размером 240px  и расположите его в центре документа. Дублируйте эту векторную фигуру (Ctrl + J). Уменьшите параметр Заливка (Fill) этого слоя в палитре Слои до 0% и добавьте к нему стиль Обводка (Stroke):

Шаг 4

Выделите верхний голубой круг, который создали в предыдущем шаге. Выберите инструмент Эллипс (Ellipse Tool), кликните по кнопке Вычитание (Subtract) на панели свойств в верхней части экрана и нарисуйте круг размером 200px, как показано на первом изображении.

Перейдите в палитру Слои и измените голубой цвет фигуры на  #d7d7d7, затем примените некоторые стили слоя:

Шаг 5

Выделите фигуру, которую отредактировали в предыдущем шаге и дублируйте ее (Ctrl + J). Кликните правой кнопкой мыши по дубликату слою и выберите пункт Очистить стили слоя (Clear Layer Style). Уменьшите параметр Заливка (Fill) до 0% и добавьте стиль слоя Тиснение (Bevel & Emboss).

Шаг 6

Для выполнения дальнейших шагов нужно добавить сетку через каждые 5 пикселов (Редактирование – Установки – Направляющие – Сетка и фрагменты) (Edit > Preferences > Guides, Grid & Slices). В открывшемся окне установите в каждое поле по 5 пикселов.

Инструментом Эллипс (Ellipse Tool) нарисуйте круг размером 200px и расположите его, как показано на первом изображении.

Не меняя инструмента, при активном слое с только что нарисованным кругом, кликните по кнопке Вычитание (Subtract) на панели свойств и нарисуйте круг размером 190px, как показано на втором изображении.

Шаг 7

Сфокусируйтесь на слое с векторной фигурой, которую мы создали в предыдущем шаге. Для начала, измените ее цвет с голубого на #c8c8c8 и добавьте стиль слоя Внутренняя тень (Inner Shadow).

Шаг 8

Выберите инструмент Эллипс (Ellipse Tool), нарисуйте круг размером 190px  и расположите его, как показано на первом изображении. К этой фигуре добавьте некоторые стили слоя:

Шаг 9

Выберите инструмент Эллипс (Ellipse Tool), нарисуйте круг размером 180px  и расположите его, как показано на первом изображении. Уменьшите параметр Заливка (Fill) этого слоя до 0% и добавьте к нему стиль Обводка (Stroke).

Шаг 10

Теперь нужно установить сетку через каждый 1 пиксел (Редактирование – Установки – Направляющие – Сетка и фрагменты) (Edit > Preferences > Guides, Grid & Slices). В открывшемся окне установите в каждое поле по 1 пикселу.

Для цвета переднего плана установите #141414, нарисуйте две векторные фигуры размером 10px и расположите их, как показано на первом изображении.

Создайте дубликат этого прямоугольника (Ctrl + J) , сместите его вниз и расположите, как показано на втором изображении. Выделите оба слоя с прямоугольниками (при нажатой клавише Shift кликните по очереди по этим слоям). Теперь преобразуйте эти слои в смарт-объект (кликните по слою в палитре Слои правой кнопкой мыши и выберите пункт Преобразовать в смарт-объект).

Шаг 11

Дублируйте смарт-объект, созданный в предыдущем шаге (Ctrl + J) и поверните его на 90 градусов (Редактирование – Трансформирование – Поворот на 90°) (Edit > Transform > Rotate 90°CW). В палитре Слои выделите оба смарт-объекта и преобразуйте их в один смарт-объект (кликните по слою в палитре Слои правой кнопкой мыши и выберите пункт Преобразовать в смарт-объект).

Шаг 12

Дублируйте смарт-объект, который создали в предыдущем шаге (Ctrl + J) и поверните дубликат (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate). На панели свойств, введите значение 30 – на столько градусов нужно повернуть и нажмите Enter.

Дублируйте слой со смарт-объектом, который повернули (Ctrl + J) и этот дубликат поверните на 60 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

Шаг 13

В качестве цвета переднего плана установите #54a5e8 и нарисуйте две векторные фигуры размером 5px. Расположите эти фигуры так, как показано на первом изображении. Дублируйте слои с этими прямоугольниками (Ctrl + J), сдвиньте их вниз и расположите, как показано на втором изображении.

В палитре Слои выделите оба слоя с прямоугольниками и преобразуйте их в смарт-объект (кликните по слою в палитре Слои правой кнопкой мыши и выберите пункт Преобразовать в смарт-объект).

Шаг 14

Поверните смарт-объект, созданный в предыдущем шаге, на 6 градусов, и нажмите Enter (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

Дублируйте этот смарт-объект (Ctrl + J) и поверните дубликат на 12 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

Дублируйте этот смарт-объект (Ctrl + J) и поверните дубликат на 18 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

 

Дублируйте этот новый смарт-объект (Ctrl + J) и поверните его на 24 градуса (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

Шаг 15

Выделите четыре смарт-объекта голубого цвета, созданные в предыдущем шаге, преобразуйте их в единый смарт-объект ) (кликните по слою в палитре Слои правой кнопкой мыши и выберите пункт Преобразовать в смарт-объект) и дублируйте полученный смарт-объект (Ctrl + J). Поверните дубликат на -30 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

В палитре Слои выделите оба смарт-объекта голубого цвета, преобразуйте их в единый смарт-объект, а затем создайте две копии (Ctrl + J).

Поверните первый дубликат на 60 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

Поверните второй дубликат на -60 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

Выделите все смарт-объекты голубого цвета и преобразуйте их в единый смарт-объект. К полученному смарт-объекту добавьте стиль Наложение цвета (Color Overlay).

Шаг 16

Установите цвет переднего плана  #141414 и инструментом Текст (Type Tool) напишите цифры, как показано на первом изображении. Для создания текста я использовал шрифт Calibri, Bold, размер 15pt.

Выделите все слои с текстом, преобразуйте их в смарт-объект и к полученному слою добавьте стиль Тень (Drop Shadow).

Шаг 17

Выберите для цвета переднего плана красный цвет и инструментом Прямоугольник (Rectangle Tool) нарисуйте 4 векторные фигуры размером 97px . Расположите эти фигуры, как показано на первом изображении, выберите инструмент Стрелка (Direct Selection Tool) и сфокусируйтесь на нижней части одного из красных прямоугольников.

Выделите левую опорную точку и сдвиньте ее на 1 пиксел вправо, затем выделите правую опорную точку и сдвиньте ее на 1 пиксел влево.

Шаг 18

Выделите векторную фигуру, созданную в предыдущем шаге, и нажмите Ctrl + T. Сфокусируйтесь центральной точке на красной фигуре. Удерживая клавишу Shift , перетащите ее  так, как показано на первом изображении. В финале, поверните красную фигуру, как показано на втором изображении:

Шаг 19

Сфокусируйтесь на векторной фигуре, отредактированной в предыдущем шаге. Для начала, замените красный цвет на #141414 и добавьте стиль слоя Внутренняя тень (Inner Shadow).

Шаг 20

Для цвета переднего плана установите #141414, выберите инструмент Эллипс (Ellipse Tool) и нарисуйте круг размером 14px. Добавьте к этой фигуре стиль слоя Внутренняя тень (Inner Shadow).

Шаг 21

Для цвета переднего плана выберите цвет #d5cdc3 и инструментом Эллипс (Ellipse Tool) нарисуйте круг размером 4px. Расположите фигуру, как показано на скриншоте. К слою с этой фигурой добавьте стили слоя:

Шаг 22

Выделите три векторные фигуры, которые создали в последних пяти шагах и дублируйте их (Ctrl + J). Выделите эти копии и преобразуйте их в смарт-объект. Уменьшите параметр Заливка (Fill) до 0% и добавьте стиль Тень (Drop Shadow).

Шаг 23

Выделите смарт-объект, который создали в предыдущем шаге и дублируйте его (Ctrl + J). К дубликату добавьте стиль слоя Тень (Drop Shadow).

Шаг 24

Выберите инструмент Эллипс (Ellipse Tool), нарисуйте круг размером 55px и расположите его, как показано на первом изображении. Уменьшите параметр Заливка (Fill) слоя с фигурой, которую только что нарисовали до 0% и добавьте стиль слоя Обводка (Stroke).

Шаг 25

Сфокусируйтесь на круге, который создали в предыдущем шаге, выберите для цвета переднего плана цвет #141414 и нарисуйте две векторные фигуры размером 4px. Выделите оба этих прямоугольника и преобразуйте их в смарт-объект.

Шаг 26

Дублируйте смарт-объект, созданный в предыдущем шаге (Ctrl + J) и поверните дубликат на 60 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate). Снова дублируйте смарт-объект (Ctrl + J) и поверните полученный слой на -60 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

Инструментом Текст (Type Tool) напишите числа (я использовал шрифт Calibri, Bold, размер 8pt).

Шаг 27

Для цвета переднего плана выберите красный цвет и инструментом Прямоугольник (Rectangle Tool) нарисуйте четыре векторные фигуры размером 43px. разместите фигуры, как показано на первом изображении, выберите инструмент Стрелка  (Direct Selection Tool) и сфокусируйтесь на верхней части этого красного прямоугольника.

Выделите левую опорную точку и сдвиньте ее на 2 пиксела вправо, затем выберите инструмент Удалить опорную точку (Delete Anchor Point Tool) и удалите верхнюю правую опорную точку. Фигура будет выглядеть, как на втором изображении. Далее, поверните ее, как показано на третьем изображении.

Шаг 28

Сделайте активным слой с фигурой, которую создали в предыдущем шаге и измените ее красный цвет на #141414. Добавьте к этой фигуре стиль Внутренняя тень (Inner Shadow).

Шаг 29

Установите для переднего плана цвет  #141414 и инструментом Эллипс (Ellipse Tool) нарисуйте фигуру, размером 10px . Добавьте к этой фигуре стиль Внутренняя тень (Inner Shadow).

Шаг 30

Для цвета переднего плана установите #f0eae3, инструментом Эллипс (Ellipse Tool) нарисуйте круг размером 2px  и добавьте к нему стили слоя:

Шаг 31

Выделите три векторные фигуры, которые создали в последних четырех шагах и дублируйте их (Ctrl + J). Полученные копии преобразуйте в смарт-объект, уменьшите параметр Заливка (Fill) этого смарт-объекта до 0% и добавьте к нему стиль слоя Тень (Drop Shadow).

Шаг 32

Дублируйте смарт-объект, созданный в предыдущем шаге (Ctrl + J). К дубликату добавьте стиль слоя Тень (Drop Shadow):

Шаг 33

Дублируйте векторную фигуру, которую создали в восьмом шаге, удалите с нее стили слоя и переместите в верхнюю часть палитры Слои (Shift + Ctrll + ]). Установите параметр Заливка (Fill) до 0% и добавьте стили слоя:

Шаг 34

Дублируйте векторную фигуру, отредактированную в предыдущем шаге (Ctrl + J), удалите с дубликата стили слоя, уменьшите параметр Заливка (Fill) до 0% и добавьте стиль слоя Обводка (Stroke).

Шаг 35

Выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) с радиусом 3px, нарисуйте векторную фигуру размером 24х30px и расположите их, как показано на первом изображении. К нарисованной фигуре примените команду Деформация (Редактирование – Трансформирование – Деформация) (Edit > Transform > Warp). Из выпадающего меню выберите тип деформации Дуга (Arc), в поле Изгиб (Bend) установите 25 и нажмите Enter.

Из выпадающего меню команды Деформация выберите теперь тип Дуга вниз (Arc Upper), установите значение -10 в поле Изгиб (Bend) и нажмите Enter.

Шаг 36

Примените некоторые стили слоя к векторной фигуре, которую создали в предыдущем шаге. Когда дойдете до стиля слоя Наложение градиента (Gradient Overlay), сохраните используемый градиент, кликнув по кнопке Новый (New).

Шаг 37

Сфокусируйтесь на верхней части векторной фигуры, которую отредактировали в предыдущем шаге. Теперь выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) с радиусом 3px и нарисуйте векторную фигуру размером  30х20px.

К этой фигуре примените команду Деформация (Редактирование – Трансформирование – Деформация) (Edit > Transform > Warp): из выпадающего списка выберите тип Дуга вниз (Arc Lower), в поле Изгиб (Bend) установите 20 и нажмите Enter.

Шаг 38

К этой фигуре примените некоторые стили слоя. Когда дойдете до стиля Наложение градиента (Gradient Overlay), используйте градиент, который сохранили в 36 шаге.

Шаг 39

Инструментом Эллипс (Ellipse Tool) нарисуйте фигуру размером 30х6px и добавьте к нему стили слоя. При добавлении стиля Наложение градиента (Gradient Overlay) также используйте градиент, сохраненный в 36 шаге.

Шаг 40

Выберите для цвета переднего плана #d7d7d7 и инструментом Эллипс (Ellipse Tool) нарисуйте круг размером 80px . Расположите фигуру, как показано на первом изображении. Не меняя инструмента, при активном слое с только что нарисованной фигурой, кликните по кнопке Вычитание (Subtract) на панели свойств и нарисуйте круг размером 68px, как показано на втором изображении.

Шаг 41

Сфокусируйтесь на нижней части фигуры, которую создали в предыдущем шаге. Выберите инструмент Прямоугольник (Rectangle Tool) с параметром вычитание (Subtract) и нарисуйте векторную фигуру размером 22х10px. При активном слое с только что нарисованной фигурой, выберите инструмент Эллипс (Ellipse Tool), кликните по кнопке Добавить (Add) на панели свойств и добавьте два круга размером 6px, как показано на втором изображении.

Шаг 42

К фигуре, нарисованной в предыдущем шаге, добавьте стили слоя:

Шаг 43

Сфокусируйтесь на нижней части векторной фигуры, отредактированной в предыдущем шаге. Установите для цвета переднего плана черный и инструментом Эллипс (Ellipse Tool) нарисуйте два круга размером 6px. Расположите фигуры, как показано на первом изображении.

К левому и правому кругам добавьте стиль слоя Тень (Drop Shadow). Теперь выделите оба слоя с кругами и переместите их под векторную фигуру, отредактированную в предыдущем шаге.

Шаг 44

Инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool) с радиусом  3px нарисуйте векторную фигуру размером 16х18px. К этой фигуре примените команду Деформация (Редактирование – Трансформирование – Деформация) (Edit > Transform > Warp).

Выберите пункт Дуга вниз (Arc Lower) и в пункте Изгиб (Bend) установите значение 30. Нажмите Enter, чтобы применить изменения.

Снова примените команду Деформация (Редактирование – Трансформирование – Деформация) (Edit > Transform > Warp), но на этот раз выберите пункт Арка вверх (Arc Upper). В параметре Изгиб (Bend) установите значение -10 и нажмите Ente , чтобы применить изменения.

Примените стили слоя. В стиле слоя Наложение градиента (Gradient Overlay) используйте сохраненный ранее градиент:

Шаг 45

Инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool) с радиусом 3px, нарисуйте фигуру размером 20х20px и примените к ней команду Деформация (Редактирование – Трансформирование – Деформация) (Edit > Transform > Warp). Из выпадающего списка выберите Выпуклость (Bulge) в поле Изгиб (Bend) установите значение 15 и нажмите Enter.  

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

Шаг 46

Теперь нужно создать текстуру. Для начала, создайте новый документ (Ctrl + N), в полях Ширина (width) и высота (height) установите значение 2 и нажмите ОК. Из палитры Слои удалите слой «Background», установите для цвета переднего плана черный и выберите инструмент Прямоугольник (Rectangle Tool).

Нарисуйте фигуру размером 1х2px и преобразуйте ее в узор (Редактирование – Определить узор) (Edit > Define Pattern). Задайте имя текстуре и нажмите ОК. Закройте этот документ (его не нужно сохранять) и вернитесь к основному документу.

Шаг 47

К смарт-объекту, созданному в 45 шаге добавьте стили слоя:

Шаг 48

Выделите векторную фигуру и смарт-объект, которые создали в последних четырех шагах и преобразуйте их в смарт-объект. Поверните полученный слой на 30 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

Шаг 49

Выберите инструмент Прямолинейное лассо (Polygon Tool) и в панели свойств в окне Стороны (Sides) установите значение 4. Там же выберите тип Звезда (star) с радиусом 10px  и введите значение 85%.

Для цвета переднего плана установите белый, и нарисуйте фигуру звезды.

Шаг 50

Дублируйте фигуру звезды (Ctrl + J) и преобразуйте дубликат в смарт-объект. Примените к нему фильтр Размытие по Гауссу (Фильтр – размытие – размытие по Гауссу) (Filter > Blur > Gaussian Blur) с радиусом 1.5px .

Шаг 51

Дублируйте все имеющиеся слои и преобразуйте дубликаты в смарт-объект. Переместите смарт-объект под все слои (Ctrl + Shift + [), уменьшите параметр Заливка (Fill) до 0% и добавьте стиль слоя Тень (Drop Shadow).

Шаг 52

Дублируйте смарт-объект, который создали в предыдущем шаге (Ctrl + J) и добавьте к дубликату стиль Тень (Drop Shadow).

Шаг 53

Дублируйте смарт-объект, который создали в предыдущем шаге (Ctrl + J) и добавьте к дубликату стиль Тень (Drop Shadow).

Шаг 54

Дублируйте смарт-объект, который создали в предыдущем шаге (Ctrl + J), и добавьте к дубликату стили слоя:

Шаг 55

Выделите все слои с металлическим корпусом и дублируйте их (Ctrl + J). Все полученные копии преобразуйте в смарт-объект. Загрузите выделение смарт-объекта (зажмите клавишу Ctrl и кликните по миниатюре смарт-объекта в палитре Слои). Создайте новый слой (Shift + Ctrl + N) и инструментом Заливка (Paint Bucket Tool) кликните внутри выделения, чтобы залить его черным цветом.

Снимите выделение (Ctrl + D) и удалите смарт-объект, который создали в начале этого шага.

Шаг 56

Активируйте слой, созданный в предыдущем шаге, и уменьшите параметр Заливка (Fill) до 0%. Добавьте стили слоя. В стиле Наложение цвета (Color Overlay) уменьшите непрозрачность до 50% и выберите желтый цвет (#ffd76b) .

Шаг 57

В финале, добавим простой фон. Создайте новый слой (Shift + Ctrl + N) под всеми существующими слоями и залейте его цветом #505050. Добавьте стиль слоя Внутренняя тень (Inner Glow).

Шаг 58

Преобразуйте в смарт-объект слой, который создали в предыдущем шаге и добавьте к нему фильтр Шум (Фильтр – Шум – Добавить шум) (Filter > Noise > Add Noise).

Финальное изображение:

Автор: Andrei Marius

Перевод: Слуцкая Светлана

Рисуем секундомер в Фотошоп / Creativo.one

Фотошоп дает широкий спектр возможностей для рисования для тех, кто не знаком с Иллюстратором. В этом уроке Вы узнаете, как нарисовать секундомер.

Финальное изображение:

Шаг 1

Создайте новый документ (Ctrl + N) с теми параметрами, которые Вы видите на скриншоте. Теперь включите сетку (Просмотр – Показать – Сетка) (View > Show > Grid) и привязку к ней (Просмотр – Привязать к – Сетка)(View > Snap To > Grid). Нужно установить сетку через каждые 10px (Редактирование – Установки – Направляющие – Сетка и фрагменты) (Edit > Preferences > Guides, Grid & Slices).

В пункте Линия через каждые (Gridline Every) установите 10, а в пункте Внутреннее деление на (Subdivision) установите 1. Также, установите цвет сетки  #a7a7a7. После того, как все параметры выставлены, нажмите ОК.

Шаг 2

Включите линейки (Ctrl + R) и вытяните из них две направляющие.

Шаг 3

Для цвета переднего плана установите #a1d8ff и выберите инструмент Эллипс (Ellipse Tool). Нарисуйте круг размером 240px  и расположите его в центре документа. Дублируйте эту векторную фигуру (Ctrl + J). Уменьшите параметр Заливка (Fill) этого слоя в палитре Слои до 0% и добавьте к нему стиль Обводка (Stroke):

Шаг 4

Выделите верхний голубой круг, который создали в предыдущем шаге. Выберите инструмент Эллипс (Ellipse Tool), кликните по кнопке Вычитание (Subtract) на панели свойств в верхней части экрана и нарисуйте круг размером 200px, как показано на первом изображении.

Перейдите в палитру Слои и измените голубой цвет фигуры на  #d7d7d7, затем примените некоторые стили слоя:

Шаг 5

Выделите фигуру, которую отредактировали в предыдущем шаге и дублируйте ее (Ctrl + J). Кликните правой кнопкой мыши по дубликату слою и выберите пункт Очистить стили слоя (Clear Layer Style). Уменьшите параметр Заливка (Fill) до 0% и добавьте стиль слоя Тиснение (Bevel & Emboss).

Шаг 6

Для выполнения дальнейших шагов нужно добавить сетку через каждые 5 пикселов (Редактирование – Установки – Направляющие – Сетка и фрагменты) (Edit > Preferences > Guides, Grid & Slices). В открывшемся окне установите в каждое поле по 5 пикселов.

Инструментом Эллипс (Ellipse Tool) нарисуйте круг размером 200px и расположите его, как показано на первом изображении.

Не меняя инструмента, при активном слое с только что нарисованным кругом, кликните по кнопке Вычитание (Subtract) на панели свойств и нарисуйте круг размером 190px, как показано на втором изображении.

Шаг 7

Сфокусируйтесь на слое с векторной фигурой, которую мы создали в предыдущем шаге. Для начала, измените ее цвет с голубого на #c8c8c8 и добавьте стиль слоя Внутренняя тень (Inner Shadow).

Шаг 8

Выберите инструмент Эллипс (Ellipse Tool), нарисуйте круг размером 190px  и расположите его, как показано на первом изображении. К этой фигуре добавьте некоторые стили слоя:

Шаг 9

Выберите инструмент Эллипс (Ellipse Tool), нарисуйте круг размером 180px  и расположите его, как показано на первом изображении. Уменьшите параметр Заливка (Fill) этого слоя до 0% и добавьте к нему стиль Обводка (Stroke).

Шаг 10

Теперь нужно установить сетку через каждый 1 пиксел (Редактирование – Установки – Направляющие – Сетка и фрагменты) (Edit > Preferences > Guides, Grid & Slices). В открывшемся окне установите в каждое поле по 1 пикселу.

Для цвета переднего плана установите #141414, нарисуйте две векторные фигуры размером 10px и расположите их, как показано на первом изображении.

Создайте дубликат этого прямоугольника (Ctrl + J) , сместите его вниз и расположите, как показано на втором изображении. Выделите оба слоя с прямоугольниками (при нажатой клавише Shift кликните по очереди по этим слоям). Теперь преобразуйте эти слои в смарт-объект (кликните по слою в палитре Слои правой кнопкой мыши и выберите пункт Преобразовать в смарт-объект).

Шаг 11

Дублируйте смарт-объект, созданный в предыдущем шаге (Ctrl + J) и поверните его на 90 градусов (Редактирование – Трансформирование – Поворот на 90°) (Edit > Transform > Rotate 90°CW). В палитре Слои выделите оба смарт-объекта и преобразуйте их в один смарт-объект (кликните по слою в палитре Слои правой кнопкой мыши и выберите пункт Преобразовать в смарт-объект).

Шаг 12

Дублируйте смарт-объект, который создали в предыдущем шаге (Ctrl + J) и поверните дубликат (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate). На панели свойств, введите значение 30 – на столько градусов нужно повернуть и нажмите Enter.

Дублируйте слой со смарт-объектом, который повернули (Ctrl + J) и этот дубликат поверните на 60 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

Шаг 13

В качестве цвета переднего плана установите #54a5e8 и нарисуйте две векторные фигуры размером 5px. Расположите эти фигуры так, как показано на первом изображении. Дублируйте слои с этими прямоугольниками (Ctrl + J), сдвиньте их вниз и расположите, как показано на втором изображении.

В палитре Слои выделите оба слоя с прямоугольниками и преобразуйте их в смарт-объект (кликните по слою в палитре Слои правой кнопкой мыши и выберите пункт Преобразовать в смарт-объект).

Шаг 14

Поверните смарт-объект, созданный в предыдущем шаге, на 6 градусов, и нажмите Enter (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

Дублируйте этот смарт-объект (Ctrl + J) и поверните дубликат на 12 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

Дублируйте этот смарт-объект (Ctrl + J) и поверните дубликат на 18 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

 

Дублируйте этот новый смарт-объект (Ctrl + J) и поверните его на 24 градуса (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

Шаг 15

Выделите четыре смарт-объекта голубого цвета, созданные в предыдущем шаге, преобразуйте их в единый смарт-объект ) (кликните по слою в палитре Слои правой кнопкой мыши и выберите пункт Преобразовать в смарт-объект) и дублируйте полученный смарт-объект (Ctrl + J). Поверните дубликат на -30 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

В палитре Слои выделите оба смарт-объекта голубого цвета, преобразуйте их в единый смарт-объект, а затем создайте две копии (Ctrl + J).

Поверните первый дубликат на 60 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

Поверните второй дубликат на -60 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

Выделите все смарт-объекты голубого цвета и преобразуйте их в единый смарт-объект. К полученному смарт-объекту добавьте стиль Наложение цвета (Color Overlay).

Шаг 16

Установите цвет переднего плана  #141414 и инструментом Текст (Type Tool) напишите цифры, как показано на первом изображении. Для создания текста я использовал шрифт Calibri, Bold, размер 15pt.

Выделите все слои с текстом, преобразуйте их в смарт-объект и к полученному слою добавьте стиль Тень (Drop Shadow).

Шаг 17

Выберите для цвета переднего плана красный цвет и инструментом Прямоугольник (Rectangle Tool) нарисуйте 4 векторные фигуры размером 97px . Расположите эти фигуры, как показано на первом изображении, выберите инструмент Стрелка (Direct Selection Tool) и сфокусируйтесь на нижней части одного из красных прямоугольников.

Выделите левую опорную точку и сдвиньте ее на 1 пиксел вправо, затем выделите правую опорную точку и сдвиньте ее на 1 пиксел влево.

Шаг 18

Выделите векторную фигуру, созданную в предыдущем шаге, и нажмите Ctrl + T. Сфокусируйтесь центральной точке на красной фигуре. Удерживая клавишу Shift , перетащите ее  так, как показано на первом изображении. В финале, поверните красную фигуру, как показано на втором изображении:

Шаг 19

Сфокусируйтесь на векторной фигуре, отредактированной в предыдущем шаге. Для начала, замените красный цвет на #141414 и добавьте стиль слоя Внутренняя тень (Inner Shadow).

Шаг 20

Для цвета переднего плана установите #141414, выберите инструмент Эллипс (Ellipse Tool) и нарисуйте круг размером 14px. Добавьте к этой фигуре стиль слоя Внутренняя тень (Inner Shadow).

Шаг 21

Для цвета переднего плана выберите цвет #d5cdc3 и инструментом Эллипс (Ellipse Tool) нарисуйте круг размером 4px. Расположите фигуру, как показано на скриншоте. К слою с этой фигурой добавьте стили слоя:

Шаг 22

Выделите три векторные фигуры, которые создали в последних пяти шагах и дублируйте их (Ctrl + J). Выделите эти копии и преобразуйте их в смарт-объект. Уменьшите параметр Заливка (Fill) до 0% и добавьте стиль Тень (Drop Shadow).

Шаг 23

Выделите смарт-объект, который создали в предыдущем шаге и дублируйте его (Ctrl + J). К дубликату добавьте стиль слоя Тень (Drop Shadow).

Шаг 24

Выберите инструмент Эллипс (Ellipse Tool), нарисуйте круг размером 55px и расположите его, как показано на первом изображении. Уменьшите параметр Заливка (Fill) слоя с фигурой, которую только что нарисовали до 0% и добавьте стиль слоя Обводка (Stroke).

Шаг 25

Сфокусируйтесь на круге, который создали в предыдущем шаге, выберите для цвета переднего плана цвет #141414 и нарисуйте две векторные фигуры размером 4px. Выделите оба этих прямоугольника и преобразуйте их в смарт-объект.

Шаг 26

Дублируйте смарт-объект, созданный в предыдущем шаге (Ctrl + J) и поверните дубликат на 60 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate). Снова дублируйте смарт-объект (Ctrl + J) и поверните полученный слой на -60 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

Инструментом Текст (Type Tool) напишите числа (я использовал шрифт Calibri, Bold, размер 8pt).

Шаг 27

Для цвета переднего плана выберите красный цвет и инструментом Прямоугольник (Rectangle Tool) нарисуйте четыре векторные фигуры размером 43px. разместите фигуры, как показано на первом изображении, выберите инструмент Стрелка  (Direct Selection Tool) и сфокусируйтесь на верхней части этого красного прямоугольника.

Выделите левую опорную точку и сдвиньте ее на 2 пиксела вправо, затем выберите инструмент Удалить опорную точку (Delete Anchor Point Tool) и удалите верхнюю правую опорную точку. Фигура будет выглядеть, как на втором изображении. Далее, поверните ее, как показано на третьем изображении.

Шаг 28

Сделайте активным слой с фигурой, которую создали в предыдущем шаге и измените ее красный цвет на #141414. Добавьте к этой фигуре стиль Внутренняя тень (Inner Shadow).

Шаг 29

Установите для переднего плана цвет  #141414 и инструментом Эллипс (Ellipse Tool) нарисуйте фигуру, размером 10px . Добавьте к этой фигуре стиль Внутренняя тень (Inner Shadow).

Шаг 30

Для цвета переднего плана установите #f0eae3, инструментом Эллипс (Ellipse Tool) нарисуйте круг размером 2px  и добавьте к нему стили слоя:

Шаг 31

Выделите три векторные фигуры, которые создали в последних четырех шагах и дублируйте их (Ctrl + J). Полученные копии преобразуйте в смарт-объект, уменьшите параметр Заливка (Fill) этого смарт-объекта до 0% и добавьте к нему стиль слоя Тень (Drop Shadow).

Шаг 32

Дублируйте смарт-объект, созданный в предыдущем шаге (Ctrl + J). К дубликату добавьте стиль слоя Тень (Drop Shadow):

Шаг 33

Дублируйте векторную фигуру, которую создали в восьмом шаге, удалите с нее стили слоя и переместите в верхнюю часть палитры Слои (Shift + Ctrll + ]). Установите параметр Заливка (Fill) до 0% и добавьте стили слоя:

Шаг 34

Дублируйте векторную фигуру, отредактированную в предыдущем шаге (Ctrl + J), удалите с дубликата стили слоя, уменьшите параметр Заливка (Fill) до 0% и добавьте стиль слоя Обводка (Stroke).

Шаг 35

Выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) с радиусом 3px, нарисуйте векторную фигуру размером 24х30px и расположите их, как показано на первом изображении. К нарисованной фигуре примените команду Деформация (Редактирование – Трансформирование – Деформация) (Edit > Transform > Warp). Из выпадающего меню выберите тип деформации Дуга (Arc), в поле Изгиб (Bend) установите 25 и нажмите Enter.

Из выпадающего меню команды Деформация выберите теперь тип Дуга вниз (Arc Upper), установите значение -10 в поле Изгиб (Bend) и нажмите Enter.

Шаг 36

Примените некоторые стили слоя к векторной фигуре, которую создали в предыдущем шаге. Когда дойдете до стиля слоя Наложение градиента (Gradient Overlay), сохраните используемый градиент, кликнув по кнопке Новый (New).

Шаг 37

Сфокусируйтесь на верхней части векторной фигуры, которую отредактировали в предыдущем шаге. Теперь выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) с радиусом 3px и нарисуйте векторную фигуру размером  30х20px.

К этой фигуре примените команду Деформация (Редактирование – Трансформирование – Деформация) (Edit > Transform > Warp): из выпадающего списка выберите тип Дуга вниз (Arc Lower), в поле Изгиб (Bend) установите 20 и нажмите Enter.

Шаг 38

К этой фигуре примените некоторые стили слоя. Когда дойдете до стиля Наложение градиента (Gradient Overlay), используйте градиент, который сохранили в 36 шаге.

Шаг 39

Инструментом Эллипс (Ellipse Tool) нарисуйте фигуру размером 30х6px и добавьте к нему стили слоя. При добавлении стиля Наложение градиента (Gradient Overlay) также используйте градиент, сохраненный в 36 шаге.

Шаг 40

Выберите для цвета переднего плана #d7d7d7 и инструментом Эллипс (Ellipse Tool) нарисуйте круг размером 80px . Расположите фигуру, как показано на первом изображении. Не меняя инструмента, при активном слое с только что нарисованной фигурой, кликните по кнопке Вычитание (Subtract) на панели свойств и нарисуйте круг размером 68px, как показано на втором изображении.

Шаг 41

Сфокусируйтесь на нижней части фигуры, которую создали в предыдущем шаге. Выберите инструмент Прямоугольник (Rectangle Tool) с параметром вычитание (Subtract) и нарисуйте векторную фигуру размером 22х10px. При активном слое с только что нарисованной фигурой, выберите инструмент Эллипс (Ellipse Tool), кликните по кнопке Добавить (Add) на панели свойств и добавьте два круга размером 6px, как показано на втором изображении.

Шаг 42

К фигуре, нарисованной в предыдущем шаге, добавьте стили слоя:

Шаг 43

Сфокусируйтесь на нижней части векторной фигуры, отредактированной в предыдущем шаге. Установите для цвета переднего плана черный и инструментом Эллипс (Ellipse Tool) нарисуйте два круга размером 6px. Расположите фигуры, как показано на первом изображении.

К левому и правому кругам добавьте стиль слоя Тень (Drop Shadow). Теперь выделите оба слоя с кругами и переместите их под векторную фигуру, отредактированную в предыдущем шаге.

Шаг 44

Инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool) с радиусом  3px нарисуйте векторную фигуру размером 16х18px. К этой фигуре примените команду Деформация (Редактирование – Трансформирование – Деформация) (Edit > Transform > Warp).

Выберите пункт Дуга вниз (Arc Lower) и в пункте Изгиб (Bend) установите значение 30. Нажмите Enter, чтобы применить изменения.

Снова примените команду Деформация (Редактирование – Трансформирование – Деформация) (Edit > Transform > Warp), но на этот раз выберите пункт Арка вверх (Arc Upper). В параметре Изгиб (Bend) установите значение -10 и нажмите Ente , чтобы применить изменения.

Примените стили слоя. В стиле слоя Наложение градиента (Gradient Overlay) используйте сохраненный ранее градиент:

Шаг 45

Инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool) с радиусом 3px, нарисуйте фигуру размером 20х20px и примените к ней команду Деформация (Редактирование – Трансформирование – Деформация) (Edit > Transform > Warp). Из выпадающего списка выберите Выпуклость (Bulge) в поле Изгиб (Bend) установите значение 15 и нажмите Enter. 

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

Шаг 46

Теперь нужно создать текстуру. Для начала, создайте новый документ (Ctrl + N), в полях Ширина (width) и высота (height) установите значение 2 и нажмите ОК. Из палитры Слои удалите слой «Background», установите для цвета переднего плана черный и выберите инструмент Прямоугольник (Rectangle Tool).

Нарисуйте фигуру размером 1х2px и преобразуйте ее в узор (Редактирование – Определить узор) (Edit > Define Pattern). Задайте имя текстуре и нажмите ОК. Закройте этот документ (его не нужно сохранять) и вернитесь к основному документу.

Шаг 47

К смарт-объекту, созданному в 45 шаге добавьте стили слоя:

Шаг 48

Выделите векторную фигуру и смарт-объект, которые создали в последних четырех шагах и преобразуйте их в смарт-объект. Поверните полученный слой на 30 градусов (Редактирование – Трансформирование – Поворот) (Edit > Transform > Rotate).

Шаг 49

Выберите инструмент Прямолинейное лассо (Polygon Tool) и в панели свойств в окне Стороны (Sides) установите значение 4. Там же выберите тип Звезда (star) с радиусом 10px  и введите значение 85%.

Для цвета переднего плана установите белый, и нарисуйте фигуру звезды.

Шаг 50

Дублируйте фигуру звезды (Ctrl + J) и преобразуйте дубликат в смарт-объект. Примените к нему фильтр Размытие по Гауссу (Фильтр – размытие – размытие по Гауссу) (Filter > Blur > Gaussian Blur) с радиусом 1.5px .

Шаг 51

Дублируйте все имеющиеся слои и преобразуйте дубликаты в смарт-объект. Переместите смарт-объект под все слои (Ctrl + Shift + [), уменьшите параметр Заливка (Fill) до 0% и добавьте стиль слоя Тень (Drop Shadow).

Шаг 52

Дублируйте смарт-объект, который создали в предыдущем шаге (Ctrl + J) и добавьте к дубликату стиль Тень (Drop Shadow).

Шаг 53

Дублируйте смарт-объект, который создали в предыдущем шаге (Ctrl + J) и добавьте к дубликату стиль Тень (Drop Shadow).

Шаг 54

Дублируйте смарт-объект, который создали в предыдущем шаге (Ctrl + J), и добавьте к дубликату стили слоя:

Шаг 55

Выделите все слои с металлическим корпусом и дублируйте их (Ctrl + J). Все полученные копии преобразуйте в смарт-объект. Загрузите выделение смарт-объекта (зажмите клавишу Ctrl и кликните по миниатюре смарт-объекта в палитре Слои). Создайте новый слой (Shift + Ctrl + N) и инструментом Заливка (Paint Bucket Tool) кликните внутри выделения, чтобы залить его черным цветом.

Снимите выделение (Ctrl + D) и удалите смарт-объект, который создали в начале этого шага.

Шаг 56

Активируйте слой, созданный в предыдущем шаге, и уменьшите параметр Заливка (Fill) до 0%. Добавьте стили слоя. В стиле Наложение цвета (Color Overlay) уменьшите непрозрачность до 50% и выберите желтый цвет (#ffd76b) .

Шаг 57

В финале, добавим простой фон. Создайте новый слой (Shift + Ctrl + N) под всеми существующими слоями и залейте его цветом #505050. Добавьте стиль слоя Внутренняя тень (Inner Glow).

Шаг 58

Преобразуйте в смарт-объект слой, который создали в предыдущем шаге и добавьте к нему фильтр Шум (Фильтр – Шум – Добавить шум) (Filter > Noise > Add Noise).

Финальное изображение:

Автор: Andrei Marius

Перевод: Слуцкая Светлана

Иконки «Секундомер» — скачай бесплатно PNG и вектор

Спортивный секундомер

+ В коллекцию

Спортивный секундомер

+ В коллекцию

Спортивный секундомер

+ В коллекцию

Спортивный секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Анимированные

Секундомер

+ В коллекцию

Секундомер

+ В коллекцию

Производительность смартфона

+ В коллекцию

Производительность смартфона

+ В коллекцию

Производительность смартфона

+ В коллекцию

Производительность смартфона

+ В коллекцию

Производительность смартфона

+ В коллекцию

Производительность смартфона

+ В коллекцию

Производительность смартфона

+ В коллекцию

Производительность смартфона

+ В коллекцию

Производительность смартфона

+ В коллекцию

Производительность смартфона

+ В коллекцию

Производительность смартфона

+ В коллекцию

Производительность смартфона

+ В коллекцию

Производительность смартфона

+ В коллекцию

Время-деньги

+ В коллекцию

Время-деньги

+ В коллекцию

Таймер

+ В коллекцию

Таймер

+ В коллекцию

Таймер

+ В коллекцию

Таймер

+ В коллекцию

Таймер

+ В коллекцию

Таймер

+ В коллекцию

Таймер

+ В коллекцию

Таймер

+ В коллекцию

Таймер

+ В коллекцию

Таймер

+ В коллекцию

Мой собственный секундомер в Android

Я разрабатываю простой секундомер проблема в том, что когда пользователь нажимает кнопку home, ведьма потока вычисляет время зависания, как я могу избежать того, чтобы поток работал в фоновом режиме ?

android

Поделиться

Источник

opc0de    

04 июня 2012 в 12:55

2 ответа

• Как сделать публичный секундомер в C#

  Я довольно новичок в C#,, так что простите меня, если я совершу глупую ошибку или этот вопрос очевиден. Я пытаюсь создать программу, которая может создавать несколько экземпляров таймера, который отображается в datagridview. В принципе, каждая строка должна иметь свой собственный таймер, которым…

• Сделайте мой собственный шрифт для android

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

3

Гораздо более простым решением было бы записать время начала stopWatch с помощью system.currentTimeMillis.
когда будет вызвано действие onResume или onStart(), обновите часы, чтобы показать время, прошедшее с момента сохранения.

Поделиться

Guy    

04 июня 2012 в 12:59

Поделиться

AlexZam    

04 июня 2012 в 12:57

Похожие вопросы:

секундомер в android

мне нужно создать секундомер со стартом, остановкой и паузой в android. еще не начато никакого кодирования.

Android — мой собственный контроль вкладок

Мне не нравится, как выглядят вкладки с собственным элементом управления tab в Android, поэтому я хотел бы создать свой собственный элемент управления. Я могу создавать и рисовать свои собственные…

Как я могу сделать секундомер в Android?

Мне нужен секундомер, как виджет в android. В настоящее время я использую хронометр Android,он не отвечает моим требованиям, так как когда я останавливаю хронометр, он останавливается в UI, но он…

Как сделать публичный секундомер в C#

Я довольно новичок в C#,, так что простите меня, если я совершу глупую ошибку или этот вопрос очевиден. Я пытаюсь создать программу, которая может создавать несколько экземпляров таймера, который…

Сделайте мой собственный шрифт для android

Привет, я хочу сделать свой собственный шрифт для арабского текста в android. Я погуглил и нашел такие инструменты, как font struct и другие. вопрос в том, что я думаю, что эти инструменты заставят…

Насколько точным может быть секундомер в ОС Android?

поэтому мне нужно сделать простой, но надежный секундомер с точностью 1 мс для устройства android (трансформаторный планшет). У меня нет никакого опыта работы с android. После поиска я не нахожу…

Как использовать собственный секундомер с меньшим количеством знаков после запятой?

В Visual Basic 2010, как вы используете встроенную функцию секундомера с меньшей точностью/с меньшим количеством знаков после запятой. Я строю секундомер. Он работает довольно хорошо, но имеет…

Android секундомер отстает

Я сделал свой собственный секундомер для работы на устройстве am Android, и все это, кажется, работает хорошо, но примерно через 15-20 секунды появляется заметное отставание по сравнению с другими…

Android таймер/секундомер с пользовательским UI и удовлетворительной производительностью

Я пытался создать собственный секундомер, который будет отсчитывать время в android. Он должен быть довольно точным вплоть до 0.1s и с пользовательским макетом и изображениями для примера цифр:…

Секундомер. Отсчет секунд. javafx

Я хочу сделать секундомер (hours:minutes:seconds), и я подумал, что должен сделать это следующим образом. Переменный результат будет передан в мой TextField , startTime будет временем, в которое мы…

Игры на асфальте с использованием мелков

Лето уже совсем близко, солнечные дни всё чаще радуют наши сердца, а маленькие непоседы тянут своих мам на прогулку, ведь на улице, на свежем воздухе такой простор для игр! Одно из самых любимых увлечений малышей на улице – рисование мелками на асфальте. А сколько отличных игр можно придумать, используя этот простой и доступный материал!

Педагог-психолог отделения «Надежда» Инна Евгеньевна Кузьмина предлагает вам интересные и увлекательные игры с использованием мелков.

Игра «Дорисуй»
Эта игра подойдёт не только для самых маленьких, но и для ребят постарше. Мама рисует какую-то фигуру, цифру или букву. Задание для ребёнка – пофантазировать и превратить фигурку в узнаваемый предмет, зверюшку, любимого мультяшного героя.

Игра «Классики»
Эта старинная детская игра известна во всём мире и знакома нам с детства. Но большинство современных детей даже не знают, как в неё играть. Объясните ребёнку правила: попеременно рисуем квадраты с цифрами от 1 до 10. Прыгать можно на одной или двух ногах, зависимо от количества клеток. Если на старте кинуть камушек в одну из ячеек, на обратном пути его необходимо забрать.

Игра «Лабиринт»
Для этой игры на улице вам понадобиться секундомер. Рисуем лабиринт необычной формы. Его можно вписать в круг, квадрат, треугольник или придумать что-то необычное. Дети преодолевают препятствие на скорость «кто быстрее». Соревноваться можно на велосипедах, роликах или самокатах. Попробуйте обозначить разные маршруты буквами или цифрами.

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

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

Игра «Водный дартс»
Возьмите несколько водных пистолетов и мелки — и получите отличное развлечение для улицы. Просто нарисуйте огромную мишень на асфальте или на стене, встаньте подальше и старайтесь попасть в яблочко. В жару – просто незаменимая и простая игра! Вместо пистолетов можно использовать мокрую губку, она также будет оставлять мокрый след. Если не хотите использовать воду, подойдут маленькие камешки.

Нарисуйте аналоговый секундомер с помощью Illustrator

Предварительный просмотр

Шаг 1. Создание металлического кожуха

Настройте монтажную область Illustrator так, чтобы она имела размер 500×500 пикселей.

Выберите инструмент «Эллипс» (L) на панели инструментов. Удерживая Shift, растяните круг.

Примените линейный градиент, как показано ниже.

Теперь нам нужен белый круг поменьше. Скопируйте первый круг (Ctrl / Cmd + C), а затем вставьте вперед (Ctrl / Cmd + F).Немного уменьшите масштаб копии и установите белый цвет заливки.

Скопируйте (Ctrl / Cmd + C, а затем Ctrl / Cmd + F) круг из предыдущего шага. Немного уменьшите масштаб и примените радиальный градиент, как показано ниже.

Переместите градиент на 1 пиксель влево, что создаст небольшой блик по краю справа.

Скопируйте внутренний круг и вставьте вперед. Немного уменьшите масштаб, удалите цвет заливки копии и установите для параметра Толщина обводки значение 2 пункта.

Теперь нам нужно расширить путь, чтобы применить к объекту радиальный градиент. Выделите круг и перейдите в Object> Expand.

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

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

Убедитесь, что у вас все еще выделен белый круг, а затем перейдите в Object> Transform> Scale. В диалоговом окне Масштаб установите Масштаб на 99%, а затем нажмите кнопку Копировать. Таким образом мы создадим круг немного меньшего размера.

Примените радиальный градиент, показанный ниже, к новому кругу.

Дублируйте последний круг, который мы только что создали, и немного уменьшите его. Установите цвет заливки дубликата на очень темно-серый (# 231F20).

Сгруппируйте все элементы, которые мы создали, выбрав их и затем перейдя в «Объект»> «Сгруппировать» (Ctrl / Cmd + G).

Шаг 2. Создайте шаг секундомера

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

Создайте круг, который немного меньше круга из предыдущего шага. Удалите цвет заливки и установите белый цвет обводки.Правильно выровняйте этот круг, используя панель «Выравнивание» («Окно»> «Выровнять»), чтобы выровнять его по вертикали и горизонтали.

Для начала нам нужно создать 12 приращений; это будут основные приращения. Выберите инструмент «Линия» (/) на панели инструментов и нарисуйте небольшую вертикальную линию. Совместите линию с остальной частью секундомера с помощью панели выравнивания с помощью кнопки Horizontal Align Center .

Удерживая Alt / Option + Shift, выберите небольшую линию, которую мы только что создали, и перетащите ее вниз, чтобы сделать копию.Переместите копию в желаемое место.

Выделите обе строки и сгруппируйте их (Ctrl / Cmd + G). Перейдите в Object> Transform> Rotate.

Так как нам нужно 12 приращений, мы должны вычислить угол поворота.

В диалоговом окне «Поворот» установите для параметра «Угол» значение 30 ^o и нажмите кнопку «Копировать». Он создаст новый набор линий, но повернут на 30 ^o от исходного угла.

Повторите точно такое же преобразование поворота, выбрав «Объект»> «Преобразовать»> «Снова преобразовать» (Ctrl / Cmd + D).Повторяйте это преобразование, пока не создадите все 12 приращений.

Теперь нам нужны меньшие приращения для каждой секунды на секундомере. Процесс очень похож; нам просто нужно внести несколько изменений в размер линий и угол поворота.

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

Давайте разгруппируем (Shift + Ctrl / Cmd + G) первую пару строк, которые мы создали. Теперь продублируйте верхнюю линию и сделайте дубликат немного меньше, уменьшив его масштаб.Удерживая Alt / Option + Shift, потяните вниз, чтобы дублировать меньшую линию. Сгруппируйте обе линии (Ctrl / Cmd + G), а затем перейдите в Object> Transform> Rotate. Установите Угол на 6 ^o и нажмите кнопку Копировать.

Если вы нажмете Ctrl / Cmd + D 28 раз, вы завершите весь круг.

Теперь нам нужны еще меньшие приращения. Поскольку количество необходимых нам шагов равно 300, мы должны снова вычислить угол поворота, который оказывается равным 1.2 ^o .

Повторите предыдущий процесс, но сделайте линию короче и уменьшите Stroke Weight до 0,5pt, чтобы сделать ее тоньше.

После завершения приращения должны выглядеть следующим образом:

Шаг 3. Создание чисел на секундомере

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

Выделите круг с белой обводкой и продублируйте его. Немного уменьшите масштаб копии.

Возьмите «Текст» на инструменте «Путь», который можно найти, удерживая нажатой кнопку «Текст» на панели инструментов. Щелкните наш путь и введите числа, представляющие секунды. Совместите их с основными шагами.

Чтобы добавить бликов к нашему секундомеру, вы можете выбрать линии основных шагов, установить их Обводку на 2 точки и изменить их цвет на оранжевый.

Не стесняйтесь примерить секундомер по-разному. Измените цвета и добавьте (или удалите) некоторые элементы.

Шаг 4: Создайте иглу

А теперь пора создать стрелку, которая показывает время.

Во-первых, нам нужно установить центр секундомера. Для этого нам потребуются линейки, поэтому перейдите в меню «Просмотр»> «Линейки»> «Показать линейки» (Ctrl / Cmd + R), чтобы включить их, если они еще не включены.

Нажмите и удерживайте линейки на краю рабочего пространства, а затем перетащите указатель мыши к центру секундомера, чтобы создать направляющие (как показано ниже).Это было бы проще и точнее, если бы у вас были включены умные направляющие (перейдите в «Просмотр»> «Умные направляющие», чтобы включить эту функцию).

Теперь нам нужно нарисовать иглу. Возьмите инструмент «Звезда» на панели инструментов и щелкните один раз на монтажной области, чтобы открыть диалоговое окно «Звезда». В диалоговом окне «Звезда» установите для «Точки» значение 3, чтобы создать треугольник.

Переключитесь на инструмент «Прямое выделение» (A) на панели инструментов, удерживая нажатой клавишу «Shift», выберите верхнюю опорную точку треугольника и перетащите вверх.Используйте инструмент Удалить опорную точку (-), чтобы удалить опорные точки, как показано ниже.

Инструментом «Эллипс» (L) нарисуйте маленький круг и поместите его над иглой. Совместите круг и иглу с помощью команды Horizontal Align Center на панели Align.

Измените цвет заливки иглы на белый. Создайте круг поменьше и поместите его идеально в центре первого круга.

Теперь нам нужно поместить стрелку в центр секундомера, и это причина, по которой нам пришлось установить центр секундомера, используя ранее направляющие.

Шаг 5: Создание таймера меньшего размера

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

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

Сгруппируйте все созданные нами объекты, когда закончите.

Шаг 6: Создание кнопок

Возьмите инструмент «Прямоугольник» (М) и создайте прямоугольник. Примените линейный градиент к прямоугольнику, как показано ниже.

Создайте еще один прямоугольник и примените тот же линейный градиент. Выровняйте оба прямоугольника с помощью команды Horizontal Align Center на панели Align. Выделите оба прямоугольника и сгруппируйте их (Ctrl / Cmd + G). Дублируйте группу.Увеличьте масштаб дубликата и поместите его в верхней части секундомера. Совместите его с секундомером, используя команду Horizontal Align Center на панели Align.

Переключитесь на инструмент «Линия» (/) и нарисуйте 2 вертикальные линии. Выделите их обоих, затем перейдите в Object> Blend> Make.

В диалоговом окне Blend установите для Specified Steps значение 35, а затем нажмите кнопку OK.

Поместите линии поверх нового объекта.

Выберите другую копию сделанного нами объекта.Перейдите в Object> Transform> Rotate и поверните его на 45 ^o .

Выберите «Объект»> «Преобразовать»> «Отразить», выберите «Вертикальное» в диалоговом окне и нажмите кнопку «Копировать». Переместите повернутую копию вправо.

Выделите оба объекта, сгруппируйте их (Ctrl / Cmd + G) и поместите их на секундомер.

Шаг 7: Создание стеклянного отражения

Мы почти закончили. Теперь нам просто нужно отражение окна на стеклянной крышке.Создавать очень просто.

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

Выберите черный кружок и продублируйте его. Удалите цвет Заливки и установите цвет Обводки на розовый (или что-то еще, какой цвет на самом деле не имеет значения, пока мы его видим).

Возьмите инструмент «Прямое выделение» (A) на панели инструментов и удалите опорные точки, как показано на следующем изображении.Переключитесь на Pen Tool (P) и нарисуйте форму отражения окна.

Снимите выделение с формы («Выделение»> «Снять выделение») и нарисуйте два пути, показанные ниже.

Выберите оба пути и затем перейдите в Object> Expand.

Теперь выберите все объекты, связанные с отражением стеклянного окна, и на панели Pathfinder нажмите кнопку Minus Front .

Примените радиальный градиент, показанный ниже, к отражению окна и уменьшите Непрозрачность слоя примерно до 39%.

Краткое содержание учебника

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

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

Скачать исходные файлы

it2051229 Секундомер

Напишите программу секундомера JPanel, используя уже предоставленные файлы java в качестве скелета.

Drawable.java — это простой интерфейс, содержащий один метод. Любые объекты, которые вы рисуете графически, должны реализовывать этот интерфейс и должны быть нарисованы с помощью вызова метода draw () (включая цифры и двоеточия, разделяющие цифры).

Светодиод.java — это базовый класс для класса, который будет представлять цифры в вашем секундомере. Вы должны расширить этот класс логическим образом и реализовать абстрактный метод draw (), чтобы ваши цифры можно было эффективно использовать в вашем секундомере. Вы должны реализовать (как минимум) два класса, описанные ниже. Не стесняйтесь писать дополнительные классы, если считаете, что они необходимы. Класс StopWatch: — Класс StopWatch графически и логически представляет ваш секундомер. Он будет представлять секундомер графически, показывая цифры и разделители в четком и удобочитаемом виде.(Примечание. ЗАПРЕЩАЕТСЯ отображать секундомер на дисплее в виде строки любого вида. Все цифры и разделители, которые вы показываете, должны быть объектами, созданными вами самостоятельно и нарисованными графически. В частности, цифры должны быть экземплярами класс Digit, который более подробно объясняется ниже).

Он будет логически представлять секундомер, имея кнопки запуска, остановки, сброса и круга, как показано в файле A5snap.htm. Эти кнопки являются элементами управления секундомером и должны быть реализованы в вашем классе StopWatch.Внимательно прочтите A5snap.htm, чтобы узнать о необходимых функциях секундомера. —

Для реализации класса StopWatch необходимо расширить JPanel. В вашем подклассе JPanel вам понадобится еще одна JPanel для поддержки 4 кнопок JButton — одна для запуска часов, одна для их остановки, одна для сброса и одна для «круга». Кнопка «круг» — это кнопка переключения. При первом нажатии он покажет вам «замороженный» снимок текущего зарегистрированного времени, в то же время позволяя секундомеру продолжать отсчет. Он также будет записывать время круга, добавляя его в конец текстового файла (нумеруя записи).При повторном нажатии он снова покажет текущее истекшее время (которое будет продолжаться). Обратите внимание, что другие кнопки должны по-прежнему работать правильно при использовании в сочетании с «кругом». Например, если секундомер запущен, и пользователь нажимает «круг», на экране должно отображаться текущее прошедшее время. Если затем пользователь нажимает «сброс», вид экрана не должен измениться (это все еще круг), но сам секундомер должен быть сброшен на 0 (и он сразу же снова начнет тикать вверх, так как «стоп» не была нажата.Если пользователь затем снова нажимает «круг», будет показано время, прошедшее с момента «сброса» (и будет продолжать расти вверх).

Дополнительные сведения об этой функции см. На A5snap.htm. — Вам также нужно будет нарисовать секундомер графически, нарисовав соответствующие цифры. Это будет сделано в методе paintComponent () класса StopWatch. Наконец, вы должны позволить секундомеру фактически «тикать». Это можно сделать довольно простым (если несколько неточным — см. Примечание в конце этого листа назначений) способом, используя javax.swing.Timer и ActionListener. Посмотрите этот класс в Java API для получения более подробной информации. Есть еще кое-что, о чем будет полезно знать для реализации класса StopWatch. См. Раздаточные материалы для получения дополнительной помощи. Класс цифр: — Посмотрите на предоставленный вам класс светодиодов. Это абстрактный класс, представляющий светодиодный элемент. Он состоит из 7 линейных сегментов, как показано в конструкторе.

LED реализует Drawable, но оставляет абстрактный метод draw ().Ваш класс Digit расширит LED, чтобы вы могли представлять каждую из 10 возможных цифр, которые должны отображаться в секундомере (и во многих других приложениях). Поскольку сами сегменты являются частью класса LED, очевидно, что класс Digit должен просто хранить значение цифры и реализовывать метод draw () для вывода сегментов, соответствующих этой цифре. Поскольку цифры будут меняться по мере работы секундомера, вам также понадобятся некоторые методы мутатора и доступа для этого класса. Класс Digit также должен масштабировать размер своих объектов на основе параметра конструктора.Полезные советы: — Как указано выше, поищите несколько раздаточных материалов, которые дадут некоторые подсказки о правильном выполнении этого задания. В частности, просмотрите раздаточные материалы A5Help.java и MyPanel.java, чтобы увидеть некоторые подсказки о том, как настроить вашу программу. — Чтобы записать информацию о таймере в файл, вам необходимо «обработать» возможное исключение IOException. Вы можете сделать это, просто поместив обработчик исключений вокруг кода и оставив часть «дескриптор» пустой. Вы уже видели это в Lab8.java.

Экстра # 1; Добавьте часы времени в свой секундомер (используя тот же класс Digit для базовой реализации).Если вы сделаете это, вы должны включить способ переключения между секундомером и временем дня, а отображение времени дня не должно отключать секундомер. >

Extra # 2 Секундомер обычно представляет собой таймер «обратного отсчета», используемый для определения времени, по истечении которого события происходят. Таймер «обратного отсчета» более полезен для отсчета времени, требующего определенного количества времени (например, выпечки печенья, большинства вещей, приготовленных в микроволновой печи, времени для угадывания во многих викторинах). Добавьте таймер обратного отсчета в свой секундомер, где время инициализируется пользователем, а при запуске таймер ведет обратный отсчет от этого значения до нуля.> Если вы выберете опцию «обратный отсчет» выше, неплохо, если бы таймер «сообщал вам», когда он закончится. Вы можете сделать это, если ваша программа будет издавать некоторый шум, когда секундомер достигнет нуля. Это может быть сделано с помощью вашей программы «play ()» звукового клипа, который вы прочитали. Это несложно, но очевидно, что вам нужно будет выяснить, как это сделать, чтобы получить признание.

Создание простой иллюстрации секундомера в Adobe Illustrator

Следующие шаги помогут вам создать простую иллюстрацию секундомера в Adobe Illustrator.Для начала вы узнаете, как подготовить документ и как настроить простую сетку. Затем, используя основные инструменты и эффекты вместе с панелями «Оформление» и «Обработка контуров», вы узнаете, как создавать основные формы секундомера. Воспользовавшись всеми преимуществами панели «Оформление» и несколькими эффектами «Преобразование» и «Деформация», вы узнаете, как создавать более мелкие компоненты секундомера и как добавлять тонкие тени и блики. Наконец, вы узнаете, как легко перекрасить секундомер.

Подробности руководства

• Программа: Adobe Illustrator CS5 — CC
• Сложность: Начальный-Средний
• Охваченные темы: Основные инструменты и эффекты, Методы преобразования и панель «Оформление», Базовые методы наложения и построения векторных форм
• Приблизительное время выполнения: 45 минут

Окончательное изображение

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

Шаг 1

Нажмите Command + N , чтобы создать новый документ.Введите 600 в поля ширины и высоты, затем нажмите кнопку Advanced . Выберите RGB , Screen (72ppi) и убедитесь, что флажок Align New Objects to Pixel Grid снят, прежде чем нажать OK. Включите сетку ( View> Show Grid ) и привязку к сетке ( View> Snap to Grid ). Вам понадобится сетка каждые 5 пикселей, поэтому просто перейдите в меню Edit> Preferences> Guides> Grid , введите 5 в поле Gridline в каждом поле и 1 в поле Subdivisions .Вы также должны открыть панель Info (Окно > Информация ) для предварительного просмотра в реальном времени с размером и положением ваших фигур. Не забудьте установить в качестве единицы измерения пиксели Edit> Preferences> Unit> General . Все эти опции значительно увеличат скорость вашей работы.

Шаг 2

Используя инструмент Ellipse Tool (L) , создайте круг 140 пикселей и залейте его линейным градиентом, показанным на следующем изображении.Убедитесь, что эта новая форма остается выделенной, и сфокусируйтесь на панели Appearance ( Window> Appearance ). Добавьте обводку 4pt и выделите ее. Установите черный цвет, выровняйте его по внутренней части, уменьшите непрозрачность до 30 % и измените Blending Mode на Soft Light . Продолжайте фокусироваться на панели Appearance , убедитесь, что обводка все еще выделена, и просто нажмите кнопку Duplicate Selected Item (указана маленькой синей стрелкой на следующем изображении).Это должно добавить копию выделенной обводки. Выберите этот новый штрих и просто уменьшите вес с 4 до 2 пунктов. Выделите эту обводку 2pt и продублируйте ее, используя ту же кнопку Duplicate Selected Item . Выберите этот третий штрих и просто установите толщину 1pt. Белые числа на изображении Gradient соответствуют Location процентам.

Шаг 3

Убедитесь, что ваш круг 140px все еще выделен, и сделайте копию на переднем плане ( CTRL + C> CTRL + F ).Используя инструмент Ellipse Tool (L) , создайте фигуру 190 x 110 пикселей , залейте ее черным цветом и разместите, как показано на первом изображении. Выделите эту новую форму вместе с копией, сделанной в начале шага, откройте панель Pathfinder (Окно > Pathfinder ) и нажмите кнопку Minus Front . Выделите получившуюся форму и сфокусируйтесь на панели «Оформление». Сначала выберите три штриха и просто удалите их. Далее выбираем заливку. Замените существующий линейный градиент простым черным, уменьшите его непрозрачность до 20% и измените Blending Mode на Soft Light .

Шаг 4

Используя инструмент Ellipse Tool (L) , создайте круг 120 пикселей , залейте его линейным градиентом, показанным ниже, и разместите, как показано на следующем изображении. Убедитесь, что эта новая форма остается выделенной, и сфокусируйтесь на панели Appearance . Сначала выберите заливку и перейдите в Effect> Stylize> Inner Glow . Введите свойства, показанные на следующем изображении, и нажмите OK. Вернитесь к панели Appearance и добавьте обводку 2pt.Выделите его, установите цвет на R = 165 G = 175 B = 178 , выровняйте его по внешнему краю и перейдите в Effect> Stylize> Drop Shadow . Введите свойства, показанные на следующем изображении, и нажмите OK. Вернитесь к панели Appearance и добавьте вторую обводку, используя кнопку Add New Stroke (указана маленькой синей стрелкой на следующем изображении). Выберите эту новую обводку, сделайте ее шириной 1pt, установите цвет на R = 135 G = 145 B = 148 и убедитесь, что она выровнена по внешней стороне.

Шаг 5

Для этого шага вам понадобится сетка каждые 1 пиксель, поэтому перейдите в меню Edit> Preferences> Guides & Grid и введите 1 в поле Gridline каждые . Используя инструмент «Перо » (P) , создайте вертикальный контур 5 пикселей , добавьте обводку 2 точки и установите его цвет на R = 176 G = 184 B = 186 . Дублируйте эту новую форму ( CTRL + C> CTRL + F ). Поместите эти крошечные новые пути, как показано на первом изображении, затем Сгруппируйте их ( CTRL + G ).Убедитесь, что эта новая группа выбрана, и перейдите к Effect> Distort & Transform> Transform . Введите свойства, показанные на следующем изображении, и нажмите OK.

Шаг 6

Используя инструмент «Перо » (P) , создайте вертикальный контур 7 пикселей , добавьте обводку 2pt и установите его цвет на R = 135 G = 145 B = 148 . Дублируйте эту новую форму ( CTRL + C> CTRL + F ). Поместите эти крошечные новые пути, как показано на первом изображении, затем Сгруппируйте их ( CTRL + G ).Убедитесь, что эта новая группа выбрана, и перейдите к Effect> Distort & Transform> Transform . Введите свойства, показанные на следующем изображении, и нажмите OK.

Шаг 7

Используя инструмент Rectangle Tool (M) , создайте фигуру 4 x 52 пикселей, залейте ее красным цветом и разместите, как показано на первом изображении. Сфокусируйтесь на верхней стороне этого нового прямоугольника и возьмите инструмент Direct Selection Tool (A) . Выберите левую опорную точку и перетащите ее на 1 пиксель вправо, затем выберите правую опорную точку и перетащите ее на 1 пиксель влево.Переключитесь на инструмент Ellipse Tool (L) , создайте круг 2px , залейте его тем же красным цветом и разместите, как показано на третьем изображении. Выделите обе формы, созданные на этом этапе, и нажмите кнопку Unite на панели Pathfinder . Выберите получившуюся форму и замените красный на R = 50 G = 50 B = 50 . Убедитесь, что эта темная форма остается выделенной, сосредоточьтесь на панели Appearance и добавьте вторую заливку, используя кнопку Add New Fill (указана маленькой синей стрелкой на следующем изображении).Выберите эту новую заливку, установите белый цвет, измените Blending Mode на Soft Light и перейдите в Effect> Path> Offset Path . Введите смещение -1px и нажмите ОК.

Шаг 8

Вернитесь к « линии сетки каждые 5 пикселей », поэтому просто перейдите в меню «Правка »> «Настройки»> «Направляющие и сетка » и введите 5 в поле «Линия сетки в каждом». Используя инструмент Ellipse Tool (L) , создайте круг 10px , залейте его линейным градиентом, показанным на следующем изображении, и сфокусируйтесь на панели Appearance .Добавьте вторую заливку для этой новой формы, выберите ее, установите цвет на R = 241 G = 236 B = 232 и перейдите в Effect> Path> Offset Path . Введите смещение -3px и нажмите ОК. Выделите этот крошечный кружок вместе с формой стрелки часов и Group их ( CTRL + G ). Убедитесь, что эта новая группа выбрана, и перейдите в Effect> Stylize> Drop Shadow . Введите свойства, показанные на следующем изображении, и нажмите OK. Наконец, вы можете легко повернуть эту группу, используя инструмент Rotate Tool (R) .Возьмите этот инструмент, выберите группу стрелок часов, поместите контрольную точку в середину этого крошечного круга, затем просто щелкните и перетащите, чтобы повернуть стрелку часов.

Шаг 9

Используя инструмент Ellipse Tool (L) , создайте новый круг 120px , залейте его линейным градиентом, показанным ниже, и разместите, как показано на следующем изображении. Желтый ноль на изображении Gradient означает Непрозрачность процентов. Убедитесь, что эта новая форма остается выделенной, и сфокусируйтесь на панели Appearance .Сначала выберите заливку, уменьшите ее непрозрачность до 65% и перейдите в Effect> Path> Offset Path . Введите смещение -3px и нажмите ОК. Продолжайте фокусироваться на панели Appearance и добавьте черную обводку размером 1pt. Выровняйте его по внутренней части, измените Blending Mode на Soft Light и уменьшите его непрозрачность до 30% . Добавьте вторую обводку для этой формы, сделайте ее шириной 3 пикселя, выровняйте ее по внутренней части, убедитесь, что установлен черный цвет, затем уменьшите ее непрозрачность до 20% и измените Blending Mode на Soft Light .

Шаг 10

Убедитесь, что форма, созданная на предыдущем шаге, все еще выделена, и сфокусируйтесь на панели Appearance . Добавьте новую заливку, перетащите ее в верхнюю часть панели Appearance , уменьшите ее непрозрачность до 15% и используйте линейный градиент, показанный на следующем изображении. Помните, что желтый ноль на изображении Gradient означает Непрозрачность процентов.

Шаг 11

Используя инструмент Ellipse Tool (L) , создайте фигуру 70 x 20px , залейте ее черным цветом, поместите, как показано на первом изображении, уменьшите ее непрозрачность до 3% и перейдите к Effect> Деформация> Дуга .Введите свойства, показанные на первом изображении, и нажмите ОК. Убедитесь, что инструмент Ellipse Tool (L) все еще активен, и создайте новую фигуру 70 x 20px . Залейте его белым цветом, поместите, как показано на втором изображении, уменьшите его непрозрачность до 20% и снова перейдите к Effect> Warp> Arc . Введите свойства, показанные на втором изображении, и нажмите ОК.

Шаг 12

Используя инструмент Ellipse Tool (L) , создайте круг 30 пикселей и разместите его, как показано на следующем изображении.Убедитесь, что для этой новой формы не задан цвет заливки, добавьте черную обводку размером 3 точки, выровняйте ее по внутренней части и перейдите в меню Object> Path> Outline Stroke . Выделите получившуюся форму, сфокусируйтесь на панели «Оформление» и замените существующий цвет заливки линейным градиентом, показанным на следующем изображении.

Шаг 13

Убедитесь, что форма, созданная на предыдущем шаге, все еще выделена, и сфокусируйтесь на панели Appearance . Добавьте вторую заливку для этого пути и выберите его.Используйте линейный градиент, показанный на первом изображении, измените Blending Mode на Soft Light и перейдите в Effect> Path> Offset Path . Введите смещение -1px и нажмите ОК. Вернитесь на панель Appearance и добавьте третью заливку для этого пути. Выберите его и просто добавьте радиальный градиент, показанный на втором изображении.

Шаг 14

Убедитесь, что ваш составной путь 30 пикселей все еще выбран, и сфокусируйтесь на панели Appearance .Добавьте четвертую заливку для этого пути, выберите его, используйте радиальный градиент, показанный на первом изображении, и уменьшите его непрозрачность с до 70% . Вернитесь на панель Appearance , выделите весь путь (просто щелкните по фрагменту текста «Составной контур» в верхней части панели Appearance ) и перейдите к Effect> Stylize> Drop Shadow . Введите свойства, показанные на следующем изображении, и нажмите OK.

Шаг 15

Используя инструмент Rectangle Tool (M) , создайте фигуру 10 x 20px , залейте ее линейным градиентом, показанным ниже, разместите, как показано на первом изображении, и перейдите к Effect> Stylize> Rounded Corners .Введите радиус 1px, нажмите OK и перейдите к Object> Expand Appearance . Убедитесь, что эта новая форма остается выделенной, сосредоточьтесь на панели Appearance и добавьте вторую заливку. Выберите его, используйте радиальный градиент, показанный на следующем изображении, и уменьшите его непрозрачность до 70% .

Шаг 16

Переключитесь на « линии сетки каждые 1 пиксель », перейдите в меню «Правка »> «Настройки»> «Направляющие и сетка » и введите 1 в поле «Линия сетки в каждом».Используя инструмент Ellipse Tool (L) , создайте фигуру 8 x 2px , залейте ее белым цветом и измените режим наложения на Soft Light . Возьмите инструмент Rectangle Tool (M) , создайте фигуру 10 x 4px , залейте ее черным цветом, поместите, как показано на втором изображении, уменьшите непрозрачность до 15% и измените режим наложения к Soft Light . Продолжайте использовать инструмент Rectangle Tool (M) , создайте фигуру 10 x 2px , залейте ее черным цветом, поместите, как показано на третьем изображении, уменьшите ее непрозрачность до 30% и измените режим наложения . С по Мягкий свет .

Шаг 17

Выберите все формы, созданные на последних пяти шагах, и Сгруппируйте их ( CTRL + G ). Выберите эту новую группу и отправьте ее на задний план ( Shift + CTRL + [). Используя инструмент Rectangle Tool (M) , создайте фигуру 10 x 1px , залейте ее цветом R = 195 G = 200 B = 205 и разместите, как показано на третьем изображении.

Шаг 18

Вернитесь к « линии сетки каждые 5 пикселей », поэтому просто перейдите в меню «Правка »> «Настройки»> «Направляющие и сетка » и введите 5 в поле «Линия сетки в каждом».Используя инструмент Rectangle Tool (M) , создайте квадрат 10px , залейте его линейным градиентом, показанным ниже, и перейдите в Effect> Stylize> Rounded Corners . Введите радиус 1px, нажмите OK и перейдите в Effect> Warp> Arc Lower . Введите свойства, показанные на следующем изображении, нажмите OK и перейдите к Object> Expand Appearance .

Шаг 19

Отключите привязку к сетке ( View> Snap to Grid ), затем перейдите в Edit> Preferences> General и убедитесь, что для параметра Keyboard Increment установлено значение 1px.Выделите фигуру, созданную на предыдущем шаге, и сделайте две копии спереди ( CTRL + C> CTRL + F> CTRL + F ). Выделите верхнюю копию и переместите ее на 1 пиксель вверх с помощью стрелки вверх на клавиатуре. Снова выделите обе копии и нажмите кнопку Minus Front на панели Pathfinder . Залейте получившуюся фигуру черным, уменьшите ее непрозрачность до 30% и измените Blending Mode на Soft Light . Снова выберите форму, созданную на предыдущем шаге, и сделайте еще две копии впереди ( CTRL + C> CTRL + F> CTRL + F ).Выберите верхнюю копию и переместите ее на 3 пикселя вверх с помощью стрелки вверх на клавиатуре. Снова выделите обе копии и нажмите кнопку Minus Front на панели Pathfinder . Залейте получившуюся форму черным, уменьшите непрозрачность до 15% и измените Blending Mode на Soft Light .

Шаг 20

Включите привязку к сетке ( View> Snap to Grid ). Используя инструмент Rectangle Tool (M) , создайте фигуру 20 x 10px , залейте ее линейным градиентом, показанным ниже, разместите, как показано на следующем изображении, и перейдите в Effect> Stylize> Rounded Corners .Введите радиус 3 пикселя, нажмите OK и перейдите к Object> Expand Appearance . Отключите привязку к сетке ( View> Snap to Grid ), затем выберите получившуюся форму и сделайте две копии спереди ( CTRL + C> CTRL + F> CTRL + F ). Выделите верхнюю копию и переместите ее на 1 пиксель вверх. Снова выделите обе копии и нажмите кнопку Minus Front на панели Pathfinder . Залейте получившуюся форму черным, уменьшите ее Opacity top 30% и измените Blending Mode на Soft Light .

Шаг 21

Снова выделите закругленный прямоугольник, созданный на предыдущем шаге, и перейдите к Object> Path> Offset Path . Введите смещение -1px и нажмите ОК. Выделите получившуюся форму и сделайте копию спереди ( CTRL + C> CTRL + F ). Выделите эту копию и переместите ее на 1 пиксель вниз. Снова выделите обе копии и нажмите кнопку Minus Front на панели Pathfinder . Залейте полученную форму линейным градиентом, показанным ниже, и измените ее Blending Mode на Soft Light .Снова выделите закругленный прямоугольник, созданный на предыдущем шаге, и сделайте две копии впереди ( CTRL + C> CTRL + F> CTRL + F ). Выделите верхнюю копию и переместите ее на 1 пиксель вниз, используя стрелку вниз на клавиатуре. Снова выделите обе копии и нажмите кнопку Minus Front на панели Pathfinder . Залейте получившуюся фигуру черным, уменьшите ее непрозрачность до 30% и измените Blending Mode на Soft Light .

Шаг 22

Включите привязку к сетке ( View> Snap to Grid ).Снова выделите все формы, созданные в последних четырех шагах, и Сгруппируйте их ( CTRL + G ). Выберите эту новую группу и перейдите к Object> Transform> Rotate . Введите угол -45 градусов и нажмите кнопку ОК. Выберите эту повернутую группу и поместите ее, как показано на третьем изображении. Сфокусируйтесь на панели Layers ( Window> Layers ), откройте эту новую группу, выберите нижнюю форму и перейдите в Effect> Stylize> Drop Shadow . Введите свойства, показанные на следующем изображении, и нажмите OK.В итоге все должно выглядеть так, как на третьем изображении.

Шаг 23

Убедитесь, что группа кнопок все еще выделена, и перейдите к Object> Transform> Reflect . Установите флажок Вертикальный и нажмите кнопку Копировать . Это создаст горизонтально перевернутую копию группы. Сфокусируйтесь на панели Layers , откройте эту новую группу, выберите нижнюю фигуру и перейдите к панели Appearance . Откройте существующий эффект Drop Shadow и отредактируйте его, как показано на следующем изображении.Выделите всю эту новую группу, перетащите ее влево и разместите, как показано на третьем изображении.

Шаг 24

Используя инструмент Rectangle Tool (M) , создайте форму вашего артборда, залейте ее цветом R = 56 G = 147 B = 160 и отправьте на задний план ( Shift + CTRL + [). Перейдите на панель «Слои» и заблокируйте этот прямоугольник, чтобы случайно не выбрать / переместить его. Выделите все формы, из которых состоит секундомер, и Group их ( CTRL + G ).Выберите эту новую группу и сделайте копию на переднем плане ( CTRL + C> CTRL + F ). Выделите эту копию группы, перейдите в Object> Expand Appearance и Object> Path> Outline Stroke , затем нажмите кнопку Unite на панели Pathfinder . Залейте получившуюся форму цветом R = 125 G = 135 B = 138 . Перейдите на панель Layers , дважды щелкните эту новую форму и назовите ее просто « перекрасить ».

Шаг 25

Выберите фигуру « перекрасить », сделайте копию спереди ( CTRL + C> CTRL + F ) и отправьте ее назад ( Shift + CTRL + [).Сфокусируйтесь на панели Layers , дважды щелкните по этой копии и переименуйте ее в « shadow ». Убедитесь, что ваша фигура « shadow » остается выделенной, и сфокусируйтесь на панели « Appearance ». Добавьте черную обводку 1pt, выровняйте ее по внешней стороне, измените Blending Mode на Soft Light и уменьшите его непрозрачность до 25% . Добавьте вторую обводку для этой формы, сделайте ее шириной 3 пт, установите черный цвет, выровняйте его по внешней стороне, измените Blending Mode на Soft Light и уменьшите его непрозрачность до 15% .Продолжайте фокусироваться на панели Appearance , выберите существующую заливку и добавьте четыре эффекта Drop Shadow , показанные на следующем изображении (начните с левого).

Шаг 26

А теперь вот простая техника наложения, которую вы можете использовать, чтобы легко изменить цвет секундомера. Выберите форму « перекрасить », замените существующий цвет заливки на R = 148 G = 163 B = 187 , уменьшите его непрозрачность с до 40% и (что наиболее важно) измените режим наложения с на Цвет .Вот что вам нужно сделать, если вы не хотите перекрашивать экран секундомера. Используя инструмент Ellipse Tool (L) , создайте круг 120px , залейте его случайным цветом и разместите, как показано на втором изображении. Выделите этот новый круг вместе с формой « перекрасить » и нажмите кнопку минус передний на панели Pathfinder . Перейдите на панель Layers , дважды щелкните получившуюся форму и назовите ее « recolorFrame ».В итоге все должно выглядеть как на четвертом изображении.

Шаг 27

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

И все готово!

Надеюсь, вам понравился этот урок, и вы сможете применить эти методы в своих будущих проектах.

Автор: Андрей Мариус

Андрей Мариус — векторный художник-самоучка, который пытается зарабатывать на жизнь тем, что ему нравится.Большую часть времени он работает в Adobe Illustrator, избегая использования Pen Tool. Вы можете найти большинство его векторных экспериментов на этом маленьком веб-сайте, посвященном Illustrator VforVectors.

Эти значки ссылаются на сайты социальных закладок, где читатели могут делиться и открывать новые веб-страницы.

Небольшие утилиты для вывода секундомера в виде семисегментного дисплея на терминал. Использование: timer.sh | redraw.sh

Небольшие утилиты для вывода секундомера в виде семисегментного дисплея на терминал.Использование: timer.sh | redraw.sh | сегменты.awk · GitHub

Мгновенно делитесь кодом, заметками и фрагментами.

Небольшие утилиты для вывода секундомера в виде семисегментного дисплея на терминал. Использование: timer.sh | redraw.sh | сегменты. awk

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

Рисуем секундомер в Photoshop • Учебники по Adobe Photoshop

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

Окончательное изображение:

Шаг 1

Создайте новый документ. ( Ctrl + N ) с параметрами, которые вы видите на скриншоте. Теперь включите сетку (View — Show — Grid) (View> Show> Grid) и привязку к ней (View — Snap to — Grid) (View> Snap To> Grid) . Необходимо установить сетку каждые 10 пикселей (Редактирование — Настройки — Направляющие — Сетка и фрагменты) ( Правка > Настройки > Направляющие , Сетка Срезы Срезы ).

In point Line every ( Gridline Every) установите 10, а в subdivision установите от 1 до 1. Также установите цвет сетки на # a7a7a7. После того, как все параметры установлены, нажмите ОК.

Шаг 2

Включите линейки ( Ctrl + R ) и вытащите из них две направляющие.

Шаг 3

Для цвета переднего плана установите # a1d8ff и выберите инструмент Ellipse (Ellipse Too l ). Нарисуйте круг 240 пикселей и поместите его в центр документа. Дублируйте эту векторную фигуру. ( Ctrl + J ) . Уменьшите параметр Fill ( Fill) этого слоя в палитре Layers до 0% и добавьте к нему стиль Stroke ( Stroke ):

Step 4

Выберите верхний синий круг, который вы создали на предыдущем шаге. Выберите инструмент Ellipse (Эллипс) , нажмите кнопку Subtraction (Вычитание) на панели свойств вверху экрана и нарисуйте круг 200 пикселей, как показано на первом изображении.
Перейдите на палитру слоев и измените синий цвет формы на # d7d7d7, затем примените несколько стилей слоя:

Шаг 5

Выберите форму, которую вы редактировали на предыдущем шаге, и продублируйте ее. ( Ctrl + J ). Щелкните правой кнопкой мыши дублированный слой и выберите Очистить стили слоя (Clear Layer Style) . Уменьшите параметр Fill до 0% и добавьте стиль слоя Stamping ( Bevel Emboss ).

Шаг 6

Для дальнейших шагов вам нужно добавить сетку через каждые 5 пикселей. (Редактирование — Настройки — Направляющие — Сетка и фрагменты) ( Редактировать > Настройки > Направляющие , Сетка Срезы ). В открывшемся окне установите каждое поле на 5 пикселей.

Инструмент Эллипс (Ellipse Tool) нарисуйте круг 200 пикселей и расположите его, как показано на первом изображении.

Не меняя инструмента, с активным слоем с только что нарисованным кругом нажмите кнопку Subtraction (Вычитание) На панели свойств нарисуйте круг 190 пикселей, как показано на втором изображении.

Шаг 7

Сосредоточьтесь на слое векторной формы, который мы создали на предыдущем шаге. Сначала измените его цвет с синего на # c8c8c8 и добавьте стиль слоя Inner shadow ( Inner Shadow ).

Шаг 8

Выберите инструмент Эллипс (Ellipse Tool) , нарисуйте круг 190 пикселей и расположите его, как показано на первом изображении.Добавьте несколько стилей слоя к этой форме:

Шаг 9

Выберите инструмент Эллипс (Ellipse Tool) , нарисуйте круг 180 пикселей и расположите его, как показано на первом изображении. Уменьшите параметр Fill ( Fill) этого слоя до 0% и добавьте к нему стиль Stroke ( Stroke ).

Шаг 10

Теперь вам нужно установить сетку через каждый 1 пиксель. (Редактирование — Настройки — Направляющие — Сетка и фрагменты) ( Редактировать > Настройки > Направляющие , Сетка Срезы ) .В открывшемся окне установите каждое поле на 1 пиксель.

Для цвета переднего плана установите значение # 141414, нарисуйте две векторные фигуры размером 10 пикселей и расположите их, как показано на первом изображении.

Скопируйте этот прямоугольник. ( Ctrl + J ) , сдвиньте его вниз и расположите, как показано на втором изображении. Выделите оба слоя прямоугольниками (удерживая клавишу Shift, щелкайте по этим слоям по очереди). Теперь преобразуйте эти слои в смарт-объект (щелкните правой кнопкой мыши слой в палитре «Слои» и выберите «Преобразовать в смарт-объект»).

Шаг 11

Дублируйте смарт-объект, созданный на предыдущем шаге. ( Ctrl + J ) и поверните его на 90 градуса (Edit — Transform — Rotate 90 °) (Edit> Transform> Rotate 90 ° CW). В палитре «Слои» выберите оба смарт-объекта и преобразуйте их в один смарт-объект (щелкните правой кнопкой мыши слой в палитре «Слои» и выберите «Преобразовать в смарт-объект»).

Шаг 12

Скопируйте смарт-объект, созданный на предыдущем шаге. ( Ctrl + J ) и поверните дубликат (Edit — Transform — Rotate) (Edit> Transform> Rotate). На панели свойств введите значение 30 — повернуть на столько градусов и нажмите Введите .

Дублируйте слой с повернутым смарт-объектом. ( Ctrl + J ) и этот дублированный поворот на 60 градусов (Edit — Transform — Rotate) (Edit> Transform> Rotate).

Шаг 13

Установите цвет переднего плана как # 54a5e8 и нарисуйте две векторные фигуры 5px. Расположите эти формы, как показано на первом изображении. Дублируйте слои с этими прямоугольниками. ( Ctrl + J ) , сдвиньте их вниз и расположите, как показано на втором изображении.
В палитре «Слои» выберите оба слоя с прямоугольниками и преобразуйте их в смарт-объект (щелкните правой кнопкой мыши слой в палитре «Слои» и выберите «Преобразовать в смарт-объект»).

Шаг 14

Поверните смарт-объект, созданный на предыдущем шаге, на 6 градусов и нажмите Enter (Правка — Трансформировать — Повернуть) (Правка> Трансформировать> Повернуть).

Скопируйте этот смарт-объект. ( Ctrl + J ) и поверните дубликат на 12 градусов (Edit — Transform — Rotate) (Edit> Transform> Rotate).

Скопируйте этот смарт-объект. ( Ctrl + J ) и поверните дубликат на 18 градусов (Edit — Transform — Rotate) (Edit> Transform> Rotate).

Скопируйте этот новый смарт-объект. ( Ctrl + J ) и поверните его на 24 градуса (Edit — Transform — Rotate) (Edit> Transform> Rotate).

Шаг 15

Выберите четыре синих смарт-объекта, созданных на предыдущем шаге, преобразуйте их в один смарт-объект) (щелкните слой в палитре слоев правой кнопкой мыши и выберите «Преобразовать в смарт-объект») и продублируем получившийся смарт-объект ( Ctrl + J ). Поверните дубликат на -30 градуса (Edit — Transform — Rotate) (Edit> Transform> Rotate).

В палитре «Слои» выберите оба синих смарт-объекта, преобразуйте их в один смарт-объект, а затем создайте две копии ( Ctrl + J ).
Поверните первый дубликат на 60 градусов (Правка — Трансформировать — Повернуть) (Правка> Трансформировать> Повернуть).

Поверните второй дубликат на -60 градусов (Edit — Transform — Rotate) (Edit> Transform> Rotate).
Выделите все синие смарт-объекты и преобразуйте их в один смарт-объект. Добавьте стиль к полученному смарт-объекту. Наложение цвета ( Цвет Наложение ).

Шаг 16

Установите цвет переднего плана на # 141414 и инструмент Текст (инструмент Текст) напишите числа, как показано на первом изображении. Для создания текста я использовал шрифт Calibri, Bold, размер 15pt.

Выделите все слои с текстом, преобразуйте их в смарт-объект и добавьте стиль к получившемуся слою. Тень ( Падение Тень ).

Шаг 17

Выберите красный цвет переднего плана и инструментом Прямоугольник (Rectangle Tool) нарисуйте 4 векторные фигуры размером 97 пикселей. Расположите эти формы, как показано на первом изображении, выберите инструмент Arrow ( Direct Selection Tool) и сфокусируйтесь на нижней части одного из красных прямоугольников.

Выберите левую точку привязки и переместите ее на 1 пиксель вправо, затем выберите правую точку привязки и переместите ее на 1 пиксель влево.

Шаг 18

Выберите векторную фигуру, созданную на предыдущем шаге, и нажмите Ctrl + T . Сфокусируйте центральную точку на красной фигуре. Удерживая клавишу Shift , перетащите ее, как показано на первом изображении. В финале поверните красную фигуру, как показано на втором изображении:

Шаг 19

Сфокусируйтесь на векторной форме, отредактированной на предыдущем шаге. Для начала замените красный цвет на # 141414 и добавьте стиль слоя Inner shadow ( Inner Shadow ).

Шаг 20

Для набора цветов переднего плана # 141414 выберите инструмент Ellipse (Эллипс) и нарисуйте круг 14px. Добавьте стиль слоя к этой фигуре. Внутренняя тень ( Внутренняя Тень ).

Шаг 21

Для цвета переднего плана выберите цвет # d5cdc3 и инструментом Ellipse (Ellipse Tool) нарисуйте круг 4px. Расположите форму, как показано на скриншоте. Добавьте стили слоя к этому слою:

Шаг 22

Выберите три векторные фигуры, которые вы создали на последних пяти шагах, и продублируйте их. ( Ctrl + J ). Выделите эти копии и преобразуйте их в смарт-объект. Уменьшите параметр Fill ( Fill) до 0% и добавьте стиль Shadow (Drop Shadow).

Шаг 23

Выделите смарт-объект, созданный на предыдущем шаге, и продублируйте его. ( Ctrl + J ). Для дублирования добавьте стиль слоя Тень (Drop Shadow).

Шаг 24

Выберите инструмент Эллипс (Ellipse Tool) , нарисуйте круг 55 пикселей и расположите его, как показано на первом изображении. Уменьшите параметр Заливка слоя только что нарисованной формой до 0% и добавьте стиль слоя Обводка ( Обводка ).

Шаг 25

Сфокусируйтесь на круге, который вы создали на предыдущем шаге, выберите цвет # 141414 для цвета переднего плана и нарисуйте две векторные фигуры 4 пикселя.Выделите оба этих прямоугольника и преобразуйте их в смарт-объект.

Шаг 26

Скопируйте смарт-объект, созданный на предыдущем шаге. ( Ctrl + J ) и поверните дубликат на 60 градусов (Edit — Transform — Rotate) (Edit> Transform> Rotate). Снова продублируйте смарт-объект ( Ctrl + J ) и поверните полученный слой на -60 градусов (Edit — Transform — Rotate) (Edit> Transform> Rotate).

Инструмент Текст (Инструмент Текст) напишите числа (я использовал шрифт Calibri, Bold, размер 8pt).

Шаг 27

Для цвета переднего плана выберите красный и нажмите Rectangle (Инструмент «Прямоугольник»). нарисуйте четыре векторные фигуры 43px. Поместите фигуры, как показано на первом изображении, выберите инструмент Arrow ( Direct Selection Tool) и сфокусируйтесь на верхней части этого красного поля.

Выберите левую опорную точку и переместите ее на 2 пикселя вправо, затем выберите инструмент Удалить опорную точку (Инструмент «Удалить опорную точку») и удалите верхнюю правую опорную точку.Форма будет похожа на второе изображение. Затем поверните его, как показано на третьем изображении.

Шаг 28

Сделайте активным слой с формой, которую вы создали на предыдущем шаге, и измените его красный цвет на # 141414. Добавьте стиль к этой форме. Внутренняя тень ( Внутренняя Тень ).

Шаг 29

Установите цвет переднего плана # 141414 и инструментом Эллипс (Ellipse Tool) нарисуйте фигуру 10 пикселей.Добавьте стиль этой форме. Внутренняя тень ( Внутренняя Тень ).

Step 30

Для цвета переднего плана установите # f0eae3 с помощью инструмента Ellipse (Ellipse Tool) нарисуйте круг 2px и добавьте к нему стили слоя:

Step 31

Выделите три вектора фигуры, которые вы создали на последних четырех шагах, и продублируйте их. ( Ctrl + J ). Преобразуйте копии в смарт-объект, уменьшите параметр Заливка этого смарт-объекта до 0% и добавьте к нему стиль слоя Тень (Drop Shadow).

Шаг 32

Скопируйте смарт-объект, созданный на предыдущем шаге. ( Ctrl + J ). Для дублирования добавьте стиль слоя Тень (Drop Shadow):

Шаг 33

Дублируйте векторную фигуру, созданную на восьмом шаге, удалите из нее стили слоя и перетащите ее в верх палитры слоев. . (Shift + Ctrll +]). Установите для параметра Заливка значение 0% и добавьте стили слоя:

Шаг 34

Дублируйте векторную форму, отредактированную на предыдущем шаге. ( Ctrl + J ), удалите из дублированных стилей слоя, уменьшите параметр Fill до 0% и добавьте стиль слоя Stroke ( Stroke ).

Шаг 35

Выберите инструмент Прямоугольник со скругленными углами (Инструмент Прямоугольник со скругленными углами) с радиусом 3 пикселя, нарисуйте векторную фигуру 24×30 пикселей и расположите их, как показано на первом изображении.Примените команду к нарисованной фигуре. Деформация (Edit — Transform — Warp) (Edit> Transform> Warp). Из выпадающего меню выберите тип деформации Arc (Дуга), в поле Bend (Изгиб) установите 25 и нажмите Enter.

В раскрывающемся меню команды «Деформация» выберите тип «Дуга вниз» («Верхняя дуга»), установите значение -10 в поле «Изгиб» и нажмите «Ввод».

Шаг 36

Примените несколько стилей слоя к векторной фигуре, созданной на предыдущем шаге.Когда вы дойдете до слоя стиля Gradient Overlay (Наложение градиента) , сохраните использованный градиент, нажав кнопку New (Новый).

Шаг 37

Сфокусируйтесь на верхней части векторной фигуры, которую вы редактировали на предыдущем шаге. Теперь выберите инструмент Rounded Rectangle (Прямоугольник со скругленными углами) с радиусом 3px и нарисуйте векторную фигуру размером 30x20px.
Примените команду к этой фигуре. Warp (Edit — Transform — Warp) (Edit> Transform> Warp) : из раскрывающегося списка выберите тип Arc Down (Arc Lower), в поле Bend установите 20 и нажмите Enter.

Step 38

Примените несколько стилей слоя к этой фигуре. Когда вы доберетесь до стиля Gradient Overlay (Наложение градиента) , используйте градиент, который вы сохранили на шаге 36.

Step 39

Tool Ellipse (Инструмент Ellipse) нарисуйте фигуру 30x6px и добавьте к ней стили слоя. . При добавлении стиля Gradient Overlay (Наложение градиента) также используйте градиент, сохраненный на шаге 36.

Step 40

Выберите для переднего плана цвет # d7d7d7 и инструментом Ellipse (Ellipse Tool) нарисуйте круг 80px.Расположите фигуру, как показано на первом изображении. Не меняя инструмент, на активном слое с только что нарисованной фигурой нажмите кнопку «Вычесть» на панели свойств и нарисуйте круг размером 68 пикселей, как показано на втором изображении.

Шаг 41

Сосредоточьтесь на нижней части фигуры, которую вы создали на предыдущем шаге. Выберите инструмент Rectangle (Прямоугольник) с параметром вычитания и нарисуйте векторную фигуру 22x10px. С активным слоем с только что нарисованной фигурой выберите инструмент Ellipse (Эллипс) , нажмите кнопку «Добавить» на панели свойств и добавьте два круга по 6 пикселей, как показано на втором изображении.

Шаг 42

Добавьте стили слоя к фигуре, нарисованной на предыдущем шаге:

Шаг 43

Сфокусируйтесь на нижней части векторной фигуры, отредактированной на предыдущем шаге. Установите черный цвет переднего плана и инструментом Ellipse (Эллипс) нарисуйте два круга размером 6 пикселей. Расположите фигуры, как показано на первом изображении.

К левому и правому кружкам добавьте стиль слоя. Тень (Drop Shadow). Теперь выберите оба слоя с кругами и переместите их под векторную фигуру, которая была отредактирована на предыдущем шаге.

Шаг 44

Инструмент Прямоугольник со скругленными углами (Инструмент Прямоугольник со скругленными углами) с радиусом 3px, нарисуйте векторную фигуру 16x18px. Примените команду к этой фигуре. Деформация (Edit — Transform — Warp) (Edit> Transform> Warp).

Выберите Arc Down (Нижняя дуга) и в поле Bend (Изгиб) установите значение 30. Нажмите Enter, чтобы применить изменения.
Повторно примените команду Деформация (Edit — Transform — Warp) (Edit> Transform> Warp) , но на этот раз выберите Arc Up (Arc Upper).В параметре Bend установите значение -10 и нажмите Ente, чтобы применить изменения.
Примените стили слоя. Стиль слоя Наложение градиента ( Наложение градиента) используйте ранее сохраненный градиент:

Шаг 45

Инструмент Прямоугольник со скругленными углами (Инструмент Прямоугольник со скругленными углами) с радиусом 3 пикселя, нарисуйте форму размером 20×20 пикселей и примените команда к нему Деформация (Edit — Transform — Warp) (Edit> Transform> Warp). В раскрывающемся списке выберите Выпуклость. В поле Bend установите значение 15 и нажмите Enter.

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

Шаг 46

Теперь вам нужно создать текстуру. Сначала создайте новый документ. ( Ctrl + N ) , в полях Ширина и Высота установите значение 2 и нажмите ОК.Из палитры слоев удалите слой «Фон», установите черный цвет переднего плана и выберите инструмент Rectangle (Прямоугольник).

Нарисуйте фигуру 1x2px и преобразуйте ее в узор. (Редактирование — Определение шаблона) ( Edit> Define Pattern) . Назовите текстуру и нажмите ОК. Закройте этот документ (сохранять его не нужно) и вернитесь к основному документу.

Шаг 47

Добавьте стили слоя к смарт-объекту, созданному на шаге 45:

Шаг 48

Выберите векторную форму и смарт-объект, которые вы создали на последних четырех шагах, и преобразуйте их в смарт-объект .Поверните слой на 30 градусов (Edit — Transform — Rotate) ( Edit> Transform> Rotate).

Шаг 49

Выберите инструмент Polygonal Lasso (Инструмент «Многоугольник») и на панели Properties в окне Sides установите значение 4. Там же выберите тип Star с радиусом 10 пикселей. и введите значение 85%.

В качестве цвета переднего плана установите белый цвет и нарисуйте звезду.

Шаг 50

Дублируйте форму звезды ( Ctrl + J ) и преобразуйте дубликат в смарт-объект.Примените к нему фильтр. Размытие по Гауссу (Фильтр — Размытие — Размытие по Гауссу) (Фильтр> Размытие> Размытие по Гауссу) с радиусом 1,5 пикселя.

Шаг 51

Дублируйте все доступные слои и преобразуйте дубликаты в смарт-объект. Переместите смарт-объект под все слои (Ctrl + Shift + [) , уменьшите параметр Fill до 0% и добавьте стиль слоя Shadow ( Drop Shadow).

Шаг 52

Скопируйте смарт-объект, созданный на предыдущем шаге. ( Ctrl + J ) и добавьте к дублированному стилю Shadow (Drop Shadow).

Шаг 53

Скопируйте смарт-объект, созданный на предыдущем шаге. ( Ctrl + J ) и добавьте к дублированному стилю Shadow (Drop Shadow).

Шаг 54

Скопируйте смарт-объект, созданный на предыдущем шаге. ( Ctrl + J ), и добавьте стили слоя для дублирования:

Шаг 55

Выделите все слои с металлическим телом и продублируйте их. ( Ctrl + J ) . Преобразуйте все полученные копии в смарт-объект. Загрузите выделение смарт-объекта (удерживая клавишу Ctrl, щелкните миниатюру смарт-объекта в палитре слоев). Создайте новый слой. ( Shift + Ctrl + N ) и инструмент Fill (Paint Bucket Tool) Щелкните внутри выделения, чтобы заполнить его черным.

Снимите выделение ( Ctrl + D ) и удалите смарт-объект, созданный в начале этого шага.

Шаг 56

Активируйте слой, созданный на предыдущем шаге, и уменьшите параметр Fill до 0%.Добавьте стили слоя. Стиль наложения цвета (наложение цвета) уменьшите непрозрачность до 50% и выберите желтый (# ffd76b).

Step 57

В финале добавьте простой фон. Создайте новый слой. ( Shift + Ctrl + N ) под всеми существующими слоями и залейте его цветом # 505050. Добавьте стиль слоя Inner shadow (Inner Glow).

Шаг 58

Преобразуйте слой, созданный на предыдущем шаге, в смарт-объект и добавьте к нему Фильтр шума (Фильтр — Шум — Добавить шум) (Фильтр> Шум> Добавить шум).

Окончательное изображение:

Автор : Андрей Мариус

Transfer : Слуцкая Светлана

arcgis desktop — Измерение времени рисования слоя в ArcMap?

К сожалению, похоже, что события ILayerExtensionDraw.BeforeLayerDraw и AfterLayerDraw запускаются только функциональными и сетевыми слоями (см. Сообщение wguidry здесь), и мне нужно поддерживать растровые слои, сервисы карт / изображений, наборы данных мозаики и т.

Итак, вкратце, что я в итоге сделал. Еще раз спасибо @Kirk за идеи!

Созданы следующие классы:

• Время : сохраняет имя слоя, фазу рисования и прошедшее время для события рисования
• TimingSequence : Сохраняет все значения времени в последовательности рисования
• TimingSession : хранит все временные последовательности в сеансе синхронизации и управляет секундомером .

Сеанс синхронизации запускается и останавливается переключателем.Когда начинается сеанс синхронизации, я включаю IViewManager.VerboseEvents и отключаю его по окончании сеанса синхронизации.

Я сбрасываю и запускаю секундомер в начале последовательности рисования, как указано в IActiveViewEvents.ViewRefreshed , и создаю новый объект TimingSequence .

Затем, когда каждый слой отрисовывает определенную фазу, я прослушиваю IActiveViewEvents.AfterItemDraw , останавливаю секундомер, проверяю, что ITrackCancel.Continue () возвращает true (false указывает, что рисование было отменено) и записывает имя слоя, фазу и прошедшее время в новый объект Timing и добавляет его в текущую TimingSequence , а также перезапускает / перезапускает секундомер.

Я добавляю временную последовательность к сеансу синхронизации только тогда, когда IActiveViewEvents.AfterDraw срабатывает в фазе esriViewForeground (последняя фаза отрисовки).

Когда пользователь завершает сеанс синхронизации, снова нажимая кнопку, я сообщаю о результатах (в идеале это было бы что-то более приятное, чем уродливый MessageBox, как сейчас).Хотя вроде работает плавно.

Проблема: Событие AfterItemDraw , похоже, срабатывает только для слоев в корне таблицы содержания, а не для вложенных подслоев, поэтому, если вам нужны отдельные измерения для слоя, его необходимо переместить в корень оглавления, а не внутри группового слоя. См. Связанный вопрос: ArcObjects: AfterItemDraw срабатывает только для слоев в корне TOC

ios — Как исправить таймер для отрисовки запущенного секундомера?

Здравствуйте! Я завершаю исследование Alzheimers — я хочу иметь возможность записывать время, необходимое для завершения рисунка.И время, проведенное с яблочным карандашом на планшете, и время, затрачиваемое в целом на завершение рисунка (время на планшете плюс время между штрихами).

Я создал это приложение, но не могу заставить работать таймер.

У меня есть доска для рисования / каракулей.

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

  импортный УИКит

class ViewController: UIViewController {


@IBOutlet слабый var canvasView: CanvasView!
переопределить функцию viewDidLoad () {
    super.viewDidLoad ()
    // Выполните какие-либо дополнительные настройки после загрузки представления, обычно из пера.
}

@IBAction func clearCanvas (_ sender: Any) {// эта кнопка очищает холст и таймеры!
    canvasView.clearCanvas ()
    timer.invalidate ()

    seconds = 0 // Здесь мы вручную вводим точку перезапуска для секунд, но было бы разумнее сделать ее переменной или константой.timeDrawing.text = "\ (секунды)"
}
@IBOutlet weak var timeDrawing: UILabel! // Это одна из меток, используемых для отображения времени (я еще не добавил метку для отображения времени между штрихами)

var секунды = 0
var timer = Таймер ()
var isTimerRunning = false // Это будет использоваться, чтобы убедиться, что одновременно создается только один таймер.
var resumeTapped = false
var touchPoint: CGPoint!
var touch: UITouch!

func runTimer () {
    timer = Timer.scheduledTimer (timeInterval: 1, target: self, селектор: (#selector (ViewController.updateTimer)), userInfo: nil, Repeats: true)
}

@objc func updateTimer () {
        секунд + = 1
    timeDrawing.text = "\ (секунды)" // Это обновит метку.
}

переопределить func touchesBegan (_ touches: Set , с событием: UIEvent?) {
    охранник let touch = touches.first else {return}
    let touches = touch.location (in: canvasView) // или может быть ... (in: self)

    if touch.type == .pencil {
       if! isTimerRunning {
            runTimer ()
        } еще {
            timer.invalidate ()
        }
}
}
}
  

Я надеялся, что когда яблочный карандаш коснется планшета, таймер запустится.А затем, когда карандаш покидал планшет, он останавливал один из таймеров. (Мне еще предстоит добавить еще один таймер для времени между ударами, любая помощь с этим также будет оценена.)

.