Как поместить изображение в макет или рамку

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

Рассмотрим на примере монитора. В данном случае мы поместим скриншот в LCD-монитор при помощи Adobe Photoshop CS2. Все картинки в статье кликабельны.

Сначала на бескрайних просторах интернета находим донора (макет, шаблон, рамку). Желательно, чтобы это был psd-формат со слоями или прозрачный png. В противном случае макет придётся изготавливать самостоятельно, как я сделал для этого примера: нашёл крупную фотографию монитора и при помощи прямоугольного выделения с небольшой растушёвкой удалил экран:

Полновесный вариант макета монитора здесь.

А вставлять в монитор будем вот этот скриншот:

Здесь есть один нюанс: нужно, чтобы оба изображения имели сходные размеры в Document Size, а именно Resolution:

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

Далее пошагово:

1. Открываем оба изображения в фотошопе 
2. Выбираем скриншот, нажимаем V на клаве, чтобы появилась стрелка на курсоре и перетаскиваем на монитор
3. При этом автоматически создадутся два слоя, и в окне слоёв (Window-Layers) меняем их местами:
   
   
   
   
4. Подгоняем вручную под размеры экрана, при необходимости можно за боковые маркеры подтянуть изображение по размеру под макет
5. Жмём Layer-Merge Visible (сводим видимые слои) и сохраняем результат в png

Результат:

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

Ещё один макет для тренировки - Mac:

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