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

Обновлено: 07.07.2024

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

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

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

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

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

Делаем иконку для сайта favicon.ico с помощью программ Photoshop CS3 и AWicons Pro

1. Создаем в Photoshop или любом другом графическом редакторе иконку размером 16х16, сохраняем ее в формате GIF или PNG.

2. Открываем сохраненную иконку любой программкой для создания иконок и курсоров, например, AWicons Pro (она платная). Подобных бесплатных программ достаточно много, погуглите, скачайте и установите. Откройте программу и перетащите в нее заготовку своей иконки favicon. Если вы сохраняли иконку на белом фоне, в программе AWicons Pro она выглядеть будет примерно так:

3. Если вид иконки устраивает, нажимаем F2 или Файл->Сохранить объект… и сохраняем иконку под именем favicon.ico:

Если фон favicon будет прозрачным, можно или сохранить в Фотошопе заготовку сразу с прозрачным фоном или удалить лишние пиксели в программе для создания иконок. Чтобы сделать прозрачный фон у favicon нужно изначально создать новый файл в Фотошопе с прозрачным фоном (Ctrl+N):

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

Саму иконку можно рисовать сразу в специальной программе, но лично мне удобнее в Фотошопе, да и возможностей по обработке картинки у Фотошопа несравнимо больше. Жаль только, что даже версия Photoshop CS3 не умеет сохранять иконки в формате ICO и приходится использовать специальные программы-конверторы. Но есть и второй способ, как при создании свой favicon.ico обойтись только Фотошопом.

После создания иконки favicon.ico ее нужно загрузить на свой сервер (Как загружать файлы по FTP) в корневую папку, где находится сайт и, желательно, во все подпапки.

После этого в HTML-шаблон своего сайта нужно добавить код вызова иконки. Это одна строчка между тегами HEAD:

Все. Если иконка имеет имя и формат favicon.ico, она загружена в корень сайта и в области HEAD HTML-шаблона вашего веб-сайта есть строчка загрузки – фавикон будет отображаться рядом с адресом вашего сайта или блога.

14 комментариев к “Как сделать иконку favicon.ico для своего сайта”

А я не знала… У меня фотошоп версии 6.0. 🙁
У меня в блоге не очень красивый фавикон. Я сначала сделала фон в фотошопе, нажала Мозаика. Получиличсь красные кубики на желто-зеленом печворке…А сверху аэрографом намалевала сердечко… Получилось будто из сердечка кусочки вылетают…Ж:-о ну, пока так поживу 🙂 Вообще, хотела просто сердечко на белом фоне, но уж больно тогда мой блог будет смахивать на порносайт…>-(

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

Ой спасибки. 🙂 Очень приятно 🙂 Первый блин значит не комом!

хм….это всё можно проделать с помошью пейнта стандартного и не париться со столькими прожками.И вручную переименовать в .ico
🙂
а вообще спс,очень помогли 😉

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

Спасибо огромное, щас начнем…

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

я сделал ошибку, извините

Советую IconAxialisis (кажется правильно написал), специальная прожка для разработки иконок с различной глубиной цвета, размерами и др. параметрами и пр. Позволяет создавать и сохранять в одном файле массив иконок разного размера (16х16, 32×32 и пр), также позволяет автоматически генерировать в неплохом качестве иконки поменьше из большего размера, работать с транспарентностью и пр.
Хотя для быстрого создания фавиконок обычно хватает какого нибудь онлайн сервиса или плагина для фотошопа.

Сохраняю всё как надо но в браузере белый фон!

у меня тоже ничего не получается! в чем проблема?

Если иконка в адрессной строке браузера не появляется, то нужно обновить кеш. Если у Вас браузер IE , обычно сайт нужно добавить в избранное, чтобы иконка появилась. А в других браузерах(Opera, Mozilla Firefox) всё в порядке.

У меня при вставке данного кода, флавикон появился только на главной. Для появления на всех остальных страницах мне помог код

Простые ответы на простые вопросы. Как добиться эффекта прозрачности в программе Corel Draw? Не вдаваясь в дебри векторной графики и предположив, что раз уж вас интересует данный вопрос, то вы точно знаете что такое Corel Draw, умеете его включить и создать чистый файл, приступим к делу. Для наших опытов с прозрачностью в Кореле я создал простой элемент — логотип с моего сайта. И хотя наша заметка о прозрачности я коротко расскажу как я его нарисовал. Воспользовавшись инструментом Ellipce я нарисовал окружность. Чтобы окружность получилась пропорциональной я удерживал Ctrl. Затем я залил её зеленым цветом и задал обводку в 10pt, которые так же залил темно серым цветом. Далее поверх окружности я написал текст при помощи Text Tool. Масштабировал, выбрал шрифт, изменил расстояние между строками и кернинг между буквами. Для этих манипуляций я использовал инструмент Shape Tool. Далее я выделил оба объекта, куски текста и окружность и сгруппировал их Arrange > Group (Ctrl+G) Таким образом я получил наш логотип, а теперь к прозрачности.

Прозрачность в Corel Draw при помощи Transparancy

Выделите ваш объект инструментом Pick Tool
Переместите его выше, а при необходимости измените размер.
Сделайте дубликат объекта. Выберите Edit >Copy, а затем Edit > Paste. Более оперативный способ шорткаты. Ctrl+C для копирования и Ctrl+V для Paste. Еще более оперативный способ: кликните по объекту инструментом Pick Tool и начните как будто перемещать его в другое место. Переместив, не отпускайте левою кнопку мыши, но кликните по правой. Объект скопируется.
Поместите его ниже и переверните.

Выберите инструмент Trancparancy. Этот инструмент прячется во вкладке инструмента Blend Tool. Подержите некоторое время на инструменте чтобы появилось выпадающее меню.
Кликните по нижней эмблеме и не отпуская кнопку мышки протяните указатель вниз. Белый квадратик означает полную видимость, черный, полную невидимость. Соответственно между ними получается градиент от видимого до невидимого, который регулируется черточкой посередине. Чтобы протащить градиент полупрозрачности перпендикулярно зажмите Ctrl при перетаскивании.

И так мы делаем полупрозрачный градиент в Корел Дро.

Прозрачность в Corel Draw при помощи Lens

Рассмотрим прозрачность при помощи линзы. Я хочу встроить объект в подобие волн. Подобие волн я создал из пяти окружностей и прямоугольника, которые объединил командой Arrange > Shaping > Weld Вы можете использовать любой другой объект, например обычный прямоугольник. Нарисуйте его инструментом Rectangle Tool и поместите на ниже эмблем Arrange > Order > To Back

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

Зайдите в Effects > Lens [Alt+F3] или в Windows > Dockers > Lens В Corel Draw одно и тоже можно найти в разных местах.
Появится панель для создания эффектов линзы. Выделите верхние волны инструментом Picker
В меню докера Lens выберите Transparency. В значении Rate 50% и Apply

И вот как делается в программе Корел Дро прозрачность. Мой совет, не перебарщивайте с такими прозрачностями через панель линзы. Программа начнет серьезно подвисать. Главная загвоздка прозрачности в Колере заключается в том, что прозрачность остается реально прозрачной лишь в Кореле. При экспорте PDF корел лишь имитирует прозрачность, создавая специальный объект, имитирующий её цвета, либо просто растрирующий кусок графики.

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

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

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

Быстрая однородная прозрачность

Регулирование прозрачности с помощью панели свойств объекта

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

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

Ниже находятся шесть пиктограмм, нажимая которые вы можете:

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

С помощью шкалы градиента настраивается переход, он же резкость прозрачности.

Щелкнув дважды на шкале градиента, вы получите дополнительную точку его настройки.

Обратите внимание на три пиктограммы, отмеченные на скриншоте. С помощью них вы можете выбрать — применять прозрачность только к заливке, только контуру объекта или к ним обоим.

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

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

Мы рады, что смогли помочь Вам в решении проблемы.

Отблагодарите автора, поделитесь статьей в социальных сетях.

Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

Интерактивная прозрачность в CorelDraw является одним из самых важных инструментов для достижения эффектов. При помощи этого инструмента можно создавать и изменять прозрачность объектов: однородную, переходную (градиентную) или текстурную.

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

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

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

Красным отмечено где выбирать степень прозрачности.

Прочие виды прозрачности можно выбрать в меню вверху после выбора инструмента:

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

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

В общем всё, остальные варианты прозрачности используются редко, и с ними можно познакомиться методом тыка. Ну и напоследок покажу Вам свой пример использования прозрачности, правда не в CorelDRAW, а в Adobe Flash, но он тоже получился неплохой.

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

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

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

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

Первый способ

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

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

Второй способ

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

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

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

Anti-aliasing;
Transparent background.

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

Работа в редакторе Corel Photo-Paint

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

Создание прозрачного фона посредством интернет-сервиса

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

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

Алгоритм действий

Большинство картинок, сохранённых в формате .jpg, уже сопровождаются прозрачным фоном. Если же вам приглянулось изображение в формате .jpg, тогда полезно вникнуть в то, как убрать ненужную фоновую основу.

Откройте интернет-сервис Pixlr, воспользовавшись поиском. На открывшейся странице можно ознакомиться с полезной информацией относительно возможностей этого сервиса. Визуально можно сразу выявить, что такой ресурс является аналогом графического редактора Adobe Photoshop.

Читайте также: