Здравствуйте, дорогие пенсионеры! Вы решили стать блогером и вы регулярно пользуетесь различными социальными сетями.Тема сегодняшнего поста — аватарка, граватар, логотип, Favicon и как сделать самому в Photoshop. Будем разбираться в чём их смысл и разница. Разница в размерах картинки и требованиях того интернет ресурса, куда вы хотите загружать аватарки. Поговорка «Глаза — зеркало души», может звучать более современно «Аватарка — зеркало души».

Как сделать аватары самому в Photoshop легко и просто (несколько вариантов).

На популярных аватарках можно увидить животных, виды природы, героев мультиков и фильмов. Вы можете найти в интернете любую картинку для аватарки. Если человек нацелен на общение он выставляет собственную фотографию и хочет показать себя реального. Будь то настоящая фотография человека или же любая иная картинка, под ней отражается духовный мир человека. Вот поэтому заранее хорошо продумайте, что вы хотите заявить этой картинкой. Не меняйте аватарки очень часто, даже в сети нужна определенная стабильность.

Нужно запомнить, что в разных соц — сетях делается урезание действительного размера картинки. По этой причине вам придется подбирать её размер под тот, который запрашивает сайт.

Размеры аватарок в разных социальных сетях:
OK.ru: 190 х 190 px
YouTube: 800 x 800 px
Вконтакте: 200 х 500 px
Facebook: 170 х 170 px
Instagram: 110 x 110 px
Google+: 250 х 250 px
Twitter: 400 x 400 px

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

Делаем удобную панель в в Photoshop.

Откройте программу фотошоп.На скришоте три рисунка панели инструментов. Посмотрите на панель инструментов слева ( рис 1). Если инструменты расположены в один столбик, то это не совсем удобно.

Давайте сделаем панель в два столбика ( рис 2).
Она будет короче и зрительно лучше запомнится. Инструменты будут располагается парами и часто используемые инструменты всегда будут вверху. Для этого нажмите вверху этой панели на маленькую стрелочку. Получилось два столбика. Этой же стрелочкой панель инструментов можно вернуть в исходное состояние.

Обязательно нужно поставить галочку в  пункте  ПОКАЗАТЬ УПРАВЛЯЮЩИЕ ЭЛЕМЕНТЫ (рис 3 ). Мы будем использовать инструменты Перемещение и Кадрирование( третья кнопка).
Вот теперь можно начать работу.

Как сделать квадратный аватар в Photoshop

Будем для примера создавать аватар для в соц.сети «Одноклассники». Аватар группы в ОК может быть любым, так как он обрезается “в квадрат” размером 190 на 190 пикселей. Чтобы не было “размытости” возьмём чуть больше 288 на 288 пикселей.

Идём по стандартному пути. Вкладка ФАЙЛ->ОТКРЫТЬ , найдите у себя подготовленную картинку, которую вы хотите уменьшить до размера аватара. Откройте замочек. Кликните на инструмент  Кадрирование.

Можно просто потянуть угол картинки, не отпуская кнопку мышки. Кликните на инструмент Перемещение. В выпавшем окне нажмите Кадрировать.

Картина изменила размер.

Очень важным шагом, в получении картинки, будет правильный выбор расширения в формате PNG.

Перейдите в меню Файл-> Сохранить для Web и устройств. Сохраните аватар в папке на компьютере в формате PNG. Имя аватара пишите латинскими буквами.

Как сделать круглый аватар в Фотошопе

Идём по знакомому пути. Вкладка ФАЙЛ->ОТКРЫТЬ и находим изображение  для создания аватара.
Далее нажимаем  на инструмент ОВАЛЬНАЯ ОБЛАСТЬ.

Выделяем круглой рамкой нужную область изображения.  Нажимаем CTRL+C сохранить действия, затем вставляем нажатием CTRL+V

На скриншоте вы видите два слоя с глазиками. На слое 0 надо закрыть глазик и встать на слой 1.

Нажимаем на владку Изображение -> Размер изображения. Так можно посмотреть реальный размер вашей картинки. Выполняем те же действия, как и для квадратного аватара.

Нажимаем на инструмент  Кадрирование, затем Перемещение.

Выполняем ФАЙЛ -> Сохранить для WEB устройств в формате PNG.  Таким образом за короткое время легко и просто вы сами создали  квадратный и круглый аватар в Фотошопе.

Посмотрие  мои другие уроки по Фотошопу.

Как сделать логотип (аватар) для YouTube канала в Photoshop

Найдите в интернете фон (формата JPEG) и другие элементы (формата PNG) . Объясню — картинку без фона называют клипартом. Не надо ничего вырезать, просто поставьте на свой логотип клипарт без заморочек.
Будет очень классно, если вы подыщете какой-нибудь клипарт, который будет отражать содержание вашего канала. Для примера, я подготовила фон и два клипарта:
фон

клипарт — надпись

клипарт — фото

Откройте программу Photoshop и выберите «Файл» – «Создать».

Ширину и высоту будущего логотипа выберите 800х800 пикселей. «OK»

Все части ( фон и элементы) вашего логотипа нужно соединить, чтобы получилась целая картинка. Для этого, снова нажмите на «Файл» и кликните «Открыть». Выберите фон и клипарты, которые будете применять для создания аватарки.
На левой боковой панели инструментов выберите «Перемещение».

Вам требуется перетащить все слои по очереди на пустой слой. Кликните и зажмите левой кнопкой мышки на контурах слоя.
Двигая мышь, вы можете растянуть или убавить слой до нужного размера. Все тем же инструментом «Перемещение» вы можете перемещать картинки в нужное место на слое. Вот так должно получиться.

Можно двигать слои используя вкладку вверху РЕДАКТИРОВАТЬ, где выбираем ТРАНСФОРМИРОВАНИЕ и МАСШТАБИРОВАНИЕ.
Добавление надписи на логотип.

Это может быть наименование вашего сайта или канала.
Выберите в левой панели инструмент«Текст». Если необходимо, измените параметры текста.

Кликните на любом удобном месте на слое и пишите текст. 

Все тем же инструментом «Перемещение» вы можете менять местоположение текста. Так же действуйте во вкладке «Редактирование» инструментом «Трансформирование ».

Если текст показался вам бледным, откройте вкладку Слои -> Стиль слоя ->   выбирите эффект.

Когда вы закончили распределять все картинки и считаете, что логотип готов, можно сохранять.

ВыполняемФАЙЛ -> Сохранить для WEB устройств в формате PNG. 
Добавление логотипа на канал YouTube
Возможно придётся несколько раз заливать логотип на Ютуб, чтобы убедиться, как он смотрится хорошо или нет. Мне пришлось исправлять надпись, она не влезала в контуры.

На месте, где должен быть логотит, есть значок в виде карандашика. Жмите на него, чтобы перейти к установке логотипа.
Не стоит закрывать окно, прежде чем вы не убедитесь, что логотип подходит по цвету и размеру.

Чтобы сохранить и установить логотип нажать «Готово». Вот так легко и просто сделать логотип в Photoshop

На протяжении нескольких минут аватарка на вашем аккаунте обновится. Это все, что мне хотелось бы изложить о создании несложного логотипа для вашего канала YouTube. Большинство людей применяют такую схему, но для каналов и сайтов с большой аудиторией владельцы заказывают уникальные дизайнерские работы. А талантливые вэб — мастера создают оригинальные и неповторимые логотипы.

Как сделать граватар в Photoshop

Граватар, или gravatar (globally recognized avatar – глобально распознаваемый аватар) – это изображение, которое привязывается к вашему email адресу, и при его указании отображается рядом с вашими записями и комментариями на сайтах, поддерживающих специальный сервис Gravatar. Комментарии выглядят значительно более привлекательно, если содержат граватар.

Вот так смотрятся комментарии с главатаром и без него.

Главатар (изображение), которое помогает распознавать вас во всемирной паутине.

Заранее сделате для себя обычный аватар по описанию выше. Чтобы он появился на всех интернет ресурсах выполните несложные шаги. Это займёт у вас не более 5 — 7 минут, но зато в дальнейшем, на основной массе блогов, сайтов и форумов, аватар будет не безликим. У вас будет не просто аватар, а Граватар – глобальный аватар — атрибут электронного адреса. Погуглите в адресной строке и напише слово граватар. Попадёте на сервис Gravatar.com.

http://ru.gravatar.com/

Чтобы привязать аватар к своему электронному адресу ( e-mail ), нужно зарегистрироваться на сайте.
Главная страница сервиса переведена на русский язык, а остальные страницы на английском, но браузер поможет с переводом.
Нажмите кнопку «Войти»
Нажимаем на клавишу “Создайте свой граватар”,
вводим email-адрес (почты Gmail)
и щелкаем “Регистрация”. Введите свои e-mail, логин (нигде фигурировать не будет) и пароль, нажмите кнопку.

Вам отправляется письмо для подтверждения, что это действительно ваш почтовый ящик.
Если видите похожее сообщение, значит всё в порядке.

Прочтите письмо и выполните требуемые действия. После этого сможете снова заходить на сайт при помощи кнопки «Войти» и пароля. Это стандартная процедура.

Загрузите подготовленную картинку для создания граватара. Выбирете однин из четырех способов.

1. В качестве ссылки из интернета.
2. Файл с жесткого диска компьютера.
3. Ранее загруженное изображение.
4. Сделать снимок с помощью Веб-камеры.

После того, как изображение будет добавлено, нажимаем «Перейти к обрезке«.
Обрезаем или растягиваем картинку, передвигая и перемещая контур.

Дальше потребуется привязать новый граватар с одному из электронных адресов. Один грватар допускается привязать сразу к нескольким мейл аресам, для чего достаточно поставить возле них галочку.

Далеко не все адреса, можно добавить на сервис Gravatar. Он не поддерживает адреса с …@mail.ru , поэтому приходиться брать другие адреса (почты Gmail).

Далее небольшая информация для тех пользователей, у кого сайт на движке CMS WordPress. Gravatar поддерживается в частности  WordPress, начиная с версии 2.5.

Например, на движке WordPress в консоли (меню Параметры — Обсуждение, раздел Аватары) есть настройка  граватара по умолчанию, если человек, оставивший комментарий не имеет граватара.
****

Как сделать Favicon для сайта в Photoshop

Вы щелкаете по звездочке в правом верхнем углу окна браузера и у вас в закладке появляется маленькая картинка. По ней вы узнаёте нужный вам сайт. Посмотрите в верхний левый угол строки браузера. Там вы видите фавикон сайта.

Теперь начнем создавать Favicon для сайта в программе Фотошоп. Обычно его создают из логотипа обрезав часть.

Открываем программу.
Загружаем логотип. В левом верхнем углу жмем ОТКРЫТЬ изображение. Нам нужно только изображение головы.

Затем создаём новый слой СОЗДАТЬ, проставляем длину и высоту картинки 16px на 16px.

Уточняю… размеры ставим обязательно в пикселях, цветовой режим RGB, разрешение 72 пикселя на дюйм. наименование пока не пишем.

После того как вы кликнули на кнопку ОК, в Фотошопе появился слой вашего будущего фавикона. На левой боковой панели выберите инструмент «Перемещение»

Чтобы логотип поместилося в новом слое необходимо её уменьшить.
Поэтому жмём вверху РЕДАКТИРОВАТЬ, где находим ТРАНСФОРМИРОВАНИЕ и МАСШТАБИРОВАНИЕ.

Зажимаем ЛКМ и перетаскиваем логотип на пустой слой. Выполняем ФАЙЛ -> Сохранить СОХРАНИТЬ КАК… формате ICO.

Здесь надо набраться терпения и вставить картинку. Размеры очень маленькие и с первого раза может не получиться. Когда будет всё готово, СОХРАНИТЬ как… с именем favicon.ico . Повторюсь …неукоснительным условием будет точное написание названия с маленькой буквы на латинице favicon.ico.  favicon.ico.

В настоящее время фавикон может иметь разные форматы: PNG, GIF, JPEG, SVG. Зависит это от версии браузера. Хотя может не поддерживаться в некоторых конкретнных браузерах и их версиях. Как норма, применяют формат ICO и размещают в корневом каталоге как файл. Кроме стандартного, размер, может быть 32px × 32 px, не везде 60px × 60 px, 120px × 120 px. Выбранная картинка фавикона должна быть связано с темой, быть понятной и простой, само собой разумеется, уникальной.

Как загрузить favicon в корневую папку сайта.

К корневую папку сайта загрузить файл. Потом в код head нужно поместить ссылку на фавикон типа <link rel=»icon» href=»http://путь до файла» type=» image/формат»>.

Если применяется файл формата ICO, то в type указывается image/x-icon или image/vnd.microsoft.icon.

Специально для браузера Internet Explorer применяется особая ссылка, где сначала будет link rel=»shortcut icon».В целях правильного отображения на мобильных устройствах ещё могут понадобиться отдельные записи, например rel=»apple-touch-icon».

Для того чтобы иконка появилась в адресной строке вашего браузера, следует через FTP клиент, или cPanel, записать его в корневую папку (public_html). Подождать некоторое временя. Для обработки её сервером потребуется примерно сутки. Если фавикон не появится, то не нервничайте и не теряйте надежды. Поищите ошибки в местах, где вы раньше делали изменения. Проделайте ваши шаги ещё раз.
Далее для тех кто хорошо знаком с редактированием темы сайта или блога, заходим в файл HEDER.PHP и вставляем вот такой код:

Ставим код между тэгами <HEAD> ……</HEAD> и нажав на кнопку СОХРАНИТЬ ИЗМЕНЕНИЯ перезагрузить страницу.

В интернете можно скачать уже готовые и красивые иконки, но само собой возникает проблема, а где уверенность что она уже не стоит фавиконкой какого-то другого сайта ?

P.S. Вот и всё, дорогие пенсионеры, теперь Вы знаете, как сделать легко и просто разные аватарки в Фотшопе. Photoshop  идеально подходит для создания аватарок, логотипов, банеров.

Если Photoshop отсутствует на вашем компьютере, скачайте и установите его.

Если вам понравилася урок, то подпишитесь на обновление блога, я постараюсь чтобы вам были интересны новые знания. А вы нажмите на одну из кнопочек социальных сетей, чтобы ваши друзья и знакомые пролучили полезную информацию

Удачи вам!