Фавикон в фотошопе: Как создать значок сайта .ico при помощи Photoshop

Как создать .Ico в Photoshop (иконку)

Как легко и быстро создать свою иконку в фотошопе. Иконка в Photoshop мы сохраним как формат иконок .ico
Для начала вам надо сделать поддержку формата .ico в фотошопе.

Поддержка формата ICO

Недавно мне понадобилось нарисовать другу favicon в photoshop. После начатой работы я вдруг понял, что photoshop не дружит с ico форматом. Недолго думая, я вдруг вспомнил, что уже сталкивался с этим и подружить ico я мог только с плагином о котором я вам и расскажу.
Для того, чтобы подружить photoshop cs6 и младше с ico форматом (подружить – это открывать формат ico, редактировать его, сохранять в другой формат или сохранять в ico) нам понадобиться плагин.
Итак первым делом давайте скачаем плагин, примерно с этого сайта выбрав для какой разрядности (я не знаю как у меня разрядность Windows) вам нужен плагин или для 32-ух или для 64-ёх разрядной системы

После того, как вы загрузили zip файл извлеките из него один файл с расширением 8bi.

Теперь этот файл киньте в папку (для 32-ух и 64-ёх разрядных систем)
C:/Program Files/Adobe/Adobe Photoshop CS6 (64 Bit)/Required/Plug-Ins/File Formats/
C:/Program Files (x86)/Adobe/Adobe Photoshop CS6/Required/Plug-Ins/File Formats

После этого выйдите из photoshop и запустите его заново. Теперь вы можете сохранять в ico и открывать ico формат прямо в своём любимом редакторе photoshop. Единственное, что если вы хотите сохранить в формате ico размер должен быть 16 на 16 пикселей или окошка с выбором сохранения в ico НЕ БУДЕТ!

После того, как фотошоп у нас уже поддерживает ico формат, мы можем приступать к созданию иконки в фотошопе. Если вы хорошо рисуете, то можете нарисовать на новом документе, с прозрачным фоном иконку. Разрешение не более чем 512 на 512 пикселей. Всё равно сохранять иконку мы будем не в формате 512 на 512, а в меньшем!

Как создать иконку в фотошопе (ico photoshop)

Как мы видим, у картинки нет фона. Она нам отлично подойдёт для создания иконки в формате ico в фотошопе. Открываем её в фотошопе, делаем размер 256×256 пикселей и сохраняем в формате ico

Как создать иконку в фотошопе (ico photoshop)

Наша иконка готова, и мы её успешно применяем!

Как создать иконку в фотошопе (ico photoshop)

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

Как создать иконку favicon.ico для сайта?

просмотров: 2761520 августа 2011 года

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

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

Да не тут та было… как оказалось, далеко не все программы поддерживают формат *.ico

Я привык работать в Photoshop CS5, но и тот даже в своих новых версиях  никак не сделает поддержку нужного нам формата. Раз не делает производитель — сделаем сами

Вариант 1. Установка плагина ICO для Photoshop

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

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

Плагин работает во всех версиях фотошопа, до CS5 включительно. Остальные версии не проверял.

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…(Сохранить как…):

Вариант 2. Использование XnView

XnView — это кроссплатформенная программа для просмотра изображений, поддерживающая более 400 форматов файлов. Распространяется бесплатно для некоммерческого использования

Тут все просто.

1. Любым редактором создаем картинку 16×16 px в формате gif. Например, в том же Фотошопе или Paint

2. Открываем эту картинку в XnView

3. Нажимаем Файл->Сохранить rак…, выбираем формат файла ICO — Windows Icon

4. Нажимаем Сохранить.

После создания иконки, загружаем ее на сайт в корневой каталог с именем favicon.ico — именно такое имя нужно для наибольшей совместимости (некоторые браузеры проверяют наличие этого файла в корне сайта http://site.ru/favicon.ico)

Для отображения иконки, добавляем следующий код в секцию <head> … </head> (лучше вводить полный путь к иконке):

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

Анна (25 января 2012 года, 10:01:22)

Здравствуйте полезная статья я долго ломала голову как перевести иконку в нужный формат,но у меня вопрос с использованием программы XnView у меня картинка из размера 256×256 после смены формата становится маленькая хотя размер остаётся тот же,подскажите возможно ли это как то исправить?

Олег (1 февраля 2012 года, 16:23:59)

Вообще перед конвертированием надо ресайзить картинку в нужный размер — 16x16px.
Если Вы хотите более качественные иконки, используйте формат PNG.

Анна (1 февраля 2012 года, 17:09:52)

Ну что то у меня не чего не получается((

Олег (1 февраля 2012 года, 17:23:33)

Залейте картинку на какой-нибудь sendfile.su например и давайте я попробую преобразовть и описать как у меня это получилось …

Анна (1 февраля 2012 года, 17:33:20)

Вот одна из тех которая не хочет преобразовываться  http://sendfile.su/515788

Олег (1 февраля 2012 года, 17:41:04)

Вообщем-то я последовал инструкциям “Вариант 2. Использование XnView”.. Изменил разрешение на 16x16px и пересохранил в .ICO, вот результат:
http://sendfile.su/515797

Анна (1 февраля 2012 года, 17:48:59)

Да она у меня такая же получилась,на вид она стала меньше а как её можно сделать побольше?

Олег (1 февраля 2012 года, 18:04:05)

Просто разрешение выставить больше — например 24×24. Какое максимальное для отображения на сайте — я не знаю… Узнайте опытным путем.

Анна (1 февраля 2012 года, 18:06:53)

Спасибо попытаюсь))

developer (6 июня 2013 года, 15:56:01)

Не хрена не работает!

Олег (10 июня 2013 года, 17:36:30)

2 developer: что не работает?))

Как сохранить фавикон в фотошопе?

Здравствуйте уважаемые посетители и гости моего сайта! Сегодня я вам расскажу как сохранить фавикон в фотошопе.
А также покажу в видеоурок и дам бесплатно файл на скачивание для сохранения фавикон в вашем фотошопе.

Я долго бился над этим вопросом, пока не нашел решение, как сохранить фавикон в фотошопе.

Все оказалось до банальности просто!

Смотрим…

Когда я нашел Photoshop CS6 и нашел, где скачать его бесплатно. Решил “Ну все, теперь я сделаю себе на сайт свою, уникальную favicon!”
Но не тут-то было!
Начинаю делать, все вроде получается, а как дело дошло до сохранения, тут начались проблемы!

Открываю сохранить и ищу формат ICO, в котором сохраняется фавикон. А его нет!

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

Потом были поиски этого плагина для фотошопа. Скачано много разных. Они не подходили для моего Photoshop CS6. Муки да и только!
Но все таки нашел подходящий и храню его, как зеницу ока!

Теперь хочу и с вами поделиться. Я не жадный!

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

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

Смотрим видеоурок…

Как сохранить фавикон в фотошопе в формате ICO?

Здесь качаем плагин поделившись в любой соцсети!

[sociallocker]Качаем бесплатно плагин для фотошоп![/sociallocker]

А здесь можно: Photoshop CS6 скачать бесплатно!

Понравилось?

Пишем комментарии и подписываемся на свежие новости!

Вы будете первым, кто поставит оценку!

Как правильно сделать иконку сайта (favicon)

Иконка для сайта должна быть:

• Размером 16 на 16 пикселей
• Глубиной цвета 32
• Сохранена в специальном формате . ico

Скачать образец иконки.

Иконка поддерживает прозрачность!

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

Есть два сравнительно простых способа создать и сохранить favicon для сайта:

1)Скачать и установить Gimp — бесплатный, качественный аналог photoshop — в нем по умолчанию можно сохранить файл в нужном нам формате — .ico

Актуальную версию можно скачать на официальном сайте —

gimp.ru/download/gimp/

2) Если у Вас есть Photoshop — на нем в стандартном варианте не поддерживается формат иконок. Для поддержки нужно установить специальный плагин.

Справится с этим недостатком нам поможет плагин
ICOFormat, с помощью которого Photoshop сможет как открывать и редактировать, так и сохранять файлы в формате ICO.

Важное примечание! Photoshop не сохраняет в этом формате файлы со стороной больше 256 пикселей.

Данный плагин ICOFormat, скачать который Вы сможете по ссылкам внизу страницы, подходит к версиям Photoshop CS6 и CC.

Для установки плагина нужно разместить файл ICOFormat.8bi или ICOFormat64.8bi в папке


C:\Program Files (x86)\Adobe\Adobe Photoshop CC\Plug-ins или


C:\Program Files\Adobe\Adobe Photoshop CC (64 Bit)\Plug-ins соответственно для 64-битных систем, а для 32-х битных в папке


C:\Program Files\Adobe\Adobe Photoshop CC\Plug-ins.

Собственно, на этом установка заканчивается. Я установил
ICOFormat и проверил его работоспособность на свой Photoshop CCx64, Windows 7, скриншоты с него.

Скачать плагин.

Теперь, при сохранении файла, в списке выбора типа файла появится новая строка ICO (Windows Icon)(*.ICO):

После того, как мы создали фавиконку, нужно ее «прикрепить» к сайту. Для этого нужно сделать следующее:

1) Полученный favicon.ico
скопировать в корень сайта

2) Далее открываете файл с основным шаблоном сайта и прописываете в этом файле следующий код (главное условие:
код должен быть после тега <head> и до </head>):

Естественно в 2 местах слова
адрес_сайта меняете на адрес СВОЕГО сайта.

3) Теперь сохраняете файл, обновляете на сервере и наблюдаете за результатом
.

Как сделать Favicon? | verovski

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

В каком формате сохранить favicon?

Все зависит от браузера. Для Microsoft Explorer подходит формат иконки ICO. C этим форматом мы уже сталкивались, когда делали курсор. Для остальных браузеров от Google Chrome до Apple Safari подойдет обычный GIF или PNG.  Favicon может быть полупрозрачным. Для этого его нужно сохранить в полупрозрачный PNG, а далее преобразовать в формат ICO. Сделать это можно в неплохой программе IcoFX. Однако для генерации фавикона существует масса сторонних сайтов и самый очевидный из их www.favicon.ru

Как поместить favicon на сайт?

Как быть уверенным в том что favicon сработает? Нужно соблюсти 4 условия.

• Фаил должен называться — favicon.
• Размер фавикона 16 на 16 px
• Оптимальное место для фавикона — корневая папка сайта.
• Адрес иконки прописать в мета-тегах heder-а в индексе сайта.

В HTML выражении это выглядит так:

 <head>

<link rel=»icon» type=»image/png» href=»/someimage.png» />

</head>

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

Создаем favicon в Фотошопе

Создать favicon очень просто. Хотите сделать такой же favicon  как у Вконтакте или Однокласников? Хороший favicon не сделать, уменьшая большие картинки во всяких «генераторах» фавиконов, которых полным полно в интернете. Фавикон очень маленький. Фактически мы это своего рода пиксель-арт, который имеет свои особенности. Нельзя написать букву и просто уменьшить её до 16px.

Подобный favicon будет размыт и нечеток, так как края буквы при изменении размера будут заходить на несколько пикселей. Получится своего рода anti-alias, который обычно является добром, но в случае с пиксель-арт подобные переходы как раз не нужны. С другой стороны стоит избегать и излишней «ободранности» на округлостях иначе получится привет гифки 1999 год.

Создайте фаил размером 16 х 16px. Мы создадим очень простой полупрозрачный favicon с в виде буквы, с толикой глубины. Глубина будет создана за счет тени и градиента.

Рисуем фон

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

Выберите инструмент Rounded Rectangle Tool. На панели настроек выберите режим Shape Layer, что позволит рисовать в векторе. В выпадающем меню панели галочка — Snap To Pixels. Это необходимо для того, чтобы векторные контуры привязывались к пикселям и не рисовали «между» ними.

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

Применим стили для поверхности faviconа. Подробнее о стилях можно почитать в статье Стили в Фотошопе. На панели слоев выберите нашу форму и выберите Layer > Layer Styles > Gradient Overlay В появившемся окне кликните по градиенткой полоске. Это вызовет Окно настройки градиента. Задайте градиент с цветами 0059c6 и 0085d1. Нажмите ОК. Остальные параметры на картинке ниже.

Рисуем букву

Буква «Н», которая изображена на фавиконе сайте хронофаг.ру слишком проста, чтобы впутывать в это дело шрифты, поэтому я просто нарисовал её инструментом Rectangle Tool. Но давайте сделаем нечто посложнее. Выберите инструмент Type Tool и поставьте любую буквы. Для нашего урока лучше всего подойдет буква без округлостей. Я выбрал шрифт и поставил букву H.

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

Сделайте вот что. На панели настроек шрифта отключите режимы растрирования — none. Теперь трансформируйте шрифт Edit > Free Transform Немного растяните его. Отлично.

Если в вашем случае получилась ерунда, а оно может произойти в случае с режимом растрирования none, так как отсутствие сглаживания порой искажает шрифт при маленьких размерах, сделайте вот что. Переведите букву в кривые Layer > Type > Convent to Layer Shape Воспользуйтесь инструментом Direct Selection Tool.

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

Надеюсь вы уловили смысл работы. Конечно нет никакого смысла тратить столько времени если ваша буква — две палочки и крестик. Но в случае буквы «В» или «D» эту работу стоит проделать с её ровными сторонами. Мы практически приблизились к созданию favicon-а.

Добавляем тень

Конец близок, осталось добавить стили для нарисованной буквы. На панели слоев выберите слой с буквой и зайдите в Layer > Layer Styles > Drop Shadow Мне нужна легкая тень с Opasity 50% и очень четкими краями Distance 1, Spread 0, Size 2

Сохранение favicon

Чтобы сохранить полупрозрачный фавикон откройте File > Save for Web & Devices В появившемся диалоговом окне выберите PNG-24 и галочку на Transparensy. Это сделает наш фавикон полупрозначным. Осталось поместить иконку на сайт вышеперечисленными способами, или преобразовать её в формат ICO. Favicon создан.

Скачать файл:

Скачать исходники

Автор:

Как нарисовать в Photoshop логотип png и favicon ico

Повышаем узнаваемость блога в интернете

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

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

Photoshop — наше всё

Зачем тебе нужен Фотошоп

Photoshop — это тот инструмент блогера, без которого просто нельзя обойтись. Ты твёрдо и бесповоротно решил(-а) стать блогером? — Отлично! Но если ты хочешь стать успешным блогером, тебе обязательно нужно уметь пользоваться данным графическим редактором.

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

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

Стоковые фотографии для блога

Почему не стоит их использовать

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

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

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

Разработка логотипа для сайта

Каким должен быть логотип

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

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

Когда стоит заказывать разработку логотипа в дизайн-студии

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

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

Процесс создания логотипа в Фотошопе

Создаём новый документ и определяем его разрешение

Чтобы сжатие изображения после оптимизации не привело к низкому качеству картинки, следует создать документ с высоким уровнем разрешения — 300 dpi, и размерами, как минимум, — 700 x 700 пикселей. Итак, Photoshop открыт, создаём новый документ. Нажимаем комбинацию клавиш «Ctrl+N», или же кнопку «Файл» → «Создать…». Появится окно, в котором прописываем следующие параметры, см. скриншот ниже.

Нажали «OK», и тут же на рабочем столе Фотошопа появился новый документ в форме квадрата, чудненько, двигаемся дальше.

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

Как создавался логотип для этого блога

Итак, я решил что «Лампочка» для тематики «Образование» подходит наилучшим образом. Поэтому, долго не раздумывая, нажал клавишу «U» (активировать данный инструмент можно также через левое меню), кликнул правой клавишей мышки по пустому полю редактора, тем самым вызвав меню произвольных фигур. После этого, кликнул по иконке с лампочкой, см. картинку ниже.

Рисуем фигуру

Прижав клавишу «Shift» (чтобы сохранить правильные пропорции фигуры) и левую клавишу мышки, проводим по новому документу, рисуя фигуру лампочки. Как результат, в квадрате появилась картинка, которая изображена справа.

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

Удаляем лишние элементы

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

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

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

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

Заливка цветом выделенной области

Итак, сперва выделил по белому контуру область заливки. Затем залил её, используя сочетание клавиш «Alt+Del».

Следи за тем, чтобы нужный цвет заливки находился сверху в панели переключения цветов переднего и заднего плана — «X». Если заливочный цвет находится снизу, тогда нужно нажимать сочетание клавиш «Ctrl+Del».

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

Придаём фигуре объём

В графическом редакторе Photoshop есть замечательная панель инструментов под названием «Стиль слоя», вызвать которую можно дважды кликнув по слою, или при помощи соответствующей иконки в нижней панели пиктограмм. На скриншоте ниже, представлены параметры инструмента «Тиснение», который я использовал для придания объёма плоскому объекту.

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

Завершающие штрихи обработки

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

Сжатие и сохранение файла

Мы на финишной прямой. Остаётся лишь сжать наш логотипчик и сохранить его на ПК.

Перед дальнейшими манипуляциями с исходным файлом (который 300dpi), обязательно сохрани его на своём ПК в формате «PNG», а лучше «PSD». Чтобы со временем можно было вернуться к его редактированию, когда возникнет такая необходимость. А она обязательно возникнет, уж поверь…

После обработки файла, ему нужно задать те или иные физические размеры в пикселях, после чего сохранить для использования на своём сайте. Но сохранять его нужно с оптимизацией для WEB. Итак, сначала задаём размеры. Пусть это будут такие параметры: ширина 200px, высота 200px, разрешение 72 dpi, см. скриншот ниже.

После изменения физических размеров и разрешения файла, переходим к оптимизации изображения. Кликаем по пункту меню «Файл» → «Сохранить для Web и устройств», см. скриншот ниже.

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

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

Создание favicon для блога

Превращаем логотип в фавиконку за одну минуту

На рабочем столе Фотошопа открыт исходный большой файл с логотипом, замечательно. Сейчас будем менять его размеры на: 16×16 или 32×32, без разницы, главное установить разрешение 72 dpi. После изменения размера, сразу же переходим к сохранению этого файла в формате «.ico». Открываем уже знакомое меню «Файл» → «Сохранить как…» или «Shift+Ctrl+S», см. коллажо-скриншот ниже.

Далее выбираем из выпадающего меню нужный формат (1), и сохраняем файл (2). После этого, находим этот файлик в папке, и спокойно переименовываем его с «logo.ico» на «favicon.ico» (3). Всё, наша фавиконка успешно создана! А чтобы ещё больше ускорить процесс создания favicon, можно прямо на втором шаге (2) изменить имя файла, и сохранить его с правильным именем, то есть «favicon.ico», см. схему ниже.

Таким образом, всего за несколько минут работы в редакторе Photoshop, мы создали два важных для блога файла — логотип и favicon. В следующей статье я расскажу как их «прикрутить» к блогу. То есть, каким образом добавить логотип в тему WordPress и установить Favicon на сайт. Собственно, там и встретимся. До встречи!

❔Чтобы понять насколько ты в теме, пройди тест 👇

Что такое Favicon? Подробное руководство по фавикону для сайта

Содержание

Что такое Favicon?

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

Обычно favicon создают в классическом формате ICO. Стандартный размер иконки составляет 16 x 16 пикселей с 16, 24 или 32-битной поддержкой цвета и прозрачности. Намного позже, стали появляться новые расширения, которые зависят от типа и операционной системы устройства: 32 x 32, 48 x 48, 96 x 96 и другие. Но обычно браузеры отображают иконки в формате 16 x 16.

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

Почему favicon очень важен?

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

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

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

Пример отображения фавикон в выдаче поисковой системы Яндекс:

Пример отображения фавикон в мобильной выдаче Google:

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

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

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

Примеры Favicon

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

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

Как создать favicon для сайта?

Существует несколько способов создать favicon:

1. Нарисовать его самостоятельно в графическом редакторе.

2. Нарисовать иконку в специальном онлайн-сервисе.

3. Найти и скачать иконку, воспользовавшись бесплатным стоком (Findicons.com или Iconizer.net).

4. Загрузить имеющийся логотип или любое другое изображение в онлайн-генератор favicon, представленных ниже, а затем сохранить его:

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

Как создать иконку в Photoshop?

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

Однако, лично я рекомендую использовать связку: Photoshop + программа Art Icons Pro – это популярный редактор иконок (российская разработка), который позволяет создавать и редактировать иконки. Программа поддерживает экспорт и импорт множества графических форматов.

Работать в «Art Icons» просто. Как делаю обычно лично я, когда хочу создать favicon:

• Захожу на сайт, для которого нужно сделать иконку.
• Делаю скриншот места на сайте, где размещен логотип.
• Открываю Photoshop, вставляю изображение из буфера обмена.
• Обрезаю изображение скриншота так, чтобы логотип был в его центре + нужно иметь в виду, что после обрезки само изображение должно быть квадратной формы.
• Далее сохраняю его в PNG. Закрываю Photoshop.
• Затем открываю сохраненную картинку в «Art Icons».
• Уменьшаю изображение до размера 16 x 16 пикселей: «Инструменты -> Конвертировать формат…» и выбираю размер 16 на 16 и цвета «True Color + Apha (32 бит)».
• Затем выбираю «Файл -> Сохранить как…» и выбираю формат «Icon (*.ico)».
• Все.

Ну и самый простой вариант – онлайн-генераторы Favicon. Примеры подобных онлайн-сервисов:

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

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

• Загрузите favicon.ico на ваш сервер в корневую папку.
• В блоке HEAD вашего сайта пропишите ссылку на favicon в виде:
  • <link href=»/favicon.ico» rel=»shortcut icon»>.

• Все!

Вот видите – все просто!

Создайте свой favicon и убедитесь в этом сами!

Дизайн веб-сайта Favicon в Photoshop

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

Ладно, приступим.

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

И вот ваш значок завершен. Очень просто.

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

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

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

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

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

Favicon — Как создать Favicon.ico

Попробуйте перед покупкой . Загрузите любой продукт Adobe и получите бесплатную 30-дневную пробную версию .

Попробуйте Adobe Stock бесплатно в течение одного месяца — скоро закончится!
Вот отличное предложение от Adobe, которое продлится только до конца ноября — получите 10 бесплатных изображений Adobe Stock. Предложение заканчивается 30 ноября.
Ваш первый месяц будет возвращен, когда вы подпишетесь на один год в Adobe Stock (план 10 изображений в месяц) по цене 29 долларов США.99 / мес. (плюс применимые налоги) Отмена без риска в течение первого месяца.

Mysteries Of The Favicon.ico — Как создать Favicon в Photoshop

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

Все, что вам нужно для добавления значка Favicon на свой сайт, — это файл значков Windows (.ico), обычно называемый favicon.ico, который вы загружаете в основной каталог своего веб-сайта. В настоящее время большинство браузеров, помимо Internet Explorer, могут вместо этого использовать GIF (включая анимированные) или PNG (включая полную прозрачность). Но поскольку все браузеры, включая IE, понимают формат .ico, и поскольку в нем есть много интересных функций, которых нет в GIF и PNG, читайте дальше, чтобы узнать, как его создать.

Скачать плагин

Для экспорта в формат файла ICO вам понадобится плагин Photoshop в формате Windows Icon (ICO). Вы можете скачать плагин из Telegraphics. Плагин читает и записывает файлы ICO в 1, 4 и 8-битном индексированном и 24-битном режимах RGB, а также считывает и записывает 32-битные значки «XP» (с 8-битным альфа-каналом). Обязательно установите плагин, прежде чем приступить к этому руководству.

Давайте начнем
Поскольку 16 x 16 — это такая маленькая область холста, может быть очень сложно проявить творческий подход.Поэтому вместо этого начните свой проект с холстом, установленным на 64 x 64 (всегда используйте четные числа, если вы планируете изменять размер файлов). Сделайте это, выбрав «Файл»> «Создать» и открыв новый холст размером 64 x 64 пикселя.

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

Когда вы будете готовы протестировать дизайн, выберите меню «Изображение»> «Размер изображения» и введите 16 x 16.Нажмите «Resample Image» и выберите «Bicubic Sharper» из раскрывающегося меню (CS только для этого шага). Это лучшая настройка, позволяющая убедиться, что изображение не размывается при изменении размера. Если он по-прежнему недостаточно резкий, вернитесь и увеличьте резкость, перенасыщите и / или увеличьте контраст исходного изображения, а затем снова измените его размер.

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

Сохранение пользовательского значка
Перейдите в меню «Файл»> «Сохранить как» и убедитесь, что вы назвали файл favicon.ico. В разделе «Формат» в раскрывающемся меню необходимо выбрать значок Windows (ICO). Этот формат будет доступен в Photoshop только после того, как вы загрузите и установите плагин. На следующем шаге вам нужно будет загрузить этот новый файл в корневую папку вашего веб-сайта, поэтому сейчас рекомендуется перейти и сохранить его в этом месте на жестком диске.

Загрузка значка Favicon.ico файл

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

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

(Некоторые считают, что на самом деле более правильным является следующее: Вы можете использовать оба, если хотите!)

Если вы хотите использовать вместо этого GIF или PNG, используйте этот формат (просто помните, что он не будет работать в IE) : или

Тестирование

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

Устранение неполадок
Проблемы с браузером : Microsoft IE 6 для Windows не будет отображать значок, пока URL-адрес не будет добавлен в избранное. Или попробуйте этот трюк: перейдите в адресную строку, щелкните существующий (обычно это IE по умолчанию) значок, затем немного «покачивайте» его и отпустите. Это перезагрузит страницу и должен появиться новый значок.

Safari для MAC не будет отображать обновленный значок, пока кеш браузера не будет очищен. Но выбор «пустой кеш» из меню не поможет, потому что Safari хранит значки в отдельном кеше.Выберите «Правка»> «Сбросить Safari» и установите флажок «Удалить все значки веб-сайтов». Если вы не можете его найти, очистите кеш значков самостоятельно. Найдите его в «Пользователь»> «Библиотека»> «Safari»> «Иконки». В версии Safari для Windows найдите C: \ Documents and Settings \ YourUserName \ Local Settings \ Application Data \ Apple Computer \ Safari \ WebpageIcons.db. Закройте Safari, удалите файл, перезапустите Safari. (Иногда вам также необходимо перезагрузить компьютер.)

В FireFox очистите кеш и перезапустите браузер. В Opera просто обновите.

Windows на самом деле может быть самым верным в том, что не обновляет значки для ярлыков Интернета (например, на рабочем столе). Этот совет от www.vistax64.com/tutorials :

1. Щелкните правой кнопкой мыши на рабочем столе.
2. Выберите «Персонализация» и выберите «Настройки дисплея» (или просто «Настройки» в XP).
3. Измените цвет с 32-битного на 16-битный и нажмите «Применить».
4. Измените цвет на 32 бита и нажмите «Применить».

Формат файла недоступен : Формат файла Windows Icon (ICO) будет недоступен, пока вы не загрузите и не установите плагин, а затем не закроете и не перезапустите Photoshop.

Устранение неполадок Обновление
Один человек, у которого были проблемы с Internet Explorer 7, прислал нам небольшой совет:
У меня были проблемы с IE 7, но добавление этих двух строк кода решило проблему: Я нашел информацию здесь:
www.webmasterworld.com/ html / 3251565.htm

И Шариф отправляет это: По моему опыту, Internet Explorer кажется немного нестабильным с точки зрения времени, которое требуется, прежде чем вы решите отобразить значок.Я пробовал много вариантов кода, но в большинстве случаев значок не отображается сразу, однако недавно я обнаружил полезный совет: как только вы разместите код на своих веб-страницах и загрузите файл favicon.ico на свой сервер, перейдите к файлу favicon.ico (www.yoursite.com/favicon.ico), и браузер (IE 7) немедленно отобразит значок и сохранит его.

Фавиконы с несколькими разрешениями

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

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

Вы можете это исправить. Одна из замечательных вещей.ico заключается в том, что они могут содержать нескольких версий значка с разными размерами и глубиной цвета (вроде как анимированный GIF содержит несколько кадров). Когда они это делают, Windows использует наиболее подходящий размер и глубину цвета. Для размеров наиболее распространены 16×16, 24×24, 32×32 и 48×48 пикселей, и все они могут быть объединены в один файл .ico.

Создание значка с разным разрешением не намного сложнее, чем то, что вы сделали для создания своего значка 16×16, Telegraphics, там же, где вы разместили свой плагин favicon, также имеет другой плагин http: // www.telegraphics.com.au/sw/info/icobundle.html, который позволяет объединить несколько значков в один файл .ico. На самом деле это не плагин, а отдельная программа для Windows (используется в командной строке) или MacOS (перетаскивание и
уронить). Существует также множество автономных инструментов, которые создают для вас значок с разным разрешением из одного начального изображения. Вот пара, которую можно попробовать бесплатно: www.sibcode.com/icon-studio и www.aha-soft.com/anytoicon .

Что касается глубины цвета… опять же, если вы работаете в Windows, вы, возможно, заметили раньше, что некоторые значки на вашем рабочем столе имеют неровные края, в то время как другие плавно переходят по краям. Плавное наложение связано с тем, что эти значки содержат версию с 32-битной глубиной цвета, которая обеспечивает настоящую прозрачность, как и ваши слои в Photoshop. Вы можете создать 32-битную версию своего значка, а также 24-битную (16 миллионов цветов, прозрачность в формате gif), 16-битную (256 цветов) или даже 8-, 4- или 2-битную … все из которых снова можно было хранить в одном.ico файл!

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

16×16, 16-битные (256) цвета
16×16, 32-битные цвета
32×32, 16-битные (256) цвета
32×32, 32-битные цвета
48×48, 16-битные (256) цвета
48×48 , 32-битные цвета

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

Вдохновение

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

Вот и все. Наслаждайтесь своими избранными!

Скидка Creative Cloud — Скидка 40% на Adobe Creative Cloud

Текущие пользователи Creative Suite — Скидка 40% в первый год использования Adobe Creative Cloud.Предложение доступно для всех зарегистрированных пользователей отдельных продуктов и пакетов CS3 или более поздних версий. Недоступно для образовательных учреждений или клиентов с корпоративным лицензированием.

Простая ежемесячная подписка на Adobe Creative Cloud дает вам всю коллекцию инструментов CS6 и многое другое. Любите печатать? Заинтересованы в веб-сайтах и ​​приложениях для iPad? Готовы редактировать видео? Вы можете все это сделать. Кроме того, участники Creative Cloud автоматически получают доступ к новым продуктам и эксклюзивным обновлениям сразу после их выпуска.А благодаря облачному хранилищу и возможности синхронизации с любым устройством ваши файлы всегда будут там, где они вам нужны. Creative Cloud доступен для отдельных лиц или групп.

Программное обеспечение onOne для цифровых фотографов — эксклюзивная скидка 15%

Программное обеспечение onOne — это самый быстрый и простой способ сделать ваши изображения необычными. Они работают везде — с Photoshop, Lightroom, Aperture и как отдельные приложения. Используйте код скидки PSSPPT06 , чтобы получить скидку 15% на любой продукт onOne.

Perfect Photo Suite
— Все, что вам нужно для реализации вашего фотографического видения
— Семь интегрированных продуктов для вашего рабочего процесса фотографии
— Perfect Effects: Создание впечатляющих изображений
— Perfect Portrait: Простая мощная ретушь
— Perfect Resize (Genuine Fractals ): Увеличение изображений для печати
— Perfect Layers: мощь слоев без Photoshop
— Perfect Mask: необходимый инструмент для вырезания
— FocalPoint: установите фокус там, где вы хотите
— PhotoFrame: границы, фон, текстуры и украшения

Perfect Effects
— Добавляйте популярные HDR и ретро-образы
— Воссоздайте внешний вид пленок и техник темной комнаты
— Завершайте изображения с помощью виньеток, текстур и границ

Perfect Portrait
— Простое мощное ретуширование портрета
— Автоматическое сглаживание кожи и удаление пятен
— Мгновенное улучшение глаз и зубов

Perfect Mask
— Удаление фона с помощью одним щелчком мыши
— Легко обрезать такие жесткие вещи, как волосы, стекло и ветки деревьев
— Все лучшие инструменты маскирования без Photoshop

Perfect Resize
— Увеличение изображения высочайшего качества на основе Genuine Fractals
— Увеличить мобильный с телефона на цифровую зеркальную камеру до 1000%
— Сохранение резкости и детализации исходной фотографии

FocalPoint
— Мгновенное создание образа светосильных и дорогих объективов
— Регулировка глубины резкости после снимка
— Имитация творчества Внешний вид объективов с наклоном и сдвигом

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

Perfect Layers
— Расширьте возможности редактирования изображений Lightroom & Aperture
— Объединение лучших частей нескольких фотографий
— Ретушь портретов и пейзажей

Эксклюзивная скидка 15% на плагины, пакеты и обновления Topaz

Введите наш эксклюзивный код купона на скидку PHOTOSHOPSUPPORT во время процесса оформления заказа в Topaz Labs, чтобы получить мгновенную скидку 15% на любой продукт Topaz, включая комплекты и обновления.

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

Topaz Adjust
Создавайте потрясающие и динамичные изображения с помощью этого уникально мощного плагина, который обладает возможностями, подобными HDR, и улучшает экспозицию, цвет и деталь.
Topaz InFocus
Topaz InFocus использует последние достижения в технологии деконволюции изображения для восстановления, уточнения и повышения резкости деталей изображения.
Topaz Detail
Трехуровневый плагин настройки деталей, который специализируется на улучшении микроконтрастности и резкости без артефактов.
Topaz ReMask
Самая быстрая и эффективная программа маскирования и извлечения с уточнением маски в один клик.
Topaz DeNoise
Плагин высочайшего качества для шумоподавления, который удаляет большинство шумов и цветовых шумов, сохраняя при этом большую часть деталей изображения.
Topaz Simplify
Обеспечивает творческое упрощение, художественные эффекты и акцентирование линий для легкого единственного в своем роде искусства.
Topaz Clean
Управляйте глубиной деталей ваших изображений с помощью обширных инструментов сглаживания, управления текстурой и улучшения краев.
Topaz DeJPEG
Значительно улучшает качество веб-изображений и других сжатых фотографий.

Узнайте больше о комплекте плагинов Topaz для Photoshop. Загрузите бесплатную пробную версию.

Веб-шаблон Photoshop — Учебник по дизайну веб-сайта
Узнайте, как создать веб-шаблон Photoshop с помощью этого руководства по дизайну веб-сайта.Включает готовую веб-страницу с кодом и ссылками на бесплатные ресурсы.

Pixel Fonts спешат на помощь — как их использовать и где их взять
Графические дизайнеры, работающие над веб-проектами, часто жалуются, что когда шрифты, предназначенные для печати, имеют меньший размер, их становится труднее читать и они становятся непривлекательными для глаз. Даже использования сглаживания (параметр сглаживания в палитре символов) недостаточно, чтобы эти шрифты лучше смотрелись на экране. Решение, когда это происходит, состоит в том, чтобы полностью отказаться от шрифтов принтера и попробовать использовать шрифт Pixel, который будет давать четкое, чистое изображение при очень маленьких размерах.

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

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

Инструмент для веб-дизайна Site Grinder

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

По сути, Photoshop — это дизайнерская студия без ограничений, предлагающая художнику, казалось бы, бесконечный набор творческих возможностей. С другой стороны, HTML, CSS, Java и тому подобное следуют строгим правилам взаимодействия, требующим от разработчика принятия во внимание любого количества эзотерических проблем, чтобы гарантировать правильное отображение дизайна в сети.

Превратите Photoshop в полноценный инструмент веб-дизайна
SiteGrinder стремится преодолеть этот разрыв между дизайном и разработкой. По сути, SiteGrinder превращает Photoshop в простой в использовании и полнофункциональный инструмент веб-дизайна. С SiteGrinder у дизайнеров теперь будет свобода полностью дать волю своему творчеству, а затем, не пропуская ни секунды, перенести свои проекты в Интернет. SiteGrinder объединяет эстетические аспекты с практическими соображениями и представляет собой удивительно мощный инструмент, который станет фантастическим дополнением к набору уловок любого веб-дизайнера.Версии разблокируемой демоверсии SiteGrinder для Mac OS X и Windows доступны для скачивания.

lynda.com онлайн-библиотека обучения — просмотр бесплатных видеоклипов

Подписка на онлайн-библиотеку lynda.com обеспечивает доступ в любое время к десяткам тысяч видеоуроков по Photoshop, Illustrator, Dreamweaver, веб-дизайн, цифровые изображения, 3D, цифровое видео, анимация и многие другие темы.Просматривайте бесплатные видеоклипы.

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

Плагин Photoshop Masking Fluid Mask — эксклюзивная мгновенная скидка

4 1/2 из 5 звезд обзора Fluid Mask на MacWorld начинается с того, что этот плагин Photoshop облегчает извлечение фона, «Fluid Mask — очень эффективный инструмент для отделения объектов от их фона. Он предлагает множество полезных функций для решения практически любого сложного изображения, от тонких волос до сложной листвы».Онлайн-видеоуроки и интерактивные обучающие семинары помогают упростить процесс обучения ».

Наши друзья из Vertus, разработчики плагина Fluid Mask Photoshop, создали специальную эксклюзивную скидку на PhotoshopSupport.com. Перейдите на нашу страницу Fluid Mask, чтобы получить специальную информацию. , эксклюзивная ссылка на скидку.

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

Формат файлов Photoshop ICO и как создавать значки

Favicons — это на первый взгляд (и буквально!) Небольшой, но важный способ продвижения вашего бренда на вашем сайте. Мы визуальны по своей природе, то есть с большей вероятностью узнаем эту маленькую синюю птичку для Twitter или этот красный конверт для Gmail быстрее, чем мы их имена, когда просматриваем нашу панель закладок.Вы можете сами создавать значки, создавая файлы ICO в Photoshop. Такой курс, как краткое руководство по Photoshop CC, научит вас значкам и многим другим вещам, о которых вы даже не подозревали, умеет Photoshop.

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

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

Что такое Favicon?

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

Значок

Udemy.com представляет собой небольшой зеленый квадрат с заглавной буквой U, как показано на вкладке выше.

Favicons сохраняются как файлы ICO, формат файла, который сохраняет несколько изображений разных размеров для целей масштабирования. Все значки в Windows, от исполняемых файлов рабочего стола до приложений из меню «Пуск», сохраняются с расширениями файлов .ico.

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

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

Шаг 1 — Установите плагин

Плагин можно найти на веб-сайте Telegraphics. Вам нужна загрузка с пометкой ICO (Windows Icon) Format, которая доступна как для Mac, так и для Windows.

Чтобы установить плагин, сначала убедитесь, что Photoshop закрыт. Извлеките загруженные файлы и поместите их в подпапку Plug-Ins> File Formats в указанном месте Adobe Photoshop.

Теперь, когда вы открываете Photoshop, создаете новый документ, нажимаете «Сохранить как» и расширяете раскрывающееся меню, тип файла ICO должен быть опцией.

Шаг 2. Создайте свой значок в документе размером 64 × 64

Если вы полный профессионал и можете работать в пределах 16 × 16 пикселей, дерзайте! Но если вам нужно немного больше места для работы, вы можете начать с документа размером 64 × 64 пикселя, а затем масштабировать его позже.

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

Для нашего примера значка мы создали простой градиентный фон и одну букву «А» для обозначения нашего «бренда».

Шаг 3. Уменьшите масштаб до 16 × 16

Теперь пора изменить размер значка, чтобы он был совместим с веб-браузерами.Выберите Изображение> Размер изображения в меню вверху или нажмите Alt + Ctrl + I и измените размер на 16 × 16. Убедитесь, что это пиксели, а не дюймы.

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

Если все сделано правильно, вы должны увидеть, что ваш значок 64 × 64 преобразован в значок 16 × 16!

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

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

Шаг 4. Сохраните значок как ICO или файл типа .ico

Это простой шаг. Если вы установили подключаемый модуль правильно, пора перейти в меню «Файл»> «Сохранить как», открыть раскрывающееся меню и выбрать ICO (значок Windows) (*.ICO) вариант. Нажмите кнопку «Сохранить», и вам будет предложено указать формат значка.

Рекомендуется сохранить файл как стандартный ICO, поскольку формат PNG (Vista) не очень совместим.

После нажатия ОК вы можете запутаться. Почему приложение Photoshop по-прежнему ссылается на наш значок как на .psd, когда мы только что сохранили его как ICO? Это потому, что файл ICO нельзя редактировать в Photoshop. Просто попробуйте открыть его и посмотрите. После того, как вы сохраните свой значок как ICO, этот файл ICO станет окончательным.Если вы хотите внести в него изменения, вам придется продолжать редактировать файл .psd, пока вы не будете удовлетворены конечным продуктом, и снова сохранить его как ICO.

Использование вашего ICO-файла на вашем веб-сайте

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

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

Затем убедитесь, что вы вставили следующее между тегом в HTML-документе для вашей домашней страницы:

 <заголовок>

 

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

И у вас получилось! Вы создали уникальный значок для своего веб-сайта и научились его использовать. Дополнительные советы по веб-дизайну и графическому дизайну можно найти на следующих курсах Udemy:

Последнее обновление страницы: январь 2014 г.

Создание значка для вашего веб-сайта

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

Создайте свой значок

Дизайн значков размером всего 16 на 16 пикселей может оказаться сложной задачей. Изображения и замысловатые логотипы компаний становятся неузнаваемыми при масштабировании до такого маленького размера, поэтому вам нужно будет придумать что-то простое и, да, знаковое — например, первую букву вашего имени или, возможно, один графический элемент из логотипа вашей компании. Вы можете создать значок с помощью любого графического редактора, но для этого примера мы будем использовать Adobe Photoshop CS4 (). Мы также будем создавать значок в новой версии.png, который позволяет создавать полноцветные значки со сглаженными краями. Обратите внимание, что значки значков могут быть больше квадрата 16 пикселей, чтобы учесть их использование в списках закладок и RSS-каналах, но в этой статье мы сосредоточимся на том, как создать значок, который будет отображаться в адресном окне вашего браузера.

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

Загрузка вашего значка

Экспорт значка для использования в Интернете очень прост. Выберите «Файл» -> «Сохранить для Интернета и устройств», а затем выберите «PNG-24» во всплывающем меню «Предварительные настройки». Нажмите «Сохранить», введите favicon.png в качестве имени файла и еще раз нажмите «Сохранить». Теперь перейдите в Finder, найдите файл и переименуйте его в «favicon.ico». Finder попросит вас подтвердить, что вы хотите изменить расширение файла; нажмите «Использовать .ico», чтобы продолжить.

Последний шаг — загрузить файл на ваш веб-сайт.Запустите программу FTP и найдите корневой каталог вашего веб-сайта, в котором обычно находится ваша домашняя страница (например, home.html, index.html или index.shtml). Загрузите файл favicon.ico в этот каталог, и все готово. Используйте свой веб-браузер, чтобы посетить свою домашнюю страницу, и ваш новый значок должен появиться рядом с вашим веб-адресом в поле адреса. Если вы хотите быть абсолютно уверены, что ваш значок отображается, вы можете добавить следующий код в раздел заголовка своей страницы:

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

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

Крис Маквей — автор, иллюстратор и фотограф игрушек из Галифакса, Новая Шотландия.

Экшен Photoshop Favicon Creator для одержимых

Я создал экшен Photoshop после того, как меня раздражали значки и все их варианты.Его можно скачать на GitHub. Этого довольно много, но всего он создает 13 иконок. Список поддержки очень длинный! Я попытался охватить все, включая (но не ограничиваясь ими): IE11, Edge, Chrome 4+, FireFox 2+, Opera 10.1+, Safari 3.1+, iOS Safari 6+, Google TV, Android Browser 2.1+, Chrome для Android, FireFox для Android, UC Browser для Android, Samsung Internet, QQ Browser, Chrome Store, закрепленные сайты для Windows 8+.

29

Установка

1. Загрузите Photoshop Action и дважды щелкните, чтобы распаковать
2. В Photoshop в меню действий щелкните меню гамбургера и выберите действия загрузки
3. Найдите Favicon Creator

Использование действия

Изображение по умолчанию должно быть квадратным и иметь размер более 228 x 228 пикселей (я лично рекомендую использовать более высокое разрешение).Нажмите кнопку воспроизведения, и действие создаст значки 13 размеров в PNG.

Оптимизация

Неоптимизированные PNG из Photoshop, как правило, довольно большие. Я настоятельно рекомендую пользователям macOS бесплатное приложение ImageOptim для сжатия PNG без потерь. Это безумно просто. Перетащите все недавно созданные PNG, чтобы избавиться от ценных КБ изображений без потери качества.

Для более навязчивых пользователей macOS ImageAlpha (работает в тандеме с ImageOptim), поскольку позволяет пользователям использовать индексированные цветовые профили для еще большего уменьшения размеров файлов.PNGquant изначально работает в Photoshop, а TinyPNG предоставляет бесплатную услугу, которую можно использовать из вашего веб-браузера. См. Шпаргалку по favicon для утилит CLI.

Favicons и вы

Как упоминалось выше, этот набор Favicons включает поддержку (но не ограничиваясь ими): IE11, Edge, Chrome 4+, FireFox 2+, Opera 10.1+, Safari 3.1+, iOS Safari 6+, Google TV, Android Browser 2.1+, Chrome для Android, FireFox для Android, UC Browser для Android, Samsung Internet, QQ Browser, Chrome Store, закрепленные сайты для Windows 8+.

Так что же остается? IE8-IE10 и значки начального экрана Windows. IE8-10 требует форматов .ico. В частности, если вы решите включить favicon.ico, Safari будет использовать Favicon.ico (macOS / OSX) вместо версии PNG. Это означает, что вам нужно будет создать значок калибра сетчатки. См. Руководство DaringFireball.

Из-за необычного формата плиток Windows 8-10 я бы рекомендовал создавать их отдельно.

HTML (разместить в голове)

Действительно ли все это необходимо / есть ли штраф за включение всех этих изображений?

Как часто вы действительно добавляете веб-сайты в закладки? Это честный вопрос.Фавиконы наиболее полезны для просмотра на рабочем столе, поскольку они служат хорошим индикатором. 32×32 — это единственный значок Favicon, который действительно имеет значение, остальные — это значки для сайтов закладок. Если вы создали только один значок 32×32, вы поддержали бы примерно 95% пользователей настольных и мобильных устройств (хотя и с оговорками). Больше всего проигрывают мобильные Safari, Chrome для iOS, Opera Mini, браузер Blackberry, которые лишены всяких лишних людей, требующих собственных форматов или вообще не поддерживающих 32×32. iOS Safari / Chrome использует только размер значка сенсорного значка для закладок в доке.Скорее всего, ваши пользователи никогда не увидят значок.

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

Twitter Cards и FaceBook OpenGraph — это новый Favicon

Пользователи теперь ожидают, что Favicons и репосты в социальных сетях будут столь же привлекательными. И OpenGraph, и Twitter Cards требуют немного больше усилий для поддержки: вам нужно заполнить дополнительные метаданные, но размеры изображений можно найти ниже.Любой набор может использоваться с обычными метаданными для создания других сервисов (Slack или сообщения iOS в сообщениях iOS 10 / macOS) для совместного использования в социальных сетях с более красивыми превью сайтов.

FaceBook Best Practices for Images

Сводная карточка Twitter с большим изображением

Google MetaData Console

Планы на будущее

Следующим шагом будет создание версии этого автомата для OS X, так что вам совсем не понадобится Photoshop: D

Photoshop создать значок

Короче говоря, значки значков важны, так как они связаны с вашим брендом.Мы научимся создавать значки тремя способами: Онлайн-генератор значков (самый простой и бесплатный) Плагин для Photoshop Photoshop. Может кто-нибудь из разработчиков уточнить? Один для вариантов значков, которым требуется прозрачный фон, и один для вариантов значков, которые лучше всего работают с сплошным фоном. Требуемые размеры фавикона — 16 × 16. При необходимости измените размер значка с помощью правой панели. К сожалению, есть одна проблема — он не поддерживает полноценную работу с «.ico ». Создание значка онлайн и загрузка значка — простые задачи. Photoshop — популярный графический редактор для создания изображений. Сегодня FavIcon в изобилии, самых разных размеров, но спорить с ними — очень больно. Существует множество инструментов, которые можно использовать для создания значка за несколько минут. Кнопка ниже. Загрузите плагин для Photoshop, который позволяет сохранить файл в формате Windows Icon (ICO). Photoshop — это гибкие программы Bildbearbeitungsprogramm, das Ihnen hilft, das Favicon für Ihre Website zu erstellen.Вы можете сделать его больше, если хотите, размером 64 x 64 пикселей, чтобы увидеть, как он будет выглядеть в большем размере. Нарисуйте фавикон онлайн и установите прозрачный фон, например, через https://www.favicon.cc; Загрузите свое изображение на https://www.lunapic.com и выберите, какой цвет должен быть прозрачным. С помощью этого бесплатного генератора значков вы можете либо загрузить изображение для создания значка, либо создать собственный значок значка, нарисовав его с помощью мыши. Добавление поддержки кроссбраузерности также может быть сложной задачей.Не добавляйте слишком много деталей, это просто сделает его беспорядочным. Например, см. Учебник «Тайны Favicon.ico — Как создать значок Favicon в Photoshop» от Дженнифер Эппл, статью «Создание значка веб-сайта в Photoshop… Как создать значок Favicon». Шаг 1. Получите начальное изображение для Favicon. Учебное пособие по Photoshop Favicon Обновлено 7 мая 2008 г. Некоторые читатели прислали несколько отличных советов по работе с иконками, поэтому я сделал серьезное обновление своего учебника по иконкам. Нажмите кнопку «Создать значок»! Поддерживаемые Favicon форматы: ico, gif, png, но мы сосредоточимся только на формате ico, потому что это стандарт w3C.Некоторое программное обеспечение позволяет создавать значок вручную. Как создать значок Favicon в Figma 1. Найдите изображение, которое вы хотите использовать в качестве Favicon, и убедитесь, что его размеры идеально квадратные (т.е. обновлены для Photoshop CS4. Favicons — это симпатичные маленькие значки, которые появляются на панели браузера, когда ваш веб-сайт открыт. Шаг 4. Я нашел этот веб-сайт, чтобы создать формат изображения favicon.ico. Сделать преобразование в формат файла favicon.ico для понимания браузером. Как создать значок Favicon в Photoshop.Создайте свой образ. На артборде под названием «Created Your Icons» есть два смарт-объекта. Также есть возможность создавать значки значков с анимацией. Это настраиваемый значок, созданный для определенного веб-сайта, который мы посещаем, который отображается на панели навигации, закладках, вкладках и даже в виде ярлыка на рабочем столе Windows. Во-первых, Photoshop (каким бы мощным он ни был) не может выводить файл в формате ICO (значок). Создать или… Создайте кадр 128 × 128. Затем просто перезапустите Photoshop. Этот проект включает в себя простой экшен Photoshop, файл эскиза с предопределенным экспортом и скрипт MacOS Automator, который создает 14 значков… Черт возьми, есть даже путаница вокруг произношения значка (я слышал, что он сказал «фа-ви-кон» и «любимый» -eye-con », хотя первое встречается чаще).Мне нужно создать файл favicon.ico для моего веб-сайта в нескольких размерах. Favicon Creator Action для одержимых. Инструкции. Вы можете легко создать значок в Photoshop, используя следующую процедуру: Как только вы что-то спроектируете, вы просто сохраняете файл как значок и выбираете формат ICO. Если вы разработали веб-сайт, как только он будет готов, вы должны спроектировать и добавить значок. Здесь вы можете увидеть значок этого веб-сайта. Выберите логотип, который вам нравится. Есть и другие способы сделать их … но для тех из вас, кто считает Photoshop своим «лучшим другом» (вы знаете, кто вы), давайте останемся верными.Чтобы лучше контролировать качество вашего значка, вы можете пропустить бесплатный генератор и перейти в Photoshop. В Photoshop выберите «Файл» -> «Создать», а затем введите размер пикселя 512 на 512 при 72 пикселях на дюйм и с прозрачным фоном. Favicon ist zwar ein kleines Element, aber ein wesentliches Element auf der Website.Es kann, zum Beispiel, so auf Ihrer Website aussehen :. Выберите и нажмите кнопку «Экспорт» справа… Это также позволяет создавать значки с нуля с помощью удобного онлайн-редактора.Отредактируйте значок в соответствии со своими потребностями или выполните поиск в нашей галерее. Мы начнем со следующего изображения PNG для нашего значка. Теперь программа не поддерживает файлы значков, но вы можете добавить веб-расширение из Telegraphics, чтобы выполнить свою работу. Позвольте мне воспользоваться моментом, чтобы показать вам, как создать «фавикон» с помощью Photoshop. Перейдите в папку с файлом на вашем компьютере и выберите изображение. Как создать фавикон? Как создать фавикон в фотошопе. Фавиконы может быть сложно создать как технически, так и эстетически из-за их необычного формата файла и небольшого размера изображения.Создайте значок — значок адресной строки или значок закладки для вашего блога и веб-сайта. Создание значка для вашего веб-сайта с расширением файла .ico по-прежнему возможно в Photoshop 2020 (также называемом photoshop cc 2020 и photoshop 2020 cc). Шаг 1. Щелкните правой кнопкой мыши свой значок вверху. Здесь можно изменить размер, чтобы изображение стало крошечным для использования в качестве значка. Один из этих значков — это способ выделиться на фоне других веб-сайтов. Убедитесь, что это идеальный квадрат, и измените его размер до 256 × 256 пикселей, ПРЕЖДЕ чем попытаться сохранить его как файл.ICO файл. Для этого выполните следующие действия: Шаг 1. 4. Создайте новый файл в фотошопе, я бы порекомендовал 152 x 152 пикселей, так как это самый большой используемый на данный момент размер значка. Меня немного смущает формат файла favicon.ico. Вы можете выбрать цвета, которые хотите использовать, с помощью палитры цветов, а также переключить прозрачность значка значка. Теперь у вас есть FAVICON в формате .ICO. Это простой процесс посадки: создание изображения размером 16 x 16 пикселей (распознавание изображения). По-прежнему можно использовать плагин Photoshop от Telegraphics для создания значков и.ico изображения. Вот как. Photoshop чрезвычайно популярен среди профессиональных графических дизайнеров, поддерживая создание как в форматах .ico, так и в файлах .png. Существуют также специальные программы для редактирования значков, которые вы можете найти в Интернете. Favicon придает сайту индивидуальный и графический вид, пользователи могут легко находить закладки с помощью значков. Кажется, есть некоторые плагины Photoshop, а другие говорят, что PNG, и переименования .png в .ico вполне достаточно. 2. После создания значка с помощью этого инструмента загрузите и сохраните его в корневом каталоге вашего сайта.Как создать фавикон? Создание значка для вашего веб-сайта с расширением файла .ico по-прежнему возможно в Photoshop 2020 (также называемом Photoshop CC 2020 и Photoshop 2020 CC). Когда вы закончите создавать значок, сохраните его как файл ICO. Mysteries Of The Favicon.ico — Как создать фавикон в Photoshop. Использование фавикона придает вашему сайту более профессиональный вид. Затем сгенерируйте фавикон из измененного изображения через https://www.favicongenerator.com; Измените изображение в графическом редакторе, например в Photoshop.Это показать вам, как создать и добавить свой собственный значок на свой веб-сайт или блог, включая ваш Blogger / Blogspot, WordPress … Процесс действительно прост и почти такой же для веб-сайта или блога. Затем создайте изображение, которое вы планируете использовать в качестве значка, и сохраните его, выбрав «Файл> Сохранить как» и выбрав в качестве формата «ICO (значок Windows)». Как создать фавикон в фотошопе? Favicon — это крошечное изображение, которое мы обычно видим рядом с URL-адресом веб-сайта. Если у вас нет навыков дизайна или вы не знаете, как это сделать, попробуйте создать фавикон с помощью Logaster.Создайте фавикон в Photoshop. Шаг 2. Если вы создаете ИЗБРАННЫЙ ЗНАЧОК для веб-страницы, вы обычно выбираете размер 16 × 16 или 32 × 32 пикселей. Вы можете … Откройте Photoshop. Если на вашем веб-сайте нет значка, посетители будут видеть только общий значок веб-страницы. Вот начало статьи и ссылка на все. Favicon — это небольшой настраиваемый значок, который появляется в различных местах веб-браузеров, таких как адресная строка, список избранного, в RSS-каналах, вкладках браузера, как ярлык на рабочем столе для перехода на сайт и многое другое.3. Вы можете, например, создать фавикон в Photoshop. Шаг 3. Значок имени происходит от значка избранного. Используя инструменты, разработайте графику или аббревиатуру для значка. Введите название своей компании и нажмите «Создать логотип». Шаг 2. Теперь создайте новое изображение размером 16 × 16 пикселей и начните создавать свой значок. Кроме того, он предоставляет множество полезных графических инструментов; однако это программное обеспечение … Используя значок. Сделайте «Сохранить как…» в Photoshop. Как создать значок для Android, Chrome и Opera Android, Chrome и Opera используйте файл android-chrome-192×192.png и android-chrome-512×512.png, которые рекомендует Google. Затем вы хотите создать в фотошопе новый файл размером 16 х 16 пикселей. Простой способ создать значок избранного / ярлыка / закладки для вашего веб-сайта в Photoshop. В этом случае вам нужно будет скачать и установить его плагин из Telegraphics. Сохранить в формате значка: после установки плагина вы захотите выйти из Photoshop и перезапустить Photoshop. Шаги по созданию favicon.ico. 100 пикселей x 100 пикселей). Сделайте размер холста 512×512 пикселей, потому что это число разбивается на наиболее применимые размеры значков и по-прежнему достаточно велико для эффективного редактирования.Favicon — это сокращение от избранного значка, также описывается как значок ярлыка, значок вкладки или значок закладки, среди прочего, значок — это небольшой, обычно мини-логотип 16 × 16, который вы можете использовать на своем веб-сайте. Фавикон — это небольшое изображение, которое вы видите в адресной строке или на вкладке вашего браузера. Если у вас есть логотип, но вы хотите преобразовать его в значок, читайте дальше, чтобы узнать, как это сделать. Von diesem Tutorial erfahren Sie, wie man ein Icon für Ihre Website mit erstellt .. Wie man ein Icon für die Website mit Photoshop erstellt.Выберите его в раскрывающемся списке «Формат» и сохраните как favicon.ico. Воспользуйтесь поисковой системой и введите «редакторы значков». Наличие этого значка добавляет вашему сайту немного дополнительного брендинга. Вы также можете создать значок прямо в Photoshop, используя один из следующих методов. Создайте логотип и фавикон с помощью Logaster Create Favicon from Image. Выберите формат файла как ICO. Как создать значок в Photoshop Создайте значок в Интернете или загрузите его. Загрузка сгенерированного значка на сайт. Кроме того, редактор позволяет вручную настраивать созданные значки для достижения наилучшего результата.

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

/ head> HTML element:

• link rel = «shortcut icon» type = «image / png» href = «/ URL / imagefile.png»>
• ссылка rel = «ярлык» href = «/ URL / imagefile.ico» type = «image / vnd.microsoft.icon» />

1.2. Использование Favicon:

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

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

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

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

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

1,3. Изменения фавикона:

Alter One — Не меняйте свой Favicon A Lot: Хотя у favicon есть свои преимущества, мы не должны менять его много и часто. Или ваши пользователи могут запутаться и не узнать ваш бренд при втором посещении.

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

Alter Three — Make Favicon Small: Лучше использовать рекомендованные выше размеры, и тогда браузер пользователя без труда отобразит их в заголовке. Однако, если вы выберете большой PNG / ICO в качестве значка, вы не сможете его увидеть.

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

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

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

https://www.designevo.com/

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

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

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

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

Первый , Удалите все тексты логотипов.

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

Третий , Измените размер холста с 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.

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

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

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

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

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

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

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

Depict Image: как создать фавикон из логотипа с помощью Photoshop CC?

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

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

-> Инструмент «Перо Photoshop»:

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

And, панель навигации PS Pen Tool включает:

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

Изобразить изображение: Используйте инструмент «Перо» для фотошопа и инструмент «Масштаб» — как выбрать изогнутую часть с помощью инструмента «Перо PS».

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

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

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

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

Часть 3: Список 3 лучших онлайн-генераторов простых и бесплатных значков (среднее качество или ниже среднего)

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

— 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 в качестве генератора значков — эти приложения обещают вам четкий значок.

.