Создание иконок ico

Создание иконок ico

 


Здравствуйте дорогие читатели!

В прошлом уроке мы говорили о том как пользоваться ftp и как заливать файлы на свой сайт ucoz с огромной скоростью. Я надеюсь тема вам понравилась и вы уже этим пользуетесь.

Сегодня мы поговорим о том как создать иконку ico и как вставить иконку на сайт ucoz.

Поехали.

Я допускаю, что вы ничего не знаете.
Поэтому. Разберем что такое вообще иконка ico.
Иконка ico - это графическое изображение, которое отображают браузеры во вкладке сайта либо на странице поисковика рядом с title-ом сайта.





Иконку ico мы будем создавать размеров 16х16. Вы можете создать 32х32 но знайте, что браузер все равно ее сожмет до 16х16 и возможна потеря качества.
Создать иконку ico можно где угодно. Можете создать ее в: Paint:) , CorelDraw, PhotoShop, Illustrator и другие. Также есть прекрасный сервис favicon.ru, там вы можете создать иконку ico, не прилагая почти никаких усилий.

Я буду делать иконку ico в PhotoShop CS5.1.

Заходим в Фотошоп.
Нажимаем CTRL + N.
Указываем размер документа 16х16 пикселей.
Нажимаем на лупу либо (Z) несколько раз. Чтобы белое поле было полностью видимо но и очень крупно.
Разблокируем слой нажав 2 раза на замочек.
Далее я сделал градиент фона. (Правой кнопкой мыши на слой>параметры наложения>наложение градиента и выбираем цвета)
Я сделал данную цветовую схему



Также я настроил глянец таким образом



Затем пишем аббревиатуру своей фирмы красиво и читабельно.
Я это сделал карандашиком. Написал буквы пикселями.
Сделал контур и вырезал в некоторых местах фон.
Получился такой результат





Теперь сохраняем полученное изображение с именем: favicon.ico
Идем в админ панель. Заходим в файловый менеджер и кидаем иконку в основную директорию сайта
Затем идем в "управление дизайном" и в страницы сайта. Между тегами "head" вставляем код:

 

Код
<link rel="shortcut icon" href="http://%D0%B2%D0%B0%D1%88%D1%81%D0%B0%D0%B9%D1%82.ru/favicon.ico" type="image/x-icon" />
  <link rel="icon" href="http://%D0%B2%D0%B0%D1%88%D1%81%D0%B0%D0%B9%D1%82.ru/favicon.ico" type="image/x-icon" />


Все. Иконка готова. Она может измениться не сразу а с течением времени, так что не пугайтесь.

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

Спасибо за внимание и переходите к следующему уроку!

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Права

Администрация не несёт ответственности за содержащие файлы на данном портале. Все материалы на сайте принадлежат исключительно их владельцам! Все права не нарушены.

Обратная связь


Firm: banzakaz
Phone: +7 910 123 53 10
Email: [email protected]
Skype: mbl-landing

Мы вконтакте


За репост и вступление в группу, СКИДКА - 5% :)