Редактирование изображения

 

imagesКак облегчить картинки для сайта.

 

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

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

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

То вам действительно нужно за этим следить и стараться делать странички вашего сайта не только интересными для посетителей но и конечно же как можно легче в этом плане.

  В этой статье я расскажу как отредактировать си сохранить картинки и фото которые вы добавляете на свой сайт. Для этого мы воспользуемся программой Adobe Photoshop CS5.

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

 

images

 

 

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

    Для того что бы развернуть картинку на все окно программы вам нужно нажать на кнопку «Упорядочить документы» и в выпадающем меню кликнуть «Объединить все» (Как показано на рисунке ниже)

 

images

 

 

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

 

images

 

 

  Если мы предварительно посмотрим какой у нас сейчас вес картинки, нажав для этого на нашей картинке в папке где она расположена, правой кнопкой мыши и выбрав «Свойства».

  То мы увидим, что вес нашей картинки составляет 1.41 Мб.

 

images

 

 

  А размер мы можем посмотреть в самой программе фотошоп. Для этого нажимаем в верхнем меню программы пункт «Изображения» и в выпадающем списке выбираем «Размер изображения»

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

 

images

 

 

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

  Для этого закроем это диалоговое окно и выберем пункт меню «Файл». В выпадающем списке выбираем «Сохранить для Webустройств».

 

images

 

 

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

 

images

 

 

  Первым делом мы настраиваем размер картинки в поле (6) так как нам не нужна картинка с таким большим размером кокой у нее есть, мы ставим нужный нам максимальный размер. К примеру, если нам нужна картинка которая будет увеличиваться для дополнительного просмотра то можно ей задать примерно 700-800 пикселей по ширине, такой размер задан этим картинкам. Когда вы нажимаете для просмотра на картинку, она увеличивается до этого размера.

  В поле (1,2,3) вы настраиваете номинальное качество изображения ориентируясь при этом на параметы в поле(4). В результате вам нужно настроить наилучшее соотношение качества изображения и объёма. Но при этом стараться сделать картинку как можно легче. (Меньше по объему в мегабайтах).

  Так же можно просматривать полученное изображение сразу в браузере, для этого нужно нажать на кнопку «просмотр» в поле (5).

 

images

 

 

  Теперь после того как вы все настроили нажимаем на кнопку «Сохранить» (7). И в открывшемся диалоговом окне просто нужно выбрать место для сохранения наших «Трудов».

  Я провел кое какие настройки выбранного изображения и та картинка которая занимала в начале почти 1.5 мегабайта, стала занимать всего 11килобайт. Это значит во сколько раз она быстрее загрузится?

 

images

 

 

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

  Это конечно же далеко не все, что можно сделать с картинками в программе Adobe Photoshop CS5.

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

 

 

Добавить комментарий

В комментариях запрещается:
1) Писать оскорбительные выражения в сторону как администратора, модератора так и других пользователей сайта. (За такое нарушение сразу бан)
2) Реклама в любом ее проявлении, а так же рекламные ссылки на свои сайты, партнерские ссылки, для ссылки на свой сайт нужно использовать специальное поле для добавления ссылки.
3) Прежде чем писать комментарий и задавать вопрос обязательно убедитесь, что на ваш вопрос точно нет ответа на сайте. Так же на сайте есть форум, где вы можете задавать вопросы другим участникам этого форума...
ВНИМАНИЕ: ПРАВИЛА МОГУТ ДОПОЛНЯТЬСЯ И ИСПРАВЛЯТЬСЯ, В ТЕЧЕНИИ ВРЕМЕНИ СУЩЕСТВОВАНИЯ САЙТА БЕЗ ПРЕДУПРЕЖДЕНИЯ. ПОЭТОМУ ЧИТАЙТЕ ИХ ОБЯЗАТЕЛЬНО, ВО ИЗБЕЖАНИЕ НЕДОРАЗУМЕНИЙ.


Защитный код
Обновить

 

 

 

Custom Search

 

 

Читаем так же:

Отправить в FacebookОтправить в Google BookmarksОтправить в TwitterОтправить в LinkedInОтправить в BobrdobrОтправить в LivejournalОтправить в MoymirОтправить в OdnoklassnikiОтправить в VkcomОтправить в Yaru