Медаль "ученик недели" ждет своего обладателя !!!


На этой недели мы рассмотрим очень необычный инструмент — РАСКРОЙКА и ВЫДЕЛЕНИЕ ФРАГМЕНТА в Photoshop.

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

Итак, инструмент РАСКРОЙКА в Photoshop используется для разрезания изображения на части. Например, веб-дизайнеры используют этот инструмент довольно часто — они разрезают изображение, чтобы в дальнейшем оно быстрее грузилось в интернете - ведь несколько маленьких изображений будет прогружаться быстрее, чем одно большое.

Рассмотрим работу инструмента РАСКРОЙКА в Photoshop на примере моего сайта «Алабай Троян и мейн-куны».

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

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

Берем инструмент РАСКРОЙКА и, зажав левую кнопку мыши, растягиваем на нашем изображении выделение:

После чего, отпускаем левую кнопку мыши:

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

Если нам надо, то взяв инструмент ВЫДЕЛЕНИЕ ФРАГМЕНТА и щелкнув по любому фрагменту, мы можем изменить его размер, к примеру, растянуть:

Выделенный фрагмент в Photoshop имеет оранжевую рамку.

Теперь нам нужно сохранить этот файл для интернета. Для этого переходим в МЕНЮ-СОХРАНИТЬ ДЛЯ WEB И УСТРОЙСТВ. Выбрав данное сохрание у нас открывается окно оптимизации. В левой части окна мы выбираем фрагмент, который нам нужно настроить (щелкаем по нему мышкой, делая активным):

А в правой части окна мы поочередно можем задать параметры для каждого нашего фрагмента изображения:

Допустим, в первом фрагмете у нас присутствует какой нибудь текст и нет фотографии. Различные схемы, тексты, где нет плавных переходов цветов лучше всего сохранять в .gif — они будут занимать меньше места.
А в правой части окна мы задаем формат .gif (в красной рамочке) и подбираем качество изображения (в синей рамочке).

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

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

Следующий фрагмент у нас может иметь только фотографию (без текста) — его лучше сохранять в .jpg.

После того, как мы настроили каждый из фрагментов изображения, нажимаем кнопку СОХРАНИТЬ. В открывшемся окне выбираем папку для сохранения нашего изображения.

Выбрав папку, устанавливаем тип файла — HTML и изображения.

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

В папке images сохранены фрагменты изображения с выбранными нами настройками:

Давайте посмотрим наш html файлик с помощью блокнота/ Как это сделать? Щелкаем правой кнопкой мыши по файлу html и выбираем ОТКРЫТЬ С ПОМОЩЬЮ — БЛОКНОТ:

На рисунке выше мы видим, что наши фрагменты (находятся в красных рамочках) закодировались.
Изображение прописано в виде таблички. Давайте, к примеру, поставим для border (что означает толщина рамки) вместо 0 значение равное единице (показано в синей рамочке на рисунке выше) и сохраним измения. Затем перейдем в папку, куда мы первоначально все сохраняли и еще раз щелкнем правой кнопкой мыши по файлу html и выберем ОТКРЫТЬ С ПОМОЩЬЮ — выбираем браузер, в котором работаем (Opera, Firefox и т.п.):

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

Если мы вернем значение 0 для border (толщина рамки), то эти рамочки исчезнут.

С помощью данной функции можно разбивать изображения на определенное количество для создания интересных коллажей:

Источник: http://photoshopword.ru

Задание недели - показать коллаж или научится разбивать изображения для интернета !!!