Личен блог на Елиза Желева

За уеб дизайн, SEO оптимизация и мен :)

Как да създадете прозрачен favicon

от elizazheleva

1. Подготовка
Първо е необходимо да си инсталирате плъгин за Photoshop, който позволява отварянето на .ico файлове, както и записването на други типове изображения във формат .ico. Плъгинът работи с 1, 4 или 8 битов Indexed или 24 битов RGB режим, както и с 32 битовите „XP“ икони с 8 битов Алфа канал.

Сваляне на плъгина от Telegraphics

След като свалите плъгина трябва да го копирате в папката File Formats на Photoshop. Обикновено папката се намира в C:\Program Files\Adobe\Adobe Photoshop\Plug-ins\File Formats.

2. Избор на работно поле
Принципно размерите на favicon-ите са 16 x 16px, но тъй като трудно се рисува изображение с толкова малки размери, можете да го направите на 32 x 32px или 64 x 64px. Оптималният вариант е 32 x 32px, тъй като после ще трябва да намалите изображението, а прекомерното оразмеряване винаги влияе на качеството малко или много. Каквито и размери да изберете обаче, добре е да бъдат кратни на 16 (16, 32, 64 и т.н.) – така оразмеряването после ще бъде по-прецизно.

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

4. Оразмеряване
След като сте готови с дизайна на изображението, кликнете на Image>Image Size и напишете 16 x 16. След това сложете отметка на Resample Image и изберете „Bicubic Sharper“ от падащото меню (тази опция присъства само в CS-версиите). При ръчно оразмеряване на картинките се получава леко замазващ (blur) ефект, който не е добра идея за малко изображение. Опцията Bicubic Sharper ще запази очертанията на изображението по-прецизни и няма да го замаже.

5. Запазване на изображението
Сега кликнете на File>Save As… и изберете формат .ico. Voilà!

1 Отговор на “Как да създадете прозрачен favicon”

  1. [...] Как да създадете прозрачен favicon [...]…

Коментирай

Трябва да се логнеш за да оставиш коментар.