Как в фотошопе сделать фавикон для сайта: Как создать фавикон — советы и сервисы от Logaster

Как сделать фавикон для сайта?

Здравствуйте, дорогие мои читатели и гости сайта “SEO мастерская для WordPress сайт блог темы”. Вас приветствует Валерий Бородин. Сегодня я хочу поговорить о том, как Вы можете не имея опыта работы в фотошопе, сделать фавикон для сайта самостоятельно и без посторонней помощи. Вы спросите, а разве это возможно? Я Вам отвечу, конечно возможно! И сейчас я Вам об этом расскажу и покажу в видеоуроке, все в подробностях. После этого Вы уже не будете думать и спрашивать, а как же можно сделать фавикон для сайта не зная фотошопа?

И так, приступим к изучению данного вопроса о favicon для собственного сайта…

Сначала давайте разберемся, для чего он, favicon, нужен для сайта? И нужен ли он вообще? Может и без него обойдемся?

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

Это первый довод зачем нужен фавикон для сайта!

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

Теперь будем делать наш индивидуальный знак-favicon.

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

Вот так выглядит фавикон на сайте:

favicon картинка

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

Открываем фотошоп и создаем новый файл.
Делаем все как на рисунке. Изображение кликабельно!

как сделать фавикон для сайта

Делее жмем ОК и немного растянем рамку, потянув мышкой за правый нижний угол. Увеличим его для наглядности, прибавив масштабирование в нижнем левом углу, исправив 100% на 1000% и кликнув по картинке. Изображение кликабельно!
Вот так:

сделать фавикон

Теперь выбираем вкладку “файл” и там жмем “поместить”. В выпавшем окошке выбираем наш рисунок или картинку, заранее приготовленные для нашего favicon. Все наш будущий фавикон расположен в окошке!
Изображение кликабельно!

фавикон для сайта

Теперь нам нужно его сохранить в нужном нам формате ICO. Для этого мы опять жмем на “файл”, “сохранить как” и выпавшем окошке выбираем нужный нам формат для сохранения, жмем сохранить.
Изображение кликабельно!

сделать фавикон для сайта

Все наш favicon готов для сайта!

favicon готов

Все просто! Не правда ли?

Если кому-то не совсем понятно. Для Вас специально приготовлен видеоурок:

Как сделать фавикон для сайта? В фотошопе, без опыта! Видео:

Где взять рабочую программу фотошоп?

Смотреть здесь!

Почему у меня не сохраняется фавикон в моем фотошопе в формате favicon.ico?

Смотреть здесь!

Если Вам понравилась статья?

• Поделитесь ей с друзьями!

• Прокомментируйте!

• И подпишитесь на новые!

Спасибо за внимание!

 

 

Просто о создании сайтов и баннеров

Создание сайтов

10.06.200903.06.20222

В комментариях к своим статьям Как сделать иконку favicon.ico для своего сайта и Как сохранить иконку сайта favicon в Photoshop я столкнулся с распространенным заблуждением, что иконки для сайтов favicon необязательно сохранять в формате ICO. Достаточно сохранить иконку 16×16 в формате BMP, а затем просто изменить расширение изображения с BMP на ICO. И нет мол никакой разницы.

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

Прежде всего я решил сделать новую иконку favicon.ico и сохранить ее в форматах BMP и ICO с помощью Photoshop. Я качестве изображения для иконки сайта я использовал черно-белый рисунок мультяшного персонажа Doodlez:

(далее…)

Подробные инструкции / Уроки Photoshop

05.05.200908.11.201116

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

Как сделать прозрачный фон в Фотошопе

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

1. Открываем Photoshop. Открываем в нем картинку, которую нужно разместить на прозрачном фоне (File->Open…).

2. Выделяем все изображение/фото (Ctrl+O).

3. Копируем выделенную картинку (Ctrl+C).

4. Открываем новый файл в Фотошопе (File->New… или Ctrl+N). В появившемся окне в самом нижнем выпадающем списке выбираем значение Transparent – «прозрачность»:

(далее…)

Уроки Photoshop

27.12.200803.06.202242

Если нужно создать иконку favicon.ico для своего сайта и нет желания скачивать и тем более платить за специальные программы по созданию иконок, можно обойтись только Фотошопом. К сожалению, даже версия Photoshop CS3 не умеет сохранять файлы в формате ICO. Эта проблема легко исправляется установкой специального плагина. Работы немного, зато плагин позволяет делать сколько угодно иконок быстро и удобно только в Фотошопе. Итак, что нужно делать:

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

Скачать плагин для Фотошопа, который позволяет сохранять файлы *.ico

Плагин упакован в архив icoformat.rar, весит 7 Кб. В версии Photoshop CS и Photoshop CS3 этот плагин работает точно, в других версиях тоже должен работать, но я лично не проверял.

2. Устанавливаем плагин. Закрываем Photoshop, копируем распакованный плагин icoformat.8bi в папку установки плагинов. Если вы устанавливали

Photoshop CS3 в папку по умолчанию, то путь будет такой:

C:\Program Files\Adobe\Adobe Photoshop CS3\Plug-Ins\File Formats\

Все. Теперь достаточно перезапустить Фотошоп и можно сохранять файлы в формате ICO. Для этого, после создания своей favicon, нажмите Ctrl+Shift+S или File->Save As…:

Если вам нужна подробная информация, как установить иконку favicon на свой сайт, как ее сделать и для чего она вообще нужна, читайте статью Как сделать иконку favicon.ico для своего сайта.

Подробные инструкции / Создание сайтов

25.12.200810.06.200914

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

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

Иконки favicon появляется рядом со ссылкой в результатах поиска, например, в Яндексе:

Иконки favicon отображаются перед адресом просматриваемого сайта почти во всех браузерах, в Избранном или Закладках браузера:

Теперь научимся делать такие иконки для своего сайта или блога. Для этого нам понадобятся программы Adobe Photoshop CS3 и AWicons Pro. Если у вас нет этих программ и вы не знаете, где их можно бесплатно скачать, советую прочитать мою статью Чем бесплатно скачать любую программу.

(далее…)

Создание фавиконки сайта в Photoshop

Блоги

DesignPhotoshop

18 декабря 2010 г. общего брендинга вашего сайта. Они отображаются в вашем веб-браузере, а также в новостных лентах, поэтому важно, чтобы вы добавили их на свой сайт. Фавиконы на самом деле — это крошечные значки; их размеры составляют 16 на 16 пикселей — не слишком много места для работы. Просмотрите Интернет и посмотрите, что используют другие сайты. Некоторые значки работают лучше, чем другие, при таком маленьком размере, и ключом к успеху является простота.

Итак, давайте начнем.

1. Загрузите плагин для Photoshop, который позволяет сохранить файл в формате Windows Icon (ICO). Вы можете загрузить бесплатный подключаемый модуль под названием ICO Format с веб-сайта www.telegraphics.com.au/sw/. Инструкции по установке включены в бесплатную загрузку.
2. Откройте Фотошоп. Выберите «Файл» > «Создать» и создайте новый документ с разрешением 72 ppi и размерами 64 на 64 пикселя. Мы уменьшим размер после того, как создадим графику.
3. Создайте или поместите рисунок в новый документ. Если вы используете текст в своем фавиконе, обязательно отключите сглаживание, чтобы края были красивыми и четкими.
4. Для своей иконки я использую фиолетовый отпечаток лапы, при этом одна часть лапы выделена розовым цветом. Это было создано с использованием векторной формы.
   
5. Когда ваш дизайн будет готов, выберите «Изображение» > «Размер изображения». Убедитесь, что установлен флажок «Сохранить пропорции» в нижней части диалогового окна; затем установите в поле «Ширина» или «Высота» значение 16 пикселей (Photoshop автоматически изменяет другое поле на 16 пикселей). Нажмите «ОК».
   
6. Если ваш дизайн выглядит немного размытым, используйте фильтр «Контурная резкость».
7. Теперь, когда ваш значок готов, выберите «Файл» > «Сохранить как» и выберите значок Windows (ICO) во всплывающем меню «Формат» в нижней части диалогового окна; затем нажмите Сохранить.

Вот и готов ваш фавикон. Очень просто.

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

своих веб-страниц:

примечание: Хотите узнать больше?

Если вы хотите узнать больше от Дженнифер, подпишитесь на нашу рассылку веб-дизайна SitePoint Design View .

Если вам понравилось читать этот пост, вам понравится Learnable; место, где можно научиться новым навыкам и приемам у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как «Основы Photoshop».

Комментарии к этой статье закрыты. Есть вопросы по фотошопу? Почему бы не спросить об этом на нашем форуме?

Дженнифер Фарли

Дженнифер Фарли — дизайнер, иллюстратор и преподаватель дизайна из Ирландии. Она пишет о дизайне и иллюстрации в своем блоге Laughing Lion Design.

Учебники и статьи по Photoshop Учебники и статьи по веб-дизайну

Как создать значок сайта для вашего сайта?

Предисловие: Ваш справочник по favicon — узнайте, что такое favicon, его размеры, способы использования; Как профессионально создать значок сайта с помощью передовых инструментов — DesignEvo, GIMP или Photoshop CC? Если вы уже получили свой логотип, три простых бесплатных онлайн-создателя фавиконов в части 3 покажут вам другой путь к файлу значка.

Содержание Таблица «Как создать значок сайта для вашего веб-сайта? — Все советы к действию!»

• Часть 1: Что такое фавикон? [Его размеры, использование и изменения]
• Часть 2: Как легко создать фавикон? (Высшее качество, профессиональный подход)
• Часть 3: Список 3 лучших бесплатных онлайн-генераторов фавиконок (среднее качество или ниже среднего) — DesginEvo, GIMP и Photoshop CC
• Часть 4: Крупный план

Часть 1.

Что такое фавикон? [Его размеры, использование и изменения]

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

1.1. Размеры и реализация фавиконки:

Фавикон имеет несколько часто используемых размеров для Интернета в соответствии с рекомендациями Microsoft:

• *16 x 16px
• * 24 х 24 пикселей
• * 32 х 32 пикселей
• * 48 х 48 пикселей

Чтобы внедрить/установить фавиконку на HTML-страницу, вам нужно всего лишь добавить код ниже в блок HTML-элемента

:

1.2. Favicon Usages:

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

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

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

Еще одно преимущество Favicon: Это ничего вам не стоит, но помогает повысить осведомленность о бизнесе.

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

1.3. Изменения фавиконки:

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

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

Изменить 3 — Сделать фавикон маленьким: Лучше использовать рекомендованные выше размеры, тогда браузеру пользователя не составит труда отобразить его в заголовке. Однако, если вы выберете большой PNG/ICO в качестве своего фавикона, вы не сможете увидеть его отображение.

Часть 2: Как легко создать фавикон? (Высокое качество, профессиональный способ)

Ниже мы собрали лучшие способы создания качественного фавикона, включая бесплатный онлайн-дизайн DesignEvo, бесплатный GIMP, 7-дневную бесплатную пробную версию Photoshop CC.

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

https://www.designevo.com/

Если вы решили создать новый веб-сайт и уже разработали логотип для своего веб-сайта, то DesignEvo это мечтательное решение для немедленной визуализации значка и логотипа. (Это занимает максимум 7-8 минут.)

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

Изображение изображения: Используйте DesignEvo для создания веб-логотипа.

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

Сначала , Удалите все тексты логотипа.

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

Третий , Измените размер холста с 500 x 500 пикселей по умолчанию на 24 x 24 пикселя (или другие размеры фавикона).

Четвертый , Загрузите свой значок.

Изображение изображения: Превратите свой логотип в фавиконку в DesignEvo.

Совет: Если вы хотите получить значок SVG или PNG-прозрачный значок вместо бесплатного PNG, вам необходимо выбрать план DesignEvo Basic или план DesignEvo Plus. Они не бесплатные, но все же недорогие.

2.2 GIMP, бесплатный способ создания фавикона из логотипа:

https://www.gimp.org/

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

Шаг 1. Возьмите логотип с вашего логотипа:

Если ваш логотип одноцветный, используйте инструмент выбора цвета GIMP (Shift + O) и щелкните цвет логотипа, который автоматически выберет его для вас. Инструмент «Перо» GIMP (в категории меню > [Выбрать] > [Перо…]) позволит отображать пушистую графику на выбранной границе (например, пушистый котенок или пушистая собака). Это помогает сделать графику более естественной и менее четкой.

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

Шаг 2. Скопируйте логотип в новое изображение:

Скопируйте выбранную графику в новое изображение: выберите [Файл] > [Создать…].

В окне создания изображения введите размер квадрата, соответствующий вашему логотипу. Прежде чем нажать «ОК», нажмите [+ Дополнительные параметры], найдите «Заполнить:» и выберите «Прозрачный».

Изображение изображения: копирование логотипа на новое изображение в GIMP.

Шаг 3. Измените размер нового изображения логотипа и экспортируйте его в файл ICO:

После вставки графического логотипа вы можете уменьшить его до стандартного размера ICO. Выберите [Изображение] > [Масштабировать изображение…].

После завершения редактирования значка экспортируйте логотип в файл ICO. Нажмите [Файл] > [Экспорт…], выберите каталог для сохранения значка и нажмите [+ Выберите тип файла (по расширению)]. Прокрутите список вниз, чтобы найти «Значок Microsoft Windows», нажмите [Экспорт], и вы получите свой логотип в виде файла ICO.

Изображение изображения: изменение размера изображения логотипа в GIMP.

2.3 Способ Photoshop для создания фавикона (7-дневная бесплатная пробная версия):

https://creative.adobe.com/products/download/photoshop/

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

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

В настоящее время мы покажем вам способ Photoshop для создания фавикона из логотипа. Вот как:

Шаг 1. Импортируйте логотип в Photoshop, обрежьте его и оставьте только логотип.

Изображение изображения: Как создать фавикон из логотипа с помощью Photoshop CC?

-> Инструмент масштабирования Photoshop:

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

-> Photoshop Pen Tool:

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

Навигация PS Pen Tool включает:

• * Два последовательных щелчка левой кнопкой мыши очерчивают прямую линию.
• *Удерживая левый щелчок и одновременно перемещая мышь, вы сможете начертить кривую линию в форме буквы «y». Не забудьте применить Alt + щелчок левой кнопкой мыши к точке соединения «y» (точка в середине касательной), чтобы удалить лишнюю касательную часть.
• *Чтобы выбрать форму логотипа, вы должны обвести свой выбор и нажать на начальную точку.
• *Ctrl+Alt+Z, чтобы повторить предыдущую навигацию.

Изобразить изображение: использовать инструмент пера Photoshop и инструмент масштабирования — Как выбрать изогнутую часть с помощью инструмента пера PS.

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

В меню [Изображение] две кнопки — [Размер изображения…] и [Размер холста…] — помогут настроить значок логотипа под подходящий размер.

Шаг 3. Сохраните изображение логотипа в формате PNG.

Что делать, если вы хотите сохранить свою фавиконку как ICO в Photoshop CC? Первоначально Photoshop не интегрировал значок в качестве формата файла экспорта. В то же время вы можете установить плагин favicon, например Telegraphics.com.au, который вам поможет.

Часть 3. Список трех лучших онлайн-генераторов Easy-Free Favicon (среднее качество или ниже среднего)

1. Бесплатный онлайн-редактор X-Icon Editor

— http://www.xiconeditor.com/

X-Icon Editor — бесплатный онлайн-редактор фавиконов с очень ограниченными возможностями. Просто позволяя пользователям вырезать часть загруженного изображения в значок онлайн (преобразование логотипа в значок), X-Icon по-прежнему эффективен для группы пользователей.

2. Онлайн бесплатный ICOConvert

-https://icoconvert.com/

ICOConvert — очень удобный бесплатный конвертер иконок. Вы можете загрузить в него любое изображение, указать, где его обрезать, и даже выбрать несколько форм для своего фавикона. Его размер загрузки поддерживает от 16 x 16 пикселей до 256 x 256 пикселей.

3. Бесплатный онлайн Genfavicon

-http://www.genfavicon.com/

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

Часть 4: Крупный план

Надеюсь, в этой статье о создании фавиконки есть все, что вам нужно. В части 2 и части 3 мы рассмотрим 6 инструментов для создания фавиконки, но мы по-прежнему рекомендуем вам выбирать среди DesignEvo, GIMP и Photoshop CC в качестве генератора фавиконки — эти приложения обещают вам четкую фавиконку.