Главная » Бизнес в Интернете

Обработка изображений для сайта в Photoshop

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

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

Практически все нюансы работы в программе Photoshop Вы можете найти здесь.

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

Обработка изображений

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

В программе Photoshop кадрирование (обрезка) производится соответствующим инструментом, а изменение размера делается с помощью пункта меню Изображение — Размер изображения.

Размер картинки можно уменьшать, и нежелательно увеличивать, потому что при увеличении размера качество изображения падает. Также, во время изменения размеров следите, чтобы пропорции картинки не были искажены. Для этого нужно поставить галочку в пункте Сохранять пропорции.

Размеры делаете точно такими же, какие они будут в браузере. Есть, конечно, способы изменить размеры изображения при помощи html-кода, но лучше этого не делать. Во-первых, качество в результате может заметно ухудшиться. Во-вторых, если картинка большая, и Вы ее уменьшите с помощью кода, выглядеть она будет, как маленькая, а загружаться — как большая, ведь вес картинки никуда не денется.

Если фон картинки Вам не нужен, его можно удалить. Самый простой способ — удаление с помощью ластика. Берете инструмент Ластик, и аккуратно вытираете фон. Во время работы изменяйте диаметр ластика. Тонкая работа требует меньшего диаметра инструмента.


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

Далее совсем неплохо будет подкорректировать яркость и контрастность картинки.

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

Видео о том, как в программе Photoshop обрабатывать картинки для сайта


Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
    Подписаться на блог: Дорога к Бизнесу за Компьютером

Вам понравилась статья? Поделитесь, буду весьма признателен:


Также приглашаю добавиться в друзья в социальных сетях:

<< Предыдущая статья Следующая статья >>
Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:  

7 комментариев »

  • Anna пишет:

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

  • Александр пишет:

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

  • Anna пишет:

    Я хочу сказать, что в фоторедакторе тоже можно сделать уникальную картинку да ещё и с эффектами! Но в нём работать проще.А качество работы просто великолепное.Я пользуюсь фоторедактором fotokomok, HomeStudio и другими.Получается очень даже неплохо. Можете зайти посмотреть на блоге.С уважением, Анна.

  • Светлана пишет:

    Александр, как всегда, статья очень информативная. Я для себя узнала новое про оптимизацию картинки. Спасибо

  • Anna пишет:

    Работаю в фотошоп давно и активно использую в обработке фото для своего блога:-)

  • Виктор пишет:

    Используйте всю свою библиотеку фотографий и с легкостью совершенствуйте любое изображение на своем iPad, iPhone и Mac.

  • Андрей Зимин пишет:

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

Оставьте свой комментарий и ответный визит Вам обеспечен