Тайни или как да създадете икона на уебсайт във Photoshop - Да Диего

Всичко, което трябва да направите, за да добавите икона към вашия сайт, е да поставите готовия "favicon" във Windows Icon (.ico) формат в основната папка на вашия сайт. Повечето съвременни сайтове, с изключение на Internet Explorer (IE), поддържат използването на икони във формат GIF (включително анимирани версии) и PNG (включително поддръжка за пълна прозрачност на фона), но тъй като абсолютно всички браузъри, включително IE, разбират. ico формат, с функции, които не са дублирани в GIF и PNG, предлагам да се запознаете с тяхното създаване.

Първи стъпки за създаване

икона
Тъй като работната площ от 16x16 пиксела не е достатъчно голяма за удобна работа с изображение, по-добре е да започнете проекта си с работна площ от поне 64x64 пиксела (по-добре е да използвате възможно най-голям размер икони за по-удобно изразяване на творчески идеи, по-късно изображението може лесно да се преразмери пропорционално). За да зададете необходимия размер на работната зона, изберете елемента "Файл> Нов" в менюто на Photoshop или натиснете клавишната комбинация Ctrl + N.

Дизайн на икони
Ако вече имате готово по-голямо лого, опитайте да го намалите до 16x16 пиксела и вижте колко добре изглежда. Ако при такива размери логото е трудно различимо и графичното му информационно съдържание е малко, създайте поле от 64x64 пиксела и направете

икона
най-простият дизайн на икони, който ще съдържа основните цветове на вашия сайт. Когато сте готови да тествате готовия дизайн - изберете менюто "Изображение> Размер на изображението" или натиснете комбинацията от клавиши "Alt + Ctrl + I" и задайте размера на 16x16, задавайки режим на интерполация "Bicubic Sharper" (този режим е най-доброто за намаляване на изображението и дава възможност да се оцени дали иконата ви ще бъде „размазана“ при отдалечаване или не). В случай, че изображението все още не е достатъчно ясно, върнете се към оригиналното изображение и направете рисунката си по-ясна, наситена и/или контрастираща, след което мащабирайте иконата си.

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

Запазване и зареждане на получената икона
За да запазите получения резултат, изберете в менюто елемента "Файл> Запазване като" или натиснете комбинацията от клавиши "Shift + Ctrl + S" и задайте необходимото име на файл "favicon.ico". В менюто "Формат" изберете Икона на Windows (ICO) от падащото меню. Този формат ще бъде достъпен във Photoshop само ако сте изтеглили и инсталирали правилно необходимия плъгин и сте задали правилния цветен режим при създаване на работния прозорец (1, 4, 8-битов индексиран или 24-битов RGB).

Следващата стъпка е да поставите новата икона в основната папка на вашия сайт. За да направите това, свържете се със сървъра, където се намира вашият сайт и качете там създадения "favicon.ico". Този файл трябва да бъде поставен в папката, където се намира началната страница (index.html), а не в папката с изображения или друга папка, тъй като стандартното местоположение на този файл е основната папка на сайта. Ако файлът е бил поставен правилно (и името му е точно "favicon.ico"), повечето браузъри автоматично ще го разпознаят.

За някои браузъри обаче е необходимо да предоставите директна връзка към иконата на вашия сайт директно в HTML кода, а именно да го добавите в заглавката на всяка страница, на която искате да поставите "favicon.ico":

Повечето съвременни теми за Joomla, WordPress и други двигатели използват отделни файлове (например “header.php”), където е достатъчно да напишете този ред веднъж в началото на файла и всички страници автоматично ще вземат настройките, посочени в тях . Има и разширена версия на този ред: