Photoshop: Обработка снимков картин для online-галереиОпубликовано: 10.10.2013 17:49 Автор: Ogri Просмотров: 6530
Как я уже отмечал в статье о редактировании анимированных GIF-ов, я никак не являюсь экспертом по Фотошопу. Однако, изучив некоторые сценарии обработки изображений, с успехом их использую. К примеру, когда открыл здесь на сайте галереи двух не чужих мне юных художников, то озаботился методом, вынесенным в заголовок статьи. Опишу задачу нагляднее.
Дано: фотография картины. В своем первозданном виде она никак не годится для выкладывания:
Ожидаемый результат:
Последовательность действий по превращению первого во второе и вынесена на повестку сегодняшнего дня.
Как и в вышеупомянутой статье - Замечу: использую английский интерфейс, так что пункты меню, заголовки, названия секций как в тексте, так и на скриншотах (которые, кстати, кликабельны) даны на английском. Найти соответствующие в русском интерфейсе - проще пареной репы.
Итак, пошагово:
Открываем файл в Фотошопе. Для удобства работы масштабируем изображение. Активизируем Zoom Tool, кликаем правым кликом на картинке и во всплывшем меню выбираем Fit on Screen (или кликаем на кнопку Fit Screen на появившемся вверху тулбаре).
Если в интерфейсе программы не видны линейки, в главном меню выбираем View > Rulers (или нажимаем Ctrl+R). Кликаем поочередно на вертикальной и горизонтальной линейках и тянем курсор до ближайших к краям картинки углов - верхнего и нижнего, левого и правого. Там отпускаем левую кнопку мыши, остаются голубые линии. В результате они обрамляют искаженное пока изображение картины:
Кликаем на Rectangular Marquee Tool в панели инструментов (или просто жмем клавишу M). Выделяем зону вокруг прямоугольника, образованного пересечением голубых линий, так, чтобы углы отстояли от углов голубого прямоугольника на небольшое расстояние:
Правый клик на картинке - во всплывшем меню выбираем Free Transform (или в главном меню Edit > Free Transform, или используем акселератор Ctrl+T).
Снова правый клик, выбираем Distort (те, кто предпочитает главное меню, идут в Edit > Transform > Distort).
Тянем за квадратики в углах нашей выделенной области, стараясь совместить углы картины на фото с точками пересечения голубых линий. При этом стараемся минимально исказить изображение:
Картина, таким образом, принимает прямоугольную форму. Однако в некоторых местах все еще может оставаться искривленной:
Можно было, конечно, вытянуть нижнюю линию дальше за пределы голубого прямоугольника, но мы ведь хотим сохранить картину по максимуму, да и деформации убрать, приведя изображение к виду, наиболее близкому к оригиналу. Поэтому воспользуемся более тонким инструментом.
Опять-таки правый клик - выбираем Warp (Edit > Transform > Warp). Теперь, кликая в выбранных местах внутри выделенной зоны, можно локально подрихтовать изображение, подтягивая его части.
Теперь, когда часть фото, соответствующая нашему шедевру мировой живописи, почти идеально вписана в голубой прямоугольник, снова кликаем на Rectangular Marquee Tool. Предложение сохранить трансформацию принимаем с энтузиазмом, выражая его посредством нажатия кнопки Apply:
Теперь уберем с изображения все лишнее, а именно - находящееся за границами самой картины. Кликаем мышью в любом месте изображения, чтобы сбросить предыдущее выделение, после чего выделяем зону точно по сторонам голубого прямоугольника. Затем идем в главное меню и выбираем Image - Crop.
Приведем картину к пропорции, соответствующей оригиналу. Заодно подгоним размеры к окончательным. Оригинал в моем случае имеет пропорцию 4:3, такие изображения я выкладываю на сайт в полноразмере 1600x1200. Проиллюстрирую процесс скриншотом, на котором три диалоговых окна соответствуют трем стадиям редактирования параметров. Поехали.
В главном меню идем в Image > Image Size (Ctrl+Alt+I). В открывшемся диалоговом окне видим текущие размеры имиджа (диалог 1). Выставляем ширину в искомые 1600 пикселей, при этом, поскольку чекбокс Constrain Proportions активен, то и высота подгоняется в соответствии с шириной (диалог 2). С оригинальной же пропорцией соответствия как раз не наблюдается - картинка немного растянута по высоте. Поэтому отключаем Constrain Proportions и выставляем нужные ширину и высоту, после чего жмем OK (диалог 3).
Подкорректируем тона. Для начала попробуем довериться автоматике и выберем Image > Adjustments > Auto Levels (Ctrl+Shift+L). Иногда Photoshop делает это неплохо; в данном же случае цвета получились несколько кислотными:
Можно, конечно, настроить алгоритм автоматической коррекции, но мы ведь и сами не дураки, верно? Поэтому жмем Ctrl+Z и открываем интерфейс ручной корректировки тона - Image > Adjustments > Levels (Ctrl+L). В секции Input Levels видим некий график. Самое простое, что не повредит сделать, - убрать отрезки вне залитой области: это так называемый "шум". Как мы видим, левый ползунок черный, если двигать его вправо - темные тона делаются еще темнее; с правым же, белым - все наоборот (Preview - включено). Есть еще серый, он соответствует уровню средних тонов и двигается при перемещении двух предыдущих.
В принципе, достаточно вполне бездумно сдвинуть крайние ползунки к границам зоны, но можно попробовать и заехать за них, если результат будет лучше соответствовать оригиналу или вашему восприятию. Можно заодно подвигать серый для независимой подстройки средних тонов. Наконец, можно также поиграться с Output Levels, подстроив тем самым яркость и контраст, но я, как правило, удовлетворяюсь сдвиганием пиптиков в Input Levels. Лучшее - враг хорошего, не так ли? Поэтому жмем OK и получаем практически готовый результат. Можно сохранить его в файл.
Что осталось? Только подготовить имидж для выкладывания в вебе. Он все еще тяжеловат. Стандартный способ для Фотошопа - идем в File > Save for Web & Devices (для маньяков, предпочитающих заучивать горячие клавиши, или просто для обладателей хорошей памяти - аж Ctrl+Shift+Alt+S). На экран вываливается соответствующий диалог:
В секции Preset можно выбрать один из готовых вариантов в заглавном дропбоксе либо вручную установить значения параметров. Тонкая настройка осуществляется изменением содержимого поля Quality. При этом слева внизу можно видеть размер файла изображения, соответствующий настройкам качества. Картинка также изменяется по мере изменения параметров. Выбрав приемлемое соотношение размер - качество, жмем Save. Имидж готов, заливаем его на хостинг и хвастаемся перед сетевой общественностью наличием Эрмитажа на своем сайте.
Новые
-
13.02.2017 14:09
Joomla: как добавить свои языковые константы или переопределить существующие -
13.02.2017 13:23
Joomla: Интегрируем reCAPTCHA v2 (NO CAPTCHA) в JComments -
23.06.2016 10:48
Единая фильтрация вывода модуля mod_jcomments_latest -
13.09.2015 13:06
Постим иллюстрированные статьи Joomla-сайта на Facebook, используя OG-теги -
16.06.2014 16:20
Joomla: Фильтруем контент по материалам, категориям и компонентам
Популярные
-
49052
Редактирование анимированных GIF-имиджей в Photoshop CS3 -
25274
Миграция с Joomla 1.5 на Joomla 2.5. Ч.2-1. Перенос jDownloads и jComments -
23508
Кнопки социальных сетей в Joomla 2.5 -
19927
Кнопки социальных сетей в Joomla 2.5. Варианты от Яндекса и Pluso -
19366
Joomla 2.5: Убираем хлебные крошки с выбранных страниц
Авторизация
Гитара
Гостевая колонка
Последние комментарии
-
Joomla: Интегрируем reCAPTCHA v2 (NO CAPTCHA) в JComments
-
Денис 07.12.2019 07:50
Посмотрел ссылку. Там что-то очень много файлов... как устанавливать???
-
ProtectYourSite 04.12.2019 06:56
Попробуйте поставить данную версию: https://github.com/exstreme/Jcomments-Recaptcha2/blob/Develop/com_jcomments_v3.0.7.5.zip ...
-
Денис 03.12.2019 06:09
P.S. кстати, у вас невозможно ответить на ответ если делать это в браузере FF. Получилось только в ...
-
Денис 03.12.2019 06:08
Да, в самой последней версии (3.0.7 вроде бы) всё та же kcaptcha. Поэтому и воспользовался ещё раз ...
-
Ogri 30.11.2019 04:24
Вы знаете, я сам не обновляю компонент, поскольку внес в него много своих изменений и не уверен, что ...
-
Денис 29.11.2019 18:58
Ещё раз спасибо. После обновления jcomments довольно быстро по вашей инструкции опять включил эту ...
-
Иван 20.07.2019 10:40
Спасибо, помогло. Для шаблона комментов joomspirit_theme можно заменять код аналогичным образом.
-
andreypominov 08.05.2019 16:05
еще один косяк, если выбрать "скрыть форму добавления комментария", то после нажатия на "добавить ...
-
andreypominov 08.05.2019 14:32
кстати здесь тоже без отметки в рекапче ничего не пишет (4 пункт)
-
andreypominov 08.05.2019 14:30
Работает. reCaptcha появилась, вот только сообщение если капчу не отметить не появляется (новая ...
-
Комментарии
В девятом шаге можно еще просто нажать Enter.
В десятом шаге можно сбросить выделение нажав Ctrl + D.