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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован.