Создать иконку для сайта в фотошопе, Favicon

Недавно пришлось делать иконку для своего сайта. Времени, как всегда, мало, сделала на скорую руку — пускай живет пока. Может приживется ?

Поделюсь с вами своим опытом. Буду рада, если пригодится.

Над логотипом я не заморачивалась: взяла первую букву.

1. Создаем  документ.

Откываем «Файл», выбираем «Новый». В установках выбираем «Custom» (заказной). Вбираем ширину и высоту по 500 пикселей.

2. Выбираем цвет.

Создаем новый корректирующий слой «Цвет» и выбираем оттенок. Я выбрала темно- красный.

3. Набираем текст.

Сначала можно выбрать подходящий цвет (а можно это сделать и после ввода текста). В левой панели выбираем текст (обозначен символом «Т»). Определяемся со шрифтом и его размером в горизонтальной панели.

Чтобы редактировать текст, активируйте слой, наведите курсор на слово и щелкните прямо по нему, теперь можно выделять, так же как в Ворде.

4. Добавляем эффекты

В правой панели, в разделе Слои активируем слой Текст. Выбираем «Эффекты слоя» и экспериментируем в свое удовольствие. Главное, не переборщить — для маленькой иконки нужен простой дизайн. Я остановила свой выбор на эффекте «Внутренняя тень».

Если у вас более ранняя версия программы, перед наложением эффектов нужно растрировать текст. Эту функцию можно найти, во вкладке «Слой» на горизонтальной панели.

5. Сохраняем в нужном размере.

Стандартный размер иконки: 16х16 пикселей.  Сначала я сохранила изображение в заданном изначально размере (500х500) , т.к. буду использовать его не только в качестве иконки.

Выбираем «Изображение», затем «Размер изображения», в появившемся окне изменяем высоту и ширину, вводим цифры вручную. Далее сохраняем, как обычно, в формате JPG.

Добавьте иконку в «Медиафайлы» своего сайта, а затем вставьте ссылку в настройках плагина Favicon.

Как сделать эффект блеска на иконке и скруглить углы, я расскажу в следующих уроках.

 

18 Replies to “Создать иконку для сайта в фотошопе, Favicon”

  1. Действительно пригодится. Но мне кажется, что такие уроки лучше все же делать в видео формате. В динамике смотреть всегда интересней и понятней, чем читать статичный текст.

    1. Плюс уроков по картинкам, в том, что не у всех есть возможность смотреть видео. Спасибо за совет. Я планирую создавать видео.

  2. Спасибо, попробую воспользоваться. Вроде бы несложно, описано понятно.

  3. Полезный материал, но я тоже за видео -получается нагляднее.

  4. Да и без видео всё понятно, обязательно воспользуюсь, а то уже надоело граватар на месте фавикона наблюдать.

  5. А мне понравился урок в картинках! Все очень понятно и доступно, как лекция в тетрадке. Спасибо!

  6. Очень хорошо объяснили, доступно и понятно. Спасибо.

  7. Тоже хороший способ сделать фавикон, но можно и в онлайн-редакторе — как у меня описано.

  8. Все понятно, попробую к следующему сайту так сделать ?

  9. Ну все понятно. Но есть спец проги сделать фавиконы, я разными пользуюсь, к примеру.

  10. Ага полезно. Фотошоп еще не освоил в совершенстве.

  11. Я как раз решила заняться этим вопросом:-) сделаю по вашему уроку и попрошу вас потом оценить, ок?:-)

    1. ОК! если нужна консультация, обращайтесь!

  12. А как называется программа, в которой всё это делается?

    1. Я описала, как создавать иконку в программе Adobe Photoshop.

  13. Ваш блог хорошее подспорье для начинающих! Сам хочу освоить фотошоп, дело нужное! Спасибо Вам Антонина за советы! Беру Вас в закладки и становлюсь Вашим постоянным читателем! Удачи!

  14. На мой взгляд, в уроке нет ничего полезного. И новичок, что знает кнопки инструментов в «Фотошопе» может догадаться до такого. Залить фоном-написать текст-экспериментировать — гениально!

Comments are closed.