Хотите создать себе сайт в Кратчайшие сроки, но абсолютно не знаете как это делается?

Специально для Вас был создан обучающий курс по современному конструктору сайтов - Joomla!

80 видеоуроков + уникальная система обучения на практике = результат.

Новинка! Хотите Узнать о Потрясающем и Эффективным Методе Изучения Фотошопа, Не Посещая Курсы, Не Читая Самоучители?!

15 Часов Практических Уроков Записанных с Экрана Монитора с Подробными Аудио-Комментариями сделают из Вас настоящего Фотошоп-мастера!

Подробнее.. - https://disc.photoshop-master.ru/mgraphics

Дизайн и вёрстка

Рисуем иконку для сайта

Условия перепечатки материалов
Статью можно обсудить на форуме!

Рейтинг статьи: 66666
Проголосовало 7 человек.
Оцените статью:

Рисуем иконку для сайта

В этом уроке вы научитесь рисовать иконку 16х16 для сайта. Причем иконка будет видна только в заголовках вкладок (если браузер пользователя поддерживает вкладки). Например, такие иконки вы можете увидеть на таких сайтах, как Rambler.Ru, Yandex.Ru при просмотре через браузер Opera и др. В уроке подробно описывается весь процесс: от нарисования самой иконки непосредственно до "прицепления" ее к веб-странице.

Итак, начнем с создания изображения 200х200 пкс. Не будем же мы рисовать иконку в изображении 16х16 :) Так будет просто неудобно и нужное качество не получится, даже при максимальном увеличении картинки.

Я покажу все на примере очень простой иконки - "шарика с бликами". Создаем новый слой и рисуем при помощи Elliptical Shape Tool красную окружность.

Рисуем иконку для сайта

Дважды кликаем на слое с окружностью в палитре слоев и применяем следующие настройки стиля, показанные на рисунках ниже.

Рисуем иконку для сайта

Рисуем иконку для сайта

В результате получится следующая картинка.

Рисуем иконку для сайта

В панели слоев, зажав Ctrl, кликаем на слое с окружностью. Теперь активируем инструмент Elliptical Marquee Tool и зажав клавишу Alt ведем выделение от верхнего левого угла шарика до половины - так, чтобы была выделена почти вся часть шарика, за исключением теневой области.

Рисуем иконку для сайта

Создаем новый слой, не снимая выделения. Теперь активируем инструмент Gradient Tool, настраиваем градиент от белого к прозрачному и ведем от центра верхней дуги выделения к центру нижней (можно даже чуть дальше). Снимаем выделение Ctrl+D и смотрим результат.

Рисуем иконку для сайта

Теперь добавим текстовый слой с одной буквой, символизирующей название сайта. Чтобы избежать лишней рекламы, я просто напишу букву "A" :) Оформите буковку по своему вкусу.

Рисуем иконку для сайта

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

Сама иконка готова. Вы, конечно, можете нарисовать свою по своему усмотрению - я нарисовал иконку здесь ради примера и только. Идем в меню Image > Image size и ставим размеры 16х16 пкс. (Scale Styles учитываем).

Рисуем иконку для сайта

Теперь сохраняем иконку в формате PNG с прозрачностью. Жмем Ctrl+Shift+S и выбираем тип файла PNG-24. Ставим галочку прозрачности.

Рисуем иконку для сайта

Иконка в формате PNG выглядит следующим образом.

Рисуем иконку для сайта

Теперь переименовываем файл иконки - меняем расширение .png на .ico.

Итак, наступил самый ответственный момент! :) Лезем в код странички и в блоке тегов прописываем следующий код:

<link rel="SHORTCUT ICON" href="favicon.ico">

Что говорит нам этот код? При помощи него во вкладке браузера будет видна иконка, путь к которой указан в параметре href. В нашем случае это favicon.ico в корне сайта.

Результат появления иконки во вкладке вы можете наблюдать ниже:

Рисуем иконку для сайта

Вот и все! Спасибо за внимание! Как видите, в данной теме нет ничего сложного :)

Автор - De-Logic.com

Подготовлено для MGraphics.RU

Разместил: Эртэд
Опубликовано: 27.12.2006
Статья "Дизайн и вёрстка - Рисуем иконку для сайта" прочтена 12306 раз.

Комментарии к статье Рисуем иконку для сайта

Zrfylvccteo - e-mail, сайт - https://ncsfcgzkvxru.com/
9ZQp02 amxiyjqethfy, [url=https://mjedfsyrduvh.com/]mjedfsyrduvh[/url], [link=https://zcqjvzzvgakp.com/]zcqjvzzvgakp[/link], https://kxmedwidzmjn.com/

Mary Hase - e-mail
Ну главное основы...для создания чего то сложного надо знать самое примитивное.Кто умеет самореализовываться тот сможет)

DReAm cAtcheR
Хм ну если учитывать что иконка создавалась только для заголовков окон, то здорово, хотя я бы в таких местах не использовал объемные изображения. Лучше делать что нибудь в стиле ретро =) ИМХО.

Эртэд
В статье мы хотели рассмотреть основные принципы работы с favicon.ico. Думаю, это получилось.

DReAm cAtcheR
В принципе статься не плохая ... но: 1. объем обработан слабо 2. приметивная форма *шарик* 3. для очень не опытных ИМХО =)

Оставьте ваше мнение о статье

Имя:
E-mail:
Сайт:
2 + 4 = (цифры, напр-р, 6 + 5 = 11)
Комментарий:

Последние новости
Последние темы на форуме

Adobe Photoshop Corel Draw 3d Flash Графика Продвижение сайтов - https://www.siteprojects.ru/

Яндекс.Метрика