Разбить изображение в фотошопе. Инструменты раскройка и выделение фрагмента в фотошопе

С развитием коммерческих аккаунтов в Instagram большую популярность получили рекламные баннеры, представляющие собой изображение, разделенное на 6 или 9 фрагментов. Хотите узнать, какие онлайн инструменты позволяют быстро разрезать картинку на части? Сегодня мы расскажем о 4 удобных и бесплатных сервисах, которые вам в этом помогут.

: как разделить фото на части

: разрезаем фото онлайн и делаем плакат

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

Также можно воспользоваться стандартными изображениями, предложенными для примера

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

Интересная особенность Rasterbator – возможность сравнивать масштабы плаката с фигурой человека на заднем фоне. Так вы точно не ошибетесь с размером и не запутаетесь в форматах А4, А3 и т. д.

На фотографию можно накладывать интересные эффекты.

Переключайтесь между режимами «Оригинал» и «Превью», чтобы сравнить, какой была картинка и какой стала

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

Готовое изображение автоматически скачается на ваш компьютер в формате PDF.

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

Здравствуйте, сегодня мы научимся делать баннер для своего Инстаграма.

Что такое баннер? Баннер инстаграм - это фотография или изображение порезанное на несколько частей, которые затем опубликованные профиле Инстаграм и выглядят как цельная фотография или изображение.

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

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

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

Сначала рассмотрим как это сделать с персонального компьютера.
Есть в сети такой замечательный и не чем не примечательный сайт http://picslice.com/
На самом деле, это один единственный сайт который мы нашли и который умеет делать все то, что нам нужно для баннера инстаграм - обрезать изображение на равные части. Всё это можно сделать онлайн.

Наши действия:

• У нас должно быть подготовленное изображение на пк, которое мы будем резать.
• Желательно, что бы оно было уже квадратным, иначе нам придется сначала сделать обрезание фото в соотношнии сторон 1 к 1;
• Переходим на сайт picslice.com;
• Нажимаем на кнопку «выберите файл»;
• Нажимаем кнопку «upload»;
• Затем вверху над появившейся загруженном фото, нажимаем «Slice picture»;
• Вводим Vertical Slice значение «3» - высота (задаем на сколько частей будет порезана фотография по вертикали);
• Вводим Horizontal Slice значение «3» - ширина, тут всегда должна быть цифра 3 (задаем на сколько частей будет порезана фотография по горизонтали);
• Нажимаем кнопку «Generate»;
• Видим результат - порезанная картинка на части;
• Переходим к сохранению;
• Можно скачать все кусочки изображения нажав по ссылке Download ZIP (ALL SLICES) , все изображения будут в архиве ZIP;
• Или скачиваем по частям, для этого на каждой части изображения нажимаем правую кнопку мыши и сохраняем все части в одном месте;
• Перекидываем все части порезанного изображения в мобильный телефон или планшет где установлено приложение Инстаграм для дальнейшей публикации;
• Размещаем части, тут главное не запутаться! Имя файла части картинки начинается с цифры, соответственно у нас 9 картинок и все они отмеченные определенной цифрой;
• Теперь размещаем первой в свой инстаграм сначала 9-тую картинку, потом 8-мую и т.д. заканчиваем 1-вой картинкой.

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

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

И так вот что у нас получилось! Довольно красиво и креативно, теперь когда человек зайдет к вам в профиль, он увидит такую красоту.

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

Заходим в Google Play если у вас мобильный телефон или планшет на Android, для пользователей iOS, нужно зайти в Apple App Store. Затем в поиске вбиваем запрос «Instagramm banner», находим приложения какие умеют делать, то что нам нужно.

Видим результат поиска, первые 4 приложения, подходят для наших нужд. Установим для пробы, то что выше в рейтинге, под названием «Giant Square #1»

Теперь посмотрим как им пользоваться:

• После запуска, нам предлагается выбрать социальную сеть, естественно мы выбираем Instagram.
• На втором экране после запуска, нам предлагается выбрать, то что мы хотим сделать. Оказывается приложение, еще умеет делать коллаж из фотографий, но нам это не нужно и мы нажимаем на первую картинку, где написано «Giant Square».
• На третьем экране, нам нужно сделать три действия

1. выбрать область, картинки, какие «кубики» будут созданы из будущего изображения, ставим на нужных кусочках галочки.
2. Загружаем изображение из галереи или делаем новое фото, нажимаем на кнопку «Use»
3. Размещаем, нажав на кнопку «Share».

• Размещение происходит более удобно, нажимаем на «Upload», затем запускается приложение Instagram и мы размещаем первый кусочек изображения. После, нам опять нужно перейти в приложение «Giant Square», теперь в очереди на размещение будет отображен следующий кусок с надписью «Ready», нажимаем опять «Upload», так делаем пока не загрузим все части фотографии.
• Можно просто нажать на кнопку, и сохранить все части фотографии.

Это всё в теории, у нас так и не получилось это сделать до конца. Приложение стало самопроизвольно закрываться и жутко «тормозить». Так, что мы его не рекомендуем.

Устанавливаем другое приложение - TRYPTpic

Мы приятно удивлены, тут всё проще и быстрей. Теперь будем знать, что сначала нужно попробовать в использовании разные приложения.

Тут всё просто и понятно:

• Загружаем фото;
• Выбираем вариант разрезки, к примеру 3х3;
• Нажимаем «Crope»;
• Сохраняем все части в память смартфона
• Или размещаем части фото из приложения TRYPTpic;
• Нажимаем на иконку Инстаграм;
• Для удобства публикации, все части нумеруются в нужном порядке размещения;
• Жмем на 1 картинку и размещаем в своем Инстаграм;
• Повторяем цикл до последней части.

Ура! У нас все получилось разместить большую фотографию всего за пару минут!

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

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

Способ 1: IMGonline

Мощный русскоязычный сервис для нарезки фотографий, позволяющий разделить любое изображение на части. Количество фрагментов, получаемых в результате работы инструмента, может составлять до 900 единиц. Поддерживаются картинки с такими расширениями, как JPEG, PNG, BMP, GIF и TIFF.

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

Таким образом, с помощью IMGonline буквально за пару кликов можно выполнить нарезку изображения на части. При этом и сам процесс обработки занимает совсем немного времени — от 0,5 до 30 секунд.

Способ 2: ImageSpliter

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

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

Способ 3: Online Image Splitter

Если вам нужно быстро выполнить нарезку для создания HTML-карты изображения, данный онлайн-сервис — идеальный вариант. В Online Image Splitter вы можете не только разрезать фотографию на определенное количество фрагментов, но и сгенерировать код с прописанными ссылками, а также эффектом смены цвета при наведении курсора.

Инструмент поддерживает изображения в форматах JPG, PNG и GIF.

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

Способ 4: The Rasterbator

Ну а для нарезки фотографий для последующего объединения их в плакат вы можете воспользоваться онлайн-сервисом The Rasterbator. Инструмент работает в пошаговом формате и позволяет разрезать изображение, учитывая реальный размер итогового постера и используемый формат листов.

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

Фотошоп с самого начала своего существования обладает рядом инструментов, необходимых для веб-мастеров и сайтостроителей . Например, по умолчанию даже в самых свежих версиях программы установлены, так скажем, «древние» наборы (в основном их использовали для создания веб-графики и кнопок). Так вот, среди этих инструментов центральное место занимают Раскройка и Выделение фрагмента — незаменимые для верстальщиков сайтов.

Как рождается оформление сайта? Сначала рисуется дизайн-макет будущего сайта (как правило, его рисуют в фотошопе). В этом макете рисуют все: шапку сайта, логотип, меню, блоки с информацией и все остальное. Затем верстальщик берет инструмент Раскройка и разрезает этот макет на отдельные фрагменты. Для чего это надо? Каждый фрагмент сайта должен работать, а за работу отвечает код. Поэтому необходимо разделить макет на небольшие части и для каждой из них будет прописан свой код, чтобы в итоге потом на сайте все работало, нажималось, мерцало и тому подобное.

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

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

Инструмент Раскройка делит изображение на отдельные фрагменты, которые отделяются от изображения после его сохранения.

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

Желтой стрелкой я указал на фрагмент, который я создал. Синими стрелками помечены границы фрагментов, которые создал фотошоп.

Принцип действия

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

Если вы не хотите видеть раскройку автоматических фрагментов, можно отключить их видимость. Для этого на панели параметров инструмента Выделение фрагмента нажмите кнопку Скрыть автоматические фрагменты .

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

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

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

• Стиль Обычный — это рисование фрагмента любого размера, как рука ляжет.
• Стиль Заданные пропорции — это рисование прямоугольника по заданным пропорциям. Например, если проставить значения ширины и высоты 1 и 1 соответственно, то получится квадрат. Если проставить ширину 1, а высоту 2, то получится, что высота прямоугольника в два раза больше его ширины. При этом размеры такого прямоугольника ничем не ограничены — он будет изменять в размерах только в соответствии с выставленными пропорциями.
• Стиль Заданный размер позволяет указать фотошопу конкретные размеры необходимого фрагмента, например, 60 на 100 пикселей. Фотошоп создает рамочку заданных размеров, а вы, в свою очередь, уже размещаете ее в нужном месте на изображении.

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

Инструмент Выделение фрагмента

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

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

Двойной клик открывает диалоговое окно со свойствами:

Насколько мне известно, верстальщики не используют параметры URL, Цель, Текст сообщения и Альтернативный текст, поскольку данные значения пишутся в сам код во время верстки сайта. Может быть, это, опять же, наследство с тех времен, когда фотошоп только появился и сайты в интернете были очень примитивными. Их можно было нарисовать в фотошопе, раскроить на фрагменты, добавить ссылки для отдельных картинок и сразу залить все в интернет, минуя сложные html-коды и каскадные таблицы стилей.

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

Поля X и Y это координаты. Изменяя их, вы двигаете рамочку фрагмента. Кстати двигать рамочку можно и самому, подобно (зажав левую клавишу мыши, тяните активный фрагмент в сторону, затем отпустите клавишу).

К важным свойствам этого инструмента я бы отнес возможность выделить одновременно несколько фрагментов , поскольку данная задача является стартом для большинства других возможных махинаций. Чтобы это сделать, удерживайте зажатой клавишу Shift и поочередно щелкайте на необходимые фрагменты, они должны выделиться оранжевой рамочкой (рамка активности).

Что теперь можно с ними сделать:

1. Объединить , то есть из нескольких фрагментов сделать один. Здесь есть одно НО. Помните я написал про принцип действия раскройки? Так вот исключений не будет. Это означает, что, например, из трех фрагментов разных по размеру, после объединения будет один большой прямоугольник, который по ширине и высоте будет равен двум самым крайним границам рамок. Если непонятно, вот наглядный пример:

Команда Объединить расположена в меню, которое вызывается нажатием правой кнопкой мыши на активном фрагменте:

2. Выравнивание фрагментов относительно друг друга. Для этого на панели параметров инструмента расположены блоки кнопок. Они, кстати, работают аналогичным образом, что и классическое .

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

4. Кнопка Разделить открывает диалоговое окно, в котором можно выбрать на сколько частей по вертикали и горизонтали вы хотите разделить активные фрагменты.

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

Как сохранить только один фрагмент из всех, что были созданы

Раскроив изображение на множество частей, вы решили сохранить только один фрагмент? Хорошо! Фотошоп может это сделать.

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

Для этого нужно перейти в режим: Файл — . В этом режиме выберите в левой части инструмент Выделение фрагмента , затем кликните по нужному участку изображения. Этот участок станет активным, то есть будет выделяться более насыщенным цветом. Затем нажмите кнопку Сохранить .

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

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

Первым делом, внизу окна, в группе Фрагменты из выпадающего списка выберите Выделенные фрагменты . Именно эта настройка и отвечает за поставленную задачу — сохранить только один фрагмент.

Затем правильно завершим начатое, а именно: в группе Формат установите Только изображения , в Настройках — Фоновое изображение . Не забудьте выбрать папку для сохранения и, по необходимости, задать имя файлу.

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

45296 ,

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

На самом деле, всё это делается элементарно. В Adobe Photoshop для этих целей предусмотрен специальный инструмент . Он позволяет разрезать целое изображение на прямоугольные части и сохранять их в виде отдельных изображений всего несколькими кликами мыши. Так как является вложенным элементом панели инструментов, начинающие пользователи его попросту не видят. Находится он в том же меню, что и «Рамка» .

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

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

А теперь самое главное. Чтобы сохранить изображение в виде отдельных частей, в главном меню нужно выбирать опцию не «Сохранить как» , а .

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

После этого жмём кнопку и указываем режим сохранения.

Доступны три режима: «Только изображения» , «HTML и изображения» и «Только HTML» . Если вы не собираетесь создавать HTML-страничку, можете оставить всё по умолчанию.

Все выделенные фрагменты будут сохранены в отдельную папку «images» в указанном вами месте.