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


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

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

Разрезаем изображение на фрагменты в программе Photoshop

  • Запускаем программу photoshop, нажимаем : файл —>; открыть—>; и открываем сохранённый нами файл…psd. Затем если нет, то  добавить линейку, и для удобства работы, раздвигаем края — вниз и в правую сторону.
  • Теперь прикинем на сколько частей нам его разрезать, допустим на 3-ри. Мы брали ширину 1024 пикс. разделить на три , будет -341 пикс.Высота у нас остаётся 120 пикс.
  • Чтобы всё у нас вышло красиво, ставим курсор на край боковой линейки, находим знак -II- и нажав левую кнопку, вытаскиваем из линейки направляющую.
    РАЗРЕЗАЕМ ИЗОБРАЖЕНИЕ НА ФРАГМЕНТЫ

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

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

  • Теперь приступаем к самой уникальной  процедуре раскройки. В левой части программы на панели инструментов есть значок такой перечеркнутый ромбик.Этот знак называется -инструмент «рамка«. Если направить на него курсор и нажать правую кнопку то показывается ещё два инструмента. Мы выбираем инструмент «раскройка» щёлкнув по нему левой кнопкой.
РАЗРЕЗАЕМ ИЗОБРАЖЕНИЕ НА ФРАГМЕНТЫ ИНСТРУМЕНТОМ РАСКРОЙКА

Выбираем инструмент Раскройка

Устанавливаем «инструмент» на самый левый-верхний угол изображения. Нажав кнопку перемещаем его вправо по верхней линии, до пересечения с первой вертикальной направляющей и аккуратно опускаем вниз. Дойдя до пересечения отпускаем кнопку. В углу с какого мы начинали движение появится цифра 1- в квадратике. Устанавливаем инструмент в на угол с которого опускали инструмент и ведём вправо до следующего пересечения и опускаем вниз и отпускаем. Таким образом доходим до правого края и переходим на низ.

    • Ставим инструмент на угол линии делящей высоту пополам и двигаем инструмент до первого пересечения, затем второго и третьего. Всего три части. Всем частям автоматически присваивается номер, под каким они и будут проходить в дальнейшем.
    • При выполнении нарезки будьте внимательны, так как при случайном сдвигании ножа происходит автоматическое увеличение частей, они нарезаются непропорционально, что ведёт к переделке работы.
    • Cледующим и заключительным этапом, есть сохранение выполненной работы. Для этого нажимаем -> файл -> сохранить для Web устройства ,а вот тут можно установить -изображение и HTML.
      РАЗРЕЗАЕМ ИЗОБРАЖЕНИЕ И СОХРАНЯЕМ НАРЕЗКУ

      Сохраняем нарезку

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

    Сохранить разрезанное на фрагменты изображение

    Уважаемые посетители если вам понравилась эта статья то уходя на другую страницу не забудьте нажать на кнопочку твиттер. Я буду бесконечно благодарен вам за потерянное вами , думаю что не зря, время. СПАСИБО.

    Translate »