Як створити іконку для сайту у Photoshop - Da Diego
Все, що вам необхідно зробити, щоб додати іконку на сайт – це помістити готовий favicon у форматі Windows Icon (.ico) в кореневу папку вашого сайту. Більшість сучасних сайтів, за винятком Internet Explorer (IE), підтримують використання іконок у форматі GIF (включаючи анімовані варіанти) та PNG (включаючи підтримку повної прозорості фону), але так як абсолютно всі браузери, IE у тому числі розуміють формат .ico, має особливості, які не дублюються в GIF та PNG, пропоную ознайомитися саме з їх створенням.
Приступаємо до створення
Дизайн іконки Якщо у вас вже є готовий логотип більшого розміру, спробуйте зменшити його до 16х16 пікселів і подивіться, як добре він виглядає. Якщо при таких розмірах логотип погано помітний і його графічна інформативність невисока, створіть поле 64х64 пікселя і зробіть найпростіший дизайн іконки, який міститиме основні кольори вашого сайту. Коли ви будете готові протестувати готовий дизайн - виберіть меню "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). Наступним кроком буде розміщення нової іконки в кореневій папці вашого сайту. Для цього з'єднайтеся з сервером, на якому знаходиться ваш сайт, і завантажте створений «favicon.ico». Цей файл необхідно обов'язково помістити в папку, в якій знаходиться домашня (index.html) сторінка, а не в папку із зображеннями або будь-яку іншу папку, оскільки стандартним місцем розташування цього файлу є саме коренева папка сайту. Якщо файл був правильно розміщений (а його назва точно favicon.ico), більшість браузерів автоматично розпізнають його.
Однак для деяких браузерів необхідно вказати пряме посилання на іконку вашого сайту безпосередньо в HTML-коді, а саме додати її в хедер кожної сторінкиякої необхідно розмістити «favicon.ico»:
У більшості сучасних тем для Joomla, WordPress та інших движків використовуються окремі файли (наприклад “header.php”), де достатньо прописати 1 раз цей рядок на початку файлу і всі сторінки будуть автоматично підхоплювати вказані в них налаштування. Також існує розширений варіант написання цього рядка:
Якщо ви сумніваєтеся, який варіант підходить саме вам, пропишіть обидва рядки.
Не забудьте завантажити відредаговані сторінки назад на сервер для відображення змін у випадку, коли зміни відбувалися у локальній копії сайту.
Для використання іконки у форматі GIF або PNG необхідно прописати такі рядки:
Однак запам'ятайте, що обидва ці формати не підтримуються IE і не працюватимуть в ньому.
Однак є спосіб виправити цей недолік. Корисна властивість файлів .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.
Тому якщо ви хочете бути впевненими, що ваш favicon виглядатиме красиво у всіх можливих випадках – краще зробити його відразу в кількох варіантах. Наприклад:
16×16, 16-біт (256) кольорів 16×16, 32-bit colors 32×32, 16-біт (256) кольорів 32×32, 32-bit colors 48×48, 16-біт (256) кольорів 48×48, 32-bit colors
Але не варто надто захоплюватися і створювати багато варіантів, тому що з кожним додаванням favicon.ico збільшується у розмірі, що може негативно вплинути на його завантаження.
Вирішення можливих проблем Загальні проблеми У разі якщо після виконаних дій ваш favicon так і не з'явився, спробуйте кілька разів (близько 5) оновити вашу сторінку або очистити кеш браузера, або поставте “ ?” в кінці посилання (наприклад "http://diego.com.ua/?") - це дія змусить думати браузер, що сторінка є новою і ще не була додана в кеш.
Ще одним способом вирішення цієї проблеми є перехід за прямим посиланням на ваш «favicon» (наприклад: http://diego.com.ua /favicon.ico), після чого браузер (IE) негайно відобразить ізапам'ятає значок.
“Safari” для Mас-систем не відображатиме оновлений “favicon” до тих пір, поки не буде очищений кеш браузера. Однак натискання кнопки меню “Empty cache” не вирішить проблему, оскільки “Safari” зберігає іконки в окремій папці. Щоб очистити папку кешу іконок, необхідно зайти в меню “Edit > Reset Safari” та поставити галочку навпроти “Remove all website icons”. Альтернативним (ручним) способом є видалення вмісту наступної папки: “User>Library>Safari>Icons”. Для Windows-версії "Safari" шлях трохи відрізняється: "C:\Documents and Settings\YourUserName\Local Settings\Application Data\Apple Computer\Safari", у цій папці необхідно видалити файл "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 для вступу в дію зроблених змін.