Плагин для работы с иконками (формат ico) в photoshop cs6 и cc

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

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

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

Для того, чтобы подружить photoshop cs6 и младше с ico форматом (подружить – это открывать формат ico, редактировать его, сохранять в другой формат или сохранять в ico) нам понадобиться плагин.

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

Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc

Теперь этот файл киньте в папку (для 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
Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc
После этого выйдите из photoshop и запустите его заново. Теперь вы можете сохранять в ico и открывать ico формат прямо в своём любимом редакторе photoshop. Единственное, что если вы хотите сохранить в формате ico размер должен быть 16 на 16 пикселей или окошка с выбором сохранения в ico НЕ БУДЕТ!

Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc

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

Плагин для работы с иконками (формат ico) в Photoshop cs6 и ccКак создать иконку в фотошопе (ico photoshop)

Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc
Как мы видим, у картинки нет фона. Она нам отлично подойдёт для создания иконки в формате ico в фотошопе. Открываем её в фотошопе, делаем размер 256×256 пикселей и сохраняем в формате ico

Плагин для работы с иконками (формат ico) в Photoshop cs6 и ccКак создать иконку в фотошопе (ico photoshop)

Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc
Наша иконка готова, и мы её успешно применяем!

Плагин для работы с иконками (формат ico) в Photoshop cs6 и ccКак создать иконку в фотошопе (ico photoshop)

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

Источник: https://lolpc.ru/photoshop-sozdat-ico

Как создать значок сайта .ico при помощи Photoshop

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

Как создать значок сайта .ico при помощи Photoshop

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

Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc

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

Значок сайта – это миниатюрный логотип (16×16), который Вы можете использовать на сайте. Если Вам удобнее работать с изображением большего размера, Вы можете работать над значком, размером 64×64 пикселя, а затем его уменьшить.

  1. Создайте новый документ Photoshop. Откройте вкладку меню ‘Файл’ > ‘Новый’ (‘File’ > ‘New’):

    Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc

  2. Используйте инструмент ‘Масштаб’, для того чтобы увеличить документ для редактирования:

    Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc

  3. Например, мы создадим значок сайта, который состоит из простого градиентного фона и двух букв ‘TM’ (Торговая марка).

  4. Примените к вашему документу инструмент ‘Градиент’ (Gradient Tool). Вы можете использовать одно из доступных сочетаний цветов, или создать новое сочетание цветов:

    Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc

  5. Используйте инструмент ‘Горизонтальный текст’ (Horizontal Type), для того чтобы добавить ваш текст. Задайте шрифт, цвет и размер шрифта:

    Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc

  6. Используя инструмент ‘Трансформирование’ (Ctrl + T), отрегулируйте расположение текста:

    Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc

  7. Соедините слои (Merge layers), как это показано на скриншоте ниже:

    Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc

  8. Перейдите на вкладку ‘Файл’ > ‘Сохранить как…’ (File > Save As), откройте выпадающее меню и выберите формат .PNG (*.PNG). Нажмите на кнопку ‘Сохранить’ (Save):

  9. Вы успешно создали значок сайта. Он был сохранён как файл ‘favicon.png’ на вашем компьютере.

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

  11. Откройте в браузере любой сайт конвертирования изображений. Мы воспользуемся этим сайтом.

  12. Перетяните ваш файл ‘favicon.png’ в область ‘Загрузить’ (как это показано на скриншоте). Конвертирование начнётся автоматически. Процесс займёт 1 — 2 секунды:

  13. Нажмите на кнопку ‘Скачать’ (Download), для того чтобы сохранить файл ‘favicon.ico’ на вашем компьютере.

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

Вы можете также ознакомиться с детальным видео-туториалом ниже:

Как создать значок сайта .ico при помощи Photoshop

Источник: https://www.TemplateMonster.com/help/ru/how-to-create-ico-favicon-with-photoshop.html

Как сохранить изображение в формате ico быстро и просто?

Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc

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

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

Их тысячи в интернете, просто наберите в вашем поисковике: «конвертировать изображение в ico» или «сохранить изображение в ico», или еще как-нибудь, например, «перевести картинку в ico», и вам точно попадется один из сайтов-конвертеров, который вам бесплатно будет конвертировать изображение в ico. Но мы здесь собрались не для этого, а для того, чтобы научиться конвертировать картинку в ico самостоятельно.

Представим, что у нас есть вот такая картинка favicon.png размером 16х16 пикселей. Я специально выбрала этот минимальный размер для примера, потому что на нем хорошо будут видны различия миниатюр самих иконок.

Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc

Если вы думаете, что можно просто вручную поменять расширение изображения с .png на .ico, то вы ошибаетесь. Так иконка не получится и отображаться она будет такой же маленькой картинкой. Вот например так:

Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc

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

Однако, как видно на следующем фото, стандартная сборка фотошопа, начиная с версии Photoshop cs4, cs5 и cs6 не позволяет сохранять изображение в формате ico.

Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc

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

Плагин ICO для 32-битной версии Windows x86 Плагин ICO для 64-битной версии Windows x64
Скачать Скачать

 *Не забудьте разархивировать скаченный файл.

Как установить плагин для расширений .ico на Photoshop?

Все очень просто!

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

  • У меня Photoshop cs4 и находится он на диске C, значит, я ищу папку здесь:

C:Program FilesAdobeAdobe Photoshop CS4Plug-insFile Formats

Копирую туда наш скачанный файл плагина .ico.

  • Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc
  • Также у вас может быть еще другой адрес этой папки:
  • C:Program FilesAdobeAdobe Photoshop CS4AppPhotoshopPlug-insFile Formats
  • Если у вас Photoshop cs5, то вероятнее всего адрес данной папки будет такой:

C:Program FilesAdobeAdobe Photoshop CS5RequiredPlug-insFile Formats

  • Если у вас Photoshop cs6, то плагин ICO также нужно установить в эту папку:

C:Program FilesAdobeAdobe Photoshop CS6RequiredPlug-insFile Formats

Что касается версии Photoshop cc, то адрес папки с плагинами остался прежним. Т.е. наш скаченный плагин ico для photoshop cc устанавливаем по тому же пути, как и для версии Photoshop cs6. Только не забудьте скачать 64-битную версию плагина, если у вас 64-разрядная система.

Как сохранить картинку в формате ico?

После того, как мы скинули туда наш файл, просто запускаем фотошоп и загружаем нужную картинку. А далее, все как обычно: нажимаем Файл —> Сохранить как —> и выбираем уже наш появившийся формат .ICO.

Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc

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

Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc

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

Источник: http://dumajkak.ru/kak-zastavit-fotoshop-sdelat-kartinku-v-formate-ico/

Как проще и быстрее всего сделать из картинки иконку в фотошопе?

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

Многие ошибочно предполагают, что достаточно поменять расширение картинки на ICO, и сразу изображение преобразуется в эту самую иконку. Ну-ну. Попробуйте сами и вам выдастся ощибка, когда вы попытаетесь заменить изображение ярлыка. В общем давайте лучше делать, чем трындеть) Погнали!

Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc

Сейчас я хочу сменить иконку для моего браузера гугл хром. Как лучше всего поступить в данной ситуации? Давайте по порядку.

  1. Если не знаете чтобы такого придумать, то лучше идите в Яндекс или Гугл и набирайте «Гугл хром png» (естественно без кавычек).
  2. Лучше всего, чтобы изображение было реально в формате PNG, и не просто PNG, а именно с прозрачным фоном. Проверить это легко: нажмите на понравившеюся картинку и посмотрите какой будет задний фон. Прозрачный фон всегда изображается бледно-серыми и белыми квадратиками.
  3. Ну а когда нужный файл нашелся, сохраняем его (если кто не знает, то для сохранения изображения на него нужно правой кнопкой мыши и выбрать пункт «сохранить картинку»). После этого естественно открываем его в фотошопе. Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc
  4. Теперь измените размер изображения до 256 пикселей по ширине и высоте, а лучше еще меньше (где-нибудь 64*64). Очень желательно, чтобы стороны были одинакового размера.
  5. После этого вы можете слегка подредактировать картинку, снабдить его каким-нибудь эффектом, трансформировать его и т.д.
  6. А теперь, всё, что вам остается это сохранить изображение в формате ICO. Да, в своей статье про форматы файлов изображений я не рассказывал, но он особо-то и нужен на самом деле. Только есть одна проблема. Если начнете сохранять документ, то формата ICO вы там не увидите. Что за фигня? Дело в том, что по умолчанию его тупо нет.

Что же тогда делать? Как тогда нам сделать иконку? Да элементарно. В этом нам поможет один внешний плагин (дополнение), благодаря которому нужный нам формат станет доступным для сохранения. В общем давайте, повторяйте за мной.

  1. Скачиваем плагин ICO. Можете скачать у меня здесь. Как загрузите его — распакуйте.
  2. Видите там находятся 2 файла? Воооот. Выделяйте их, копируйте и идите в директорию, где у вас установлен ваш фотошоп, например C:Program FilesAdobeAdobe Photoshop CC 2015RequiredPlug-InsFile Formats. У вас программа может быть установлена на другом диске (просто я на диск F у себя поставил). Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc

Что мы только что сделали? Мы скачали файлы плагинов (для разных разрядностей), которые дополнительно устанавливают новый формат в фотошоп. Папка File Formats как раз служит для подключения новых форматов. Надеюсь, я понятно объясняю? А то мало ли)

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

Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc

ВАЖНО! Если у вас большое изображение, то при сохранении вы не увидите формата ico в списке допустимых. Дело в том, что эта возможность недоступна, если ваша картинка превышает размер 256*256. Если это так, то просто уменьшите размер изображения до 64*64. Думаю, что больше вам не потребуется. После замены расширение будет доступно.

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

Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc

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

Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc

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

Ну вот пора и честь знать. На сегодня я заканчиваю. Надеюсь, что вам моя статья понравилась и я увижу вас и в других своих постах. И конечно же я рекомендую вам подписаться на обновления блога, дабы не пропустить чего-то интересного. Успехов вам! Пока-пока.

С уважением, Дмитрий Костин.

Источник: https://koskomp.ru/rabota-s-kompyuternyimi-programmami/adobe-photoshop/kak-sdelat-iz-kartinki-ikonku/

Секреты favicon.ico или как создать иконку для сайта в Photoshop

Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc

Вы хотите оригинальную и красивую иконку для вашего сайта? Сделайте её сами – в этом вам поможет данная статья.

Favicon (сокр. от англ. FAVorites ICON — «значок для избранного») – это специальная стандартная или пользовательская иконка маленького размера, которая находится слева от ссылки (URL) в адресной строке веб-браузера.

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

Основная цель такой иконки — сделать дизайн вашего сайта целостным и детализированным.

Все, что вам необходимо сделать, чтобы добавить иконку на сайт – это поместить готовый «favicon» в формате Windows Icon (.ico) в корневую папку вашего сайта.

Большинство современных сайтов, за исключением Internet Explorer (IE), поддерживают использование иконок в формате GIF (включая анимированные варианты) и PNG (включая поддержку полной прозрачности фона), но так как абсолютно все браузеры, IE в том числе, понимают формат .

ico, имеющий особенности, которые не дублируются в GIF и PNG, предлагаю ознакомиться именно с их созданием.


Системные требования

Так как мы будем создавать иконки в “Photoshop”, нам необходимо научить программу понимать расширение Windows Icon (ICO). Для этого нам потребуется специальный плагин экспорта формата файлов .

ico, который можно бесплатно загрузить с Telegraphics. Плагин читает и записывает ICO-файлы в 1, 4, 8-битных индексированных и 24-битных RGB режимах, а так же читать и записывать 32-битные “ХР” иконки (с 8-битным альфа-каналом).

Чтобы установить плагин, вам необходимо на сайте разработчиков выбрать подходящий вариант системы, распаковать скачанный архив и поместить в папку “x:Program FilesAdobeAdobe Photoshop CS5.1Plug-insFile Formats” (х = буква вашего диска, на который установлен Photoshop) файл с расширением “.8BI”, после чего запускаем или перезапускаем сам Photoshop.

Приступаем к созданию
Плагин для работы с иконками (формат ico) в Photoshop cs6 и ccТак как рабочая зона размером в 16х16 пикселей является недостаточно большой для удобной работы с изображением, лучше начать ваш проект с размером рабочей зоны хотя бы 64х64 пикселя (лучше использовать как можно большие размеры при создании иконок для более удобного выражения творческих идей, впоследствии изображение можно легко отмасштабировать с сохранением пропорций). Чтобы задать необходимые размеры рабочего поля необходимо выбрать в меню Photoshop пункт «File>New» или нажать сочетание клавиш Ctrl+N.

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

Если при таких размерах логотип плохо различим и его графическая информативность невысока, создайте поле 64х64 пикселя и сделайте Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc наипростейший дизайн иконки, который будет содержать основные цвета вашего сайта. Когда вы будете готовы протестировать готовый дизайн — выберите меню «Image>Image Size» или нажмите комбинацию клавиш «Alt+Ctrl+I» и задайте размер 16х16, выставив при этом режим интерполяции «Bicubic Sharper» (этот режим наилучший для уменьшения изображения и дает возможность оценить будет ваша иконка “размытой” при уменьшении или нет). В случае, когда изображение все-таки недостаточно четкое, вернитесь к исходному изображению и сделайте ваш рисунок более четким, насыщенными и/или контрастным, после чего заново отмасштабируйте вашу иконку.

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

Сохранение и загрузка полученной иконки
Для сохранения полученного результата необходимо в меню выбрать пункт «File>Save As» или нажмите комбинацию клавиш «Shift+Ctrl+S» и задать обязательное имя файла «favicon.ico».

В меню «Format» необходимо выбрать Windows Icon (ICO) из выпадающего меню.

Этот формат будет доступен в Photoshop, только если вы скачали и правильно установили необходимый плагин и задали правильный цветовой режим при создании рабочего окна (1, 4, 8-битный индексированный или 24-битный RGB).

Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc

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

Однако для некоторых браузеров необходимо указать прямую ссылку на иконку вашего сайта непосредственно в HTML-коде, а именно добавить ее в хедер каждой страницы, на которой необходимо разместить «favicon.ico»:

В большинстве современных тем для Joomla, WordPress и прочих движков используются отдельные файлы (например “header.php”), где достаточно прописать 1 раз эту строчку в начале файла и все страницы будут автоматически подхватывать указанные в них настройки. Также существует расширенный вариант написания данной строчки:

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

или

Однако запомните, что оба эти формата не поддерживаются IE и не будут в нем работать.

Мультиразмерный Favicon
Помимо обычного favicon размером 16х16 пикселей, которые используются для оформления адресной строки, существует его разновидность с размерами в 32×32 пикселя и 48×48 пикселей. Эти иконки очень распространены в среде Windows.

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

Но стандартного размера (16х16 пикселей) будет недостаточно для качественного отображения, так как стандартный размер ярлыка в среде Windows 48х48 пикселей – это значит, что ярлык будет растянут до необходимых размеров и станет некрасивым и практически нечитаемым.

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

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

Наиболее распространённые размеры ярлыков, которые могут быть использованы, — 16×16, 24×24, 32×32 и 48×48 пикселей.

Создание мультиразмерной иконки не намного сложнее, чем создание обычного favicon размером 16х16 пикселей. Необходимый плагин мы можем найти все на том же сайте Telegraphics, он позволит поместить несколько иконок в одном .ico-файле.

В принципе это даже не плагин, а отдельная программа, которую можно использовать как в Windows (через командную строку), так и в MacOS (посредством перетаскивания). Также у этой программы существуют аналоги, как например: Sib Icon Studio (www.sibcode.

com/icon-studio) и Any to Icon Convertor (www.aha-soft.com/anytoicon).

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

Это возможно благодаря 32-битной глубине цвета, которая отображает настоящую прозрачность, как и Photoshop. Вы можете создать 32-битную версию иконки вместе с 24-битной (16 миллионов цветов, с поддержкой прозрачности как в .

gif-файлах), 16-битную (256 цветов) и даже 8-, 4- или 2-битную версию, и поместить их всех в один ico-файл.

  1. Поэтому если вы хотите быть уверенными, что ваш favicon будет смотреться красиво во всех возможных случаях – лучше сделать его сразу в нескольких варианта. Например:
  2. 16×16, 16-бит (256) цветов
    16×16, 32-bit colors
    32×32, 16-бит (256) цветов
    32×32, 32-bit colors
    48×48, 16-бит (256) цветов
  3. 48×48, 32-bit colors

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

Решение возможных проблем
Общие проблемы
В случае если после проделанных действий ваш «favicon» так и не появился, попробуйте несколько раз (около 5) обновить вашу страницу или очисть кэш браузера, или поставьте “?” в конце ссылки (например “http://diego.com.ua/?”) — это действие заставит думать браузер, что страница является новой и еще не была добавлена в кэш.

Еще одним способом решения этой проблемы является переход по прямой ссылке на ваш «favicon» (например: http://diego.com.ua /favicon.ico), после чего браузер (IE) немедленно отобразит и запомнит иконку.

Проблемы совместимости с браузерами
“Microsoft IE 6” (а также 7, 8 и 9) может не отображать “favicon” до тех пор, пока ссылка на вашу страницу не будет добавлена в избранное.

В таком случае попробуйте следующий вариант – зажмите левую клавишу мышки на отображаемом “favicon” (обычно стандартная иконка IE), после чего “потрясите” его и отпустите. Данные действия приведут к перезагрузке страницы и обновлению иконки.

Другим способом решения данной проблемы является добавление следующего кода в секцию “” страниц, на которых вы хотите видеть ваш “favicon”:

“Safari” для Mас-систем не будет отображать обновленный “favicon” до тех пор пока не будет очищен кэш браузера. Однако нажатие кнопки меню “Empty cache” не решит проблему, так как “Safari” хранит иконки в отдельной папке.

Чтобы очистить папку кэша иконок необходимо зайти в меню “Edit > Reset Safari” и поставить галочку напротив “Remove all website icons”. Альтернативным (ручным) способом является удаление содержимого следующей папки: “User>Library>Safari>Icons”.

Для Windows-версии “Safari” путь немного отличается: “C:Documents and SettingsYourUserNameLocal SettingsApplication DataApple ComputerSafari”, в этой папке необходимо удалить файл “WebpageIcons.db”.

Напоминаю, что папка “Local Settings” и вложенные в неё папки скрыты по умолчанию, а значит для того, чтобы в них попасть, необходимо настроить отображение скрытых файлов и папок Windows. После удаления вышеуказанных фалов необходимо перезапустить “Safari” (в некоторых случаях также необходимо перезагрузить компьютер).

Для решения аналогичной проблемы в “Mozilla FireFox” необходимо очистить кэш браузера и перезапустить программу.

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

Другой проблемой в ОС “Windows” является обновление иконок для Интернет-страниц (к примеру, при размещении иконки страницы на Рабочем столе). Для принудительного обновления изменившихся иконок необходимо выполнить следующие действия:
1.

Нажать правой кнопкой по Рабочему столу;
2. Выбрать пункт меню “Свойства” (для “Windows XP”) или “Персонализировать” (для “Windows Vista” или “Windows 7”) и перейти на вкладку “Свойства Экрана”;
3.

Поменять качество цветопередачи с 32-разрядного на 16-разрядное и нажать кнопку “ОК” или “Применить”;

4. Обратно поменять качество цветопередачи на 32-разрядно и нажать кнопку “ОК” или “Применить”.

Проблемы с плагином “Photoshop”для работы с иконками
Формат “Windows Icon” (ICO) будет недоступен, если:
1. Вы неправильно установили плагин;
2. Вы неправильно определили версию плагина подходящую для вашей ОС;

3. Рабочая область в “Photoshop” была создана не в 1, 4, 8-битных индексированных или 24-битных RGB режимах.

Также после установки плагина необходимо перезагрузить сам “Photoshop” для вступления в действие сделанных изменений.

Источник: https://diego.com.ua/ru/sekretyi-favicon-ico-ili-kak-sozdat-ikonku-dlya-sayta-v-photoshop/

Как создать favicon в Фотошоп

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

Как создать favicon иконку в программе Adobe Photoshop и пойдет речь в данной статье…
Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc

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

Скачиваем плагин и устанавливаем его, следуя приведенным ниже инструкциям:

  1. Распаковываем папку
  2. Перекидываем файл (ICOFormat или ICOFormat64 – зависит от версии Photoshop (32/64)) с расширением .8bi в папку X:Program FilesAdobePhotoshop Plug-InsFile Formats (где X – это имя диска, где установлена программа)
  3. Перегружаем программу Adobe Photoshop

Заметка: Для 64 битных систем, а также для других папок, в которые устанавливает программа все файлы, нужно найти папку X:Photoshop Plug-InsFile Formats (где X – это имя диска, где установлена программа; Photoshop – папка с установленной программой Фотошоп; и папка File Formats обязательна – туда скидываем файл плагина, который скачиваем по вышеуказанной ссылке) .

После того, как вы совершили вышеуказанные действия, у вас должно появиться еще 2 расширения для сохранения файлов в программе: ICO, CUR. Можно прочитать про эти форматы в википедии.

Итак, открываем программу Adobe Photoshop и создаем документ 64×64 пикселя или менее, чтобы сохранить впоследствии наш файл с расширением ICO. Рабочий размер может быть любым, самое главное запомнить, что выходной файл должен быть с размерами 16×16 пикселей.

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

Далее уменьшаем изображение, переходим в меню Image-Image Size и ставим значения 16×16 пикселей.

Затем выбираем пункт Save as и в меню формат находим значение *.ICO, переименовываем наш исходный файл в favicon, сохраняем.
Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc
Идем дальше…

Теперь необходимо поместить готовый файл favicon.ico в папку на сервере, где расположен ваш сайт. А именно в то место, где находится основной файл (index.html/index.php).

Если вы сделали все правильно, то большинство браузеров автоматически найдут данную иконку и покажут ее слева от URL страницы. Однако, советую указать адрес favicon.ico вручную непосредственно в HTML коде между тегами .

Очищаем кэш браузера и нажимаем F5, чтобы изменения вступили в силу.

Источник: https://photolessons.org/favicon-create/

Как открыть файлы ICO в PhotoShop CC

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

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

Этот плагин будет работать для любой версии PhotoShop начиная с 5.0 и выше для Windows и нескольких версий для Mac ( это зависит от версии OS X).

Если по какой-то ужасной странной причине вы используете Windows 98, вы можете скачать альтернативную сборку плагина.

Совместимость с Mac

  • Photoshop CS5 на Intel Macintosh (32/64 бит)
  • Photoshop CS3 и CS4 на 32-разрядных платформах Intel и PowerPC Macintosh
  • Photoshop 3.0-7.0, CS, CS2 на PowerPC Macintosh (OS X, OS 9 и Classic)
  • Photoshop 4.0 / MacOS 8.0 на 68K Macintosh

Совместимость с Windows

  • Windows: Photoshop 5.0 и более поздние версии для Windows 98 / NT, XP, Vista и Windows 7

Требования

Плагин формата файлов ICO для Photoshop

Установить

32-битная / 64-битная Windows (Vista / Windows 7):

Загрузите плагин и распакуйте его в папку.

Переместите файл плагина в C: Program Files Adobe Photoshop Plug-Ins Форматы файлов или в 32-разрядную версию, если вы используете 32-разрядную версию Windows (C: Program Files (x86). Возможно, вам потребуется создать папку « Форматы файлов » внутри Plug-Ins, если она не существует.

Плагин для работы с иконками (формат ico) в Photoshop cs6 и cc

  • Если вы работаете в 64-битной системе Windows и запускаете 64-битную версию Photoshop CS4 или CS5, загрузите 64-битную версию плагина и поместите его в папку плагинов, соответствующую 64-битному Photoshop ( то есть в «Program Files», а не «Program Files (x86)»).
  • Переместите плагин в папку «Форматы файлов» в папке плагинов Photoshop:
  • Для Windows (32-битная), 8bi
  • Для Windows (64-битная), 8bi

При использовании Corel PSP Photo X2 установите плагин в C: Program Files Corel Corel Paint Shop Pro Photo X2 Languages ​​ EN PlugIns

Закройте и перезапустите Photoshop, если он уже запущен.

Чтобы использовать плагин

  • Используйте команду Photoshop «Открыть» (меню «Файл»), чтобы открыть файлы .ICO и .CUR (которые теперь появятся в браузере файлов).
  • Используйте команду Photoshop «Сохранить» для создания файлов .ICO и .CUR.
  • При сохранении .CUR обратите внимание, что точка доступа курсора определяется источником линейки.

Попасть в неприятности?

  • Если вы не уверены, правильно ли установлен плагин, найдите «ICO (значок Windows)» в меню «О плагине» в Photoshop (в Windows – «Справка»; в OS X – «Photoshop»). Если его нет в списке:
  • Проверьте, что вы загрузили правильную версию (Windows / Mac)
  • Это в подкаталоге «Форматы файлов» папки «Плагины» в Photoshop?
  • Вы вышли и перезапустили Photoshop?
  • Если вы работаете в Vista и видите ошибку «Точка входа плагина не найдена», попробуйте перезапустить и переустановить или посмотреть этот пост.
  • Плагин не является плагином Filter или Import / Export, поэтому не ищите его там. Он отображается в качестве параметра формата при открытии или сохранении (допустимые изображения).
  • Формат ICO не позволяет изображениям более 256 пикселей в высоту или ширину.
  • В качестве ICO можно сохранить только изображения в битовом режиме, в оттенках серого, в индексированном и RGB-режиме, не более 8 бит на канал.

О прозрачности

Формат ICO имеет собственную 1-битную маску прозрачности (0 = непрозрачная, 1 = прозрачная), называемую битовой картой AND.

  • При чтении или сохранении изображения в режиме RGB в Photoshop 6.0 или более поздней версии для маски используется прозрачность слоя
  • Если изображение находится в индексированном режиме и использует «прозрачный индекс», это будет использоваться для установки маски значка
  • В других случаях маска ICO рассматривается как альфа-канал (черный = 0 = непрозрачный, белый = 255 = прозрачный)
  • В значках формата PNG (Vista) альфа-канал просто сохраняется как часть PNG. Там нет отдельной маски.

Сохранение изображений в индексированном режиме

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

  • Режим RGB: нет таблицы цветов
  • Режим индексированной / серой шкалы с> 16 цветами: 8 бит на пиксель (до 256 цветов в таблице цветов)
  • Режим индексированной / серой шкалы с> 2 цветами: 4 бита на пиксель (до 16 цветов в таблице цветов)
  • Режим Bitmap или Indexed / Grey Scale с 2 или менее цветами: 1 бит на пиксель (до 2 цветов в таблице цветов)

Примечание о размерах файлов (только для Mac)

Не беспокойтесь, если Mac Finder показывает неожиданно большой размер файлов для файлов ICO, сохраненных из Photoshop. Сам ICO хранится в ветке данных и настолько мал, насколько это возможно (см. Выше).

Вычисление размера Finder увеличивается из-за плодотворных «метаданных» Photoshop в ветке ресурсов и не отражает размер данных ICO.

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

) На размер «K» в Finder также влияет минимальный размер выделения тома (часто 4 или 8 КБ, в зависимости от раздела размер).

При загрузке на веб-сайт одна ветвь данных копируется, а ветвь ресурса удаляется, и поэтому эти дополнительные данные (и дополненная фигура Finder) не имеют никакого эффекта или релевантности. «Истинный» логический размер файла ICO может быть подтвержден в Терминале OS X с помощью ls -l в каталоге иконки (или файлов -x br в MPW Shell).

О 32-битных (Windows XP) иконках

Плагин может создавать 32-битные иконки с 8-битной альфа-прозрачностью. Это произойдет в двух случаях:

  1. в Photoshop 6.0 или более поздней версии, сохраняя многослойное изображение RGB (т.е. не сплющенное)
  2. в любой версии Photoshop, сохраняя плоское изображение RGB с 2 или более альфа-каналами.

В первом случае прозрачность слоя будет использоваться как альфа ICO. 1-битная маска «И» берется из первого альфа-канала или, если нет доступного альфа-канала, получается из прозрачности слоя.

Во втором случае первый альфа-канал используется для создания 1-битной «маски И», а второй альфа-канал становится 8-битной альфа-каналом ICO.

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

Источник: https://ru.aapionline.org/kak-otkryt-faily-ico-v-photoshop-cc

Ссылка на основную публикацию