Как сделать пиктограмму иконку логотип сайта
Пиктограмма (или иконка) сайта, которая показывается рядом с вашим сайтом в результатах поиска Яндекса, чаще называется Favicon (фавикон) по имени картинки,которая всегда имеет это название.Также пиктограмма появляется рядом с названием сайта в панели вкладок и в «Закладках».Основное назначение пиктограммы заключается в том чтобы выделить его от других ,сделать оригинальным,привлечь внимание.
Сразу хочу опровергнуть одно заблуждение.У некоторых пользователей Интернета бытует мнение (сам слышал такое утверждение) что если у сайта нет иконки значит он какой-то «левый» и лучше его не открывать а то можно подхватить вирус»!!!. Это абсолютно неправильно и вам это скажет любой разработчик сайта .Сайты с иконкой или без нее ничем не отличаются друг от друга в смысле «авторитетности»,»правильности», или «безопасности».Тем более что многие поисковые системы ее не показывают.
Эту пиктограмму ставит на свой сайт его разработчик и только от его желания зависит будет показываться пиктограмма или нет.
Некоторые создатели сайтов не ставят или неправильно вводят код иконки на свой сайт поэтому она и не показывается.Распространенные браузеры ее поддерживают и отображают в панели закладок, а многие поисковые системы ее не показывают в выдаче результатов запроса.
Изображение пиктограммы сайта в результате выдачи запросов поисковых систем будет отображаться только после посещения сайта роботом а на это уходит от нескольких недель до 2-3 месяцев. Если пиктограмма не показывается, можно проверить сервисом пройдя по ссылке http://www.htmlkit.com/go/favicon/validator/ Так что пиктограмма это просто картинка к вашему сайту и ничего более.
А теперь о том как создать Favicon.Стандартный, размер иконки 16×16 ,формат ico, но возможны и другие форматы: gif, jpeg, png и bmp. Иконку можно скачать, в Интернете их большой выбор,или нарисовать самому ,но лучше и надежнее сделать это в специальных программах таких как например Favicon.ru .В этой программе вы можете заказать,сделать из готового изображения и сами нарисовать.
Нарисовав изображение ,нажмите кнопку «скачать favicon» и в открывшемся окне нажать «Скачать».Сохраните полученный файл favicon.ico в корневую папку вашего сайта.Корневая папка это там где находится главная страница вашего сайта index.html,можно и в другое место ,тогда надо будет прописать путь к favicon.ico .
Теперь надо ввести код иконки в главную страницу сайта.Внутри тега <head></head> html-кода главной страницы сайта введите:
<link rel=»icon» href=»favicon.ico» type=»image/x-icon»>
Этот код пишут когда главная страница и favicon.ico находятся в одной папке ,если favicon.ico находится в другой, то пропишите путь в поле «href» вот так:
<link rel=»shortcut icon» href=»путь к файлу/favicon.ico» type=»image/x-icon»>
Теперь наберитесь терпения и ждите когда пиктограмма появится рядом с вашим сайтом,я ждал чуть более 2 месяцев.
Создание пиктограмм — Технология — Уроки
Урок технологии
Тема: Работа с программой Paint.
Создание пиктограмм.
План:
Ребята, перед тем как начать работать с программой Paint, посмотри видео материал и узнай, что же это за программа, и как с ней работать.
Выполни практическую работу в программе Paint (для запуска программы нажми на Пуск все программы стандартные Paint).
Создай пиктограмму. (предлагаю 2 варианта изображения, выбери, который понравился тебе и выполни его).
Пиктограмма – стилизованное и легко узнаваемое графическое изображение, используемое в качестве символа.
Пиктограммы, которые окружают нас постоянно, помогают быстро ориентироваться, принимать решения, выполнять определённые действия.
Какие пиктограммы бывают? информационные, медицинские, олимпийские, дорожные знаки, смайлики и т.д.
Информационные пиктограммы
Спортивные пиктограммы
С развитием письменности пиктограммы не исчезают, просто меняется их назначение.
Пиктограммы в современном мире
Рассмотрим подробнее, что такое пиктограммы и для чего они предназначены сейчас. Это эмблемы различных международных конференций, олимпиад, изображения на государственных флагах. Вспомните также рисунки в детских журналах, которые составляют целые сериалы, посвященные похождениям одного героя.
Появление мобильных телефонов также привлекло к использованию ряда пиктограмм, посвященных использованию этого средства связи. Даже пожилые люди легко осваивают меню, оформленное в виде пиктограмм. Попадая в лечебные учреждения, пользователи видят пиктограмму:
Пиктограмма — это условный графический знак.
Дорожные знаки
“Водители! Будьте осторожны: здесь дорогу могут переходить дети!” Такое предупреждение можно выразить по-разному.
Пиктограммы на экране компьютера
Такого количества пиктограмм, как на экране компьютера, нет нигде! Компьютер — инструмент современной информатики, науки, которую вы начинаете изучать.
Значит, нужно обязательно научиться ориентироваться в компьютерных пиктограммах.
На Рабочем столе компьютера расположены значки программ и документов. Эти маленькие схематичные рисунки, конечно, являются пиктограммами.
Одна из программ на Рабочем столе называется Paint (пэйнт). Тому, кто не знает английский, трудно понять назначение этой программы по ее названию. Но стоит взглянуть на значок-пиктограмму, как сразу пропадают все сомнения: эта п рограмма помогает создавать компьютерные рисунки.
Назначение этой программы понятно даже тому, кто не умеет читать по-русски.
Э тим значком обозначают место, куда помещают ненужные документы и программы.
Задание:
Создайте новый файл
Выберите Вид — Линии сетки
Увеличьте масштаб до 800%
Выберите инструмент карандаш
Узор №1
№ п/п | Схема | Действия |
1 | Создать пиктограмму | |
2 | С помошью преобразований (копирования, отражения) получить узор из пиктограммы. | |
3 | Копированием узора получить горизонтальную рамку на листе. |
Узор №2
№ п/п | Схема | Действия |
1 | Создать пиктограмму | |
2 | С помощью преобразований (копирования, отражения) получить узор из пиктограммы. | |
3 | Копированием узора получить горизонтальную рамку на листе. |
Дизайн иконок для чайников, часть II: как создать набор иконок с нуля | by Marlén Holden
Как я уже говорил в своем предыдущем посте, меня попросили создать с нуля набор иконок для Plugsurfing, ведущего в Европе независимого сервиса зарядки электромобилей.
В этом посте я попытаюсь объяснить свой процесс создания набора иконок, подходящего для бренда. Если вы хотите узнать больше о фоне, вы можете прочитать о том, почему вы должны рассмотреть возможность создания пользовательского набора значков здесь.
Шаг 1: Исследования и вдохновение
Давайте сразу к делу. Цель этого шага — найти правильный стиль иконки и индивидуальность для бренда. Является ли бренд, например, дружелюбным, стильным или эксцентричным? В Plugsurfing говорят, что это «Альянс электромобилей, который трансформирует зарядку» , и что «Plugsurfing упрощает зарядку и облегчает вождение на электричестве» . Другими словами, они увлечены, целеустремленны и вносят свой вклад в облегчение ваших повседневных задач.
К сожалению, процесс редизайна бренда находился на очень ранней стадии, когда я начал создавать значки, но мы знали, что логотип изменится, и что и логотип, и остальная часть дизайна, вероятно, будут вдохновлены волнами. (Plugsurfing) или мосты (между клиентами, сетями и т.
д.), энергетика и транспорт. Оглядываясь назад, я могу сказать, что рискованно выбирать стиль значка на столь раннем этапе, поэтому, если у вас есть возможность подождать, пока не появятся другие элементы бренда или рекомендации, это большое преимущество.
Незадолго до того, как я начал процесс дизайна, мы остановились на Overpass в качестве нового шрифта. Он основан на шрифте вывесок Highway Gothic, разработанном для Федерального управления автомобильных дорог США. Так что намек на классику, но современный и с довольно большой индивидуальностью. Мы чувствовали, что это очень подходит для бренда Plugsurfing.
Overpass был новым фирменным шрифтом.Plugsurfing уже имел несколько прекрасно созданных детализированных иконок, которые, как нам показалось, хорошо подходили, но они были слишком сложными для иконок размером 24 пикселя для приложения. Однако мы хотели сохранить художественную и игривую экспрессию.
Имея это в виду, эти значки требовали чего-то игривого и дружелюбного, но в то же время элегантного и простого.
Как вы можете получить все это в одном наборе иконок и с чего начать?
Сначала я нашел несколько примеров от других брендов и приложений и проанализировал некоторые из них. Норвежский продуктовый интернет-магазин Oda обладал хорошим сочетанием характеристик, которые нам нравились и которые мы хотели перенять: стильный и артистичный, но в то же время дружелюбный и игривый.
Скриншоты онлайн-приложения для продуктовых магазинов OdaШаг 2. Наброски, тестирование и проверка
Острые края и стильный стиль часто используются для более высокотехнологичных брендов. Закругленные формы, колпачки и углы кажутся более дружелюбными и органичными, что лучше всего подходит, исходя из того, что мы знали о ребрендинге на данный момент. Толщина штриха, очевидно, также сильно влияет на выражение лица. Для согласованности важно, чтобы вы сохраняли одинаковую толщину обводки, радиус границы и размеры во всем наборе значков.
Я использовал существующие значки Plugsurfing и некоторые другие наборы значков для вдохновения и сделал несколько набросков вручную.
После того, как у меня появилось некоторое представление о стиле и дальнейших действиях, мне пришлось разработать, повторить и протестировать несколько иконок, чтобы убедиться, что они будут работать.
Значки выше, вероятно, кажутся довольно случайным выбором, но я хотел проверить:
- некоторые общие или простые, которые будут просматриваться много: Профиль (1), Главная ( 2), Меню (6)
- некоторые специфические для бизнеса, которые будут часто просматриваться: Моя позиция (3) и Местоположение (8)
- некоторые сложные: Корзина (4), Поддержка (7), Ваучер (5)
Прежде чем перейти к остальным значкам, я убедился, что эти восемь значков будут соответствовать дизайну приложения и шрифту Overpass, поскольку они часто будут стоять вместе. Это также был хороший момент, чтобы представить его другим дизайнерам и заинтересованным сторонам, чтобы убедиться, что мы на правильном пути.
Шаг 3: Создайте направляющие линии и сетку
Оказалось, всем понравилось.
Ура! Следующим шагом было создание сетки и некоторых рекомендаций в качестве основы для всех значков пользовательского интерфейса. Если вы создаете большой набор иконок, сетка необходима для обеспечения согласованности. Но помните, что сетка не должна ставить под угрозу четкость или баланс, она просто помогает вам сделать сет связным. Одно хорошее эмпирическое правило заключается в том, что все части сетки должны иметь примерно одинаковую площадь поверхности.
Я также считаю полезным записывать «правила» для набора значков по ходу дела. Это можно использовать в качестве руководства позже, что поможет вам запомнить детали в следующий раз, когда вы будете создавать новый значок, или если другие дизайнеры будут создавать значки для того же набора. В рекомендации хорошо включать толщину обводки, радиус угла, любые уникальные визуальные особенности и так далее.
Выводы после фазы исследования и эскизов заключались в том, что значки пользовательского интерфейса Plugsurfing должны быть:
- Легкими и сделанными со вкусом, артистичными и игривыми
- Округлые, органические формы
- Плоский / вид спереди (без размеров или глубины)
- 1 пиксельные обводки, закругленные концы и радиус угла 3 пикселя
Шаг 4: Начинается настоящее веселье
Приятно видеть, насколько хорошо основа, которую вы создали с помощью направляющих и сеток, работает на практике.
Результатом является последовательный набор иконок с одинаковым визуальным весом. Чистое и простое, но дружелюбное и игривое выражение.
Обратите внимание на прикосновение гаража к значку дома. Я думаю, это так здорово, что Plugsurfing выбрал персонализированный набор иконок.
Вам интересно, почему этот пост называется Часть II? Вы можете прочитать часть I здесь: Дизайн иконок для чайников: как добавить новые иконки в уже совершенную библиотеку иконок
Как мы создаем собственные наборы иконок вы читаете этот пост в блоге?), вы каждый день взаимодействуете с иконками. Иконки — это условное обозначение, которое помогает людям ориентироваться на веб-сайтах, в приложениях, в программном обеспечении и во множестве других областей нашей жизни.
Существует множество готовых наборов значков, доступных для лицензирования, но иногда для проекта требуется собственный набор значков, демонстрирующий уникальную визуальную идентичность бренда. Недавно мы создали специальный набор из семи иконок для клиента из сферы финансовых услуг.
Вот заглянуть за кулисы нашего процесса.
Задачи
Для этого конкретного проекта нам нужно было решить несколько основных задач:
Цвет
Нам было поручено создать значки для продукта, который наш клиент будет использовать для разных клиентов. Это означает, что значки должны работать с тысячами различных брендов, используя тысячи различных цветовых палитр.
Теоретически вы можете применить любой цвет к любому значку, но в действительности выбор некоторых цветов может привести к проблемам с доступностью для пользователей с дальтонизмом, слабым зрением или другими нарушениями зрения. Важно, чтобы любой продукт был разработан с цветовым контрастом, который позволяет любому воспринимать и понимать, что передают текст, значки или изображения. Чтобы решить эту проблему, мы создали цветовую палитру по умолчанию, которая соответствует рекомендуемым коэффициентам доступности, и задокументировали строгие правила применения цветов, чтобы цветовой контраст оставался контролируемым.
Адаптивные значки
Еще одна проблема, с которой мы столкнулись, заключалась в создании набора значков, который хорошо подходит для настольных компьютеров и мобильных устройств. В мобильной версии каждая иконка будет примерно в ⅙ меньше, чем на десктопе, но она должна передавать то же значение. Мобильные значки, как правило, менее детализированы, чем значки для настольных компьютеров, поэтому нам пришлось думать о формах, которые были бы достаточно четкими, чтобы потерять много деталей, но при этом оставаться эффективными.
Наш процесс создания иконок
Исследование
На этапе исследования мы определили наши цели и проблемы, а также определили, что мы пытаемся представить с помощью иконографии.
Затем мы провели анализ ландшафта, используя такие ресурсы, как Noun Project и Dribbble. Dribbble сейчас очень модный ресурс, что привело к тому, что многие элементы дизайна кажутся «обведенными» — иногда кажется, что все плоское с цветом и обводкой.
Мы хотели избежать «дробления», но было приятно изучить несколько разных подходов к применению цвета. Мы также рассмотрели другие финансовые учреждения, чтобы узнать, как пользователи ожидают, что значки будут выглядеть в финансовом пространстве.
Набросок
После фазы исследования мы начали набрасывать наши идеи, используя Procreate и Sidecar. На этапе наброска мы начали думать о том, как создать значки одного размера, с одинаковыми деталями и с использованием одинаковых штрихов, чтобы они были единым целым. Вместе мы создали множество эскизов, которые в конечном итоге превратились в 25 лучших претендентов.
Некоторые из наших оригинальных набросковОцифровка
Выйдя из этапа создания набросков, мы экспортировали 25 лучших набросков и поместили их в Adobe Illustrator для оцифровки. Тогда нам нужно было более точно подумать о размере и обводке, и что убрать или добавить к каждой иконке, чтобы они были похожи. С пятью вариантами для каждого значка было много сужения, но сплоченный набор значков должен соответствовать единым правилам: вес линии, стиль угла, индивидуальность.
Важно потратить время, необходимое для того, чтобы сделать его идеальным.
Тестирование
После того, как наши 25 вариантов были оцифрованы и отшлифованы, у нас появились некоторые идеи о наших фаворитах. Но на тот момент мы так много работали с этими иконками, что поняли, что нам нужен свежий взгляд. Мы создали небольшой опрос, чтобы собрать отзывы коллег, которые не работали над проектом, задав такие вопросы, как «если бы вы увидели этот значок и ничего не знали о нашем продукте, что этот значок сообщает вам?»
Все реагировали немного по-разному. Некоторые люди были очень прямолинейны в своих отзывах, а другие использовали расплывчатые прилагательные. Вклад от не-дизайнеров очень ценен, потому что дизайнеры могут критически взглянуть на значки, но реальные пользователи продукта могут не иметь такого же уровня внимания к деталям. Был один вариант значка, который, по мнению наших тестировщиков, был похож на детскую бутылочку — это был , который предполагал, что должен выглядеть как монета, опускаемая в банку.
Вот такие откровенные отзывы нам нужно знать!
Тестирование и отзывы помогли нам сузить количество вариантов до двух вариантов для каждого значка. В зависимости от проекта мы иногда повторяем эту фазу с набором потенциальных пользователей продукта или других заинтересованных сторон, пока не будем уверены, что наши проекты были тщательно протестированы.
Уточнение
Затем, как команда дизайнеров, мы сузили список до семи окончательных иконок — исходных пяти и еще двух, которые наш клиент запросил в ходе проекта, — чтобы убедиться, что они представляют сплоченную семью. Добавление двух дополнительных значков на полпути было на самом деле очень полезным, потому что это дало нам возможность оценить, как правила дизайна могут быть применены к будущим потребностям в значках по мере развития продукта с течением времени.
Последний набор иконок!Усиление визуального языка
После того, как наши значки были готовы и одобрены клиентом, мы смогли изучить различные способы их использования.
