Как сделать эффект мышки
Добавил пользователь Алексей Ф. Обновлено: 04.10.2024
Делать курсор или иконку не сложно. Я делал свои первые курсоры, ещё когда учился в школе. На компьютере стоял Windows 98, небо было голубее, а трава зеленее. Я научу вас создавать курсор в программе Photoshop, впрочем, вы можете делать его где угодно, хоть в MS Paint-e, главное, чтобы ваш графический редактор сохранял полупрозрачные PNG, однако все по порядку. Как обычно любой из вас сможет скачать PSD фаилы со слоями, а так же все то, что мы сделаем в этой статье.
Немного о курсоре
Для начала, вам нужно понять, что курсор, это не более чем прямоугольный кусок графики. Конечно, видим то мы только сам курсор, и это потому что остальная часть графики прозрачная, а значение Альфа канала сведено к нулю. Значит, прежде всего, нам нужен такой графический редактор, в котором можно работать с полупрозрачными областями и который может их сохранять, например в GIF или в полупрозрачный PNG 24. И это конечно Фотошоп, хотя изображение курсора можно сделать даже в Иллюстраторе, так как он тоже сохраняет в веб форматы. Замечу, что время GIF-а безвозвратно уходит. В отличие от PNG он имеет всего 256 цветов и не поддерживает полупрозрачность.
Рисуем курсор в Фотошопе вектором
По большей части нам не обязательно рисовать курсор ни в Фотошопе, ни в каком-либо другом графическом редакторе, так как практически ни один из них не умеет сохранять фаилы в курсорных форматах cur или ani. А сохранять в эти форматы умеют только спец программы предназначенные для рисования курсоров, однако, большая часть этих программ либо безнадежно устарела и не обновляется со времен Windows 98, либо предоставляет убожеские возможности управления графикой. Поэтому я и предлагаю сделать графику в старом добром Фотошопе, вместо того, чтобы разбираться с этими аля CursorEditor PRO, которые от Пэйнта отличаются разве что присутствием Альфа канала.
Начните с создания рабочей поверхности File > New и для наших целей нам подойдет размер 120 на 120 px с разрешением 72 dpi, цветовой режим RGB.
Создаем форму курсора
Прежде всего создадим форму курсора. И в этом нам поможет инструмент, в кармане которого уже запасено все что нужно — Сustom Shape Tool. И этот инструмент является разновидностью векторного инструмента в Фотошопе. Подробности его работы можно посмотреть в моем старом Видео уроке о работе Сustom Shape Tool. Выберите этот инструмент, а на панели настроек выберите изображение курсора. И я хотел бы использовать именно эту форму, так как она отлично подходит для урока. Если у вас такой формы нет, скорее всего вы просто не открыли все шаблонные изображения Сustom Shape Tool. В том же окошке кликните по круглой иконке стрелочки и в меню выберите All. Это загрузит практически все шаблоны инструмента Сustom Shape Tool
Выбираем нужную стрелочку, нажимаем SHIFT и проводим курсором по рабочей поверхности. В настройках инструмента обязательна опция Shape Layers, подробнее о которых можно прочитать в моей статье Shape Layer, Path и Fill Pixels. Если кратко, то Shape Layers создает слой заливки, к которому сразу прикрепляет векторную маску. Вектор в Фотошопе работает именно так.
Трансформируем курсор в Фотошопе
Теперь нам нужно трансформировать объект. Для этого выбираем Edit > Free transform, подробнее о котором можно прочитать в моей статье Трансформирование в Фотошопе, а посмотреть практическое применение в уроке об использовании Free Transform. Выберите Edit > Free transform, появится рамка трансформирования. Расположите курсор так, чтобы его кончик был в верхнем левом углу.
Теперь немного деформируем курсор и вот почему. Вы наверняка замечали, что стандартный курсор направлен не справа налево, а снизу наверх. Это не просто так. Возможно дедушка Фреид бы объяснил лучше, но психологически значительно проще воспринимать указатель, указывающий именно с низу вверх. Все равно, что начать есть левой рукой. Можно наловчиться, но не проще ли сделать так как надо сразу?
Опять выберите Edit > Free transform, для начала разверните курсор, затем уменьшите а после нажмите CTRL. Не отпуская его потяните за уголки рамки трансформирования. Переместите угол наклона ближе к левому краю так как у меня на картинке.
Применяем стиль для курсора
До сих пор я не написал ни одной статьи конкретно об использовании стилей, поэтому придется разложить все по полочкам. Стиль в Фотошопе — это графическая кожа, которая натягивается поверх слоя. Стиль состоит из ряда эффектов, которые не меняются с давних пор. Но есть хорошая новость: их вполне хватает чтобы создать практически любую графику для кнопок, шапок и баннеров. И, важное примечание. Изначально стили и создавались в противовес стилям в конкурирующей программе Fireworks от не существующей ныне Macromedia, для работы с веб объектами. Первоначальное применение стилей — создание кнопок, баннеров, шапок и чего угодно для веб сайтов.
Выбираем Layer > Layer Style > Blending Options или альтернативное открытие — двойной клик по слою с курсором на панели слоев Layers. Появится диалоговое окно. В окне две области, меню с левой стороны и настройки с правой. Выберите с левой стороны Style и вы попадете в сохраненные стили, которые уже записаны в Фотошопе. И если у вас там ничего нет, значит вы не загрузили шаблоны. Кликните по круглой кнопочке с правой стороны и выберите из меню Web. Это загрузит все стили из раздела для веб. И собственно на этом можно уже и остановиться, так как вы легко можете выбрать любой стили, применить его и вуаля, красивый курсор готов.
Но я бы хотел создать наш собственный стиль. Вот что у меня на уме. Курсор в стиле металлик, этакий металлический курсор с кучей бликов. Поэтому если вы применили стиль, выберите белый квадратик с красной полоской — это отключит все, переключимся на первый эффект Gradient Overlay в этом же окне и приступим к настройкам.
Кликните по полоске градиента и настройте цвета от белого, к сине серому — 535b5e. В стилях градиента выберите Radial, то есть шарообразный градиент. И вы в любой момент можете позиционировать местонахождение градиента на курсоре, для этого просто кликните по рабочей области, там где нарисован курсор, при открытых настройках стиля Gradient Overlay и перемещайте градиент мышкой на лету. И на моем скрине в панели слоев вы увидите остальные невидимые пока эффекты Стилей. Ничего, их мы тоже последовательно подключим.
Теперь настроим эффект Satin. Что это? Это материал похожий на шелк. И основная задача эффекта Satin создавать переливающиеся блики, примерно такие же как на оригинальном материале. В эффекте Satin выберите режим наложения Blend Mode — Vivid Light и белый цвет. Это создаст жесткий контрастный оттенок при наложении сатина на градиент. Остальные настройки по вкусу, или воспользуйтесь моими.
Теперь включите Bevel and Emboss, он создает псевдо 3D эффекты, подсвечивая слой с одной стороны темным цветом с другой светлым. За счет этого получается визуальная трехмерность.
На всякий случай, вот эффекты, которых мы добились, если все настройки правильные. И если у вас отмечена галочка Preview, то вы видите превьюшку эффекта прямо под кнопкой New Style с правой стороны окна.
И Inner Shadow чтобы создать внутреннюю тень, подчеркнув края курсора. Воспользуйтесь своими настройками, или перепишите мои, это не так важно. И когда ваш стиль готов, вы всегда можете кликнуть по кнопке New Style и записать его в архив стилей.
Последний стиль — Inner Glow, который создает внутреннюю подсветку. В режиме наложения конечно Vivid Light, в настройке Choke 20 размер Size 8. И теперь, мои друзья, мы закончили с созданием стиля для нашего курсора. Нажмите на кнопку New Style и сохраните стиль в память Фотошопе.
Сливаем слои и уменьшаем курсор
Мы практически закончили рисовать курсор, и как видите, в отличии от всех курсоро-подобных программ мы не мазали кистью, не возили мышкой по рабочей области, создавая какую то мазню. Все что мы сделали, нарисовали вектором форму и пощелкали по настройкам, чтобы создать оригинальный вид курсора. Более того, мы записали отличный Металлик стиль с бликами. А теперь, переходим к финальной стадии работы над курсором. Но до этого, отключите на панели слоев задний белый фон. Он нам больше не нужен, и мы не хотим чтобы он сохранился вместе с фаилом. Нам нужен только курсор и прозрачный фон.
Теперь выделите все слои, используйте SHIFT. Затем зайдите в Layers > Merge Layers Я не боюсь сливать изображение и терять мой векторный контур прежде всего, потому что он не представляет особой ценности, так как мы сделали его за 3 минуты. К тому же я сохранил созданный стиль, и могу применить его к чему угодно одним кликом. Однако если вам кажется что этот слой вам еще понадобится, сохраните его в PSD. Вот, зачем я сливаю слои. Сейчас мы будем уменьшать курсор, так как чаще всего курсоры достаточно маленькие, они не занимают ни пол экрана ни даже 200 px. В этом их курсорный смысл.
Конечно, я всегда могу воспользоваться галочкой Scale Styles в окне Image Size и Фотошоп постарается маштабировать стиль, однако он не сможет сделать это достаточно достоверно и стиль все равно поедет. Я хочу слить слои, чтобы перевести прикрепленный стиль в пиксели, так как для нас очень важно, чтобы маленький курсор выглядел так же как большой. Теперь слои слиты, у нас всего один слой с курсором в растре. Зайдиите в Image > Image Size и измените размер с 120 на 120 px на 32 на 32 px. И мы практически сделали наш курсор.
Сохранение курсора в PNG
Откройте File > Safe for Web and Devices и это окно специально создано для сохранения и оптимизации графики для веб, телефонов и планшетов. В появившемся окне вы увидите три области. Средняя область с изображением. Левая область с инструментами. И правая область с настройками. В правой области выберите PNG 24 из выпадающего меню и не забудьте галочку Transparancy, которая и добавляет в фаил альфа канал, скрывающий часть изображения. И это все настройки для нашего курсора. Нажимайте ОК.
Как сделать курсор в формате CUR
Мы практически сделали курсор, однако это по прежнему картинка в формате PNG с изображением курсора, а не сам курсор. В операционной системе его не использовать, для сайта в код не повесить. Настоящий курсор — это прежде всего разновидность системного фаила, к которому прикреплена картинка курсора. Формат такого файла зависит от операционной системы. Для Windows они одни, для Mac OS другие. Мы поговорим о формате CUR. Это статичный формат для курсора, который работает с Windows.
В начале этой статьи я упоминал, что в подобные форматы сохраняют программы типа КурсорРедактор. К сожалению большая часть из них либо платная, либо с испытательным сроком на 30 дней, а графические возможности всех этих программ оставляют желать лучшего. Я перепробовал десяток подобных программ и по моему мнению лучшая из них — IcoFX. Здесь можно найти официальный сайт. Здесь можно скачать IcoFX. Здесь можно посмотреть некоторые уроки о работе с этой программой. И главное преимущество IcoFX — её можно скачать бесплатно и без испытательного срока, по крайней мере пока что. Она работает с большей часть форматов для иконок и курсоров для основных операционных систем. И её способность создавать графический дизайн значительно выше остальных олдскульных программ. Здесь и полупрозрачность, и масса кистей и градиенты и основные инструменты, однако все это ничто против способностей Фотошопа, поэтому я не буду останавливаться на программе IcoFX. Просто скачайте её и давайте уже сделаем этот курсор!
Открываем и сохраняем PNG в CUR
Открываем в программе IcoFX наш PNG. File > Open. В диалоговом окне выбираем Portable Network Graphic (*.jpg), чтобы видеть фаилы в формате PNG. Нашли, нажимаем OPEN.
Это пожалуй все что нужно сделать. Теперь сохраним эту картинку в формате CUR. Откройте File > Save As и в появившемся окне выберите формат Windows Cursor (*.cur). И это все. Мы только что создали работающий курсор в нужном формате.
Загружаем курсор в Windows
Я работаю с Windows Vista, однако на других Windows настройки такие же. В нижнем левом углу экрана нажмите кнопку START. В выпадающем меню выберите Сontrol Panel. В появившемся окне выберите Мышку — Mouse.
В появившемся диалоговом окне выберите вкладку Pointers и нажмите кнопку Browse. В новом диалоговом окне найдите свой курсор в формате CUR и загрузите его. И помните, что это лишь первый курсор в данной коллекции. Чтобы создать целую серию курсоров нужно отрисовать курсоры ко всем состояниям операционной системы, курсор ожидания, курсор при наведении на ссылку, курсор при наведении на форму с текстом и так далее. Либо заменить каждый на единственный, если вам не нужны ситуативные курсоры.
Курсор для сайта
Если вы хотите использовать курсор для сайта, то вам прежде всего необходим фаил курсора в формате CUR, который нужно загрузить на хостинг сайта и прописать его нахождение в CSS сайта. О том как это сделать подробно написано на сайте HTMLBook, который специализируется на HTML и CSS. И помните, что формат CUR сработает для сайта только у тех пользователей, которые пользуются Windows.
Набор эффектов для клика мыши и сенсорных взаимодействий, вдохновленные визуализациями при кликах мышкой и нажатиями на экране в мобильных приложениях. Эффекты сделаны при помощи CSS-анимации, в основном на псевдо-элементах.
В последнее время были созданы многие интересные эффекты взаимодействия, что следует принципам Google Material Design. Эти эффекты основаны на месте щелчка или прикосновения. Как правило, тонкие индикаторы, используемые в приложениях демонстрируют визуализацию на экране мобильного телефона. Такого рода эффекты могут быть фактически весьма полезными как для кликов мыши, так и для сенсорного взаимодействия.
Сегодня мы хотели бы изучить некоторые из этих эффектов, используя различные анимации. В настоящее время есть много видов анимации.
Обратите внимание на то, что некоторые из эффектов являются экспериментальными и следовательно работать будут только в современных браузерах.
Что касается IE10, то похоже он не поддерживает animationend на псевдо-элементах, так что вы не увидите как работает там эффект.
Для демонстрации мы будем использовать значки шрифта Font Awesome и вызывание эффекта на кнопке:
.cbutton__icon <
display: block;
>
.cbutton__text <
position: absolute;
opacity: 0;
pointer-events: none;
>
.cbutton::after <
content: '';
position: absolute;
top: 50%;
left: 50%;
margin: -35px 0 0 -35px;
width: 70px;
height: 70px;
border-radius: 50%;
opacity: 0;
pointer-events: none;
>
.cbutton--effect-boris::after <
background: rgba(111,148,182,0.1);
>
.cbutton--effect-boris.cbutton--click::after <
animation: anim-effect-boris 0.3s forwards;
>
@keyframes anim-effect-boris <
0% <
transform: scale3d(0.3, 0.3, 1);
>
25%, 50% <
opacity: 1;
>
100% <
opacity: 0;
transform: scale3d(1.2, 1.2, 1);
>
>
Вот GIF изображение одного из эффектов:
Для эффекта "Stana", мы используем переход на SVG clipPath, то, что работает только в Chrome на данный момент. Мы в основном масштабируем clipPath в форме кольца для выявления и скрываем линии.
Свойство CSS clip-path, которое мы используем в эффекте "Stoja" не работает в любом браузере. Смотрите таблицу поддержки CanIUse для CSS свойства clip-path для более подробной информации.
Способ изменения цвета SVGs при помощи идентификатора в исходном изображении на основе Lea Verou: Изменение файла SVG через хэш URL
Mouse Jiggler - крошечная портативная программа, которая имитирует движения мыши, что может быть полезно например, для предотвращения запуска заставки или перехода системы в спящий режим.
Утилита может работать в двух режимах, реальном и виртуальном. В первом перемещение курсора будет происходить физически, а во втором - физически мышь будет неподвижна, но при этом будут посылаться сигналы, имитирующие движение курсора.
Программа очень проста в использовании, не имеет настроек, и разобраться с ней сможет даже новичок.
С помощью небольшой программки Defender Control вы в один клик сможете отключать, включать и.
Win Product Key Viewer - простая утилита для выявления и отображения ключа продукта вашей версии операционной системы Windows.
Небольшая портативная программа, которая позволяет настроить панель задач Windows 10.
StartIsBack++ - полезная утилита для всех пользователей "десятки", которая вернет в интерфейс операционки привычное и знакомое меню Пуск из Windows 7.
Volume2 - очень удобная программа, дающая пользователю возможность управлять уровнем.
Punto Switcher - нужная программа, которая автоматически исправит текст, набранный не в той.
Отзывы о программе Mouse Jiggler
Ярослав про Mouse Jiggler 1.8.42.0 [09-03-2021]
Отличная утилита! Работает без установки. Спасибо СОФТПОРТАЛ!
| | Ответить
Дмитрий про Mouse Jiggler 1.8.42.0 [09-01-2021]
А я пользуюсь прогой Caffeine, то же портяшка, принцип работы тот же самый.
4 | | Ответить
RadGoodNow_YT про Mouse Jiggler 1.8.42.0 [07-01-2021]
Спасибо за программу! В этом сайте всегда есть хорошие программы без вирусов!
| | Ответить
Замена курсора мыши на Windows 10
С помощью системных средств
За счёт встроенных средств каждый клиент Windows 10 может изменить внешний вид своего указателя мыши. Как известно, он может менять свою форму в процессе работы за компьютером в зависимости от ситуации. Например, появляется голубой кружок или значок в виде песочных часов, когда система ожидает загрузки какого-либо окна. В специальном окне вы можете настроить не только основной указатель, но и значки для всех его состояний по отдельности.
Итак, как открыть это специальное окно? Как в нём настроить указатель под себя? Возьмите на вооружение следующую подробную инструкцию:
Видео: как заменить курсор средствами Windows
С помощью специальных программ
Для людей, которые хотят быстро установить красивый новый курсор мыши разработаны специальные утилиты. Всего в пару кликов они ставят различные курсоры, доступные в их базе. Например, для таких целей была создана программа CursorFX. Сегодня рассмотрим установку указателя на её примере.
Преимущество этого софта в том, что у него интерфейс на русском языке. В нём легко разберётся даже новичок. Кроме этого, у него большая база оригинальных указателей и различных эффектов к ним, в том числе и звуковых. Откуда загрузить утилиту и как ей пользоваться?
Видео: как использовать программу CursorFX
Как изменить размер и цвет курсора на Windows 10
Как создать собственный курсор
Если ваша фантазия уходит далеко за пределы стандартных значков Windows и вы хотите получить действительно оригинальный курсор мыши, с которым приятно будет работать, создайте собственный указатель. Здесь вы можете как загрузить уже созданные до вас значки, так и нарисовать свой с помощью редакторов. Рассмотрим все два варианта развития событий.
Скачиваем новый значок из интернета
Видео: как скачать из интернета новый указатель и установить его
Создаём свой значок в Paint
Необязательно быть художником, чтобы нарисовать свой курсор мыши в этом встроенном редакторе изображений Windows. Его инструменты позволяют сделать ровные линии и использовать любые цвета. Этот способ подойдёт вам, если вы не любите чёрный и белый цвета классического курсора мыши, или если просто считаете их скучными.
Способ не из лёгких, так как состоит из нескольких этапов, однако поможет вам создать оригинальный значок, без предварительной установки программ на компьютере (для редакции изображения будем использовать сервисы, которые работают в режиме онлайн, то есть у вас должен быть подключён интернет).
Создаём курсор с помощью ArtCursors
Нарисовать свой указатель мыши можно не только с помощью Paint, но и за счёт сторонних утилит от различных разработчиков. Преимущество использования специальных программ в том, что вам не нужно будет отдельно конвертировать файл изображения png. Утилита создаст рисунок уже в нужном формате cur.
Для примера возьмём ArtCursors. Несмотря на то что её интерфейс на английском языке, в ней легко разобраться. Её минус в том, что она платная. Однако в начале пользования предлагается пробный период на месяц. Итак, как и где её скачать, а затем работать в ней?
Видео: как сделать свой курсор в программе ArtCursors
Создание анимированного курсора
Miсroangelo: создание иконок Windows и анимированных курсоров мыши
Нарисовать анимированный указатель мышь можно не только в ArtCursors, но и в других приложениях, например, Mircoangelo от одноимённого разработчика. В нём можно делать не только новые курсоры, но и различные типы иконок для операционной системы Windows. В распоряжении у пользователя этого софта есть несколько режимов. С помощью Animator, например, создаются анимированные значки, в том числе и для указателя мыши.
Какие возможности есть у этой программы?
- изменяет рисунки по каждому параметру: цвет, размер, оттенок, эффекты и т. д.;
- предлагает для редактирования специальные шаблоны;
- позволяет вращать изображения, а также загружать сторонние картинки.
Приложение доступно для скачивания на официальном ресурсе разработчика.
IconLover: превращение готовых картинок в анимированный курсор
Утилита IconLover подходит для создания иконок (каталогов, программ и т. д.) и курсоров, в том числе анимированных. Преимущество её в том, что она может превращать уже готовые картинки в иконку и указатель.
На что ещё способная эта утилита?
- импортировать и экспортировать файлы различных форматов, включая gif, png, bmp и многое другие;
- делать шахматные и градиентные заливки в слоях анимации;
- создавать значки маленьких и больших размеров;
- рисовать полупрозрачные значки для иконок и курсоров;
- использовать различные эффекты: тонировка, тень, сглаживание, прозрачность и другое;
- вращать, сдвигать и отражать рисунок.
Загрузить эту полезную утилиту для творческих людей можно с официального сайта.
Real World Cursor Editor: упрощённый редактор с множеством функций и языков
Утилита представляет собой бесплатное приложение для создания статичных и анимированных указателей мыши. Кроме большого количества инструментов для создания рисунков, утилита может похвастаться следующими возможностями:
- упрощённая функция применения различных эффектов на отдельные слои анимации (размытие, тень и т. д.);
- опция импорта и экспорта созданных движущихся курсоров в виде файлов с расширениями gif и png, например, для публикации в интернете;
- загрузка нескольких изображений для создания анимации;
- оптимизация анимированного курсора с повторяющимися слоями;
- дополнительные языки (при желании можно загрузить, чтобы было удобнее и быстрее работать в редакторе);
- создание указателей в формате 3D.
Программа доступна для скачивания на официальной странице разработчика RealWorld Graphics.
Возможности Windows позволяют внести что-то новое в интерфейс, например, сделать новый курсор, непохожий на стандартный. Вы имеет право воспользоваться сторонними утилитами для создания собственного оригинального указателя, например, приложением ArtCursors, или же просто для установки готовых тем, например, CursorFX.
Читайте также: