Как сделать фавикон для сайта в фотошопе: How to create a favicon in Photoshop

Содержание

Как сделать фавикон для сайта:создание,добавление,рекоендации

Для начала разберёмся в терминологии.

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

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

Как сделать иконку при помощи генератора?

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

Как сделать фавикон в фотошоп?

В фотошоп можно сделать уникальную картинку. Как сделать favicon для сайта в фотошоп?

Откройте фотошоп. Нажмите на Файл, далее на Новый. Сделайте новый файл с разрешением 64 на 64 пикселя.
В нашем примере используем латинскую букву W с преобладанием синего и жёлтого цветов. Сделаем иконку с таким логотипом. Для этого установите цвет #6A91D0 и нажмите на Заливка. Документ получилось окрасить в синий цвет.
Следующим шагом нажмите на Текст и добавьте букву W. Для того, что бы сделать жёлтый цвет, введите значение #FAC31D.
Следует выделить букву на фоне. Для этого обведите её чёрным цветом, задав размер обводки в 2 пикселя. Что бы сделать обводку нажмите на Слой, затем кликните на Стиль слоя, затем на Обводка. Выберите цвет и разрешение обводки.
Сгруппируйте слои. Для группировки нажмите на Слой, затем на Объединить видимые. Для достижения плавности в линиях добавьте размытие. Для добавления размытия нажмите на Фильтр, затем на Размытие, далее на Размытие по Гауссу. Сделайте параметр радиуса в 0,3 пикселя.
Буква, расположенная на фоне должна занимать всё пространство.
Исходный размер значка применяется 16 на 16 пикселей. Это значит, что следует сделать уменьшение полученного изображения. Для уменьшения фавикона нажмите на Изображение, затем на Размер изображения и задайте разрешение 16 на 16 пикселей.
Далее следует сохранить фавикон. Изображение надо назвать favicon и задать ему расширение ico. Загвоздка заключается в том, что фотошоп не способен сохранить картинку в этом расширении. Поэтому придётся сохранить фавикон в расширении png. Для этого необходимо пройти в пункт Файл, затем на Сохранить как, и при помощи нужной строки, сохраните нужный формат.
Вы создали favicon. И всё же для добавления favicon на сайт требуется формат icon. Можно перевести картинку в необходимый формат, воспользовавшись генератором ru. Посетите этот сайт и нажмите на Обзор. Выберите ваш фавикон и нажмите на Создать favicon.ico.
Загрузится страница с надписью Скачать favicon.ico. Нажмите на надпись и сохраните конвертированный файл на свой компьютер.

Добавление фавикон на сайт

Для того что бы добавить изображение на сайт, разместите его в корневую папку и на каждую страницу площадки перед вторым тегом </head>. Пропишите две строки: <link rеl=»icоn» hrеf=»/fаvicon.icо» typе=»imаge/x-icоn»> и <link rеl=»shоrtcut icоn» hrеf=»/fаvicon.icо» typе=»imаge/x-icоn»>. На все страницы эти надписи нужно добавлять, если ваш сайт создан при помощи HTML. В случае использования движка, достаточно единоразового добавления. В CMS строки прописываются в основной файл темы, применяемый для сайта. После добавления, картинка сразу появится в верхней строке браузера и на открытых вкладках. В поиске яндекса и гугла изображение появится несколько позже.

Как поменять иконку (favicon) на WordPress?

Нужно зайти в админку Word Press , перейти на панели слева в Внешний вид —- Настроить — Свойства сайта. картинка 1 Далее находим внизу область “иконка сайта” и переходим в Изменить изображение картинка 2 Загружаем необходимую картинку Загрузить Файлы в формате PNG (желательно) т.к у этого формата прозрачный фон и хорошее качество и что бы соотношение картинки было 1:1 (квадратное) , при необходимости отредактировать в Photoshop, поменять фон прозрачность, буквы и тд. После загрузки изображения смотрим что получилось в итоге, если норм то сохраняем жмем Сохранить и опубликовать картинка 3

Как поменять логотип сайта на WordPress ?

Видео как изменить логотип

Нужно зайти в админку Word Press , перейти на панели слева в Внешний вид —- Темы — Настроить. картинка 1 Далее на панели слева Стили темы картинка 2 После перехода в Стили темы скролим вниз и находим нужный нам пункт Логотип в шапке и в подвале сайта картинка 3 Изменяем изображение на новое которое уже заранее приготовлено в формате PNG хорошего качества. Если логотип не на своем месте, значит необходимо логотип масштабировать. Переходим Изменить изображение картинка 3 , далее после перехода выбираем ту же картинку в Библиотеке Файлов и жмем Редактировать картинка 4 В новой вкладке появится окно масштабирование изображения. Далее необходимо подогнать картинку под нужные нам размеры , чтобы логотип стоял на своем месте. картинка 5 После редактирования сохраняем и обновляем. Мы только отредактировали изображение. Повторяем пункт 1,2.3,4 выбираем изображение которое масштабировали и сохраняем. Заключение Фавикон является неотъемлемым сопровождением сайта. Он не менее важен, чем логотип, эмблема и другое наполнение. Не забывайте об уникальности и цветовом оформлении изображения. Это касается как создаваемых вами, так и готовых фавиконов. Успехов!

Поделиться с друзьями:

Твитнуть

Плюсануть

Отправить

Класснуть

Линкануть

Запинить

Adblock
detector

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

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

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

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

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

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

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

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

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

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

favicon картинка

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

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

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

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

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

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

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

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

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

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

favicon готов

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

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

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

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

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

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

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

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

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

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

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

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

Как сделать фавиконку в Photoshop — Brendan Williams Creative

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

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

Настройки документа для создания фавиконки в Photoshop

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

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

Чтобы создать значок, вам нужно открыть новый документ и отредактировать настройки документа, чтобы отразить правильный размер вашего значка. На начальном экране Photoshop нажмите New File .

Откроется окно нового документа .

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

Затем отредактируйте поля ширины и высоты, чтобы отобразить квадрат размером 64×64 пикселя.

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

В раскрывающемся меню Background Contents выберите Transparent .

Это обеспечит прозрачность фона при экспорте фавикона.

Нажмите Создать .

Применение вашего логотипа и экспорт значка из Photoshop

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

Найдите свой логотип или значок в своих файлах и перетащите файл в Photoshop. Он появится в вашем документе. На панели слоев , вы увидите, что имя слоя изменится на имя файла логотипа.

Вы можете перемещать логотип по документу с помощью инструмента Move Tool ( V ).

Чтобы упростить центрирование логотипа, вы можете включить интеллектуальные направляющие, которые будут появляться при перетаскивании логотипа по документу и помогать вам ориентироваться в центре. Перейдите к View > Show > Smart Guides , чтобы убедиться, что вы включили Smart Guides.

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

Когда вы довольны размещением, экспортируйте значок в виде файла .png, выбрав File > Export > Export As .

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

Щелкните раскрывающееся меню Формат файла и выберите PNG .

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

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

Загрузка вашего фавикона на ваш веб-сайт

Хотя некоторые говорят, что файл ICO требуется для загрузки значка на ваш веб-сайт, файл png будет работать нормально, особенно на распространенных платформах, таких как WordPress, Squarespace и SmugMug. Тем не менее, у каждого конструктора сайтов могут быть разные требования к фавиконам, поэтому вам следует перепроверить свою конкретную платформу. Вот краткий список ссылок на требования к фавикону для самых популярных конструкторов сайтов.

WordPress
Squarespace
SmugMug
Wix
Weebly

Что должно быть включено в ваш Favicon?

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

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

Учебники ★ Как создать веб-сайт Favicon с помощью Photoshop ★ Борис Хёкмейер Веб-дизайн

Файл favicon.ico — это иконка вашего сайта. Он отображается рядом с URL-адресом в верхней части браузера и рядом с веб-сайтом в избранном/закладках. Это увеличивает вашу видимость, и, по моему мнению, если вы не используете его, ваш сайт будет выглядеть немного дилетантским.

Создать его очень просто, если у вас есть Photoshop. Я использую CS5, но старые версии тоже работают.

1. Для начала перейдите на веб-сайт photoshopcs5.co.uk и загрузите соответствующий подключаемый модуль. В моем случае это 64-битная версия Windows. Там написано только CS4, но на CS5 работает нормально. Он работает как с 64-битной, так и с 32-битной версией Photoshop CS5 (но использует другой плагин).

2. Разархивируйте файл и скопируйте файл ICOFormat64.8bi в папку C:\Program Files\Adobe\Adobe Photoshop CS5 (64 Bit)\Plug-ins\File Formats (или любую другую папку, которую вы использовали в качестве папки установки) .

3. Запустите Photoshop. Вероятно, теперь вы увидите опцию .ICO в раскрывающихся меню типов файлов «Открыть» и «Сохранить как». Если он не отображается, не волнуйтесь. Это связано с тем, что ваш файл еще не является индексированным цветным изображением, которое вы визуализируете позже в этом руководстве.

Примечание. Существуют ограничения для файла .ico. Его максимальный размер — 16×16 пикселей, максимальное количество цветов — 256 (индексированный цвет), разрешение — 72 пикселя. Это очень мало, поэтому вам нужно, чтобы значок был простым. Мало цветов и мало деталей.

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

5. Чтобы обрезать, выберите инструмент «Обрезка» на панели «Инструменты» (обычно в левой части экрана. Если вы его не видите, перейдите в раскрывающееся меню «Окно» и выберите «Инструмент»). ). Вы можете натянуть рамку на изображение, щелкнув левой кнопкой мыши и перетащив мышь по изображению (удерживая кнопку мыши нажатой во время перетаскивания). Вы можете изменить все стороны перед обрезкой. Если вы хотите убедиться, что нарисовали точный квадрат, откройте меню «Информация» (выпадающее меню «Окно» -> выберите «Информация»). В W (Ширина) и H (Высота) вы можете увидеть точные размеры, которые вы выбрали с помощью инструмента «Обрезка». Инструмент «Информация» выглядит так:

6. Чтобы сделать изображение квадратным, не жертвуя частью изображения, увеличьте холст. Вы можете сделать это, перейдя в раскрывающееся меню «Изображение» и выбрав «Размер холста». Чтобы добавить размер холста, введите желаемые размеры ширины и высоты (например, 5 на 5 сантиметров) и укажите Photoshop, где добавить размер. Если вы хотите добавить холст в нижнюю часть изображения, нажмите на стрелку, указывающую вверх (как показано на этом снимке экрана):

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

7. Сохраните то, что у вас есть, как favicon.psd. Это позволит вам вернуться к изображению, оптимизированному, но еще не уменьшенному для использования фавиконки.

8. Перейдите в меню Изображение -> Режим -> Индексированный цвет… и установите количество цветов 256 (значение по умолчанию). Больше ничего менять не нужно. Внесите любые другие необходимые изменения (обычно для упрощения изображения).

9. Теперь все готово! Теперь снова перейдите в выпадающее меню «Изображение:» и выберите «Размер изображения». Введите числа, как показано на скриншоте: ширина/высота 16×16 пикселей, разрешение 72 пикселя.

10. Сохранить как файл favicon.ico (не используйте «Сохранить для Интернета и устройств», это не дает возможности сохранить как файл .ICO).

11. Файл favicon.ico обычно помещается в корень структуры папок сайта. Используя WordPress, поместите его в папку с изображениями в папке вашей темы.

12. Введите следующую строку кода в разделе заголовка заголовка:

Штирлиц — Сеть печатных салонов в Перми