1. Design & Illustration
  2. Typography

Як аб'яднаць фатаграфію і тэкст, каб дасягнуць драматычнага эфекту 

by
Read Time:11 minsLanguages:
This post is part of a series called Learn Adobe InDesign.
How to Make a Magazine: From a Creative InDesign Template
How to Create a New Year’s Resolution Poster in Adobe InDesign and Photoshop

Belarusian (беларуская мова) translation by Olya Misuraghina (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

У гэтым уроку мы паглядзім, як сумясціць шрыфт з фотаздымкамі, каб стварыць ўражлівы 3D-эфект. Такі эфект можна ўбачыць у рэкламе і на плакатах, але атрымаць яго не складана, як спачатку можа здацца.

Я пакажу вам на прыкладзе гэтай фатаграфіі Мельбурна, як яго стварыць з нуля ў Adobe Photoshop і завяршыць у Adobe InDesign.

final text effectfinal text effectfinal text effect

Хочаце стварыць свой уласны ўнікальны дызайн? Знайдзіце прыгожы гарадскі пейзаж і яркі шрыфт, на Envato Market існуе велізарны выбар.

Гатовыя пачаць? Выдатна, паехалі! 

1. Што вам спатрэбіцца для гэтага ўрока 

Каб стварыць эфект зліцця тэксту і фатаграфіі, трэба ўважліва выбраць для гэтага фатаграфію і шрыфт. Каб дасягнуць гэтага эфекту, трэба аддзяліць часткі выявы ад фону, а гэта можна зрабіць, калі на фатаграфіі ёсць некалькі паслядоўных слаёў перспектывы. Гарадскі пейзаж - выдатны выбар для такога праекта, таму што некаторыя будынкі будуць знаходзіцца бліжэй да фатографа, а іншыя - усё далей і далей ад яго.

Для гэтага ўроку мы будзем выкарыстоўваць: 

Загрузіце фатаграфію і шрыфт і ўсталюйце яго на кампутар. Вам таксама неабходна атрымаць доступ да Adobe Photoshop і Adobe InDesign

final posterfinal posterfinal poster

2. Зрабіце разметку для свайго дызайну 

Першым крокам у стварэнні 3D-эфекту будзе складанне разметкі для дызайну, вы будзеце выкарыстоўваць той жа маштаб і тое ж фарматаванне тэксту, што і ў канцы. Гэта дазволіць вам сапраўды ўбачыць, якія часткі фатаграфіі трэба будзе выразаць, каб яны перакрывалі літары. 

Крок 1 Адкрыйце фатаграфію Мельбурна ў Adobe Photoshop. Крок 2 На ўкладцы Layers прадублюйце пласт Background і пераназавіце яго ў Original Cityscape.

Адкрыйце фатаграфію Мельбурна ў Adobe Photoshop

image in photoshopimage in photoshopimage in photoshop

Крок 2 

На ўкладцы Layers прадублюйце пласт Background і пераназавіце яго ў Original Cityscape.

duplicate layerduplicate layerduplicate layer

Крок 3 

Перайдзіце на Image > Image Rotation і абярыце паварот на 90° CW

image rotationimage rotationimage rotation
rotated imagerotated imagerotated image

Крок 4 

Абярыце прыладу Type Tool (T) і перамесціце яе на фотаздымак, каб стварыць рамку для тэксту. Надрукуйце "MEL". Адкрыйце ўкладку Character (Window> Character) і пераключыцеся на шрыфт (Font) Bebas Neue, Bold, памер 535 pt і павялічце адлегласць паміж літарамі (Tracking) да 40. Усталюйце колер (Color) на белы.

Размясціце рамку з тэкстам як мага бліжэй да таго, што мы толькі што зрабілі.

text MELtext MELtext MEL

Крок 5 

Скапіюйце і ўстаўце рамку з тэкстам, размясціўшы яе ніжэй, як паказана на здымку, і выпраўце тэкст на "BOU".

text BOUtext BOUtext BOU

Крок 6 

Зноў націсніце "ўставіць" і выпраўце тэкст на "RNE". Размясціце яго ніжэй, як паказана на здымку. 

text RNEtext RNEtext RNE

Крок 7 

Стварыце новую папку ва ўкладцы Layers, назавіце яе Typography (Шрыфт) і перамясціце ўсе тэкставыя пласты ў гэтую папку.

new foldernew foldernew folder
layerslayerslayers

Затым націсніце на замочак.

locked folderlocked folderlocked folder

Крок 8 

Надрукуйце фатаграфію на сваім хатнім кампутары (File> Print). Не трэба друкаваць фота цалкам, толькі ўчастак з тэкстам. 

text and phototext and phototext and photo

Крок 9 

Потым вазьміце ручку або аловак і заштрыхуйце ўчасткі тэксту, за якімі хаваюцца будынкі. Мэта ў тым, каб будынкі маглі выглядаць з-за левага краю літар, ствараючы шматслаёвы 3D-эфект.

Шукайце ўчасткі, дзе можна зрабіць так, каб літары "абдымалі" вялікія будынкі, як я зрабіла з "O" і "U".

print-out of effectprint-out of effectprint-out of effect

Гэта грубая схема малюнка, якая будзе ў вас перад вачыма. Магчыма, вы крыху адыйдзе ад яе, калі будзеце рэдагаваць малюнак на кампутары, але яна вам сапраўды дапаможа. Трымайце яе як узор перад сабой на стале падчас працы. 

3. Стварыце ў Photoshop эфект абрэзаных літар 

Крок 1 

Вярніцеся да свайго дакумента ў Photoshop. Павялічце ўчастак малюнка з літарамі "MEL", каб добра разгледзець дэталі.

zoomed inzoomed inzoomed in

Паглядзіце на літару "M" і на сваю разметку на паперы. Паглядзіце ўважліва, якія ўчасткі фатаграфіі вы хочаце размясціць перад літарай, а потым адключыце бачнасць папкі Typography на ўкладцы Layers

Крок 2 

Вазьміце інструмент Polygonal Lasso Tool (L) і абыйдзіце з ім па краях будынка, які вы хочаце выразаць, імкнучыся ставіць разметку як мага бліжэй да сапраўдных краёў будынка. Завяршыце абводку ў першым пункце і націсніце на кнопку Refine Edge уверсе рабочай панэлі, на ўкладцы Controls

lasso toollasso toollasso tool

Крок 3 

Націсніце на Smart Radius і трохі адрэгулюйце настройкі, каб абводка была бліжэй да краю будынкаў. Трэба, каб край абводкі быў як мага бліжэй да сілуэту будынка. Калі трэба, адрэгулюйце слайдэр Shift Edge і зусім трохі Smooth (прыкладна 1) і Feather (прыкладна 0.2).

refine edgerefine edgerefine edge

Можна таксама выкарыстоўваць Erase Refinements і Refine Edge Tools, каб зрабіць абводку яшчэ ідэальней.

refine edgerefine edgerefine edge

Крок 4 

Далей, калі вам усё падабаецца, націсніце OK. Націсніце Control-C (Windows) або Command-C (Mac), каб скапіяваць выдзеленую вобласць, а потым націсніце Control-V (Windows) або CommandV (Mac), каб ўставіць яе ў новы пласт.

pasted buildingpasted buildingpasted building

Перамясціце слой над папкай Typography, зрабіўшы яе бачнай, і вы ўбачыце, як частка будынка перамясцілася на першы план перад літарай "М".

typography foldertypography foldertypography folder

Крок 5 

Цяпер паспрабуйце гэты працэс з наступным участкам будынкаў, адзначаным у вас на паперы. Адключыце бачнасць папкі Typography і націсніце на слой Original Cityscape, каб актывізаваць яго.

original cityscape layeroriginal cityscape layeroriginal cityscape layer

Выкарыстоўвайце інструмент Lasso Tool (L), каб вылучыць наступны ўчастак будынкаў, і зноў націсніце на Refine Edge. У залежнасці ад кантраснасці розных частак фатаграфіі, вам можа спатрэбіцца трохі адрэгуляваць настройкі Radius, Smooth, Feather і Shift Edge, каб абвесці сапраўдны сілуэт будынка. 

refine edgerefine edgerefine edge

Крок 6 

Скапіюйце і ўстаўце (Copy і Paste) выдзелены ўчастак на новы пласт і перацягніце яго, каб ён быў над папкай Typography. Тут вы бачыце, што я вылучыла занадта вялікі ўчастак...

typography foldertypography foldertypography folder
lasso toollasso toollasso tool

таму я наўпрост бяру інструмент Lasso Tool (L), абводжу непатрэбны ўчастак і націскаю Delete

lasso toollasso toollasso tool

Крок 7

Каб упарадкаваць участкі слаёў, якія вы выразалі, калі яны выглядаюць трохі невыразнымі, проста націсніце на адпаведны слой на ўкладцы Layers, выкарыстоўвайце інструмент Lasso Tool (L), каб абвесці ўчасткі за краем будынкаў, і націсніце Delete.

lasso toollasso toollasso tool

Крок 8 

Калі некаторыя ўчасткі, якія вы выразалі, усё яшчэ вас не задавальняюць, але іх не так лёгка вылучыць, можна выкарыставаць функцыю Color Range (Select> Color Range). Для выдзялення ўчастка націсніце на пэўныя адценні, напрыклад, трохі ружовае адценне па краі гэтага будынка.

color rangecolor rangecolor range
color rangecolor rangecolor range

Зноўку зрабіце вылучэнне ў з‘явіўшымся акне Color Range, а потым націсніце OK і Delete, каб пазбавіцца ад вылучанага ўчастка. Таксама можна націснуць на кнопку Refine Edge, як раней, каб адрэгуляваць межы вылучанай вобласці. 

refine edgerefine edgerefine edge
building cut outbuilding cut outbuilding cut out

Крок 9 

Каб эфект сапраўды выглядаў 3D, нам трэба дадаць трохі цені да кожнай выразанай вобласці. Для гэтага націсніце на пласт, на які ўстаўлены ўчастак будынка, і зрабіце на ім двайную пстрычку мышшу, адкрыецца акно Layer Style.

layer stylelayer stylelayer style

Націсніце на Drop Shadow унізе ў меню злева. Наладзьце Opacity прыкладна на 45% і адрэгулюйце вугал падзення цені, каб яна падала на белую літару ўнізе.

Наладзьце Distance, Spread і Size, каб цень была ледзь заўважнай. Затым націсніце OK.

drop shadowdrop shadowdrop shadow

Паўтарыце тое ж самае з іншым падобным слоем, дадаючы трохі цені (Drop Shadow).

Прыбярыце галачку з Use Global Light, каб у вас было больш свабоды з выбарам напрамку цені.

drop shadowdrop shadowdrop shadow

Вы ўбачыце, як гэты эфект пачынае набываць форму. 

effect so fareffect so fareffect so far

Крок 10 

Працягвайце рабіць тое ж самае з усёй выявай, выбіраючы ўчасткі будынкаў з дапамогай Lasso Tool (L) і функцыі Refine Edge

refine edgerefine edgerefine edge

Крок 11 

Устаўляйце (Paste) іх на новыя слаі і выдаляйце (Delete) у іх непатрэбныя вобласці. 

deleted sectiondeleted sectiondeleted section
lasso toollasso toollasso tool
lasso toollasso toollasso tool

Крок 12 

Дадайце цень (Drop Shadow) на кожны выразаны ўчастак з будынкамі. 

drop shadowdrop shadowdrop shadow
lasso toollasso toollasso tool
effect so fareffect so fareffect so far

Крок 13 

Такім жа чынам вылучыце на першы план дэталі будынкаў, напрыклад, вежы і шпілі.

refine edgerefine edgerefine edge
drop shadowdrop shadowdrop shadow
text effect so fartext effect so fartext effect so far

Выкарыстоўвайце сваю паперу ў якасці кіраўніцтва, выразаючы больш буйныя ўчасткі будынкаў, каб літары "О" і "U" атрымаліся вакол іх. 

lasso toollasso toollasso tool
text effecttext effecttext effect
lasso toollasso toollasso tool
lasso toollasso toollasso tool
effect so fareffect so fareffect so far

Крок 14 

Перайдзіце да літар "RNE".

Выкарыстоўвайце той жа метад: вылучыць, скапіяваць, уставіць, выдаліць непатрэбныя ўчасткі, а потым дадаць цень.

lasso toollasso toollasso tool
layerslayerslayers
lasso toollasso toollasso tool
lasso toollasso toollasso tool
layer stylelayer stylelayer style
text effect finishedtext effect finishedtext effect finished

Калі вы зробіце гэта з усім малюнкам і будзеце задаволеныя вынікам, націсніце File> Save As. Захавайце малюнак у выглядзе файла PSD

4. Палепшыце дызайн плаката ў InDesign 

Як толькі вы стварылі свой 3D-малюнак, яго можна выкарыстоўваць у розных відах праектаў. Зараз мы паглядзім, як можна імпартаваць гэты малюнак у InDesign і стварыць дызайн турыстычнай афішы. 

Крок 1 

Згарніце Photoshop і адкрыйце Adobe InDesign.

Націсніце на File> New> Document. Усталюйце настройкі Intent на Print, а Number of Pages на 1. Прыбярыце галачку з Facing Pages.

Выберыце A3 у Page Size і дадайце на ўсе бакі поля (Margins) 15 mm. Усталюйце таксама Bleed на 5 mm. Націсніце OK

new documentnew documentnew document
new documentnew documentnew document

Крок 2 

Разгарніце ўкладку Layers (Window> Layers) і націсніце падвойнай пстрычкай на Layer 1, пераназавіце яго Graphics. Стварыце другі новы слой і пераназавіце яго Border

layer optionslayer optionslayer options

Крок 3

Націсніце на замочак на слаі Border і націсніце на слой Graphics.

layers lockedlayers lockedlayers locked

Абярыце інструмент Rectangle Frame Tool (F) і перамесціце яго на старонку, каб стварыць рамку для малюнка, якая даходзіць з усіх бакоў да краю абрэзкі.

Націсніце File> Place, абярыце захаваны файл PSD і націсніце Open. Дазвольце малюнку запоўніць рамку, тэкст будзе, груба кажучы, пасярэдзіне. 

image placedimage placedimage placed

Крок 4 

Вазьміце інструмент Type Tool (T) і перамесціце яго на старонку, каб зрабіць невялікую тэкставую рамку над літарамі "EL" злева уверсе старонкі.

Надрукуйце "VISIT" і, альбо на ўкладцы Character (Window> Type & Tables> Character), альбо уверсе ўкладкі Controls, усталюйце шрыфт (Font) на Bebas Neue Regular, памер 45 pt, Tracking 100 (адлегласць паміж літарамі), колер шрыфта (Font Color) на [Paper]

character panelcharacter panelcharacter panel

Крок 5 

Разгарніце ўкладку Swatches (Window> Color> Swatches) і націсніце на кнопку New Swatch унізе. Змяніце ўзор колеру на C=20 M=54 Y=80 K=9 і націсніце OK

new swatchnew swatchnew swatch

Крок 6 

Скапіюйце і ўстаўце (Copy і Paste) тэкставую рамку "VISIT", размясціўшы яе пад літарамі "RN". Змяніце тэкст на "THIS SUMMER", трохі паменшыце памер шрыфта (Font Size) і наладзьце колер шрыфта (Font Color) на свой новы чырвоны ўзор.

this summerthis summerthis summer

Крок 7 

Выкарыстоўвайце інструмент Line Tool (\), каб дадаць прамыя гарызантальныя лініі справа ад "VISIT" і злева ад "THIS SUMMER", правёўшы іх за край старонкі. Усталюйце на верхнюю лінію настройкі колеру [Paper] Stroke Color, а на ніжнюю - колер новага аранжавага ўзору.

white strokewhite strokewhite stroke
orange strokeorange strokeorange stroke
result so farresult so farresult so far

Крок 8 

Вярніцеся на ўкладку Layers і націсніце на замочак на слаі Graphics. Прыбярыце замочак з слоя Border

layers panellayers panellayers panel

Крок 9 

Вазьміце інструмент Rectangle Tool (M) і стварыце на старонцы прамавугольную форму, якая нядрэнна змяшчаецца насупраць лініі палёў. Усталюйце настройкі Stroke Color на [Paper].

Затым перайдзіце на Object> Corner Options і дадайце да прамавугольніку закругленыя куты ў 2 mm на панэлі Size

corner optionscorner optionscorner options

Крок 10 

Цяпер перайдзіце на Object> Effects> Transparency і паменшыце Opacity прамавугольніка да 55%

transparencytransparencytransparency

Крок 11 

Вазьміце інструмент Scissors Tool (C) і абрэжце ўчасткі прамавугольніка так, каб засталіся толькі вобласці межаў уверсе злева і ўнізе справа.

scissors toolscissors toolscissors tool
cut framecut framecut frame
scissors toolscissors toolscissors tool

Вось і ўсё! Вы скончылі дызайн плаката, і ён выглядае выдатна. Выдатная праца!

final posterfinal posterfinal poster

Засталося толькі экспартаваць яго з наладамі для друку. 

Крок 12 

Перайдзіце на File> Export. Абярыце Adobe PDF (Print) з выпадальнага меню Format.

З меню Adobe PDF Preset уверсе акна, якое ядкрылася, выберыце [Press Quality].

press qualitypress qualitypress quality

Націсніце на Marks and Bleeds з меню злева і пастаўце галачкі на All Printer's Marks і Use Document's Bleed Settings.

marks and bleedsmarks and bleedsmarks and bleeds

Націсніце OK, каб ваш дакумент быў гатовы да друку. Яго можна адправіць прама на прынтэр!

exported pdfexported pdfexported pdf

Заключэнне: скончаны 3D-постэр 

Выдатная праца, вы дамагліся драматычнага 3D-эфекту, аб'яднаўшы тэкст і фатаграфію гарадскога пейзажу, і гэта выглядае цудоўна.

final posterfinal posterfinal poster

Гэта па-сапраўднаму дзейсная тэхніка, якая дадае драматызму рэкламе, плакатам і іншым візуальным матэрыялам. Давайце коратка паўторым асноўныя крокі па аб'яднанні тэксту з фотаздымкамі: 

  • Выдаткуйце трохі часу на выбар падыходнай фатаграфіі і шрыфта: шматслойныя фатаграфіі з вялікай колькасцю дэталяў падыдуць лепш за ўсё, таму гарадскія пейзажы будуць выдатным выбарам. Шрыфт павінен быць дастаткова моцным, каб вылучацца на фоне фатаграфіі, простыя, тонкія шрыфты часта лепш падыходзяць, таму што дазваляюць абвіваць будынкі.
  • Перад пачаткам працы складзіце схему дызайну: зрабіце макет у Photoshop і раздрукуйце яго. Выкарыстоўвайце ручку або аловак, каб заштрыхаваць участкі, якія трэба абрэзаць.
  • Выразайце адну за адной вобласці на фатаграфіі, капіюючы кожную выдзеленую вобласць на новы слой.
  • Перагледзьце дызайн, упарадкаваўшы невыразныя краі і дадаўшы лёгкую цень, каб дасягнуць 3D-эфекту.
  • Захавайце малюнак і імпартуйце яго ў InDesign, каб стварыць больш скончаны дызайн плаката.

Хочаце знайсці больш гарадскіх пейзажаў для сваіх 3D-праектаў? Загрузіце велізарную бібліятэку малюнкаў на Envato Market і знайдзіце свой любімы шрыфт для дызайну плакатаў.

Хочаце перайсці на новы ўзровень у дызайне, але не ведаеце як? Атрымайце трохі дадатковай дапамогі ад каманды Envato Studio.

One subscription.
Unlimited Downloads.
Get unlimited downloads