Фотошоп с каким разрешением сохранять для web. Подготовка изображение и размер изображения для веб. Сравнение исходных и оптимизированных размеров файла

На самом деле, люди моральней своих умозрительных заключений, и аморальнее представлений о себе. З. Фрейд

Мечта хороших людей – иметь много денег, плохих – несметное количество. Георгий Александров

Давайте оставаться людьми до того времени, пока наука не выяснит, кто мы на самом деле.

Люди бывают всякие: хорошие и разные. К сожалению, превалируют последние. Юрий Татаркин

Лучший статус:
Наблюдательность свойственна доброму и умному человеку, благодаря её способности, он замечает людскую доброту. Паскаль Блез

“Если бы люди руководствовались лишь корыстными побуждениями и думали только об успешности начинаний, не было бы никаких новшеств и начинаний” – Готхольд Эфраим Лессинг

Человека нельзя переделать под свои мерки, нужно уметь воспринимать его таковыми, какой он есть. Дина Дин

Вы не замечали, что окружающие люди общаются цитатами из Контакта?

Смотрю я на людей и ясно вижу – собаки лучше… Неизвестный (Из разного)

Иногда мужчина забывается, и говорит о себе лишнее. Сказал – забыл, а женщина – помнит.

Для человека заурядного все люди на одно лицо.

У каждого в друзьях есть такой человек о котором можно сказать:”просто хороший”, и даже из друзей удалить рука не поднимается.

Отношения берегите сейчас, что бы потом не перечитывать переписку и не спрашивать себя “как же так получилось?”…

Никогда не прощайте измен. Любая измена – это сравнение, поиск лучшего. Тот, кто ищет лучшее, никогда не будет ценить то, что есть.

Ваш богатый духовный внутренний мир абсолютно не интересен человеку, который запланировал вас вы*бать…

Незаменимых нет! – этот урок я усвоила хорошо.

Берегите друг друга! Сейчас такое время, что очень сложно найти что-то действительно стоящее, настоящее! A мы из-за своей глупой гордости при малейшей ошибки, сразу же отказываемся от своего счастья.

Генрих Гейне

Как великолепен человек, если это человек настоящий! – Менандр

Человека нужно оценивать не только по его делам, но и по его стремлениям демокрит

Порядочную девушку легко отличить от непорядочной: порядочная знает, что слово “невротик” пишется слитно.

Если решить свои проблемы, на смену им придут новые. Старые роднее, поэтому я всё оставляю как есть. Я консерватор, а не ленивая жопа.

Лучше остаться приятным воспоминанием, чем быть надоедливым присутствием.

хочу только спросить … ты меня когда-нибудь любил? ты был хотя бы раз со мной искренен? хочу спросить, но не хочу услышать ответ…

Все красивые парни встречаются мне, когда я плохо выгляжу. - Где же ты столько красивых парней каждый день встречаешь?

Романтичный мужчина скажет с утра женщине что-нибудь приятное, а опытный ещё и сделает.

Чем примитивнее человек, тем более высокого он о себе мнения. (Ремарк)

Не осуждай кого-то, не зная прошлого человека.

Нет незаметных людей, есть только незамеченные. – Валерий Афонченко

Чего ты боишься, – то к тебе и приходит.

Пусть Бог вернёт тебе вдвойне, все то, что ты желаешь мне.

Люди бывают разные: одни быстро схватывают, другие быстро хватают. – Сергей Скотников

По своей природе люди близки друг к другу; по своим привычкам люди далеки друг от друга. – Конфуций

И сотворенное Богом подвержено порче. Например, люди. – Валентин Домиль

Счастливее всех тот, кто зависит только от себя…

Деньги – духовная сущность всего нынешнего общества.

Массы тоже могут быть одинокими. (кто-то, не помню кто)

Когда же человек покорит межчеловеческое пространство? – Лец С. Е.

Человек - целый мир, было бы только основное побуждение в нем благородно. – Достоевский Ф. М

Не теряйте достойных… Ради доступных…

“Человек гибнет, дело остается” (Лукреций)

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

Все мы заложники своей личности, живущие в своей собственной тюрьме…

Благородные люди все помнят, расчетливые ничего не забывают. – Дон-Аминадо

Не всем, кто вышел в люди, удаётся остаться человеком. – Валентин Домиль

Самый редкий вид дружбы – это дружба с собственной головой.

Я уверенна в себе, потому что знаю – меня любят.

Люди – это вестники справедливости и любви, поэтому мы обязаны осуждать любое проявление несправедливости. – Верна Дозье

Я предпочитаю делать в своей жизни то, что я люблю. А не то, что модно, престижно или положено.

Была не одна, было несколько, разные девушки – красивые, пустые, надутые, злые, депрессивные, эгоистичные…просто они ждали других принцев.

Некоторые бывают людьми не по существу, а только по названию. – Цицерон

Тот кто умеет ждать, добьется многого!)

“Время лечит”, нет! время стирает людей из нашего прошлого)…

Блез Паскаль

Иногда проще сказать “спасибо” и “прощай” вместо “давай останемся друзьями”.

Ненавижу, когда сначала дают надежду, а потом делают вид, что вообще ничего не было…

Слезы – это показатель того, что вы можете чувствовать…

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

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

Все люди одинаковы в своей уникальности. – Ольга Муравьева

Напиши мне то, чего не можешь произнести вслух.

В мужчине внешность не главное. Главное – чтобы мужчина оставался мужчиной.

И от людей есть польза – освобождают от скуки. – Вадим Мозговой

Мы – люди, и наша судьба – это учиться и быть вовлекаемыми в неощутимые новые миры. – Карлос Кастанеда

То, что не служит другим, умирает. – Элберт Г.Хаббард

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

Не возвращайтесь к людям, которые вас предали. Они не меняются.

…если ты ждёшь до завтра – ты уже опоздал…

Мир настолько испортился, что когда перед тобой чистый искренний человек, ты ищешь в этом подвох…

Люди знатные расходуют свои деньги на потерю времени. – Неккер Сюзанна

Бывает, ты хочешь сказать что-то важное, и думаешь- подожду… а потом ты понимаешь, что, наверное, говорить уже ничего и не надо… каждое слово и чувство имеют своё время…

дешевый, плоский юмор (хорошо сказано)

Все люди одинаково бедные. Просто у богатых рубль дешевле. – Неизвестный (Юмор)

Эх, влюбил бы меня уже в себя кто-нибудь…

Человек есть существо, ко всему привыкающее, и, я думаю, это самое лучшее определение человека. – Достоевский Ф. М.

Человек - просто недолговечный сосуд для переваривания пищи, он желает наслаждаться жизнью, а его подстерегает смерть. – Олдингтон Р.

Быть хорошим человеком - значит не только не делать несправедливости, но и не желать этого. – Демокрит

– Свет мой зеркальце ответь, Я красивая же ведь? – Ты прекрасна – ей в ответ – Жалко только сисек нет!

Встретила плохого мужчину, отойди – не порть себе жизнь! Встретила хорошего мужчину, отойди – не порть ему жизнь!

Приятных людей много – полезных мало. – Игорь Карпов

Люди становятся орудиями своих орудий. Генри Дэвид Торо

Каждый человек в отдельности смертен, но в своей совокупности люди вечны. Апулей

Человек – величайшая скотина в мире.

Человек здравомыслящий должен остерегаться вражды и озлобления. – Плутарх

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

Мне на букву “Х”, только не хорошо.

Способный человек на все способен. – Николай Суденко

…удивительным образом устроена жизнь - тебя благодарит совершенно незнакомый человек просто за твоё существование и твою улыбку, и вот таких же простых слов зачастую не может сказать тот, кто любит.

Большую энергию нужно отдавать формированию своей личности, чем убеждению других.

Ничто и никогда не является абсолютно верным.

“Если не высказаны противоположные мнения, то не из чего выбирать лучшее” (Геродот)

В этом уроке Вы увидите, как картинки из PSD файла сохранить для Web.

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

Как Вы видите, этот текст нельзя выделить и поэтому его нельзя изменить в HTML файле. Эти две фразы - изображения. Давайте их отредактируем.

1. Откройте файл PSD

Пожалуйста, обратите внимание, что для обработки текста в PSD файле нужно установить необходимые шрифты, которые указаны в fonts_info.txt файле.

То же самое нужно сделать и для слогана. Его перекрывают другие фрагменты. Так же перенесите его на перед.

3.Сейчас нужно при нажатой клавише "Shift" выделить все фрагменты, которые хотите сохранить.

4. В верхнем меню перейдите на File > Save for Web & Devices (файл > сохранить для Web & Devices)

5.Выберите инструмент Slice select (выбор фрагмента) и опять при нажатой клавише "Shift" выберите фрагменты. Нажмите на кнопку Save (сохранить)

Обратите внимание, пожалуйста, что картинки нужно сохранить в папке Site, а не в Images. Убедитесь еще раз, что у Вас такие же настройки:

• — Save as type/Сохранить как тип: Images Only/Только картинки
• — Settings/Настройки: Default Settings/Стандартные Настройки
• — Slices/Фрагменты: Selected Slices/Выбрать фрагменты (Важно!)

6. Вы увидите файлы, которые будут заменены. Нажмите на кнопку "Replace" (Заменить)

7. Обновите страницу и проверьте картинку, которую Вы только что изменили.

Пожалуйста, ознакомьтесь с детальным, обучающим видео ниже.

Фотошоп предлагает прекрасный инструмент для оптимизации ваших изображений и фотографий — команда (Save for Web).

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

Самая популярная причина необходимости оптимизации — подготовить изображение для передачи через интернет или разместить на сайте. Верстальщики сайтов и веб-студии по разработке графического дизайна, такие как http://brandbe.net , после подготовки , прибегают к оптимизации получившихся частей изображения, чтобы снизить их вес (для быстрой загрузки графики будущего сайта), но чтобы при этом качество картинки не ухудшилось.

Описание элементов диалогового окна

(Нажмите, чтобы увеличить)

После выполнения команды загруженное изображение появляется в центральной части диалогового окна. Окно делится на следующие элементы:

• слева – панель инструментов;
• сверху – параметры отображения изображения;
• в центре – область просмотра;
• справа – инструменты управления оптимизацией;
• внизу – некоторые сервисные параметры;

Панель инструментов

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

Инструмент Выделение фрагмента позволяет работать с отдельными фрагментами раскройки: объединять, разделять, изменять параметры, удалять и тому подобное. Подробнее об этом инструменте и раскройке читайте .

После нажатия на инструмент Масштаб и наведения курсора на изображение появляется значок лупы. Каждый щелчок мышью увеличивает масштаб изображения (при удержании клавиши Alt – уменьшает). В контекстном меню, открывающемся по правому клику, можно выбрать необходимый масштаб из списка или показать изображение во всё окно или экран. Также можно выделить часть изображения рамкой, чтобы увеличить этот фрагмент.

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

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

Параметры отображения

Загруженное изображение автоматически оптимизируется, используя настройки по умолчанию. В верхней области диалогового окна активизируется вкладка Оптимизация , отображающая внешний вид, размер и примерное время загрузки оптимизированного изображения на сайт.

Вкладка Исходное отображает начальный вид и размер изображения. Для наглядного сравнения оригинала с оптимизированным изображением можно перейти на вкладку 2 варианта . Ещё более удобна вкладка 4 варианта , предлагающая пользователю не один, а три варианта оптимизации.

Управление оптимизацией

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

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

В списке «Набор» и его подсписке (под JPEG) уточняется качество оптимизированного изображения. Оно имеет 5 вариантов:

• наилучшее (по умолчанию);
• очень высокое;
• высокое;
• среднее;
• низкое.

При выборе перечисленных вариантом автоматически устанавливается значение параметра Качества в 100, 80, 60, 30 и 10 соответственно. Выбор худшего качества производится в случае, когда размер изображения неприемлемо велик.

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

В списке Матовый/Подложка при необходимости можно задать раскраску прозрачных пикселей. Доступны основной цвет, цвет фона, пипетки, белый и чёрный.

Флажок Встроенный профиль активируется для сохранения в оптимизированном файле цветовых профилей. Они используются для цветокоррекции в некоторых браузерах.

GIF или PNG

Форматы работают с ограниченной палитрой цветов глубиной 8 разрядов. Рисунки этих форматов используют до 256 оттенков, хранящихся в специальной таблице цветов, появляющейся при работе с GIF и PNG. При отсутствии нужного цвета производится дизеринг – его имитация смешиванием других цветов. Высокий процент дизеринга позволяет сохранить больше деталей и цветов, но и увеличивает вес файла. Дизеринг рекомендуется применять для градиентных изображений.

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

В левом от него списке выбирается метод создания таблицы цветов со следующими основными вариантами:

• перцепционная – с предпочтением тех цветов, к которым глаз максимально чувствителен;
• селективная (по умолчанию) – с дополнительным предпочтением цветов больших фрагментов изображения;
• адаптивная – с предпочтением цветов преобладающего спектра;
• ограниченная (безопасная палитра Web) – с полным исключением дизеринга.

В том же списке есть возможность применения готовых таблиц цветов или палитры Заказная , созданной пользователем.

В следующем списке выбирается алгоритма дизеринга из 3 вариантов:

• случайный, использующий для имитации случайный узор;
• регулярный, использующий квадратный узор;
• «шум», свободный от «швов» в изображении.

Дополнительные регулировки доступны в нескольких списках справа. В списке Дизеринг его процент может изменяться плавным перемещением ползунка. В списке Web-цвета таким же образом можно регулировать и их процент.

Список Потери предназначен только для формата GIF. Он позволяет задавать допустимый порог удаления части изображения для минимизации размера оптимизированного файла.

Сервисные параметры нижней части окна

Внизу диалогового окна дублируется возможность масштабирования изображения. Справа внизу можно изменять размер изображения в пикселях или процентах. Чуть ниже находятся кнопки Сохранить и Готово. Очень удобна возможность периодического просмотра оптимизируемого изображения в браузере, реализуемая по нажатию кнопки Просмотр .

Сохранение/удаление набора параметров

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

Чтобы сохранить свой набор параметров, нужно сперва изменить один из стандартных наборов. Например, выбрав набор Высокое качество JPEG , поставим галочку Прогрессивный . Теперь в меню появится активная команда Сохранить настройки .

После сохранения своих настроек, они станут доступны в списке Набор:

Для удаления созданного пользовательского набора:

• в списке Набор выберите его имя;
• Откройте окно меню;
• Выберите команду Удалить настройки .

Работа с фрагментами изображения

При рассмотрении панели инструментов упоминалась возможность оптимизации отдельно взятого фрагмента большого изображения. Но для этого оно предварительно должно быть разделено на фрагменты.

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

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

Заметили ошибку в тексте - выделите ее и нажмите Ctrl + Enter . Спасибо!

Мы научились загружать шрифты в Фотошоп, всем кто еще ее не читал эту статью рекомендую с ней ознакомится.

Сегодня мы продолжим изучать основы Фотошоп, тема сегодняшнего урока Как подготовить фото для интернета . Возможно, у Вас сразу возникли вопросы, для чего и зачем фото готовить для интернета? Можно ведь просто взять загрузить и все.

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

5 причин подготовки изображений для WEB

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

Во время вёрстки веб-дизайна, все элементы макета будущего сайта (картинки в формате.png и.jpg) обязательно подготавливаются для интернета, без этого вёрстка невозможна.

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

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

В некоторых ситуациях требуется загрузка изображения определенного размера и формата. Например Вам нужно загрузить иконку 16×16 пикселей в формате .png для своего сайта. Все это легко и просто можно сделать в Фотошоп.

Со всеми этими задачами прекрасно справляется наша любимая программа Adobe Photoshop CC . Разработчиками Фотошоп был придуман очень полезный и нужный модуль с функцией сохранения изображений для интернета ( Save for Web) .Это мощный модуль управления процессами оптимизации и сохранения документов, который автоматически подбирает оптимальные настройки сохраняемого файла. Этот модуль поддерживает и работает с самыми распространенными форматами файлов для интернета .jpg , .gif , .png .

Преимуществами и удобствами пользования этого модуля являются такие полезные и нужные возможности как:

Выбор нескольких режимов просмотра во время оптимизации изображения для web

Выбор формата в котором изображение будет сохранено

Выбор качества и размера сохраняемого изображения

выбор способа оптимизации, сжатия и просмотр веса оптимизированного изображения.

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

Для того, чтобы перейти к сохранению для web, заходим в верхнее меню Файл/Сохранить для web или воспользуемся горячими клавишами Ctrl+Alt+Shift+S .

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

Описание опций:

1. Четыре вкладки вариантов предварительного просмотра.

- Исходное — это когда Вы видите тока своё исходное изображение

- Оптимизация — это когда Вы видите в предварительном просмотре только оптимизированное изображение

- 2 Варианта — это когда Вы видите своё исходное изображение вверху, а оптимизированное внизу. Этом вариант самый удобный и больше всего мне нравится, именно поэтому я его и выбрал.

- 4 Варианта — это когда Вы видите в предварительном просмотре исходное изображение, изображение в качестве котором Вы выбрали, изображение в качестве 22 и изображение в качестве 11.

2. Формат сохраняемого файла. В нашем случае мы выбираем JPEG.

- PNG — формат файла для сохранения Веб-графики. Бывает двух видов, 8 bit -индексированые изображения, 24 bit — «все» цвета. Обычно в этом формате сохраняют клипарты и логотипы на прозрачном фоне.

- GIF — устаревший формат файла для сохранения Веб-графики. Чаще всего в этом формате сохраняют файлы с ограниченным количеством цветов, таблицы, схемы, логотипы, так же формат поддерживает анимацию и прозрачный фон. Этим форматом пользуются всё меньше и меньше, потому что появился более лучший формат PNG.

- JPEG — Самый популярный формат. Прекрасно подходит для сохранения фотографий и изображений со множеством цветов, оттенков, эффектов.

3. Значение качества. Мне нравится «Высокое».

Среднее

Высокое

Очень высокое

Наилучшее

4. Здесь ставим галочку в значение «Оптимизация « . Рассматривать и заострять внимание на опциях «Прогрессивный » и «Встроенный профиль «, мы не будем так как большинство веб-браузеров их не поддерживают.

5. Ставим галочку для того чтобы включить опцию «Преобразовать в sRGB «. Это нужно для того чтобы, наше изображение корректно отображалось на веб-сайте и сохранилось в цветовом пространстве sRGB.

6. Выставляем нужный размер изображения. В моём случае это, ширина 500 — пикселей, высота — 281 пиксель.

7. Размер оригинального изображения.

8. Размер оптимизированного изображения для интернета .

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