Как создать иконку сайта


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

Что такое Favicon?

Favicon для сайта – это одна из его отличительных особенностей. Это еще один шаг к созданию и использованию фирменного стиля. Favicon, говоря простыми словами, это иконка (изображение), которое выводится в браузере перед адресной строкой. Также favicon используется при добавлении страницы в закладки. Согласитесь, пользователю удобнее будет найти ваш сайт в закладках, если там будет изображена ваша «фирменная» иконка.

Думаю, каждый из вас замечал favicon, посещая любимые сайты. Выглядит это следующим образом (в браузере Google Chrome):

И для сравнения, отображение иконки в браузере Internet Explorer:

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

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

Рисуем Favicon с помощью веб-сервиса

Самый простой способ сделать фавикон – воспользоваться сервисом www.favicon.cc. Выглядит он так:

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

Создаем Favicon из готового изображения

Для того, чтобы конвертировать готовую иконку в формате .png (который, кстати, тоже может использоваться для задания favicon), можно воспользоваться другим веб-сервисом: favicon.ru.

Устанавливаем Favicon на сайт

Когда иконка будет готова, вы сможете ее скачать в формате .ico. Чтобы добавить favicon на сайт, поместите файл favicon.ico в корневой каталог сайта и добавьте между тегами <head></head> строчку:

<link rel="icon" href="favicon.ico"; type="image/x-icon" />

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

Также рекомендуется добавлять строку:

<link rel="shortcut icon" href="favicon.ico"; type="image/x-icon" />

(для Internet Explorer).

Размер фавикона может быть 16x16, 32x32.

Полезное замечание

Файл иконки может иметь не только расширение .ico, но и .png, причем рекомендуется использовать последний вариант. Это связано с тем, что устройства с высоким разрешением дисплея (например, iPhone, iPad, iPod) по умолчанию имеют размер иконки 57x57. Для этого лучше делать второй вариант иконки (в более высоком разрешении) и прописывать дополнительно строку:

<link rel="apple-touch-icon" href="apple-favicon.png" />

Но стоит отметить, что в таком случае иконка будет скруглена по углам и на нее будет наложен блик (это делается автоматически самим устройством). Для того, чтобы этого избежать, вместо apple-touch-icon нужно написать apple-touch-icon-precomposed.

html - Как сделать иконку для своего сайта?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
.

Как создать веб-иконку в Adobe Illustrator

Adobe Illustrator • Уроки Андрей Штефан • 28 июля 2014 г. • 11 минут ПРОЧИТАТЬ

Вы когда-нибудь хотели создать значок для Интернета? Сегодня твой день. В этом руководстве вы узнаете, как создавать веб-иконки.

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

Для этого урока я взял гипотетический веб-сайт электронной книги (назовем его Libro), который может использовать некоторые визуальные элементы, чтобы пользователь, просматривающий его, мог различать различные разделы, просто глядя на значки. Поскольку самая популярная программа для чтения электронных книг производится Amazon, мы будем использовать Kindle в качестве визуального представления портативности устройства и создадим из него векторную иконку.

Шаг 1 - Проведите исследование

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

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

Лучшие ресурсы для этого:

Конструктор шаблонов электронной почты в Интернете

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

Попробуйте бесплатноДругие продукты

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

Шаг 2 - Начать рисование

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

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

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

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

Шаг 3 - Запуск Illustrator

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

3.1. Создать новый документ

Предполагая, что у вас уже есть Illustrator, работающий в фоновом режиме, создайте новый документ, нажав Ctrl + n (или + n , если вы используете Mac) или перейдя в FILE> New… и давайте рассмотрим некоторые из настроек , которые появятся во всплывающем окне.

Quick Tip : узнайте больше о различиях между RGB и CMYK в этом официальном руководстве Adobe (которое хорошо объясняет ключевые различия, о которых вам необходимо знать).

  1. Экран (72 ppi), - значение по умолчанию. Это стандартный вариант, который вы бы выбрали, если бы создавали дизайн для Интернета (что в нашем случае так и есть).
  2. Средний (150 пикселей на дюйм).
  3. High (300 пикселей на дюйм). Две последние опции предназначены для графики, которая будет использоваться для печати.

Quick Tip : Теперь, когда вы создали иллюстрацию и предположим, что ваш дизайн использует эффекты из меню Stylize , такие как Drop Shadows , Outer Glow или Inner Glow , вам необходимо убедиться, что качественный. Печатная версия должна выглядеть такой же гладкой и чистой, как и версия на вашем мониторе.Для этого выберите Effect> Document Raster Effects Settings и выберите более высокое разрешение из флажков - вы также можете ввести собственное значение в поле Other .

Хотя мы собираемся разрабатывать дизайн для Интернета ( 72 ppi ), в конечном итоге арт будет в формате png или jpeg , которые представляют собой растровых изображений . Если вы зайдете на сайт Adobe, то найдете еще один совет, в котором основное внимание уделяется влиянию ppi на штрихи дизайна:

«Четкий вид выровненных по пикселям штрихов сохраняется на растровом выходе только с разрешением 72 ppi.Для других разрешений высока вероятность того, что такие штрихи приведут к результатам сглаживания ».

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

3.2. Получение основных форм

Сначала создайте круг , который будет служить фоном для всего дизайна. Используя инструмент Ellipse Tool ( L), щелкните левой кнопкой мыши в любом месте Illustrator, чтобы открыть окно настроек Rounded Rectangle Settings Box и установите Width и Height круга. Введите 110 пикселей для и нажмите ОК. Выделите только что созданный объект и удалите цвет с обводки и придайте ему красивую светло-красноватую заливку ( HEX = ff7171 или R = 255, G = 113, B = 113 ).

Возьмите инструмент Rounded Rectangle Tool (находится на левой панели инструментов, там же, что и инструмент Rectangle Tool ), щелкните левой кнопкой мыши на монтажной области и создайте фигуру 55 x 80px с радиусом угла 5px . Используя опции Align ( Window> Align ), выберите новый объект и по горизонтали, и по вертикали, выровняйте его по монтажной области. Заливка темно-серым цветом # 606060 ( R = 96, G = 96, B = 96 )

Совет : Если вы только что настроили панель «Выравнивание», к выбранным объектам будет применено выравнивание по умолчанию.Чтобы выровнять по монтажной области, посмотрите в правый нижний угол, нажмите « Align To» и выберите Align to Artboard.

Следуя тем же шагам, что и раньше, создайте новый прямоугольник с закругленными углами (ширина = 39 пикселей, высота = 64 пикселя, радиус угла = 1 пиксель ). Выберите новый объект, выровняйте его по горизонтали с монтажной областью и переместите к верхней части большего прямоугольника.

Выделив объект, измените его цвет заливки на более светлый серый D3D3D3 ( R = 211, G = 211, B = 211 ).

Это основная рамка и экран, которые будут представлять Kindle.

3.3 Кнопки наслоения

Следующий шаг касается кнопок . Выберите инструмент Rounded rectangle tool и создайте объект 5 x 5px с радиусом закругления 2px . Выровняйте его по горизонтали с другими частями и переместите в середину пространства между нижней стороной экрана и нижней стороной тела (вы также можете сделать это, перетащив и создав прямоугольник и выровняв по вертикали кнопку с ним. ).Назначьте цвет заливки ( 474747, R = 71, G = 71, B = 71 ), затем скопируйте его и вставьте на место ( Ctrl + f / + f ). Выделите дублирующую кнопку и переверните ее обводку цветом заливки, оставив его 1px .

Теперь у нас есть главная кнопка; следующие четыре закругленных. Выберите инструмент Ellipse Tool ( L ) и создайте круг 3 x 3 пикселя . Выделите его и, удерживая Alt , перетащите влево для дублирования.Выбрав оба варианта, снова удерживайте Alt ( Option на Mac ), , и перетащите в правую часть основной кнопки. Выделите все круглые кнопки и основную. Щелкните левой кнопкой мыши по центральной кнопке и, используя панель Align , отцентрируйте их по вертикали. Теперь нам нужно расположить их, оставив все объекты выделенными, перейти в левый нижний угол Align to Distribute Spacing , присвоить ему 4px и выбрать Horizontal Distribute Space .

Для боковых кнопок мы создадим объект с закругленными углами (ширина = 5 пикселей, высота = 30 пикселей, радиус угла = 1 пиксель, ) и выровняем его по вертикали относительно основного тела значка. Перетащите его немного вправо, чтобы он перекрывал. Используя инструмент Shape Builder Tool ( Shift + m ), вычтите пересечение двух объектов, и вы получите кнопки навигации по страницам.

Выберите новый объект и измените заливку на 3d3d3d ( R = 61, G = 61, B = 61 ).Дублируйте и отразите его по вертикали ( щелкните правой кнопкой мыши> Transform> Reflect> Vertical ), затем выровняйте по правой стороне основного тела.

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

3.4. Добавление деталей

Разложив наш Kindle, мы начнем добавлять последние штрихи к экрану. Возьмите инструмент Rectangle Tool и нарисуйте объект 100 x 55px . Поверните его, нажав R , а затем перетащите один угол влево, удерживая нажатой Shift , чтобы получить хороший угол в 45 градусов.Дублируйте экран Kindle и выберите его и повернутый объект и нажмите Shift + M для инструмента Shape Builder Tool. Вычтите пересеченный путь для красивого отражения.

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

Еще раз выберите экран, скопируйте и вставьте его на место, перевернув заливку с обводкой и придав ей более темный серый цвет ( 3d3d3d ).

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

3,5. Добавить длинную тень

Мы закончим нашу иконку, отбросив длинную тень. Дублируйте основную иконку ( Ctrl + c , затем Ctrl + f) , чтобы вставить на место.Выберите новый объект и перетащите его под углом 45 к правому нижнему углу. Мы сделаем это, удерживая Alt и, перетаскивая вправо, нажимая и удерживая Shift , чтобы вы получили его точно под углом 45 градусов.

Создайте переход между двумя объектами; перейдите в Object> Blend Options и в Specified Steps введите 200 . Теперь, используя тот же путь, выберите Make .

Эти двое объединились в единую форму.Перейдите в Object> Expand> OK , а затем в окне Transform нажмите Unite . Это базовая тень. Придайте ему более темный цвет, чем фоновый круг, а затем замаскируйте его, чтобы он не выпадал из фактического дизайна. Измените цвет на d85d5d ( R = 216, G = 93, B = 93 ), затем скопируйте и вставьте круг перед длинной тенью. Выделите и тень, и объект над ней, затем щелкните правой кнопкой мыши > Make Clipping Mask .

Мы прибили!

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

Шаг 4 - Сохранить для Интернета

У нас есть красивый значок, но как насчет его сохранения, чтобы мы действительно могли использовать его для того, что мы изначально задумали - для Интернета? Экспортируйте иллюстрации с использованием векторного формата SVG (Scalable Vector Graphics) XML.Основные преимущества использования SVG по сравнению с другими форматами (такими как PNG):

Итак, давайте продолжим и посмотрим некоторые настройки этого формата. Перейдите в File> Save as> и из Save as type щелкните раскрывающийся список и выберите SVG ( *.SVG ) - не забудьте установить флажок Use Artboards , чтобы сохранить только элементы на вашей монтажной области. Должно появиться всплывающее окно - нажмите на опцию еще , чтобы увидеть полный набор опций. Пройдемся по каждому из них:

Тип: Управляет способом встраивания шрифтов в фактический файл.Обычно, если у вас есть текст, Adobe рекомендует , SVG, , но это имеет некоторые недостатки и не поддерживается Firefox.

Подмножество : Используя SVG , вы можете сохранить подмножество глифов (символов) в фактическом файле (что увеличит размер, но позволит вам изменять контент), но мы будем использовать Only Glyphs Used , потому что наш дизайн делает не включать текст.

После выбора всех вышеперечисленных параметров нажмите Сохранить .

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

Вот и все!

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

Нравится то, что вы читаете? Подпишитесь на наши главные новости.
.

Учебное пособие по иконам



Как добавить значки

Чтобы вставить значок, добавьте имя класса значка к любому встроенному элементу HTML.

Элементы и широко используются для добавления иконы.

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


Font Awesome 5 иконок

Чтобы использовать значки Free Font Awesome 5, перейдите по ссылке fontawesome.com и войдите в систему, чтобы получить код для использования на своих веб-страницах.

Узнайте больше о том, как начать работу с Font Awesome, в нашем Font Awesome 5 глава.

Примечание: Скачивание или установка не требуется!

Пример




yourcode .js ">






Попробуй сам "

Font Awesome 4 иконки

Чтобы использовать значки Font Awesome 4, добавьте следующую строку в раздел своей HTML-страницы:

Примечание: Скачивание или установка не требуется!

Пример










Попробуй сам "

Bootstrap 3 иконки

Чтобы использовать глификоны Bootstrap 3, добавьте следующую строку в раздел своей HTML-страницы:

Примечание: Скачивание или установка не требуется!

Пример










Попробуй сам "

Примечание: Глификоны не поддерживаются в Bootstrap 4.

Для получения дополнительной информации о Bootstrap 3 и Glyphicons посетите наш учебник по Bootstrap 3.


Google Иконки

Чтобы использовать значки Google, добавьте следующую строку в раздел своей HTML-страницы:

Примечание: Скачивание или установка не требуется!

Пример





облако
избранное
вложение
компьютер
трафик


Попробуй сам "

Чтобы просмотреть полный список ВСЕХ значков (font awesome, bootstrap и google), посетите Ссылка на значок.



.

Как создать панель значков


Узнайте, как создавать панели значков с помощью CSS.



Как создать панель значков

Шаг 1) Добавьте HTML:

Пример









Шаг 2) Добавьте CSS:

Вертикальный пример

.панель значков {
ширина: 90 пикселей; / * Устанавливаем конкретную ширину * /
цвет фона: # 555; / * Темно-серый фон * /
}

. Icon-bar a {
дисплей: блок; / * Сделаем так, чтобы ссылки отображались друг под другом вместо бок о бок * /
выравнивание текста: по центру; / * Выровнять текст по центру * /
отступ: 16 пикселей; / * Добавляем отступы * /
transition: all 0.3s easy; / * Добавляем переход для эффектов наведения * /
цвет белый; / * Белый цвет текста * /
font-size: 36px; / * Увеличенный размер шрифта * /
}

.панель значков a: hover {
background-color: # 000; / * Добавляем наведение цвет * /
}

.active {
background-color: # 4CAF50; / * Добавляем активный / текущий цвет * /
}

Попробуй сам "

Горизонтальный пример

.icon-bar {
ширина: 100%; / * На всю ширину * /
background-color: # 555; / * Темно-серый фон * /
перелив: авто; / * Переполнение из-за поплавка * /
}

.icon-bar a {
плыть налево; / * Размещение ссылок рядом * /
text-align: центр; / * Выровнять текст по центру * /
ширина: 20%; / * Равная ширина (5 иконок по 20% ширины каждая = 100%) * /
padding: 12px 0; / * Некоторые отступы сверху и снизу * / переход
: все 0.3с легкость; / * Добавляем переход для эффектов наведения * /
color: white; / * Белый цвет текста * /
размер шрифта: 36 пикселей; / * Увеличенный размер шрифта * /
}

.icon-bar a: hover {
цвет фона: # 000; / * Добавляем цвет при наведении * /
}

.active {
цвет фона: # 4CAF50; / * Добавляем активный / текущий цвет * /
}

Попробуй сам "

Связанные страницы

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

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



.

Смотрите также