004. FAQ по работе в Photoshop от Андрея Журавлева.
Это один из вопросов, который был задан учениками на курсе Adobe Photoshop. Базовый уровень При желании дополнительные вопросы можно задавать прямо в комментариях к этому посту. Ссылки на все вопросы собраны в верхнем посте моего ЖЖ.
4. Как избавиться от жутких следов артефактов JPG?
Давайте сначала разберемся, как JPEG сжимает картинку, и чем «жуткие артефакты» отличаются от «не жутких». На иллюстрации приведена центральная часть кадра, который сделал Александр Железняк. Фото входило в книгу «Россия глазами блогера». Это кроп с полноразмерного кадра, разрешение «родное». Соответственно, каждый пиксель честно несет информацию о деталях. В той степени, в которй ее восстановил конвертер.
А вот это та же самя картинка покрытая «жуткими артефактами» ровно наполовину. На верхнюю половину. Кадр срощен из двух частей: нижняя половина сохранена с обычным для интернета фактором качества 8.
В команде Save for Web (Сохранить для Web) этому соответствует установка качества 60. Верхняя половинка предварительно была сохранена с фактором качества 0. Наметанный глаз может заметить неоднородности на частичках мусора в воде. При этом верхняя часть краба выглядит достаочно сносно.
Фанаты могут сдернуть вышеприведенное изображение, открыть его в фотошопе, увеличить и рассмотреть неприятности во всей красе. Для всех остальных представляю центральную часть кадра, увеличенную в пять раз. Справедливости ради нужно заметить, что сохраненная даже с таким драконовским сжатием картинка, в реальном размере не производит неизгладимо жуткого впечатления. И, следуя принципу разумной достаточности, можно было бы с ней смириться. Но, принцип не накопления погрешностей не дает это сделать.
Чтобы побороть проблему, нужно понимать, как она образуется. Достаточно подробный рассказ об алгоритмах сжаия JPG можно найти в статье «Сжатие изображений: JPEG и JPEG2000», а простыми словами это можно описать так. Программа разбивает картинку на квадраты 8х8 пикселей (начиная с левого верхнего угла), после чего усредняет (размывает) картинку в каждом из квадратов. В результате внутри квадратов изображение теряет детали, а на стыках появляются явно заметные уступы. Чтобы побороться с ними, нужно размыть изображение. Но не все целиком, а только в области этих уступов.
Дя этого нужно сформировать выделение границ квадратов. Первым делом создаем файл File > New (Файл > Создать) размеров 8х8 пикселей. Как он будет называться не важно, сохрянять его не понадобится.
После этого отдаем команды Select > All (Выделение > Все), а потом Edit > Stroke (Редактирование > Выполнить обводку), с показанными ниже настрйками. В результате получается белый квадрат размером 8х8 пикселей с черной обводкой по границе шириной в 1 пиксель.
Выделение сохраняется, азначит можно привратить эту кртинку в патерн: Edit > Define Pattern (Редактирование > Определить узор). Вот в этом месте лучше ввести осмысленное название. А заодно закрыть временный файл.
Далее переключаемся на восстанавливаемое изображение, переходим в режим быстрой маски и отдаем команду Edit > Fiil (Редактирование > Выполнить заливку). В качестве образца заливки выбираем саготовленный патерн.
В результате на экране Вы увидите вот такое превью.
Поскольку у меня режим быстрой маски настроен на закрашивание выделенных участков, после выхода из режима быстрой маски муравьи будут маршировать вокруг стыков артефактов. ВНИМАНИЕ!!! Если у Вас быстрая маска настроена по-умолчанию (закрашиваются замаскированные области), в этом месте выделение нужно инвертировать. И, на всякий случай, проверьте, действительно ли стыки JPEG-артефактов лежат между тропинками муравьев.
А дальше даем простое гауссово размыие. поскольку размер артефактов не зависит от размера картинки, можно даже порекомендовать стандартные настройки. По моему опыту хорошо работает настройка 0,5-0,6 пикселей.
Ниже можно проверить результат. Увеличение в пять раз относительно нормального размера. Нижняя часть сохранена в JPEG с минимальной компрессией. Верхняя часть сохранена с максимальной компрессией (пример выше) и избавлена от явных артефактов по предложенному методу.
Конечно, чудес на свете не бывает. Разница видна, но, по сравнению с исходной «квадратичостью» все гораздо лучше.
Оптимизация изображений для web, основные характеристики и методы исправления
- Информация о материале
- Наш блог
- Фотошоп
- Просмотров: 1377
Если вы ещё не знаете, то изображения, которые вы планируете разместить на своём сайте или в социальной сети, должно быть не только уникальным, креативным и интересным, оно ещё должно обладать определенными техническими характеристиками, такими как размер, вес и разрешение, иначе, страницы вашего сайта будут загружаться гораздо дольше и это непременно скажется на результатах поисковой оптимизации. ..
Что такое оптимизация изображений и для чего она нужна
Данный материал иллюстрирует одну из обязательных тем, которую подробно раскрывают наши курсы по фотошопу, и данный навык необходим в первую очередь web-дизайнерам, frontend-разработчикам, контент менеджерам, SEO и SMM специалистам, кому необходимо быстро и качественно обрезать изображения и оптимизировать их под определенные цели и задачи.
Вы уже все знаете, что интернет, это, помимо всего прочего, передача данных. Когда вы пытаетесь открыть на каком-либо устройстве страницу любого сайта, сервер, на котором этот сайт находится, начинает пересылать вам определённый набор данных — код страницы, стили оформления, изображения и прочее, и, чем меньше весят все эти элементы, тем быстрее запрашиваемая вами страница появляется на устройстве. От этой быстроты зависит многое, например, будет пользователь ожидать загрузки всей страницы или проявив нетерпение уйдёт на другую, например к вашим конкурентам, у которых страница загружается в разы быстрее.
Одним из факторов быстрой загрузки страницы, является малый вес изображения. Единицы измерения веса для картинок являются мегабайты, килобайты, наверное, знакомые вам названия. Следовательно, чем легче изображение, тем быстрее страница сайта отобразится на устройстве. Возможно, вы встречали такое, что текстовый контент страницы появляется сразу, а картинки с некоторой задержкой, это и есть пример того, что изображения в данном случае не оптимизированы соответствующим образом, или, разработчик сайта просто этого не сделал.
Для примера, можете посмотреть, сколько весит и каков размер изображений на данной странице, для этого щелкните по любой картинке правой кнопкой мыши и выполните в контекстном меню команду сохранить изображение как, после чего, сохранив изображение на компьютере вы сможете исследовать его свойства. Большинство специалистов, пройдя наши
Сколько должно весить изображение для сайта
Конкретной директивы для о весе нет, т.е. нет такого, что изображение должно весить, например 100 килобайт. Во-первых, все изображения на сайте разного размера, во-вторых, они имеют разные качественные характеристики по условиям съемки, и это все влияет на вес, но как пример, можно привести следующие параметры наиболее часто встречающихся на сайте изображений:
- кнопка, выполненная в виде изображения, обычно весит в пределах от 0,2 до 5 килобайт
- логотип, в пределах 5 — 30 килобайт
- картинки обычные на страницах сайта, иллюстрирующих статью, товар и прочее в этом духе весят в пределах 15 — 80 килобайт
- изображения на слайдерах большого формата могут достигать веса до 250 килобайт
Все эти данные довольно условны и зависят от множества факторов, но то что является очевидным, самое тяжелое изображение не должно быть тяжелее 250 килобайт. Наша студия проводила различные исследования в этой области, и нам получалось оптимизировать массу больших изображений до этого веса без критического снижения визуального качества.
Размеры изображения для сайта
Начнём с того, самое большое изображение, например для слайдера, вряд ли должно быть шире 1920 пикселей, это ширина монитора, который наиболее часто встречается в бытовых или офисных условиях.
Здесь мы не говорим о размерах микроэлементов, кнопок и прочее, они достаточно небольшие, потому, даже без оптимизации весят столько, что можно их и не учитывать, но все-же через жернова оптимизации их так-же надо пропускать.
Есть ли идеальный размер для большинства изображений сайта
Дело в том, что любой сайт, это уникальное творение дизайнера, который вкладывает в свой проект всю свою творческую энергию и потенциал, а творчество, как известно, в рамки определенных размеров не заключить, поэтому, на страницах сайта можно встретить изображения с различными размерами и пропорциями, перечислять которые просто не имеет смысла. Но это совершенно не значит, что если на дизайн-макете сайта размер изображения имеет параметры, например 275 на 405 пикселей, то мы обязательно должны вырезать в Photoshop картинку точно такого размера. Нет, конечно, можно поступить и так, т.е. обрезать именно по таким параметрам тем более, что инструмент рамка в фотошоп, позволяет это сделать точно и безукоризненно, но, есть некоторые нюансы.
По спецификации поисковой системы Яндекс, если мы хотим, чтобы наше изображение принимало участие в поиске по картинкам, то минимальная строев изображения должна быть не менее 450 пикселей, поэтому, чтобы подогнать изображение под данные требования, мы должны увеличить его. Увеличение или уменьшение изображение происходит в фотошоп через пункт меню изображение и далее размер изображения, где в параметрах размеров надо изменить, в нашем случае, значение 275 на 450, размер другой стороны автоматически пересчитается с сохранением пропорций. Таким образом размер станет 450 на 590 пикселей, но это совершенно не значит, что что в интерфейсе сайта размер увеличится тоже, при помощи стилей или атрибутов тега изображения оно останется в визуальном представлении в прежних размерах, но фактический размер будет больше.
Как оптимизировать изображение для сайта по весу
В последних версиях Adobe Photoshop CC предусмотрено несколько возможностей оптимизации изображений, старый вариант — сохранить для Web (старая версия), быстрый экспорт в определенный формат и экспортировать как. Оба варианта хороши и актуальны. Чтобы не перегружать информационно данную статью, каждый из вариантов оптимизации изображений мы рассмотрим в последующих публикациях.
Более подробно о работе с изображениями для web, а так-же для других целей и задач, вы можете узнать пройдя наши курсы по фотошопу.
Позвоните чтобы узнать подробнее
+7(963)972-82-58
или отправьте письмо:
Спросите нас письменно
Базовый курс фотошоп для начинающих
Курс ретуши в фотошоп
Курс по фотошоп для фотографов
Оставить заявку
- Назад
- Вперед
Подготовка файлов для вывода в Интернет в Photoshop
Photoshop Векторные инструменты — это один из инструментов, который позволяет нам создавать такую вышеупомянутую векторную графику. Векторная графика — это не что иное, как компьютерная графика, которую можно бесконечно увеличивать или масштабировать без разрыва или обрезки, в отличие от растровых графических форматов, таких как jpeg (Joint Photographic Experts Group), png (Portable Network Graphics), растровое изображение и т. д. создавать различные типы векторных фигур в Photoshop. Эти векторные формы рассчитываются математически, в отличие от растровых инструментов, основанных на пикселях, которые создаются путем объединения нескольких квадратов с информацией о цвете (пикселях). С помощью этого векторного инструмента мы можем создавать различные типы векторных фигур, такие как прямоугольники, квадраты, эллипс, круг, многоугольник, однопиксельные линии и многие другие пользовательские формы.
Создание векторного изображения с помощью векторного инструмента
Чтобы создать вектор из векторного инструмента Photoshop, выполните следующие действия:
Шаг 1: Откройте Photoshop (с помощью значка на рабочем столе или в Adobe Creative Cloud или путем поиска и нажмите на результаты поиска в меню «Пуск». )
Откройте Photoshop
Шаг 2: Нажмите кнопку «Создать новый», чтобы создать новый холст для нашей работы.
Нажмите кнопку «Создать новую»
Шаг 3: Укажите желаемое имя и размер холста (выберите любой, поскольку мы используем векторный формат) в диалоговом окне, показанном ниже:
Создайте холст для работы
Шаг 4: Выберите любой инструмент векторной формы ( Здесь я выбираю инструмент «Многоугольник» на панели инструментов слева, как показано ниже.
Выберите векторный инструмент
Вы также можете выбрать векторный инструмент, нажав U на клавиатуре.
Шаг 5: После выбора формы, которую вы хотите, начните удерживать левую кнопку мыши с позиции, с которой вы хотите, чтобы векторная форма начала визуализировать, и начните перетаскивать мышь по холсту и остановитесь только после получения желаемого конечного положения или размера.
Рисование вектора
Подготовка файла для вывода в Интернет
Чтобы подготовить любой файл для публикации в Интернете с помощью Photoshop, мы можем выполнить шаги, указанные ниже: Фотошоп.
Нажмите на файл
Шаг 2: Нажмите на опцию Экспорт.
Нажмите на экспорт
Шаг 3: Теперь нажмите на опцию Сохранить для Web (Legacy). или вы также можете нажать:
Alt + Shift + Ctrl + S
Нажмите «Сохранить в Интернете»
Шаг 4: Теперь вы должны увидеть диалоговое окно «Сохранить для Интернета», как показано ниже. Отсюда вы можете выбрать любой из различных типов графических форматов, таких как JPEG, PNG-8, PNG-24, GIF и WBMP. Вы также можете выбрать качество, но рекомендуется снизить качество, чтобы веб-страница загружалась быстрее. Один из способов добиться этого — убедиться, что вы установили флажок «прогрессивный». Прогрессивный здесь означает, что при первом посещении веб-страницы сначала будет отображаться изображение с более низким качеством, но с течением времени будут постепенно загружаться версии того же изображения с более высоким качеством, отсюда и название. Мы также можем продолжить, установив флажок «Оптимизировано», который оптимизирует изображения для Интернета.
Сохранение для Интернета
Шаг 6: Теперь нажмите кнопку сохранения (обозначена выше как одна из нижних правых кнопок с красной точкой) и сохраните ее в любом месте.
Экспорт вектора через Photoshop для Интернета и т. д.
Если вы хотите экспортировать вектор в формате векторной графики через Photoshop. Вы можете сделать это следующим образом:
Шаг 1: Выберите слой, на котором вы нарисовали векторную фигуру, затем нажмите «Файл»> «Экспорт»> «Экспортировать как».
Экспорт вектора
Шаг 2: Затем выберите SVG в раскрывающемся меню и нажмите кнопку «Экспорт» (синяя кнопка справа внизу), как показано ниже, и сохраните его в любом месте.
Экспорт SVG
Как сохранить фрагменты как отдельные изображения без использования «Сохранить для Интернета» в Photoshop cs6
спросил
Изменено 2 года, 11 месяцев назад
Просмотрено 138 тысяч раз
вопрос от не графического дизайнера здесь.
Все примеры, которые я видел при сохранении фрагментов в виде отдельных изображений, основаны на использовании «Сохранить для Интернета». Что делать, если я хочу сделать то же самое при сохранении для печати?
- cs6
- срезы
Обрезать изображение перед сохранением. Инструмент обрезки в Photoshop CS6+ (на панели инструментов ярлык C ) позволяет обрезать изображение, фактически не удаляя содержимое, которое вы обрезаете. Все, что вам нужно сделать, это снять флажок «Удалить обрезанные пиксели».
Когда вы закончите сохранение (как), снова выберите инструмент обрезки и обрежьте следующий фрагмент.
4
Если у вас есть Illustrator, есть простая команда «Файл» >
1
Можно использовать сохранить для Интернета даже если вы сохраняете для печати.
Просто сделайте размер изображения совместимым с вашими потребностями печати перед сохранением. Итак, сделайте изображение с любым разрешением dpi/ppi и размером. Затем нарежьте и сохраните для Интернета.
Это не идеально, так как PS, скорее всего, добавит некоторое сжатие, но в зависимости от изображения, с которым вы работаете, и расстояния, на котором оно будет просматриваться, это может вам подойти.
Старый вопрос здесь, но это был первый результат в Google, когда я искал. Вот вариант, который я использовал для напечатать , так как сохранить для Интернета уменьшит разрешение и, похоже, нет способа использовать фрагменты для получения изображений с более высоким разрешением
Используйте ресурсы изображения, а не фрагменты: https://helpx.adobe.com/photoshop/using/generate-assets-layers.html
Поначалу это может показаться немного сложным, но как только вы попробуете, все будет очень просто и не потребует слишком много доработки мой нарезанный файл, чтобы заставить его работать (но YMMV в зависимости от того, как выглядит ваш файл)
В двух словах — вы создаете группы слоев с их именами в Photoshop как имена файлов, и все в этой группе слоев будет сохранено как имя файла group каждый раз, когда вы сохраняете основной файл Photoshop.
После того, как изображение будет нарезано, перейдите к экспорту (сохранить для Интернета), а затем, когда вы сохраните его, убедитесь, что оно находится на «сохранить HTML и изображения» в раскрывающемся меню внизу. Photoshop с созданием папки с вашим изображением, сохраненным в виде отдельных фрагментов.
1
Я использую Photoshop 2020 и нашел следующее решение:
- Выберите «Файл» > «Экспорт» > «Сохранить для Интернета» (предыдущая версия)
Откроется диалоговое окно, позволяющее выбрать настройки фотографии. Затем нажмите СОХРАНИТЬ и экспортируйте свои фрагменты.
1
Я использую функцию среза все время. Я знаю, что это старый пост, но он был в верхней части, когда я искал в Google, потому что я не мог вспомнить, как это сделать. Вы можете сделать это с помощью инструмента «Слайс» в Photoshop. Используйте его, чтобы выбрать вещи, которые вы хотите нарезать, а затем нажмите «Сохранить для Интернета».
