Как сделать иконку из картинки: Как из картинки или фотографии сделать иконку

Как сменить значок ярлыка на свою картинку в Windows 7

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

Как сделать иконку для ярлыка

Давайте попробуем сначала создать иконку а потом уже менять. Ведь обычное изображение у формате PNG или JPEG у вас не получится поставить на ярлык, так как они не поддерживаются.

Так, как я хочу себе сделать иконку для ярлыка «одноклассники», я нашел через сервис «гугл картинки» подходящее изображение. Теперь нам нужно эту картинку преобразовать в ICO формат, перед этим сделав ее квадратной. В противном случае, она получится искаженной. Переходим на онлайн сервис http://image.online-convert.com/ru/convert-to-ico. Кликаем обзор и загружаем файл. После в дополнительных настройках выставляем размеры 128 на 128 пикселов. Нажимаем «Преобразовать файл».

Обратите внимание, что значки для ярлыка могут быть только такими размерами: 16х16, 32х32, 64х64 и 128х128 пикселов.

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

Первый этап закончен. Мы смогли создать иконку для ярлыка и сохранить ее в определенную папку.

Добавляем картинку для ярлыка

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

Иконку мы уже сделали в формате ICО в уроке выше. Теперь берем нужный ярлык и нам нем кликнем правой кнопкой мыши и выбираем «Свойства».

Читайте также: Как создать ярлык сайта на рабочий стол

Дальше в разделе «Документ Интернета» кликаем на «Сменить значек..»

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

Находим нашу иконку и нажимаем «Открыть»

Дальше нажимаем «ОК», и в следующем окне также применяем.

Вот и все. Теперь картинка одноклассники хорошо выглядит на ярлыке и сразу понятно, какая это ссылка.

Урок у видео формате

Как сделать иконку (фавикон) для сайта — пошаговая инструкция

Сделать фавикон для своего сайта я решил не случайно. В бизнесе не выигрывают посредственности, залог вашего успеха – это умение быть уникальным и выделяться среди других. И наш сайт не исключение. Уникальные статьи, уникальные картинки, уникальный дизайн — все это способы выделиться среди конкурентов и получить больше посетителей на сайт. Еще одним элементом, способным отличить ваш сайт от других, будет уникальная иконка вашего сайта — favicon.ico.

Содержание:

1. Что такое фавикон?
2. Зачем сайту фавикон?
3. Как нарисовать иконку самостоятельно?
4. Как сделать favicon.ico из картинки?
5. Как установить фавикон на сайт?
6. Как сделать иконку запоминающейся?

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

Что такое фавикон?

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

Значки, которые вы видите рядом с названием сайта – это и есть favicon. Кроме закладок в браузере, фавикон понимают некоторые поисковики, например, в результатах поисковой выдачи Яндекса, возле сайта, имеющего favicon будет отображаться соответствующий значок.

Удивительно, но такие иконки имеют не все сайты, а среди тех, у которых они есть, большинство значков стандартные, вшитые в какую либо общедоступную систему управления сайтом, типа WordPress, или в тему оформления. На картинке видно, что владелец сайт на 17 позиции поленился создать favicon.

Размер фавикона 16 на 16 пикселей. Картинку можно сделать соответствующего размера или, сначала сделать большую, а потом сжать ее. И тот и другой способ приемлем.

Зачем сайту фавикон?

У использования favicon для сайта есть много полезных преимуществ, но я бы выделил два:

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

Как нарисовать фавикон самостоятельно

Теперь вы знаете, что такое фавикон, осталось прикрутить эту штучку к вашему сайту. Можно найти и готовые иконки, но я записал с экрана видео урок по которому вы легко разберетесь как создать фавикон онлайн. Займет это у вас всего несколько минут, зато ваш новый логотип будет на 100% уникальным и полностью соответствующим вашему ресурсу.

Не забудьте поделиться ссылкой на этот урок в твиттере, фэйсбук и других социалках, если он вам был полезен — вам не трудно, а мне будет приятно 🙂

Итак, создать картинку favicon.ico для сайта у нас получилось, ее нужно скачать.

Как сделать иконку из картинки?

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

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

Перейдите на iconizer.net и в строчку для поиска введите ключевое слово или фразу, которая характеризует или описывает тематику вашего блога. Например, WordPress или продвижение, раскрутка, заработок. Только, вводимое вами ключевое слово, должно быть написано английском языке. Если возникнут проблемы с переводом, то воспользуйтесь переводчиком Яндекс или Google. После ввода нажмите кнопку «Search».

Результаты будут выглядеть следующим образом:

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

Советую сделать настройки с точно такими же параметрами, которые показаны на изображении, чтобы избежать лишних проблем. И уже после этого нажать на «Generate Icon» и далее «Download».

Как установить фавикон на сайт?

Полученный файл favicon.ico нужно поместить в корневой каталог вашего сайта.

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

В моем браузере Хром фавикон подопытного сайта www.tb1000tur.ru, появился сразу, а вот в “Мозиле” пришлось подождать. Что касается Яндекса, то там процесс распознавания иконки сравним с процессом индексации страниц сайта – может затянуться и на пару месяцев.

Для ускорения индексации можно прописать между тегами <head></head> вашего сайта следующую строчку:

<link rel="icon" href="http://tb1000tur.ru/favicon.ico" type="image/x-icon">

Где вместо адреса для моего сайта прописываете адрес своего. В принципе, можно обойтись и без нее, если фавикон лежит в корневой папке.

Как сделать favicon более запоминающимся?

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

Совет номер раз. Старайтесь сделать изображение понятным и соответствующим тематике вашего сайта. Если сайт о путешествиях, как я приводил пример выше, то изображение пальмы будет в тему. В том случае, когда картинку под нужную вам тему подобрать сложно — используйте буквы, как это делают Youtube или поисковая система Яндекс.

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

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

Как создать иконку профиля от Cheishiru

Чейширу

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

Есть видеоверсия этого урока. Я рекомендую проверить это!

Размер

Платформы социальных сетей обычно не запрашивают HD-изображения для значков профилей. Как по высоте, так и по ширине обычно достаточно 800 квадратных пикселей, но я предпочитаю минимум 1000.

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

Кроме того, если вам трудно увеличивать и уменьшать масштаб, чтобы увидеть, хорошо ли выглядит ваша работа в меньшем размере

Если у вас нет навигатора на экране, измените его размер примерно до 100 квадратных пикселей. Теперь вы можете увидеть уменьшенную версию в режиме реального времени.

Заголовок

Чтобы быть в безопасности, лучше всего иметь значок квадратной формы, потому что иногда значок обрезается до странных форм. Большинство обрезает значок по кругу, поэтому мы будем использовать его в качестве справки.

Чтобы сделать круг простым способом, перейдите к вспомогательному инструменту Рисунок (1), затем выберите Эллипс (2). Линия/Заливка (3) должна быть «Создать линию», средний вариант.

Проверьте тип пропорции (4) и нажмите «Указать длину» (5). Вы можете выбрать, сколько пикселей будет в диаметре круга (6), и это здорово.
Поскольку размер холста составляет 1000 квадратных пикселей, введите 1000 для ширины и высоты.

Щелкните левый верхний угол холста.

Появляется идеальный круг.

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

Проверьте это на своем аватаре, чтобы увидеть, находится ли фокус прямо в середине круга. Это так, вы готовы идти.

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

Цвет

Почти на каждой платформе есть светлый и темный режимы. Рекомендуется проверить, будет ли значок профиля хорошо выглядеть в черном, сером и белом цветах. Чтобы проверить, используйте предыдущий шаблон кадрирования и увеличьте его яркость с помощью Edit > Tonal Correction > Hue/Saturation/Luminosity.

Этот значок профиля имеет низкую контрастность.

Попробуйте сравнить его с этим, который имеет более высокий контраст.

Какой из них лучше смотрится в небольших размерах и в любом цветовом режиме?

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

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

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

Иконки на основе букв

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

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

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

Конечно, вы можете настроить и стилизовать буквы, чтобы их было легко читать в нижнем регистре. Превратить его во что-то вроде логотипа. Например, вы можете стилизовать букву Б в слове «луч», чтобы сделать ее узнаваемой, даже если люди не могут прочитать остальные три буквы.

Если имя, которое вы используете, состоит из более чем четырех букв, имеет уникальное написание или его трудно запомнить, вы можете выбрать стилизацию первой буквы имени. То же самое происходит, если имя содержит более одного слова. Clip Studio, PlayStation, General Electric — бренды и организации используют это постоянно.

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

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

В случае, если инициал слишком распространен (например, TV, WC, AC) или совпадает с инициалами существующих брендов/организаций, вы можете подумать об альтернативе.

Например, инициалы Wanderwort Chronicles будут WC, вместо этого вы можете сократить их до W-Chro. Таким образом, люди не будут думать о унитазе, глядя на значок профиля. Вы также можете вставить полное имя где-нибудь внутри значка.

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

В то время как полное имя в обоих образцах плохо читается или не читается при изменении размера, имя справа все еще узнаваемо из-за огромного W-Chro.

Слова над изображением также работают. Убедитесь, что слова читаемы, сопоставив цвет слова и изображения.

Иконки на основе изображений

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

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

Размер холста для этого эскиза 2000*2000.

Скопируйте размер шаблона кадрирования по вашему выбору и вставьте его на холст. Посмотрите, может ли точка фокусировки поместиться внутри одного из кругов, предпочтительно от 800 пикселей и выше. Фокусы этой картины — лицо и «день рождения» торта.

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

Скройте круг и начните рисовать. Если вы делаете штриховой рисунок, подумайте о том, чтобы сделать его в векторном слое, а не в растровом. Существует вспомогательный инструмент под названием «Правильная линия» (горячая клавиша Y), который может помочь вам редактировать векторные линии.

Вот пример результатов редактирования в 6 различных режимах.

1. Зажмите векторную линию
2. Увеличьте толщину/увеличьте ширину. Обработать всю строку: ВКЛ.
3. Уменьшить/уменьшить ширину. Обработать всю строку: ВКЛ.
4. Исправить ширину. Обработать всю строку: ВКЛ.
5. Утолщение/увеличение ширины. Обработка всей строки: ВЫКЛ.
6. Уменьшить/уменьшить ширину. Обработка всей строки: ВЫКЛ.

Процесс рисования:

Цветовое тестирование.

Поскольку проблем со всеми тремя цветовыми режимами нет, дело сделано!

Советы

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

Другой способ — перейти в «Слой» > «Новый корректирующий слой» и использовать одну или несколько из этих трех функций: «Яркость/контрастность», «Коррекция уровня» и «Кривая тона».

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

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

Outro

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

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

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

• Дизайн и графика
• КЛИП СТУДИЯ КРАСКИ
• Идеи
• Подготовка/Составление
• Штриховой рисунок
• Обработка/отделка
• Видео СОВЕТЫ
• #Пфикон
• #ЕжемесячныеСОВЕТЫ202205
• #ClipStudioTips2022
• #Проектирование/Практика
• #социальные сети
• #КлипСтудио
• #Учебник
• #СОВЕТЫ
• #Арт
• #учебник
• #Начинающий
• # Дизайн

Пользователи, которым понравился этот пост

Как изменить значки приложений на iPhone или iPad

• Вы можете изменить практически любой значок приложения на своем iPhone или iPad с помощью приложения «Ярлыки».
• Приложение «Ярлыки» позволяет создавать новые значки приложений, которые будут запускать выбранные вами приложения при касании.
• Создав новые значки приложений, вы можете скрыть исходные значки приложений в библиотеке приложений.

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

К счастью, новые версии iOS и iPadOS включают функцию, позволяющую заменить значок практически любого приложения на любое изображение. Вы даже можете переименовывать приложения, что очень удобно, если у вас есть прозвища для избранных приложений.

Вот как изменить значки приложений на вашем iPhone с помощью приложения «Ярлыки».

Прежде всего убедитесь, что:

• Вы обновили свое устройство до iOS 14 или iPadOS 14 или выше.
• У вас установлено приложение «Быстрые команды».
• У вас есть изображения, которые вы хотите использовать для новых значков, сохраненных на вашем устройстве.

Когда будете готовы:

1. Откройте приложение «Ярлыки» и коснитесь знака «плюс» в правом верхнем углу.

Создайте новый ярлык. Уильям Антонелли/Инсайдер

2. Нажмите «Добавить действие».

3. В открывшемся меню найдите «Открыть приложение» и выберите его, когда оно появится в разделе «Действия».

Вы будете создавать ярлык, который открывает приложение. Уильям Антонелли/Инсайдер

4. Коснитесь заполнителя «Выбрать» и выберите приложение, для которого вы хотите создать новый значок.

Вам нужно выбрать приложение, значок которого вы хотите изменить. Уильям Антонелли/Инсайдер

5. Коснитесь трех точек в правом верхнем углу, чтобы открыть меню параметров.

6. Нажмите «Добавить на главный экран», а затем дайте ярлыку имя. Вы можете сделать это фактическим названием приложения или псевдонимом.

Добавление ярлыка на главный экран позволит вам выбрать пользовательское изображение. Уильям Антонелли/Инсайдер

7. Коснитесь значка по умолчанию рядом с именем, чтобы выбрать новый значок приложения. Вы можете выбрать «Сделать фото», чтобы сделать новое изображение, «Выбрать фото», чтобы использовать изображение, которое вы сохранили в приложении «Фотографии», или «Выбрать файл», чтобы выбрать изображение в приложении «Файлы» вашего устройства.

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

8. Нажмите «Добавить» в правом верхнем углу.

Выберите имя и изображение, а затем «Добавить» его. Уильям Антонелли/Инсайдер

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

И если вы хотите скрыть оригинальный значок приложения, чтобы он не загромождал главный экран:

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

2. Выберите «Удалить приложение», а затем «Удалить с главного экрана».

Появится ваш новый значок приложения, и вы можете скрыть оригинал. Уильям Антонелли/Инсайдер

Вы сможете найти оригинал в своей библиотеке приложений, на последней странице главного экрана.