Как вставить картинку в картинку в фотошопе – подробное руководство. Вставлять картинки фотошоп


Как вставить картинку в картинку в фотошопе – подробное руководство

Если вам необходимо объединить элементы фото с разных источников, нужно знать, как вставить картинку в картинку в фотошопе.

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

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

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

откройте в любой версии программы Photoshop первоначальное изображение;

Рис. 1 – открытие первоначальной картинки

Рис. 1 – открытие первоначальной картинки

далее нужно создать область, в которую будет вставлено другая картинка. Для этого на главной панели инструментов найдите вкладку «Лассо» (в категории «Выделение области»). Выбор формы инструмента зависит от формы участка картинки, куда будет вставлен объект. В этом случае подойдёт «Прямолинейное лассо»;

Рис. 2 – содержимое вкладки «Лассо»

Рис. 2 – содержимое вкладки «Лассо»

Теперь выделите область с помощью мышки, как показано на рисунке ниже;

Рис. 3 – выделение области с помощью инструмента «Прямолинейное лассо»

Рис. 3 – выделение области с помощью инструмента «Прямолинейное лассо»

Откройте второе фото как новый проект в Photoshop. Первый проект не закрывайте. В главном окне должны появиться две вкладки, в которых находятся первое и второе изображение. Перейдите на вкладку со вторым фото и нажмите на сочетание кнопок Ctrl и A. Объект будет полностью выделен. Вокруг всей рамочки появиться соответственная анимационная кривая;

Рис. 4 – открытие и выделение второго изображения

Рис. 4 – открытие и выделение второго изображения

Скопируйте выделенный объект в буфер обмена компьютера путём нажатия клавиш Ctrl и C

Просто вставить картинку с помощью Ctrl+V в этом случае не получится, ведь мы добавляем её только в заданную область. В редакторе предусмотрена отдельная функция для вставки одного изображения в другое. Откройте вкладку «Редактирование». Затем кликните на «Специальная вставка» и во всплывающем списке нажмите на инструмент «Вставить в». Можно воспользоваться комбинацией кнопок Alt–Shift–Ctrl–V.

Заметьте! В CS5 версии Photoshop команда «Вставка в» расположена сразу среди элементов вкладки «Редактирование».

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

Обратите внимание на окошко слоёв проекта. В нём должен появиться объект «Слой 1» — это выделенная с помощью лассо область. А также должно быть фоновое изображение и добавленная нами вторая картинка;

Рис. 5 – содержимое окна слоёв проекта

Рис. 5 – содержимое окна слоёв проекта

Так как команда «Вставить в» автоматически определяет выделенную область и добавляет в неё новый объект, вторая картинка будет сразу добавлена в первую. Выглядит это следующим образом:

Рис. 6 – результат добавления одно картинки в выделенную область другой

Рис. 6 – результат добавления одно картинки в выделенную область другой

Чтобы улучшить перспективу, выберите инструмент «Свободная трансформация». Теперь нужно выделить область перенесённого фото. Нажмите на сочетание Shift–Ctrl–Alt. Теперь отпустите левый верхний край вниз, как показано на рисунке. Таким образом вы настроите положение вставленного фото.

Рис. 7 – создание перспективы для вставленного фото

Рис. 7 – создание перспективы для вставленного фото

Чтобы полностью устранить неестественность, можно добавить тень. В основной маске стиля можно добавить слоя выделенной тени. Это придаст финальной картинке объёма. Итоговое изображение выглядит так:

Рис. 8 – итоговое изображение

Рис. 8 – итоговое изображение

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

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

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

Рис. 9 – внешний вид панели вкладок

Рис. 9 – внешний вид панели вкладок

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

Рис. 10 – добавление картинки в картинку

Рис. 10 – добавление картинки в картинку

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

Рис. 11 -перетаскивание фото из одной области в другую

Рис. 11 -перетаскивание фото из одной области в другую

В результате вы сможете изменить положение перемещённого фото.

Рис. 12 – результат вставки фото с другой вкладки

Рис. 12 – результат вставки фото с другой вкладки

Ещё один способ вставки – использовать проводник компьютера. Откройте в программе Фотошоп первое фото. Затем найдите на панели главного меню раздел «Файл». Нажмите на пункт «Поместить». В открывшемся окне проводника найдите расположение второй картинки, выберите её и нажмите на кнопку «Поместить». Измените масштаб добавленного объекта, затем кликните на свободной области, чтобы применить изменение.

Рис. 13 – использование команды «Поместить…»

Рис. 13 – использование команды «Поместить…»

Создание плавного перехода между двумя картинками

В результате выполнения этого способа, две картинки будут соединены в одну с помощью плавного перехода. Откройте обе фотографии в одном проекте с помощью команды «Поместить…». На панели слоёв сделайте верхний слой прозрачным, но только наполовину. Для этого выберите параметр «Непрозрачность» и уменьшите его на 50 или 60 пунктов, до тех пор, пока через первый слой не будет хорошо видно нижний.

Рис. 14 – изменения параметров прозрачности верхнего слоя

Рис. 14 – изменения параметров прозрачности верхнего слоя

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

Рис. 15 – совмещение картинок

Рис. 15 – совмещение картинок

Плавный переход можно создать с помощью инструмента «Ластик». Его использование позволяет создать более плавный переход и лучшее качество итогового изображения. Добавьте два рисунка в проект. Задайте резинка такие параметры: жёсткость – 0, размер – в зависимости от области, которую нужно «размыть», непрозрачность – 20–30 процентов. Сотрите ненужные части верхнего фото. Теперь задайте непрозрачность как 100%. Это сделает слой непрозрачным, но те участки, где вы использовали ластик будут прозрачными. Сопоставьте края двух рисунков.

Добавьте новую маску слоя. Выберите режим градиента (плавный переход от чёрного цвета к белому). Сделайте маску активной и добавьте градиент на область соединения фотографий. Чтобы сделать картинку более натуральной, можно самостоятельно дорисовать белые области с помощью кисти. Результат использования «Ластика» и градиента указан на рисунке ниже:

Рис. 16 – итоговое изображение

Рис. 16 – итоговое изображение

Источник

pomogaemkompu.temaretik.com

Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт | KtoNaNovenkogo.ru

Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

Обновлено: 16 июля 2017

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодняшняя статья будет посвящена подготовке в программе Фотошоп (можно и в его онлайн версии Pixlr, описанной здесь) графических файлов для их публикации на сайте. У меня чаще всего используются скрины сделанные на компе или телефоне, а затем прошедшие обработку (в основном в Снагите).

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

Сам я в Photoshop и даже в его упрощенной онлайн версии не силен (довольствуюсь возможностями простенького просмотрщика FastStone Image Viewer, про который речь шла тут и встроенного в него редактора), поэтому мне пришлось обратиться к любимой супруге с просьбой описать процесс подготовки моих фоток со всеми нюансами и тонкостями.

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

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

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

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

  1. Быть уникальными, а не взятыми с других ресурсов
  2. Не слишком маленького размера и формата JPEG, GIF, PNG или BMP.
  3. У них обязательно должны быть прописаны атрибуты Alt (и, при желании, Title), как написано в этой статье. Иначе поисковые системы просто не включат их в свой индекс поиска по картинкам.
  4. В атрибуте Alt должны быть прописаны ключевые слова, по которым вы хотите продвинуть данную фотку.
  5. Желательно, чтобы в названиях графических файлов тоже присутствовали ключевые слова (в виде транслита, по правилам описанных в этой статье о транслитерации)
  6. Необязательным, но желательным условием является то, чтобы в каждом теге IMG ваших изображений были бы прописаны атрибуты WIDTH и HEIGHT. Они служат для задания ширины и высоты изображения и при определенном стечении обстоятельств могут способствовать ускорению загрузки вебстраницы.
  7. Фото должны быть размещены на вашем сайте легально, иначе могут неожиданно возникнуть проблемы с правообладателями. Покупать графику я не агитирую, но можно найти вполне компромиссное решение — бесплатные фотобанки и микростоки, где размещены многие тысячи профессиональных фотоматериалов.

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

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

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

Для создания нового файла в Photoshop заходим в МЕНЮ и выбираем команду СОЗДАТЬ (в более новой версии Фотошопа: МЕНЮ — НОВЫЙ). У нас открывается вот такое диалоговое окно:

В нем мы задаем имя для будущей картинки; выбираем ее размер (ширину и высоту), нажав вкладку НАБОР; а также задаем единицу измерения (пиксели, сантиметры, дюймы...).

Далее задаем ФОН. По умолчанию всегда будет стоять БЕЛЫЙ. Если мы выберем ФОНОВЫЙ ЦВЕТ, то будущее изображение окрасится в тот цвет, который в данный момент находится основным в палитре цветов. Выбрав ПРОЗРАЧНЫЙ фон — поле окрасится шахматкой.

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

Слева в интерфейсе Фотошопа находится полоска с инструментами, которая называется ПАЛИТРА ИНСТРУМЕНТОВ. Как раз на ней, в самом низу, и живет описанная выше ПАЛИТРА ЦВЕТОВ.

Для того, чтобы открыть нужное нам фото, мы заходим в МЕНЮ и выбираем команду ОТКРЫТЬ. Далее ищем на своем компьютере папку с нужной фоткой и щелкаем по ней.

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

Добавляем слои и переносим их на наше изображение

Самый простой способ перенести одну картинку на другую — это обыкновенное перетаскивание его с помощью мыши. Сначала выбираем инструмент ПЕРЕМЕЩЕНИЕ, а затем хватаем вновь добавленное изображение левой кнопкой мыши и перетаскиваем на то, что создали (пустую заготовку нужного размера с прозрачным фоном), после чего отпускаем.

В моем случае видна лишь новая картинка на прозрачном фоне (показан шахматкой), а созданный документ (заготовка), под названием «Без имени-1», скрыт.

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

Там наш телефончик можно передвигать с помощью мышки в ту область шаблончика, которая нам нужна. Так же передвигать можно с помощью стрелочек на клавиатуре, при условии, что в палитре инструментов выбран инструмент ПЕРЕМЕЩЕНИЕ.

В окне НАВИГАТОР программы Фотошоп мы можем просмотреть наше результирующее изображение. Двигая ползунок — изменить масштаб просмотра, т.о. просмотреть документ как бы через лупу, дабы увидеть возможные недочеты. Изменить же реально масштаб можно, зайдя в МЕНЮ — ИЗОБРАЖЕНИЕ — РАЗМЕР.

В палитре СЛОИ отображается всё, что мы перенесли на наш слой. К примеру, в моем случае, в палитре СЛОИ находятся всего два: созданный шаблон изображения для сайта на белом фоне и одна перенесенная на него картинка (телефончик).

Ее на нашем документе можно не только перенести в любую область, но и наклонить/перевернуть. Для этого в МЕНЮ выбираем РЕДАКТИРОВАНИЕ — СВОБОДНОЕ ТРАНСФОРМИРОВАНИЕ.

Но перед этим, если у вас перенесено уже несколько картинок на нашу заготовку, нужно выбрать нужный слой в палитре СЛОИ, и только потом применять СВОБОДНОЕ ТРАНСФОРМИРОВАНИЕ. В противном случае, трансформирование применится к слою, который будет активным в данный момент, а не к тому, который вам необходимо наклонить/перевернуть.

Выбрав команду СВОБОДНОЕ ТРАНСФОРМИРОВАНИЕ, наше изображение выделится тоненькой рамочкой.

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

Добавление текста или логотипа на изображение в Photoshop

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

Для этого в панели инструментов Фотошопа выбираем ТЕКСТ. Ставим курсор на нужное место в заготовке (созданном документе) и начинаем вбивать нужный нам текст, к примеру, адрес вашего сайта.

В настройках инструмента ТЕКСТ (смотрим рисунок выше) можем задать следующие настройки, выделив мышкой то, что мы написали в документе:

  1. изменить ориентацию текста, т.е. сделать из горизонтального вертикальный и, наоборот
  2. задать жирность/курсив
  3. задать размер
  4. произвести деформацию текста, т.е. сделать его выпуклым, в виде флага и т.п
  5. .

Выбрав в окне Photoshop инструмент ПЕРЕМЕЩЕНИЕ (о нем писалось выше), с помощью мышки или стрелочек на клавиатуре, мы можем переместить в другое место текст логотипа на нашем шаблоне.

Рамка КАДРИРОВАНИЯ

Допустим, ваше изображение оказалось бОльшего размера, чем вам нужно (кстати, если фото не очень хорошего качества, то его можно использовать ретушь). Если вы будете уменьшать его с помощью команды в меню ИЗОБРАЖЕНИЕ — РАЗМЕР, то, изменив его по горизонтали, оно автоматически изменится и по вертикали, и наоборот.

Чтобы такого избежать и существует инструмент РАМКА КАДРИРОВАНИЯ. Выбираем его в окне Фотошопа, щелкам по нужному месту на заготовке и, зажав левую кнопку мыши, растягиваем рамочку, после чего отпускаем левую кнопку мыши.

Рамку кадрирования можно увеличить или уменьшить, ухватившись мышкой за ее уголочки. То, что мы хотим отрезать на итоговом изображении, будет затемнено. Выделили область, которую мы хотим оставить, и нажимаем кнопочку ПРИМЕНИТЬ КАДРИРОВАНИЕ (показано на рисунке выше).

Окно ИСТОРИЯ

В окне ИСТОРИЯ прописываются все наши действия в этой замечательной программе. В моем случае их было совершено пять: создание нового документа для последующей публикации на сайте, перетаскивание на него слоя с картинкой, перемещение рисунка телефончика в другое место на заготовке, перетаскивания туда же слоя с логотипом (в вашем случае — написание текста с помощью инструмента ТЕКСТ) и последующее его позиционирование в нужное место.

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

Так же шаг назад в Photoshop можно сделать с помощью: МЕНЮ — РЕДАКТИРОВАНИЕ — ШАГ НАЗАД.

Если у вас не наблюдается окна ИСТОРИЯ или какого другого описанного мною окна, то зайдите в МЕНЮ — ОКНО и поставьте галочку у нужного вам: история, слои, навигатор и т.д. Окна на рабочем столе в программе Фотошоп можно перемещать с помощью мышки.

Как добавить стиль слоя в Фотошопе

Если мы хотим добавить стиль одному слою, то делаем его активным и нажимаем кнопочку ДОБАВИТЬ СТИЛЬ СЛОЮ, если всему документу, то выделяем все слои с помощью удержания клавиши Shift на клавиатуре, а затем объединяем все три слоя в один, щелкнув по выделенным слоям правой кнопкой мыши и выбрав команду ОБЪЕДИНИТЬ СЛОИ, после чего нажимаем кнопку ДОБАВИТЬ СТИЛЬ СЛОЮ. Шайтанама.

При нажатии на кнопку ОБЪЕДИНИТЬ СЛОИ у нас откроется диалоговое окно с выбором стиля. Но есть и еще один способ открытия этого окна в Photoshop — двойной щелчок мышкой по уже единственному у нас слою в палитре СЛОИ. В этом случае у нас откроется вот такое диалоговое окно со всеми настройками задания стиля:

Данные настройки придадут вашему документу неповторимый стиль. Вы можете применить:

  1. тиснение (сделать картинку объемнее)
  2. наложить тени, как внутренние, так и внешние
  3. задать свечение внутреннее или внешнее, а может и то, и другое
  4. заключить наш документ в рамку
  5. задать ее ширину
  6. цвет и т.п.

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

Сохранение изображения для Web

JPG — это основной формат, в котором сохраняют фотографии. GIF лучше всего применять для сохранения растровых (состоящих из пикселей) изображений с количеством цветом не более 256. Этот формат отлично поддерживает анимацию, а так же часто применяется в web-дизайне.PNG очень схож с GIF, только в отличии от него может отображать большее количество цветов. Подробнее о форматах Gif, Png, Jpg (Jpeg) растровой графики вы сможете прочитать тут.

Чтобы сохранить изображение в Фотошопе, заходим в меню и выбираем ФАЙЛ — СОХРАНИТЬ КАК, но для интернета лучше всего сохранить иным способом: заходим в меню и выбираем ФАЙЛ — СОХРАНИТЬ для Web устройств.

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

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

Как вставить созданную картинку на сайт

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

В этом случае графический файл загружается на сайт с помощью инструментов визуального редактора. Довольно удобно и просто. Но вот я, почему-то, всегда предпочитал другой способ вставки. Сначала подключаюсь к сайту по FTP c помощью моего любимого FTP клиента FileZilla, подробно описанного тут.

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

<img alt="" src="http://ktonanovenkogo.ru/image/25.10.png" />

Для класса img_center1 в моем стилевой файле (из папки с текущей темой оформления Вордпресс) прописано следующее правило:

.img_center1{display:block;background:#e0e0e0;padding:5px;margin:10px auto !important;}

CSS свойство display делает картинку блочным элементом. Ну, а затем с помощью margin:10px auto мы выравниваем ее по середине (по горизонтали). Про CSS свойства margin и padding читайте здесь. Ну, а background, которому посвящена эта публикация, задает серенький фон, который слегка проглядывает по краям, создавая эффект рамки.

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

Лично я пишу статьи в WordPress, используя только HTML редактор, в котором для удобства добавил кнопки, позволяющие быстро вставлять в текст штампы:

Таким образом можно очень быстро вставить фото на блог. Дополнительные кнопки в Html редактор можно добавить с помощью плагина Post Editor Buttons. Как нибудь опишу подробно работу с ним, а пока вы можете сами пробовать разобраться, тем более, что там ничего сложного нет.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Твитнуть

Поделиться

Плюсануть

Поделиться

Отправить

Класснуть

Линкануть

Запинить

Подборки по теме:

Рубрика: Полезные программы

ktonanovenkogo.ru

Как вставить изображение в фотошопе: пошаговая инструкция для новичков

Доброго времени суток, уважаемые читатели блога Start-Luck! Я, Андрей Зенков – человек, который делится с вами практическими советами по веб-дизайну и созданию сайтов для успешной монетизации. В этой статье я расскажу о том, как вставить изображение в фотошопе, тем самым совместив его с другим.

Если вы думаете, что можно выйти в топ-позиции за счет полезного контента, спешу добавить: он работает только в обрамлении дизайна, который радует глаз. Поместите эффектный логотип в шапку сайта – и тот заиграет новыми красками. Дополните текст необычными изображениями – и пользователь задержится на вашем сайте как можно дольше!

Прежде всего, давайте выясним, на каких ресурсах «обитают» изображения высокого качества.

Каждый охотник желает знать…

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

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

Открываем сайт и вводим в строку поиска нужное слово:

Жмём клавишу Enter и наслаждаемся огромным количеством изображений высокого качества:

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

Как соединить два и больше изображений

Незаменимым помощником в этом деле станет редактор Adobe Photoshop. Он позволяет совмещать графические элементы четырьмя способами.

С помощью вкладок

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

Для совмещения картинок придётся разгруппировать их. Для этого наводим курсор мыши на активное окно:

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

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

Для создания цельного изображения уберите лишнее ластиком или при помощи маски:

Через меню программы

Совместить картинки можно и через команды меню. Для этого открываем любое изображение и нажимаем «Файл — Поместить»:

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

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

Через проводник Windows

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

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

С помощью горячих клавиш

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

Вырезаем картинку в буфер обмена при помощи Ctrl+X и, кликнув на другом изображении, жмём Ctrl+V. Количество слоёв при этом увеличивается:

Для трансформации картинки используйте горячие клавиши Ctrl+T, не забывая сохранить изменения кнопкой Enter. Теперь вы без труда создадите эффектный баннер, миниатюру для блога или просто фотографию для галереи.

На финишной прямой

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

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

Фотошоп для начинающих

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

start-luck.ru

Объединение изображений при помощи вставки в выделенную область

Вместо того, чтобы вырезать зияющую дыру в окне, два изображения можно объединить с использованием нового подменю Специальная вставка (Paste Special) меню Редактирование версии CS5 (в предыдущих версиях это меню называлось Вставить в).

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

Возможные варианты:

  • Вставить вместо. Используйте эту команду для того, чтобы расположить изображение в том же месте, где оно находилось в документе, из которого вы его скопировали. Например, если изображение было выровнено по левому краю исходного документа, то и в новом документе оно будет выровнено по левому краю. Этой команде соответствует сочетание клавиш Shift+Ctrl+V.
  • Вставить в. Используйте эту команду, если хотите расположить изображение внутри выделенной области. Программа добавит вставленное изображение на отдельный слой и создаст слой-маску. Вставленное изображение будет видно только в выделенной области; остальная его часть будет закрыта слоем-маской. Сочетание клавиш: Alt+Shift+Ctrl+V.
  • Вставить за пределами. Если вы хотите, чтобы программа фотошоп расположила изображение снаружи выделенной области, выберите этот вариант. Автоматически созданный слой-маска теперь будет закрывать выделенную область, вставленное изображение будет видно только вне ее. Команду удобно использовать для создания рамок или границ изображений.

Примечание

Если вы пользуетесь более ранней версией программы, данную команду можно вызвать, удерживая клавишу Alt и выбрав пункт меню Редактирование => Вставить внутри.

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

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

Выделение при помощи инструмента прямоугольная область

2. После того, как вы выделили требуемую область, щелкните мышью по кнопке Уточнить край (Refine Edge) на панели параметров, чтобы сгладить края.

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

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

4. Вернитесь к документу с рамкой и выберите команду меню Редактирование => Специальная вставка => Вставить в  или нажмите комбинацию клавиш Alt+Shift+Ctrl+V. Фотошоп расположит изображение в отдельном слое вместе со слоем-маской. В окне документа вы увидите часть изображения, видимую в рамке.

Специальная вставка

5. Если фотография больше рамки, ее можно уменьшить с помощью инструмента Свободное трансформирование: нажмите комбинацию клавиш Ctrl+Т и, удерживая клавишу Shift, перетащите мышью один из манипуляторов в углу внутрь изображения, чтобы пропорционально уменьшить изображение. Затем установите указатель мыши внутри границ; указатель мыши примет вид стрелки, позволяющей вам перетаскивать фотографию внутри рамки. Когда фотография будет установлена в нужное положение, нажмите клавишу Enter.

Совет

Если ограничивающий прямоугольник инструмента Свободное трансформирование выйдет за границы документа, нажмите комбинацию клавиш Ctrl+0. Масштаб окна документа изменится именно так, что станут видны все четыре угла прямоугольника. Эту комбинацию клавиш стоит запомнить, потому что она будет вам нужна постоянно.

6. Свяжите вставленную фотографию с маской.

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

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

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

Если, например, ваше изображение и белый фон едины то: выделите слой с рамкой на слоев и дважды щелкните по нему мышью, чтобы сделать слой редактируемым. Далее нажмите клавишу W, чтобы выбрать инструмент Волшебная палочка, и щелкните по области вне рамки, чтобы выделить ее. Если вы выбрали рамку с кучей завитушек и трещин по краям, то выберите команду меню Выделение => Подобные оттенки (Select => Similar), чтобы выделить все белые области. Получив требуемое выделение, сгладьте его края с использованием диалогового окна Уточнить край. Наконец, нажмите клавишу Backspace, чтобы удалить эту белую область. Или воспользуйтесь другими известными вам приемами, например, при помощи каналов.

8. Увеличьте размер холста с помощью инструмента Рамка.

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

9. Выделите слои с рамкой и фотографией и поверните их с помощью инструмента Свободное трансформирование.

Выделите оба слоя, щелкая по ним мышью на палитре слоев, удерживая при этом клавишу Shift, и нажмите комбинацию клавиш Ctrl+T , чтобы выбрать Свободное трансформирование. Установите указатель мыши вне ограничивающего прямоугольника и, когда указатель мыши примет вид изогнутой двойной стрелки, немного переместите его, удерживая левую кнопку мыши, чтобы повернуть рамку и фотографию. Когда изображение будет повернуто на требуемый угол, нажмите клавишу Enter.

Поворот рамки с озображением

10. Добавьте внутреннюю тень в слой с фотографией.

Чтобы фотография выглядела так, словно она в самом деле находится в рамке, понадобится использовать внутреннюю тень. Для начала убедитесь, что выделен только слой с фотографией. Затем щелкните мышью по кнопке fx Добавить стиль слоя (Add a layer style) в нижней части палитры и в контекстном меню выберите команду Внутренняя тень (Inner Shadow). В появившемся диалоговом окне измените параметры тени так, как вам надо и щелкните мышью по кнопке ОК.

11. Добавьте тень в слой с рамкой.

Добавить глубины изображению, чтобы казалось, что рамка действительно висит на стене, можно следующим образом: на палитре слоев выделите слой с рамкой, щелкните мышью по кнопке fx Добавить стиль слоя и в контекстном меню выберите команду Тень (Drop Shadow). Покажу как на белом фоне стало смотреться:

Картина с отбрасываемой тенью

12. Добавьте в документ слой-заливку и задайте его цвет, затем перетащите его в самый низ списка слоев.

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

Картина с фоновым слоем

Совет

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

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

psand.ru


Смотрите также