Картинка иконка: Пакет значков Image

Содержание

Page not found (404)

Toggle navigation

Packs
- Значок пакеты недавно Загрузил
- Самых популярных значок пакеты
- Эксклюзивные наборы значков
категории
- Сельское хозяйство Иконки
- Животные Иконки
- Аватар и смайлики Иконки
- Красота и мода Иконки
- Бизнес и финансы Иконки
- Мультфильм Иконки
- Кино, телевидение и фильмы Иконки
- Одежда и аксессуары Иконки
- Преступление и безопасность Иконки
- Культура, религия и фестивали Иконки
- Дизайн и разработка Иконки
- Экология, окружающая среда и природа Иконки
- Электронная торговля и покупки Иконки
- Электронные устройства и оборудование Иконки
- Файлы и папки Иконки
- Флаги и карты Иконки
- Дизайн и разработка Иконки
- Экология, окружающая среда и природа Иконки
- Gym и Fitness Иконки
- Здравоохранение и медицина Иконки
- Промышленность и инфраструктура Иконки
- Инфографика Иконки
- Дети Иконки
- люблю Иконки
- Разное Иконки
- Музыка и мультимедиа Иконки
- Сеть и связь Иконки
- Недвижимость и строительство Иконки
- Школа и образование Иконки
- Наука и технологии Иконки
- SEO и Web Иконки
- Sign и Symbol Иконки
- Социальные медиа и логотипы Иконки
- Спорт и игры Иконки
- Инструменты, строительство и оборудование Иконки
- Транспорт и транспортные средства Иконки
- Путешествия, отели и каникулы Иконки
- Пользовательский интерфейс и жесты Иконки
- Погода и сезоны Иконки
стили значков
- 3D Иконки
- Badge Иконки
- Filled outline Иконки
- Flat Иконки
- Glyph Иконки
- Handdrawn Иконки
- Long shadow Иконки
- Outline Иконки
- Photorealistic Иконки
Популярные поиски
- Instagram Иконки
- Vk Иконки
- телефон Иконки
- Папки Иконки
- деньги Иконки
- Социальные Иконки
- Facebook Иконки
- Telegram Иконки
- Viber Иконки
- корзина Иконки
- Whatsapp Иконки
- стрелка Иконки
- Youtube Иконки
- дом Иконки
- Phone Иконки
- люди Иконки
- почта Иконки
- папки Иконки
- человек Иконки
- доставка Иконки
- галочка Иконки
- папка Иконки
- музыка Иконки
- Mail Иконки
- компьютер Иконки
- вк Иконки
- Steam Иконки
- Instagram Иконки
- сайт Иконки
- фото Иконки

404 Icon by Laura Reen

Иконки для веб-дизайна — предназначение и правила использования

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

о значении иконок в веб-дизайне на конкретных примерах, как правильно выбрать и использовать их на сайте.

Зачем дизайнеры используют иконки

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

Если мы уберем сопутствующие изображения, скорость восприятия меняется:

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

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

Еще одна функция иконок — помощь пользователю сориентироваться в интерфейсе. Есть несколько универсальных символов, которые используются в дизайне для направления пользователя, например:

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

Такие изображения добавляют на сайты интернет-магазинов для облегчения покупки:

С помощью иконок клиент не теряется на новом ресурсе и понимает, какие действия он может сделать.

Как с помощью иконок повысить конверсию сайта

Как любой контент на сайте иконки требуют продуманного подхода. При правильном использовании изображения могут стать еще одним инструментом повышения конверсии и управлением поведением покупателей. Что можно сделать для стимулирования продаж?

1. Привлечь внимание к преимуществам компании

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

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

2. Расскажите, как сделать заказ или как работает компания

Чтобы новые клиенты знали по какому алгоритму работает магазин или оказываются услуги, расскажите об этом с помощью иконок:

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

3. Расскажите о товаре с помощью изображений

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

4. Выделяйте акции и специальные предложения, а также нужные категории товаров

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

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

Какие иконки используют в дизайне

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

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

Линейные

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

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

Иллюстрации

Вместо тонких линий и ясных контуров используют специальные цветные рисунки.

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

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

Объемные

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

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

и мешать стилевому единообразию сайта.

Простые элементы

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

А здесь вместо картинок использовали простой элемент галочку:

Такие иконки не отвлекают внимание пользователя от основной информации, но и не «цепляют» взгляд.

Шрифтовые иконки

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

Иконки встраиваются в HTML код как обычный класс с именем «fa» с помощью тегов <i> или <span>. Пример использования:

Где «address-book» — название иконки-книжки. Изображения удобно использовать для обозначения мелких элементов, например, на странице «контакты», в формах или в меню.

Примеры использования иконок в веб-дизайне

Мы разобрались, как иконки различаются по стилистике и методам внедрения. Теперь рассмотрим деление элементов по назначению на реальных примерах.

Иконки для навигации

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

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

Информационные иконки

Иногда иконки используются, чтобы о чем-то рассказать клиенту: о продукции, компании или предоставить полезную информацию.

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

Социальные доказательства

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

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

Призыв к действию

Иконки встраивают в контент, который приводит пользователя к целевым действиям на сайте:

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

Разделы каталогов

Чтобы разделить одну категорию товаров от другого и вызвать ассоциации с определенным продуктом, иконки используют в оформлении разделов каталога:

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

Социальные кнопки

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

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

Фильтры

Иконки можно использовать в фильтрах для товаров. Узнаваемые изображения помогут клиентам сориентироваться в каталоге и выбрать нужный продукт или услугу:

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

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

5 советов по созданию дизайна иконок

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

1. Иконки должны быть узнаваемыми и ассоциироваться с окружающим текстом

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

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

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

2. Дополняйте иконку текстом

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

3. Дизайн иконок должен быть похож между собой

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

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

4. Прозрачный фон облегчает восприятие

Использование прозрачного фона увеличивает скорость восприятия. Цветной фон создает визуальный шум, из-за которого иконки кажутся одинаковыми. Сравните:

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

5. Используйте векторную графику, если это возможно

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

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

Создайте иконки для сторис Instagram онлайн

Достигайте желаемого результата, экономя время

Как сделать обложки для актуального материала без предварительной подготовки? Достаточно выбрать в меню подходящий шаблон, введя в строке поиска тип «Ваша История», или размер 1080x1920px, а затем включить креативность на максимум! Пролистните список идей, чтобы вдохновиться, и даже заимствовать. Или воплощайте свои иконки для актуальных историй с нуля, обратившись к простой и понятной панели инструментов. Во вкладке «Фон» найдутся те, что точно отразят вашу концепцию: текстурные, монохромные, фотографии высокого разрешения. Или нажмите на «Сплошной цвет», чтобы вручную задать тот, что, по вашему мнению, впишется удачнее всего.

Используйте лучшие картинки для Сторис

Ваши посетители с первого взгляда поймут, что скрывается за каждой из подборок. Все благодаря значкам, емким и лаконичным, миллионы которых хранятся в галерее Canva. Так что задаваться вопросом, где взять картинки для Сторис, чтобы они эффектно смотрелись на странице, вам не придется. В разделе «Элементы» ищите тематическую графику по своему запросу, будь то миниатюры товаров, праздничные символы, географические метки, эмодзи или эмблемы социальных сетей. Одним нажатием перетаскивайте в рабочую зону, разместите по центру, регулируйте пропорции. Кроме того, картинки для истории в Инстаграм – например, логотипы, можно загрузить прямо со своего компьютера в папку «Мое» и обращаться к ним всякий раз, когда появится необходимость.

Создавайте картинки для Сторис всего блока «Актуальное»

Размещайте каталог своих предложений и регулярно обновляйте его. Делитесь новостями и событиями из жизни, анонсируйте мероприятия и выкладывайте отчеты. Функционал инста-платформы позволяет добавлять более 20 иконок – воспользуйтесь им для любых целей, и в разных вариациях. Вам не понадобится вкладывать усилия каждую из них: один шаблон можно задействовать повторно множество раз. Дублируйте его и внесите необходимые правки, чтобы скачать уже совершенно другие иконки для актуального, нажав «Поделиться» и раскрыв все форматы изображения.

Важное обновление гайдлайнов для иконок Google Play

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

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

Freeform (произвольная форма)– оригинальный форматUniformed (унифицированный) – новый формат

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

7 дней дизайн-перезагрузки

Мощнейние спикеры, самое дружелюбное дизайн-комьнити и желание делать клевый дизайн.
Скидка 10% по промокоду UXPUB

Присоединиться

Важное замечание: Если вы хотите узнать больше о создании APK launcher icons, которые отличаются от значков Google Play, описанных в этой статье, см. ресурсы ниже:

Следуйте этим рекомендациям по иконкам APK, чтобы узнать, как создавать адаптивные иконки лончера, представленные в Android 8.0 (уровень API 26).

Ознакомьтесь с принципами Material Design для иконок продуктов, включая рекомендации по дизайну иконок, формам, спецификациям и обработке.

Создание ресурсов

В этом разделе описываются некоторые рекомендации, которым вы должны следовать при создании визуальных ресурсов для своего приложения в Google Play.

Атрибуты

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

Убедитесь, что ваши ресурсы соответствуют следующим характеристикам:

Окончательный размер: 512px x 512px
Формат: 32-bit PNG
Цветовое пространство: sRGB
Максимальный размер файла: 1024KB
Форма: Квадрат – Google Play динамически применяет маску. Радиус будет эквивалентен 20% размера иконки.
Тень: Отсутствует – Google Play динамически обрабатывает тени. Смотрите раздел «Тени» ниже.

Общий размер иконкиКлючевые линии иконки продукта

После загрузки актива Google Play динамически применяет маску с закругленными углами и тень для обеспечения согласованности всех иконок приложений / игр.

Слева – ваша новая иконка. На следующих трех изображениях справа показана динамическая обработка иконки в Google Play

Определение размеров

Используйте все пространство активов в качестве фона при работе с иконками.

Используйте ключевые линии в качестве руководства для размещения элементов (например, логотипов).

Ваша иконка без полей (финальный актив)Конечный результат с тенями и закругленными углами, динамически применяемыми в Google Play

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

Не делайте.

Не втискивайте иллюстрацию в иконку без полей

Делайте.

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

Иллюстрация обычно хорошо работает, как иконка без полей.

Не делайте.

Не уменьшайте изображение до ключевых линий.

Делайте.

Используйте все пространство актива, чтобы ваше изображение занимало всю иконку

Тени

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

Не делайте.

Не добавляйте тени к финальной версии вашей иконки

Делайте.

Вы можете создавать тени и освещение в пределах иллюстрации

Радиус закругления

Google Play динамически применяет радиус закругления угла. Это обеспечивает согласованность при изменении размера иконки в разных макетах интерфейса. Радиус будет эквивалентен 20% размера иконки.

Не делайте.

Не закругляйте края финальной версии вашего актива

Делайте.

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

Бейджи (наклейки)

Встроенные бейджи убираются из самой иллюстрации и плохо масштабируются вместе с иконкой

Внимание.

Избегайте сообщений о рекламных акциях на самом изображении

Внимание.

Избегайте использования брендинговых наклеек

Адаптация бренда

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

Слева направо: исходная иконка, новая иконка (рекомендуемая адаптация), новая иконка, отображаемая в Google Play

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

Слева направо: исходная иконка, новая иконка (рекомендуемая адаптация), новая иконка, отображаемая в Google Play

Если вокруг логотипа нет четкой формы, поместите его на фон без полей.

Слева направо: исходная иконка, новая иконка (рекомендуемая адаптация), новая иконка, отображаемая в Google Play

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

Слева направо: исходная иконка, новая иконка (рекомендуемая адаптация), новая иконка, отображаемая в Google Play

Режим совместимости

Исходные ресурсы иконок, которые не были обновлены в соответствии с новыми спецификациями, будут в конечном итоге переведены в «Режим совместимости» и уменьшены на 75% до размера сетки ключевых линий (512 * 0.75 = 384px).

Загрузка иконки в соответствии с исходной спецификацией не будет разрешена с мая 2019 года. Ознакомьтесь с более подробной информацией о сроках.

Исходные иконки будут автоматически преобразованы в активы режима совместимости и уменьшены на 75% до новой сетки ключевых линий

Скачайте шаблоны

Для начала скачайте один из предоставленных шаблонов активов:

Значение значков статуса на iPhone

		Сигнал сети сотовой связи Количество полосок показывает уровень сигнала сети сотовой связи, к которой Вы подключены. При отсутствии сигнала появляется надпись «Нет сети».
		Сигналы двух сетей сотовой связи На моделях с двумя SIM-картами верхний ряд полосок представляет силу сигнала сети, используемой для передачи сотовых данных. Нижний ряд полосок показывает уровень сигнала другой сети сотовой связи. При отсутствии сигнала появляется надпись «Нет сети». Чтобы увидеть значки статуса с соответствующими названиями сотовых тарифов и операторов, откройте Пункт управления.
		Авиарежим Авиарежим включен — нельзя совершать вызовы, также могут быть отключены другие функции беспроводной связи. См. раздел Выбор настроек iPhone для путешествий.
		5G Доступна сеть 5G выбранного оператора связи, и iPhone может подключаться к интернету по этой сети (поддерживается на моделях iPhone 12; доступно не во всех странах и регионах). См. статью службы поддержки Apple Использование сети 5G на iPhone.
		5G+ Доступна сеть 5G выбранного оператора связи с более высокой частотой, и iPhone может подключаться к интернету по этой сети (поддерживается на моделях iPhone 12; доступно не во всех странах и регионах). См. статью службы поддержки Apple Использование сети 5G на iPhone.
		5G UW Доступна сеть 5G выбранного оператора связи с более высокой частотой, и iPhone может подключаться к интернету по этой сети (поддерживается на моделях iPhone 12; доступно не во всех странах и регионах). См. статью службы поддержки Apple Использование сети 5G на iPhone.
		5G E Доступна сеть 5G E выбранного оператора связи, и iPhone может подключаться к интернету по этой сети (поддерживается на iPhone 8 или новее; доступно не во всех странах и регионах). См. раздел Просмотр или изменение настроек сотовых данных на iPhone.
		UMTS Доступна сеть 4G UMTS (GSM) или LTE того оператора связи, услугами которого Вы пользуетесь (доступность зависит от оператора), и iPhone может подключаться к интернету по этой сети (доступность зависит от страны и региона). См. раздел Просмотр или изменение настроек сотовых данных на iPhone.
		LTE Доступна сеть LTE того оператора связи, услугами которого Вы пользуетесь, и iPhone может подключаться к интернету по этой сети (доступно не во всех странах и регионах). См. раздел Просмотр или изменение настроек сотовых данных на iPhone.
		UMTS/EV-DO Доступна сеть 3G UMTS (GSM) или EV-DO (CDMA) Вашего оператора, и iPhone может подключаться к интернету по этой сети. См. раздел Просмотр или изменение настроек сотовых данных на iPhone.
		EDGE Доступна сеть EDGE (GSM) Вашего оператора связи, и iPhone может подключаться к интернету по этой сети. См. раздел Просмотр или изменение настроек сотовых данных на iPhone.
		GPRS/1xRTT Доступна сеть GPRS (GSM) или 1xRTT (CDMA) Вашего оператора, и iPhone может подключаться к интернету по этой сети. См. раздел Просмотр или изменение настроек сотовых данных на iPhone.
		Вызовы по Wi‑Fi iPhone настроен для Вызовов по Wi‑Fi. Также на iPhone отображается значок и название оператора связи. См. раздел Выполнение вызова на iPhone.
		Wi‑Fi iPhone подключен к интернету по сети Wi‑Fi. См. раздел Подключение iPhone к сети Wi-Fi.
		Режим модема iPhone подключен к интернету с помощью режима модема на другом устройстве. См. раздел Подключение к устройству в Режиме модема.
		Индикатор режима модема Синее облачко или строка показывают, что iPhone работает в режиме модема или в режиме повтора экрана, либо приложение активно использует Вашу геопозицию. См. раздел Раздача интернета с iPhone.
		Индикатор вызова Зеленое облачко или строка показывают, что iPhone находится в процессе принятия вызова. См. раздел Выполнение вызова на iPhone.
		Индикатор записи Красное облачко или строка показывают, что на iPhone в данный момент производится запись звука или запись экрана. См. раздел Запись звука в приложении «Диктофон» на iPhone.
		Индикатор «Камера используется» Когда приложение использует камеру, в верхней части экрана появляется зеленый индикатор. См. раздел Измерение размеров с помощью iPhone.
		Индикатор «Микрофон используется» Когда приложение использует микрофон, в верхней части экрана появляется оранжевый индикатор. См. раздел Запись звука в приложении «Диктофон» на iPhone.
		CarPlay iPhone подключен к CarPlay. См. раздел Подключение iPhone к CarPlay.
		Синхронизация iPhone синхронизируется с компьютером. См. раздел Синхронизация iPhone с компьютером.
		Обмен данными по сети Наличие сетевой активности в данный момент. Некоторые приложения сторонних разработчиков могут также использовать этот значок для отображения активных процессов.
		VPN iPhone подключен к сети с использованием VPN.
		Переадресация На iPhone включена функция «Переадресация». См. раздел Настройка переадресации вызовов и ожидания вызовов на iPhone.
		TTY Включена функция виртуального RTT / TTY или аппаратного TTY. См. раздел Настройка и использование телетайпа и текстовой трансляции на iPhone.
		Блокировка iPhone заблокирован. См. раздел Доступ к функциям на экране блокировки iPhone.
		Режим «Не беспокоить» Функция «Не беспокоить» включена. См. раздел Установка режима «Не беспокоить» на iPhone.
		Блокировка вертикальной ориентации для экрана Экран iPhone сейчас настроен для использования только вертикальной ориентации. См. раздел Изменение или блокировка ориентации экрана iPhone.
		Службы геолокации Какой-либо объект использует Службы геолокации. См. раздел Управление информацией о геопозиции на iPhone.
		Будильник Установлен будильник. См. раздел Установка будильника на iPhone.
		Наушники подключены Между iPhone и наушниками Bluetooth создана пара, наушники включены и находятся в зоне взаимного действия Bluetooth. См. раздел Настройка и использование наушников Bluetooth.
		Аккумулятор устройства Bluetooth Показывает уровень заряда подсоединенного устройства Bluetooth.
		Аккумулятор Отображает уровень заряда аккумулятора iPhone. Желтый значок означает, что включен режим энергосбережения. См. раздел Зарядка аккумулятора и проверка заряда на iPhone.
		Зарядка аккумулятора Показывает, что аккумулятор iPhone в данным момент заряжается. См. раздел Зарядка аккумулятора и проверка заряда на iPhone.
		AirPlay AirPlay включен. См. раздел Беспроводная потоковая передача фото и видео с iPhone на Apple TV или смарт-телевизор.
		Управление голосом Чтобы включить Управление голосом, откройте «Настройки» > «Универсальный доступ», и Siri сможет Вам помочь. См. раздел Использование Управления голосом для взаимодействия с iPhone.
		Siri Eyes Free Siri откликается на Ваши просьбы, когда Вы за рулем. См. раздел Использование Siri в автомобиле.

Как рисовать перекрашиваемые иконки — Турбомилк

Как рисовать перекрашиваемые иконки

Автор: Денис Кортунов
18 июня 2009

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

Например, мы хотим нарисовать перекрашиваемую папочку. Берем любимый векторный редактор и рисуем.

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

Но как нарисовать такую маску? Очень просто. Нужно взять цветную основу, а потом нарисовать сверху блики и тени.

Засветляющая маска (показана на черном фоне для наглядности), затемняющая маска, цветная подложка

В засветляющей маске используется только белый цвет с разной прозрачностью, а в затемняющей маске — только черный. Цвет подложки значения не имеет — выбирайте любой, он все-равно будет меняться. Если вы рисуете несколько иконок, то лучше выбирать единый «тестовый» цвет.

Зачем нужны и засветляющий и затемняющий слои одновременно? Мы не знаем какой цвет выберет пользователь, а иконка должна всегда выглядеть хорошо. Вот, например, нарисовали мы только засветляющий слой, а пользователь взял и выбрал белый цвет для подложки. Катастрофа! Получится плоская абсолютно белая иконка. Такая же история, но наоборот, с черным цветом. А если есть темный и светлый слои, то результат неплохой:

Иконки с абсолютно белой и черной подложками

Лучше, конечно, выбирать почти белый (светло-серый) и почти черный (темно-серый) — тогда иконка будет более объемной и симпатичной. Но и при крайних значениях получается неплохо.

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

Тень от половинки папки. В светлых слоях через маски сделана «дырка» по форме этой тени. (Цвет черный, непрозрачность 10%)
Нижний затемняющий объемный слой. Он должен быть обязательно выше обводки и перекрывать её. Тогда обводка становится темнее к низу. (Черный, 40%)
Блик на половине папки. (Белый, 40%)
Засветляющий объемный слой. Размытие краев (feather 3 pt). (Белый, 65%)
Обводка иконки. Очень важная штука которая гарантирует, что у любого цвета будет обводка. (Серый, 50%)
Светлая обводка по периметру. Делает иконку более четкой и живой. (Белый, 25%)
Верхний засветляющий объемный слой. В паре с затемняющим обозначают «освещение» иконки сверху. (Белый, 40%)
Тень от иконки (Черный, 25%)
Цветная подложка. (Любой цвет, 100%)

Если вам мало этой занудной схемы, то можно скачать исходник в формате AI.

Далее нужно убрать из иконки подложку (поместить её рядом) и растрировать векторный файл в фотошопе. Мы получили те самые волшебные картинки, которые секретный механизм Иконзы склеивает в единый файл простым сложением.

Связанные записи

Favicon (иконка сайта) | SEO-портал

Иконка Favicon (фавиконка) — маленький, но очень важный атрибут сайта. Из материала вы узнаете о том, зачем нужна фавиконка, какое значение она имеет в SEO, а также о том, как создать и подключить Favicon в формате ICO и других форматах к своему сайту.

Зачем нужна иконка Favicon для сайта?

Иконка сайта Favicon (от англ. Favorite Icon — иконка для избранного; также: фавиконка, пиктограмма сайта, значок сайта) — небольшая (16×16 px) картинка (как правило в формате ICO), отображаемая во вкладках и закладках браузера, а также имеющая значение в SEO-оптимизации.

Иконка сайта в браузере

Главное назначение иконок Favicon: отображение в элементах интерфейса браузеров, облегчающее их использование.

Иконка сайта во вкладках браузера

Все современные интернет-обозреватели отображают иконку сайта во вкладках:

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

Фавиконки при большом количестве вкладок

Иконка сайта в закладках браузера

Кроме отображения во вкладках, иконка сайта отображается в закладках браузеров (в ссылках на «избранные» страницы), а также в панелях со ссылками:

Если интернет-пользователь активно пользуется браузерными закладками, фавиконки позволяют ускорить данный процесс.

Иконка сайта перед адресной строкой браузера

Некоторые браузеры отображают пиктограмму сайта перед адресной строкой, а также в выпадающем списке URL-адресов выпадающей строки:

Значение иконки сайта в SEO

Favicon является SEO-фактором, т. к. она отображается в сниппетах поисковой выдачи Яндекса и Google (в мобильной поисковой выдаче фавиконки стали отображаться с мая 2019-го, а в десктопной — с начала 2020-го года), в некоторой мере влияя на их кликабельность (вероятность перехода на сайт из поисковой выдачи), которая является положительным поведенческим фактором ранжирования.

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

Из всего вышесказанного следует, что фавиконка:

отображается в интерфейсе браузеров: вкладках, закладках и перед адресной строкой (Internet Explorer, Safari),
способствует узнаваемости сайта,
облегчает работу пользователей в браузере,
является визитной карточкой сайта в браузере,
отображается в сниппетах поисковой выдачи,
может влиять на кликабельность сниппета,
может косвенно влиять на ранжирование страниц сайта.

Иконка сайта и ПС Яндекс

Favicon отображается в поисковой выдаче Яндекса и может непосредственно влиять на внешние поведенческие факторы.

Favicon в сниппетах Яндекса

Фавиконка сайта отображается напротив заголовков сниппетов:

Favicon в сниппетах выдачи Яндекса

Наличие (отсутствие) и привлекательность фавиконки может отражаться на кликабельности сниппета поисковой выдачи Яндекса, косвенно влияя на ранжирование.

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

Предупреждение об отсутствии файла

Если иконка сайта не отображается в Яндексе, то обратите внимание на наличие предупреждения «Отсутствует файл favicon на сайте» в разделе «Диагностика сайта» сервиса Яндекс.Вебмастер:

Указание на отсутствие фавиконки в сервисе Яндекс.Вебмастер

Проверка наличия Favicon в индексе

Фавиконки добавляются в индексную базу и отображаются в поисковой выдаче в виде изображений в формате PNG. Проверить наличие иконки сайта в индексе Яндекса можно по ссылке:

http://favicon.yandex.net/favicon/[абсолютный URL-адрес]

Например: http://favicon.yandex.net/favicon/https://seoportal.net

Если фавиконка проиндексирована, то она отобразится на странице в формате PNG.

Проверка Favicon на соответствие требованиям

Если иконка сайта не проиндексирована, и (или) в Яндекс.Вебмастере присутствует указанное выше предупреждение об её отсутствии на сайте, то проверьте файл на соответствие требованиям.

Чтобы фавиконка отображалась в результатах поиска, необходимо разместить картинку (файл favicon.ico) размером 16×16 пикселей в корневом каталоге сайта. Предпочтительный формат пиктограммы сайта — ICO, но возможны и другие форматы: GIF, JPEG, PNG и BMP.
Яндекс.Помощь

Требования к иконке сайта

Чтобы избежать проблем с отображением иконки сайта Favicon в интерфейсе браузеров и сниппетах поисковой выдачи Яндекса, необходимо, чтобы файл иконки соответствовал определённым требованиям.

Для фавиконок существуют требования:

к названию файла,
к геометрическому размеру,
к формату файла,
к размещению,
к HTML-разметке.

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

Название файла

Традиционно файл иконки сайта принято называть favicon, но фактически он может называться как угодно, если в HTML-коде указан явный путь к иконке сайта. Иначе говоря: если в корне сайта размещена иконка favicon.ico (именно в формате ICO), а в HTML-коде нет ссылки на неё, то браузер всё равно обнаружит иконку по её названию и будет отображать по назначению. Если же фавиконка сайта будет называться иначе, чем favicon.ico, или иметь расширение, отличное от ICO, при этом в HTML-коде не будет явной ссылки на неё, то браузер не сможет её обнаружить.

Во избежание проблем с отображением иконки сайта в браузере и сниппетах поисковой выдачи Яндекса, файл иконки следует называть «favicon.ico».

Геометрический размер

В Справке Google сказано, что геометрический размер фавиконки должен быть кратным 48 и составлять не меньше 48×48 px. Во вкладках, закладках и перед адресной строкой браузеров, а также в сниппетах поисковой выдачи значок Favicon отображается в размере 16×16 пикселей, поэтому делать картинку более 48×48 px не имеет смысла.

Значок сайта должен быть квадратным и иметь размеры, кратные 48 пикселям, например 48 x 48, 96 x 96, 144 x 144. Файлы SVG конкретного размера не имеют. Поддерживаются значки всех допустимых форматов. Убедитесь, что значок сайта хорошо выглядит при разрешении 16 x 16 пикселей, так как для показа в результатах поиска масштаб значка будет изменен. Учтите, что добавлять значок размером 16 x 16 пикселей не следует.
Справка Google

Формат файла

Традиционным форматом Favicon является ICO, однако современные браузеры могут отображать фавиконки и в других форматах:

Как отмечалось ранее, если пиктограмма сайта будет создана не в формате ICO, то в HTML-коде необходимо явно указывать путь к файлу, иначе браузер (а также робот Яндекса) не сможет определить иконку для отображения.

Иконка сайта Favicon в формате ICO поддерживается всеми современными браузерами.

Размещение на сайте

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

Если на сайте применяется одна фавиконка, то её следует размещать в корневом каталоге сайта.

HTML-код иконки для сайта

Прописывать Favicon в HTML-коде не обязательно, если фавиконка соответствует следующим требованиям:

имя файла: favicon,
формат файла: ICO,
размер значка сайта должен быть кратным 48, т. е. не менее 48×48 px,
размещение файла: корневой каталог сайта.

В иных случаях (например, если для отдельных страниц применяются отдельные иконки) необходимо указывать тег <link> для Favicon в HTML-коде.

Какой должна быть иконка сайта?

Несмотря на свой скромный размер, Favicon является отличительным символом сайта в глазах как пользователей, так и поисковых систем, а её наличие и привлекательность играют не последнюю роль в кликабельности сниппетов поисковой выдачи Яндекса.

Привлекательность

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

Используйте уникальную фавиконку: Пользователи не любят плагиат и копирование: заимствование иконки сайта другого популярного ресурса в большинстве случаем негативно отразится на поведенческих факторах.
Фавиконка должна быть контрастной: Иконка сайта, несмотря на свой скромный размер, должна быть четкой: пользователь должен ясно видеть, что изображено на картинке, иначе он её не запомнит и не оценит.
Подумайте об использовании анимации: Браузеры Firefox и Opera отображают анимацию в иконках сайта форматов ICO и GIF. Однако не следует злоупотреблять этой возможностью. Слишком навязчивая анимация в иконке сайта может отвлекать внимание пользователей.
Учитывайте возможность применения прозрачности: Все форматы для файлов Favicon, кроме JPG, позволяют использовать эффекты прозрачности и полупрозрачности. При необходимости следует этим пользоваться.

Уникальность

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

Если есть сложности с выбором, то рассмотрите универсальные варианты, например иконки с изображением стрелки или другой четкой фигуры:

Контрастность

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

Исходное изображение

Анимация в Favicon

Некоторые браузеры могут отображать анимацию фавиконок с расширениями ico и gif:

Статичная иконка

Анимированная иконка

Создать анимированный Favicon можно с помощью графических редакторов или специализированных онлайн-сервисов.

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

При создании анимированного Favicon руководствуйтесь следующими правилами:

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

Эффект прозрачности

Прозрачный и полупрозрачный фон фавиконок становится заметен в неактивных вкладках браузера, а в остальных случаях (в активных вкладках, закладках и даже в сниппетах Яндекса) фавиконка отображается на белом или светло-сером фоне:

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

При определении прозрачности фона для иконки сайта руководствуйтесь следующими принципами:

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

Как сделать Favicon для сайта?

Существует несколько способов создания фавиконок в формате ICO и в других форматах: с помощью онлайн-генераторов, узконаправленных программ или графических редакторов. Мы рассмотрим процесс создания в онлайн-генераторе и в программе Photoshop.

Онлайн-генератор favicon.cc

В сервисе favicon.cc можно создавать фавиконки только в размере 16×16 px, поэтому рекомендуем использовать другой способ для создания значка 48×48 px (согласно информации в Справке Google).

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

Перейти к генератору favicon.cc

Возможности сервиса

Favicon.cc позволяет:

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

К условным недостаткам генератора можно отнести:

отсутствие русской версии,
экспорт файлов только в формате ICO.

Создание новой фавиконки онлайн

Чтобы сделать пиктограмму сайта в режиме онлайн, перейдите в сервис favicon.cc и следуйте инструкциям:

кликните Create New Favicon,
в области «Color Picker» в правой части окна размещены инструменты для рисования:
- палитра цветов — для определения цвета карандаша,
- Transparency — ползунок определения степени прозрачности,
- Last Used Colors — панель быстрого выбора из последних применяемых цветов,
- transparent — устанавливает прозрачный цвет («стирка»),
- move — позволяет переместить все пиксели в редакторе.
разобравшись с инструментами, приступайте к рисованию иконки для сайта в редакторе,
все изменения будут сразу отображаться в натуральную величину (16×16 px) в области «Preview»,
скачать готовую фавиконку можно по клику на Download Favicon.

Создание Favicon в онлайн-генераторе

Создание анимированной фавиконки

Генератор favicon.cc позволяет легко сделать анимированную иконку favicon.ico для сайта в режиме онлайн:

кликните Use Animation под окном редактора,
раскроются дополнительные инструменты для работы с кадрами:
- номер кадра указан прямо под редактором Favicon,
- в выпадающем списке напротив номера можно выбрать частоту смены кадра,
- Clear Frame — очистка окна редактора (текущего кадра),
- Append New Frame — добавление нового чистого кадра (откроется в редакторе),
- Copy Previous Frame — позволяет скопировать пиксели предыдущего кадра в текущий,
- Delete Frame — удаление текущего кадра,
- animate preview — активация демонстрации анимации в области «Preview»,
- в выпадающем списке напротив чекбокса можно выбрать количество циклов анимации.

Онлайн-конвертер Favicon

Функционал favicon.cc позволяет конвертировать изображения из форматов JPG, JPEG, GIF, PNG, BMP, ICO, CUR в формат ICO с преобразованием их размера:

кликните Import Image,
выберите файл для преобразования размером не более 5 Мб,
определите способ преобразования размера изображения до квадратных пропорций:
- Keep Dimensions — с сохранением пропорций исходного изображения,
- Shrink to square icon — сжимая или растягивая изображение.
кликните Upload для конвертации.

Онлайн-конвертер favicon.cc

Готовые бесплатные фавиконки

Сервис favicon.cc позволяет бесплатно просматривать, редактировать и скачивать созданные с помощью данного генератора фавиконки:

чтобы перейти к списку готовых фавиконок кликните:
- Latest Favicons — последние созданные иконки,
- Top Rated Favicons — самые популярные иконки,
кликните по названию понравившейся фавиконки,
кликните:
- Download Favicon чтобы скачать копию фавиконки,
- Edit Copy of Icon чтобы приступить к редактированию копии фавиконки.

Создание Favicon в Photoshop

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

Особенности программы

Графический редактор Adobe Photoshop не нуждается в представлении. Но как сделать иконку для сайта в «фотошопе»? Достаточно просто, если вы уже знакомы с интерфейсом программы, и достаточно сложно, если вы не имеете практики работы в Photoshop.

Не будем перечислять возможности фотошопа при работе с изображениями (это другая тематика и слишком большой объём информации), но разберём условные недостатки программы, с которыми можно столкнуться при создании Favicon:

Сложный многофункциональный интерфейс
Программа Photoshop предназначена для качественной обработки изображений (в частности фотографий). Для быстрого освоения подойдут другие узконаправленные программы по созданию фавиконок.
Нет возможности сохранять файлы в формате ICO
Но можно сохранять иконку в формате BMP и заменять расширение на ICO.
Нет возможности создавать анимационные Favicon в формате ICO
Но можно создавать анимационные фавиконки в формате GIF.

Для изображений и инструкций данного материала применялась русифицированная версия Adobe Photoshop CC 2015.

Рисование Favicon

Нарисуем иконку для сайта в программе Adobe Photoshop CC:

открываем программу,
кликаем Файл → Создать,
в появившемся окне устанавливаем высоту и ширину 16 px и жмем ОК,
для удобства рисования:
- масштабируем изображение (клавиши CTRL + + и CTRL + -),
- включаем сетку: (клавиши CTRL + '),
- настраиваем сетку: (Редактирование → Настройки → Направляющие, сетка и фрагменты…),
- используем инструменты для рисования в зависимости от необходимости (карандаш, кисть и др.).

Рисование Favicon в Photoshop

Сохранение фавиконки

Стандартный функционал Photoshop не позволяет сохранять файлы в формате ICO. Для этого можно воспользоваться простым трюком смены формата BMP на ICO:

кликаем Файл → Сохранить как,
в окне сохранения в соответствующем текстовом поле указываем имя файла favicon, а в поле «Тип файла» из выпадающего списка выбираем BMP и сохраняем,
открываем Total Commander и меняем расширение файла на ICO.

Смена формата Favicon с BMP на ICO

Создание Favicon из изображения

Если у вас есть готовое изображение (например, полноразмерный логотип), вы можете сделать из него фавиконку с помощью Photoshop:

Создание иконки для сайта из изображения в Photoshop

откройте исходное изображение в Photoshop,
измените пропорции изображения в соотношении 1×1 (форма квадрата) с помощью:
- кадрирования (клавиша C),
- изменения размера изображения (клавиши ALT + CTRL + I),
- изменения размера холста (клавиши ALT + CTRL + C),
перейдите в режим изменения размера изображения (клавиши ALT + CTRL + I):
- уменьшите изображение до 16×16 px,
- в выпадающем списке «Ресамплинг» для оптимальной четкости выберите «Бикубическая (с уменьшением)»,
- вы можете поэкспериментировать с другими вариантами ресамплинга, оценивая результат в том же окне,
сохраните файл как указано выше (клавиши ALT + S), или в другом веб-формате (клавиши ALT + CTRL + SHIFT + S).

Изменение размера и настройка четкости фавиконки

Создание анимированной Favicon

Для создания анимированной пиктограммы сайта в формате GIF:

открываем статичную фавиконку в программе,
кликаем Окно → Шкала времени,
кликаем Создать анимацию кадра,
выбираем кадры и:
- дублируем слои для новых кадров,
- редактируем слои для новых кадров,
- настраиваем отображение слоёв в кадрах,
- устанавливаем частоту смены кадров.
переходим в «Сохранить для Web» (клавиши ALT + CTRL + SHIFT + S):
- выбираем тип файла GIF,
- в разеле «Анимация» выбираем число повторов «Постоянно»,
- сохраняем картинку.

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

Перед подключением фавиконки в HTML-коде необходимо правильно создать и установить файл Favicon на сайте: по умолчанию браузеры ищут фавиконку по названию favicon.ico в корневой папке сайта. Если иконка не соответствует какому-то из требований (название, расширение и размещение файла), то следует указывать на неё в HTML-коде.

HTML-код для Favicon

Чтобы прописать иконку сайта в HTML-коде применяется тег link с атрибутами rel, type и href, размещаемый в разделе head:

<link rel="shortcut icon" type="image/x-icon" href="http://site.net/favicon.ico">

Возможные значения атрибутов тега <link> для Favicon
Атрибут	Значение	Пояснение
rel	icon	Указывает, что тег link определяет Favicon для страницы. Указанные значения равнозначны.
rel	shortcut icon
type	image/x-icon	Атрибут должен содержать MIME-тип файла Favicon. Данные значение применяются для иконок формата `ICO`.
	image/vnd.microsoft.icon
	image/gif	Для фавиконок в формате GIF.
	image/jpeg	Для фавиконок в формате JPEG.
	image/png	Для фавиконок в формате PNG.
	image/bmp	Для фавиконок в формате BMP.
	image/svg	Для фавиконок в формате SVG.
	image/apng	Для Favicon формата `APNG`.
href	[относительный URL]	Например: /favicon.ico
	[абсолютный URL]	Например: http://site.net/favicon.ico
	[Код base64]	Например: data:image/x-icon;base64,AAABAA…

Примеры подключения

Рассмотрим примеры указания на иконку сайта в HTML-коде.

HTML-тег для favicon.ico

Если иконка не подключена в HTML-коде, браузеры пытаются обнаружить её по следующему правилу:

<!-- равносильный HTML-код тега link для favicon.ico, размещенного в корне сайта: -->
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="http://site.net/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="http://site.net/favicon.ico">
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="http://site.net/favicon.ico">
<link rel="icon" type="image/x-icon" href="http://site.net/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- данным указаниям браузеры следуют по умолчанию даже при их отсутствии в HTML-коде -->

В остальных случаях необходимо включать тег link для Favicon c соответствующими значениями атрибутов.

HTML-тег для Favicon других форматов

Для подключения фавиконки в формате, отличном от ICO, указывайте соответствующий MIME-тип фавиконки в атрибуте type. Например:

<!-- HTML-код для иконки в PNG-формате: -->
<link rel="shortcut icon" type="image/png" href="http://site.net/favicon.png">

По возможности применяйте иконки в формате ICO, чтобы избежать возможных проблем с их отображением.

HTML-тег для Favicon вне корневого каталога

Для подключения фавиконки, размещенной не в корневом каталоге сайта, правильно указывайте путь к файлу в атрибуте href. Например:

<!-- HTML-код для фавиконки, расположенной не в корневой папке: -->
<link rel="shortcut icon" type="image/png" href="http://site.net/template/favicon.png">

Такой код HTML-тега link целесообразно применять на отдельных страницах сайта со своими уникальными (отличными от главной иконки сайта) фавиконками.

Отдельные страницы сайта могут иметь свою фавиконку, доступную по указанным в HTML-коде URL-адресам.

HTML-тег для фавиконок с нестандартным названием

Для подключения иконки сайта, имеющей название, отличное от favicon, не забудьте указать это в атрибуте href. Например:

<!-- HTML-код для иконки с нестандартным названием файла: -->
<link rel="shortcut icon" type="image/x-icon" href="http://site.net/ikonka.ico">

Во избежание возможных проблем с отображением используйте фавиконки с именем favicon.

HTML-тег для фавиконок в base64

Чтобы не подключать файл фавиконки к веб-странице, можно вставить в атрибут href тега link код Base64:

<!-- HTML-код для иконки в base64 -->
<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAI1nsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEREQAAABERERERAAAAEREREBEAAAARARAAEQAAABEBEAARAAAAEQEQABEAAAARARAAEQAAABEBERERAAAAEQEREREAAAARAREQAAAAABEBERAAAAAAEQEREAAAAAARAREQAAAAABEBERARAAAAEQEREREAAAAREREREQAAABEREEIAAABCAAACTkAADk5AAA5OQAAOTkAADk5AAABCQAAAQkAAA85AAAPOQAADzkAAA85AAAJOQAAAQgAAAEIAAA">

Такой способ HTML-подключения Favicon работает во всех браузерах, кроме Internet Explorer. Чтобы получить код изображения, воспользуйтесь любым декодером Base64.

иконок — скачать бесплатно в векторном формате, PNG, SVG, GIF

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картина

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картина

+ Коллекция

Картинка в картинке

+ Коллекция

Картина

+ Коллекция

Картина

+ Коллекция

Картина

+ Коллекция

Картина

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картина

+ Коллекция

Картина

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картина

+ Коллекция

Картина

+ Коллекция

Картина

+ Коллекция

Картина

+ Коллекция

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

Картина

+ Коллекция

Картина

+ Коллекция

Картина

+ Коллекция

Картина

+ Коллекция

Картинка в картинке Альтернатива

+ Коллекция

Картина

+ Коллекция

Картина

+ Коллекция

Картинка в картинке Альтернатива

+ Коллекция

Картинка в картинке Альтернатива

+ Коллекция

Картина

+ Коллекция

Картинка в картинке Альтернатива

+ Коллекция

Картина

+ Коллекция

Картинка в картинке Альтернатива

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке

+ Коллекция

Картинка в картинке Альтернатива

+ Коллекция

Картинка в картинке Альтернатива

+ Коллекция

Картинка в картинке Альтернатива

+ Коллекция

Карта Picture Elements — Home Assistant

Карточка Picture Elements — один из самых универсальных типов карточек.

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

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

Переменные конфигурации

URL-адрес изображения.
Чтобы использовать образ, размещенный локально, см. Хостинг.

camera_image строка (необязательно) Строка camera_view (необязательно, по умолчанию: авто)

«live» покажет вид в реальном времени, если включен поток .

карта state_filter (необязательно)

Заменить используемую тему для этой карты любой загруженной темой. Для получения дополнительной информации о темах см. Документацию по интерфейсу.

dark_mode_image строка (необязательно)

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

dark_mode_filter строка (необязательно)

Этот фильтр CSS используется, когда активирован темный режим.

Элементы

Элементы — это активные компоненты (значки, значки, кнопки, текст и т. Д.).), которые накладываются на изображение.

На карточку «Элементы изображения» можно добавить несколько различных типов элементов:

Государственный знак

Этот элемент создает значок, представляющий состояние объекта.

Переменные конфигурации

Подсказка к государственному значку. Установите значение null, чтобы скрыть.

карта tap_action (необязательно) карта hold_action (необязательно) double_tap_action map (необязательно)

Государственная икона

Этот элемент представляет состояние объекта с помощью значка.

Переменные конфигурации

Подсказка значка. Установите значение null, чтобы скрыть.

state_color логический (Необязательно, по умолчанию: true)

Установите значение true , чтобы значки окрашивались, когда объект активен.

карта tap_action (необязательно) карта hold_action (необязательно) double_tap_action map (необязательно)

Государственная этикетка

Этот элемент представляет состояние объекта посредством текста.

Переменные конфигурации

строка атрибута (необязательно)

Если присутствует, будет показан соответствующий атрибут вместо состояния объекта.

Текст перед состоянием объекта.

Подсказка ярлыка. Установите значение null, чтобы скрыть.

карта tap_action (необязательно) карта hold_action (необязательно) double_tap_action map (необязательно)

Кнопка вызова службы

Этот объект создает кнопку (с произвольным текстом), которую можно использовать для вызова службы.

Переменные конфигурации

service_data map (необязательно)

Значок Элемент

Этот элемент создает статический значок, не связанный с состоянием объекта.

Переменные конфигурации

Значок для отображения (например, mdi: home ).

Подсказка значка. Установите значение null, чтобы скрыть.

Объект для использования для дополнительной информации / переключения.

карта tap_action (необязательно) карта hold_action (необязательно) double_tap_action map (необязательно)

Элемент изображения

Создает элемент изображения, который накладывается на фоновое изображение.

Переменные конфигурации

Объект для использования для state_image и state_filter , а также цель для действий.

Подсказка к изображению. Установите значение null, чтобы скрыть.

карта tap_action (необязательно) карта hold_action (необязательно) double_tap_action map (необязательно) camera_image строка (необязательно) Строка camera_view (необязательно, по умолчанию: авто)

«live» покажет вид в реальном времени, если включен поток .

state_image map (необязательно) карта state_filter (необязательно) строка aspect_ratio (необязательно, по умолчанию: 50%)

Условный элемент

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

Переменные конфигурации

Список идентификаторов объектов и соответствующих состояний.

Состояние объекта равно этому значению. *

state_not строка (необязательно)

Состояние объекта не равно этому значению. *

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

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

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

Переменные конфигурации

Имя карты с префиксом custom: (например, custom: my-custom-card ).

Варианты исключений

Переменные конфигурации

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

Примечания к атрибутам элемента

Как использовать объект стиля

Размещайте и стилизуйте элементы с помощью CSS. Также возможны дополнительные / другие ключи. Обратите внимание, что стиль по умолчанию для большинства элементов включает translate (-50%, -50%), что означает, что предоставленные вами координаты будут определять положение центра элемента.

  стиль:
  # Позиционирование элемента
  осталось: 50%
  верх: 50%
  # Перезаписать цвет значков
  "- paper-item-icon-color": розовый

Как использовать state_image

Укажите другое изображение для отображения в зависимости от состояния объекта.

  state_image:
  "on": /local/living_room_on.jpg
  "выкл": /local/living_room_off.jpg

Как использовать state_filter

Укажите разные фильтры CSS

  state_filter:
  "on": яркость (110%) насыщенная (1.2)
  «выкл.»: яркость (50%), поворот оттенка (45 градусов)

Как использовать нажмите и удерживайте

Если указан параметр hold_action , это действие будет выполнено, когда объект будет нажат и удерживается полсекунды или более.

  tap_action:
  действие: переключить
hold_action:
  действие: call-service
  сервис: light.turn_on
  service_data:
    entity_id: light.bed_light
    яркость_pct: 100

Примеры

Пример значков, ярлыков и кнопок

  тип: элементы изображения
изображение: / local / floorplan.PNG
элементы:
  - тип: состояние-значок
    tap_action:
      действие: переключить
    entity: light.ceiling_lights
    стиль:
      наверху: 47%
      осталось: 42%
  - тип: состояние-значок
    tap_action:
      действие: переключить
    объект: light.kitchen_lights
    стиль:
      наверху: 30%
      осталось: 15%
  - тип: гос. этикетка
    сущность: sensor.outside_temperature
    стиль:
      наверху: 82%
      осталось: 79%
  - тип: гос. этикетка
    сущность: clim.kitchen
    атрибут: текущая_температура
    суффикс: «° C»
    стиль:
      наверху: 33%
      осталось: 15%
  - тип: сервисная кнопка
    title: Выключи свет
    стиль:
      верх: 95%
      осталось: 60%
    услуга: помощник по дому.выключать
    service_data:
      entity_id: group.all_lights
  - тип: значок
    значок: mdi: home
    tap_action:
      действие: перейти
      навигационный_путь: / lovelace / 0
    стиль:
      Топ 10%
      осталось: 10%

Пример изображений

  тип: элементы изображения
изображение: /local/floorplan.png
элементы:
  # state_image & state_filter - переключение при нажатии
  - тип: изображение
    entity: light.living_room
    tap_action:
      действие: переключить
    изображение: /local/living_room.png
    state_image:
      "выкл": / local / living_room_off.PNG
    фильтр: насыщенный (0,8)
    state_filter:
      "on": яркость (120%) насыщенная (1,2)
      стиль:
        наверху: 25%
        осталось: 75%
        ширина: 15%
  # Камера, красная рамка, прямоугольник с закругленными углами - отображать дополнительную информацию при нажатии
  - тип: изображение
    объект: camera.driveway_camera
    camera_image: camera.driveway_camera
    стиль:
      Топ-5%
      осталось: 10%
      ширина: 10%
      граница: 2 пикселя сплошной красный
      радиус границы: 10%
  # Одно изображение, state_filter - вызов службы по клику
  - тип: изображение
    сущность: media_player.гостинная
    tap_action:
      действие: call-service
      сервис: media_player.media_play_pause
      service_data:
        entity_id: media_player.living_room
    изображение: /local/television.jpg
    фильтр: яркость (5%)
    state_filter:
      играет: яркость (100%)
    стиль:
      верх: 40%
      осталось: 75%
      ширина: 5%

Условный пример

  тип: элементы изображения
изображение: /local/House.png
элементы:
  # условно показывать ярлык кнопки выключения ТВ, когда папы нет дома, а дочь дома
  - тип: условный
    условия:
      - сущность: датчик.присутствие_дочь
        состояние: "дом"
      - объект: sensor.presence_dad
        состояние: "not_home"
    элементы:
      - тип: состояние-значок
        объект: switch.tv
        tap_action:
          действие: переключить
        стиль:
          наверху: 47%
          осталось: 42%

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

Как добавить пользовательские значки и виджеты на домашний экран iPhone в iOS 14

С iOS 14, наконец, вы можете проявить творческий подход к домашнему экрану iPhone.

В течение 13 лет на домашнем экране iOS отображались ряды закругленных квадратных значков приложений, но с обновлением мобильной ОС на прошлой неделе Apple берет страницу из Android, чтобы разрешать приложениям различных форм и размеров, где бы вы ни захотели. Люди сходят с ума от нестандартного внешнего вида своих приложений и виджетов; просто проверьте хэштег # ios14homescreen в Твиттере.

Один пользователь, например, использовал MS Paint для создания забавных любительских иконок. Секрет здесь в приложении «Ярлыки». Читайте дальше, чтобы узнать, как обновить домашний экран iOS.

Пользовательские значки для вашего iPhone

Откройте приложение «Ярлыки» на iPhone и коснитесь знака «плюс» (+) в правом верхнем углу экрана, чтобы перейти на страницу «Новый ярлык». Выберите Добавить действие.

Нажмите на значок сценария. (Если у вас возникнет соблазн нажать на «Приложения», вы увидите только действия, созданные создателем приложения, такие как запуск твита, а не просто открытие приложения.) Нажмите «Открыть приложение», затем выберите трехточечный значок меню. в правом верхнем углу, чтобы отобразить подробности.Выберите «Добавить на главный экран». Нажмите на нижний, меньший значок рядом с названием вашего нового ярлыка (Новый ярлык — имя по умолчанию; коснитесь обведенного X, чтобы переименовать его).

Здесь мы подошли к сути совета: мини-меню «Редактировать значок» позволяет вам выбрать файл, фотографию из вашей фотопленки или сделать снимок с помощью камеры iPhone, чтобы заменить значок. Коснитесь Добавить на главный экран и коснитесь значка рядом с ярлыком под именем на главном экране и значком . В появившемся всплывающем окне выберите «Файл», «Фото» или «Сделать фото».Вы можете обрезать изображение, чтобы настроить то, что будет отображаться, но, к счастью, изображение не обязательно должно быть квадратным или определенного размера.

Нажмите Добавить> Готово . Вы можете увидеть мои новые значки на скриншоте, последние два на домашней странице для Acrobat и AccuWeather. (Я использовал Paint 3D в Windows 10 для значка Acrobat).

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

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

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

Как изменить значки приложений на главном экране iOS 14

Поскольку тенденция настройки домашнего экрана становится популярной после выпуска iOS 14, некоторые пользователи предпочитают добавлять пользовательские значки приложений на свой домашний экран с помощью приложения «Ярлыки» .

Пользовательский домашний экран, опубликованный @ BenZhu8. Пользовательские значки облака из icons8.

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

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

Учебное видео по виджетам и значкам приложений

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

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

Ограничения

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

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

Ярлыки

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

Запустите приложение Shortcuts на вашем iPhone или iPad.
Коснитесь значка + в правом верхнем углу экрана.
Нажмите Добавить действие .

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

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

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

Метчик Готово .Ваш ярлык создан.
Вернуться на главный экран.

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

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

Делайте и редактируйте фотографии на своем iPhone, iPad и iPod touch

Узнайте, как делать и редактировать фотографии на iPhone, iPad и iPod touch.

Откройте приложение «Камера»

Есть несколько способов открыть приложение «Камера».

Главный экран

На главном экране коснитесь приложения «Камера».

Центр управления

Откройте Центр управления, затем нажмите кнопку «Камера».

Экран блокировки

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

Сделайте фото или видео

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

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

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

Live Photos: вы можете запечатлеть жизнь такой, какая она есть — в движении и звуке. Живые фото включены по умолчанию. Нажмите кнопку «Живые фото», чтобы выключить его.

Таймер: установите устройство в надежном месте, наведите кадр и нажмите кнопку таймера.Выберите обратный отсчет 3 или 10 секунд, нажмите кнопку спуска затвора и войдите в кадр.

Фронтальная камера: чтобы сделать селфи с помощью фронтальной камеры, нажмите кнопку фронтальной камеры, найдите подходящий ракурс, затем нажмите кнопку спуска затвора. На iPhone 6s и новее вы можете использовать главный экран в качестве вспышки для селфи.

Серийная съемка: пытаетесь сделать снимок, но объект не остается неподвижным? Попробуйте режим серийной съемки.Просто нажмите и удерживайте кнопку спуска затвора. В режиме серийной съемки можно делать несколько снимков одновременно, так что у вас есть выбор из целого ряда снимков. На iPhone 11 и новее сдвиньте кнопку спуска затвора влево и удерживайте ее, чтобы сделать серию фотографий, затем отпустите, чтобы остановить.

На iPhone 7 Plus, iPhone 8 Plus или iPhone X и более поздних версиях коснитесь 1x для более качественного увеличения с большого расстояния. Если вы хотите увеличить масштаб более чем в 2 раза или точно управлять изображением, коснитесь и удерживайте 1x или 2x, чтобы получить ползунок, позволяющий полностью увеличить изображение до 10x.На iPhone 11 и новее, iPad Pro 12,9 дюйма (4-го поколения) и iPad Pro 11 дюймов (2-го поколения) уменьшите масштаб до 0,5x с помощью сверхширокоугольной камеры.

Редактировать фото или видео

Сделав фото или видео, откройте его в приложении «Фото» и нажмите «Изменить». Затем вы можете настроить кадрирование, угол, свет, добавить фильтр и многое другое. Выберите настройку, например «Яркость» или «Насыщенность», и проведите пальцем по ней, чтобы изменить силу и интенсивность.Если вам не нравится, как выглядят ваши изменения, нажмите «Отмена» и вернитесь к исходному состоянию.

Регулировка света и цвета

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

Применить фильтры

Коснитесь одного из фотофильтров, чтобы придать фотографии другой цветовой эффект, например «Яркий» или «Драматический». Или попробуйте классические черно-белые образы, такие как Mono и Silvertone.

Обрезать и выпрямить

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

Дата публикации: 2 марта 2021 г.

женщин в картинке — Icon Books

Женщины, искусство и сила взгляда

Кэтрин МакКормак

Поделиться этой книгой

‘Ужасно умный … В этом грандиозном путешествии по западной визуальной культуре вы не могли и мечтать лучшего гида, чем МакКормак, историк искусства с мировоззрением, который предлагает новые воодушевляющие линзы для взгляда «за пределы обмена видением и тем, чтобы быть увиденным». .Бриджит Куинн, автор книги Широкие мазки: 15 женщин, которые творили искусство и творили историю (в этом порядке)

«Основное чтение… захватывающее, вдохновляющее, красиво написанное и очень заставляющее задуматься». Д-р Хелен Гёррилл, автор книги « Женщины не умеют рисовать»

Смелое переосмысление женщин в искусстве — от «старых мастеров» до постов влиятельных лиц в Instagram

Безупречный пин-ап, девица в беде, святая мать, роковая женщина…

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

В этой страстной книге историк искусства Кэтрин МакКормак просит нас еще раз взглянуть на то, что эти изображения сказали нам ценить, открывая наши самые любимые изображения — от изображений Тициана и Боттичелли до Пикассо и прерафаэлитов. Она также показывает нам, как женщины-художницы — от Берты Моризо до Бейонсе, от Джуди Чикаго до Кары Уокер — предложили нам новые способы осмысления женской идентичности, сексуальности, расы и власти.

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

F ull: «Маккормак преуспевает в почти невозможной задаче обсуждения как изображения женщин на протяжении всей истории искусства, так и того, как женщины-художники оспаривали эти ориентированные на мужчин образы. Она пишет красиво и доступным голосом, легко переходя от Венеры Рокби к нарциссической одержимости современной культурой селфи в социальных сетях. Широкому кругу читателей принесет пользу ее синтез тысячелетнего искусства о женском теле и о том, как это повлияло и закрыло наше понимание женского опыта.Кэти Баттиста, автор книги New York New Wave: The Legacy of Feminist Art in Emerging Practices

«Я рад, что эта книга была написана, потому что мне казалось, что когда я ее читал, мне казалось, что чешуя падает с моих глаз. Женщины будут по-прежнему объективироваться в искусстве и поп-культуре, но книга проливает много гневного света на то, как мы сюда попали ». The Herald

Доктор Кэтрин МакКормак — историк искусства и независимый куратор. Она является основателем и руководителем учебной программы «Женщины и искусство» в Институте искусств Sotheby’s, где преподает искусство, расу и пол.Она является автором The Art of Looking Up (2019), а ее письменные работы представлены в The Architectural Review , Independent и Harper’s Bazaar , а также в многочисленных эссе каталога выставок по историческому и современному искусству.

«Я рад, что эта книга была написана, потому что мне казалось, что когда я ее читал, мне казалось, что чешуя падает с моих глаз. Женщины по-прежнему будут объективироваться в искусстве и популярной культуре, но книга проливает много гневного света на то, как мы сюда попали.’ Вестник

«Маккормак преуспевает в почти невозможной задаче обсуждения как изображения женщин на протяжении всей истории искусства, так и того, как женщины-художники оспаривали эти ориентированные на мужчин образы. Она пишет красиво и доступным голосом, легко переходя от Венеры Рокби к нарциссической одержимости современной культурой селфи в социальных сетях.Широкому кругу читателей принесет пользу ее синтез тысячелетнего искусства о женском теле и о том, как это повлияло и закрыло наше понимание женского опыта ». Кэти Баттиста , автор книги New York New Wave: The Legacy of Феминистское искусство в новых практиках

«Я любил ужасно умную, а иногда и резкую книгу Кэтрин МакКормак« Женщины на картинке ». В этом грандиозном путешествии по западной визуальной культуре от Боттичелли до Бейонсе, от добродетельных матерей до чудовищных женщин, от Лилит до Я люблю Дика , вы не могли и мечтать лучшего гида, чем Маккормак, историк искусства с мировоззрением, который предлагает новые вдохновляющие идеи. объектив для поиска «за пределами обмена видением и тем, что его видят».’

Бриджит Куинн, автор книги «Широкие мазки: 15 женщин, которые творили искусство и творили историю» (в том порядке

Настройка вашего профиля — Справочный центр Zoom

Обзор

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

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

Эта статья охватывает:

Доступ к вашему профилю

Войдите на веб-портал Zoom
В меню навигации щелкните Профиль .
Вы можете просматривать и редактировать следующие настройки:

Информация о профиле и раздел изображений

Изображение профиля : Щелкните изображение профиля, чтобы добавить или изменить его. Вы также можете настроить область кадрирования на текущем изображении или загрузить новое. Вы можете удалить изображение своего профиля, нажав Удалить .

Информация о профиле : Нажмите Изменить справа, чтобы обновить информацию о своем профиле:

Имя и Фамилия
Отображаемое имя : это имя, которое отображается в вашем профиле на платформе Zoom, например в карточке профиля, а также на собраниях и вебинарах
Местоимения : введите свои местоимения и выберите, хотите ли вы делиться ими на собраниях и вебинарах. Для этой функции требуется Zoom версии 5.7.0 или выше.
Отдел
Менеджер
Должность
Компания
Расположение

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

Персональный раздел

Телефон : добавьте до 3 внешних телефонных номеров в свой профиль.Чтобы добавить номер телефона, нажмите Добавить номер телефона . При добавлении внешнего номера Zoom предложит вам подтвердить его, прежде чем он появится в вашем профиле. Эти номера телефонов будут отображаться на карточке вашего профиля в настольном клиенте и мобильном приложении Zoom. Пользователи могут просмотреть карточку вашего профиля, наведя указатель мыши на изображение вашего профиля или нажав на него.

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

Zoom Phone: Если у вас есть лицензия Zoom Phone, в этом разделе отображаются ваши прямые номера телефонов (если он у вас назначен), номер компании и добавочный номер.

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

Формат даты : изменение формата даты для вашего региона.

Язык : изменение языка по умолчанию для веб-портала Zoom.

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

Раздел заседаний

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

Персональная ссылка: если у вас есть платная лицензия для учетной записи Business или Education, вы можете установить персональную ссылку. Нажмите «Настроить» справа, чтобы установить или изменить существующую личную ссылку.

Host Key : Щелкните значок закрытого глаза, чтобы просмотреть свой ключ хоста, и Edit , чтобы изменить ключ хоста.

Раздел счета

Лицензия: отображает тип лицензии и надстройки, назначенные вам. Щелкните вопросительный знак (?), Чтобы узнать больше о каждой лицензии или функции.Если у вас есть лицензия Zoom Phone, вы увидите свой пакет звонков. В этом разделе также отображается количество ваших встреч и количество вебинаров (если применимо). Чтобы изменить это, вам нужно будет приобрести и назначить разные лицензии.

Счет № : Номер вашего счета указан под вашим именем. Вы можете отметить это, если позвоните в службу поддержки Zoom за помощью, так как это поможет нам быстрее найти вашу учетную запись.

Раздел входа

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

Пароль для входа: нажмите «Изменить», чтобы изменить пароль, используемый для входа в систему. Этот параметр недоступен, если вы входите в систему с использованием системы единого входа.

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

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

Прочие разделы

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

Интеграция календаря и контактов : настройка или изменение интеграции календаря и контактов с Google, Office365 или Exchange.

Транзитные данные : выберите регионы центра обработки данных для проведения встреч и вебинаров.

Картинка иконка: Пакет значков Image | Monochrome

Page not found (404)

404 Icon by Laura Reen

Иконки для веб-дизайна — предназначение и правила использования

Зачем дизайнеры используют иконки

Как с помощью иконок повысить конверсию сайта

1. Привлечь внимание к преимуществам компании

2. Расскажите, как сделать заказ или как работает компания

3. Расскажите о товаре с помощью изображений

4. Выделяйте акции и специальные предложения, а также нужные категории товаров

Какие иконки используют в дизайне

Линейные

Иллюстрации

Объемные

Простые элементы

Шрифтовые иконки

Примеры использования иконок в веб-дизайне

Иконки для навигации

Информационные иконки

Социальные доказательства

Призыв к действию

Разделы каталогов

Социальные кнопки

Фильтры

5 советов по созданию дизайна иконок

1. Иконки должны быть узнаваемыми и ассоциироваться с окружающим текстом

2. Дополняйте иконку текстом

3. Дизайн иконок должен быть похож между собой

4. Прозрачный фон облегчает восприятие

5. Используйте векторную графику, если это возможно

Создайте иконки для сторис Instagram онлайн

Достигайте желаемого результата, экономя время

Используйте лучшие картинки для Сторис

Создавайте картинки для Сторис всего блока «Актуальное»

Важное обновление гайдлайнов для иконок Google Play

Создание ресурсов

Атрибуты

Определение размеров

Тени

Радиус закругления

Бейджи (наклейки)

Адаптация бренда

Режим совместимости

Скачайте шаблоны

Значение значков статуса на iPhone

Как рисовать перекрашиваемые иконки — Турбомилк

Как рисовать перекрашиваемые иконки

Связанные записи

Favicon (иконка сайта) | SEO-портал

Зачем нужна иконка Favicon для сайта?

Иконка сайта в браузере

Иконка сайта во вкладках браузера

Иконка сайта в закладках браузера

Иконка сайта перед адресной строкой браузера

Значение иконки сайта в SEO

Иконка сайта и ПС Яндекс

Favicon в сниппетах Яндекса

Предупреждение об отсутствии файла

Проверка наличия Favicon в индексе

Проверка Favicon на соответствие требованиям

Требования к иконке сайта

Название файла

Геометрический размер

Формат файла

Размещение на сайте

HTML-код иконки для сайта

Какой должна быть иконка сайта?

Привлекательность

Уникальность

Контрастность

Анимация в Favicon

Эффект прозрачности

Как сделать Favicon для сайта?

Онлайн-генератор favicon.cc

Возможности сервиса

Создание новой фавиконки онлайн

Создание анимированной фавиконки

Онлайн-конвертер Favicon

Готовые бесплатные фавиконки

Создание Favicon в Photoshop