Сегодня, друзья, рассмотрим важнейшую для вебмастера задачу, такую как подготовка картинки для сайта в Photoshop. Казалось бы, что может быть проще? Загрузил фотографию с фотоаппарата или смартфона прямо в нужное место статьи и всё. Да не тут-то было! Оригинальное изображение, как правило, слишком большое и «весит» много.
В лучшем случае, страница с такой картинкой будет загружаться слишком долго, и вы потеряете часть посетителей своего сайта. А в худшем, в зависимости от настроек темы, картинка может «выехать» за пределы текстового поля и испортит внешний вид сайта. С таким безобразием ни один вебмастер, даже начинающий, мириться не будет.
Поэтому, прежде чем размещать изображение на сайт, его нужно подготовить. А поскольку, мы с вами осваиваем популярный графический редактор Photoshop, то и работу эту выполним в нашей замечательной и удобной программе.
Готовим картинку для сайта из интернета
Делаем скрин
В первом примере, мы приготовим изображение для сайта, взятое из интернета. Такая картинка пригодится, если вы ведёте сайт или блог по тематике WORLD OF TANKS. Для получения изображения отправляемся в популярный видео сервис Youtube и делаем скриншот.
Затем открываем Фотошоп, и создаём новый файл. Для выполнения данной операции идём по пути «Файл» — «Создать», при необходимости выбираем опцию, тип документа — «буфер обмена».
После создания нового документа, нажимаем комбинацию клавиш Ctrl+V и наш скриншот вставляется в рабочее окно нового изображения.
Размер картинки
Обратите внимание, вы должны заранее знать, какой размер картинки по ширине необходим. Это можно выяснить, измерив ширину поля, для вставки изображения на ваш сайт. Или посмотреть данные в документации к шаблону WordPress.
По личному опыту, могу сказать, что если вы планируете размещать картинку на сайте, а не в галерее изображений, её размер редко превышает 900-1000 пикселей по ширине. Причём для простого размещения в статьях, достаточно изображения 500-700 пикселей, по широкой стороне. Но возвращаемся к подготовке картинки для сайта и программе Photoshop.
Первым делом обрезаем всё лишнее, чтобы в рабочем окне осталось только изображение из игры. Берём инструмент «Рамка» (горячая клавиша C), выделяем нужную область и нажимаем «Enter». В результате вы видите картинку «из боя».
Теперь нужно подогнать размер и разрешение изображения под наши требования, учитывая, что картинка будет размещаться в сети интернет. Открываем рабочее окно «Размер изображения». Для этого, в строке меню нажимаем «Изображение» — «Размер изображения» или комбинацию клавиш Alt+Ctrl+I.
Следует запомнить! Для интернета достаточно разрешения 72 пикселя на дюйм. В то время как для печати фотографий или полиграфии следует выбирать разрешение в Photoshop — 300 пикселей на дюйм.
Мы видим, что наша картинка немного меньше, требуемых 700 пикселей по ширине. Чтобы её увеличить, я просто ввожу, в окно ширина, значение 700 и нажимаю «Ок». Обратите внимание, что для равномерного увеличения изображения, значения ширины и высоты должны быть связаны, как у меня.
Теперь, когда картинка для сайта имеет нужный размер, можно немного подправить резкость, потерянную при увеличении. Выбираем в строке меню «Фильтр» — «Резкость» — «Умная резкость». И задаём параметры фильтра, по своему усмотрению или можете воспользоваться теми, которые указаны на моём изображении.
Здесь указан эффект резкости 90 %, радиус 0,7 пикселей, уменьшить шум — на 10%. Если ваша картинка требует дополнительной коррекции, можно поправить уровни, выровнять значения яркости и контрастности или повысить насыщенность. В программе Photoshop, эти операции выполняются легко и просто, и не требуют детальных разъяснений.
Сохраняем картинку для сайта в Photoshop
Картинка для сайта готова и теперь её нужно сохранить для интернета. Если производить сохранение изображения в Фотошоп «традиционным» способом, как мы рассматривали в уроке фотошопа, знакомство с программой, то получим большой размер файла, но с отличным качеством.
Наша же задача — получить изображение для сайта минимального размера, но с хорошим качеством. Чтобы пользователи смогли его рассмотреть в деталях. Поэтому выбираем режим сохранения для интернета — «Файл» — «Экспортировать» — «Сохранить для Web». В данном режиме перед нами появляется рабочее окно. В котором, мы можем полностью настроить формат и размер выходного файла.
В режиме «Сохранить для Web» рекомендую, во вкладке просмотра (вверху), выбрать — 4 варианта.
В правой верхней части рабочего окна «Сохранить для Web» вы можете выбрать формат сохраняемого изображения — jpeg, gif, png. Чуть ниже находятся инструменты, отвечающие за качество сжатия. Используя их, можно наглядно определить, какой вариант соотношения качество-размер изображения, для вас — наиболее оптимальный.
Далее, после выбора, параметров нажимаем «Сохранить», вводим название изображения и сохраняем в нужную папку. Так мы подготовили картинку из интернета для сайта. Она имеет небольшой объём, но при этом, выглядит достаточно чётко, без цифровых артефактов. Такое изображение можно смело размещать в сети, не опасаясь, что ваш блог или сайт станет «тормозом».
Подготовка фотографии в Photoshop для интернета
Подготовка фотографии для публикации на сайте или в социальной сети, практически не отличается от оптимизации картинки для сайта. Но нужно учитывать, что фотки имеют значительно больший размер, чем скрины и картинки, скачанные из Веба.
Итак, открываем фотографию, всё в том же графическом редакторе Adobe Photoshop. Открываем через строку меню «Изображение» — «Размер изображения», комбинацию клавиш Alt+Ctrl+I. И меняем сначала разрешение изображения, на 72 пикселя на дюйм, а затем задаём ширину.
Получилась фотография с исходными пропорциями, но меньшего размера. А мне, для примера, нужно получить более узкое изображение для интернета. Здесь можно действовать двумя способами, или комбинировать эти способы.
Первый вариант, мы используем инструмент «Рамка» (горячая клавиша C) и обрезаем фотографию вручную. И второй вариант, воспользоваться функцией «Изображение» — «Размер холста» (всё в той же строке меню). В появившемся рабочем окне задаём требуемую ширину — 500 пикселей и нажимаем «Ок», сохраняя результат.
Теперь, когда фотография приобрела нужный размер можно отредактировать другие параметры изображения. Например повысить контраст и увеличить резкость. Хочу предостеречь вас от слишком высокого задирания резкости — зашарпливания. Такие фотографии просто режут глаз и смотрятся примитивно, что в интернете, что в полиграфии.
Сохраняем нашу фотографию так же, как и картинку, через «Файл» — «Экспортировать» — «Сохранить для Web». При сохранении обратите внимание, что на участках изображения с равномерным фоном, гораздо заметнее цифровые артефакты.
Поэтому значение качества можно немного увеличить. В результате фотографию можно размещать на сайте, блоге или в социальных сетях. Она хорошо смотрится и не занимает много места, то есть не тормозит загрузку страниц.
Как видите, подготовка картинок и фотографий с помощью Photoshop — операция несложная, и доступная начинающему пользователю программы. Конечно, редактирование изображений, требует временных затрат. Но мы же стремимся построить правильный и быстрый сайт. А не как у «дяди Васи», который «Пупкин».
Поэтому стоит запастись терпением и подготовить каждую картинку вручную. В то же время не стоит забывать, что если вы создаёте сайт на WordPress, то для этой CMS есть плагины оптимизации изображений. Но многие из таких плагинов платные, да и вывести картинку «в идеал» плагин не сможет. Так что открываем Фотошоп, и работаем ручками.
